Adwaita: colorchooser and color button style rewrite
fixing https://bugzilla.gnome.org/show_bug.cgi?id=760169 in the process.
This commit is contained in:
Lapo Calamandrei
parent
d07f00d98f
commit
5de71413fe
@ -758,14 +758,14 @@ modelbutton.flat arrow {
|
||||
}
|
||||
|
||||
button.color {
|
||||
padding: 5px; // Uniform padding on the GtkColorButton
|
||||
|
||||
> colorswatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the colorchooser style
|
||||
> overlay, & { border-radius: 0; }
|
||||
box-shadow: inset 0 1px 1px transparentize(black, 0.9),
|
||||
_widget_edge();
|
||||
&:disabled,
|
||||
&:backdrop { box-shadow: none; }
|
||||
padding: 4px;
|
||||
colorswatch:only-child {
|
||||
&, overlay { border-radius: 0; }
|
||||
@if $variant == 'light' {
|
||||
box-shadow: 0 1px _text_shadow_color();
|
||||
&:disabled,
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3166,117 +3166,91 @@ tooltip {
|
||||
|
||||
colorswatch {
|
||||
// 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 applied to the overlay box.
|
||||
|
||||
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
|
||||
// applied to the overlay box.
|
||||
|
||||
$_colorswatch_radius: 5px;
|
||||
|
||||
box-shadow: $_colorswatch_shadow;
|
||||
|
||||
// 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; }
|
||||
$_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
|
||||
inset 0 3px 2px -2px transparentize(black, 0.5));
|
||||
|
||||
// base color corners rounding
|
||||
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
||||
// sports a bigger radius.
|
||||
// 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 {
|
||||
border-top-left-radius: $_colorswatch-radius + 1px;
|
||||
border-top-right-radius: $_colorswatch-radius + 1px;
|
||||
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
||||
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
||||
overlay {
|
||||
border-top-left-radius: $_colorswatch_radius;
|
||||
border-top-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-right-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
||||
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) {
|
||||
border-top-left-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
||||
&.left, &:first-child:not(.top) {
|
||||
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
||||
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) {
|
||||
border-top-right-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-right-radius: $_colorswatch-radius + 1px;
|
||||
}
|
||||
&:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; }
|
||||
|
||||
// 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;
|
||||
&.right, &:last-child:not(.bottom) {
|
||||
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
||||
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
||||
overlay {
|
||||
border-top-right-radius: $_colorswatch_radius;
|
||||
border-bottom-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
// indicator and keynav outline colors
|
||||
&.dark {
|
||||
color: white;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&.dark overlay {
|
||||
color: $selected_fg_color;
|
||||
&:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
|
||||
&: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);
|
||||
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&.light {
|
||||
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); }
|
||||
&:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
|
||||
&:backdrop, &:backdrop:hover {
|
||||
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// border color
|
||||
& overlay,
|
||||
& overlay:selected {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// make the add color button looks like, well, a button
|
||||
&#add-color-button {
|
||||
border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
|
||||
border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
|
||||
@include button(normal);
|
||||
&:hover { @include button(hover); }
|
||||
&:backdrop { @include button(backdrop); }
|
||||
overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
||||
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
|
||||
&:only-child { border-radius: $_colorswatch_radius; }
|
||||
overlay {
|
||||
@include button(normal);
|
||||
&:hover { @include button(hover); }
|
||||
&: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; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1259,17 +1259,9 @@ modelbutton.flat arrow {
|
||||
|
||||
button.color, headerbar button.color.titlebutton,
|
||||
.titlebar button.color.titlebutton {
|
||||
padding: 5px; }
|
||||
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 {
|
||||
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; }
|
||||
padding: 4px; }
|
||||
button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
|
||||
border-radius: 0; }
|
||||
|
||||
/*********
|
||||
* Links *
|
||||
@ -4385,71 +4377,55 @@ tooltip {
|
||||
/*****************
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
colorswatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); }
|
||||
:selected colorswatch {
|
||||
box-shadow: none; }
|
||||
: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 {
|
||||
colorswatch.top {
|
||||
border-top-left-radius: 5.5px;
|
||||
border-top-right-radius: 5.5px; }
|
||||
colorswatch.top overlay {
|
||||
border-top-left-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-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-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-bottom-right-radius: 5px; }
|
||||
colorswatch:only-child > overlay {
|
||||
border-radius: 5px; }
|
||||
colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
|
||||
colorswatch:backdrop, colorswatch:backdrop:selected
|
||||
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
|
||||
background-image: none;
|
||||
colorswatch.dark overlay {
|
||||
color: #ffffff; }
|
||||
colorswatch.dark overlay:hover {
|
||||
border-color: #1c1f1f; }
|
||||
colorswatch.dark overlay:backdrop {
|
||||
color: #ffffff; }
|
||||
colorswatch.light overlay {
|
||||
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; }
|
||||
colorswatch.dark {
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid #1c1f1f; }
|
||||
colorswatch.dark:hover {
|
||||
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;
|
||||
colorswatch#add-color-button {
|
||||
border-radius: 5px 5px 0 0; }
|
||||
colorswatch#add-color-button:only-child {
|
||||
border-radius: 5px; }
|
||||
colorswatch#add-color-button overlay {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #1c1f1f;
|
||||
@ -4457,7 +4433,7 @@ colorswatch {
|
||||
text-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); }
|
||||
colorswatch#add-color-button:hover {
|
||||
colorswatch#add-color-button overlay:hover {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #1c1f1f;
|
||||
@ -4471,20 +4447,20 @@ colorswatch {
|
||||
text-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); }
|
||||
colorswatch#add-color-button:backdrop {
|
||||
colorswatch#add-color-button overlay:backdrop {
|
||||
color: #949796;
|
||||
border-color: #1f2222;
|
||||
background-image: linear-gradient(to bottom, #393f3f);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
|
||||
colorswatch#add-color-button overlay {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
colorswatch:disabled {
|
||||
opacity: 0.5; }
|
||||
colorswatch:disabled overlay {
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: none; }
|
||||
row:selected colorswatch {
|
||||
box-shadow: 0 0 0 2px #ffffff; }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
||||
@ -1259,16 +1259,12 @@ modelbutton.flat arrow {
|
||||
|
||||
button.color, headerbar button.color.titlebutton,
|
||||
.titlebar button.color.titlebutton {
|
||||
padding: 5px; }
|
||||
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 {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 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 {
|
||||
padding: 4px; }
|
||||
button.color colorswatch:only-child {
|
||||
box-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
|
||||
button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
|
||||
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 {
|
||||
button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop {
|
||||
box-shadow: none; }
|
||||
|
||||
/*********
|
||||
@ -4557,71 +4553,55 @@ tooltip {
|
||||
/*****************
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
colorswatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); }
|
||||
:selected colorswatch {
|
||||
box-shadow: none; }
|
||||
: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 {
|
||||
colorswatch.top {
|
||||
border-top-left-radius: 5.5px;
|
||||
border-top-right-radius: 5.5px; }
|
||||
colorswatch.top overlay {
|
||||
border-top-left-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-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-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-bottom-right-radius: 5px; }
|
||||
colorswatch:only-child > overlay {
|
||||
border-radius: 5px; }
|
||||
colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
|
||||
colorswatch:backdrop, colorswatch:backdrop:selected
|
||||
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
|
||||
background-image: none;
|
||||
colorswatch.dark overlay {
|
||||
color: #ffffff; }
|
||||
colorswatch.dark overlay:hover {
|
||||
border-color: rgba(0, 0, 0, 0.8); }
|
||||
colorswatch.dark overlay:backdrop {
|
||||
color: #ffffff; }
|
||||
colorswatch.light overlay {
|
||||
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; }
|
||||
colorswatch.dark {
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3); }
|
||||
colorswatch.dark:hover {
|
||||
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;
|
||||
colorswatch#add-color-button {
|
||||
border-radius: 5px 5px 0 0; }
|
||||
colorswatch#add-color-button:only-child {
|
||||
border-radius: 5px; }
|
||||
colorswatch#add-color-button overlay {
|
||||
color: #2e3436;
|
||||
outline-color: rgba(46, 52, 54, 0.3);
|
||||
border-color: #9d9d99;
|
||||
@ -4629,7 +4609,7 @@ colorswatch {
|
||||
text-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); }
|
||||
colorswatch#add-color-button:hover {
|
||||
colorswatch#add-color-button overlay:hover {
|
||||
color: #2e3436;
|
||||
outline-color: rgba(46, 52, 54, 0.3);
|
||||
border-color: #9d9d99;
|
||||
@ -4643,20 +4623,20 @@ colorswatch {
|
||||
text-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); }
|
||||
colorswatch#add-color-button:backdrop {
|
||||
colorswatch#add-color-button overlay:backdrop {
|
||||
color: #8b8e8f;
|
||||
border-color: #a5a5a1;
|
||||
background-image: linear-gradient(to bottom, #e8e8e7);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
colorswatch#add-color-button overlay {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
colorswatch:disabled {
|
||||
opacity: 0.5; }
|
||||
colorswatch:disabled overlay {
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: none; }
|
||||
row:selected colorswatch {
|
||||
box-shadow: 0 0 0 2px #ffffff; }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user