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:
Lapo Calamandrei 2016-04-22 14:42:47 +02:00
parent 61a454ffbe
commit aa99c64fdd
3 changed files with 535 additions and 535 deletions

View File

@ -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

View File

@ -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,