forked from AuroraMiddleware/gtk
Adwaita: fix selected colorswatch white border
This commit is contained in:
parent
bfd4933aa3
commit
43a2676c3f
@ -2924,7 +2924,20 @@ GtkColorSwatch {
|
||||
// is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
||||
// is applied to the overlay box.
|
||||
|
||||
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
|
||||
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; }
|
||||
|
||||
// border rounding
|
||||
&.top {
|
||||
@ -2949,7 +2962,8 @@ GtkColorSwatch {
|
||||
// nth-child works just on the custom colors row
|
||||
|
||||
// hover effect
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:hover:selected {
|
||||
background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
||||
transparentize(white, 1) 50%);
|
||||
box-shadow: inset 0 1px transparentize(white, 0.6),
|
||||
@ -2983,7 +2997,8 @@ GtkColorSwatch {
|
||||
}
|
||||
|
||||
// border color
|
||||
&.overlay {
|
||||
&.overlay,
|
||||
&.overlay:selected {
|
||||
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
||||
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
||||
}
|
||||
@ -2997,15 +3012,6 @@ GtkColorSwatch {
|
||||
&:backdrop { @include button(backdrop); }
|
||||
.overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
||||
}
|
||||
|
||||
// take care of colorswatches on selected elements
|
||||
:selected & {
|
||||
box-shadow: none;
|
||||
&.overlay {
|
||||
border-color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
@ -4354,6 +4354,12 @@ GtkInfoBar {
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
:selected GtkColorSwatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
border-color: #ffffff; }
|
||||
GtkColorSwatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
@ -4368,7 +4374,7 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch:hover {
|
||||
GtkColorSwatch:hover, GtkColorSwatch: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); }
|
||||
GtkColorSwatch:backdrop {
|
||||
@ -4391,9 +4397,9 @@ GtkColorSwatch {
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay {
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
border: 1px solid #1c1f1f; }
|
||||
GtkColorSwatch.overlay:hover {
|
||||
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
|
||||
border-color: black; }
|
||||
GtkColorSwatch#add-color-button {
|
||||
border-style: solid;
|
||||
@ -4427,10 +4433,6 @@ GtkColorSwatch {
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
|
||||
text-shadow: none;
|
||||
icon-shadow: none; }
|
||||
:selected GtkColorSwatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay {
|
||||
border-color: #ffffff; }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
@ -4515,6 +4515,12 @@ GtkInfoBar {
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
:selected GtkColorSwatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
border-color: #ffffff; }
|
||||
GtkColorSwatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
GtkColorSwatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
@ -4529,7 +4535,7 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch:hover {
|
||||
GtkColorSwatch:hover, GtkColorSwatch: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); }
|
||||
GtkColorSwatch:backdrop {
|
||||
@ -4552,9 +4558,9 @@ GtkColorSwatch {
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay {
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay:hover {
|
||||
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
|
||||
border-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch#add-color-button {
|
||||
border-style: solid;
|
||||
@ -4588,10 +4594,6 @@ GtkColorSwatch {
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
icon-shadow: none; }
|
||||
:selected GtkColorSwatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay {
|
||||
border-color: #ffffff; }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
Loading…
Reference in New Issue
Block a user