mirror of
https://github.com/luneko/SweetTokyoNight.git
synced 2025-12-13 15:29:53 +01:00
Fix background color of osd buttons
This commit is contained in:
@@ -118,21 +118,6 @@ read if you used those and something break with a version upgrade you're on your
|
|||||||
.app-notification.frame:backdrop {
|
.app-notification.frame:backdrop {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
transition: 200ms ease-out; }
|
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 border,
|
||||||
.app-notification.frame border {
|
.app-notification.frame border {
|
||||||
border: none; }
|
border: none; }
|
||||||
@@ -497,7 +482,8 @@ button.osd {
|
|||||||
-gtk-icon-shadow: none;
|
-gtk-icon-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button {
|
button {
|
||||||
color: #fefefe;
|
color: #fefefe;
|
||||||
@@ -508,7 +494,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
|
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
|
||||||
.osd
|
.osd
|
||||||
button:hover {
|
button:hover {
|
||||||
color: white;
|
color: white;
|
||||||
@@ -519,7 +505,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
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,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button:active:backdrop,
|
button:active:backdrop,
|
||||||
.osd
|
.osd
|
||||||
@@ -536,7 +522,7 @@ button {
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none;
|
-gtk-icon-shadow: none;
|
||||||
outline-color: rgba(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button:disabled:backdrop,
|
button:disabled:backdrop,
|
||||||
.osd
|
.osd
|
||||||
@@ -548,7 +534,7 @@ button {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
|
.app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
|
||||||
.osd
|
.osd
|
||||||
button:backdrop {
|
button:backdrop {
|
||||||
color: #fefefe;
|
color: #fefefe;
|
||||||
@@ -558,19 +544,21 @@ button {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
|
.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
|
||||||
.osd
|
.osd
|
||||||
button.flat {
|
button.flat {
|
||||||
background-color: transparent;
|
color: #fefefe;
|
||||||
background-image: none;
|
border-color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: #181b28;
|
background-color: rgba(20, 23, 26, 0.8);
|
||||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
background-clip: padding-box;
|
||||||
text-shadow: none;
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||||
-gtk-icon-shadow: none;
|
text-shadow: 0 1px black;
|
||||||
|
-gtk-icon-shadow: 0 1px black;
|
||||||
|
outline-color: rgba(254, 254, 254, 0.3);
|
||||||
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; }
|
||||||
popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
|
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
|
||||||
.osd
|
.osd
|
||||||
button.flat:hover {
|
button.flat:hover {
|
||||||
color: white;
|
color: white;
|
||||||
@@ -581,7 +569,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
|
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
|
||||||
.osd
|
.osd
|
||||||
button.flat:disabled {
|
button.flat:disabled {
|
||||||
color: #898b8c;
|
color: #898b8c;
|
||||||
@@ -594,16 +582,17 @@ button {
|
|||||||
background-image: none;
|
background-image: none;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
|
.app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
|
||||||
.osd
|
.osd
|
||||||
button.flat:backdrop {
|
button.flat:backdrop {
|
||||||
background-color: transparent;
|
color: #fefefe;
|
||||||
background-image: none;
|
border-color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: #181b28;
|
background-image: linear-gradient(to bottom, rgba(20, 23, 26, 0.8), rgba(20, 23, 26, 0.8));
|
||||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
background-clip: padding-box;
|
||||||
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
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,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button.flat:active,
|
button.flat:active,
|
||||||
.osd
|
.osd
|
||||||
|
|||||||
@@ -118,21 +118,6 @@ read if you used those and something break with a version upgrade you're on your
|
|||||||
.app-notification.frame:backdrop {
|
.app-notification.frame:backdrop {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
transition: 200ms ease-out; }
|
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 border,
|
||||||
.app-notification.frame border {
|
.app-notification.frame border {
|
||||||
border: none; }
|
border: none; }
|
||||||
@@ -500,7 +485,8 @@ button.osd {
|
|||||||
-gtk-icon-shadow: none;
|
-gtk-icon-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button {
|
button {
|
||||||
color: #fefefe;
|
color: #fefefe;
|
||||||
@@ -511,7 +497,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
|
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover,
|
||||||
.osd
|
.osd
|
||||||
button:hover {
|
button:hover {
|
||||||
color: white;
|
color: white;
|
||||||
@@ -522,7 +508,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
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,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button:active:backdrop,
|
button:active:backdrop,
|
||||||
.osd
|
.osd
|
||||||
@@ -539,7 +525,7 @@ button {
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none;
|
-gtk-icon-shadow: none;
|
||||||
outline-color: rgba(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button:disabled:backdrop,
|
button:disabled:backdrop,
|
||||||
.osd
|
.osd
|
||||||
@@ -551,7 +537,7 @@ button {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
|
.app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop,
|
||||||
.osd
|
.osd
|
||||||
button:backdrop {
|
button:backdrop {
|
||||||
color: #fefefe;
|
color: #fefefe;
|
||||||
@@ -561,19 +547,21 @@ button {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
|
.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat,
|
||||||
.osd
|
.osd
|
||||||
button.flat {
|
button.flat {
|
||||||
background-color: transparent;
|
color: #fefefe;
|
||||||
background-image: none;
|
border-color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: #eaeef2;
|
background-color: rgba(20, 23, 26, 0.8);
|
||||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
background-clip: padding-box;
|
||||||
text-shadow: none;
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||||
-gtk-icon-shadow: none;
|
text-shadow: 0 1px black;
|
||||||
|
-gtk-icon-shadow: 0 1px black;
|
||||||
|
outline-color: rgba(254, 254, 254, 0.3);
|
||||||
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; }
|
||||||
popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
|
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover,
|
||||||
.osd
|
.osd
|
||||||
button.flat:hover {
|
button.flat:hover {
|
||||||
color: white;
|
color: white;
|
||||||
@@ -584,7 +572,7 @@ button {
|
|||||||
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(254, 254, 254, 0.3); }
|
outline-color: rgba(254, 254, 254, 0.3); }
|
||||||
popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
|
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled,
|
||||||
.osd
|
.osd
|
||||||
button.flat:disabled {
|
button.flat:disabled {
|
||||||
color: #898b8c;
|
color: #898b8c;
|
||||||
@@ -597,16 +585,17 @@ button {
|
|||||||
background-image: none;
|
background-image: none;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
|
.app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop,
|
||||||
.osd
|
.osd
|
||||||
button.flat:backdrop {
|
button.flat:backdrop {
|
||||||
background-color: transparent;
|
color: #fefefe;
|
||||||
background-image: none;
|
border-color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: #eaeef2;
|
background-image: linear-gradient(to bottom, rgba(20, 23, 26, 0.8), rgba(20, 23, 26, 0.8));
|
||||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
background-clip: padding-box;
|
||||||
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
-gtk-icon-shadow: none; }
|
-gtk-icon-shadow: none; }
|
||||||
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,
|
.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,
|
||||||
.osd
|
.osd
|
||||||
button.flat:active,
|
button.flat:active,
|
||||||
.osd
|
.osd
|
||||||
|
|||||||
@@ -17,12 +17,7 @@
|
|||||||
transition: $backdrop_transition;
|
transition: $backdrop_transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
button, button.flat {
|
button { @extend %osd_button; }
|
||||||
@include button(osd);
|
|
||||||
&:hover {
|
|
||||||
background: lighten($osd_bg_color, 12%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
border { border: none; }
|
border { border: none; }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -206,7 +206,7 @@ button {
|
|||||||
&:backdrop { @include button(osd-backdrop); }
|
&:backdrop { @include button(osd-backdrop); }
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
@include button(undecorated);
|
@include button(osd);
|
||||||
|
|
||||||
box-shadow: none; //FIXME respect no edge on the button mixin
|
box-shadow: none; //FIXME respect no edge on the button mixin
|
||||||
text-shadow: 0 1px black;
|
text-shadow: 0 1px black;
|
||||||
@@ -221,7 +221,7 @@ button {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:backdrop { @include button(undecorated); }
|
&:backdrop { @include button(osd-backdrop); }
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:checked { @include button(osd-active); }
|
&:checked { @include button(osd-active); }
|
||||||
|
|||||||
Reference in New Issue
Block a user