mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-17 14:30:15 +00:00
HighContrast: sync color picker changes with Adwaita
This commit is contained in:
Jakub Steiner
parent
4a54b121fc
commit
296fe08695
@ -2209,35 +2209,26 @@ GtkInfoBar {
|
||||
*****************/
|
||||
|
||||
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
|
||||
// is applied to the overlay box.
|
||||
|
||||
border: 1px solid transparentize(black,0.7);
|
||||
box-shadow: inset 0 1px 1px transparentize(black, 0.8);
|
||||
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
|
||||
&.color-light {
|
||||
color: black;
|
||||
outline-color: transparentize(black, 0.7);
|
||||
&:hover {
|
||||
background-image: linear-gradient(to bottom,
|
||||
transparentize(white, 1) 40%,
|
||||
transparentize(white, 0.6));
|
||||
&:backdrop { background-image: none; }
|
||||
}
|
||||
}
|
||||
&.color-dark {
|
||||
color: white;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&:hover {
|
||||
background-image: linear-gradient(to bottom,
|
||||
transparentize(white, 1) 40%,
|
||||
transparentize(white, 0.8));
|
||||
&:backdrop { background-image: none; }
|
||||
box-shadow: $_colorswatch_shadow;
|
||||
|
||||
// take care of colorswatches on selected elements
|
||||
:selected & {
|
||||
box-shadow: none;
|
||||
&.overlay, &.overlay:hover {
|
||||
border-color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover { border-color: transparentize(black, 0.5); }
|
||||
|
||||
&:backdrop { border-color: transparentize(black,0.8); box-shadow: none; }
|
||||
// we need to re-set the shadow here since it get axed by the previous bit
|
||||
&:selected { box-shadow: $_colorswatch_shadow; }
|
||||
|
||||
// border rounding
|
||||
&.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
@ -2246,42 +2237,70 @@ GtkColorSwatch {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&.left, &:first-child {
|
||||
&.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
&.right, &:last-child {
|
||||
&.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&:only-child {
|
||||
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+.
|
||||
|
||||
// hover effect
|
||||
&: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),
|
||||
inset 0 -1px transparentize(black, 0.6);
|
||||
}
|
||||
&.color-active-badge {
|
||||
border-width: 2px;
|
||||
&:hover { background-image: none; }
|
||||
&.color-light, &.color-light:hover {
|
||||
color: transparentize(black,0.7);
|
||||
border-color: transparentize(black,0.7);
|
||||
}
|
||||
&.color-dark, &.color-dark:hover {
|
||||
color: transparentize(white,0.5);
|
||||
border-color: transparentize(white,0.5);
|
||||
&:backdrop,
|
||||
&:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// no hover effect for the colorswatch in the color editor
|
||||
GtkColorEditor & {
|
||||
border-radius: 3px; // same radius as the entry
|
||||
&:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
}
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
}
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: mix($borders_color,$bg_color,50%);
|
||||
background-color: mix($borders_color,$bg_color,50%);
|
||||
color: $bg_color;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
border-color: $borders_color;
|
||||
background-color: $borders_color;
|
||||
|
||||
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
|
||||
&.color-dark {
|
||||
color: white;
|
||||
outline-color: transparentize(black, 0.7);
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&:backdrop {
|
||||
border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||||
background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||||
&.color-light {
|
||||
color: black;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&:backdrop { color: transparentize(black, 0.7); }
|
||||
}
|
||||
|
||||
// border color
|
||||
&.overlay,
|
||||
&.overlay:selected {
|
||||
border: 1px solid $borders_color;
|
||||
&:hover { border-color: black; }
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2542,63 +2542,82 @@ GtkInfoBar {
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
|
||||
GtkColorSwatch.color-light {
|
||||
color: black;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-light:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
|
||||
GtkColorSwatch.color-light:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-dark:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
|
||||
GtkColorSwatch.color-dark:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch:hover {
|
||||
border-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch:backdrop {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
|
||||
:selected GtkColorSwatch {
|
||||
box-shadow: none; }
|
||||
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
|
||||
border-color: #fff; }
|
||||
GtkColorSwatch:selected {
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
|
||||
GtkColorSwatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
GtkColorSwatch.bottom {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch.left, GtkColorSwatch:first-child {
|
||||
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px; }
|
||||
GtkColorSwatch.right, GtkColorSwatch:last-child {
|
||||
GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child {
|
||||
GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch.color-active-badge {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.color-active-badge: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, GtkColorSwatch:backdrop:selected {
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
GtkColorEditor GtkColorSwatch {
|
||||
border-radius: 3px; }
|
||||
GtkColorEditor GtkColorSwatch:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
color: white;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
color: black;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
|
||||
border: 1px solid #7f7f7f; }
|
||||
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
|
||||
border-color: black; }
|
||||
GtkColorSwatch#add-color-button {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #7f7f7f; }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #7f7f7f;
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: #bfbfbf;
|
||||
background-color: #bfbfbf;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
GtkColorChooserWidget #add-color-button:hover {
|
||||
border-color: #7f7f7f;
|
||||
background-color: #7f7f7f; }
|
||||
GtkColorChooserWidget #add-color-button:backdrop {
|
||||
border-color: #c5c5c5;
|
||||
background-color: #c5c5c5; }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #8b8b8b;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none; }
|
||||
GtkColorSwatch#add-color-button .overlay {
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
/**********************
|
||||
* Window Decorations *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user