callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: colorchooser and color button style rewrite

Browse Source 
fixing https://bugzilla.gnome.org/show_bug.cgi?id=760169 in the
process.
This commit is contained in:
Lapo Calamandrei 2016-01-08 16:31:30 +01:00
parent d07f00d98f
commit 5de71413fe
3 changed files with 180 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
gtk/theme/Adwaita/_common.scss
View File

@ -758,14 +758,14 @@ modelbutton.flat arrow {
} }
button.color { button.color {
padding: 5px; // Uniform padding on the GtkColorButton padding: 4px;
colorswatch:only-child {
> colorswatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the colorchooser style &, overlay { border-radius: 0; }
> overlay, & { border-radius: 0; } @if $variant == 'light' {
box-shadow: inset 0 1px 1px transparentize(black, 0.9), box-shadow: 0 1px _text_shadow_color();
_widget_edge(); &:disabled,
&:disabled, &:backdrop { box-shadow: none; }
&:backdrop { box-shadow: none; } }
} }
} }
@ -3166,117 +3166,91 @@ tooltip {
colorswatch { colorswatch {
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
// is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
// is applied to the overlay box. // applied to the overlay box.
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
$_colorswatch_radius: 5px; $_colorswatch_radius: 5px;
$_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
box-shadow: $_colorswatch_shadow; inset 0 3px 2px -2px transparentize(black, 0.5));
// take care of colorswatches on selected elements
:selected & {
box-shadow: none;
& overlay, & overlay:hover {
border-color: $selected_fg_color;
}
}
// we need to re-set the shadow here since it get axed by the previous bit
&:selected { box-shadow: $_colorswatch_shadow; }
// base color corners rounding // base color corners rounding
// to avoid the artifacts caused by rounded corner anti-aliasing the base color // to avoid the artifacts caused by rounded corner anti-aliasing the base color
// sports a bigger radius. // sports a bigger radius.
// nth-child is needed by the custom color strip. // nth-child is needed by the custom color strip.
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
&.top { &.top {
border-top-left-radius: $_colorswatch-radius + 1px; border-top-left-radius: $_colorswatch_radius + 0.5px;
border-top-right-radius: $_colorswatch-radius + 1px; border-top-right-radius: $_colorswatch_radius + 0.5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-top-right-radius: $_colorswatch_radius;
}
} }
&.bottom { &.bottom {
border-bottom-left-radius: $_colorswatch-radius + 1px; border-bottom-left-radius: $_colorswatch_radius + 0.5px;
border-bottom-right-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch_radius + 0.5px;
overlay {
border-bottom-left-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
} }
&.left, &:first-child:not(overlay):not(.top) { &.left, &:first-child:not(.top) {
border-top-left-radius: $_colorswatch-radius + 1px; border-top-left-radius: $_colorswatch_radius + 0.5px;
border-bottom-left-radius: $_colorswatch-radius + 1px; border-bottom-left-radius: $_colorswatch_radius + 0.5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-bottom-left-radius: $_colorswatch_radius;
}
} }
&.right, &:last-child:not(overlay):not(.bottom) { &.right, &:last-child:not(.bottom) {
border-top-right-radius: $_colorswatch-radius + 1px; border-top-right-radius: $_colorswatch_radius + 0.5px;
border-bottom-right-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch_radius + 0.5px;
} overlay {
&:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; } border-top-right-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
// overlay corner rounding }
&.top > overlay {
border-top-left-radius: $_colorswatch-radius;
border-top-right-radius: $_colorswatch-radius;
}
&.bottom > overlay {
border-bottom-left-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
&:first-child:not(.top) > overlay {
border-top-left-radius: $_colorswatch-radius;
border-bottom-left-radius: $_colorswatch-radius;
}
&:last-child:not(.bottom) > overlay {
border-top-right-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
&:only-child > overlay { border-radius: $_colorswatch-radius; }
// hover effect
&.activatable:hover,
&.activatable:hover:selected {
background-image: linear-gradient(135deg, transparentize(white, 0.3),
transparentize(white, 1) 50%);
box-shadow: inset 0 1px transparentize(white, 0.6),
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
}
&:backdrop,
&:backdrop:selected
&.dark:backdrop,
&.dark:backdrop:selected {
background-image: none;
box-shadow: none;
} }
// indicator and keynav outline colors &.dark overlay {
&.dark { color: $selected_fg_color;
color: white; &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
outline-color: transparentize(white, 0.5); &:backdrop { color: $backdrop_selected_fg_color; }
}
&.light overlay {
color: $text_color;
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
&:backdrop { color: $backdrop_text_color; }
}
overlay {
box-shadow: $_colorswatch_overlay_shadow;
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
&:backdrop { color: transparentize(white, 0.7); } &:backdrop, &:backdrop:hover {
} border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
&.light { box-shadow: none;
color: black; }
outline-color: transparentize(black, 0.5);
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
&:backdrop { color: transparentize(black, 0.7); }
} }
// border color
& overlay,
& overlay:selected {
background: none;
border: none;
}
// make the add color button looks like, well, a button
&#add-color-button { &#add-color-button {
border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set &:only-child { border-radius: $_colorswatch_radius; }
@include button(normal); overlay {
&:hover { @include button(hover); } @include button(normal);
&:backdrop { @include button(backdrop); } &:hover { @include button(hover); }
overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat &:backdrop { @include button(backdrop); }
}
} }
&:disabled {
opacity: 0.5;
overlay {
border-color: transparentize(black, 0.4);
box-shadow: none;
}
}
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
} }

128
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -1259,17 +1259,9 @@ modelbutton.flat arrow {
button.color, headerbar button.color.titlebutton, button.color, headerbar button.color.titlebutton,
.titlebar button.color.titlebutton { .titlebar button.color.titlebutton {
padding: 5px; } padding: 4px; }
button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
.titlebar button.color.titlebutton > colorswatch:first-child:last-child { border-radius: 0; }
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
button.color > colorswatch:first-child:last-child > overlay, button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child,
.titlebar button.color.titlebutton > colorswatch:first-child:last-child {
border-radius: 0; }
button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > colorswatch:first-child:last-child:disabled,
.titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > colorswatch:first-child:last-child:backdrop,
.titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop {
box-shadow: none; }
/********* /*********
* Links * * Links *
@ -4385,71 +4377,55 @@ tooltip {
/***************** /*****************
* Color Chooser * * Color Chooser *
*****************/ *****************/
colorswatch { colorswatch.top {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); } border-top-left-radius: 5.5px;
:selected colorswatch { border-top-right-radius: 5.5px; }
box-shadow: none; } colorswatch.top overlay {
:selected colorswatch overlay, :selected colorswatch overlay:hover {
border-color: #ffffff; }
colorswatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
colorswatch.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px; }
colorswatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
colorswatch:only-child:not(overlay) {
border-radius: 6px; }
colorswatch.top > overlay {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; } border-top-right-radius: 5px; }
colorswatch.bottom > overlay { colorswatch.bottom {
border-bottom-left-radius: 5.5px;
border-bottom-right-radius: 5.5px; }
colorswatch.bottom overlay {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; } border-bottom-right-radius: 5px; }
colorswatch:first-child:not(.top) > overlay { colorswatch.left, colorswatch:first-child:not(.top) {
border-top-left-radius: 5.5px;
border-bottom-left-radius: 5.5px; }
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; } border-bottom-left-radius: 5px; }
colorswatch:last-child:not(.bottom) > overlay { colorswatch.right, colorswatch:last-child:not(.bottom) {
border-top-right-radius: 5.5px;
border-bottom-right-radius: 5.5px; }
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; } border-bottom-right-radius: 5px; }
colorswatch:only-child > overlay { colorswatch.dark overlay {
border-radius: 5px; } color: #ffffff; }
colorswatch.activatable:hover, colorswatch.activatable:hover:selected { colorswatch.dark overlay:hover {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); border-color: #1c1f1f; }
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); } colorswatch.dark overlay:backdrop {
colorswatch:backdrop, colorswatch:backdrop:selected color: #ffffff; }
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { colorswatch.light overlay {
background-image: none; color: white; }
colorswatch.light overlay:hover {
border-color: #1c1f1f; }
colorswatch.light overlay:backdrop {
color: #d5d5d5; }
colorswatch overlay {
box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5);
border: 1px solid #1c1f1f; }
colorswatch overlay:hover {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
border-color: #1c1f1f;
box-shadow: none; } box-shadow: none; }
colorswatch.dark { colorswatch#add-color-button {
color: white; border-radius: 5px 5px 0 0; }
outline-color: rgba(255, 255, 255, 0.5); colorswatch#add-color-button:only-child {
border: 1px solid #1c1f1f; } border-radius: 5px; }
colorswatch.dark:hover { colorswatch#add-color-button overlay {
border-color: black; }
colorswatch.dark:backdrop {
color: rgba(255, 255, 255, 0.3); }
colorswatch.light {
color: black;
outline-color: rgba(0, 0, 0, 0.5);
border: 1px solid #1c1f1f; }
colorswatch.light:hover {
border-color: black; }
colorswatch.light:backdrop {
color: rgba(0, 0, 0, 0.3); }
colorswatch overlay, colorswatch overlay:selected {
background: none;
border: none; }
colorswatch#add-color-button {
border-style: solid;
border-width: 1px;
color: #eeeeec; color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f; border-color: #1c1f1f;
@ -4457,7 +4433,7 @@ colorswatch {
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); }
colorswatch#add-color-button:hover { colorswatch#add-color-button overlay:hover {
color: #eeeeec; color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f; border-color: #1c1f1f;
@ -4471,20 +4447,20 @@ colorswatch {
text-shadow: 0 -1px rgba(0, 0, 0, 0.76376); text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); }
colorswatch#add-color-button:backdrop { colorswatch#add-color-button overlay:backdrop {
color: #949796; color: #949796;
border-color: #1f2222; border-color: #1f2222;
background-image: linear-gradient(to bottom, #393f3f); background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
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); }
colorswatch#add-color-button overlay { colorswatch:disabled {
border-color: transparent; opacity: 0.5; }
background-color: transparent; colorswatch:disabled overlay {
background-image: none; border-color: rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); box-shadow: none; }
text-shadow: none; row:selected colorswatch {
-gtk-icon-shadow: none; } box-shadow: 0 0 0 2px #ffffff; }
/******** /********
* Misc * * Misc *

128
gtk/theme/Adwaita/gtk-contained.css
View File

@ -1259,16 +1259,12 @@ modelbutton.flat arrow {
button.color, headerbar button.color.titlebutton, button.color, headerbar button.color.titlebutton,
.titlebar button.color.titlebutton { .titlebar button.color.titlebutton {
padding: 5px; } padding: 4px; }
button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, button.color colorswatch:only-child {
.titlebar button.color.titlebutton > colorswatch:first-child:last-child { box-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); } button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
button.color > colorswatch:first-child:last-child > overlay, button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child,
.titlebar button.color.titlebutton > colorswatch:first-child:last-child {
border-radius: 0; } border-radius: 0; }
button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop {
.titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > colorswatch:first-child:last-child:backdrop,
.titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop {
box-shadow: none; } box-shadow: none; }
/********* /*********
@ -4557,71 +4553,55 @@ tooltip {
/***************** /*****************
* Color Chooser * * Color Chooser *
*****************/ *****************/
colorswatch { colorswatch.top {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); } border-top-left-radius: 5.5px;
:selected colorswatch { border-top-right-radius: 5.5px; }
box-shadow: none; } colorswatch.top overlay {
:selected colorswatch overlay, :selected colorswatch overlay:hover {
border-color: #ffffff; }
colorswatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); }
colorswatch.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px; }
colorswatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
colorswatch:only-child:not(overlay) {
border-radius: 6px; }
colorswatch.top > overlay {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; } border-top-right-radius: 5px; }
colorswatch.bottom > overlay { colorswatch.bottom {
border-bottom-left-radius: 5.5px;
border-bottom-right-radius: 5.5px; }
colorswatch.bottom overlay {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; } border-bottom-right-radius: 5px; }
colorswatch:first-child:not(.top) > overlay { colorswatch.left, colorswatch:first-child:not(.top) {
border-top-left-radius: 5.5px;
border-bottom-left-radius: 5.5px; }
colorswatch.left overlay, colorswatch:first-child:not(.top) overlay {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; } border-bottom-left-radius: 5px; }
colorswatch:last-child:not(.bottom) > overlay { colorswatch.right, colorswatch:last-child:not(.bottom) {
border-top-right-radius: 5.5px;
border-bottom-right-radius: 5.5px; }
colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; } border-bottom-right-radius: 5px; }
colorswatch:only-child > overlay { colorswatch.dark overlay {
border-radius: 5px; } color: #ffffff; }
colorswatch.activatable:hover, colorswatch.activatable:hover:selected { colorswatch.dark overlay:hover {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); border-color: rgba(0, 0, 0, 0.8); }
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); } colorswatch.dark overlay:backdrop {
colorswatch:backdrop, colorswatch:backdrop:selected color: #ffffff; }
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { colorswatch.light overlay {
background-image: none; color: black; }
colorswatch.light overlay:hover {
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.light overlay:backdrop {
color: #333333; }
colorswatch overlay {
box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch overlay:hover {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
border-color: rgba(0, 0, 0, 0.3);
box-shadow: none; } box-shadow: none; }
colorswatch.dark { colorswatch#add-color-button {
color: white; border-radius: 5px 5px 0 0; }
outline-color: rgba(255, 255, 255, 0.5); colorswatch#add-color-button:only-child {
border: 1px solid rgba(0, 0, 0, 0.3); } border-radius: 5px; }
colorswatch.dark:hover { colorswatch#add-color-button overlay {
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.dark:backdrop {
color: rgba(255, 255, 255, 0.3); }
colorswatch.light {
color: black;
outline-color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.light:hover {
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.light:backdrop {
color: rgba(0, 0, 0, 0.3); }
colorswatch overlay, colorswatch overlay:selected {
background: none;
border: none; }
colorswatch#add-color-button {
border-style: solid;
border-width: 1px;
color: #2e3436; color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3); outline-color: rgba(46, 52, 54, 0.3);
border-color: #9d9d99; border-color: #9d9d99;
@ -4629,7 +4609,7 @@ colorswatch {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923); text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0); }
colorswatch#add-color-button:hover { colorswatch#add-color-button overlay:hover {
color: #2e3436; color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3); outline-color: rgba(46, 52, 54, 0.3);
border-color: #9d9d99; border-color: #9d9d99;
@ -4643,20 +4623,20 @@ colorswatch {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923); text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px white, 0 1px rgba(255, 255, 255, 0); }
colorswatch#add-color-button:backdrop { colorswatch#add-color-button overlay:backdrop {
color: #8b8e8f; color: #8b8e8f;
border-color: #a5a5a1; border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #e8e8e7); background-image: linear-gradient(to bottom, #e8e8e7);
text-shadow: none; text-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
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); }
colorswatch#add-color-button overlay { colorswatch:disabled {
border-color: transparent; opacity: 0.5; }
background-color: transparent; colorswatch:disabled overlay {
background-image: none; border-color: rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); box-shadow: none; }
text-shadow: none; row:selected colorswatch {
-gtk-icon-shadow: none; } box-shadow: 0 0 0 2px #ffffff; }
/******** /********
* Misc * * Misc *