forked from AuroraMiddleware/gtk
HighContrast: fix up color chooser theming
Mostly copied from Adwaita.
This commit is contained in:
Matthias Clasen
parent
32177aa03b
commit
a11c30d0df
@ -2361,26 +2361,45 @@ colorswatch {
|
||||
|
||||
// we need to re-set the shadow here since it get axed by the previous bit
|
||||
&:selected { box-shadow: $_colorswatch_shadow; }
|
||||
button.color > & { box-shadow: none; }
|
||||
|
||||
// border rounding
|
||||
&.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
&.left, &:first-child:not(overlay):not(.top) {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
&.right, &:last-child:not(overlay):not(.bottom) {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
&:only-child:not(overlay) { border-radius: 6px; }
|
||||
|
||||
// overlay corner rounding
|
||||
&.top > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
&.bottom > overlay {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&.left, &:first-child:not(overlay), &:first-child:not(.top) > .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 {
|
||||
&: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 > 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+.
|
||||
@ -2394,7 +2413,9 @@ colorswatch {
|
||||
inset 0 -1px transparentize(black, 0.6);
|
||||
}
|
||||
&:backdrop,
|
||||
&:backdrop:selected {
|
||||
&:backdrop:selectedi,
|
||||
&.dark:backdrop,
|
||||
&.dark:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -2403,37 +2424,31 @@ colorswatch {
|
||||
&.dark {
|
||||
color: white;
|
||||
outline-color: transparentize(black, 0.7);
|
||||
border: 1px solid transparentize(black, 0.7);
|
||||
&:hover { border-color: transparentize(black, 0.5); }
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&.light {
|
||||
color: black;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
border: 1px solid transparentize(black, 0.7);
|
||||
&:hover { border-color: transparentize(black, 0.5); }
|
||||
&:backdrop { color: transparentize(black, 0.7); }
|
||||
}
|
||||
|
||||
// border color
|
||||
& overlay,
|
||||
& overlay:selected {
|
||||
border: 1px solid $borders_color;
|
||||
&:hover { border-color: black; }
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// make the add color button looks like, well, a button
|
||||
&#add-color-button {
|
||||
@include button(normal);
|
||||
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
|
||||
box-shadow: none;
|
||||
&:hover { @include button(hover); }
|
||||
&:backdrop {
|
||||
@include button(backdrop);
|
||||
border-width: 1px;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
overlay {
|
||||
@include button(undecorated);
|
||||
border-width: 0; } // reset the overlay to not
|
||||
// cover the button style underneat
|
||||
&:backdrop { @include button(backdrop); }
|
||||
& overlay { border-width: 0; background: none; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2662,52 +2662,66 @@ colorswatch {
|
||||
border-color: #fff; }
|
||||
colorswatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
|
||||
button.color > colorswatch {
|
||||
box-shadow: none; }
|
||||
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-right-radius: 5px; }
|
||||
colorswatch.bottom {
|
||||
colorswatch.bottom > overlay {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
colorswatch.left, colorswatch:first-child:not(overlay), colorswatch:first-child:not(.top) > .overlay {
|
||||
colorswatch:first-child:not(.top) > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px; }
|
||||
colorswatch.right, colorswatch:last-child:not(overlay), colorswatch:last-child:not(.bottom) > .overlay {
|
||||
colorswatch:last-child:not(.bottom) > overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
|
||||
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:backdrop, colorswatch:backdrop:selectedi, colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
colorswatch.dark {
|
||||
color: white;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
outline-color: rgba(0, 0, 0, 0.3);
|
||||
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(255, 255, 255, 0.5); }
|
||||
outline-color: rgba(255, 255, 255, 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 {
|
||||
border: 1px solid gray; }
|
||||
colorswatch overlay:hover, colorswatch overlay:selected:hover {
|
||||
border-color: black; }
|
||||
background: none;
|
||||
border: none; }
|
||||
colorswatch#add-color-button {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: gray;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: none; }
|
||||
border-color: gray; }
|
||||
colorswatch#add-color-button:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
@ -2723,13 +2737,10 @@ colorswatch {
|
||||
border-color: #8d8d8d;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
border-width: 1px;
|
||||
color: gray; }
|
||||
-gtk-icon-shadow: none; }
|
||||
colorswatch#add-color-button overlay {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-width: 0; }
|
||||
border-width: 0;
|
||||
background: none; }
|
||||
|
||||
/**********************
|
||||
* Window Decorations *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user