mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-02 19:36:13 +00:00
update
This commit is contained in:
vinceliuice
parent
a8314c62b7
commit
20ea5a2a57
10
install.sh
10
install.sh
@ -179,7 +179,11 @@ else
|
|||||||
|
|
||||||
prompt -w "Removing the old '${name}' themes...\n"
|
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";
|
prompt -w "Installing '${name}' themes in '${dest}'...\n";
|
||||||
|
|
||||||
@ -192,8 +196,6 @@ else
|
|||||||
prompt -i "Start icon style : ${icon}"
|
prompt -i "Start icon style : ${icon}"
|
||||||
prompt -i "Nautilus style : ${nautilus_style}"
|
prompt -i "Nautilus style : ${nautilus_style}"
|
||||||
|
|
||||||
echo; install_themes; echo; prompt -s "Done!"
|
|
||||||
|
|
||||||
if [[ "${libadwaita}" == 'true' ]]; then
|
if [[ "${libadwaita}" == 'true' ]]; then
|
||||||
if [[ "$UID" != '0' ]]; then
|
if [[ "$UID" != '0' ]]; then
|
||||||
install_libadwaita
|
install_libadwaita
|
||||||
@ -201,6 +203,8 @@ else
|
|||||||
else
|
else
|
||||||
echo; prompt -e "Do not run '--libadwaita' option with sudo!"
|
echo; prompt -e "Do not run '--libadwaita' option with sudo!"
|
||||||
fi
|
fi
|
||||||
|
else
|
||||||
|
echo; install_themes; echo; prompt -s "Done!"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
if (is_my_distro "solus") && (is_running "gnome-session"); then
|
if (is_my_distro "solus") && (is_running "gnome-session"); then
|
||||||
|
|||||||
@ -536,6 +536,9 @@ config_gtk4() {
|
|||||||
install_libadwaita() {
|
install_libadwaita() {
|
||||||
color="${colors[0]}"
|
color="${colors[0]}"
|
||||||
opacity="${opacities[0]}"
|
opacity="${opacities[0]}"
|
||||||
|
alt="${alts[0]}"
|
||||||
|
theme="${themes[0]}"
|
||||||
|
scheme="${schemes[0]}"
|
||||||
|
|
||||||
gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
|
gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@function gtkmix($c1,$c2,$r) {
|
@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})");
|
@return unquote("mix(#{$c1},#{$c2},#{$ratio})");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,13 +42,13 @@ $hint_fg_color: if($variant == 'light', #565656, #999999);
|
|||||||
//insensitive state derived colors
|
//insensitive state derived colors
|
||||||
$disabled_fg_color: if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
|
$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));
|
$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));
|
$active_color: if($variant == 'light', gtkalpha(currentColor, 0.26), gtkalpha(currentColor, 0.2));
|
||||||
$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
|
$track_color: if($variant == 'light', gtkalpha(currentColor, 0.20), gtkalpha(currentColor, 0.16));
|
||||||
$visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
|
$visit_color: if($variant == 'light', gtkalpha(currentColor, 0.16), gtkalpha(currentColor, 0.12));
|
||||||
$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
|
$divider_color: if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.1));
|
||||||
$fill_color: if($variant == 'light', rgba(black, 0.06), rgba(white, 0.05));
|
$fill_color: if($variant == 'light', gtkalpha(currentColor, 0.06), gtkalpha(currentColor, 0.05));
|
||||||
|
|
||||||
$light_fg_color: white;
|
$light_fg_color: white;
|
||||||
$light_alt_fg_color: rgba(white, 0.85);
|
$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;
|
$primary_color: $selected_bg_color;
|
||||||
|
|
||||||
$selected_borders_color: darken($selected_bg_color, 10%);
|
$selected_borders_color: darken($selected_bg_color, 10%);
|
||||||
$borders_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
|
$borders_color: if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.12));
|
||||||
$light_borders_color: if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
|
$light_borders_color: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
|
||||||
$dark_borders_color: if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
|
$dark_borders_color: if($variant == 'light', gtkalpha(black, 0.08), gtkalpha(black, 0.15));
|
||||||
$solid_borders_color: if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
|
$solid_borders_color: if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 12%));
|
||||||
$dark_solid_borders_color: if($variant == 'light', mix(black, $base_color, 12%), mix(black, $base_color, 15%));
|
$dark_solid_borders_color: if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 15%));
|
||||||
$highlight_color: if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
|
$highlight_color: if($variant == 'light', gtkalpha(white, 0.15), gtkalpha(white, 0.1));
|
||||||
|
|
||||||
// Gnome-shell background colors
|
// Gnome-shell background colors
|
||||||
$dark_bg_color: rgba(black, 0.6);
|
$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);
|
$header_fg: if($variant == 'light', #57647f, #f8f9fc);
|
||||||
}
|
}
|
||||||
|
|
||||||
$dark_header_bg: if($trans == 'true', rgba($base_color, 0.96), $base_color);
|
$dark_header_bg: if($trans == 'true', gtkalpha($base_color, 0.96), $base_color);
|
||||||
$header_bg_backdrop: if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%));
|
$header_bg_backdrop: if($variant == 'light', gtkmix(black, $header_bg, 2%), gtkmix(black, $header_bg, 1%));
|
||||||
$header_border: if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%));
|
$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
|
// Sidebar colors
|
||||||
$dark_sidebar_bg: white;
|
$dark_sidebar_bg: white;
|
||||||
@ -174,14 +175,14 @@ $opacity: if($gnome_version == 'new', 0.92, 0.95);
|
|||||||
}
|
}
|
||||||
|
|
||||||
$dark_sidebar_fg: $text_color;
|
$dark_sidebar_fg: $text_color;
|
||||||
$dark_sidebar_border: if($variant == 'light', $solid_borders_color, $header_border);
|
$dark_sidebar_border: if($variant == 'light', $solid_borders_color, gtkmix(black, $dark_sidebar_bg, 75%));
|
||||||
$sidebar_theme_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
|
$sidebar_theme_color: gtkalpha(currentColor, 0.15);
|
||||||
|
|
||||||
//dialog
|
//dialog
|
||||||
$dialog_bg_color: if($variant == 'light', $bg_color, $base_color);
|
$dialog_bg_color: if($variant == 'light', $bg_color, $base_color);
|
||||||
|
|
||||||
@if $trans=='true' {
|
@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
|
//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_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_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_entry_border: $dark_borders_color;
|
||||||
$osd_disabled_bg_color: darken($osd_bg_color, 3%);
|
$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;
|
$osd_borders_color: $dark_borders_color;
|
||||||
|
|
||||||
// Menu colors
|
// Menu colors
|
||||||
$menu_bg: if($variant == 'light', $base_color, $bg_color);
|
$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;
|
$menu_opacity: 0.96;
|
||||||
|
|
||||||
@if $trans == 'true' {
|
@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));
|
$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 colors
|
||||||
$entry_bg: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
|
$entry_bg: gtkalpha(currentColor, 0.05);
|
||||||
$entry_shell_bg: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
|
$entry_shell_bg: gtkalpha(currentColor, 0.1);
|
||||||
$entry_border: $borders_color;
|
$entry_border: $borders_color;
|
||||||
$entry_highlight: rgba($selection_mode_bg, 0.75);
|
$entry_highlight: rgba($selection_mode_bg, 0.75);
|
||||||
|
|
||||||
// Button colors
|
// Button colors
|
||||||
$button_bg: if($variant == 'light', white, #656565);
|
$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' {
|
@if $scheme == 'nord' {
|
||||||
$button_bg: if($variant == 'light', #fbfcfd, #556075);
|
$button_bg: if($variant == 'light', #fbfcfd, #556075);
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
|
|
||||||
@if $t==insensitive {
|
@if $t==insensitive {
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
background-color: transparentize($entry_bg, 0.45);
|
background-color: gtkalpha($entry_bg, 0.45);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t==osd {
|
@if $t==osd {
|
||||||
@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
@if $t==osd-insensitive {
|
@if $t==osd-insensitive {
|
||||||
color: transparentize($osd_fg_color, 0.45);
|
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);
|
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%));
|
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
||||||
border: 1px solid $button_borders;
|
border: 1px solid $button_borders;
|
||||||
background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
|
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 {
|
@else if $t==focus {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: $button_bg;
|
background-color: $button_bg;
|
||||||
border: 1px solid $selected_bg_color;
|
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 {
|
@else if $t==focus-hover {
|
||||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
||||||
background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
|
background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
|
||||||
border: 1px solid $selected_bg_color;
|
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 {
|
@else if $t==active {
|
||||||
@ -102,7 +102,7 @@
|
|||||||
@else if $t==insensitive {
|
@else if $t==insensitive {
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
border: 1px solid if($variant == 'light', $button_border, $dark_borders_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 {
|
@else if $t==flat {
|
||||||
@ -112,12 +112,12 @@
|
|||||||
|
|
||||||
@else if $t==flat-hover {
|
@else if $t==flat-hover {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.1);
|
background-color: gtkalpha($fg_color, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==flat-active {
|
@else if $t==flat-active {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.2);
|
background-color: gtkalpha($fg_color, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==flat-insensitive {
|
@else if $t==flat-insensitive {
|
||||||
@ -132,7 +132,7 @@
|
|||||||
|
|
||||||
@else if $t==osd-hover {
|
@else if $t==osd-hover {
|
||||||
color: $osd_fg_color;
|
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 {
|
@else if $t==osd-active {
|
||||||
@ -142,6 +142,6 @@
|
|||||||
|
|
||||||
@else if $t==osd-insensitive {
|
@else if $t==osd-insensitive {
|
||||||
color: $osd_disabled_fg_color;
|
color: $osd_disabled_fg_color;
|
||||||
background-color: transparentize($osd_button_bg, 0.15);
|
background-color: gtkalpha($osd_button_bg, 0.85);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -115,17 +115,17 @@
|
|||||||
background-color: $c;
|
background-color: $c;
|
||||||
border-radius: $circular_radius;
|
border-radius: $circular_radius;
|
||||||
border: 2px solid transparent !important;
|
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;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t == hover {
|
@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;
|
border: 2px solid transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t == focus {
|
@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' {
|
@if $gnome_version == 'old' {
|
||||||
border: 2px solid lighten($fc, 15%) !important;
|
border: 2px solid lighten($fc, 15%) !important;
|
||||||
} @else {
|
} @else {
|
||||||
@ -134,7 +134,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@if $t == insensitive {
|
@if $t == insensitive {
|
||||||
background-color: rgba($c, 0.05);
|
background-color: gtkalpha($c, 0.05);
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,20 +148,20 @@
|
|||||||
|
|
||||||
@if $t == flat-hover {
|
@if $t == flat-hover {
|
||||||
background-color: $c;
|
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;
|
color: $tc;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t == flat-focus {
|
@if $t == flat-focus {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background-color: rgba($c, 0.2);
|
background-color: gtkalpha($c, 0.2);
|
||||||
color: $tc;
|
color: $tc;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t == flat-insensitive {
|
@if $t == flat-insensitive {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background-color: rgba($c, 0.05);
|
background-color: gtkalpha($c, 0.05);
|
||||||
color: rgba($tc, 0.45);
|
color: gtkalpha($tc, 0.45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -230,7 +230,7 @@
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
icon-shadow: none;
|
icon-shadow: none;
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
background-color: mix($tc, $c, 6%);
|
background-color: gtkmix($tc, $c, 6%);
|
||||||
} @else {
|
} @else {
|
||||||
background-color: st-mix($tc, $c, 6%);
|
background-color: st-mix($tc, $c, 6%);
|
||||||
}
|
}
|
||||||
@ -242,7 +242,7 @@
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
icon-shadow: none;
|
icon-shadow: none;
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
background-color: mix($tc, $c, 12%);
|
background-color: gtkmix($tc, $c, 12%);
|
||||||
} @else {
|
} @else {
|
||||||
background-color: st-mix($tc, $c, 12%);
|
background-color: st-mix($tc, $c, 12%);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -324,7 +324,7 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border-radius: $circular_radius;
|
border-radius: $circular_radius;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: rgba($borders_color, 0.1);
|
background-color: gtkalpha(currentColor, 0.1);
|
||||||
color: $light_fg_color;
|
color: $light_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ $notification_banner_width: 34em;
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
box-shadow: 0 3px 5px rgba(black, 0.15);
|
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 {
|
.notification-buttons-bin {
|
||||||
|
|||||||
@ -158,61 +158,79 @@ $dark_5: #000000;
|
|||||||
@if $gnome_version == 'old' or $accent_type == 'fixed' {
|
@if $gnome_version == 'old' or $accent_type == 'fixed' {
|
||||||
@define-color accent_bg_color #{$primary_color};
|
@define-color accent_bg_color #{$primary_color};
|
||||||
@define-color accent_fg_color #{$light_fg_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};
|
@if $gnome_version == 'new' and $accent_type != 'fixed' {
|
||||||
|
|
||||||
// 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' {
|
|
||||||
:root {
|
:root {
|
||||||
--accent-blue: #{$theme_color_default};
|
--accent-blue: #{$theme_color_default};
|
||||||
--accent-teal: #2190a4;
|
--accent-teal: #2190a4;
|
||||||
@ -235,4 +253,35 @@ $dark_5: #000000;
|
|||||||
$progress_color: var(--accent-bg-color);
|
$progress_color: var(--accent-bg-color);
|
||||||
$selection_mode_bg: color-mix(in srgb, white 25%, 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));
|
$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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,11 +2,11 @@
|
|||||||
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
|
$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%));
|
$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_title alpha(#{"" + $header_fg}, 0.8);
|
||||||
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
|
@define-color wm_unfocused_title alpha(#{"" + $header_fg}, 0.5);
|
||||||
|
|
||||||
@define-color wm_bg #{"" + opacify($header_bg, 1)};
|
@define-color wm_bg #{"" + $header_bg};
|
||||||
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
|
@define-color wm_bg_unfocused #{"" + $header_bg_backdrop};
|
||||||
|
|
||||||
@define-color wm_border_focused #{"" + $wm_borders_focused};
|
@define-color wm_border_focused #{"" + $wm_borders_focused};
|
||||||
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
|
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
|
||||||
|
|||||||
@ -17,14 +17,14 @@ $theme_text: currentColor;
|
|||||||
@define-color base_color #{"" + $base_color};
|
@define-color base_color #{"" + $base_color};
|
||||||
@define-color selected_bg_color #{"" + $selected_bg_color};
|
@define-color selected_bg_color #{"" + $selected_bg_color};
|
||||||
@define-color selected_fg_color #{"" + $selected_fg_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_fg_color #{"" + $disabled_fg_color};
|
||||||
@define-color insensitive_base_color #{"" + $base_color};
|
@define-color insensitive_base_color #{"" + $base_color};
|
||||||
@define-color theme_unfocused_fg_color #{"" + $fg_color};
|
@define-color theme_unfocused_fg_color #{"" + $fg_color};
|
||||||
@define-color theme_unfocused_text_color #{"" + $theme_text};
|
@define-color theme_unfocused_text_color #{"" + $theme_text};
|
||||||
@define-color theme_unfocused_bg_color #{"" + $bg_color};
|
@define-color theme_unfocused_bg_color #{"" + $bg_color};
|
||||||
@define-color theme_unfocused_base_color #{"" + $base_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 borders #{"" + $borders_color};
|
||||||
@define-color unfocused_borders #{"" + $borders_color};
|
@define-color unfocused_borders #{"" + $borders_color};
|
||||||
|
|
||||||
@ -36,4 +36,4 @@ $theme_text: currentColor;
|
|||||||
@define-color content_view_bg #{"" + $base_color};
|
@define-color content_view_bg #{"" + $base_color};
|
||||||
|
|
||||||
/* Very contrasty background for text views (@theme_text_color foreground) */
|
/* 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};
|
||||||
|
|||||||
@ -32,27 +32,27 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
|
|||||||
|
|
||||||
%side_style_left {
|
%side_style_left {
|
||||||
background-image: $side_style_shadow;
|
background-image: $side_style_shadow;
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
%side_headerbar_left {
|
%side_headerbar_left {
|
||||||
background-image: $side_style_shadow;
|
background-image: $side_style_shadow;
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
box-shadow: inset 0 1px $highlight_color;
|
box-shadow: inset 0 1px $highlight_color;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
%side_headerbar_right {
|
%side_headerbar_right {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: rgba($base_color, 1);
|
background-color: $base_color;
|
||||||
box-shadow: inset 0 1px $highlight_color;
|
box-shadow: inset 0 1px $highlight_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
%side_searchbar {
|
%side_searchbar {
|
||||||
> revealer > box {
|
> revealer > box {
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
background-image: $side_style_shadow;
|
background-image: $side_style_shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -128,13 +128,13 @@ $list_shadow: if($variant == 'light',
|
|||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_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 {
|
%nobg_selected_items {
|
||||||
color: $selected_fg_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%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
%linked_middle {
|
%linked_middle {
|
||||||
@ -244,7 +244,7 @@ $maximized_radius_style: 0 0 $maximized_radius $maximized_radius;
|
|||||||
|
|
||||||
.background {
|
.background {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($bg_color, 1);
|
background-color: $bg_color;
|
||||||
|
|
||||||
&.csd {
|
&.csd {
|
||||||
border-radius: $background_radius_style; // Set csd windows botttom border radius
|
border-radius: $background_radius_style; // Set csd windows botttom border radius
|
||||||
@ -365,7 +365,7 @@ textview {
|
|||||||
}
|
}
|
||||||
|
|
||||||
border {
|
border {
|
||||||
background-color: mix($bg_color, $base_color, 50%);
|
background-color: gtkmix($bg_color, $base_color, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -420,7 +420,7 @@ label {
|
|||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: $disabled_fg_color;
|
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);
|
@include entry(normal);
|
||||||
|
|
||||||
image { // icons inside the entry
|
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; }
|
&.left { padding-left: 0; padding-right: $container_padding; }
|
||||||
&.right { padding-right: 0; padding-left: $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
|
(search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
|
||||||
&.#{$e_type}, &.#{$e_type}.search {
|
&.#{$e_type}, &.#{$e_type}.search {
|
||||||
color: $e_fg_color;
|
color: $e_fg_color;
|
||||||
background-color: mix($e_color, $base_color, 60%);
|
background-color: gtkmix($e_color, $base_color, 60%);
|
||||||
border-image: none;
|
border-image: none;
|
||||||
|
|
||||||
image { color: $e_fg_color; }
|
image { color: $e_fg_color; }
|
||||||
@ -1043,7 +1043,7 @@ modelbutton.flat {
|
|||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
|
|
||||||
&:hover {
|
&: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;
|
transition-duration: 50ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1081,20 +1081,20 @@ modelbutton.flat arrow {
|
|||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $link_visited_color;
|
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 {
|
&:hover {
|
||||||
color: lighten($link_color,10%);
|
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 {
|
&:active {
|
||||||
color: $link_color;
|
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,
|
@at-root %link_selected,
|
||||||
&: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 {
|
button:link, button:visited {
|
||||||
@ -1154,29 +1154,11 @@ spinbutton {
|
|||||||
&:dir(ltr) entry,
|
&:dir(ltr) entry,
|
||||||
&:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; }
|
&: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:focus + button { border-left-color: $entry_highlight; }
|
||||||
> entry:drop(active) + button { border-left-color: $drop_target_color; }
|
> entry:drop(active) + button { border-left-color: $drop_target_color; }
|
||||||
|
|
||||||
.osd & {
|
.osd & {
|
||||||
&, &:focus, &:drop(active) { border-image: none; }
|
&, &: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; }
|
> entry:focus + button { border-left-color: $entry_highlight; }
|
||||||
}
|
}
|
||||||
@ -1238,7 +1220,7 @@ combobox {
|
|||||||
|
|
||||||
button.combo:disabled arrow,
|
button.combo:disabled arrow,
|
||||||
button.combo:backdrop 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,
|
decoration,
|
||||||
@ -1519,7 +1501,7 @@ headerbar {
|
|||||||
transition: $backdrop_transition;
|
transition: $backdrop_transition;
|
||||||
color: transparentize($header_fg, 0.3);
|
color: transparentize($header_fg, 0.3);
|
||||||
background-color: $header_bg_backdrop;
|
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 {
|
.title {
|
||||||
@ -1569,7 +1551,7 @@ headerbar {
|
|||||||
&.#{$e_type} {
|
&.#{$e_type} {
|
||||||
color: $e_fg_color;
|
color: $e_fg_color;
|
||||||
border-color: if($variant=='light', $e_color, $entry_border);
|
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 {
|
&:focus {
|
||||||
color: $e_fg_color;
|
color: $e_fg_color;
|
||||||
@ -2038,7 +2020,7 @@ treeview.view {
|
|||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
border-radius: 0;
|
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
|
border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
@ -2053,7 +2035,7 @@ treeview.view {
|
|||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
|
|
||||||
&:selected {
|
&: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 {
|
&:focus {
|
||||||
color: $fg_color;
|
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) {
|
&:drop(active) {
|
||||||
border-style: solid none;
|
border-style: solid none;
|
||||||
border-width: 1px;
|
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; }
|
&.after { border-top-style: none; }
|
||||||
&.before { border-bottom-style: none; }
|
&.before { border-bottom-style: none; }
|
||||||
@ -2086,12 +2068,12 @@ treeview.view {
|
|||||||
|
|
||||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
&: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; }
|
&:hover { color: $fg_color; }
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
color: gtkmix($selected_fg_color, $selected_bg_color, 70%);
|
||||||
&:hover { color: $selected_fg_color; }
|
&:hover { color: $selected_fg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2126,7 +2108,7 @@ treeview.view {
|
|||||||
|
|
||||||
> header {
|
> header {
|
||||||
> button {
|
> 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-height: if($variant =='light', 24px, 26px);
|
||||||
min-width: 38px;
|
min-width: 38px;
|
||||||
@ -2222,7 +2204,7 @@ menubar,
|
|||||||
menu {
|
menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: $container_padding;
|
padding: $container_padding;
|
||||||
background-color: opacify($menu_bg, 1);
|
background-color: gtkalpha($menu_bg, 1);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
border: none; // adds borders in a non composited env
|
border: none; // adds borders in a non composited env
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -2364,7 +2346,7 @@ popover.background {
|
|||||||
|
|
||||||
.csd &, & {
|
.csd &, & {
|
||||||
border-radius: $wm_radius;
|
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,
|
separator,
|
||||||
@ -2380,7 +2362,7 @@ popover.background {
|
|||||||
}
|
}
|
||||||
|
|
||||||
entry {
|
entry {
|
||||||
background-color: mix($fg_color, $menu_bg, 5%);
|
background-color: gtkmix($fg_color, $menu_bg, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
> list,
|
> list,
|
||||||
@ -2432,7 +2414,7 @@ cursor-handle {
|
|||||||
padding: $container_padding - 4px $container_padding + 4px;
|
padding: $container_padding - 4px $container_padding + 4px;
|
||||||
|
|
||||||
&:hover:not(:checked) {
|
&: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));
|
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%));
|
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;
|
padding: $container_padding - 4px $container_padding + 4px;
|
||||||
|
|
||||||
&:hover:not(:checked) {
|
&: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);
|
background-color: rgba($fg_color, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2485,7 +2467,7 @@ notebook {
|
|||||||
|
|
||||||
> header {
|
> header {
|
||||||
@if $monterey == 'false' {
|
@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 box-shadow to make the header frame color more easy to see
|
||||||
// Set margin to hide the ugly borders around the header
|
// Set margin to hide the ugly borders around the header
|
||||||
@ -2609,7 +2591,7 @@ notebook {
|
|||||||
> tabs > arrow {
|
> tabs > arrow {
|
||||||
color: $disabled_fg_color;
|
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; }
|
&:active { color: $fg_color; }
|
||||||
&:disabled { color: transparentize($disabled_fg_color,0.3); }
|
&:disabled { color: transparentize($disabled_fg_color,0.3); }
|
||||||
}
|
}
|
||||||
@ -2720,10 +2702,10 @@ scrollbar {
|
|||||||
border: 4px solid transparent;
|
border: 4px solid transparent;
|
||||||
border-radius: $container_padding * 2;
|
border-radius: $container_padding * 2;
|
||||||
background-clip: padding-box;
|
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 { background-color: gtkmix($fg_color, $bg_color, 30%); }
|
||||||
&:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
|
&:hover:active { background-color: gtkmix($fg_color, $bg_color, 50%); }
|
||||||
&:disabled { background-color: transparent; }
|
&:disabled { background-color: transparent; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2747,7 +2729,7 @@ scrollbar {
|
|||||||
margin: $container_padding / 2;
|
margin: $container_padding / 2;
|
||||||
min-width: $container_padding - 2px;
|
min-width: $container_padding - 2px;
|
||||||
min-height: $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;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3078,7 +3060,7 @@ scale {
|
|||||||
highlight {
|
highlight {
|
||||||
background-color: $selected_fg_color;
|
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); }
|
&:disabled { background-color: transparentize(black, 0.9); }
|
||||||
@ -3103,7 +3085,7 @@ scale {
|
|||||||
}
|
}
|
||||||
|
|
||||||
slider {
|
slider {
|
||||||
$_slider_border: $button_border;
|
$_slider_border: rgba($fg_color, 0.15);
|
||||||
|
|
||||||
background-color: $selected_fg_color;
|
background-color: $selected_fg_color;
|
||||||
border: 1px solid $_slider_border;
|
border: 1px solid $_slider_border;
|
||||||
@ -3139,16 +3121,16 @@ scale {
|
|||||||
border-color: $selected_fg_color;
|
border-color: $selected_fg_color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
}
|
}
|
||||||
&:disabled{
|
&:disabled{
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
|
|||||||
|
|
||||||
%side_style_left {
|
%side_style_left {
|
||||||
background-image: $side_style_shadow;
|
background-image: $side_style_shadow;
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
@ -16,7 +16,7 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
|
|||||||
%side_headerbar_left {
|
%side_headerbar_left {
|
||||||
&, &:backdrop {
|
&, &:backdrop {
|
||||||
background-image: $side_style_shadow;
|
background-image: $side_style_shadow;
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -24,14 +24,14 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
|
|||||||
%side_headerbar_right {
|
%side_headerbar_right {
|
||||||
&, &:backdrop {
|
&, &:backdrop {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: rgba($base_color, 1);
|
background-color: $base_color;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%side_searchbar {
|
%side_searchbar {
|
||||||
> revealer > box {
|
> revealer > box {
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
border-color: $dark_sidebar_border;
|
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',
|
$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 gtkalpha(currentColor, 0.04), inset 0 1px gtkalpha(currentColor, 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.06)));
|
||||||
|
|
||||||
%circular_list {
|
%circular_list {
|
||||||
border-radius: $bd_radius;
|
border-radius: $bd_radius;
|
||||||
box-shadow: $list_shadow;
|
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;
|
border: none;
|
||||||
color: $text_color;
|
color: $text_color;
|
||||||
|
|
||||||
@ -109,7 +109,7 @@ $list_shadow: if($variant == 'light',
|
|||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
} @else {
|
} @else {
|
||||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||||
}
|
}
|
||||||
@ -121,7 +121,7 @@ $list_shadow: if($variant == 'light',
|
|||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
} @else {
|
} @else {
|
||||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
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
|
// Buttons on selected backgrounds
|
||||||
%selected-button {
|
%selected-button {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: transparentize($selected_fg_color, 1);
|
background-color: transparent;
|
||||||
border-color: transparentize($selected_fg_color, 0.5);
|
border-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
@include button(undecorated);
|
@include button(undecorated);
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: transparentize($selected_fg_color, 1);
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flat:disabled {
|
&.flat:disabled {
|
||||||
&, label { color: transparentize($selected_fg_color, 0.6); }
|
&, label { color: gtkalpha($selected_fg_color, 0.4); }
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: transparentize($selected_fg_color, 0.8);
|
background-color: gtkalpha($selected_fg_color, 0.2);
|
||||||
border-color: transparentize($selected_fg_color, 0.5);
|
border-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:active:hover, &:checked {
|
&:active, &:active:hover, &:checked {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: transparentize($selected_fg_color, 0.6);
|
background-color: gtkalpha($selected_fg_color, 0.4);
|
||||||
border-color: transparentize($selected_fg_color, 0.5);
|
border-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
&, label { color: transparentize($selected_fg_color, 0.5); }
|
&, label { color: gtkalpha($selected_fg_color, 0.5); }
|
||||||
background-color: transparentize($selected_fg_color, 1);
|
background-color: transparent;
|
||||||
border-color: transparentize($selected_fg_color, 0.6);
|
border-color: gtkalpha($selected_fg_color, 0.4);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled:active, &:disabled:checked {
|
&:disabled:active, &:disabled:checked {
|
||||||
color: $selected_bg_color;
|
color: $selected_bg_color;
|
||||||
background-color: transparentize($selected_fg_color, 0.5);
|
background-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
border-color: transparentize($selected_fg_color, 0.6);
|
border-color: gtkalpha($selected_fg_color, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%normal_selected_button {
|
%normal_selected_button {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: transparentize($selected_fg_color, 1);
|
background-color: transparent;
|
||||||
border-color: transparentize($selected_fg_color, 0.5);
|
border-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -246,19 +246,7 @@ $list_shadow: if($variant == 'light',
|
|||||||
//
|
//
|
||||||
.background {
|
.background {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($bg_color, 1);
|
background-color: $bg_color;
|
||||||
|
|
||||||
// > 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; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dnd {
|
dnd {
|
||||||
@ -285,8 +273,6 @@ treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
|
|||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
transition: all 200ms $ease-out-quad;
|
transition: all 200ms $ease-out-quad;
|
||||||
|
|
||||||
// &:hover { background-color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 3%)); }
|
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
@ -308,7 +294,7 @@ textview {
|
|||||||
}
|
}
|
||||||
|
|
||||||
border {
|
border {
|
||||||
background-color: mix($bg_color, $base_color, 50%);
|
background-color: color-mix(in srgb, $bg_color 50%, $base_color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:drop(active) {
|
&:drop(active) {
|
||||||
@ -326,10 +312,11 @@ iconview {
|
|||||||
rubberband {
|
rubberband {
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
border: 1px solid darken($selected_bg_color, 10%);
|
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 {
|
} @else {
|
||||||
|
--accent-bg-color: @accent_bg_color;
|
||||||
border: 1px solid color-mix(in srgb, black 10%, $selected_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; }
|
> rubberband { @extend %rubberband; }
|
||||||
|
|
||||||
> flowboxchild {
|
> flowboxchild {
|
||||||
padding: 3px;
|
padding: $container_padding / 2;
|
||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
@ -392,7 +379,7 @@ label {
|
|||||||
|
|
||||||
> selection {
|
> selection {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
background-color: $selected_bg_color;
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 15%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@ -401,7 +388,7 @@ label {
|
|||||||
|
|
||||||
selection {
|
selection {
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
} @else {
|
} @else {
|
||||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||||
}
|
}
|
||||||
@ -562,7 +549,7 @@ entry {
|
|||||||
@include entry(normal);
|
@include entry(normal);
|
||||||
|
|
||||||
> image { // icons inside the entry
|
> 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; }
|
&:first-child { padding-left: 0; padding-right: $container_padding; }
|
||||||
&:last-child { padding-right: 0; padding-left: $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
|
(search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
|
||||||
&.#{$e_type} {
|
&.#{$e_type} {
|
||||||
color: $e_fg_color;
|
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;
|
border-image: none;
|
||||||
|
|
||||||
image { color: $e_fg_color; }
|
image { color: $e_fg_color; }
|
||||||
@ -883,7 +870,7 @@ button {
|
|||||||
&.opaque {
|
&.opaque {
|
||||||
@extend %opaque_button;
|
@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;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1185,7 +1172,7 @@ menubutton {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.opaque {
|
&.opaque {
|
||||||
background-color: mix($bg_color, $fg_color, 80%);
|
background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1340,7 +1327,7 @@ splitbutton {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.opaque {
|
&.opaque {
|
||||||
background-color: mix($bg_color, $fg_color, 80%);
|
background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1440,7 +1427,7 @@ modelbutton.flat {
|
|||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
|
|
||||||
&:hover {
|
&: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;
|
transition-duration: 50ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1488,7 +1475,7 @@ modelbutton.flat {
|
|||||||
%list_button,
|
%list_button,
|
||||||
list > row button.image-button:not(.flat) {
|
list > row button.image-button:not(.flat) {
|
||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
border: 1px solid transparentize($borders_color, .5);
|
border: 1px solid $fill_color;
|
||||||
&:hover { @include button(hover); }
|
&:hover { @include button(hover); }
|
||||||
&:active,
|
&:active,
|
||||||
&:checked { @include button(active); }
|
&:checked { @include button(active); }
|
||||||
@ -1528,7 +1515,7 @@ button.link {
|
|||||||
@at-root %link_selected,
|
@at-root %link_selected,
|
||||||
&:selected {
|
&:selected {
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
color: mix($selected_fg_color, $selected_bg_color, 80%);
|
color: gtkmix($selected_fg_color, $selected_bg_color, 80%);
|
||||||
} @else {
|
} @else {
|
||||||
color: color-mix(in srgb, $selected_fg_color 80%, $selected_bg_color);
|
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:hover + button { box-shadow: inset 1px 0 $button_border; }
|
||||||
|
|
||||||
> button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
|
> 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:first-child:hover:not(:active),
|
||||||
> button.up:dir(rtl):hover:not(:active),
|
> button.up:dir(rtl):hover:not(:active),
|
||||||
@ -1664,9 +1651,9 @@ spinbutton {
|
|||||||
padding: 0 $container_padding / 2;
|
padding: 0 $container_padding / 2;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
border-radius: $bt_radius;
|
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 {
|
&:focus-within {
|
||||||
box-shadow: inset 0 0 0 2px $entry_highlight;
|
box-shadow: inset 0 0 0 2px $entry_highlight;
|
||||||
@ -1693,8 +1680,8 @@ spinbutton {
|
|||||||
margin: 4px 2px;
|
margin: 4px 2px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
&:hover { background-color: rgba($fg_color, 0.1); }
|
&:hover { background-color: gtkalpha($fg_color, 0.1); }
|
||||||
&:active { background-color: rgba($fg_color, 0.15); color: $fg_color; }
|
&:active { background-color: gtkalpha($fg_color, 0.15); color: $fg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
> button:hover:not(:active),
|
> button:hover:not(:active),
|
||||||
@ -1918,7 +1905,7 @@ actionbar > revealer > box {
|
|||||||
padding: $container_padding;
|
padding: $container_padding;
|
||||||
border-spacing: $container_padding;
|
border-spacing: $container_padding;
|
||||||
border-top: 1px solid $borders_color;
|
border-top: 1px solid $borders_color;
|
||||||
background-color: darken($bg_color, 3%);
|
background-color: transparentize(black, 0.88);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: $text_color;
|
color: $text_color;
|
||||||
|
|
||||||
@ -2001,7 +1988,7 @@ actionbar > revealer > box {
|
|||||||
&.#{$e_type} {
|
&.#{$e_type} {
|
||||||
color: $e_fg_color;
|
color: $e_fg_color;
|
||||||
border-color: if($variant=='light', $e_color, $entry_border);
|
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 {
|
&:focus {
|
||||||
color: $e_fg_color;
|
color: $e_fg_color;
|
||||||
@ -2048,6 +2035,18 @@ actionbar > revealer > box {
|
|||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
@include button(undecorated);
|
@include button(undecorated);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include button(header-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include button(header-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
@include button(header-checked);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2063,9 +2062,9 @@ headerbar {
|
|||||||
&:backdrop {
|
&:backdrop {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: $backdrop_transition;
|
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;
|
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;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2233,7 +2232,7 @@ headerbar {
|
|||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
background-color: $selection_mode_bg;
|
background-color: $selection_mode_bg;
|
||||||
color: transparentize($light_fg_color, 0.4);
|
color: gtkalpha($light_fg_color, 0.6);
|
||||||
|
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
border-color: darken($selection_mode_bg, 5%);
|
border-color: darken($selection_mode_bg, 5%);
|
||||||
@ -2270,12 +2269,12 @@ headerbar {
|
|||||||
|
|
||||||
.maximized & {
|
.maximized & {
|
||||||
background-color: $header_bg;
|
background-color: $header_bg;
|
||||||
border-color: opacify($header_border, 1);
|
border-color: $header_border;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
background-color: $header_bg_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 {
|
&.flat {
|
||||||
@ -2298,7 +2297,7 @@ headerbar {
|
|||||||
&.end:dir(rtl) {
|
&.end:dir(rtl) {
|
||||||
margin-right: $container_padding + 2px;
|
margin-right: $container_padding + 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.start:dir(rtl),
|
&.start:dir(rtl),
|
||||||
&.end:dir(ltr) {
|
&.end:dir(ltr) {
|
||||||
margin-left: $container_padding + 2px;
|
margin-left: $container_padding + 2px;
|
||||||
@ -2308,7 +2307,7 @@ headerbar {
|
|||||||
headerbar.titlebar & {
|
headerbar.titlebar & {
|
||||||
border-spacing: $container_padding;
|
border-spacing: $container_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
> image {
|
> image {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -2316,7 +2315,7 @@ headerbar {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.close, &.maximize, &.minimize {
|
&.close, &.maximize, &.minimize {
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
@ -2324,15 +2323,15 @@ headerbar {
|
|||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 16px 16px;
|
background-size: 16px 16px;
|
||||||
|
|
||||||
&, &:hover, &:focus, &:active, &:backdrop {
|
&, &:hover, &:focus, &:active, &:backdrop {
|
||||||
@include button(undecorated);
|
@include button(undecorated);
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:backdrop { opacity: 1; }
|
&:backdrop { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load png assets for each button, Fix the Chrome window restore button bug
|
// Load png assets for each button, Fix the Chrome window restore button bug
|
||||||
@each $k in ('close', 'maximize', 'minimize') {
|
@each $k in ('close', 'maximize', 'minimize') {
|
||||||
@each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
|
@each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
|
||||||
@ -2493,7 +2492,7 @@ treeview.view {
|
|||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
color: rgba($selected_fg_color, 0.45);
|
color: gtkalpha($selected_fg_color, 0.45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2556,14 +2555,12 @@ treeview.view {
|
|||||||
|
|
||||||
> header {
|
> header {
|
||||||
> button {
|
> button {
|
||||||
$_column_header_color: mix($fg_color,$base_color,80%);
|
|
||||||
|
|
||||||
min-height: if($variant =='light', 24px, 26px);
|
min-height: if($variant =='light', 24px, 26px);
|
||||||
min-width: 38px;
|
min-width: 38px;
|
||||||
padding: 0 $container_padding;
|
padding: 0 $container_padding;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
color: $_column_header_color;
|
color: $alt_fg_color;
|
||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -2571,8 +2568,8 @@ treeview.view {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-image: linear-gradient(to bottom,
|
border-image: linear-gradient(to bottom,
|
||||||
$base_color 20%,
|
$base_color 20%,
|
||||||
transparentize(if($variant == 'light', black, white), 0.89) 20%,
|
$borders_color 20%,
|
||||||
transparentize(if($variant == 'light', black, white), 0.89) 80%,
|
$borders_color 80%,
|
||||||
$base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch;
|
$base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch;
|
||||||
|
|
||||||
&:hover { color: $selected_bg_color; }
|
&:hover { color: $selected_bg_color; }
|
||||||
@ -2620,9 +2617,7 @@ menubar {
|
|||||||
box-shadow: inset 0 -1px $borders_color;
|
box-shadow: inset 0 -1px $borders_color;
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
color: transparentize($header_fg, 0.2);
|
color: color-mix(in srgb, $header_fg 70%, $header_bg);
|
||||||
// background-image: none;
|
|
||||||
// background-color: opacify($header_bg_backdrop, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> item {
|
> item {
|
||||||
@ -2637,7 +2632,7 @@ menubar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&: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-clip: padding-box;
|
||||||
background-color: $menu_bg;
|
background-color: $menu_bg;
|
||||||
box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)),
|
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));
|
0 0 0 1px if($variant=='light', gtkalpha(black, 0.03), $wm_border);
|
||||||
border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
|
border: 1px solid if($variant=='light', gtkalpha(black, 0.2), color-mix(in srgb, white 8%, $menu_bg));
|
||||||
}
|
}
|
||||||
|
|
||||||
&, &:backdrop {
|
&, &:backdrop {
|
||||||
@ -2713,6 +2708,7 @@ popover {
|
|||||||
> row {
|
> row {
|
||||||
padding: $container_padding $container_padding * 2;
|
padding: $container_padding $container_padding * 2;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
border-radius: $bt_radius;
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
@ -2723,7 +2719,7 @@ popover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
entry {
|
entry {
|
||||||
background-color: mix($fg_color, $menu_bg, 5%);
|
background-color: $fill_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osd &,
|
.osd &,
|
||||||
@ -2843,7 +2839,7 @@ popover.menu {
|
|||||||
&:focus {
|
&:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $fg_color;
|
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;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2885,7 +2881,7 @@ popover.menu {
|
|||||||
|
|
||||||
%tabs_tab {
|
%tabs_tab {
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
background-color: transparentize($base_color, 1);
|
background-color: transparent;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
transition: all 150ms ease-out;
|
transition: all 150ms ease-out;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -2894,23 +2890,23 @@ popover.menu {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover:not(:checked):not(:selected) {
|
&:hover:not(:checked):not(:selected) {
|
||||||
color: mix($fg_color, $disabled_fg_color, 50%);
|
color: $text_color;
|
||||||
background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
|
border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
|
||||||
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
|
background-color: if($variant == 'light', gtkalpha(white, 0.2), gtkalpha(white, 0.06));
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked, &:selected {
|
&:checked, &:selected {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
|
||||||
background-color: $header_bg;
|
background-color: $header_bg;
|
||||||
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%monterey_tab {
|
%monterey_tab {
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
background-color: transparentize($base_color, 1);
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
transition: all 150ms ease-out;
|
transition: all 150ms ease-out;
|
||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
@ -2919,14 +2915,14 @@ popover.menu {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover:not(:checked):not(:selected){
|
&:hover:not(:checked):not(:selected){
|
||||||
color: mix($fg_color, $disabled_fg_color, 50%);
|
color: $hint_fg_color;
|
||||||
background-color: rgba($fg_color, 0.06);
|
background-color: $fill_color;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked, &:selected {
|
&:checked, &:selected {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.12);
|
background-color: $divider_color;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2942,42 +2938,24 @@ notebook {
|
|||||||
|
|
||||||
> header {
|
> header {
|
||||||
@if $monterey == 'false' {
|
@if $monterey == 'false' {
|
||||||
background-color: darken($header_bg, 10%);
|
background-color: color-mix(in srgb, black 6%, $base_color);
|
||||||
border: none;
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
// Set box-shadow to make the header frame color more easy to see
|
&.top {
|
||||||
// Set margin to hide the ugly borders around the header
|
border-bottom: 1px solid $borders_color;
|
||||||
&.top {
|
}
|
||||||
box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom {
|
&.bottom {
|
||||||
box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
|
border-top: 1px solid $borders_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
|
border-left: 1px solid $borders_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
|
border-right: 1px solid $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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button.flat.toggle.popup {
|
button.flat.toggle.popup {
|
||||||
@ -3003,7 +2981,6 @@ notebook {
|
|||||||
// sizing and borders
|
// sizing and borders
|
||||||
&.#{$_pos} {
|
&.#{$_pos} {
|
||||||
@if $monterey == 'false' {
|
@if $monterey == 'false' {
|
||||||
margin-#{$_pos}: -1px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
} @else {
|
} @else {
|
||||||
padding: $container_padding / 2;
|
padding: $container_padding / 2;
|
||||||
@ -3063,15 +3040,17 @@ notebook {
|
|||||||
> tabs > arrow {
|
> tabs > arrow {
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
|
|
||||||
&:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
|
&:hover { color: $hint_fg_color; }
|
||||||
&:active { color: $fg_color; }
|
&:active { color: $fg_color; }
|
||||||
&:disabled { color: transparentize($disabled_fg_color,0.3); }
|
&:disabled { color: $alt_disabled_fg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $monterey == 'false' {
|
@if $monterey == 'false' {
|
||||||
&.top,
|
&.top,
|
||||||
&.bottom {
|
&.bottom {
|
||||||
> tabs > tab {
|
> tabs > tab {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
&:first-child { border-left: none; }
|
&:first-child { border-left: none; }
|
||||||
&:last-child { border-right: none; }
|
&:last-child { border-right: none; }
|
||||||
}
|
}
|
||||||
@ -3080,6 +3059,8 @@ notebook {
|
|||||||
&.left,
|
&.left,
|
||||||
&.right {
|
&.right {
|
||||||
> tabs > tab {
|
> tabs > tab {
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
&:first-child { border-top: none; }
|
&:first-child { border-top: none; }
|
||||||
&:last-child { border-bottom: none; }
|
&:last-child { border-bottom: none; }
|
||||||
}
|
}
|
||||||
@ -3111,12 +3092,12 @@ notebook {
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.1);
|
background-color: gtkalpha($fg_color, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
color: $text_color;
|
||||||
background-color: rgba($fg_color, 0.2);
|
background-color: gtkalpha($fg_color, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3126,7 +3107,6 @@ notebook {
|
|||||||
//
|
//
|
||||||
// Scrollbars
|
// Scrollbars
|
||||||
//
|
//
|
||||||
$_scrollbar_bg_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
|
|
||||||
|
|
||||||
scrollbar {
|
scrollbar {
|
||||||
$_slider_min_length: 40px;
|
$_slider_min_length: 40px;
|
||||||
@ -3163,13 +3143,13 @@ scrollbar {
|
|||||||
border: 4px solid transparent;
|
border: 4px solid transparent;
|
||||||
border-radius: $container_padding * 2;
|
border-radius: $container_padding * 2;
|
||||||
background-clip: padding-box;
|
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;
|
box-shadow: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all 200ms linear;
|
transition: all 200ms linear;
|
||||||
|
|
||||||
&:hover { background-color: mix($fg_color, $bg_color, 30%); }
|
&:hover { background-color: color-mix(in srgb, $fg_color 30%, $bg_color); }
|
||||||
&:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
|
&:hover:active { background-color: color-mix(in srgb, $fg_color 50%, $bg_color);}
|
||||||
&:disabled { background-color: transparent; }
|
&:disabled { background-color: transparent; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3209,7 +3189,7 @@ scrollbar {
|
|||||||
margin: $container_padding / 2;
|
margin: $container_padding / 2;
|
||||||
min-width: $container_padding - 2px;
|
min-width: $container_padding - 2px;
|
||||||
min-height: $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;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3239,9 +3219,9 @@ scrollbar {
|
|||||||
// Switches
|
// Switches
|
||||||
//
|
//
|
||||||
|
|
||||||
$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
|
$switch_image: linear-gradient(0deg, gtkalpha($fg_color, 0.25) 0%, gtkalpha($fg_color, 0.35) 100%);
|
||||||
$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 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, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 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_image: '';
|
||||||
$switch_checked_disabled_image: '';
|
$switch_checked_disabled_image: '';
|
||||||
@ -3265,7 +3245,7 @@ $switch_animation: switch_ripple_effect 0.1s cubic-bezier(0, 0, 0.2, 1);
|
|||||||
|
|
||||||
to {
|
to {
|
||||||
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
|
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%);
|
transparent 0%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3302,7 +3282,7 @@ switch {
|
|||||||
transition: background-image 0.1s, box-shadow 0;
|
transition: background-image 0.1s, box-shadow 0;
|
||||||
|
|
||||||
@if $gnome_version == 'old' {
|
@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 {
|
} @else {
|
||||||
background-image: $switch_checked_image;
|
background-image: $switch_checked_image;
|
||||||
}
|
}
|
||||||
@ -3368,7 +3348,7 @@ checkbutton, radiobutton {
|
|||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
outline-offset: 0;
|
outline-offset: 0;
|
||||||
|
|
||||||
&:hover { color: darken($fg_color, 15%); }
|
&:hover { color: $fg_color; }
|
||||||
&:disabled { color: $disabled_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: '';
|
$check_radio_checked_image: '';
|
||||||
|
|
||||||
@if $gnome_version == 'old' {
|
@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%);
|
$check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
|
||||||
} @else {
|
} @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%);
|
$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' {
|
@if $variant == 'dark' {
|
||||||
background-image: $check_radio_image;
|
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 {
|
&:hover {
|
||||||
box-shadow: inset 0 1px $highlight_color;
|
box-shadow: inset 0 1px $highlight_color;
|
||||||
@ -3531,7 +3513,7 @@ scale {
|
|||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
background-color: $_scale_trough_bg;
|
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 troughs
|
||||||
.osd & {
|
.osd & {
|
||||||
@ -3551,7 +3533,7 @@ scale {
|
|||||||
> trough > highlight {
|
> trough > highlight {
|
||||||
background-color: $selected_fg_color;
|
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); }
|
&:disabled { background-color: transparentize(black, 0.9); }
|
||||||
@ -3563,20 +3545,20 @@ scale {
|
|||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
background-color: $selected_bg_color;
|
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
|
// 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
|
// in media player to indicate how much video stream as been cached
|
||||||
> trough > fill {
|
> trough > fill {
|
||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
background-color: rgba($selected_bg_color, 0.5);
|
background-color: gtkalpha($selected_bg_color, 0.5);
|
||||||
|
|
||||||
&:disabled { background-color: transparent; }
|
&:disabled { background-color: transparent; }
|
||||||
}
|
}
|
||||||
|
|
||||||
> trough > slider {
|
> 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;
|
background-color: $selected_fg_color;
|
||||||
border: 1px solid $_slider_border;
|
border: 1px solid $_slider_border;
|
||||||
@ -3600,8 +3582,8 @@ scale {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: darken($selected_fg_color, 5%);
|
background-color: gtkalpha($selected_fg_color, 0.5);
|
||||||
border-color: darken($_slider_border, 5%);
|
border-color: gtkalpha($_slider_border, 0.5);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3614,16 +3596,16 @@ scale {
|
|||||||
|
|
||||||
@if $gnome_version == 'old' {
|
@if $gnome_version == 'old' {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -3801,7 +3783,7 @@ scale {
|
|||||||
progressbar {
|
progressbar {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
color: transparentize($fg_color, 0.3);
|
color: gtkalpha($fg_color, 0.7);
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
|
|
||||||
// sizing
|
// sizing
|
||||||
@ -3868,7 +3850,7 @@ progressbar {
|
|||||||
min-width: $container_padding - 2px;
|
min-width: $container_padding - 2px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $bt_radius;
|
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 &,
|
row:selected &,
|
||||||
infobar & { background-color: transparentize(black, 0.8); }
|
infobar & { background-color: transparentize(black, 0.8); }
|
||||||
@ -3893,7 +3875,7 @@ levelbar {
|
|||||||
border: none;
|
border: none;
|
||||||
padding: $container_padding / 2;
|
padding: $container_padding / 2;
|
||||||
border-radius: $bt_radius;
|
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; }
|
&.horizontal.discrete block { margin: 0 1px; }
|
||||||
@ -3917,8 +3899,8 @@ levelbar {
|
|||||||
background-color: $success_color;
|
background-color: $success_color;
|
||||||
}
|
}
|
||||||
block.empty {
|
block.empty {
|
||||||
background-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', transparentize($fg_color,0.8), $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
|
> junction { // the small square between two scrollbars
|
||||||
border: none;
|
border: none;
|
||||||
background-color: $_scrollbar_bg_color;
|
background-color: $fill_color;
|
||||||
|
|
||||||
// &:dir(rtl) { border-style: solid solid none none; }
|
// &:dir(rtl) { border-style: solid solid none none; }
|
||||||
}
|
}
|
||||||
@ -4482,7 +4464,7 @@ row.expander {
|
|||||||
}
|
}
|
||||||
|
|
||||||
list.nested {
|
list.nested {
|
||||||
background-color: rgba($base_color, 0.5);
|
background-color: gtkalpha($base_color, 0.5);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4710,8 +4692,7 @@ list.boxed-list-separate {
|
|||||||
padding: $container_padding;
|
padding: $container_padding;
|
||||||
margin: 6px 16px 16px 16px;
|
margin: 6px 16px 16px 16px;
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($header_bg, 0.85);
|
background-color: gtkalpha($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%);
|
|
||||||
border-radius: $wm_radius;
|
border-radius: $wm_radius;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 5px 15px 0 rgba(black, 0.25),
|
box-shadow: 0 5px 15px 0 rgba(black, 0.25),
|
||||||
@ -4744,7 +4725,7 @@ expander {
|
|||||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||||
|
|
||||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
&: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'); }
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||||
&:disabled { filter: opacity($disabled_opacity); }
|
&:disabled { filter: opacity($disabled_opacity); }
|
||||||
}
|
}
|
||||||
@ -4794,7 +4775,7 @@ calendar {
|
|||||||
background: none;
|
background: none;
|
||||||
border-radius: 0;
|
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; }
|
&:active { background-color: $selected_bg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4805,7 +4786,7 @@ calendar {
|
|||||||
|
|
||||||
> grid {
|
> grid {
|
||||||
> label.today {
|
> label.today {
|
||||||
background-color: rgba($fg_color, 0.15);
|
background-color: gtkalpha($fg_color, 0.15);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
@ -4836,7 +4817,7 @@ calendar {
|
|||||||
// Dialogs
|
// 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
|
window.dialog.message { // Message Dialog styling
|
||||||
&.background { background-color: $messagedialog_bg; }
|
&.background { background-color: $messagedialog_bg; }
|
||||||
@ -5041,28 +5022,28 @@ stacksidebar {
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-visible:focus-within {
|
&:focus-visible:focus-within {
|
||||||
background-color: rgba($fg_color, 0.1);
|
background-color: gtkalpha($fg_color, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.2);
|
background-color: gtkalpha($fg_color, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($fg_color, 0.15);
|
background-color: gtkalpha($fg_color, 0.15);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba($fg_color, 0.2);
|
background-color: gtkalpha($fg_color, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible:focus-within {
|
&:focus-visible:focus-within {
|
||||||
outline: none;
|
outline: none;
|
||||||
color: $fg_color;
|
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 {
|
||||||
// background-color needs to be set this way otherwise it gets drawn twice
|
// 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.
|
// 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;
|
background-clip: padding-box;
|
||||||
border-radius: $wm_radius;
|
border-radius: $wm_radius;
|
||||||
color: $osd_fg_color;
|
color: $osd_fg_color;
|
||||||
@ -5442,7 +5423,7 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
|
&: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; }
|
> rubberband { @extend %rubberband; }
|
||||||
@ -5597,9 +5578,9 @@ popover.emoji-picker {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.emoji-searchbar {
|
.emoji-searchbar {
|
||||||
padding: 6px;
|
padding: $container_padding;
|
||||||
border-spacing: 6px;
|
border-spacing: $container_padding;
|
||||||
border-bottom: 1px solid $borders_color;
|
// border-bottom: 1px solid $borders_color;
|
||||||
|
|
||||||
entry { margin: 0; }
|
entry { margin: 0; }
|
||||||
}
|
}
|
||||||
@ -5608,21 +5589,20 @@ popover.emoji-picker {
|
|||||||
padding: $container_padding / 2;
|
padding: $container_padding / 2;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-top: 1px solid $borders_color;
|
border-top: 1px solid $borders_color;
|
||||||
|
|
||||||
|
button.image-button {
|
||||||
|
border-radius: $bt_radius;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// mimic tab style
|
// mimic tab style
|
||||||
button.emoji-section {
|
button.emoji-section {
|
||||||
margin: $container_padding / 2 1px;
|
margin: 0;
|
||||||
padding: 1px $container_padding * 2;
|
padding: 1px $container_padding * 2;
|
||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
border: none;
|
border: none;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
transition: none;
|
|
||||||
animation: none;
|
|
||||||
|
|
||||||
&:first-child { margin-left: $container_padding; }
|
|
||||||
&:last-child { margin-right: $container_padding; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
popover.emoji-picker emoji {
|
popover.emoji-picker emoji {
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
//
|
//
|
||||||
color: $text_color;
|
color: $text_color;
|
||||||
background-color: $entry_bg;
|
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;
|
transition-duration: $shorter_duration * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +47,7 @@
|
|||||||
// insensitive entry
|
// insensitive entry
|
||||||
//
|
//
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
background-color: rgba($entry_bg, 0.02);
|
background-color: gtkalpha($entry_bg, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t==header-normal {
|
@if $t==header-normal {
|
||||||
@ -67,7 +67,7 @@
|
|||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: $entry_bg;
|
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;
|
transition-duration: $shorter_duration * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,8 +85,8 @@
|
|||||||
//
|
//
|
||||||
// insensitive header-bar entry
|
// insensitive header-bar entry
|
||||||
//
|
//
|
||||||
color: rgba($header_fg, 0.35);
|
color: gtkalpha($header_fg, 0.35);
|
||||||
background-color: rgba($entry_bg, 0.02);
|
background-color: gtkalpha($entry_bg, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==osd {
|
@else if $t==osd {
|
||||||
@ -114,7 +114,7 @@
|
|||||||
// insensitive osd entry
|
// insensitive osd entry
|
||||||
//
|
//
|
||||||
color: $osd_disabled_fg_color;
|
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%));
|
background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
|
||||||
@if $variant=='light' { box-shadow: none; }
|
@if $variant=='light' { box-shadow: none; }
|
||||||
@if $variant=='dark' {
|
@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; }
|
label, & { color: $disabled_fg_color; }
|
||||||
|
|
||||||
border-color: if($variant == 'light', $button_border, $dark_borders_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;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -181,7 +181,7 @@
|
|||||||
label, & { color: transparentize($selected_fg_color, 0.45); }
|
label, & { color: transparentize($selected_fg_color, 0.45); }
|
||||||
|
|
||||||
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
|
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; }
|
@if $variant=='light' { box-shadow: none; }
|
||||||
|
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
@ -261,7 +261,7 @@
|
|||||||
// hovered header-bar button
|
// hovered header-bar button
|
||||||
//
|
//
|
||||||
color: darken($header_fg, 2%);
|
color: darken($header_fg, 2%);
|
||||||
background-color: rgba($header_fg, 0.1);
|
background-color: gtkalpha($header_fg, 0.1);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -271,7 +271,7 @@
|
|||||||
// pushed header-bar button
|
// pushed header-bar button
|
||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: rgba($header_fg, 0.25);
|
background-color: gtkalpha($header_fg, 0.25);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -281,7 +281,7 @@
|
|||||||
// pushed header-bar button
|
// pushed header-bar button
|
||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: rgba($header_fg, 0.12);
|
background-color: gtkalpha($header_fg, 0.12);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -290,7 +290,7 @@
|
|||||||
//
|
//
|
||||||
// insensitive header-bar button
|
// insensitive header-bar button
|
||||||
//
|
//
|
||||||
label, & { color: rgba($header_fg, 0.35); }
|
label, & { color: gtkalpha($header_fg, 0.35); }
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -300,7 +300,7 @@
|
|||||||
//
|
//
|
||||||
// header-bar insensitive pushed button
|
// header-bar insensitive pushed button
|
||||||
//
|
//
|
||||||
label, & { color: rgba($header_fg, 0.35); }
|
label, & { color: gtkalpha($header_fg, 0.35); }
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -428,13 +428,13 @@
|
|||||||
$_position, 0,
|
$_position, 0,
|
||||||
$_position, 0.5,
|
$_position, 0.5,
|
||||||
to($_small_gradient_color),
|
to($_small_gradient_color),
|
||||||
to(rgba($_small_gradient_color, 0)));
|
to(gtkalpha($_small_gradient_color, 0)));
|
||||||
|
|
||||||
$_big_gradient: -gtk-gradient(radial,
|
$_big_gradient: -gtk-gradient(radial,
|
||||||
$_position, 0,
|
$_position, 0,
|
||||||
$_position, 0.6,
|
$_position, 0.6,
|
||||||
from(rgba($_big_gradient_color, 0.07)),
|
from(gtkalpha($_big_gradient_color, 0.07)),
|
||||||
to(rgba($_big_gradient_color, 0)));
|
to(gtkalpha($_big_gradient_color, 0)));
|
||||||
|
|
||||||
@if $t==normal {
|
@if $t==normal {
|
||||||
background-image: $_small_gradient, $_big_gradient;
|
background-image: $_small_gradient, $_big_gradient;
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
//
|
//
|
||||||
color: $text_color;
|
color: $text_color;
|
||||||
background-color: $entry_bg;
|
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;
|
transition-duration: $shorter_duration * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +47,7 @@
|
|||||||
// insensitive entry
|
// insensitive entry
|
||||||
//
|
//
|
||||||
color: $disabled_fg_color;
|
color: $disabled_fg_color;
|
||||||
background-color: rgba($entry_bg, 0.02);
|
background-color: gtkalpha($entry_bg, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $t==header-normal {
|
@if $t==header-normal {
|
||||||
@ -67,7 +67,7 @@
|
|||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: $entry_bg;
|
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;
|
transition-duration: $shorter_duration * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,8 +85,8 @@
|
|||||||
//
|
//
|
||||||
// insensitive header-bar entry
|
// insensitive header-bar entry
|
||||||
//
|
//
|
||||||
color: rgba($header_fg, 0.35);
|
color: gtkalpha($header_fg, 0.35);
|
||||||
background-color: rgba($entry_bg, 0.02);
|
background-color: gtkalpha($entry_bg, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==osd {
|
@else if $t==osd {
|
||||||
@ -119,7 +119,7 @@
|
|||||||
// insensitive osd entry
|
// insensitive osd entry
|
||||||
//
|
//
|
||||||
color: $osd_disabled_fg_color;
|
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
|
// normal button
|
||||||
//
|
//
|
||||||
color: $fg_color;
|
color: $alt_fg_color;
|
||||||
border-color: $button_borders;
|
border-color: $button_borders;
|
||||||
background-color: $button_bg;
|
background-color: $button_bg;
|
||||||
@if $variant=='light' { box-shadow: $shadow_3; }
|
@if $variant=='light' { box-shadow: $shadow_3; }
|
||||||
@ -149,12 +149,12 @@
|
|||||||
//
|
//
|
||||||
// hovered button
|
// hovered button
|
||||||
//
|
//
|
||||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
color: $fg_color;
|
||||||
border-color: $button_borders;
|
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=='light' { box-shadow: none; }
|
||||||
@if $variant=='dark' {
|
@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; }
|
label, & { color: $disabled_fg_color; }
|
||||||
|
|
||||||
border-color: if($variant == 'light', $button_border, $dark_borders_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;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -183,10 +183,10 @@
|
|||||||
//
|
//
|
||||||
// insensitive pushed button
|
// 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);
|
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; }
|
@if $variant=='light' { box-shadow: none; }
|
||||||
|
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
@ -206,8 +206,7 @@
|
|||||||
//
|
//
|
||||||
// hovered button
|
// hovered button
|
||||||
//
|
//
|
||||||
color: darken($fg_color, 10%);
|
background-color: gtkalpha(currentColor, 0.15);
|
||||||
background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
// border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
|
// border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
|
||||||
@ -218,8 +217,8 @@
|
|||||||
// pushed button
|
// pushed button
|
||||||
//
|
//
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $selected_fg_color;
|
color: if($variant=='light', $light_fg_color, $fg_color);
|
||||||
background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
|
background-color: if($variant=='light', gtkalpha(black, 0.5), gtkalpha(currentColor, 0.25));
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==flat-checked {
|
@else if $t==flat-checked {
|
||||||
@ -227,8 +226,8 @@
|
|||||||
// pushed button
|
// pushed button
|
||||||
//
|
//
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $selected_fg_color;
|
color: if($variant=='light', $light_fg_color, $fg_color);
|
||||||
background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
|
background-color: if($variant=='light', gtkalpha(black, 0.65), gtkalpha(currentColor, 0.35));
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==flat-insensitive {
|
@else if $t==flat-insensitive {
|
||||||
@ -246,7 +245,7 @@
|
|||||||
//
|
//
|
||||||
label, & { color: transparentize($selected_fg_color, 0.35); }
|
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;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -265,8 +264,8 @@
|
|||||||
//
|
//
|
||||||
// hovered header-bar button
|
// hovered header-bar button
|
||||||
//
|
//
|
||||||
color: darken($header_fg, 2%);
|
color: $header_fg;
|
||||||
background-color: rgba($header_fg, 0.1);
|
background-color: gtkalpha($header_fg, 0.1);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -276,7 +275,7 @@
|
|||||||
// pushed header-bar button
|
// pushed header-bar button
|
||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: rgba($header_fg, 0.25);
|
background-color: gtkalpha($header_fg, 0.25);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -286,7 +285,7 @@
|
|||||||
// pushed header-bar button
|
// pushed header-bar button
|
||||||
//
|
//
|
||||||
color: $header_fg;
|
color: $header_fg;
|
||||||
background-color: rgba($header_fg, 0.12);
|
background-color: gtkalpha($header_fg, 0.12);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@ -295,7 +294,7 @@
|
|||||||
//
|
//
|
||||||
// insensitive header-bar button
|
// insensitive header-bar button
|
||||||
//
|
//
|
||||||
label, & { color: rgba($header_fg, 0.35); }
|
label, & { color: gtkalpha($header_fg, 0.35); }
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -305,7 +304,7 @@
|
|||||||
//
|
//
|
||||||
// header-bar insensitive pushed button
|
// header-bar insensitive pushed button
|
||||||
//
|
//
|
||||||
label, & { color: rgba($header_fg, 0.35); }
|
label, & { color: gtkalpha($header_fg, 0.35); }
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|||||||
@ -59,7 +59,7 @@ $raven_padding: 8px;
|
|||||||
background-color: $menu_bg;
|
background-color: $menu_bg;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
|
background-color: gtkmix(currentColor, $menu_bg, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:checked {
|
&:active, &:checked {
|
||||||
@ -98,7 +98,7 @@ $raven_padding: 8px;
|
|||||||
.budgie-popover.background {
|
.budgie-popover.background {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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;
|
border-radius: $wm_radius;
|
||||||
background-color: $menu_bg;
|
background-color: $menu_bg;
|
||||||
background-clip: padding-box;
|
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
|
||||||
.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;
|
color: $raven_fg_color;
|
||||||
box-shadow: $shadow_4;
|
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;
|
@extend %raven_middle_button;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
|
background-color: gtkmix(currentColor, $menu_bg, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:checked {
|
&: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;
|
border: none;
|
||||||
margin: $container_padding / 2;
|
margin: $container_padding / 2;
|
||||||
border-radius: $bt_radius;
|
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);
|
box-shadow: 0 2px 3px rgba(black, 0.08);
|
||||||
|
|
||||||
&:hover, &:selected {
|
&: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);
|
box-shadow: 0 2px 4px rgba(black, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&: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;
|
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; }
|
image { padding: 0; }
|
||||||
|
|
||||||
&:active { image { color: $fg_color; }}
|
&:active { image { color: $fg_color; } }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -580,7 +580,6 @@ scale.warmth trough {
|
|||||||
color: transparentize($header_fg, 0.3);
|
color: transparentize($header_fg, 0.3);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $header_bg_backdrop;
|
background-color: $header_bg_backdrop;
|
||||||
border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -40,12 +40,12 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
|
|||||||
$nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
|
$nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
|
||||||
transparentize($dark_header_bg, 0.2) 40%);
|
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%);
|
$header_border 25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
|
@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);
|
$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),
|
$nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size / 2),
|
||||||
$dark_header_bg 40%);
|
$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%);
|
$header_border 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -80,7 +80,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
|
|||||||
|
|
||||||
> deck > box.vertical > headerbar.titlebar {
|
> deck > box.vertical > headerbar.titlebar {
|
||||||
@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
|
@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,
|
||||||
$nautilus_borders_color ($nautilus_sidebar_size + 1px),
|
$nautilus_borders_color ($nautilus_sidebar_size + 1px),
|
||||||
$dark_header_bg ($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 {
|
&:selected, &:selected:hover {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
transition: background-color ease-out 200ms;
|
transition: background-color ease-out 200ms;
|
||||||
background-color: rgba($fg_color, 0.15);
|
background-color: $sidebar_theme_color;
|
||||||
|
|
||||||
&, label { color: $fg_color; }
|
&, label { color: $fg_color; }
|
||||||
}
|
}
|
||||||
@ -1876,7 +1876,7 @@ popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {
|
|||||||
border-radius: $bt_radius;
|
border-radius: $bt_radius;
|
||||||
border: 1px solid $borders_color;
|
border: 1px solid $borders_color;
|
||||||
margin: 2px;
|
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); }
|
&:hover { @include button(hover); }
|
||||||
&:active, &:checked { @include button(flat-active); }
|
&: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 {
|
> list.background > row.activatable.bookmarks-row {
|
||||||
background-color: rgba($base_color, 0.35);
|
background-color: rgba($base_color, 0.35);
|
||||||
color: rgba($fg_color, 0.85);
|
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;
|
padding: 6px;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
@ -1991,12 +1991,12 @@ tabbox {
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($borders_color, 0.1);
|
background-color: gtkalpha(currentColor, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:active:hover {
|
&:active, &:active:hover {
|
||||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
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 {
|
&.tab-close-button {
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
$nautilus_header_image: image($header_bg);
|
$nautilus_header_image: image($header_bg);
|
||||||
$nautilus_header_borders_image: image($header_border);
|
$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;
|
$flap_sidebar_size: 240px;
|
||||||
|
|
||||||
@if $nautilus_style == 'stable' {
|
@if $nautilus_style == 'stable' {
|
||||||
@ -96,7 +96,7 @@ $flap_sidebar_size: 240px;
|
|||||||
.navigation-sidebar:not(.view) {
|
.navigation-sidebar:not(.view) {
|
||||||
> row {
|
> row {
|
||||||
&:selected {
|
&:selected {
|
||||||
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
|
background-color: $sidebar_theme_color;
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,7 +133,7 @@ $flap_sidebar_size: 240px;
|
|||||||
tabbar:not(.inline) {
|
tabbar:not(.inline) {
|
||||||
.box {
|
.box {
|
||||||
@if $monterey == 'false' {
|
@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;
|
border-top: 1px solid $borders_color;
|
||||||
} @else {
|
} @else {
|
||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
@ -289,7 +289,7 @@ window.background.csd {
|
|||||||
|
|
||||||
> scrolledwindow > viewport > widget > stack {
|
> scrolledwindow > viewport > widget > stack {
|
||||||
> list.navigation-sidebar {
|
> list.navigation-sidebar {
|
||||||
background-color: rgba($dark_sidebar_bg, 1);
|
background-color: $dark_sidebar_bg;
|
||||||
|
|
||||||
> separator {
|
> separator {
|
||||||
background-color: transparent;
|
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; }
|
> stack.background { background-color: $base_color; }
|
||||||
|
|||||||
@ -418,15 +418,13 @@ tabbar {
|
|||||||
.box {
|
.box {
|
||||||
color: $text_color;
|
color: $text_color;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border-bottom: 1px solid $borders_color;
|
||||||
|
|
||||||
@if $monterey == 'false' {
|
@if $monterey == 'false' {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-shadow: inset 0 -1px if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
|
background-color: color-mix(in srgb, black 15%, $header_bg);
|
||||||
border-bottom: none;
|
|
||||||
background-color: darken($header_bg, 10%);
|
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: none;
|
|
||||||
border-bottom: 1px solid $borders_color;
|
|
||||||
padding: $container_padding / 2 0;
|
padding: $container_padding / 2 0;
|
||||||
background-color: $header_bg;
|
background-color: $header_bg;
|
||||||
}
|
}
|
||||||
@ -482,6 +480,7 @@ tabbar {
|
|||||||
@if $monterey == 'false' {
|
@if $monterey == 'false' {
|
||||||
@extend %tabs_tab;
|
@extend %tabs_tab;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
} @else {
|
} @else {
|
||||||
@extend %monterey_tab;
|
@extend %monterey_tab;
|
||||||
}
|
}
|
||||||
@ -507,12 +506,12 @@ tabbar {
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
background-color: rgba($borders_color, 0.1);
|
background-color: gtkalpha(currentColor, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:active:hover {
|
&:active, &:active:hover {
|
||||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
color: $text_color;
|
||||||
background-color: rgba($borders_color, 0.2);
|
background-color: gtkalpha(currentColor, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -934,7 +933,7 @@ toolbarview {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
box-shadow: inset 0 1px $borders_color;
|
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;
|
color: $text_color;
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user