Adwaita: some OSD rationalization

taking care of https://bugzilla.gnome.org/show_bug.cgi?id=732528 in
the process, any toolbar.osd with a positional style class attached
gets squared corners now.
This commit is contained in:
Lapo Calamandrei 2015-12-03 19:28:57 +01:00
parent d46ab0f62a
commit 07ee962ed3
3 changed files with 102 additions and 263 deletions

View File

@ -199,7 +199,10 @@ popover.magnifier,
box-shadow: none; box-shadow: none;
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
&:backdrop { text-shadow: none; } &:backdrop {
text-shadow: none;
-gtk-icon-shadow: none;
}
} }
/********************* /*********************
@ -454,6 +457,7 @@ button {
} }
} }
//overlay / OSD style //overlay / OSD style
@at-root %osd_button,
.osd & { .osd & {
@include button(osd); @include button(osd);
&:hover { &:hover {
@ -475,9 +479,6 @@ button {
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
&:hover { &:hover {
@include button(osd-hover); @include button(osd-hover);
background-clip: padding-box;
border-color: transparent;
box-shadow: none;
} }
&:insensitive { &:insensitive {
@include button(osd-insensitive); @include button(osd-insensitive);
@ -486,12 +487,7 @@ button {
box-shadow: none; box-shadow: none;
} }
&:backdrop { @include button(undecorated); } &:backdrop { @include button(undecorated); }
&:active, &:checked { &:active, &:checked { @include button(osd-active); }
@include button(osd-active);
background-clip: padding-box;
border-color: transparent;
box-shadow: none;
}
} }
} }
@ -1029,12 +1025,21 @@ toolbar {
-GtkWidget-window-dragging: true; -GtkWidget-window-dragging: true;
padding: 4px; padding: 4px;
background-color: $bg_color; background-color: $bg_color;
.osd &, &.osd { // on OSD
.osd & { background-color: transparent; }
// stand-alone OSD toolbars
&.osd {
padding: 13px; padding: 13px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: $osd_bg_color; background-color: $osd_bg_color;
} }
&.osd.left,
&.osd.right,
&.osd.top,
&.osd.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
} }
//searchbar, location-bar & inline-toolbar //searchbar, location-bar & inline-toolbar
@ -1543,8 +1548,7 @@ popover {
> list, > list,
> .view, > .view,
> toolbar, > toolbar {
&.osd > toolbar {
border-style: none; border-style: none;
background-color: transparent; background-color: transparent;
} }
@ -2632,35 +2636,14 @@ row {
@extend %osd; @extend %osd;
padding: 10px; padding: 10px;
border: none; border: none;
border-radius: 0 0 6px 6px; border-radius: 0 0 5px 5px;
background-color: $osd_bg_color; background-color: $osd_bg_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.8), background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px); transparent 2px);
background-clip: padding-box; background-clip: padding-box;
&:backdrop { background-image: none; } &:backdrop { background-image: none; }
button {
@include button(osd); button { @extend %osd_button; }
&.flat {
@extend %undecorated_button;
-gtk-icon-shadow: 0 1px black;
text-shadow: 0 1px black;
&:backdrop,
&:insensitive,
&:backdrop:insensitive { @extend %undecorated_button; }
}
&:hover { @include button(osd-hover); }
&:active,
&:checked,
&:backdrop:active,
&:backdrop:checked {
@include button(osd-active);
}
&:insensitive,
&:backdrop:insensitive {
@include button(osd-insensitive);
}
&:backdrop { @include button(osd-backdrop); }
}
} }
/************* /*************

View File

@ -141,7 +141,8 @@ popover.osd,
popover.osd:backdrop, popover.osd:backdrop,
.app-notification:backdrop, .app-notification:backdrop,
.osd .scale-popup:backdrop, .osd:backdrop { .osd .scale-popup:backdrop, .osd:backdrop {
text-shadow: none; } text-shadow: none;
-gtk-icon-shadow: none; }
/********************* /*********************
* Spinner Animation * * Spinner Animation *
@ -507,7 +508,10 @@ button, headerbar button.titlebutton,
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
border: none; } border: none; }
.osd button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton, .app-notification button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button, .osd button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton,
.osd .titlebar button.titlebutton, .osd .titlebar button.titlebutton,
.titlebar .osd button.titlebutton { .titlebar .osd button.titlebutton {
color: #eeeeec; color: #eeeeec;
@ -518,7 +522,7 @@ button, headerbar button.titlebutton,
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:hover { .app-notification button:hover, .osd button:hover {
color: white; color: white;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
@ -527,7 +531,7 @@ button, headerbar button.titlebutton,
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:active, .osd button:checked, .osd button:backdrop:active, .osd button:backdrop:checked { .app-notification button:active, .app-notification button:checked, .app-notification button:backdrop:active, .app-notification button:backdrop:checked, .osd button:active, .osd button:checked, .osd button:backdrop:active, .osd button:backdrop:checked {
color: white; color: white;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
@ -536,7 +540,7 @@ button, headerbar button.titlebutton,
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:insensitive, .osd button:backdrop:insensitive { .app-notification button:insensitive, .app-notification button:backdrop:insensitive, .osd button:insensitive, .osd button:backdrop:insensitive {
color: #878a89; color: #878a89;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
@ -544,7 +548,7 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button:backdrop { .app-notification button:backdrop, .osd button:backdrop {
color: #eeeeec; color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
@ -552,7 +556,9 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button.flat, .osd button.sidebar-button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton, .osd button.flat, .osd button.sidebar-button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton,
.osd .titlebar button.titlebutton, .osd .titlebar button.titlebutton,
.titlebar .osd button.titlebutton { .titlebar .osd button.titlebutton {
border-color: transparent; border-color: transparent;
@ -564,7 +570,9 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; } -gtk-icon-shadow: 0 1px black; }
.osd button.flat:hover, .osd button.sidebar-button:hover, .osd headerbar button.titlebutton:hover, headerbar .osd button.titlebutton:hover, .app-notification button.flat:hover, .app-notification button.sidebar-button:hover, .app-notification headerbar button.titlebutton:hover, headerbar .app-notification button.titlebutton:hover,
.app-notification .titlebar button.titlebutton:hover,
.titlebar .app-notification button.titlebutton:hover, .osd button.flat:hover, .osd button.sidebar-button:hover, .osd headerbar button.titlebutton:hover, headerbar .osd button.titlebutton:hover,
.osd .titlebar button.titlebutton:hover, .osd .titlebar button.titlebutton:hover,
.titlebar .osd button.titlebutton:hover { .titlebar .osd button.titlebutton:hover {
color: white; color: white;
@ -574,11 +582,10 @@ button, headerbar button.titlebutton,
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3); }
background-clip: padding-box; .app-notification button.flat:insensitive, .app-notification button.sidebar-button:insensitive, .app-notification headerbar button.titlebutton:insensitive, headerbar .app-notification button.titlebutton:insensitive,
border-color: transparent; .app-notification .titlebar button.titlebutton:insensitive,
box-shadow: none; } .titlebar .app-notification button.titlebutton:insensitive, .osd button.flat:insensitive, .osd button.sidebar-button:insensitive, .osd headerbar button.titlebutton:insensitive, headerbar .osd button.titlebutton:insensitive,
.osd button.flat:insensitive, .osd button.sidebar-button:insensitive, .osd headerbar button.titlebutton:insensitive, headerbar .osd button.titlebutton:insensitive,
.osd .titlebar button.titlebutton:insensitive, .osd .titlebar button.titlebutton:insensitive,
.titlebar .osd button.titlebutton:insensitive { .titlebar .osd button.titlebutton:insensitive {
color: #878a89; color: #878a89;
@ -591,7 +598,9 @@ button, headerbar button.titlebutton,
background-image: none; background-image: none;
border-color: transparent; border-color: transparent;
box-shadow: none; } box-shadow: none; }
.osd button.flat:backdrop, .osd button.sidebar-button:backdrop, .osd headerbar button.titlebutton:backdrop, headerbar .osd button.titlebutton:backdrop, .app-notification button.flat:backdrop, .app-notification button.sidebar-button:backdrop, .app-notification headerbar button.titlebutton:backdrop, headerbar .app-notification button.titlebutton:backdrop,
.app-notification .titlebar button.titlebutton:backdrop,
.titlebar .app-notification button.titlebutton:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop, .osd headerbar button.titlebutton:backdrop, headerbar .osd button.titlebutton:backdrop,
.osd .titlebar button.titlebutton:backdrop, .osd .titlebar button.titlebutton:backdrop,
.titlebar .osd button.titlebutton:backdrop { .titlebar .osd button.titlebutton:backdrop {
border-color: transparent; border-color: transparent;
@ -600,7 +609,11 @@ button, headerbar button.titlebutton,
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button.flat:active, .osd button.sidebar-button:active, .osd headerbar button.titlebutton:active, headerbar .osd button.titlebutton:active, .app-notification button.flat:active, .app-notification button.sidebar-button:active, .app-notification headerbar button.titlebutton:active, headerbar .app-notification button.titlebutton:active,
.app-notification .titlebar button.titlebutton:active,
.titlebar .app-notification button.titlebutton:active, .app-notification button.flat:checked, .app-notification button.sidebar-button:checked, .app-notification headerbar button.titlebutton:checked, headerbar .app-notification button.titlebutton:checked,
.app-notification .titlebar button.titlebutton:checked,
.titlebar .app-notification button.titlebutton:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd headerbar button.titlebutton:active, headerbar .osd button.titlebutton:active,
.osd .titlebar button.titlebutton:active, .osd .titlebar button.titlebutton:active,
.titlebar .osd button.titlebutton:active, .osd button.flat:checked, .osd button.sidebar-button:checked, .osd headerbar button.titlebutton:checked, headerbar .osd button.titlebutton:checked, .titlebar .osd button.titlebutton:active, .osd button.flat:checked, .osd button.sidebar-button:checked, .osd headerbar button.titlebutton:checked, headerbar .osd button.titlebutton:checked,
.osd .titlebar button.titlebutton:checked, .osd .titlebar button.titlebutton:checked,
@ -612,10 +625,7 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3); }
background-clip: padding-box;
border-color: transparent;
box-shadow: none; }
button.suggested-action, headerbar button.suggested-action.titlebutton, button.suggested-action, headerbar button.suggested-action.titlebutton,
.titlebar button.suggested-action.titlebutton { .titlebar button.suggested-action.titlebutton {
color: white; color: white;
@ -1170,31 +1180,7 @@ modelbutton.flat,
.titlebar button.titlebutton:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, button:link:backdrop, button:visited:backdrop, menu arrow, .titlebar button.titlebutton:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, button:link:backdrop, button:visited:backdrop, menu arrow,
.menu arrow, notebook tab button, notebook tab headerbar button.titlebutton, headerbar notebook tab button.titlebutton, .menu arrow, notebook tab button, notebook tab headerbar button.titlebutton, headerbar notebook tab button.titlebutton,
notebook tab .titlebar button.titlebutton, notebook tab .titlebar button.titlebutton,
.titlebar notebook tab button.titlebutton, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton, .titlebar notebook tab button.titlebutton, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:insensitive, .scale-popup button:hover, .scale-popup button:backdrop, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:insensitive {
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button.flat,
.app-notification.frame button.sidebar-button,
.app-notification.frame headerbar button.titlebutton,
headerbar .app-notification.frame button.titlebutton, .app-notification button.flat:backdrop, .app-notification button.sidebar-button:backdrop, .app-notification headerbar button.titlebutton:backdrop, headerbar .app-notification button.titlebutton:backdrop, .app-notification button.flat:insensitive, .app-notification button.sidebar-button:insensitive, .app-notification headerbar button.titlebutton:insensitive, headerbar .app-notification button.titlebutton:insensitive, .app-notification button.flat:backdrop:insensitive, .app-notification button.sidebar-button:backdrop:insensitive, .app-notification headerbar button.titlebutton:backdrop:insensitive, headerbar .app-notification button.titlebutton:backdrop:insensitive,
.app-notification .titlebar button.titlebutton:backdrop:insensitive,
.titlebar .app-notification button.titlebutton:backdrop:insensitive,
.app-notification.frame button.flat:backdrop,
.app-notification.frame button.sidebar-button:backdrop,
.app-notification.frame headerbar button.titlebutton:backdrop,
headerbar .app-notification.frame button.titlebutton:backdrop,
.app-notification.frame .titlebar button.titlebutton:backdrop,
.titlebar .app-notification.frame button.titlebutton:backdrop,
.app-notification.frame button.flat:insensitive,
.app-notification.frame button.sidebar-button:insensitive,
.app-notification.frame headerbar button.titlebutton:insensitive,
headerbar .app-notification.frame button.titlebutton:insensitive,
.app-notification.frame .titlebar button.titlebutton:insensitive,
.titlebar .app-notification.frame button.titlebutton:insensitive,
.app-notification.frame button.flat:backdrop:insensitive,
.app-notification.frame button.sidebar-button:backdrop:insensitive,
.app-notification.frame headerbar button.titlebutton:backdrop:insensitive,
headerbar .app-notification.frame button.titlebutton:backdrop:insensitive, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:insensitive, .scale-popup button:hover, .scale-popup button:backdrop, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:insensitive {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
@ -1517,12 +1503,20 @@ toolbar, .inline-toolbar, searchbar,
padding: 4px; padding: 4px;
background-color: #393f3f; } background-color: #393f3f; }
.osd toolbar, .osd .inline-toolbar, .osd searchbar, .osd toolbar, .osd .inline-toolbar, .osd searchbar,
.osd .location-bar, toolbar.osd, .osd.inline-toolbar, searchbar.osd, .osd .location-bar {
background-color: transparent; }
toolbar.osd, .osd.inline-toolbar, searchbar.osd,
.osd.location-bar { .osd.location-bar {
padding: 13px; padding: 13px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: rgba(32, 37, 38, 0.7); } background-color: rgba(32, 37, 38, 0.7); }
toolbar.osd.left, .osd.left.inline-toolbar, searchbar.osd.left,
.osd.left.location-bar, toolbar.osd.right, .osd.right.inline-toolbar, searchbar.osd.right,
.osd.right.location-bar, toolbar.osd.top, .osd.top.inline-toolbar, searchbar.osd.top,
.osd.top.location-bar, toolbar.osd.bottom, .osd.bottom.inline-toolbar, searchbar.osd.bottom,
.osd.bottom.location-bar {
border-radius: 0; }
.inline-toolbar { .inline-toolbar {
border-width: 0 1px 1px; border-width: 0 1px 1px;
@ -2100,8 +2094,7 @@ popover {
popover > toolbar, popover > toolbar,
popover > .inline-toolbar, popover > .inline-toolbar,
popover > searchbar, popover > searchbar,
popover > .location-bar, popover.osd > toolbar, popover.osd > .inline-toolbar, popover.osd > searchbar, popover > .location-bar {
popover.osd > .location-bar {
border-style: none; border-style: none;
background-color: transparent; } background-color: transparent; }
popover button.flat, popover button.sidebar-button, popover headerbar button.titlebutton, headerbar popover button.titlebutton, popover button.flat, popover button.sidebar-button, popover headerbar button.titlebutton, headerbar popover button.titlebutton,
@ -3695,78 +3688,13 @@ row {
.app-notification.frame { .app-notification.frame {
padding: 10px; padding: 10px;
border: none; border: none;
border-radius: 0 0 6px 6px; border-radius: 0 0 5px 5px;
background-color: rgba(32, 37, 38, 0.7); background-color: rgba(32, 37, 38, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; } background-clip: padding-box; }
.app-notification:backdrop, .app-notification:backdrop,
.app-notification.frame:backdrop { .app-notification.frame:backdrop {
background-image: none; } background-image: none; }
.app-notification button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button.flat,
.app-notification.frame button.sidebar-button,
.app-notification.frame headerbar button.titlebutton,
headerbar .app-notification.frame button.titlebutton,
.app-notification.frame .titlebar button.titlebutton,
.titlebar .app-notification.frame button.titlebutton {
-gtk-icon-shadow: 0 1px black;
text-shadow: 0 1px black; }
.app-notification button:hover,
.app-notification.frame button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button:active, .app-notification button:checked, .app-notification button:backdrop:active, .app-notification button:backdrop:checked,
.app-notification.frame button:active,
.app-notification.frame button:checked,
.app-notification.frame button:backdrop:active,
.app-notification.frame button:backdrop:checked {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button:insensitive, .app-notification button:backdrop:insensitive,
.app-notification.frame button:insensitive,
.app-notification.frame button:backdrop:insensitive {
color: #878a89;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button:backdrop,
.app-notification.frame button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
/************* /*************
* Expanders * * Expanders *

View File

@ -141,7 +141,8 @@ popover.osd,
popover.osd:backdrop, popover.osd:backdrop,
.app-notification:backdrop, .app-notification:backdrop,
.osd .scale-popup:backdrop, .osd:backdrop { .osd .scale-popup:backdrop, .osd:backdrop {
text-shadow: none; } text-shadow: none;
-gtk-icon-shadow: none; }
/********************* /*********************
* Spinner Animation * * Spinner Animation *
@ -507,7 +508,10 @@ button, headerbar button.titlebutton,
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
border: none; } border: none; }
.osd button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton, .app-notification button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button, .osd button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton,
.osd .titlebar button.titlebutton, .osd .titlebar button.titlebutton,
.titlebar .osd button.titlebutton { .titlebar .osd button.titlebutton {
color: #eeeeec; color: #eeeeec;
@ -518,7 +522,7 @@ button, headerbar button.titlebutton,
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:hover { .app-notification button:hover, .osd button:hover {
color: white; color: white;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
@ -527,7 +531,7 @@ button, headerbar button.titlebutton,
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:active, .osd button:checked, .osd button:backdrop:active, .osd button:backdrop:checked { .app-notification button:active, .app-notification button:checked, .app-notification button:backdrop:active, .app-notification button:backdrop:checked, .osd button:active, .osd button:checked, .osd button:backdrop:active, .osd button:backdrop:checked {
color: white; color: white;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
@ -536,7 +540,7 @@ button, headerbar button.titlebutton,
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); } outline-color: rgba(238, 238, 236, 0.3); }
.osd button:insensitive, .osd button:backdrop:insensitive { .app-notification button:insensitive, .app-notification button:backdrop:insensitive, .osd button:insensitive, .osd button:backdrop:insensitive {
color: #878a89; color: #878a89;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
@ -544,7 +548,7 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button:backdrop { .app-notification button:backdrop, .osd button:backdrop {
color: #eeeeec; color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
@ -552,7 +556,9 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button.flat, .osd button.sidebar-button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton, .osd button.flat, .osd button.sidebar-button, .osd headerbar button.titlebutton, headerbar .osd button.titlebutton,
.osd .titlebar button.titlebutton, .osd .titlebar button.titlebutton,
.titlebar .osd button.titlebutton { .titlebar .osd button.titlebutton {
border-color: transparent; border-color: transparent;
@ -564,7 +570,9 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; } -gtk-icon-shadow: 0 1px black; }
.osd button.flat:hover, .osd button.sidebar-button:hover, .osd headerbar button.titlebutton:hover, headerbar .osd button.titlebutton:hover, .app-notification button.flat:hover, .app-notification button.sidebar-button:hover, .app-notification headerbar button.titlebutton:hover, headerbar .app-notification button.titlebutton:hover,
.app-notification .titlebar button.titlebutton:hover,
.titlebar .app-notification button.titlebutton:hover, .osd button.flat:hover, .osd button.sidebar-button:hover, .osd headerbar button.titlebutton:hover, headerbar .osd button.titlebutton:hover,
.osd .titlebar button.titlebutton:hover, .osd .titlebar button.titlebutton:hover,
.titlebar .osd button.titlebutton:hover { .titlebar .osd button.titlebutton:hover {
color: white; color: white;
@ -574,11 +582,10 @@ button, headerbar button.titlebutton,
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black; text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3); }
background-clip: padding-box; .app-notification button.flat:insensitive, .app-notification button.sidebar-button:insensitive, .app-notification headerbar button.titlebutton:insensitive, headerbar .app-notification button.titlebutton:insensitive,
border-color: transparent; .app-notification .titlebar button.titlebutton:insensitive,
box-shadow: none; } .titlebar .app-notification button.titlebutton:insensitive, .osd button.flat:insensitive, .osd button.sidebar-button:insensitive, .osd headerbar button.titlebutton:insensitive, headerbar .osd button.titlebutton:insensitive,
.osd button.flat:insensitive, .osd button.sidebar-button:insensitive, .osd headerbar button.titlebutton:insensitive, headerbar .osd button.titlebutton:insensitive,
.osd .titlebar button.titlebutton:insensitive, .osd .titlebar button.titlebutton:insensitive,
.titlebar .osd button.titlebutton:insensitive { .titlebar .osd button.titlebutton:insensitive {
color: #878a89; color: #878a89;
@ -591,7 +598,9 @@ button, headerbar button.titlebutton,
background-image: none; background-image: none;
border-color: transparent; border-color: transparent;
box-shadow: none; } box-shadow: none; }
.osd button.flat:backdrop, .osd button.sidebar-button:backdrop, .osd headerbar button.titlebutton:backdrop, headerbar .osd button.titlebutton:backdrop, .app-notification button.flat:backdrop, .app-notification button.sidebar-button:backdrop, .app-notification headerbar button.titlebutton:backdrop, headerbar .app-notification button.titlebutton:backdrop,
.app-notification .titlebar button.titlebutton:backdrop,
.titlebar .app-notification button.titlebutton:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop, .osd headerbar button.titlebutton:backdrop, headerbar .osd button.titlebutton:backdrop,
.osd .titlebar button.titlebutton:backdrop, .osd .titlebar button.titlebutton:backdrop,
.titlebar .osd button.titlebutton:backdrop { .titlebar .osd button.titlebutton:backdrop {
border-color: transparent; border-color: transparent;
@ -600,7 +609,11 @@ button, headerbar button.titlebutton,
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
.osd button.flat:active, .osd button.sidebar-button:active, .osd headerbar button.titlebutton:active, headerbar .osd button.titlebutton:active, .app-notification button.flat:active, .app-notification button.sidebar-button:active, .app-notification headerbar button.titlebutton:active, headerbar .app-notification button.titlebutton:active,
.app-notification .titlebar button.titlebutton:active,
.titlebar .app-notification button.titlebutton:active, .app-notification button.flat:checked, .app-notification button.sidebar-button:checked, .app-notification headerbar button.titlebutton:checked, headerbar .app-notification button.titlebutton:checked,
.app-notification .titlebar button.titlebutton:checked,
.titlebar .app-notification button.titlebutton:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd headerbar button.titlebutton:active, headerbar .osd button.titlebutton:active,
.osd .titlebar button.titlebutton:active, .osd .titlebar button.titlebutton:active,
.titlebar .osd button.titlebutton:active, .osd button.flat:checked, .osd button.sidebar-button:checked, .osd headerbar button.titlebutton:checked, headerbar .osd button.titlebutton:checked, .titlebar .osd button.titlebutton:active, .osd button.flat:checked, .osd button.sidebar-button:checked, .osd headerbar button.titlebutton:checked, headerbar .osd button.titlebutton:checked,
.osd .titlebar button.titlebutton:checked, .osd .titlebar button.titlebutton:checked,
@ -612,10 +625,7 @@ button, headerbar button.titlebutton,
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3); }
background-clip: padding-box;
border-color: transparent;
box-shadow: none; }
button.suggested-action, headerbar button.suggested-action.titlebutton, button.suggested-action, headerbar button.suggested-action.titlebutton,
.titlebar button.suggested-action.titlebutton { .titlebar button.suggested-action.titlebutton {
color: white; color: white;
@ -1170,31 +1180,7 @@ modelbutton.flat,
.titlebar button.titlebutton:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, button:link:backdrop, button:visited:backdrop, menu arrow, .titlebar button.titlebutton:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, button:link:backdrop, button:visited:backdrop, menu arrow,
.menu arrow, notebook tab button, notebook tab headerbar button.titlebutton, headerbar notebook tab button.titlebutton, .menu arrow, notebook tab button, notebook tab headerbar button.titlebutton, headerbar notebook tab button.titlebutton,
notebook tab .titlebar button.titlebutton, notebook tab .titlebar button.titlebutton,
.titlebar notebook tab button.titlebutton, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton, .titlebar notebook tab button.titlebutton, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:insensitive, .scale-popup button:hover, .scale-popup button:backdrop, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:insensitive {
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button.flat,
.app-notification.frame button.sidebar-button,
.app-notification.frame headerbar button.titlebutton,
headerbar .app-notification.frame button.titlebutton, .app-notification button.flat:backdrop, .app-notification button.sidebar-button:backdrop, .app-notification headerbar button.titlebutton:backdrop, headerbar .app-notification button.titlebutton:backdrop, .app-notification button.flat:insensitive, .app-notification button.sidebar-button:insensitive, .app-notification headerbar button.titlebutton:insensitive, headerbar .app-notification button.titlebutton:insensitive, .app-notification button.flat:backdrop:insensitive, .app-notification button.sidebar-button:backdrop:insensitive, .app-notification headerbar button.titlebutton:backdrop:insensitive, headerbar .app-notification button.titlebutton:backdrop:insensitive,
.app-notification .titlebar button.titlebutton:backdrop:insensitive,
.titlebar .app-notification button.titlebutton:backdrop:insensitive,
.app-notification.frame button.flat:backdrop,
.app-notification.frame button.sidebar-button:backdrop,
.app-notification.frame headerbar button.titlebutton:backdrop,
headerbar .app-notification.frame button.titlebutton:backdrop,
.app-notification.frame .titlebar button.titlebutton:backdrop,
.titlebar .app-notification.frame button.titlebutton:backdrop,
.app-notification.frame button.flat:insensitive,
.app-notification.frame button.sidebar-button:insensitive,
.app-notification.frame headerbar button.titlebutton:insensitive,
headerbar .app-notification.frame button.titlebutton:insensitive,
.app-notification.frame .titlebar button.titlebutton:insensitive,
.titlebar .app-notification.frame button.titlebutton:insensitive,
.app-notification.frame button.flat:backdrop:insensitive,
.app-notification.frame button.sidebar-button:backdrop:insensitive,
.app-notification.frame headerbar button.titlebutton:backdrop:insensitive,
headerbar .app-notification.frame button.titlebutton:backdrop:insensitive, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:insensitive, .scale-popup button:hover, .scale-popup button:backdrop, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:insensitive {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
@ -1517,12 +1503,20 @@ toolbar, .inline-toolbar, searchbar,
padding: 4px; padding: 4px;
background-color: #ededed; } background-color: #ededed; }
.osd toolbar, .osd .inline-toolbar, .osd searchbar, .osd toolbar, .osd .inline-toolbar, .osd searchbar,
.osd .location-bar, toolbar.osd, .osd.inline-toolbar, searchbar.osd, .osd .location-bar {
background-color: transparent; }
toolbar.osd, .osd.inline-toolbar, searchbar.osd,
.osd.location-bar { .osd.location-bar {
padding: 13px; padding: 13px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: rgba(32, 37, 38, 0.7); } background-color: rgba(32, 37, 38, 0.7); }
toolbar.osd.left, .osd.left.inline-toolbar, searchbar.osd.left,
.osd.left.location-bar, toolbar.osd.right, .osd.right.inline-toolbar, searchbar.osd.right,
.osd.right.location-bar, toolbar.osd.top, .osd.top.inline-toolbar, searchbar.osd.top,
.osd.top.location-bar, toolbar.osd.bottom, .osd.bottom.inline-toolbar, searchbar.osd.bottom,
.osd.bottom.location-bar {
border-radius: 0; }
.inline-toolbar { .inline-toolbar {
border-width: 0 1px 1px; border-width: 0 1px 1px;
@ -2106,8 +2100,7 @@ popover {
popover > toolbar, popover > toolbar,
popover > .inline-toolbar, popover > .inline-toolbar,
popover > searchbar, popover > searchbar,
popover > .location-bar, popover.osd > toolbar, popover.osd > .inline-toolbar, popover.osd > searchbar, popover > .location-bar {
popover.osd > .location-bar {
border-style: none; border-style: none;
background-color: transparent; } background-color: transparent; }
popover button.flat, popover button.sidebar-button, popover headerbar button.titlebutton, headerbar popover button.titlebutton, popover button.flat, popover button.sidebar-button, popover headerbar button.titlebutton, headerbar popover button.titlebutton,
@ -3865,78 +3858,13 @@ row {
.app-notification.frame { .app-notification.frame {
padding: 10px; padding: 10px;
border: none; border: none;
border-radius: 0 0 6px 6px; border-radius: 0 0 5px 5px;
background-color: rgba(32, 37, 38, 0.7); background-color: rgba(32, 37, 38, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; } background-clip: padding-box; }
.app-notification:backdrop, .app-notification:backdrop,
.app-notification.frame:backdrop { .app-notification.frame:backdrop {
background-image: none; } background-image: none; }
.app-notification button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button.flat, .app-notification button.sidebar-button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification.frame button.flat,
.app-notification.frame button.sidebar-button,
.app-notification.frame headerbar button.titlebutton,
headerbar .app-notification.frame button.titlebutton,
.app-notification.frame .titlebar button.titlebutton,
.titlebar .app-notification.frame button.titlebutton {
-gtk-icon-shadow: 0 1px black;
text-shadow: 0 1px black; }
.app-notification button:hover,
.app-notification.frame button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button:active, .app-notification button:checked, .app-notification button:backdrop:active, .app-notification button:backdrop:checked,
.app-notification.frame button:active,
.app-notification.frame button:checked,
.app-notification.frame button:backdrop:active,
.app-notification.frame button:backdrop:checked {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.app-notification button:insensitive, .app-notification button:backdrop:insensitive,
.app-notification.frame button:insensitive,
.app-notification.frame button:backdrop:insensitive {
color: #878a89;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button:backdrop,
.app-notification.frame button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
/************* /*************
* Expanders * * Expanders *