mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-17 23:10:22 +00:00
Adwaita: Adapt to color swatch changes
This needs more work and simplification.
This commit is contained in:
Matthias Clasen
parent
5ec9b330b3
commit
4e8aea012e
@ -3047,9 +3047,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();
|
||||
@ -3061,7 +3061,7 @@ GtkColorSwatch {
|
||||
// take care of colorswatches on selected elements
|
||||
:selected & {
|
||||
box-shadow: none;
|
||||
&.overlay, &.overlay:hover {
|
||||
& overlay, & overlay:hover {
|
||||
border-color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
@ -3083,34 +3083,34 @@ GtkColorSwatch {
|
||||
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-right-radius: $_colorswatch-radius + 1px;
|
||||
}
|
||||
&.left, &:first-child:not(.overlay):not(.top) {
|
||||
&.left, &:first-child:not(overlay):not(.top) {
|
||||
border-top-left-radius: $_colorswatch-radius + 1px;
|
||||
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
||||
}
|
||||
&.right, &:last-child:not(.overlay):not(.bottom) {
|
||||
&.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; }
|
||||
&:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; }
|
||||
|
||||
// overlay corner rounding
|
||||
&.top > .overlay {
|
||||
&.top > overlay {
|
||||
border-top-left-radius: $_colorswatch-radius;
|
||||
border-top-right-radius: $_colorswatch-radius;
|
||||
}
|
||||
&.bottom > .overlay {
|
||||
&.bottom > overlay {
|
||||
border-bottom-left-radius: $_colorswatch-radius;
|
||||
border-bottom-right-radius: $_colorswatch-radius;
|
||||
}
|
||||
&:first-child:not(.top) > .overlay {
|
||||
&:first-child:not(.top) > overlay {
|
||||
border-top-left-radius: $_colorswatch-radius;
|
||||
border-bottom-left-radius: $_colorswatch-radius;
|
||||
}
|
||||
&:last-child:not(.bottom) > .overlay {
|
||||
&:last-child:not(.bottom) > overlay {
|
||||
border-top-right-radius: $_colorswatch-radius;
|
||||
border-bottom-right-radius: $_colorswatch-radius;
|
||||
}
|
||||
&:only-child > .overlay { border-radius: $_colorswatch-radius; }
|
||||
&:only-child > overlay { border-radius: $_colorswatch-radius; }
|
||||
|
||||
// hover effect
|
||||
&:hover,
|
||||
@ -3119,15 +3119,15 @@ GtkColorSwatch {
|
||||
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));
|
||||
&.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
|
||||
&.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
|
||||
background-image: linear-gradient(135deg, transparentize(white, 0.5),
|
||||
transparentize(white, 1) 50%);
|
||||
}
|
||||
}
|
||||
&:backdrop,
|
||||
&:backdrop:selected
|
||||
&.color-dark:backdrop,
|
||||
&.color-dark:backdrop:selected {
|
||||
&.dark:backdrop,
|
||||
&.dark:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -3143,20 +3143,20 @@ GtkColorSwatch {
|
||||
}
|
||||
|
||||
// indicator and keynav outline colors
|
||||
&.color-dark {
|
||||
&.dark overlay {
|
||||
color: white;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&.color-light {
|
||||
&.light overlay {
|
||||
color: black;
|
||||
outline-color: transparentize(black, 0.5);
|
||||
&:backdrop { color: transparentize(black, 0.7); }
|
||||
}
|
||||
|
||||
// border color
|
||||
&.overlay,
|
||||
&.overlay:selected {
|
||||
& 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); }
|
||||
}
|
||||
@ -3168,7 +3168,7 @@ GtkColorSwatch {
|
||||
@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
|
||||
overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4244,73 +4244,73 @@ infobar {
|
||||
/*****************
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
colorswatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
:selected GtkColorSwatch {
|
||||
:selected colorswatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
:selected colorswatch overlay, :selected colorswatch overlay:hover {
|
||||
border-color: #ffffff; }
|
||||
GtkColorSwatch:selected {
|
||||
colorswatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch.top {
|
||||
colorswatch.top {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px; }
|
||||
GtkColorSwatch.bottom {
|
||||
colorswatch.bottom {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
|
||||
colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px; }
|
||||
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
|
||||
colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
GtkColorSwatch:only-child:not(.overlay) {
|
||||
colorswatch:only-child:not(overlay) {
|
||||
border-radius: 6px; }
|
||||
GtkColorSwatch.top > .overlay {
|
||||
colorswatch.top > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
GtkColorSwatch.bottom > .overlay {
|
||||
colorswatch.bottom > overlay {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:first-child:not(.top) > .overlay {
|
||||
colorswatch:first-child:not(.top) > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px; }
|
||||
GtkColorSwatch:last-child:not(.bottom) > .overlay {
|
||||
colorswatch:last-child:not(.bottom) > overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child > .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:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
|
||||
colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
|
||||
GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
|
||||
GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
|
||||
colorswatch:backdrop, colorswatch:backdrop:selected
|
||||
colorswatch.dark:backdrop, colorswatch.dark: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 rgba(238, 238, 236, 0.1); }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
GtkColorEditor colorswatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
colorswatch.dark overlay {
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
colorswatch.dark overlay:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
colorswatch.light overlay {
|
||||
color: black;
|
||||
outline-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
colorswatch.light overlay:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
colorswatch overlay, colorswatch overlay:selected {
|
||||
border: 1px solid #1c1f1f; }
|
||||
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-style: solid;
|
||||
border-width: 1px;
|
||||
color: #eeeeec;
|
||||
@ -4320,7 +4320,7 @@ GtkColorSwatch {
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
colorswatch#add-color-button:hover {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #1c1f1f;
|
||||
@ -4328,14 +4328,14 @@ GtkColorSwatch {
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
colorswatch#add-color-button:backdrop {
|
||||
color: #949796;
|
||||
border-color: #1f2222;
|
||||
background-image: linear-gradient(to bottom, #393f3f);
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
|
||||
GtkColorSwatch#add-color-button .overlay {
|
||||
colorswatch#add-color-button overlay {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
@ -4416,73 +4416,73 @@ infobar {
|
||||
/*****************
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
colorswatch {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
:selected GtkColorSwatch {
|
||||
:selected colorswatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
:selected colorswatch overlay, :selected colorswatch overlay:hover {
|
||||
border-color: #ffffff; }
|
||||
GtkColorSwatch:selected {
|
||||
colorswatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
GtkColorSwatch.top {
|
||||
colorswatch.top {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px; }
|
||||
GtkColorSwatch.bottom {
|
||||
colorswatch.bottom {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
|
||||
colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px; }
|
||||
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
|
||||
colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
GtkColorSwatch:only-child:not(.overlay) {
|
||||
colorswatch:only-child:not(overlay) {
|
||||
border-radius: 6px; }
|
||||
GtkColorSwatch.top > .overlay {
|
||||
colorswatch.top > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
GtkColorSwatch.bottom > .overlay {
|
||||
colorswatch.bottom > overlay {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:first-child:not(.top) > .overlay {
|
||||
colorswatch:first-child:not(.top) > overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px; }
|
||||
GtkColorSwatch:last-child:not(.bottom) > .overlay {
|
||||
colorswatch:last-child:not(.bottom) > overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child > .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.1); }
|
||||
GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
|
||||
colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
|
||||
GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
|
||||
GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
|
||||
colorswatch:backdrop, colorswatch:backdrop:selected
|
||||
colorswatch.dark:backdrop, colorswatch.dark: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 white; }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
GtkColorEditor colorswatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
colorswatch.dark overlay {
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
colorswatch.dark overlay:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
colorswatch.light overlay {
|
||||
color: black;
|
||||
outline-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
colorswatch.light overlay:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
colorswatch overlay, colorswatch overlay:selected {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
|
||||
colorswatch overlay:hover, colorswatch overlay:selected:hover {
|
||||
border-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch#add-color-button {
|
||||
colorswatch#add-color-button {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
color: #2e3436;
|
||||
@ -4492,7 +4492,7 @@ GtkColorSwatch {
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white; }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
colorswatch#add-color-button:hover {
|
||||
color: #2e3436;
|
||||
outline-color: rgba(46, 52, 54, 0.3);
|
||||
border-color: #a1a1a1;
|
||||
@ -4500,14 +4500,14 @@ GtkColorSwatch {
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white; }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
colorswatch#add-color-button:backdrop {
|
||||
color: #8e9192;
|
||||
border-color: darkgray;
|
||||
background-image: linear-gradient(to bottom, #ededed);
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
GtkColorSwatch#add-color-button .overlay {
|
||||
colorswatch#add-color-button overlay {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user