forked from AuroraMiddleware/gtk
HighContrast: Adapt to color swatch changes
This needs more work and simplification.
This commit is contained in:
Matthias Clasen
parent
4e8aea012e
commit
42a231a61c
@ -2364,9 +2364,9 @@ infobar {
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
|
||||
GtkColorSwatch {
|
||||
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
|
||||
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
||||
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();
|
||||
@ -2376,7 +2376,7 @@ GtkColorSwatch {
|
||||
// take care of colorswatches on selected elements
|
||||
:selected & {
|
||||
box-shadow: none;
|
||||
&.overlay, &.overlay:hover {
|
||||
& overlay, & overlay:hover {
|
||||
border-color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
@ -2394,15 +2394,15 @@ GtkColorSwatch {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
|
||||
&.left, &:first-child:not(overlay), &:first-child:not(.top) > .overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
&.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
|
||||
&.right, &:last-child:not(overlay), &:last-child:not(.bottom) > .overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&:only-child:not(.overlay), &:only-child > .overlay { border-radius: 5px; }
|
||||
&:only-child:not(overlay), &:only-child > overlay { border-radius: 5px; }
|
||||
// nth-child is used for the custom colors row.
|
||||
// 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+.
|
||||
@ -2432,20 +2432,20 @@ GtkColorSwatch {
|
||||
}
|
||||
|
||||
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
|
||||
&.color-dark {
|
||||
&.dark {
|
||||
color: white;
|
||||
outline-color: transparentize(black, 0.7);
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&.color-light {
|
||||
&.light {
|
||||
color: black;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&:backdrop { color: transparentize(black, 0.7); }
|
||||
}
|
||||
|
||||
// border color
|
||||
&.overlay,
|
||||
&.overlay:selected {
|
||||
& overlay,
|
||||
& overlay:selected {
|
||||
border: 1px solid $borders_color;
|
||||
&:hover { border-color: black; }
|
||||
}
|
||||
@ -2462,7 +2462,7 @@ GtkColorSwatch {
|
||||
border-width: 1px;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
.overlay {
|
||||
overlay {
|
||||
@include button(undecorated);
|
||||
border-width: 0; } // reset the overlay to not
|
||||
// cover the button style underneat
|
||||
|
||||
@ -2602,58 +2602,58 @@ infobar {
|
||||
/*****************
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
colorswatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
|
||||
:selected GtkColorSwatch {
|
||||
:selected colorswatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
:selected colorswatch overlay, :selected colorswatch overlay:hover {
|
||||
border-color: #fff; }
|
||||
GtkColorSwatch:selected {
|
||||
colorswatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
|
||||
button.color > GtkColorSwatch {
|
||||
button.color > colorswatch {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.top {
|
||||
colorswatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
GtkColorSwatch.bottom {
|
||||
colorswatch.bottom {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
|
||||
colorswatch.left, colorswatch:first-child:not(overlay), colorswatch:first-child:not(.top) > .overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px; }
|
||||
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
|
||||
colorswatch.right, colorswatch:last-child:not(overlay), colorswatch:last-child:not(.bottom) > .overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
|
||||
colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
|
||||
colorswatch:hover, colorswatch: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, GtkColorSwatch:backdrop:selected {
|
||||
colorswatch:backdrop, colorswatch:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
GtkColorEditor GtkColorSwatch {
|
||||
GtkColorEditor colorswatch {
|
||||
border-radius: 3px; }
|
||||
GtkColorEditor GtkColorSwatch:hover {
|
||||
GtkColorEditor colorswatch:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
GtkColorEditor colorswatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
colorswatch.dark {
|
||||
color: white;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
colorswatch.dark:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
colorswatch.light {
|
||||
color: black;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
colorswatch.light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
colorswatch overlay, colorswatch overlay:selected {
|
||||
border: 1px solid gray; }
|
||||
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
|
||||
colorswatch overlay:hover, colorswatch overlay:selected:hover {
|
||||
border-color: black; }
|
||||
GtkColorSwatch#add-color-button {
|
||||
colorswatch#add-color-button {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
@ -2663,14 +2663,14 @@ GtkColorSwatch {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
colorswatch#add-color-button:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: gray;
|
||||
background-image: none; }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
colorswatch#add-color-button:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
@ -2681,7 +2681,7 @@ GtkColorSwatch {
|
||||
icon-shadow: none;
|
||||
border-width: 1px;
|
||||
color: gray; }
|
||||
GtkColorSwatch#add-color-button .overlay {
|
||||
colorswatch#add-color-button overlay {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-width: 0; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user