Fix buttons background in nautilus notifications

This commit is contained in:
EliverLara
2019-01-07 16:26:43 -06:00
parent 546fbd2d0e
commit 617419f237
3 changed files with 56 additions and 23 deletions

View File

@@ -118,6 +118,21 @@ read if you used those and something break with a version upgrade you're on your
.app-notification.frame:backdrop {
background-image: none;
transition: 200ms ease-out; }
.app-notification button, .app-notification button.flat,
.app-notification.frame button,
.app-notification.frame button.flat {
color: #fefefe;
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(20, 23, 26, 0.8);
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(254, 254, 254, 0.3); }
.app-notification button:hover, .app-notification button.flat:hover,
.app-notification.frame button:hover,
.app-notification.frame button.flat:hover {
background: rgba(47, 54, 61, 0.8); }
.app-notification border,
.app-notification.frame border {
border: none; }
@@ -482,8 +497,7 @@ button.osd {
-gtk-icon-shadow: none;
border: none; }
.app-notification button,
.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
.osd
button {
color: #fefefe;
@@ -494,7 +508,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
.osd
button:hover {
color: white;
@@ -505,7 +519,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked,
popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked,
.osd
button:active:backdrop,
.osd
@@ -522,7 +536,7 @@ button {
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
.osd
button:disabled:backdrop,
.osd
@@ -534,7 +548,7 @@ button {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
.osd
button:backdrop {
color: #fefefe;
@@ -544,7 +558,7 @@ button {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
.osd
button.flat {
background-color: transparent;
@@ -556,7 +570,7 @@ button {
box-shadow: none;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
.osd
button.flat:hover {
color: white;
@@ -567,7 +581,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
.osd
button.flat:disabled {
color: #898b8c;
@@ -580,7 +594,7 @@ button {
background-image: none;
border-color: transparent;
box-shadow: none; }
.app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
.osd
button.flat:backdrop {
background-color: transparent;
@@ -589,7 +603,7 @@ button {
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked,
popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked,
.osd
button.flat:active,
.osd

View File

@@ -118,6 +118,21 @@ read if you used those and something break with a version upgrade you're on your
.app-notification.frame:backdrop {
background-image: none;
transition: 200ms ease-out; }
.app-notification button, .app-notification button.flat,
.app-notification.frame button,
.app-notification.frame button.flat {
color: #fefefe;
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(20, 23, 26, 0.8);
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(254, 254, 254, 0.3); }
.app-notification button:hover, .app-notification button.flat:hover,
.app-notification.frame button:hover,
.app-notification.frame button.flat:hover {
background: rgba(47, 54, 61, 0.8); }
.app-notification border,
.app-notification.frame border {
border: none; }
@@ -485,8 +500,7 @@ button.osd {
-gtk-icon-shadow: none;
border: none; }
.app-notification button,
.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
.osd
button {
color: #fefefe;
@@ -497,7 +511,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
.osd
button:hover {
color: white;
@@ -508,7 +522,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked,
popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked,
.osd
button:active:backdrop,
.osd
@@ -525,7 +539,7 @@ button {
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
.osd
button:disabled:backdrop,
.osd
@@ -537,7 +551,7 @@ button {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
.osd
button:backdrop {
color: #fefefe;
@@ -547,7 +561,7 @@ button {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
.osd
button.flat {
background-color: transparent;
@@ -559,7 +573,7 @@ button {
box-shadow: none;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
.osd
button.flat:hover {
color: white;
@@ -570,7 +584,7 @@ button {
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
outline-color: rgba(254, 254, 254, 0.3); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
.osd
button.flat:disabled {
color: #898b8c;
@@ -583,7 +597,7 @@ button {
background-image: none;
border-color: transparent;
box-shadow: none; }
.app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
.osd
button.flat:backdrop {
background-color: transparent;
@@ -592,7 +606,7 @@ button {
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked,
popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked,
.osd
button.flat:active,
.osd

View File

@@ -17,7 +17,12 @@
transition: $backdrop_transition;
}
button { @extend %osd_button; }
button, button.flat {
@include button(osd);
&:hover {
background: lighten($osd_bg_color, 12%);
}
}
border { border: none; }
}