forked from AuroraMiddleware/gtk
Adwaita: color tweaks
use a slightly cold and slightly darker gray for the dark variant, use the same hue for the osd bg color, make it bit darker and transparent.
This commit is contained in:
parent
61a454ffbe
commit
aa99c64fdd
@ -2,9 +2,9 @@
|
||||
// it gets @if ed depending on $variant
|
||||
|
||||
|
||||
$base_color: if($variant == 'light', #ffffff, #292929);
|
||||
$base_color: if($variant == 'light', #ffffff, #232729);
|
||||
$text_color: if($variant == 'light', black, white);
|
||||
$bg_color: if($variant == 'light', #e8e8e7, #393f3f);
|
||||
$bg_color: if($variant == 'light', #e8e8e7, #33393b);
|
||||
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
|
||||
|
||||
$selected_fg_color: #ffffff;
|
||||
@ -34,7 +34,7 @@ $destructive_color: if($variant == 'light', #ef2929, darken(#ef2929, 10%));
|
||||
|
||||
$osd_fg_color: #eeeeec;
|
||||
$osd_text_color: white;
|
||||
$osd_bg_color: transparentize(#202526, 0.2);
|
||||
$osd_bg_color: transparentize(#1c1f20, 0.3);
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: transparentize(black, 0.3);
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -145,7 +145,7 @@ assistant .sidebar label.highlight {
|
||||
.osd {
|
||||
color: #eeeeec;
|
||||
border: none;
|
||||
background-color: rgba(32, 37, 38, 0.8);
|
||||
background-color: rgba(28, 31, 32, 0.7);
|
||||
background-clip: padding-box;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
text-shadow: 0 1px black;
|
||||
@ -317,9 +317,9 @@ entry {
|
||||
-gtk-icon-shadow: none; }
|
||||
.osd spinbutton:disabled:not(.vertical), .osd
|
||||
entry:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: rgba(53, 57, 58, 0.5);
|
||||
background-color: rgba(49, 52, 52, 0.5);
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -617,7 +617,7 @@ button.osd {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -631,7 +631,7 @@ button.osd {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(60, 69, 71, 0.8));
|
||||
background-image: image(rgba(57, 63, 65, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -654,10 +654,10 @@ button.osd {
|
||||
box-shadow: none; }
|
||||
button.osd:disabled:backdrop,
|
||||
button.osd:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -667,7 +667,7 @@ button.osd {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -679,7 +679,7 @@ button {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -690,7 +690,7 @@ button {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(60, 69, 71, 0.8));
|
||||
background-image: image(rgba(57, 63, 65, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -713,10 +713,10 @@ button {
|
||||
popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .app-notification button:disabled, .osd
|
||||
button:disabled:backdrop, .osd
|
||||
button:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -726,7 +726,7 @@ button {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -747,7 +747,7 @@ button {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(60, 69, 71, 0.8));
|
||||
background-image: image(rgba(57, 63, 65, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -755,10 +755,10 @@ button {
|
||||
outline-color: rgba(238, 238, 236, 0.3); }
|
||||
popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .app-notification button.flat:disabled, .osd
|
||||
button.flat:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -958,10 +958,10 @@ button.suggested-action {
|
||||
.osd
|
||||
button.suggested-action:disabled:backdrop, .osd
|
||||
button.suggested-action:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -1138,10 +1138,10 @@ button.destructive-action {
|
||||
.osd
|
||||
button.destructive-action:disabled:backdrop, .osd
|
||||
button.destructive-action:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -1616,7 +1616,7 @@ spinbutton:not(.vertical) {
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: none; }
|
||||
@ -1650,7 +1650,7 @@ spinbutton.vertical button.down {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -1660,7 +1660,7 @@ spinbutton.vertical button.down {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(60, 69, 71, 0.8));
|
||||
background-image: image(rgba(57, 63, 65, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -1677,10 +1677,10 @@ spinbutton.vertical button.down {
|
||||
-gtk-icon-shadow: none;
|
||||
outline-color: rgba(238, 238, 236, 0.3); }
|
||||
.osd spinbutton.vertical button:first-child:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -1689,7 +1689,7 @@ spinbutton.vertical button.down {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -1729,7 +1729,7 @@ toolbar {
|
||||
padding: 13px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(32, 37, 38, 0.8); }
|
||||
background-color: rgba(28, 31, 32, 0.7); }
|
||||
toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom {
|
||||
border-radius: 0; }
|
||||
toolbar.horizontal separator {
|
||||
@ -2955,7 +2955,7 @@ radio {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -2966,7 +2966,7 @@ radio {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px black;
|
||||
@ -2988,17 +2988,17 @@ radio {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
.osd check:disabled, .osd
|
||||
radio:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
@ -3105,7 +3105,7 @@ scale trough, scale fill, progressbar trough {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
outline-color: rgba(238, 238, 236, 0.2); }
|
||||
.osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled, .osd progressbar trough:disabled, progressbar .osd trough:disabled {
|
||||
background-color: rgba(53, 57, 58, 0.5); }
|
||||
background-color: rgba(49, 52, 52, 0.5); }
|
||||
|
||||
scale highlight, progressbar progress {
|
||||
border: 1px solid #184472;
|
||||
@ -3219,25 +3219,25 @@ scale {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 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);
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
.osd scale slider:hover {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(60, 69, 71, 0.8));
|
||||
background-image: image(rgba(57, 63, 65, 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);
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
.osd scale slider:active {
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
@ -3248,29 +3248,29 @@ scale {
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
.osd scale slider:disabled {
|
||||
color: #878a89;
|
||||
color: #858786;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(53, 57, 58, 0.5));
|
||||
background-image: image(rgba(49, 52, 52, 0.5));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
.osd scale slider:backdrop {
|
||||
color: #eeeeec;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: transparent;
|
||||
background-image: image(rgba(32, 37, 38, 0.8));
|
||||
background-image: image(rgba(28, 31, 32, 0.7));
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
.osd scale slider:backdrop:disabled {
|
||||
background-color: #202526; }
|
||||
background-color: #1c1f20; }
|
||||
scale value {
|
||||
color: alpha(currentColor,0.55); }
|
||||
scale marks {
|
||||
@ -4052,7 +4052,7 @@ row {
|
||||
.app-notification.frame {
|
||||
padding: 10px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background-color: rgba(32, 37, 38, 0.8);
|
||||
background-color: rgba(28, 31, 32, 0.7);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
|
||||
background-clip: padding-box; }
|
||||
.app-notification:backdrop,
|
||||
|
Loading…
Reference in New Issue
Block a user