sass: Add scrollbar-thumb() function for scrollbar thumb
The scrollbar thumb is the only place where overlay is not used for hover and pressed interactions.
by roundabout, Saturday, 6 March 2021, 23:32:48 (1615073568), pushed by roundabout, Sunday, 11 May 2025, 13:22:57 (1746969777)
Author identity: nana-4 <hnmaigo@gmail.com>
0b8f607bdca77799b227cadb2c23f7b01e141f5d
src/_colors.scss
@@ -239,3 +239,17 @@ $overlay-selected: rgba($primary, .24);
@function entry-fill($color) {
@return rgba($color, if(has-alpha($color), .04, .04));
}
@function scrollbar-thumb($color, $state: null) {
@if $state == null {
@return rgba($color, if(has-alpha($color), .38, .5));
} @else if $state == "hover" {
@return rgba($color, if(has-alpha($color), .48, .6));
} @else if $state == "pressed" {
@return rgba($color, if(has-alpha($color), .6, .7));
} @else if $state == "disabled" {
@return rgba($color, if(has-alpha($color), .26, .3));
} @else {
@error "Invalid type: '#{$state}'";
}
}
src/_colors.scss.template
@@ -232,3 +232,17 @@ $overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
@function entry-fill($color) {
@return rgba($color, if(has-alpha($color), .04, .04));
}
@function scrollbar-thumb($color, $state: null) {
@if $state == null {
@return rgba($color, if(has-alpha($color), .38, .5));
} @else if $state == "hover" {
@return rgba($color, if(has-alpha($color), .48, .6));
} @else if $state == "pressed" {
@return rgba($color, if(has-alpha($color), .6, .7));
} @else if $state == "disabled" {
@return rgba($color, if(has-alpha($color), .26, .3));
} @else {
@error "Invalid type: '#{$state}'";
}
}
src/chrome/sass/_scrollbars.scss
@@ -25,7 +25,7 @@
height: 32px;
border: 4px solid transparent;
border-radius: 8px;
background-color: disabled($on-surface);
background-color: scrollbar-thumb($on-surface);
background-clip: padding-box;
&:horizontal {
@@ -41,15 +41,15 @@
}
&:hover {
background-color: hint($on-surface);
background-color: scrollbar-thumb($on-surface, "hover");
}
&:active {
background-color: $on-surface;
background-color: scrollbar-thumb($on-surface, "pressed");
}
&:disabled {
background-color: disabled-hint($on-surface);
background-color: scrollbar-thumb($on-surface, "disabled");
}
}
src/gnome-shell/sass/components/_scrollbar.scss
@@ -26,14 +26,14 @@ StScrollBar {
// would be nice to margin or at least to transparent
// border: 4px solid transparent;
border-radius: (8px / 2);
background-color: disabled($on-surface);
background-color: scrollbar-thumb($on-surface);
&:hover {
background-color: hint($on-surface);
background-color: scrollbar-thumb($on-surface, "hover");
}
&:active {
background-color: $on-surface;
background-color: scrollbar-thumb($on-surface, "pressed");
}
}
}
@@ -45,14 +45,14 @@ StScrollBar {
StButton#vhandle,
StButton#hhandle {
background-color: disabled($on-dark);
background-color: scrollbar-thumb($on-dark);
&:hover {
background-color: hint($on-dark);
background-color: scrollbar-thumb($on-dark, "hover");
}
&:active {
background-color: $on-dark;
background-color: scrollbar-thumb($on-dark, "pressed");
}
}
}
src/gtk/sass/_common-3.20.scss
@@ -2426,18 +2426,18 @@ scrollbar {
border: 4px solid transparent;
border-radius: $circular-radius;
background-clip: padding-box;
background-color: disabled($on-surface);
background-color: scrollbar-thumb($on-surface);
&:hover {
background-color: hint($on-surface);
background-color: scrollbar-thumb($on-surface, "hover");
}
&:active {
background-color: $on-surface;
background-color: scrollbar-thumb($on-surface, "pressed");
}
&:disabled {
background-color: disabled-hint($on-surface);
background-color: scrollbar-thumb($on-surface, "disabled");
}
}
@@ -2478,12 +2478,12 @@ scrollbar {
margin: 4px - 1px;
border: 1px solid rgba($base, .3);
border-radius: $circular-radius;
background-color: disabled($on-surface);
background-color: scrollbar-thumb($on-surface);
background-clip: padding-box;
-gtk-icon-source: none;
&:disabled {
background-color: disabled-hint($on-surface);
background-color: scrollbar-thumb($on-surface, "disabled");
}
}