AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2025-01-01 00:11:29 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: better stack switcher logic

Browse Source 
Now the stack switcher buttons look right even when not in the
header-bar.
This commit is contained in:
Lapo Calamandrei 2014-09-12 13:46:17 +02:00
parent 0060f84477
commit 3d2e8ed1d8
3 changed files with 75 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
gtk/resources/theme/Adwaita/_common.scss
View File

@ -506,31 +506,27 @@ $_dot_color: if($variant=='light', $selected_bg_color,
padding-right: 16px;
}
// stack switcher buttons
.action-bar .stack-switcher &.image-button,
.header-bar .stack-switcher &.image-button {
// override the padding since we need to add some padding on the
// GtkImage itself to fit the circle
padding: 5px 2px;
}
.action-bar .stack-switcher &.text-button,
.header-bar .stack-switcher &.text-button {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px; // I need these to not get overridden by radio
padding-bottom: 6px; // button style
outline-offset: -3px; //
}
.stack-switcher > & {
padding-left: 2px; // subtract the padding which will be added to the
padding-right: 2px; // GtkLabel
// to position the needs attention dot, padding is added to the button
// child, a label needs just lateral padding while an icon needs vertical
// padding added too.
> GtkLabel {
padding-left: 6px; // label padding
padding-right: 6px; //
}
> GtkImage {
padding: 3px 6px; // image padding
padding-left: 6px; // image padding
padding-right: 6px; //
padding-top: 3px; //
padding-bottom: 3px; //
}
&.text-button {
padding: 5px 10px 6px; // needed or it will get overridden
}
&.image-button {
// we want image buttons to have a 1:1 aspect ratio, so compensation
// of the padding added to the GtkImage is needed
padding: 5px 2px;
}
&.needs-attention > GtkLabel,
&.needs-attention > GtkImage {

68
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -820,45 +820,37 @@ GtkCalendar.header .button.titlebutton {
GtkCalendar.header .text-button.button.titlebutton {
padding-left: 16px;
padding-right: 16px; }
.action-bar .stack-switcher .button.image-button, .action-bar .stack-switcher .header-bar .titlebutton.button, .header-bar .action-bar .stack-switcher .titlebutton.button,
.action-bar .stack-switcher .titlebar .titlebutton.button,
.titlebar .action-bar .stack-switcher .titlebutton.button,
.action-bar .stack-switcher GtkCalendar.header .titlebutton.button,
GtkCalendar.header .action-bar .stack-switcher .titlebutton.button, .header-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .titlebutton.button {
.stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
.titlebar .stack-switcher > .button.titlebutton > GtkLabel,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
.titlebar .stack-switcher > .button.titlebutton > GtkImage,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
padding-left: 6px;
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px; }
.stack-switcher > .button.text-button {
padding: 5px 10px 6px; }
.stack-switcher > .button.image-button, .header-bar .stack-switcher > .titlebutton.button,
.titlebar .stack-switcher > .titlebutton.button,
GtkCalendar.header .stack-switcher > .titlebutton.button {
padding: 5px 2px; }
.action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 6px;
outline-offset: -3px; }
.stack-switcher > .button, .header-bar .stack-switcher > .button.titlebutton,
.titlebar .stack-switcher > .button.titlebutton,
GtkCalendar.header .stack-switcher > .button.titlebutton {
padding-left: 2px;
padding-right: 2px; }
.stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
.titlebar .stack-switcher > .button.titlebutton > GtkLabel,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
.titlebar .stack-switcher > .button.titlebutton > GtkImage,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 2px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 2px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
.inline-toolbar .button, .inline-toolbar .header-bar .button.titlebutton, .header-bar .inline-toolbar .button.titlebutton,
.inline-toolbar .titlebar .button.titlebutton,
.titlebar .inline-toolbar .button.titlebutton,

68
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -812,45 +812,37 @@ GtkCalendar.header .button.titlebutton {
GtkCalendar.header .text-button.button.titlebutton {
padding-left: 16px;
padding-right: 16px; }
.action-bar .stack-switcher .button.image-button, .action-bar .stack-switcher .header-bar .titlebutton.button, .header-bar .action-bar .stack-switcher .titlebutton.button,
.action-bar .stack-switcher .titlebar .titlebutton.button,
.titlebar .action-bar .stack-switcher .titlebutton.button,
.action-bar .stack-switcher GtkCalendar.header .titlebutton.button,
GtkCalendar.header .action-bar .stack-switcher .titlebutton.button, .header-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .titlebutton.button {
.stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
.titlebar .stack-switcher > .button.titlebutton > GtkLabel,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
.titlebar .stack-switcher > .button.titlebutton > GtkImage,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
padding-left: 6px;
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px; }
.stack-switcher > .button.text-button {
padding: 5px 10px 6px; }
.stack-switcher > .button.image-button, .header-bar .stack-switcher > .titlebutton.button,
.titlebar .stack-switcher > .titlebutton.button,
GtkCalendar.header .stack-switcher > .titlebutton.button {
padding: 5px 2px; }
.action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 6px;
outline-offset: -3px; }
.stack-switcher > .button, .header-bar .stack-switcher > .button.titlebutton,
.titlebar .stack-switcher > .button.titlebutton,
GtkCalendar.header .stack-switcher > .button.titlebutton {
padding-left: 2px;
padding-right: 2px; }
.stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
.titlebar .stack-switcher > .button.titlebutton > GtkLabel,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
.titlebar .stack-switcher > .button.titlebutton > GtkImage,
GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 4px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 4px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
.inline-toolbar .button, .inline-toolbar .header-bar .button.titlebutton, .header-bar .inline-toolbar .button.titlebutton,
.inline-toolbar .titlebar .button.titlebutton,
.titlebar .inline-toolbar .button.titlebutton,