From 993721c74627771fbd71a4fa65082b1393388a56 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 16 Apr 2015 09:57:23 +0200 Subject: [PATCH] Adwaita: colorpicker fixes. 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. --- gtk/theme/Adwaita/_common.scss | 67 +++++++++++++++++------- gtk/theme/Adwaita/gtk-contained-dark.css | 27 ++++++++-- gtk/theme/Adwaita/gtk-contained.css | 27 ++++++++-- 3 files changed, 92 insertions(+), 29 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 447309213a..34fc60255d 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -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); } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 4e39922279..afa2610d14 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -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 { diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 1d5dbe2cb1..e6e3584a08 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -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 { -- 2.30.2