AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-13 04:10:13 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: colorpicker fixes.

Browse Source 
Added another :not() to fix the first and last swatches in the
first section of colorpicker.
Dodge the artifacts due to stacked anti-aliased rounded corners by
increasing the radius of the base object by 1px.
This commit is contained in:
Lapo Calamandrei 2015-04-16 09:57:23 +02:00
parent 296fe08695
commit 993721c746
3 changed files with 92 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
gtk/theme/Adwaita/_common.scss
View File

@ -816,7 +816,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
GtkColorButton.button {
padding: 5px; // Uniform padding on the GtkColorButton
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
// colorpicker style, otherwise
border-radius: 0;
box-shadow: inset 0 1px 1px transparentize(black, 0.9),
@ -3094,6 +3094,8 @@ GtkColorSwatch {
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
$_colorswatch_radius: 5px;
box-shadow: $_colorswatch_shadow;
// take care of colorswatches on selected elements
@ -3107,27 +3109,48 @@ GtkColorSwatch {
// we need to re-set the shadow here since it get axed by the previous bit
&:selected { box-shadow: $_colorswatch_shadow; }
// border rounding
// base color corners rounding
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
// sports a bigger radius.
// nth-child is needed by the custom color strip.
// 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+, not a browser.
&.top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: $_colorswatch-radius + 1px;
border-top-right-radius: $_colorswatch-radius + 1px;
}
&.bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: $_colorswatch-radius + 1px;
border-bottom-right-radius: $_colorswatch-radius + 1px;
}
&.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
&.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), &:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
&.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), &: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+.
&:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; }
// overlay corner rounding
&.top > .overlay {
border-top-left-radius: $_colorswatch-radius;
border-top-right-radius: $_colorswatch-radius;
}
&.bottom > .overlay {
border-bottom-left-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
&:first-child:not(.top) > .overlay {
border-top-left-radius: $_colorswatch-radius;
border-bottom-left-radius: $_colorswatch-radius;
}
&:last-child:not(.bottom) > .overlay {
border-top-right-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
&:only-child > .overlay { border-radius: $_colorswatch-radius; }
// hover effect
&:hover,
@ -3136,9 +3159,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
background-image: linear-gradient(135deg, transparentize(white, 0.5),
transparentize(white, 1) 50%);
}
}
&:backdrop,
&:backdrop:selected {
&:backdrop:selected
&.color-dark:backdrop,
&.color-dark:backdrop:selected {
background-image: none;
box-shadow: none;
}
@ -3153,7 +3182,7 @@ GtkColorSwatch {
&:backdrop { box-shadow: none; }
}
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
// indicator and keynav outline colors
&.color-dark {
color: white;
outline-color: transparentize(black, 0.7);
@ -3323,7 +3352,7 @@ GtkVolumeButton.button { padding: 8px; }
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
.undershoot {
.undershoot {
&.top {
@include undershoot(top);
}

27
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -4238,23 +4238,40 @@ GtkColorSwatch {
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: 6px;
border-top-right-radius: 6px; }
GtkColorSwatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
GtkColorSwatch.left, GtkColorSwatch: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) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
GtkColorSwatch:only-child:not(.overlay) {
border-radius: 6px; }
GtkColorSwatch.top > .overlay {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
GtkColorSwatch.bottom {
GtkColorSwatch.bottom > .overlay {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
GtkColorSwatch: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 {
GtkColorSwatch:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
GtkColorSwatch:only-child > .overlay {
border-radius: 5px; }
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 {
GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
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 {
background-image: none;
box-shadow: none; }
GtkColorEditor GtkColorSwatch {

27
gtk/theme/Adwaita/gtk-contained.css
View File

@ -4410,23 +4410,40 @@ GtkColorSwatch {
GtkColorSwatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
GtkColorSwatch.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px; }
GtkColorSwatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
GtkColorSwatch.left, GtkColorSwatch: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) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
GtkColorSwatch:only-child:not(.overlay) {
border-radius: 6px; }
GtkColorSwatch.top > .overlay {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
GtkColorSwatch.bottom {
GtkColorSwatch.bottom > .overlay {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
GtkColorSwatch: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 {
GtkColorSwatch:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
GtkColorSwatch:only-child > .overlay {
border-radius: 5px; }
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, GtkColorSwatch:backdrop:selected {
GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
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 {
background-image: none;
box-shadow: none; }
GtkColorEditor GtkColorSwatch {