diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 82b2b0fc30..80ce5cf950 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -758,14 +758,14 @@ modelbutton.flat arrow { } button.color { - padding: 5px; // Uniform padding on the GtkColorButton - - > colorswatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the colorchooser style - > overlay, & { border-radius: 0; } - box-shadow: inset 0 1px 1px transparentize(black, 0.9), - _widget_edge(); - &:disabled, - &:backdrop { box-shadow: none; } + padding: 4px; + colorswatch:only-child { + &, overlay { border-radius: 0; } + @if $variant == 'light' { + box-shadow: 0 1px _text_shadow_color(); + &:disabled, + &:backdrop { box-shadow: none; } + } } } @@ -3166,117 +3166,91 @@ tooltip { 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(); + // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is + // applied to the overlay box. $_colorswatch_radius: 5px; - - box-shadow: $_colorswatch_shadow; - - // take care of colorswatches on selected elements - :selected & { - box-shadow: none; - & overlay, & overlay:hover { - border-color: $selected_fg_color; - } - } - - // we need to re-set the shadow here since it get axed by the previous bit - &:selected { box-shadow: $_colorswatch_shadow; } + $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3), + inset 0 3px 2px -2px transparentize(black, 0.5)); // 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: $_colorswatch-radius + 1px; - border-top-right-radius: $_colorswatch-radius + 1px; + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-top-right-radius: $_colorswatch_radius + 0.5px; + overlay { + border-top-left-radius: $_colorswatch_radius; + border-top-right-radius: $_colorswatch_radius; + } } &.bottom { - border-bottom-left-radius: $_colorswatch-radius + 1px; - border-bottom-right-radius: $_colorswatch-radius + 1px; + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + overlay { + border-bottom-left-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } } - &.left, &:first-child:not(overlay):not(.top) { - border-top-left-radius: $_colorswatch-radius + 1px; - border-bottom-left-radius: $_colorswatch-radius + 1px; + &.left, &:first-child:not(.top) { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + overlay { + border-top-left-radius: $_colorswatch_radius; + border-bottom-left-radius: $_colorswatch_radius; + } } - &.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; } - - // 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 - &.activatable:hover, - &.activatable: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 if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); - } - &:backdrop, - &:backdrop:selected - &.dark:backdrop, - &.dark:backdrop:selected { - background-image: none; - box-shadow: none; + &.right, &:last-child:not(.bottom) { + border-top-right-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + overlay { + border-top-right-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } } - // indicator and keynav outline colors - &.dark { - color: white; - outline-color: transparentize(white, 0.5); + &.dark overlay { + color: $selected_fg_color; + &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } + &:backdrop { color: $backdrop_selected_fg_color; } + } + + &.light overlay { + color: $text_color; + &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } + &:backdrop { color: $backdrop_text_color; } + } + + overlay { + box-shadow: $_colorswatch_overlay_shadow; border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); - &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } - &:backdrop { color: transparentize(white, 0.7); } - } - &.light { - color: black; - outline-color: transparentize(black, 0.5); - border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); - &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } - &:backdrop { color: transparentize(black, 0.7); } + &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); } + &:backdrop, &:backdrop:hover { + border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); + box-shadow: none; + } } - // border color - & overlay, - & overlay:selected { - background: none; - border: none; - } - - // 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 + border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; + &:only-child { border-radius: $_colorswatch_radius; } + overlay { + @include button(normal); + &:hover { @include button(hover); } + &:backdrop { @include button(backdrop); } + } } + + &:disabled { + opacity: 0.5; + overlay { + border-color: transparentize(black, 0.4); + box-shadow: none; + } + } + + row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index f3680e72a2..977819f946 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1259,17 +1259,9 @@ modelbutton.flat arrow { button.color, headerbar button.color.titlebutton, .titlebar button.color.titlebutton { - padding: 5px; } - button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child { - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); } - button.color > colorswatch:first-child:last-child > overlay, button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child { - border-radius: 0; } - button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > colorswatch:first-child:last-child:disabled, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > colorswatch:first-child:last-child:backdrop, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop { - box-shadow: none; } + padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } /********* * Links * @@ -4385,71 +4377,55 @@ tooltip { /***************** * Color Chooser * *****************/ -colorswatch { - box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); } - :selected colorswatch { - box-shadow: none; } - :selected colorswatch overlay, :selected colorswatch overlay:hover { - border-color: #ffffff; } - colorswatch:selected { - box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0); } - 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 { +colorswatch.top { + border-top-left-radius: 5.5px; + border-top-right-radius: 5.5px; } + colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } - colorswatch.bottom > overlay { +colorswatch.bottom { + border-bottom-left-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - colorswatch:first-child:not(.top) > overlay { +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 5.5px; + border-bottom-left-radius: 5.5px; } + colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - colorswatch:last-child:not(.bottom) > overlay { +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - 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.dark:backdrop, colorswatch.dark:backdrop:selected { - background-image: none; +colorswatch.dark overlay { + color: #ffffff; } + colorswatch.dark overlay:hover { + border-color: #1c1f1f; } + colorswatch.dark overlay:backdrop { + color: #ffffff; } +colorswatch.light overlay { + color: white; } + colorswatch.light overlay:hover { + border-color: #1c1f1f; } + colorswatch.light overlay:backdrop { + color: #d5d5d5; } +colorswatch overlay { + box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5); + border: 1px solid #1c1f1f; } + colorswatch overlay:hover { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { + border-color: #1c1f1f; box-shadow: none; } - colorswatch.dark { - color: white; - outline-color: rgba(255, 255, 255, 0.5); - border: 1px solid #1c1f1f; } - colorswatch.dark:hover { - border-color: black; } - colorswatch.dark:backdrop { - color: rgba(255, 255, 255, 0.3); } - colorswatch.light { - color: black; - outline-color: rgba(0, 0, 0, 0.5); - border: 1px solid #1c1f1f; } - colorswatch.light:hover { - border-color: black; } - colorswatch.light:backdrop { - color: rgba(0, 0, 0, 0.3); } - colorswatch overlay, colorswatch overlay:selected { - background: none; - border: none; } - colorswatch#add-color-button { - border-style: solid; - border-width: 1px; +colorswatch#add-color-button { + border-radius: 5px 5px 0 0; } + colorswatch#add-color-button:only-child { + border-radius: 5px; } + colorswatch#add-color-button overlay { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; @@ -4457,7 +4433,7 @@ colorswatch { text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); } - colorswatch#add-color-button:hover { + colorswatch#add-color-button overlay:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; @@ -4471,20 +4447,20 @@ colorswatch { text-shadow: 0 -1px rgba(0, 0, 0, 0.76376); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0); } - colorswatch#add-color-button:backdrop { + colorswatch#add-color-button overlay:backdrop { color: #949796; border-color: #1f2222; background-image: linear-gradient(to bottom, #393f3f); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } - colorswatch#add-color-button overlay { - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - -gtk-icon-shadow: none; } +colorswatch:disabled { + opacity: 0.5; } + colorswatch:disabled overlay { + border-color: rgba(0, 0, 0, 0.6); + box-shadow: none; } +row:selected colorswatch { + box-shadow: 0 0 0 2px #ffffff; } /******** * Misc * diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 5e56c90470..f6c3c05064 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1259,16 +1259,12 @@ modelbutton.flat arrow { button.color, headerbar button.color.titlebutton, .titlebar button.color.titlebutton { - padding: 5px; } - button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child { - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); } - button.color > colorswatch:first-child:last-child > overlay, button.color > colorswatch:first-child:last-child, headerbar button.color.titlebutton > colorswatch:first-child:last-child, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child { + padding: 4px; } + button.color colorswatch:only-child { + box-shadow: 0 1px rgba(255, 255, 255, 0.76923); } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } - button.color > colorswatch:first-child:last-child:disabled, headerbar button.color.titlebutton > colorswatch:first-child:last-child:disabled, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child:disabled, button.color > colorswatch:first-child:last-child:backdrop, headerbar button.color.titlebutton > colorswatch:first-child:last-child:backdrop, - .titlebar button.color.titlebutton > colorswatch:first-child:last-child:backdrop { + button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { box-shadow: none; } /********* @@ -4557,71 +4553,55 @@ tooltip { /***************** * Color Chooser * *****************/ -colorswatch { - box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); } - :selected colorswatch { - box-shadow: none; } - :selected colorswatch overlay, :selected colorswatch overlay:hover { - border-color: #ffffff; } - colorswatch:selected { - box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0); } - 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 { +colorswatch.top { + border-top-left-radius: 5.5px; + border-top-right-radius: 5.5px; } + colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } - colorswatch.bottom > overlay { +colorswatch.bottom { + border-bottom-left-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - colorswatch:first-child:not(.top) > overlay { +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 5.5px; + border-bottom-left-radius: 5.5px; } + colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - colorswatch:last-child:not(.bottom) > overlay { +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - 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.1); } - colorswatch:backdrop, colorswatch:backdrop:selected - colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { - background-image: none; +colorswatch.dark overlay { + color: #ffffff; } + colorswatch.dark overlay:hover { + border-color: rgba(0, 0, 0, 0.8); } + colorswatch.dark overlay:backdrop { + color: #ffffff; } +colorswatch.light overlay { + color: black; } + colorswatch.light overlay:hover { + border-color: rgba(0, 0, 0, 0.5); } + colorswatch.light overlay:backdrop { + color: #333333; } +colorswatch overlay { + box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); } + colorswatch overlay:hover { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { + border-color: rgba(0, 0, 0, 0.3); box-shadow: none; } - colorswatch.dark { - color: white; - outline-color: rgba(255, 255, 255, 0.5); - 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(0, 0, 0, 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 { - background: none; - border: none; } - colorswatch#add-color-button { - border-style: solid; - border-width: 1px; +colorswatch#add-color-button { + border-radius: 5px 5px 0 0; } + colorswatch#add-color-button:only-child { + border-radius: 5px; } + colorswatch#add-color-button overlay { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; @@ -4629,7 +4609,7 @@ colorswatch { text-shadow: 0 1px rgba(255, 255, 255, 0.76923); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0); } - colorswatch#add-color-button:hover { + colorswatch#add-color-button overlay:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; @@ -4643,20 +4623,20 @@ colorswatch { text-shadow: 0 1px rgba(255, 255, 255, 0.76923); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px white, 0 1px rgba(255, 255, 255, 0); } - colorswatch#add-color-button:backdrop { + colorswatch#add-color-button overlay:backdrop { color: #8b8e8f; border-color: #a5a5a1; background-image: linear-gradient(to bottom, #e8e8e7); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - colorswatch#add-color-button overlay { - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - -gtk-icon-shadow: none; } +colorswatch:disabled { + opacity: 0.5; } + colorswatch:disabled overlay { + border-color: rgba(0, 0, 0, 0.6); + box-shadow: none; } +row:selected colorswatch { + box-shadow: 0 0 0 2px #ffffff; } /******** * Misc *