Akatsuki-Misaki/WhiteSur-gtk-theme
1
0
Fork 0
mirror of https://github.com/vinceliuice/WhiteSur-gtk-theme.git synced 2025-06-01 10:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
vinceliuice 2025-04-09 23:49:35 +08:00
parent a8314c62b7
commit 20ea5a2a57
19 changed files with 452 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
install.sh
View File

@ -179,7 +179,11 @@ else
prompt -w "Removing the old '${name}' themes...\n"
remove_themes; customize_theme; avoid_variant_duplicates;
if [[ "${libadwaita}" != 'true' ]]; then
remove_themes
fi
customize_theme; avoid_variant_duplicates;
prompt -w "Installing '${name}' themes in '${dest}'...\n";
@ -192,8 +196,6 @@ else
prompt -i "Start icon style : ${icon}"
prompt -i "Nautilus style : ${nautilus_style}"
echo; install_themes; echo; prompt -s "Done!"
if [[ "${libadwaita}" == 'true' ]]; then
if [[ "$UID" != '0' ]]; then
install_libadwaita
@ -201,6 +203,8 @@ else
else
echo; prompt -e "Do not run '--libadwaita' option with sudo!"
fi
else
echo; install_themes; echo; prompt -s "Done!"
fi
if (is_my_distro "solus") && (is_running "gnome-session"); then

3
libs/lib-install.sh
View File

@ -536,6 +536,9 @@ config_gtk4() {
install_libadwaita() {
color="${colors[0]}"
opacity="${opacities[0]}"
alt="${alts[0]}"
theme="${themes[0]}"
scheme="${schemes[0]}"
gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
}

55
src/sass/_colors.scss
View File

@ -3,7 +3,7 @@
}
@function gtkmix($c1,$c2,$r) {
$ratio: 1 - $r / 100%; // match SCSS mix()
$ratio: 1 - $r / 100%; // match SCSS gtkmix()
@return unquote("mix(#{$c1},#{$c2},#{$ratio})");
}
@ -42,13 +42,13 @@ $hint_fg_color: if($variant == 'light', #565656, #999999);
//insensitive state derived colors
$disabled_fg_color: if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
$alt_disabled_fg_color: if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
$disabled_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
$disabled_bg_color: if($variant == 'light', gtkmix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
$active_color: if($variant == 'light', rgba(black, 0.26), rgba(white, 0.2));
$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
$visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
$fill_color: if($variant == 'light', rgba(black, 0.06), rgba(white, 0.05));
$active_color: if($variant == 'light', gtkalpha(currentColor, 0.26), gtkalpha(currentColor, 0.2));
$track_color: if($variant == 'light', gtkalpha(currentColor, 0.20), gtkalpha(currentColor, 0.16));
$visit_color: if($variant == 'light', gtkalpha(currentColor, 0.16), gtkalpha(currentColor, 0.12));
$divider_color: if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.1));
$fill_color: if($variant == 'light', gtkalpha(currentColor, 0.06), gtkalpha(currentColor, 0.05));
$light_fg_color: white;
$light_alt_fg_color: rgba(white, 0.85);
@ -97,12 +97,12 @@ $selected_bg_color: if($scheme == 'nord', $nord_color_default, $
$primary_color: $selected_bg_color;
$selected_borders_color: darken($selected_bg_color, 10%);
$borders_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
$light_borders_color: if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
$dark_borders_color: if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
$solid_borders_color: if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
$dark_solid_borders_color: if($variant == 'light', mix(black, $base_color, 12%), mix(black, $base_color, 15%));
$highlight_color: if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
$borders_color: if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.12));
$light_borders_color: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
$dark_borders_color: if($variant == 'light', gtkalpha(black, 0.08), gtkalpha(black, 0.15));
$solid_borders_color: if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 12%));
$dark_solid_borders_color: if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 15%));
$highlight_color: if($variant == 'light', gtkalpha(white, 0.15), gtkalpha(white, 0.1));
// Gnome-shell background colors
$dark_bg_color: rgba(black, 0.6);
@ -143,9 +143,10 @@ $header_fg: if($variant == 'light', #575757, #FDFDFD);
$header_fg: if($variant == 'light', #57647f, #f8f9fc);
}
$dark_header_bg: if($trans == 'true', rgba($base_color, 0.96), $base_color);
$header_bg_backdrop: if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%));
$header_border: if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%));
$dark_header_bg: if($trans == 'true', gtkalpha($base_color, 0.96), $base_color);
$header_bg_backdrop: if($variant == 'light', gtkmix(black, $header_bg, 2%), gtkmix(black, $header_bg, 1%));
$header_border: if($variant == 'light', gtkmix(black, $header_bg, 12%), gtkmix(black, $header_bg, 75%));
$header_border_backdrop: if($variant == 'light', gtkmix(black, $header_bg, 8%), gtkmix(black, $header_bg, 35%));
// Sidebar colors
$dark_sidebar_bg: white;
@ -174,14 +175,14 @@ $opacity: if($gnome_version == 'new', 0.92, 0.95);
}
$dark_sidebar_fg: $text_color;
$dark_sidebar_border: if($variant == 'light', $solid_borders_color, $header_border);
$sidebar_theme_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
$dark_sidebar_border: if($variant == 'light', $solid_borders_color, gtkmix(black, $dark_sidebar_bg, 75%));
$sidebar_theme_color: gtkalpha(currentColor, 0.15);
//dialog
$dialog_bg_color: if($variant == 'light', $bg_color, $base_color);
@if $trans=='true' {
$dialog_bg_color: if($variant == 'light', rgba($bg_color, $opacity), rgba($base_color, $opacity));
$dialog_bg_color: if($variant == 'light', gtkalpha($bg_color, $opacity), gtkalpha($base_color, $opacity));
}
//OSD colors
@ -192,22 +193,22 @@ $osd_bg_color: if($trans == 'true', rgba(if($darker == 'tru
$osd_bg_color: if($trans == 'true', rgba(if($darker == 'true', #16191e, #222730), $opacity), if($darker == 'true', #16191e, #222730));
}
$osd_button_bg: rgba(lighten($osd_bg_color, 22%), $opacity);
$osd_button_bg: gtkalpha(lighten($osd_bg_color, 22%), $opacity);
$osd_button_border: $dark_borders_color;
$osd_entry_bg: rgba(lighten($osd_bg_color, 22%), $opacity);
$osd_entry_bg: gtkalpha(lighten($osd_bg_color, 22%), $opacity);
$osd_entry_border: $dark_borders_color;
$osd_disabled_bg_color: darken($osd_bg_color, 3%);
$osd_disabled_fg_color: rgba($osd_fg_color, 0.35);
$osd_disabled_fg_color: gtkalpha($osd_fg_color, 0.35);
$osd_borders_color: $dark_borders_color;
// Menu colors
$menu_bg: if($variant == 'light', $base_color, $bg_color);
$menu_bd: if($variant == 'light', rgba(black, 0.08), rgba(white, 0.07));
$menu_bd: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.07));
$menu_opacity: 0.96;
@if $trans == 'true' {
$menu_bg: if($variant == 'light', rgba($base_color, $menu_opacity), rgba($bg_color, $menu_opacity));
$menu_bg: if($variant == 'light', gtkalpha($base_color, $menu_opacity), gtkalpha($bg_color, $menu_opacity));
}
$submenu_bg_color: if($variant == 'light', rgba(white, 1), rgba(white, 0.1));
@ -269,14 +270,14 @@ $dash_bg: if($variant == 'light', rgba(#d1d1d1, $panel
}
// Entry colors
$entry_bg: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
$entry_shell_bg: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
$entry_bg: gtkalpha(currentColor, 0.05);
$entry_shell_bg: gtkalpha(currentColor, 0.1);
$entry_border: $borders_color;
$entry_highlight: rgba($selection_mode_bg, 0.75);
// Button colors
$button_bg: if($variant == 'light', white, #656565);
$button_shell_bg: if($variant == 'light', mix(black, $dialog_bg_color, 6%), mix(white, $dialog_bg_color, 6%));
$button_shell_bg: if($variant == 'light', gtkmix(black, $dialog_bg_color, 6%), gtkmix(white, $dialog_bg_color, 6%));
@if $scheme == 'nord' {
$button_bg: if($variant == 'light', #fbfcfd, #556075);

20
src/sass/cinnamon/_drawing.scss
View File

@ -33,7 +33,7 @@
@if $t==insensitive {
color: $disabled_fg_color;
background-color: transparentize($entry_bg, 0.45);
background-color: gtkalpha($entry_bg, 0.45);
}
@if $t==osd {
@ -50,7 +50,7 @@
@if $t==osd-insensitive {
color: transparentize($osd_fg_color, 0.45);
background-color: transparentize($osd_entry_bg, 0.15);
background-color: gtkalpha($osd_entry_bg, 0.85);
box-shadow: inset 0 2px 4px transparentize(black, 0.95);
}
}
@ -76,21 +76,21 @@
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
border: 1px solid $button_borders;
background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
box-shadow: inset 0 1px rgba($button_highlight, 0.12);
box-shadow: inset 0 1px gtkalpha($button_highlight, 0.12);
}
@else if $t==focus {
color: $fg_color;
background-color: $button_bg;
border: 1px solid $selected_bg_color;
box-shadow: inset 0 1px rgba($button_highlight, 0.12);
box-shadow: inset 0 1px gtkalpha($button_highlight, 0.12);
}
@else if $t==focus-hover {
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
border: 1px solid $selected_bg_color;
box-shadow: inset 0 1px rgba($button_highlight, 0.12);
box-shadow: inset 0 1px gtkalpha($button_highlight, 0.12);
}
@else if $t==active {
@ -102,7 +102,7 @@
@else if $t==insensitive {
color: $disabled_fg_color;
border: 1px solid if($variant == 'light', $button_border, $dark_borders_color);
background-color: rgba($button_bg, 0.55);
background-color: gtkalpha($button_bg, 0.55);
}
@else if $t==flat {
@ -112,12 +112,12 @@
@else if $t==flat-hover {
color: $fg_color;
background-color: rgba($fg_color, 0.1);
background-color: gtkalpha($fg_color, 0.1);
}
@else if $t==flat-active {
color: $fg_color;
background-color: rgba($fg_color, 0.2);
background-color: gtkalpha($fg_color, 0.2);
}
@else if $t==flat-insensitive {
@ -132,7 +132,7 @@
@else if $t==osd-hover {
color: $osd_fg_color;
background-color: opacify(lighten($osd_button_bg, 7%), 0.1);
background-color: gtkalpha(gtkmix($osd_fg_color, $osd_button_bg, 7%), 0.1);
}
@else if $t==osd-active {
@ -142,6 +142,6 @@
@else if $t==osd-insensitive {
color: $osd_disabled_fg_color;
background-color: transparentize($osd_button_bg, 0.15);
background-color: gtkalpha($osd_button_bg, 0.85);
}
}

20
src/sass/gnome-shell/_drawing.scss
View File

@ -115,17 +115,17 @@
background-color: $c;
border-radius: $circular_radius;
border: 2px solid transparent !important;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
box-shadow: inset 0 0 0 1px transparent !important;
outline: none;
}
@if $t == hover {
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1) !important;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.1) !important;
border: 2px solid transparent !important;
}
@if $t == focus {
box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
box-shadow: inset 0 0 0 1px transparent !important;
@if $gnome_version == 'old' {
border: 2px solid lighten($fc, 15%) !important;
} @else {
@ -134,7 +134,7 @@
}
@if $t == insensitive {
background-color: rgba($c, 0.05);
background-color: gtkalpha($c, 0.05);
color: $disabled_fg_color;
}
@ -148,20 +148,20 @@
@if $t == flat-hover {
background-color: $c;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05) !important;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05) !important;
color: $tc;
}
@if $t == flat-focus {
border: none !important;
background-color: rgba($c, 0.2);
background-color: gtkalpha($c, 0.2);
color: $tc;
}
@if $t == flat-insensitive {
border: none !important;
background-color: rgba($c, 0.05);
color: rgba($tc, 0.45);
background-color: gtkalpha($c, 0.05);
color: gtkalpha($tc, 0.45);
}
}
@ -230,7 +230,7 @@
text-shadow: none;
icon-shadow: none;
@if $gnome_version == 'old' {
background-color: mix($tc, $c, 6%);
background-color: gtkmix($tc, $c, 6%);
} @else {
background-color: st-mix($tc, $c, 6%);
}
@ -242,7 +242,7 @@
text-shadow: none;
icon-shadow: none;
@if $gnome_version == 'old' {
background-color: mix($tc, $c, 12%);
background-color: gtkmix($tc, $c, 12%);
} @else {
background-color: st-mix($tc, $c, 12%);
}

2
src/sass/gnome-shell/common/_login-dialog.scss
View File

@ -324,7 +324,7 @@
padding: 0 !important;
border-radius: $circular_radius;
border: none;
background-color: rgba($borders_color, 0.1);
background-color: gtkalpha(currentColor, 0.1);
color: $light_fg_color;
}
}

2
src/sass/gnome-shell/widgets-48-0/_notifications.scss
View File

@ -16,7 +16,7 @@ $notification_banner_width: 34em;
text-shadow: none;
box-shadow: 0 3px 5px rgba(black, 0.15);
&:hover, &:active { background-color: rgba($menu_bg, 1); }
&:hover, &:active { background-color: gtkalpha($menu_bg, 1); }
}
.notification-buttons-bin {

155
src/sass/gtk/_colors-libadwaita.scss
View File

@ -158,61 +158,79 @@ $dark_5: #000000;
@if $gnome_version == 'old' or $accent_type == 'fixed' {
@define-color accent_bg_color #{$primary_color};
@define-color accent_fg_color #{$light_fg_color};
@define-color accent_color #{$primary_color};
// destructive-action buttons
@define-color destructive_bg_color #{$destructive_color};
@define-color destructive_fg_color #{$light_fg_color};
@define-color destructive_color #{$destructive_color};
// Levelbars, entries, labels and infobars. These don't need text colors
@define-color success_bg_color #{$success_color};
@define-color success_fg_color #{$light_fg_color};
@define-color success_color #{$success_color};
@define-color warning_bg_color #{$warning_color};
@define-color warning_fg_color #{$light_fg_color};
@define-color warning_color #{$warning_color};
@define-color error_bg_color #{$error_color};
@define-color error_fg_color #{$light_fg_color};
@define-color error_color #{$error_color};
// Window
@define-color window_bg_color #{$bg_color};
@define-color window_fg_color #{$text_color};
// Views - e.g. text view or tree view
@define-color view_bg_color #{$base_color};
@define-color view_fg_color #{$text_color};
// Header bar, search bar, tab bar
@define-color headerbar_bg_color #{$header_bg};
@define-color headerbar_fg_color #{$header_fg};
@define-color headerbar_border_color #{$borders_color};
@define-color headerbar_backdrop_color #{$header_bg_backdrop};
@define-color headerbar_shade_color #{$header_border};
@define-color headerbar_darker_shade_color #{$header_border};
// Split pane views
@define-color sidebar_bg_color #{$dark_sidebar_bg};
@define-color sidebar_fg_color #{$dark_sidebar_fg};
@define-color sidebar_backdrop_color #{$dark_sidebar_bg};
@define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
@define-color sidebar_border_color #{gtkalpha($dark_sidebar_fg, .08)};
@define-color secondary_sidebar_bg_color #{$base_color};
@define-color secondary_sidebar_fg_color #{$text_color};
@define-color secondary_sidebar_backdrop_color #{$bg_color};
@define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
@define-color secondary_sidebar_border_color #{$borders_color};
// Cards, boxed lists
@define-color card_bg_color #{$base_color};
@define-color card_fg_color #{$text_color};
@define-color card_shade_color #{$borders_color};
// Dialogs
@define-color dialog_bg_color #{$dialog_bg_color};
@define-color dialog_fg_color #{$text_color};
// Popovers
@define-color popover_bg_color #{$menu_bg};
@define-color popover_fg_color #{$text_color};
@define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
// Thumbnails
@define-color thumbnail_bg_color #{gtkmix($base_color, $bg_color, 50%)};
@define-color thumbnail_fg_color #{$text_color};
// Miscellaneous
@define-color shade_color #{$borders_color};
@define-color scrollbar_outline_color #{$borders_color};
}
@define-color accent_color #{$primary_color};
// destructive-action buttons
@define-color destructive_bg_color #{$destructive_color};
@define-color destructive_fg_color #{$light_fg_color};
@define-color destructive_color #{$destructive_color};
// Levelbars, entries, labels and infobars. These don't need text colors
@define-color success_bg_color #{$success_color};
@define-color success_fg_color #{$light_fg_color};
@define-color success_color #{$success_color};
@define-color warning_bg_color #{$warning_color};
@define-color warning_fg_color #{$light_fg_color};
@define-color warning_color #{$warning_color};
@define-color error_bg_color #{$error_color};
@define-color error_fg_color #{$light_fg_color};
@define-color error_color #{$error_color};
// Window
@define-color window_bg_color #{$bg_color};
@define-color window_fg_color #{$text_color};
// Views - e.g. text view or tree view
@define-color view_bg_color #{$base_color};
@define-color view_fg_color #{$text_color};
// Header bar, search bar, tab bar
@define-color headerbar_bg_color #{$header_bg};
@define-color headerbar_fg_color #{$header_fg};
@define-color headerbar_border_color #{$borders_color};
@define-color headerbar_backdrop_color #{$header_bg_backdrop};
@define-color headerbar_shade_color #{$header_border};
// Cards, boxed lists
@define-color card_bg_color #{$base_color};
@define-color card_fg_color #{$text_color};
@define-color card_shade_color #{$borders_color};
// Dialogs
@define-color dialog_bg_color #{$dialog_bg_color};
@define-color dialog_fg_color #{$text_color};
// Popovers
@define-color popover_bg_color #{$menu_bg};
@define-color popover_fg_color #{$text_color};
// Miscellaneous
@define-color shade_color #{$borders_color};
@define-color scrollbar_outline_color #{$borders_color};
@if $gnome_version == 'new' {
@if $gnome_version == 'new' and $accent_type != 'fixed' {
:root {
--accent-blue: #{$theme_color_default};
--accent-teal: #2190a4;
@ -235,4 +253,35 @@ $dark_5: #000000;
$progress_color: var(--accent-bg-color);
$selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
$selected_borders_color: color-mix(in srgb, black 25%, var(--accent-bg-color));
$bg_color: gtkcolor(window_bg_color);
$base_color: gtkcolor(view_bg_color);
$button_bg: gtkcolor(card_bg_color);
$text_color: gtkcolor(window_fg_color);
$fg_color: gtkcolor(window_fg_color);
$alt_fg_color: gtkalpha($fg_color, 0.8);
$hint_fg_color: gtkalpha($fg_color, 0.6);
$disabled_fg_color: gtkalpha($fg_color, 0.45);
$alt_disabled_fg_color: gtkalpha($fg_color, 0.35);
$header_bg: gtkcolor(headerbar_bg_color);
$header_fg: gtkcolor(headerbar_fg_color);
$header_border: gtkcolor(headerbar_darker_shade_color);
$header_bg_backdrop: gtkcolor(headerbar_backdrop_color);
$dialog_bg_color: gtkcolor(dialog_bg_color);
$dialog_fg_color: gtkcolor(dialog_fg_color);
$dark_sidebar_bg: gtkcolor(sidebar_bg_color);
$dark_sidebar_fg: gtkcolor(sidebar_fg_color);
$dark_sidebar_border: gtkcolor(headerbar_darker_shade_color);
$menu_bg: gtkcolor(popover_bg_color);
$menu_fg: gtkcolor(popover_fg_color);
$wm_shadow: gtkcolor(headerbar_shade_color);
$wm_shadow_backdrop: gtkcolor(sidebar_shade_color);
$wm_outline: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px gtkcolor(headerbar_darker_shade_color);
$wm_border: gtkcolor(headerbar_darker_shade_color);
}

8
src/sass/gtk/_colors-other.scss
View File

@ -2,11 +2,11 @@
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
@define-color wm_title alpha(#{"" + $header_fg}, 0.8);
@define-color wm_unfocused_title alpha(#{"" + $header_fg}, 0.5);
@define-color wm_bg #{"" + opacify($header_bg, 1)};
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
@define-color wm_bg #{"" + $header_bg};
@define-color wm_bg_unfocused #{"" + $header_bg_backdrop};
@define-color wm_border_focused #{"" + $wm_borders_focused};
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};

6
src/sass/gtk/_colors-public.scss
View File

@ -17,14 +17,14 @@ $theme_text: currentColor;
@define-color base_color #{"" + $base_color};
@define-color selected_bg_color #{"" + $selected_bg_color};
@define-color selected_fg_color #{"" + $selected_fg_color};
@define-color insensitive_bg_color #{"" + mix($bg_color, $base_color, 60%)};
@define-color insensitive_bg_color #{"" + color-mix(in srgb, $bg_color 60%, $base_color)};
@define-color insensitive_fg_color #{"" + $disabled_fg_color};
@define-color insensitive_base_color #{"" + $base_color};
@define-color theme_unfocused_fg_color #{"" + $fg_color};
@define-color theme_unfocused_text_color #{"" + $theme_text};
@define-color theme_unfocused_bg_color #{"" + $bg_color};
@define-color theme_unfocused_base_color #{"" + $base_color};
@define-color unfocused_insensitive_color #{"" + mix($fg_color, $bg_color, 35%)};
@define-color unfocused_insensitive_color #{"" + color-mix(in srgb, $fg_color 35%, $bg_color)};
@define-color borders #{"" + $borders_color};
@define-color unfocused_borders #{"" + $borders_color};
@ -36,4 +36,4 @@ $theme_text: currentColor;
@define-color content_view_bg #{"" + $base_color};
/* Very contrasty background for text views (@theme_text_color foreground) */
@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
@define-color text_view_bg #{"" + $base_color};

108
src/sass/gtk/_common-3.0.scss
View File

@ -32,27 +32,27 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
%side_style_left {
background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
box-shadow: none;
border: none;
}
%side_headerbar_left {
background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
box-shadow: inset 0 1px $highlight_color;
border: none;
}
%side_headerbar_right {
background-image: none;
background-color: rgba($base_color, 1);
background-color: $base_color;
box-shadow: inset 0 1px $highlight_color;
}
%side_searchbar {
> revealer > box {
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
background-image: $side_style_shadow;
}
}
@ -128,13 +128,13 @@ $list_shadow: if($variant == 'light',
background-color: $selected_bg_color;
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
&:disabled { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
}
%nobg_selected_items {
color: $selected_fg_color;
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
&:disabled { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
}
%linked_middle {
@ -244,7 +244,7 @@ $maximized_radius_style: 0 0 $maximized_radius $maximized_radius;
.background {
color: $fg_color;
background-color: rgba($bg_color, 1);
background-color: $bg_color;
&.csd {
border-radius: $background_radius_style; // Set csd windows botttom border radius
@ -365,7 +365,7 @@ textview {
}
border {
background-color: mix($bg_color, $base_color, 50%);
background-color: gtkmix($bg_color, $base_color, 50%);
}
}
@ -420,7 +420,7 @@ label {
&:disabled {
color: $disabled_fg_color;
selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
selection { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
}
}
@ -501,7 +501,7 @@ entry {
@include entry(normal);
image { // icons inside the entry
color: mix($fg_color, $base_color, 80%);
color: gtkmix($fg_color, $base_color, 80%);
&.left { padding-left: 0; padding-right: $container_padding; }
&.right { padding-right: 0; padding-left: $container_padding; }
@ -536,7 +536,7 @@ entry {
(search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
&.#{$e_type}, &.#{$e_type}.search {
color: $e_fg_color;
background-color: mix($e_color, $base_color, 60%);
background-color: gtkmix($e_color, $base_color, 60%);
border-image: none;
image { color: $e_fg_color; }
@ -1043,7 +1043,7 @@ modelbutton.flat {
@extend %undecorated_button;
&:hover {
background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
background-color: if($variant=='light', gtkmix($fg_color,$bg_color,5%), gtkmix($fg_color,$bg_color,10%));
transition-duration: 50ms;
}
@ -1081,20 +1081,20 @@ modelbutton.flat arrow {
&:visited {
color: $link_visited_color;
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
*:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 60%); }
}
&:hover {
color: lighten($link_color,10%);
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
*:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 90%); }
}
&:active {
color: $link_color;
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
*:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
}
@at-root %link_selected,
&:selected,
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
*:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
}
button:link, button:visited {
@ -1154,29 +1154,11 @@ spinbutton {
&:dir(ltr) entry,
&:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; }
> button + button { border-left-style: none; }
> button:hover:not(:active),
> button:hover + button { box-shadow: inset 1px 0 $button_border; }
> button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
> button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); }
> button:first-child:hover:not(:active),
> button.up:dir(rtl):hover:not(:active),
> entry + button:not(:active):hover { box-shadow: none; }
> entry:focus + button { border-left-color: $entry_highlight; }
> entry:drop(active) + button { border-left-color: $drop_target_color; }
.osd & {
&, &:focus, &:drop(active) { border-image: none; }
> button:hover:not(:active),
> button:hover + button { box-shadow: inset 1px 0 $osd_button_border; }
> button:first-child:hover:not(:active),
> button.up:dir(rtl):hover:not(:active),
> entry + button:not(:active):hover { box-shadow: none; }
> entry:focus + button { border-left-color: $entry_highlight; }
}
@ -1238,7 +1220,7 @@ combobox {
button.combo:disabled arrow,
button.combo:backdrop arrow {
background-color: if($variant == 'light', rgba($text_color, 0.45), mix(white, $button_bg, 0.25));
background-color: if($variant == 'light', rgba($text_color, 0.45), gtkmix(white, $button_bg, 25%));
}
decoration,
@ -1519,7 +1501,7 @@ headerbar {
transition: $backdrop_transition;
color: transparentize($header_fg, 0.3);
background-color: $header_bg_backdrop;
border-bottom: 1px solid if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
border-bottom: 1px solid $header_border_backdrop;
}
.title {
@ -1569,7 +1551,7 @@ headerbar {
&.#{$e_type} {
color: $e_fg_color;
border-color: if($variant=='light', $e_color, $entry_border);
background-color: mix($e_color, $header_bg, 60%);
background-color: gtkmix($e_color, $header_bg, 60%);
&:focus {
color: $e_fg_color;
@ -2038,7 +2020,7 @@ treeview.view {
&:selected {
border-radius: 0;
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-left-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
background-color: $selected_bg_color;
color: $selected_fg_color;
@ -2053,7 +2035,7 @@ treeview.view {
color: $disabled_fg_color;
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 40%);
color: gtkmix($selected_fg_color, $selected_bg_color, 40%);
}
}
@ -2063,7 +2045,7 @@ treeview.view {
&:focus {
color: $fg_color;
background-color: mix(white, $base_color, 8%);
background-color: gtkmix(white, $base_color, 8%);
}
}
@ -2075,7 +2057,7 @@ treeview.view {
&:drop(active) {
border-style: solid none;
border-width: 1px;
border-color: mix($fg_color, $selected_bg_color, 50%);
border-color: gtkmix($fg_color, $selected_bg_color, 50%);
&.after { border-top-style: none; }
&.before { border-bottom-style: none; }
@ -2086,12 +2068,12 @@ treeview.view {
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
color: mix($fg_color, $base_color, 50%);
color: gtkmix($fg_color, $base_color, 50%);
&:hover { color: $fg_color; }
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 70%);
color: gtkmix($selected_fg_color, $selected_bg_color, 70%);
&:hover { color: $selected_fg_color; }
}
@ -2126,7 +2108,7 @@ treeview.view {
> header {
> button {
$_column_header_color: mix($fg_color, $base_color, 80%);
$_column_header_color: gtkmix($fg_color, $base_color, 80%);
min-height: if($variant =='light', 24px, 26px);
min-width: 38px;
@ -2222,7 +2204,7 @@ menubar,
menu {
margin: 0;
padding: $container_padding;
background-color: opacify($menu_bg, 1);
background-color: gtkalpha($menu_bg, 1);
color: $fg_color;
border: none; // adds borders in a non composited env
border-radius: 0;
@ -2364,7 +2346,7 @@ popover.background {
.csd &, & {
border-radius: $wm_radius;
border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
border: 1px solid if($variant=='light', $track_color, gtkmix(white, $menu_bg, 6%));
}
separator,
@ -2380,7 +2362,7 @@ popover.background {
}
entry {
background-color: mix($fg_color, $menu_bg, 5%);
background-color: gtkmix($fg_color, $menu_bg, 5%);
}
> list,
@ -2432,7 +2414,7 @@ cursor-handle {
padding: $container_padding - 4px $container_padding + 4px;
&:hover:not(:checked) {
color: mix($fg_color, $disabled_fg_color, 50%);
color: gtkmix($fg_color, $disabled_fg_color, 50%);
background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
}
@ -2453,7 +2435,7 @@ cursor-handle {
padding: $container_padding - 4px $container_padding + 4px;
&:hover:not(:checked) {
color: mix($fg_color, $disabled_fg_color, 50%);
color: gtkmix($fg_color, $disabled_fg_color, 50%);
background-color: rgba($fg_color, 0.06);
}
@ -2485,7 +2467,7 @@ notebook {
> header {
@if $monterey == 'false' {
background-color: mix(black, $base_color, if($variant == 'light', 6%, 6%));
background-color: gtkmix(black, $base_color, if($variant == 'light', 6%, 6%));
// Set box-shadow to make the header frame color more easy to see
// Set margin to hide the ugly borders around the header
@ -2609,7 +2591,7 @@ notebook {
> tabs > arrow {
color: $disabled_fg_color;
&:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
&:hover { color: gtkmix($fg_color, $disabled_fg_color, 50%); }
&:active { color: $fg_color; }
&:disabled { color: transparentize($disabled_fg_color,0.3); }
}
@ -2720,10 +2702,10 @@ scrollbar {
border: 4px solid transparent;
border-radius: $container_padding * 2;
background-clip: padding-box;
background-color: mix($fg_color, $bg_color, 40%);
background-color: gtkmix($fg_color, $bg_color, 40%);
&:hover { background-color: mix($fg_color, $bg_color, 30%); }
&:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
&:hover { background-color: gtkmix($fg_color, $bg_color, 30%); }
&:hover:active { background-color: gtkmix($fg_color, $bg_color, 50%); }
&:disabled { background-color: transparent; }
}
@ -2747,7 +2729,7 @@ scrollbar {
margin: $container_padding / 2;
min-width: $container_padding - 2px;
min-height: $container_padding - 2px;
background-color: mix($fg_color, $bg_color, 70%);
background-color: gtkmix($fg_color, $bg_color, 70%);
border: none;
}
@ -3078,7 +3060,7 @@ scale {
highlight {
background-color: $selected_fg_color;
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
&:disabled { background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%); }
}
&:disabled { background-color: transparentize(black, 0.9); }
@ -3103,7 +3085,7 @@ scale {
}
slider {
$_slider_border: $button_border;
$_slider_border: rgba($fg_color, 0.15);
background-color: $selected_fg_color;
border: 1px solid $_slider_border;
@ -3139,16 +3121,16 @@ scale {
border-color: $selected_fg_color;
&:hover {
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
}
&:active {
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
}
&:disabled{
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
}
}

352
src/sass/gtk/_common-4.0.scss
View File

@ -8,7 +8,7 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
%side_style_left {
background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
box-shadow: none;
border: none;
}
@ -16,7 +16,7 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
%side_headerbar_left {
&, &:backdrop {
background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
border: none;
}
}
@ -24,14 +24,14 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
%side_headerbar_right {
&, &:backdrop {
background-image: none;
background-color: rgba($base_color, 1);
background-color: $base_color;
border: none;
}
}
%side_searchbar {
> revealer > box {
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
border-color: $dark_sidebar_border;
}
}
@ -45,13 +45,13 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
}
$list_shadow: if($variant == 'light',
(inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)),
(inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06)));
(inset 0 0 0 1px gtkalpha(currentColor, 0.04), inset 0 1px gtkalpha(currentColor, 0.05)),
(inset 0 0 0 1px gtkalpha(currentColor, 0.04), inset 0 1px gtkalpha(currentColor, 0.06)));
%circular_list {
border-radius: $bd_radius;
box-shadow: $list_shadow;
background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05));
background-color: if($variant == 'light', gtkalpha(currentColor, 0.03), gtkalpha(currentColor, 0.05));
border: none;
color: $text_color;
@ -109,7 +109,7 @@ $list_shadow: if($variant == 'light',
&:disabled {
@if $gnome_version == 'old' {
color: mix($selected_fg_color, $selected_bg_color, 50%);
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
} @else {
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
}
@ -121,7 +121,7 @@ $list_shadow: if($variant == 'light',
&:disabled {
@if $gnome_version == 'old' {
color: mix($selected_fg_color, $selected_bg_color, 50%);
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
} @else {
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
}
@ -190,54 +190,54 @@ $list_shadow: if($variant == 'light',
// Buttons on selected backgrounds
%selected-button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-color: transparent;
border-color: gtkalpha($selected_fg_color, 0.5);
background-image: none;
box-shadow: none;
&.flat {
@include button(undecorated);
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
background-color: transparent;
background-image: none;
}
&.flat:disabled {
&, label { color: transparentize($selected_fg_color, 0.6); }
&, label { color: gtkalpha($selected_fg_color, 0.4); }
}
&:hover {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.8);
border-color: transparentize($selected_fg_color, 0.5);
background-color: gtkalpha($selected_fg_color, 0.2);
border-color: gtkalpha($selected_fg_color, 0.5);
box-shadow: none;
}
&:active, &:active:hover, &:checked {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 0.6);
border-color: transparentize($selected_fg_color, 0.5);
background-color: gtkalpha($selected_fg_color, 0.4);
border-color: gtkalpha($selected_fg_color, 0.5);
box-shadow: none;
}
&:disabled {
&, label { color: transparentize($selected_fg_color, 0.5); }
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.6);
&, label { color: gtkalpha($selected_fg_color, 0.5); }
background-color: transparent;
border-color: gtkalpha($selected_fg_color, 0.4);
box-shadow: none;
}
&:disabled:active, &:disabled:checked {
color: $selected_bg_color;
background-color: transparentize($selected_fg_color, 0.5);
border-color: transparentize($selected_fg_color, 0.6);
background-color: gtkalpha($selected_fg_color, 0.5);
border-color: gtkalpha($selected_fg_color, 0.4);
}
}
%normal_selected_button {
color: $selected_fg_color;
background-color: transparentize($selected_fg_color, 1);
border-color: transparentize($selected_fg_color, 0.5);
background-color: transparent;
border-color: gtkalpha($selected_fg_color, 0.5);
background-image: none;
}
@ -246,19 +246,7 @@ $list_shadow: if($variant == 'light',
//
.background {
color: $fg_color;
background-color: rgba($bg_color, 1);
// > box > stack { background-color: $bg_color; }
&.csd {
border-radius: $wm_radius; // Set csd windows botttom border radius
&.maximized, &.tiled, &.fullscreen {
border-radius: $maximized_radius; // Set csd windows botttom border radius
}
}
&.solid-csd { border-radius: 0; }
background-color: $bg_color;
}
dnd {
@ -285,8 +273,6 @@ treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
background-color: $base_color;
transition: all 200ms $ease-out-quad;
// &:hover { background-color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 3%)); }
&:selected {
color: $selected_fg_color;
background-color: $selected_bg_color;
@ -308,7 +294,7 @@ textview {
}
border {
background-color: mix($bg_color, $base_color, 50%);
background-color: color-mix(in srgb, $bg_color 50%, $base_color);
}
&:drop(active) {
@ -326,10 +312,11 @@ iconview {
rubberband {
@if $gnome_version == 'old' {
border: 1px solid darken($selected_bg_color, 10%);
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
background-color: transparentize(darken($selected_bg_color, 10%), 0.75);
} @else {
--accent-bg-color: @accent_bg_color;
border: 1px solid color-mix(in srgb, black 10%, $selected_bg_color);
background-color: RGB(color-mix(in srgb, black 10%, $selected_bg_color), 80%);
background-color: gtkalpha(color-mix(in srgb, black 10%, $selected_bg_color), 0.25);
}
}
@ -337,7 +324,7 @@ flowbox {
> rubberband { @extend %rubberband; }
> flowboxchild {
padding: 3px;
padding: $container_padding / 2;
border-radius: $bt_radius;
&:selected {
@ -392,7 +379,7 @@ label {
> selection {
color: $selected_fg_color;
background-color: $selected_bg_color;
background-color: gtkmix($selected_fg_color, $selected_bg_color, 15%);
}
&:disabled {
@ -401,7 +388,7 @@ label {
selection {
@if $gnome_version == 'old' {
color: mix($selected_fg_color, $selected_bg_color, 50%);
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
} @else {
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
}
@ -562,7 +549,7 @@ entry {
@include entry(normal);
> image { // icons inside the entry
color: mix($fg_color, $base_color, 80%);
color: $alt_fg_color;
&:first-child { padding-left: 0; padding-right: $container_padding; }
&:last-child { padding-right: 0; padding-left: $container_padding; }
@ -605,7 +592,7 @@ entry {
(search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
&.#{$e_type} {
color: $e_fg_color;
background-color: mix($e_color, $base_color, 60%);
background-color: color-mix(in srgb, $e_color 60%, $base_color);
border-image: none;
image { color: $e_fg_color; }
@ -883,7 +870,7 @@ button {
&.opaque {
@extend %opaque_button;
background-color: mix($bg_color, $fg_color, 80%);
background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
color: $fg_color;
}
@ -1185,7 +1172,7 @@ menubutton {
}
&.opaque {
background-color: mix($bg_color, $fg_color, 80%);
background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
color: $fg_color;
}
@ -1340,7 +1327,7 @@ splitbutton {
}
&.opaque {
background-color: mix($bg_color, $fg_color, 80%);
background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
color: $fg_color;
}
@ -1440,7 +1427,7 @@ modelbutton.flat {
@extend %undecorated_button;
&:hover {
background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
background-color: $divider_color;
transition-duration: 50ms;
}
@ -1488,7 +1475,7 @@ modelbutton.flat {
%list_button,
list > row button.image-button:not(.flat) {
@extend %undecorated_button;
border: 1px solid transparentize($borders_color, .5);
border: 1px solid $fill_color;
&:hover { @include button(hover); }
&:active,
&:checked { @include button(active); }
@ -1528,7 +1515,7 @@ button.link {
@at-root %link_selected,
&:selected {
@if $gnome_version == 'old' {
color: mix($selected_fg_color, $selected_bg_color, 80%);
color: gtkmix($selected_fg_color, $selected_bg_color, 80%);
} @else {
color: color-mix(in srgb, $selected_fg_color 80%, $selected_bg_color);
}
@ -1616,7 +1603,7 @@ spinbutton {
> button:hover + button { box-shadow: inset 1px 0 $button_border; }
> button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
> button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); }
> button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 $fill_color; }
> button:first-child:hover:not(:active),
> button.up:dir(rtl):hover:not(:active),
@ -1664,9 +1651,9 @@ spinbutton {
padding: 0 $container_padding / 2;
border-style: none;
border-radius: $bt_radius;
background-color: rgba($fg_color, 0.08);
background-color: gtkalpha($fg_color, 0.08);
&:focus, &:hover, &:selected { background-color: rgba($fg_color, 0.12); }
&:focus, &:hover, &:selected { background-color: gtkalpha($fg_color, 0.12); }
&:focus-within {
box-shadow: inset 0 0 0 2px $entry_highlight;
@ -1693,8 +1680,8 @@ spinbutton {
margin: 4px 2px;
background-color: transparent;
&:hover { background-color: rgba($fg_color, 0.1); }
&:active { background-color: rgba($fg_color, 0.15); color: $fg_color; }
&:hover { background-color: gtkalpha($fg_color, 0.1); }
&:active { background-color: gtkalpha($fg_color, 0.15); color: $fg_color; }
}
> button:hover:not(:active),
@ -1918,7 +1905,7 @@ actionbar > revealer > box {
padding: $container_padding;
border-spacing: $container_padding;
border-top: 1px solid $borders_color;
background-color: darken($bg_color, 3%);
background-color: transparentize(black, 0.88);
box-shadow: none;
color: $text_color;
@ -2001,7 +1988,7 @@ actionbar > revealer > box {
&.#{$e_type} {
color: $e_fg_color;
border-color: if($variant=='light', $e_color, $entry_border);
background-color: mix($e_color, $header_bg, 60%);
background-color: color-mix(in srgb, $e_color 60%, $header_bg);
&:focus {
color: $e_fg_color;
@ -2048,6 +2035,18 @@ actionbar > revealer > box {
&.flat {
@include button(undecorated);
&:hover {
@include button(header-hover);
}
&:active {
@include button(header-active);
}
&:checked {
@include button(header-checked);
}
}
}
@ -2063,9 +2062,9 @@ headerbar {
&:backdrop {
opacity: 1;
transition: $backdrop_transition;
color: transparentize($header_fg, 0.3);
color: color-mix(in srgb, $header_fg 70%, $header_bg_backdrop);
background-color: $header_bg_backdrop;
border-color: if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
border-color: $header_border_backdrop;
box-shadow: none;
}
@ -2233,7 +2232,7 @@ headerbar {
&:backdrop {
background-color: $selection_mode_bg;
color: transparentize($light_fg_color, 0.4);
color: gtkalpha($light_fg_color, 0.6);
@if $gnome_version == 'old' {
border-color: darken($selection_mode_bg, 5%);
@ -2270,12 +2269,12 @@ headerbar {
.maximized & {
background-color: $header_bg;
border-color: opacify($header_border, 1);
border-color: $header_border;
box-shadow: none;
&:backdrop {
background-color: $header_bg_backdrop;
border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
border-color: gtkalpha($header_border, 0.65);
}
&.flat {
@ -2298,7 +2297,7 @@ headerbar {
&.end:dir(rtl) {
margin-right: $container_padding + 2px;
}
&.start:dir(rtl),
&.end:dir(ltr) {
margin-left: $container_padding + 2px;
@ -2308,7 +2307,7 @@ headerbar {
headerbar.titlebar & {
border-spacing: $container_padding;
}
button {
> image {
padding: 0;
@ -2316,7 +2315,7 @@ headerbar {
background-color: transparent;
background-image: none;
}
&.close, &.maximize, &.minimize {
min-width: 16px;
min-height: 16px;
@ -2324,15 +2323,15 @@ headerbar {
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
&, &:hover, &:focus, &:active, &:backdrop {
@include button(undecorated);
color: transparent;
}
&:backdrop { opacity: 1; }
}
// Load png assets for each button, Fix the Chrome window restore button bug
@each $k in ('close', 'maximize', 'minimize') {
@each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
@ -2493,7 +2492,7 @@ treeview.view {
color: $disabled_fg_color;
&:selected {
color: rgba($selected_fg_color, 0.45);
color: gtkalpha($selected_fg_color, 0.45);
}
}
@ -2556,14 +2555,12 @@ treeview.view {
> header {
> button {
$_column_header_color: mix($fg_color,$base_color,80%);
min-height: if($variant =='light', 24px, 26px);
min-width: 38px;
padding: 0 $container_padding;
font-weight: bold;
color: $_column_header_color;
color: $alt_fg_color;
background-color: $base_color;
background-image: none;
box-shadow: none;
@ -2571,8 +2568,8 @@ treeview.view {
border-radius: 0;
border-image: linear-gradient(to bottom,
$base_color 20%,
transparentize(if($variant == 'light', black, white), 0.89) 20%,
transparentize(if($variant == 'light', black, white), 0.89) 80%,
$borders_color 20%,
$borders_color 80%,
$base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch;
&:hover { color: $selected_bg_color; }
@ -2620,9 +2617,7 @@ menubar {
box-shadow: inset 0 -1px $borders_color;
&:backdrop {
color: transparentize($header_fg, 0.2);
// background-image: none;
// background-color: opacify($header_bg_backdrop, 1);
color: color-mix(in srgb, $header_fg 70%, $header_bg);
}
> item {
@ -2637,7 +2632,7 @@ menubar {
}
&:disabled {
color: transparentize($header_fg, 0.6);
color: color-mix(in srgb, $header_fg 50%, $header_bg);
}
}
@ -2672,8 +2667,8 @@ popover {
background-clip: padding-box;
background-color: $menu_bg;
box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)),
0 0 0 1px if($variant=='light', rgba($borders_color, 0.03), rgba($dark_borders_color, 0.55));
border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
0 0 0 1px if($variant=='light', gtkalpha(black, 0.03), $wm_border);
border: 1px solid if($variant=='light', gtkalpha(black, 0.2), color-mix(in srgb, white 8%, $menu_bg));
}
&, &:backdrop {
@ -2713,6 +2708,7 @@ popover {
> row {
padding: $container_padding $container_padding * 2;
margin: 0;
border-radius: $bt_radius;
&:selected {
color: $selected_fg_color;
@ -2723,7 +2719,7 @@ popover {
}
entry {
background-color: mix($fg_color, $menu_bg, 5%);
background-color: $fill_color;
}
.osd &,
@ -2843,7 +2839,7 @@ popover.menu {
&:focus {
background-color: transparent;
color: $fg_color;
box-shadow: inset 0 0 0 2px rgba($fg_color, 0.06);
box-shadow: inset 0 0 0 2px gtkalpha($fg_color, 0.06);
transition: none;
}
@ -2885,7 +2881,7 @@ popover.menu {
%tabs_tab {
color: $disabled_fg_color;
background-color: transparentize($base_color, 1);
background-color: transparent;
border: 1px solid transparent;
transition: all 150ms ease-out;
border-radius: 0;
@ -2894,23 +2890,23 @@ popover.menu {
box-shadow: none;
&:hover:not(:checked):not(:selected) {
color: mix($fg_color, $disabled_fg_color, 50%);
background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
color: $text_color;
border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
background-color: if($variant == 'light', gtkalpha(white, 0.2), gtkalpha(white, 0.06));
box-shadow: none;
}
&:checked, &:selected {
color: $fg_color;
border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
background-color: $header_bg;
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
box-shadow: none;
}
}
%monterey_tab {
color: $disabled_fg_color;
background-color: transparentize($base_color, 1);
background-color: transparent;
border: none;
transition: all 150ms ease-out;
border-radius: $bt_radius;
@ -2919,14 +2915,14 @@ popover.menu {
box-shadow: none;
&:hover:not(:checked):not(:selected){
color: mix($fg_color, $disabled_fg_color, 50%);
background-color: rgba($fg_color, 0.06);
color: $hint_fg_color;
background-color: $fill_color;
box-shadow: none;
}
&:checked, &:selected {
color: $fg_color;
background-color: rgba($fg_color, 0.12);
background-color: $divider_color;
box-shadow: none;
}
}
@ -2942,42 +2938,24 @@ notebook {
> header {
@if $monterey == 'false' {
background-color: darken($header_bg, 10%);
background-color: color-mix(in srgb, black 6%, $base_color);
border: none;
}
// Set box-shadow to make the header frame color more easy to see
// Set margin to hide the ugly borders around the header
&.top {
box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
}
&.top {
border-bottom: 1px solid $borders_color;
}
&.bottom {
box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
}
&.bottom {
border-top: 1px solid $borders_color;
}
&.right {
box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
}
&.right {
border-left: 1px solid $borders_color;
}
&.left {
box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
}
} @else {
&.top {
border-bottom: 1px solid $borders_color;
}
&.bottom {
border-top: 1px solid $borders_color;
}
&.right {
border-left: 1px solid $borders_color;
}
&.left {
border-right: 1px solid $borders_color;
}
&.left {
border-right: 1px solid $borders_color;
}
button.flat.toggle.popup {
@ -3003,7 +2981,6 @@ notebook {
// sizing and borders
&.#{$_pos} {
@if $monterey == 'false' {
margin-#{$_pos}: -1px;
padding: 0;
} @else {
padding: $container_padding / 2;
@ -3063,15 +3040,17 @@ notebook {
> tabs > arrow {
color: $disabled_fg_color;
&:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
&:hover { color: $hint_fg_color; }
&:active { color: $fg_color; }
&:disabled { color: transparentize($disabled_fg_color,0.3); }
&:disabled { color: $alt_disabled_fg_color; }
}
@if $monterey == 'false' {
&.top,
&.bottom {
> tabs > tab {
border-top: none;
border-bottom: none;
&:first-child { border-left: none; }
&:last-child { border-right: none; }
}
@ -3080,6 +3059,8 @@ notebook {
&.left,
&.right {
> tabs > tab {
border-left: none;
border-right: none;
&:first-child { border-top: none; }
&:last-child { border-bottom: none; }
}
@ -3111,12 +3092,12 @@ notebook {
&:hover {
color: $fg_color;
background-color: rgba($fg_color, 0.1);
background-color: gtkalpha($fg_color, 0.1);
}
&:active {
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: rgba($fg_color, 0.2);
color: $text_color;
background-color: gtkalpha($fg_color, 0.2);
}
}
}
@ -3126,7 +3107,6 @@ notebook {
//
// Scrollbars
//
$_scrollbar_bg_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
scrollbar {
$_slider_min_length: 40px;
@ -3163,13 +3143,13 @@ scrollbar {
border: 4px solid transparent;
border-radius: $container_padding * 2;
background-clip: padding-box;
background-color: mix($fg_color, $bg_color, 40%);
background-color: color-mix(in srgb, $fg_color 40%, $bg_color);
box-shadow: none;
outline: none;
transition: all 200ms linear;
&:hover { background-color: mix($fg_color, $bg_color, 30%); }
&:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
&:hover { background-color: color-mix(in srgb, $fg_color 30%, $bg_color); }
&:hover:active { background-color: color-mix(in srgb, $fg_color 50%, $bg_color);}
&:disabled { background-color: transparent; }
}
}
@ -3209,7 +3189,7 @@ scrollbar {
margin: $container_padding / 2;
min-width: $container_padding - 2px;
min-height: $container_padding - 2px;
background-color: mix($fg_color, $bg_color, 70%);
background-color: color-mix(in srgb, $fg_color 70%, $bg_color);
border: none;
}
@ -3239,9 +3219,9 @@ scrollbar {
// Switches
//
$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%);
$switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%);
$switch_image: linear-gradient(0deg, gtkalpha($fg_color, 0.25) 0%, gtkalpha($fg_color, 0.35) 100%);
$switch_disabled_image: linear-gradient(0deg, gtkalpha($fg_color, 0.1) 0%, gtkalpha($fg_color, 0.15) 100%);
$switch_checked_backdrop_image: linear-gradient(0deg, gtkalpha($fg_color, 0.45) 0%, gtkalpha($fg_color, 0.55) 100%);
$switch_checked_image: '';
$switch_checked_disabled_image: '';
@ -3265,7 +3245,7 @@ $switch_animation: switch_ripple_effect 0.1s cubic-bezier(0, 0, 0.2, 1);
to {
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
rgba($selected_bg_color, 0.75) 100%,
gtkalpha($selected_bg_color, 0.75) 100%,
transparent 0%);
}
}
@ -3302,7 +3282,7 @@ switch {
transition: background-image 0.1s, box-shadow 0;
@if $gnome_version == 'old' {
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, gtkalpha($selected_bg_color, 0.75) 100%, transparent 0%);
} @else {
background-image: $switch_checked_image;
}
@ -3368,7 +3348,7 @@ checkbutton, radiobutton {
padding: 2px 0;
outline-offset: 0;
&:hover { color: darken($fg_color, 15%); }
&:hover { color: $fg_color; }
&:disabled { color: $disabled_fg_color; }
}
@ -3383,8 +3363,10 @@ $check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
$check_radio_checked_image: '';
@if $gnome_version == 'old' {
$check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
$check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
} @else {
$check_radio_image: linear-gradient(0deg, gtkmix(white, $bg_color, 27%) 0%, gtkmix(white, $bg_color, 17%) 100%);
$check_radio_checked_image: linear-gradient(0deg, color-mix(in srgb, black 5%, $selected_bg_color) 0%, color-mix(in srgb, white 5%, $selected_bg_color) 100%);
}
@ -3403,7 +3385,7 @@ radio {
@if $variant == 'dark' {
background-image: $check_radio_image;
box-shadow: inset 0 1px $highlight_color, 0 1px 2px rgba(black, 0.25);
box-shadow: inset 0 1px $highlight_color, 0 1px 2px rgba(black, 0.25), 0 0 0 1px $check_radio_border;
&:hover {
box-shadow: inset 0 1px $highlight_color;
@ -3531,7 +3513,7 @@ scale {
border-radius: $bt_radius;
background-color: $_scale_trough_bg;
&:disabled { background-color: rgba($_scale_trough_bg, 0.12); }
&:disabled { background-color: gtkalpha($_scale_trough_bg, 0.12); }
//OSD troughs
.osd & {
@ -3551,7 +3533,7 @@ scale {
> trough > highlight {
background-color: $selected_fg_color;
&:disabled { background-color: rgba($selected_fg_color, 0.5); }
&:disabled { background-color: gtkalpha($selected_fg_color, 0.5); }
}
&:disabled { background-color: transparentize(black, 0.9); }
@ -3563,20 +3545,20 @@ scale {
border-radius: $bt_radius;
background-color: $selected_bg_color;
&:disabled { background-color: rgba($selected_bg_color, 0.55); }
&:disabled { background-color: gtkalpha($selected_bg_color, 0.55); }
}
// this is another differently styled part of the trough, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
> trough > fill {
border-radius: $bt_radius;
background-color: rgba($selected_bg_color, 0.5);
background-color: gtkalpha($selected_bg_color, 0.5);
&:disabled { background-color: transparent; }
}
> trough > slider {
$_slider_border: if($variant=='light', transparentize(darken($button_border, 0%), 0), transparentize($button_border, 0));
$_slider_border: $button_border;
background-color: $selected_fg_color;
border: 1px solid $_slider_border;
@ -3600,8 +3582,8 @@ scale {
}
&:disabled {
background-color: darken($selected_fg_color, 5%);
border-color: darken($_slider_border, 5%);
background-color: gtkalpha($selected_fg_color, 0.5);
border-color: gtkalpha($_slider_border, 0.5);
box-shadow: none;
}
@ -3614,16 +3596,16 @@ scale {
@if $gnome_version == 'old' {
&:hover {
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
}
&:active {
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
}
&:disabled {
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
}
} @else {
&:hover {
@ -3801,7 +3783,7 @@ scale {
progressbar {
padding: 0;
font-size: smaller;
color: transparentize($fg_color, 0.3);
color: gtkalpha($fg_color, 0.7);
font-feature-settings: "tnum";
// sizing
@ -3868,7 +3850,7 @@ progressbar {
min-width: $container_padding - 2px;
border: none;
border-radius: $bt_radius;
background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
background-color: if($variant == 'light', $button_border, transparentize(black, 0.8));
row:selected &,
infobar & { background-color: transparentize(black, 0.8); }
@ -3893,7 +3875,7 @@ levelbar {
border: none;
padding: $container_padding / 2;
border-radius: $bt_radius;
background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
background-color: if($variant == 'light', $button_border, transparentize(black, 0.8));
}
&.horizontal.discrete block { margin: 0 1px; }
@ -3917,8 +3899,8 @@ levelbar {
background-color: $success_color;
}
block.empty {
background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
background-color: if($variant=='light', gtkalpha($fg_color, 0.2), $base_color);
border-color: if($variant=='light', gtkalpha($fg_color, 0.2), $base_color);
}
}
@ -4048,7 +4030,7 @@ scrolledwindow {
> junction { // the small square between two scrollbars
border: none;
background-color: $_scrollbar_bg_color;
background-color: $fill_color;
// &:dir(rtl) { border-style: solid solid none none; }
}
@ -4482,7 +4464,7 @@ row.expander {
}
list.nested {
background-color: rgba($base_color, 0.5);
background-color: gtkalpha($base_color, 0.5);
color: inherit;
}
@ -4710,8 +4692,7 @@ list.boxed-list-separate {
padding: $container_padding;
margin: 6px 16px 16px 16px;
color: $fg_color;
background-color: rgba($header_bg, 0.85);
// background-image: linear-gradient(0deg, $bg_color 0%, $bg_color 85%, darken($bg_color, 5%) 95%, darken($bg_color, 15%) 100%);
background-color: gtkalpha($header_bg, 0.85);
border-radius: $wm_radius;
border: none;
box-shadow: 0 5px 15px 0 rgba(black, 0.25),
@ -4744,7 +4725,7 @@ expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
&:hover { color: $alt_fg_color; } //only lightens the arrow
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:disabled { filter: opacity($disabled_opacity); }
}
@ -4794,7 +4775,7 @@ calendar {
background: none;
border-radius: 0;
&:hover { background-color: rgba($fg_color, 0.1); }
&:hover { background-color: gtkalpha($fg_color, 0.1); }
&:active { background-color: $selected_bg_color; }
}
@ -4805,7 +4786,7 @@ calendar {
> grid {
> label.today {
background-color: rgba($fg_color, 0.15);
background-color: gtkalpha($fg_color, 0.15);
border-radius: 3px;
&:selected {
@ -4836,7 +4817,7 @@ calendar {
// Dialogs
//
$messagedialog_bg: if($trans == 'true', rgba($bg_color, 0.95), $bg_color);
$messagedialog_bg: if($trans == 'true', gtkalpha($bg_color, 0.95), $bg_color);
window.dialog.message { // Message Dialog styling
&.background { background-color: $messagedialog_bg; }
@ -5041,28 +5022,28 @@ stacksidebar {
&:hover,
&:focus-visible:focus-within {
background-color: rgba($fg_color, 0.1);
background-color: gtkalpha($fg_color, 0.1);
}
&:active {
color: $fg_color;
background-color: rgba($fg_color, 0.2);
background-color: gtkalpha($fg_color, 0.2);
}
&:selected {
color: $fg_color;
background-color: rgba($fg_color, 0.15);
background-color: gtkalpha($fg_color, 0.15);
&:hover {
background-color: rgba($fg_color, 0.2);
background-color: gtkalpha($fg_color, 0.2);
}
&:focus-visible:focus-within {
outline: none;
color: $fg_color;
background-color: rgba($fg_color, 0.15);
background-color: gtkalpha($fg_color, 0.15);
&:hover { background-color: rgba($fg_color, 0.2); }
&:hover { background-color: gtkalpha($fg_color, 0.2); }
}
}
@ -5294,7 +5275,7 @@ tooltip {
&.background {
// background-color needs to be set this way otherwise it gets drawn twice
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
background-color: rgba($osd_bg_color, 0.96);
background-color: gtkalpha($osd_bg_color, 0.96);
background-clip: padding-box;
border-radius: $wm_radius;
color: $osd_fg_color;
@ -5442,7 +5423,7 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
padding: 0;
&:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
&:disabled { background-color: if($variant=='light', transparent, mix($bg_color, $base_color, 60%)); }
&:disabled { background-color: if($variant=='light', transparent, color-mix(in srgb, $bg_color 60%, $base_color)); }
}
> rubberband { @extend %rubberband; }
@ -5597,9 +5578,9 @@ popover.emoji-picker {
}
.emoji-searchbar {
padding: 6px;
border-spacing: 6px;
border-bottom: 1px solid $borders_color;
padding: $container_padding;
border-spacing: $container_padding;
// border-bottom: 1px solid $borders_color;
entry { margin: 0; }
}
@ -5608,21 +5589,20 @@ popover.emoji-picker {
padding: $container_padding / 2;
border-spacing: 0;
border-top: 1px solid $borders_color;
button.image-button {
border-radius: $bt_radius;
}
}
// mimic tab style
button.emoji-section {
margin: $container_padding / 2 1px;
margin: 0;
padding: 1px $container_padding * 2;
border-radius: $bt_radius;
border: none;
outline-offset: -2px;
box-shadow: none;
transition: none;
animation: none;
&:first-child { margin-left: $container_padding; }
&:last-child { margin-right: $container_padding; }
}
popover.emoji-picker emoji {

34
src/sass/gtk/_drawing-3.0.scss
View File

@ -28,7 +28,7 @@
//
color: $text_color;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@ -47,7 +47,7 @@
// insensitive entry
//
color: $disabled_fg_color;
background-color: rgba($entry_bg, 0.02);
background-color: gtkalpha($entry_bg, 0.02);
}
@if $t==header-normal {
@ -67,7 +67,7 @@
//
color: $header_fg;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@ -85,8 +85,8 @@
//
// insensitive header-bar entry
//
color: rgba($header_fg, 0.35);
background-color: rgba($entry_bg, 0.02);
color: gtkalpha($header_fg, 0.35);
background-color: gtkalpha($entry_bg, 0.02);
}
@else if $t==osd {
@ -114,7 +114,7 @@
// insensitive osd entry
//
color: $osd_disabled_fg_color;
background-color: transparentize($osd_entry_bg, 0.15);
background-color: gtkalpha($osd_entry_bg, 0.8);
}
}
@ -149,7 +149,7 @@
background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
@if $variant=='light' { box-shadow: none; }
@if $variant=='dark' {
box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
box-shadow: inset 0 1px $light_divider_color, $shadow_3;
}
}
@ -170,7 +170,7 @@
label, & { color: $disabled_fg_color; }
border-color: if($variant == 'light', $button_border, $dark_borders_color);
background-color: rgba($button_bg, 0.55);
background-color: gtkalpha($button_bg, 0.55);
box-shadow: none;
}
@ -181,7 +181,7 @@
label, & { color: transparentize($selected_fg_color, 0.45); }
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
background-color: rgba($selected_bg_color, 0.45);
background-color: gtkalpha($selected_bg_color, 0.45);
@if $variant=='light' { box-shadow: none; }
opacity: 0.6;
@ -261,7 +261,7 @@
// hovered header-bar button
//
color: darken($header_fg, 2%);
background-color: rgba($header_fg, 0.1);
background-color: gtkalpha($header_fg, 0.1);
background-image: none;
box-shadow: none;
}
@ -271,7 +271,7 @@
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.25);
background-color: gtkalpha($header_fg, 0.25);
background-image: none;
box-shadow: none;
}
@ -281,7 +281,7 @@
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.12);
background-color: gtkalpha($header_fg, 0.12);
background-image: none;
box-shadow: none;
}
@ -290,7 +290,7 @@
//
// insensitive header-bar button
//
label, & { color: rgba($header_fg, 0.35); }
label, & { color: gtkalpha($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;
@ -300,7 +300,7 @@
//
// header-bar insensitive pushed button
//
label, & { color: rgba($header_fg, 0.35); }
label, & { color: gtkalpha($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;
@ -428,13 +428,13 @@
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(rgba($_small_gradient_color, 0)));
to(gtkalpha($_small_gradient_color, 0)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(rgba($_big_gradient_color, 0.07)),
to(rgba($_big_gradient_color, 0)));
from(gtkalpha($_big_gradient_color, 0.07)),
to(gtkalpha($_big_gradient_color, 0)));
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;

51
src/sass/gtk/_drawing-4.0.scss
View File

@ -28,7 +28,7 @@
//
color: $text_color;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@ -47,7 +47,7 @@
// insensitive entry
//
color: $disabled_fg_color;
background-color: rgba($entry_bg, 0.02);
background-color: gtkalpha($entry_bg, 0.02);
}
@if $t==header-normal {
@ -67,7 +67,7 @@
//
color: $header_fg;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@ -85,8 +85,8 @@
//
// insensitive header-bar entry
//
color: rgba($header_fg, 0.35);
background-color: rgba($entry_bg, 0.02);
color: gtkalpha($header_fg, 0.35);
background-color: gtkalpha($entry_bg, 0.02);
}
@else if $t==osd {
@ -119,7 +119,7 @@
// insensitive osd entry
//
color: $osd_disabled_fg_color;
background-color: transparentize($osd_entry_bg, 0.15);
background-color: gtkalpha($osd_entry_bg, 0.8);
}
}
@ -136,7 +136,7 @@
//
// normal button
//
color: $fg_color;
color: $alt_fg_color;
border-color: $button_borders;
background-color: $button_bg;
@if $variant=='light' { box-shadow: $shadow_3; }
@ -149,12 +149,12 @@
//
// hovered button
//
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
color: $fg_color;
border-color: $button_borders;
background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
background-color: gtkmix($fg_color, $button_bg, 5%);
@if $variant=='light' { box-shadow: none; }
@if $variant=='dark' {
box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
box-shadow: inset 0 1px $light_divider_color, $shadow_3;
}
}
@ -175,7 +175,7 @@
label, & { color: $disabled_fg_color; }
border-color: if($variant == 'light', $button_border, $dark_borders_color);
background-color: rgba($button_bg, 0.55);
background-color: gtkalpha($button_bg, 0.55);
box-shadow: none;
}
@ -183,10 +183,10 @@
//
// insensitive pushed button
//
label, & { color: transparentize($selected_fg_color, 0.45); }
label, & { color: gtkalpha($selected_fg_color, 0.55); }
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
background-color: rgba($selected_bg_color, 0.45);
background-color: gtkalpha($selected_bg_color, 0.45);
@if $variant=='light' { box-shadow: none; }
opacity: 0.6;
@ -206,8 +206,7 @@
//
// hovered button
//
color: darken($fg_color, 10%);
background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
background-color: gtkalpha(currentColor, 0.15);
background-image: none;
box-shadow: none;
// border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
@ -218,8 +217,8 @@
// pushed button
//
background-image: none;
color: $selected_fg_color;
background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
color: if($variant=='light', $light_fg_color, $fg_color);
background-color: if($variant=='light', gtkalpha(black, 0.5), gtkalpha(currentColor, 0.25));
}
@else if $t==flat-checked {
@ -227,8 +226,8 @@
// pushed button
//
background-image: none;
color: $selected_fg_color;
background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
color: if($variant=='light', $light_fg_color, $fg_color);
background-color: if($variant=='light', gtkalpha(black, 0.65), gtkalpha(currentColor, 0.35));
}
@else if $t==flat-insensitive {
@ -246,7 +245,7 @@
//
label, & { color: transparentize($selected_fg_color, 0.35); }
background-color: if($variant=='light', rgba(black, 0.3), rgba(white, 0.15));
background-color: if($variant=='light', gtkalpha(black, 0.3), gtkalpha(currentColor, 0.15));
opacity: 0.6;
}
@ -265,8 +264,8 @@
//
// hovered header-bar button
//
color: darken($header_fg, 2%);
background-color: rgba($header_fg, 0.1);
color: $header_fg;
background-color: gtkalpha($header_fg, 0.1);
background-image: none;
box-shadow: none;
}
@ -276,7 +275,7 @@
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.25);
background-color: gtkalpha($header_fg, 0.25);
background-image: none;
box-shadow: none;
}
@ -286,7 +285,7 @@
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.12);
background-color: gtkalpha($header_fg, 0.12);
background-image: none;
box-shadow: none;
}
@ -295,7 +294,7 @@
//
// insensitive header-bar button
//
label, & { color: rgba($header_fg, 0.35); }
label, & { color: gtkalpha($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;
@ -305,7 +304,7 @@
//
// header-bar insensitive pushed button
//
label, & { color: rgba($header_fg, 0.35); }
label, & { color: gtkalpha($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;

16
src/sass/gtk/apps/_budgie.scss
View File

@ -59,7 +59,7 @@ $raven_padding: 8px;
background-color: $menu_bg;
&:hover {
background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
background-color: gtkmix(currentColor, $menu_bg, 5%);
}
&:active, &:checked {
@ -98,7 +98,7 @@ $raven_padding: 8px;
.budgie-popover.background {
margin: 0;
padding: 0;
border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
border: 1px solid if($variant=='light', gtkalpha(currentColor, 0.2), gtkmix(currentColor, $menu_bg, 6%));
border-radius: $wm_radius;
background-color: $menu_bg;
background-clip: padding-box;
@ -878,7 +878,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
// Raven
.raven {
background-color: if($trans == 'true', rgba($raven_bg_color, $raven_opacity), $raven_bg_color);
background-color: if($trans == 'true', gtkalpha($raven_bg_color, $raven_opacity), $raven_bg_color);
color: $raven_fg_color;
box-shadow: $shadow_4;
@ -1063,7 +1063,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
@extend %raven_middle_button;
&:hover {
background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
background-color: gtkmix(currentColor, $menu_bg, 5%);
}
&:active, &:checked {
@ -1168,16 +1168,16 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
border: none;
margin: $container_padding / 2;
border-radius: $bt_radius;
background-color: if($variant == 'light', lighten($raven_bg_color, 5%), darken($raven_bg_color, 5%));
background-color: gtkmix($fg_color, $raven_bg_color, 5%);
box-shadow: 0 2px 3px rgba(black, 0.08);
&:hover, &:selected {
background-color: if($variant == 'light', $raven_bg_color, darken($raven_bg_color, 8%));
background-color: if($variant == 'light', $raven_bg_color, gtkmix(black, $raven_bg_color, 8%));
box-shadow: 0 2px 4px rgba(black, 0.15);
}
&:active {
background-color: if($variant == 'light', darken($raven_bg_color, 5%), darken($raven_bg_color, 10%));
background-color: if($variant == 'light', gtkmix(black, $raven_bg_color, 5%), gtkmix(black, $raven_bg_color, 10%));
box-shadow: none;
}
@ -1189,7 +1189,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
image { padding: 0; }
&:active { image { color: $fg_color; }}
&:active { image { color: $fg_color; } }
}
}
}

1
src/sass/gtk/apps/_elementary.scss
View File

@ -580,7 +580,6 @@ scale.warmth trough {
color: transparentize($header_fg, 0.3);
background-image: none;
background-color: $header_bg_backdrop;
border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
}
}

18
src/sass/gtk/apps/_gnome-3.22.scss
View File

@ -40,12 +40,12 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
$nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
transparentize($dark_header_bg, 0.2) 40%);
$nautilus_actionbar_borders_image: linear-gradient(90deg, rgba($header_border, 0) 0px,
$nautilus_actionbar_borders_image: linear-gradient(90deg, transparent 0px,
$header_border 25%);
}
@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
$nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) $nautilus_sidebar_size,
$nautilus_header_borders_image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
$header_border $nautilus_sidebar_size);
}
@ -58,7 +58,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
$nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size / 2),
$dark_header_bg 40%);
$nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($nautilus_sidebar_size / 2) - 40px),
$nautilus_header_borders_image: linear-gradient(90deg, transparent (($nautilus_sidebar_size / 2) - 40px),
$header_border 40%);
}
@ -80,7 +80,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
> deck > box.vertical > headerbar.titlebar {
@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
background-image: linear-gradient(90deg, rgba($dark_header_bg, 0) $nautilus_sidebar_size,
background-image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
$nautilus_borders_color $nautilus_sidebar_size,
$nautilus_borders_color ($nautilus_sidebar_size + 1px),
$dark_header_bg ($nautilus_sidebar_size + 1px));
@ -219,7 +219,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
&:selected, &:selected:hover {
color: $fg_color;
transition: background-color ease-out 200ms;
background-color: rgba($fg_color, 0.15);
background-color: $sidebar_theme_color;
&, label { color: $fg_color; }
}
@ -1876,7 +1876,7 @@ popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {
border-radius: $bt_radius;
border: 1px solid $borders_color;
margin: 2px;
@if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }
@if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px gtkalpha(currentColor, 0.01); }
&:hover { @include button(hover); }
&:active, &:checked { @include button(flat-active); }
@ -1892,7 +1892,7 @@ popover.background:not(.emoji-picker) > box.vertical > stack > box.vertical {
> list.background > row.activatable.bookmarks-row {
background-color: rgba($base_color, 0.35);
color: rgba($fg_color, 0.85);
border-bottom: 1px dashed rgba($borders_color, 0.05);
border-bottom: 1px dashed gtkalpha(currentColor, 0.05);
padding: 6px;
&:hover,
@ -1991,12 +1991,12 @@ tabbox {
&:hover {
color: $fg_color;
background-color: rgba($borders_color, 0.1);
background-color: gtkalpha(currentColor, 0.1);
}
&:active, &:active:hover {
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: rgba($borders_color, 0.2);
background-color: gtkalpha(currentColor, 0.2);
}
&.tab-close-button {

10
src/sass/gtk/apps/_gnome-40.0.scss
View File

@ -5,7 +5,7 @@
$nautilus_header_image: image($header_bg);
$nautilus_header_borders_image: image($header_border);
$nautilus_borders_color: if($variant=='light', darken(rgba($dark_sidebar_bg, 1), 12%), $header_border);
$nautilus_borders_color: if($variant=='light', gtkmix(black, $dark_sidebar_bg, 12%), $header_border);
$flap_sidebar_size: 240px;
@if $nautilus_style == 'stable' {
@ -96,7 +96,7 @@ $flap_sidebar_size: 240px;
.navigation-sidebar:not(.view) {
> row {
&:selected {
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
background-color: $sidebar_theme_color;
color: $fg_color;
}
@ -133,7 +133,7 @@ $flap_sidebar_size: 240px;
tabbar:not(.inline) {
.box {
@if $monterey == 'false' {
background-color: mix(black, $base_color, 6%);
background-color: color-mix(in srgb, black 6%, $base_color);
border-top: 1px solid $borders_color;
} @else {
background-color: $base_color;
@ -289,7 +289,7 @@ window.background.csd {
> scrolledwindow > viewport > widget > stack {
> list.navigation-sidebar {
background-color: rgba($dark_sidebar_bg, 1);
background-color: $dark_sidebar_bg;
> separator {
background-color: transparent;
@ -298,7 +298,7 @@ window.background.csd {
}
}
> box > list.navigation-sidebar { background-color: rgba($dark_sidebar_bg, 1); }
> box > list.navigation-sidebar { background-color: $dark_sidebar_bg; }
}
> stack.background { background-color: $base_color; }

17
src/sass/gtk/apps/_libadwaita.scss
View File

@ -418,15 +418,13 @@ tabbar {
.box {
color: $text_color;
margin: 0;
box-shadow: none;
border-bottom: 1px solid $borders_color;
@if $monterey == 'false' {
padding: 0;
box-shadow: inset 0 -1px if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
border-bottom: none;
background-color: darken($header_bg, 10%);
background-color: color-mix(in srgb, black 15%, $header_bg);
} @else {
box-shadow: none;
border-bottom: 1px solid $borders_color;
padding: $container_padding / 2 0;
background-color: $header_bg;
}
@ -482,6 +480,7 @@ tabbar {
@if $monterey == 'false' {
@extend %tabs_tab;
border-top: none;
border-bottom: none;
} @else {
@extend %monterey_tab;
}
@ -507,12 +506,12 @@ tabbar {
&:hover {
color: $fg_color;
background-color: rgba($borders_color, 0.1);
background-color: gtkalpha(currentColor, 0.1);
}
&:active, &:active:hover {
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: rgba($borders_color, 0.2);
color: $text_color;
background-color: gtkalpha(currentColor, 0.2);
}
}
}
@ -934,7 +933,7 @@ toolbarview {
padding: 0;
border-spacing: 0;
box-shadow: inset 0 1px $borders_color;
background-color: darken($bg_color, 3%);
background-color: color-mix(in srgb, black 5%, $bg_color);
color: $text_color;
&:backdrop {