sass: Add overlay() function
This will replace all the $overlay-* variables.
For now, adopt it for GTK.
by roundabout, Friday, 24 July 2020, 02:21:58 (1595557318), pushed by roundabout, Sunday, 11 May 2025, 13:22:53 (1746969773)
Author identity: nana-4 <hnmaigo@gmail.com>
c0a8b464be5ca921509bf2a64804cb5db19fa78a
src/_colors.scss
@@ -80,6 +80,33 @@ $on-colors: (
@return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
}
// Private variables for dark background colors
$-dark-background: #181818;
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
@@ -121,17 +148,6 @@ $titlebar-indicator: if($topbar == 'dark', currentcolor, $pri
// Overlay state colors
//
$overlay-hover-opacity: .08;
$overlay-focus-opacity: .08;
$overlay-active-opacity: .12;
$overlay-checked-opacity: .12;
$overlay-selected-opacity: .24;
$overlay-hover: gtkalpha(currentcolor, .08);
$overlay-focus: gtkalpha(currentcolor, .08);
$overlay-focus-hover: gtkalpha(currentcolor, .16);
$overlay-active: gtkalpha(currentcolor, .12);
$overlay-checked: gtkalpha(currentcolor, .12);
$overlay-selected: rgba($primary, .24);
//
src/gtk/sass/_common-3.20.scss
@@ -31,7 +31,7 @@
-gtk-outline-radius: $corner-radius;
&:focus {
outline-color: $overlay-checked;
outline-color: overlay("focus", $text);
}
}
@@ -82,11 +82,11 @@
color: $text;
&:hover {
box-shadow: inset 0 0 0 9999px $overlay-hover;
box-shadow: inset 0 0 0 9999px overlay("hover", $text);
}
&:selected:hover {
box-shadow: inset 0 0 0 9999px rgba($primary, .08);
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
}
&:disabled {
@@ -418,7 +418,7 @@ treeview entry {
color: $text;
&:hover {
background-image: image($overlay-hover);
background-image: image(overlay("hover", $text));
}
// side margins: compensate the entry padding with a negative margin
@@ -494,13 +494,13 @@ button {
}
&:checked {
background-color: mix($primary, $surface, percentage($overlay-checked-opacity + .04));
background-color: overlay("activated", $primary, $background: $surface);
color: $primary;
@include raised-ink-color($primary);
&:disabled {
box-shadow: inset 0 0 0 9999px $overlay-checked;
background-color: $fill;
box-shadow: none;
background-color: overlay("activated", $text, $background: $fill);
color: $text-disabled;
}
}
@@ -569,7 +569,7 @@ button {
@extend %button-flat-basic;
&:checked {
background-color: $overlay-checked;
background-color: overlay("activated", $text);
color: $text;
@include ink-color($text);
@@ -649,7 +649,7 @@ button {
}
&:checked {
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
background-color: overlay("activated", on($color), $background: $color);
}
&.flat {
@@ -663,7 +663,7 @@ button {
}
&:checked {
background-color: rgba($color, $overlay-checked-opacity);
background-color: overlay("activated", $color);
}
}
@@ -1696,7 +1696,7 @@ treeview.view {
// FIXME: box-shadow, background-color and background-image are not available here.
border-style: solid none;
border-width: 9999px;
border-color: $overlay-hover;
border-color: overlay("hover", $text);
&.after {
border-top-style: none;
@@ -1828,7 +1828,7 @@ menubar,
&:hover { // Seems like it :hover even with keyboard focus
transition: none;
background-color: $overlay-checked;
background-color: overlay("activated", $titlebar-text);
color: $titlebar-text;
}
@@ -1870,7 +1870,7 @@ menu,
&:hover {
transition: none;
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
&:disabled {
@@ -1932,7 +1932,7 @@ menu,
}
&:hover {
background-image: image($overlay-hover);
background-image: image(overlay("hover", $text));
}
&:disabled {
@@ -2227,7 +2227,7 @@ notebook {
font-weight: 500;
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
&:disabled {
@@ -2261,7 +2261,7 @@ notebook {
padding: $container-padding 12px;
&:drop(active) {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
}
@@ -2534,16 +2534,23 @@ switch {
}
&:hover slider {
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
box-shadow: 0 0 0 10px overlay("hover", $text), $shadow-z1;
}
&:focus slider {
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
box-shadow: 0 0 0 10px overlay("focus", $text), $shadow-z1;
}
&:checked slider {
background-color: $primary;
color: $primary;
}
&:checked:hover slider {
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
}
&:checked:focus slider {
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
}
row:selected & {
@@ -2910,11 +2917,11 @@ scale {
}
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", $primary);
}
&:focus {
background-color: $overlay-focus;
background-color: overlay("focus", $primary);
}
&:active {
@@ -2926,7 +2933,7 @@ scale {
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
background-image:
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
}
@@ -2999,7 +3006,7 @@ scale {
background-image:
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
}
}
}
@@ -3289,7 +3296,7 @@ row {
// this is for indicathing which row generated a popover
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&.has-open-popup {
background-color: $overlay-checked;
background-color: overlay("activated", $text);
}
}
@@ -3297,6 +3304,10 @@ row {
@extend %selected_items;
@include ink-color($primary, $fg: false);
&.has-open-popup {
background-color: overlay("activated", $primary, $background: $overlay-selected);
}
}
}
@@ -3388,7 +3399,7 @@ calendar {
color: $text2;
&:hover {
background-image: image($overlay-hover);
background-image: image(overlay("hover", $text));
}
&:disabled {
@@ -3668,7 +3679,7 @@ placessidebar.sidebar {
}
&.sidebar-placeholder-row {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
&.sidebar-new-bookmark-row {
@@ -4231,7 +4242,7 @@ popover.emoji-picker .emoji {
border-radius: $corner-radius;
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
}
}
@@ -4250,6 +4261,6 @@ popover.emoji-completion {
}
.emoji:hover {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
}
src/gtk/sass/_drawing-3.20.scss
@@ -50,11 +50,11 @@
}
@if $t == hover {
box-shadow: inset 0 0 0 9999px $overlay-hover, inset 0 -1px if($fc == $primary, $stroke, $fc);
box-shadow: inset 0 0 0 9999px overlay("hover", $text), inset 0 -1px if($fc == $primary, $stroke, $fc);
}
@if $t == focus {
box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $stroke, $fc);
box-shadow: inset 0 0 0 9999px overlay("focus", $text), inset 0 -1px if($fc == $primary, $stroke, $fc);
}
@if $t == checked {
@@ -144,31 +144,27 @@ $ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0m
}
@mixin ink-color($color, $opacity-modifier: 0, $fg: true, $activated: false) {
@if saturation($color) > 50% {
$opacity-modifier: .04;
}
@if $fg {
color: $color;
}
@if $activated {
background-color: rgba($color, $overlay-checked-opacity + $opacity-modifier);
background-color: overlay("activated", $color, $opacity-modifier: $opacity-modifier);
}
box-shadow: inset 0 0 0 9999px transparent;
&:drop(active),
&:hover {
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier);
box-shadow: inset 0 0 0 9999px overlay("hover", $color, $opacity-modifier: $opacity-modifier);
}
&:focus {
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier);
box-shadow: inset 0 0 0 9999px overlay("focus", $color, $opacity-modifier: $opacity-modifier);
}
&:active {
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
background-image: radial-gradient(circle, overlay("pressed", $color, $opacity-modifier: $opacity-modifier) 10%, transparent 0%);
}
}
src/gtk/sass/apps/_budgie.scss
@@ -233,7 +233,7 @@
transition: $transition;
&.current-workspace {
background-color: $overlay-checked;
background-color: overlay("activated", on($panel));
}
}
src/gtk/sass/apps/_gnome-3.22.scss
@@ -30,7 +30,7 @@
@keyframes nautilus-operations-button-needs-attention {
to {
background-color: $overlay-focus;
background-color: overlay("focus", $titlebar-text);
}
}
@@ -722,7 +722,7 @@ docktab {
font-weight: 500;
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", $text);
}
&:checked {
@@ -934,15 +934,15 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
}
&:hover image {
box-shadow: inset 0 0 0 9999px $overlay-hover;
box-shadow: inset 0 0 0 9999px overlay("hover", $titlebar-text);
}
&:focus image {
box-shadow: inset 0 0 0 9999px $overlay-focus;
box-shadow: inset 0 0 0 9999px overlay("focus", $titlebar-text);
}
&:active image {
background-color: $overlay-active;
background-color: overlay("pressed", $titlebar-text);
}
}
@@ -1067,7 +1067,7 @@ overlay grid.horizontal > revealer > scrolledwindow.frame {
// background-color: @theme_bg_color;
&:hover {
background-image: image($overlay-hover);
background-image: image(overlay("hover", $text));
}
}
src/gtk/sass/apps/_mate.scss
@@ -168,11 +168,11 @@ PanelApplet.wnck-applet .wnck-pager {
color: on($panel, primary);
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", on($panel));
}
&:active {
background-color: $overlay-active;
background-color: overlay("pressed", on($panel));
}
&:selected {
@@ -272,7 +272,7 @@ na-tray-applet widget box widget {
}
&:selected > box {
background-color: $overlay-checked;
background-color: overlay("activated", on($panel));
color: on($panel);
}
}
@@ -292,7 +292,7 @@ na-tray-applet widget box widget {
font-weight: normal;
&:not(.flat) {
background-color: $overlay-checked;
background-color: overlay("activated", $text);
}
image,
src/gtk/sass/apps/_misc.scss
@@ -138,7 +138,7 @@ window.background.chromium {
// Workaround for non-animatable buttons in headerbar
headerbar button:active {
background-color: $overlay-active;
background-color: overlay("pressed", $titlebar-text);
}
spinner {
@@ -235,11 +235,11 @@ tooltip.background.chromium {
background-size: auto;
&:hover {
box-shadow: inset 0 0 0 9999px $overlay-hover;
box-shadow: inset 0 0 0 9999px overlay("hover", $text);
}
&:active {
background-image: image($overlay-active);
background-image: image(overlay("pressed", $text));
}
}
src/gtk/sass/apps/_unity.scss
@@ -51,7 +51,7 @@ UnityDecoration {
color: $titlebar-text2;
&:hover {
background-color: $overlay-checked;
background-color: overlay("activated", $titlebar-text);
color: $titlebar-text;
}
}
@@ -92,7 +92,7 @@ UnityPanelWidget,
.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
background-color: $overlay-checked;
background-color: overlay("activated", $titlebar-text);
color: $titlebar-text;
}
src/gtk/sass/apps/_xfce.scss
@@ -78,11 +78,11 @@
// Workspace switcher provided by libwnck
wnck-pager {
&:hover {
background-color: $overlay-hover;
background-color: overlay("hover", on($panel));
}
&:active {
background-color: $overlay-active;
background-color: overlay("pressed", on($panel));
}
&:selected {