diff --git a/src/_colors.scss b/src/_colors.scss index 3d55bb6..5e87ade 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -1,245 +1,272 @@ @charset "UTF-8"; //apps rely on some named colors to be exported /* GTK NAMED COLORS ---------------- use responsibly! */ // Sass thinks we're using the colors in the variables as strings and may shoot // warning, it's innocuous and can be defeated by using "" + $var /* widget text/foreground color */ -@define-color theme_fg_color #{"" + internal_w_color(text)}; // KCM'd +@define-color theme_fg_color_breeze #{"" + internal_w_color(text)}; // KCM'd /* text color for entries, views and content in general */ -@define-color theme_text_color #{"" + internal_v_color(text)}; // KCM'd +@define-color theme_text_color_breeze #{"" + internal_v_color(text)}; // KCM'd /* widget base background color */ -@define-color theme_bg_color #{"" + internal_w_color(normal)}; // KCM'd +@define-color theme_bg_color_breeze #{"" + internal_w_color(normal)}; // KCM'd /* text widgets and the like base background color */ -@define-color theme_base_color #{"" + internal_v_color(normal)}; // KCM'd +@define-color theme_base_color_breeze #{"" + internal_v_color(normal)}; // KCM'd /* view hover decoration color*/ -@define-color theme_view_hover_decoration_color #{"" + internal_v_color(hover)}; // KCM'd +@define-color theme_view_hover_decoration_color_breeze #{"" + internal_v_color(hover)}; // KCM'd /* background color of hovering selected widgets*/ -@define-color theme_hovering_selected_bg_color #{"" + internal_s_color(hover)}; // KCM'd +@define-color theme_hovering_selected_bg_color_breeze #{"" + internal_s_color(hover)}; // KCM'd /* base background color of selections */ -@define-color theme_selected_bg_color #{"" + internal_s_color(normal)}; // KCM'd +@define-color theme_selected_bg_color_breeze #{"" + internal_s_color(normal)}; // KCM'd /* text/foreground color of selections */ -@define-color theme_selected_fg_color #{"" + internal_s_color(text)}; // KCM'd +@define-color theme_selected_fg_color_breeze #{"" + internal_s_color(text)}; // KCM'd /* decoration color of views */ -@define-color theme_view_active_decoration_color #{"" + internal_v_color(active)}; // KCM'd +@define-color theme_view_active_decoration_color_breeze #{"" + internal_v_color(active)}; // KCM'd /* base background color of insensitive selections */ -@define-color insensitive_selected_bg_color #{"" + internal_insensitive(internal_s_color(normal))}; +@define-color insensitive_selected_bg_color_breeze #{"" + internal_insensitive(internal_s_color(normal))}; /* base background color of insensitive widgets */ -@define-color insensitive_bg_color #{"" + internal_insensitive(internal_w_color(normal))}; +@define-color insensitive_bg_color_breeze #{"" + internal_insensitive(internal_w_color(normal))}; /* text foreground color of insensitive widgets */ -@define-color insensitive_fg_color #{"" + internal_insensitive(internal_w_color(text))}; +@define-color insensitive_fg_color_breeze #{"" + internal_insensitive(internal_w_color(text))}; /* insensitive text widgets and the like base background color */ -@define-color insensitive_base_color #{"" + internal_insensitive(internal_v_color(text))}; +@define-color insensitive_base_color_breeze #{"" + internal_insensitive(internal_v_color(text))}; /* insensitive text widgets and the like base foreground color */ -@define-color insensitive_base_fg_color #{"" + internal_insensitive(internal_v_color(normal))}; +@define-color insensitive_base_fg_color_breeze #{"" + internal_insensitive(internal_v_color(normal))}; /* insensitive selected text widgets and the like base background color */ -@define-color insensitive_selected_fg_color #{"" + internal_insensitive(internal_s_color(text))}; +@define-color insensitive_selected_fg_color_breeze #{"" + internal_insensitive(internal_s_color(text))}; /* widget text/foreground color on backdrop windows */ -@define-color theme_unfocused_fg_color #{"" + internal_backdrop(internal_w_color(text))}; +@define-color theme_unfocused_fg_color_breeze #{"" + internal_backdrop(internal_w_color(text))}; /* text color for entries, views and content in general on backdrop windows */ -@define-color theme_unfocused_text_color #{"" + internal_backdrop(internal_v_color(text))}; +@define-color theme_unfocused_text_color_breeze #{"" + internal_backdrop(internal_v_color(text))}; /* widget base background color on backdrop windows */ -@define-color theme_unfocused_bg_color #{"" + internal_backdrop(internal_w_color(normal))}; +@define-color theme_unfocused_bg_color_breeze #{"" + internal_backdrop(internal_w_color(normal))}; /* text widgets and the like base background color on backdrop windows */ -@define-color theme_unfocused_base_color #{"" + internal_backdrop(internal_v_color(normal))}; +@define-color theme_unfocused_base_color_breeze #{"" + internal_backdrop(internal_v_color(normal))}; /* base background color of selections on backdrop windows, alt */ -@define-color theme_unfocused_selected_bg_color_alt #{"" + internal_backdrop(internal_s_color(normal))}; +@define-color theme_unfocused_selected_bg_color_alt_breeze #{"" + internal_backdrop(internal_s_color(normal))}; /* base background color of selections on backdrop windows */ -@define-color theme_unfocused_selected_bg_color #{"" + internal_backdrop(internal_s_color(backdrop))}; +@define-color theme_unfocused_selected_bg_color_breeze #{"" + internal_backdrop(internal_s_color(backdrop))}; /* text/foreground color of selections on backdrop windows */ -@define-color theme_unfocused_selected_fg_color #{"" + internal_backdrop(internal_s_color(text))}; +@define-color theme_unfocused_selected_fg_color_breeze #{"" + internal_backdrop(internal_s_color(text))}; /* base background color of insensitive selections on backdrop windows */ -@define-color insensitive_unfocused_selected_bg_color #{"" + internal_backdrop(internal_insensitive(internal_s_color(normal)))}; +@define-color insensitive_unfocused_selected_bg_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_s_color(normal)))}; /* text foreground color of insensitive widgets on backdrop windows*/ -@define-color insensitive_unfocused_fg_color #{"" + internal_backdrop(internal_insensitive(internal_w_color(text)))}; +@define-color insensitive_unfocused_fg_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_w_color(text)))}; /* backdground color of insensitive widgets on backdrop windows*/ -@define-color insensitive_unfocused_bg_color #{"" + internal_backdrop(internal_insensitive(internal_w_color(normal)))}; +@define-color insensitive_unfocused_bg_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_w_color(normal)))}; /* text foreground color of insensitive selected widgets on backdrop windows*/ -@define-color insensitive_unfocused_selected_fg_color #{"" + internal_backdrop(internal_insensitive(internal_s_color(text)))}; +@define-color insensitive_unfocused_selected_fg_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_s_color(text)))}; /* view text foreground color of insensitive widgets on backdrop windows */ -@define-color theme_unfocused_view_text_color #{"" + internal_backdrop(internal_insensitive(internal_v_color(text)))}; +@define-color theme_unfocused_view_text_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_v_color(text)))}; /* insensitive view background color on backdrop windows */ -@define-color theme_unfocused_view_bg_color #{"" + internal_backdrop(internal_insensitive(internal_v_color(normal)))}; +@define-color theme_unfocused_view_bg_color_breeze #{"" + internal_backdrop(internal_insensitive(internal_v_color(normal)))}; /* widgets main borders color */ -@define-color borders #{"" +$border_color}; +@define-color borders_breeze #{"" +$border_color}; /* widgets main borders color on backdrop windows */ -@define-color unfocused_borders #{"" + internal_backdrop($border_color)}; +@define-color unfocused_borders_breeze #{"" + internal_backdrop($border_color)}; /* widgets main borders color insensitive */ -@define-color insensitive_borders #{"" + internal_insensitive($border_color)}; +@define-color insensitive_borders_breeze #{"" + internal_insensitive($border_color)}; /* widgets main borders color insensitive backdrop */ -@define-color unfocused_insensitive_borders #{"" + internal_backdrop(internal_insensitive($border_color))}; +@define-color unfocused_insensitive_borders_breeze #{"" + internal_backdrop(internal_insensitive($border_color))}; /* * * Button Colors * */ -@define-color theme_button_background_normal #{"" + internal_b_color(normal)}; -@define-color theme_button_decoration_hover #{"" + internal_b_color(hover)}; -@define-color theme_button_decoration_focus #{"" + internal_b_color(active)}; -@define-color theme_button_foreground_normal #{"" + internal_b_color(text)}; -@define-color theme_button_foreground_active #{"" + internal_b_color(active-text)}; - -@define-color theme_button_background_insensitive #{"" + internal_insensitive(internal_b_color(normal))}; -@define-color theme_button_decoration_hover_insensitive #{"" + internal_insensitive(internal_b_color(hover))}; -@define-color theme_button_decoration_focus_insensitive #{"" + internal_insensitive(internal_b_color(active))}; -@define-color theme_button_foreground_insensitive #{"" + internal_insensitive(internal_b_color(text))}; -@define-color theme_button_foreground_active_insensitive #{"" + internal_insensitive(internal_b_color(active-text))}; - -@define-color theme_button_background_backdrop #{"" + internal_backdrop(internal_b_color(normal))}; -@define-color theme_button_decoration_hover_backdrop #{"" + internal_backdrop(internal_b_color(hover))}; -@define-color theme_button_decoration_focus_backdrop #{"" + internal_backdrop(internal_b_color(active))}; -@define-color theme_button_foreground_backdrop #{"" + internal_backdrop(internal_b_color(text))}; -@define-color theme_button_foreground_active_backdrop #{"" + internal_backdrop(internal_b_color(active-text))}; - -@define-color theme_button_background_backdrop_insensitive #{"" + internal_insensitive(internal_backdrop(internal_b_color(normal)))}; -@define-color theme_button_decoration_hover_backdrop_insensitive #{"" + internal_insensitive(internal_backdrop(internal_b_color(hover)))}; -@define-color theme_button_decoration_focus_backdrop_insensitive #{"" + internal_insensitive(internal_backdrop(internal_b_color(active)))}; -@define-color theme_button_foreground_backdrop_insensitive #{"" + internal_insensitive(internal_backdrop(internal_b_color(text)))}; -@define-color theme_button_foreground_active_backdrop_insensitive #{"" + internal_insensitive(internal_backdrop(internal_b_color(active-text)))}; +@define-color theme_button_background_normal_breeze #{"" + internal_b_color(normal)}; +@define-color theme_button_decoration_hover_breeze #{"" + internal_b_color(hover)}; +@define-color theme_button_decoration_focus_breeze #{"" + internal_b_color(active)}; +@define-color theme_button_foreground_normal_breeze #{"" + internal_b_color(text)}; +@define-color theme_button_foreground_active_breeze #{"" + internal_b_color(active-text)}; + +@define-color theme_button_background_insensitive_breeze #{"" + internal_insensitive(internal_b_color(normal))}; +@define-color theme_button_decoration_hover_insensitive_breeze #{"" + internal_insensitive(internal_b_color(hover))}; +@define-color theme_button_decoration_focus_insensitive_breeze #{"" + internal_insensitive(internal_b_color(active))}; +@define-color theme_button_foreground_insensitive_breeze #{"" + internal_insensitive(internal_b_color(text))}; +@define-color theme_button_foreground_active_insensitive_breeze #{"" + internal_insensitive(internal_b_color(active-text))}; + +@define-color theme_button_background_backdrop_breeze #{"" + internal_backdrop(internal_b_color(normal))}; +@define-color theme_button_decoration_hover_backdrop_breeze #{"" + internal_backdrop(internal_b_color(hover))}; +@define-color theme_button_decoration_focus_backdrop_breeze #{"" + internal_backdrop(internal_b_color(active))}; +@define-color theme_button_foreground_backdrop_breeze #{"" + internal_backdrop(internal_b_color(text))}; +@define-color theme_button_foreground_active_backdrop_breeze #{"" + internal_backdrop(internal_b_color(active-text))}; + +@define-color theme_button_background_backdrop_insensitive_breeze #{"" + internal_insensitive(internal_backdrop(internal_b_color(normal)))}; +@define-color theme_button_decoration_hover_backdrop_insensitive_breeze #{"" + internal_insensitive(internal_backdrop(internal_b_color(hover)))}; +@define-color theme_button_decoration_focus_backdrop_insensitive_breeze #{"" + internal_insensitive(internal_backdrop(internal_b_color(active)))}; +@define-color theme_button_foreground_backdrop_insensitive_breeze #{"" + internal_insensitive(internal_backdrop(internal_b_color(text)))}; +@define-color theme_button_foreground_active_backdrop_insensitive_breeze #{"" + internal_insensitive(internal_backdrop(internal_b_color(active-text)))}; /* these are pretty self explicative */ -@define-color warning_color #{"" + $warning_color}; -@define-color error_color #{"" + $error_color}; -@define-color success_color #{"" + $success_color}; +@define-color warning_color_breeze #{"" + $warning_color}; +@define-color error_color_breeze #{"" + $error_color}; +@define-color success_color_breeze #{"" + $success_color}; -@define-color warning_color_backdrop #{"" + internal_backdrop($warning_color)}; -@define-color error_color_backdrop #{"" + internal_backdrop($error_color)}; -@define-color success_color_backdrop #{"" + internal_backdrop($success_color)}; +@define-color warning_color_backdrop_breeze #{"" + internal_backdrop($warning_color)}; +@define-color error_color_backdrop_breeze #{"" + internal_backdrop($error_color)}; +@define-color success_color_backdrop_breeze #{"" + internal_backdrop($success_color)}; -@define-color warning_color_insensitive #{"" + internal_insensitive($warning_color)}; -@define-color error_color_insensitive #{"" + internal_insensitive($error_color)}; -@define-color success_color_insensitive #{"" + internal_insensitive($success_color)}; +@define-color warning_color_insensitive_breeze #{"" + internal_insensitive($warning_color)}; +@define-color error_color_insensitive_breeze #{"" + internal_insensitive($error_color)}; +@define-color success_color_insensitive_breeze #{"" + internal_insensitive($success_color)}; -@define-color warning_color_insensitive_backdrop #{"" + internal_insensitive(internal_backdrop($warning_color))}; -@define-color error_color_insensitive_backdrop #{"" + internal_insensitive(internal_backdrop($error_color))}; -@define-color success_color_insensitive_backdrop #{"" + internal_insensitive(internal_backdrop($success_color))}; +@define-color warning_color_insensitive_backdrop_breeze #{"" + internal_insensitive(internal_backdrop($warning_color))}; +@define-color error_color_insensitive_backdrop_breeze #{"" + internal_insensitive(internal_backdrop($error_color))}; +@define-color success_color_insensitive_backdrop_breeze #{"" + internal_insensitive(internal_backdrop($success_color))}; -@define-color link_color #{"" + $link_color}; -@define-color link_visited_color #{"" + $link_visited_color}; +@define-color link_color_breeze #{"" + $link_color}; +@define-color link_visited_color_breeze #{"" + $link_visited_color}; /* * * Titlebar Colors * */ -@define-color theme_titlebar_background #{"" + internal_t_color(background)}; -@define-color theme_titlebar_foreground #{"" + internal_t_color(text)}; -@define-color theme_titlebar_background_light #{"" + internal_t_color(background-light)}; -@define-color theme_titlebar_foreground_backdrop #{"" + internal_t_color(backdrop-text)}; -@define-color theme_titlebar_background_backdrop #{"" + internal_t_color(backdrop-background)}; +@define-color theme_titlebar_background_breeze #{"" + internal_t_color(background)}; +@define-color theme_titlebar_foreground_breeze #{"" + internal_t_color(text)}; +@define-color theme_titlebar_background_light_breeze #{"" + internal_t_color(background-light)}; +@define-color theme_titlebar_foreground_backdrop_breeze #{"" + internal_t_color(backdrop-text)}; +@define-color theme_titlebar_background_backdrop_breeze #{"" + internal_t_color(backdrop-background)}; -@define-color theme_titlebar_foreground_insensitive #{"" + internal_insensitive(internal_t_color(text))}; +@define-color theme_titlebar_foreground_insensitive_breeze #{"" + internal_insensitive(internal_t_color(text))}; -@define-color theme_titlebar_foreground_insensitive_backdrop #{"" + internal_insensitive(internal_t_color(backdrop-text))}; +@define-color theme_titlebar_foreground_insensitive_backdrop_breeze #{"" + internal_insensitive(internal_t_color(backdrop-text))}; /* * Tooltips */ -@define-color tooltip_text #{"" + internal_tooltip(text)}; -@define-color tooltip_background #{"" + internal_tooltip(background)}; -@define-color tooltip_border #{"" + internal_tooltip(border)}; +@define-color tooltip_text_breeze #{"" + internal_tooltip(text)}; +@define-color tooltip_background_breeze #{"" + internal_tooltip(background)}; +@define-color tooltip_border_breeze #{"" + internal_tooltip(border)}; /* * Misc */ -@define-color print_paper_backdrop #{"" internal_backdrop(white)}; +@define-color print_paper_backdrop_breeze #{"" internal_backdrop(white)}; //@!define-color destructive_color #{$destructive_color} //WM // $_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is // transparentize(black,1)); // done directly in the // // color definition // // /* // these colors are exported for the window manager and shouldn't be used in applications, // read if you used those and something break with a version upgrade you're on your own... */ // @!define-color wm_title #{$titlebar_fg_color}; // @!define-color wm_unfocused_title #{$backdrop_fg_color}; // @!define-color wm_highlight #{"" + $_wm_highlight}; // @!define-color wm_borders_edge #{"" + $borders_edge}; // // @!define-color wm_bg_a #{$titlebar_bg_color}; // @!define-color wm_bg_b #{$titlebar_bg_color}; // // @!define-color wm_shadow alpha(black, 0.35); // @!define-color wm_border alpha(black, 0.18); // // @!define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); // @!define-color wm_button_hover_color_b #{$bg_color}; // @!define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); // @!define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); // @!define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); //FIXME this is really an API -@define-color content_view_bg #{"" + internal_v_color(normal)}; +@define-color content_view_bg_breeze #{"" + internal_v_color(normal)}; + +/* + * GTK API color re-defs + */ + +@define-color theme_fg_color @theme_fg_color_breeze; +@define-color theme_text_color @theme_text_color_breeze; +@define-color theme_bg_color @theme_bg_color_breeze; +@define-color theme_base_color @theme_base_color_breeze; +@define-color theme_selected_bg_color @theme_selected_bg_color_breeze; +@define-color theme_selected_fg_color @theme_selected_fg_color_breeze; +@define-color insensitive_bg_color @insensitive_bg_color_breeze; +@define-color insensitive_fg_color @insensitive_fg_color_breeze; +@define-color insensitive_base_color @insensitive_base_color_breeze; +@define-color theme_unfocused_fg_color @theme_unfocused_fg_color_breeze; +@define-color theme_unfocused_text_color @theme_unfocused_text_color_breeze; +@define-color theme_unfocused_bg_color @theme_unfocused_bg_color_breeze; +@define-color theme_unfocused_base_color @theme_unfocused_base_color_breeze; +@define-color theme_unfocused_selected_bg_color @theme_unfocused_selected_bg_color_breeze; +@define-color theme_unfocused_selected_fg_color @theme_unfocused_selected_fg_color_breeze; +@define-color unfocused_insensitive_color @unfocused_insensitive_color_breeze; +@define-color borders @borders_breeze; +@define-color unfocused_borders @unfocused_borders_breeze; +@define-color warning_color @warning_color_breeze; +@define-color error_color @error_color_breeze; +@define-color success_color @success_color_breeze; +@define-color content_view_bg @content_view_bg_breeze; \ No newline at end of file diff --git a/src/_functions.scss b/src/_functions.scss index 01bd0cc..69e8925 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,287 +1,287 @@ @charset "UTF-8"; // GTK functions // escape string entirely @function gtk ($str) { - @return unquote($str); + @return unquote("#{$str}_breeze"); } // alpha function @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } // shade function @function gtkshade($c, $a) { - @return unquote("shade(#{$c},#{$a})"); + @return unquote("shade(#{$c}_breeze,#{$a})"); } // mix function @function gtkmix($c1, $c2, $m) { @return unquote("mix(#{$c1},#{$c2},#{$m})"); } // // Theme color functions // // Button Color @function internal_b_color($c: normal) { @if $c == normal { @return $ButtonBackgroundNormal; } @if $c == hover { @return $ButtonDecorationHover; } @if $c == active { @return $ButtonDecorationFocus; } @if $c == text { @return $ButtonForegroundNormal; } @if $c == active-text { @return $SelectionForegroundNormal; } } // Selection Color @function internal_s_color($c: normal) { @if $c == normal { @return $SelectionBackgroundNormal; } @if $c == hover { @return $SelectionDecorationHover; } @if $c == text { @return $SelectionForegroundNormal; } @if $c == backdrop { @return transparentize($SelectionBackgroundNormal,0.5); } } // View Color @function internal_v_color($c: normal) { @if $c == normal { @return $ViewBackgroundNormal; } @if $c == hover { @return $ViewDecorationHover; } @if $c == active { @return $ViewDecorationFocus; } @if $c == text { @return $ViewForegroundNormal; } } // Window Color @function internal_w_color($c: normal) { @if $c == normal { @return $WindowBackgroundNormal; } @if $c == text { @return $WindowForegroundNormal; } } // Titlebar color @function internal_t_color($c: text) { @if $c == text { @return $WMactiveForeground; } @if $c == background { @return $WMactiveBackground; } @if $c == background-light { @return $WindowBackgroundNormal; } @if $c == backdrop-text { @return $WMinactiveForeground; } @if $c == backdrop-background { @return $WMinactiveBackground; } } @function internal_tooltip($c: text) { @if $c == text { @return $TooltipForegroundNormal; } @if $c == background { @return $TooltipBackgroundNormal; } @if $c == border { @return mix($TooltipForegroundNormal, $TooltipBackgroundNormal, 25%); } } @function internal_button_gradient($c, $state: normal) { @if $state == normal { @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.01,100%)), change-color($c, $lightness:min(lightness($c)/1.03,100%))); } @else { @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.03,100%)), change-color($c, $lightness:min(lightness($c)/1.10,100%))); } } $border_color: mix($WindowBackgroundNormal,$WindowForegroundNormal, 75%); $menu_color: internal_w_color(normal); $link_color: $ViewForegroundLink; $link_visited_color: $ViewForegroundVisited; $warning_color: $ViewForegroundNeutral; $error_color: $ViewForegroundNegative; $success_color: $ViewForegroundPositive; $destructive_color: $error_color; $trough_color: gtkmix(gtk("@theme_bg_color"),gtk("@theme_fg_color"),0.7); $trough_color_backdrop: gtkmix(gtk("@theme_unfocused_bg_color"),gtk("@theme_unfocused_fg_color"),0.7); $trough_color_insensitive: gtkmix(gtk("@insensitive_bg_color"),gtk("@insensitive_fg_color"),0.7); $trough_color_backdrop_insensitive: gtkmix(gtk("@insensitive_unfocused_bg_color"),gtk("@insensitive_unfocused_fg_color"),0.7); $scrollbar_color: gtkmix($trough_color,gtk("@theme_text_color"),0.5); $scrollbar_color_backdrop: gtkmix($trough_color_backdrop,gtk("@theme_unfocused_text_color"),0.5); // // Color effects // // // Color maps for color effect functions // $Color: ( Disabled: $DisabledColor, Inactive: $InactiveColor ); $ColorAmount: ( Disabled: $DisabledColorAmount, Inactive: $InactiveColorAmount ); $ColorEffect: ( Disabled: $DisabledColorEffect, Inactive: $InactiveColorEffect ); $ContrastAmount: ( Disabled: $DisabledContrastAmount, Inactive: $InactiveContrastAmount ); $ContrastEffect: ( Disabled: $DisabledContrastEffect, Inactive: $InactiveContrastEffect ); $IntensityAmount: ( Disabled: $DisabledIntensityAmount, Inactive: $InactiveIntensityAmount ); $IntensityEffect: ( Disabled: $DisabledIntensityEffect, Inactive: $InactiveIntensityEffect ); $r: 3px; // standard radius @function internal_insensitive($c) { @return internal_Color(internal_Intensity(internal_Contrast($c, Disabled), Disabled), Disabled); } @function internal_backdrop($c) { @if $InactiveEnable == true { @return internal_Color(internal_Intensity(internal_Contrast($c, Inactive), Inactive), Inactive); } @else { @return $c; } } @function internal_Contrast($c, $state) { @if map-get($ContrastEffect, $state) == 0 { @return $c; } @if map-get($ContrastEffect, $state) == 1 { @if lightness(internal_w_color()) > lightness(internal_w_color(text)) { @if lightness($c) < lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) <= lightness(internal_t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } @if lightness(internal_w_color()) <= lightness(internal_w_color(text)) { @if lightness($c) > lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) > lightness(internal_t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } } @if map-get($ContrastEffect, $state) == 2 { @if lightness(internal_w_color()) > lightness(internal_w_color(text)) { // don't know what a reasonable lightness treshhold is for Contrast @if lightness($c) < lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) <= lightness(internal_t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } @if lightness(internal_w_color()) <= lightness(internal_w_color(text)) { @if lightness($c) > lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) > lightness(internal_t_color(text))){ @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } } } @function internal_Color($c, $state) { @if map-get($ColorEffect, $state) ==0 { @return $c; } @if map-get($ColorEffect, $state) ==1 { @if map-get($ColorAmount, $state) >=0 { @return desaturate($c, percentage(map-get($ColorAmount, $state))); } @else { @return saturate($c, percentage(abs(map-get($ColorAmount, $state)))); } } @if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 { // 2 and 3 seem to do the same @return mix(map-get($Color, $state),$c, percentage(map-get($ColorAmount, $state))); } } @function internal_Intensity($c, $state) { @if map-get($IntensityEffect, $state) == 0 { @return $c; } @if map-get($IntensityEffect, $state) == 1 { @if map-get($IntensityAmount, $state) >= 0 { @return mix(white, $c, percentage(map-get($IntensityAmount, $state))); } @else { @return mix(black, $c, percentage(abs(map-get($IntensityAmount, $state)))); } } @if map-get($IntensityEffect, $state) == 2 { @if map-get($IntensityAmount, $state) == -1 { @return change-color($c, $lightness: 100%); } @else { @return change-color($c, $lightness: min(lightness($c)/(1+map-get($IntensityAmount, $state)),100%)); } } @if map-get($IntensityEffect, $state) == 3 { @return change-color($c, $lightness: min(lightness($c)*(1+map-get($IntensityAmount, $state)),100%)); } } @function internal_alpha2solid($c,$background) { $amount:alpha($c); $c:rgb(red($c),green($c),blue($c)); @return mix($c,$background,$amount); } diff --git a/src/gtk3/widgets/_base.scss b/src/gtk3/widgets/_base.scss index 8230569..c67b071 100644 --- a/src/gtk3/widgets/_base.scss +++ b/src/gtk3/widgets/_base.scss @@ -1,268 +1,268 @@ @charset "UTF-8"; $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: gtk("@error_color"); // The size for scrollbars. The slider is 2px smaller, but we keep it // up so that the whole area is sensitive to button presses for the // slider. The stepper button is larger in both directions, the slider // only in the width -GtkScrolledWindow-scrollbar-spacing: 0; -GtkScrolled-window-overlay-scrolling: FALSE; -GtkToolItemGroup-expander-size: 11; -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-width: 0px; } /*************** * Base States * ***************/ .background { color: gtk("@theme_fg_color"); background-color: gtk("@theme_bg_color"); &:backdrop { text-shadow: none; -gtk-icon-shadow: none; color: gtk("@theme_unfocused_fg_color"); background-color: gtk("@theme_unfocused_bg_color"); } } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: gtk("@theme_bg_color"); color: gtk("@theme_fg_color"); &:hover { background-color: gtkshade("@theme_bg_color", 1.1); color: gtk("@theme_fg_color"); } &:active { background-color: gtkshade("@theme_bg_color", 0.9); color: gtk("@theme_fg_color"); } &:disabled { background-color: gtk("@insensitive_fg_color"); color: gtk("@insensitive_fg_color"); } &:selected { background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_selected_fg_color"); } } %view, .view { color: gtk("@theme_text_color"); background-color: gtk("@theme_base_color"); &:backdrop { color: gtk("@theme_unfocused_text_color"); background-color: gtk("@theme_unfocused_base_color"); } &:disabled { color: gtk("@insensitive_base_fg_color"); } &:selected { &:focus, & { border-radius: $r; @extend %selected_items; } } } .view, textview { text { @extend %view; selection { &:focus, & { @extend %selected_items; }} } } textview border { background-color: gtk("@theme_base_color"); background-image: image(gtk("@borders")); // HACK: the border node just draws background so, background-repeat: no-repeat; // using a background-image to draw the border &:backdrop { background-color: gtk("@theme_unfocused_base_color"); } &.bottom { background-size: 100% 1px; background-position: top; } &.top { background-size: 100% 1px; background-position: bottom; } &.left { background-size: 1px 100%; background-position: right; } &.right { background-size: 1px 100%; background-position: left; } } .rubberband, rubberband { border: 1px solid gtk("@theme_selected_bg_color"); - background-color: gtkalpha("@theme_selected_bg_color", 0.8); + background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.8); &:backdrop { border-color: gtk("@theme_unfocused_selected_bg_color"); - background-color: gtkalpha("@theme_unfocused_selected_bg_color", 0.8); + background-color: gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.8); } } flowbox { rubberband { @extend rubberband; } flowboxchild { padding: 3px; border-radius: $r; &:selected { @extend %selected_items; outline-offset: 0px; } } } label { &.separator { color: gtk("@theme_fg_color"); @extend .dim-label; &:backdrop { color: gtk("@theme_unfocused_fg_color"); } } selection { background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_selected_fg_color"); } &:disabled { color: gtk("@insensitive_fg_color"); selection { @extend %selected_items:disabled; } &:backdrop { color: gtk("@insensitive_unfocused_fg_color") } } &:backdrop { color: gtk("@theme_unfocused_text_color"); selction {@extend %selected_items:backdrop;} } } .dim-label { opacity: 0.5; text-shadow: none; } assistant { .sidebar { background-color: gtk("@theme_text_color"); border-top: 1px solid gtk("@borders"); &:backdrop { background-color: gtk("@theme_unfocused_text_color"); border-color: gtk("@unfocused_borders"); } } &.csd .sidebar { border-top-style: none; } .sidebar label { padding: 6px 12px; } .sidebar label.highlight { - background-color: gtkmix("@theme_base_color", "@theme_text_color", 0.8); + background-color: gtkmix(gtk("@theme_base_color"), gtk("@theme_text_color"), 0.8); } } %osd, .osd { color: gtk("@theme_fg_color"); border: 1px solid gtk("@borders"); - background-color: gtkalpha("@theme_bg_color",0.8); + background-color: gtkalpha(gtk("@theme_bg_color"),0.8); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; &:backdrop { color: gtk("@theme_unfocused_text_color"); - background-color: gtkalpha("@theme_unfocused_bg_color", 0.8); + background-color: gtkalpha(gtk("@theme_unfocused_bg_color"), 0.8); -gtk-icon-shadow: none; } } %selected_items { background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_selected_fg_color"); &:hover { background-color: gtk("@theme_hovering_selected_bg_color"); color: gtk("@theme_fg_color"); } &:backdrop { background-color: gtk("@theme_unfocused_selected_bg_color"); color: gtk("@theme_unfocused_base_color"); } } %selected_items { background-color: gtk("@theme_selected_bg_color"); border-radius: 0px; @at-root %nobg_selected_items, & { color: gtk("@theme_selected_fg_color"); &:disabled { color: gtk("@insensitive_selected_fg_color"); } &:backdrop { color: gtk("@theme_unfocused_selected_fg_color"); &:disabled { color: gtk("@insensitive_unfocused_selected_fg_color"); } } } } diff --git a/src/gtk3/widgets/_entry.scss b/src/gtk3/widgets/_entry.scss index 32165a7..bc56913 100644 --- a/src/gtk3/widgets/_entry.scss +++ b/src/gtk3/widgets/_entry.scss @@ -1,153 +1,153 @@ @charset "UTF-8"; @mixin entry($t, $fc:gtk("@theme_view_active_decoration_color")) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // @if $t==normal { color: gtk("@theme_text_color"); border-color: gtk("@borders"); background-color: gtk("@theme_base_color"); box-shadow: none; } @if $t==focus { border-color: $fc; } @if $t==insensitive { color: gtk("@insensitive_base_fg_color"); border-color: gtk("@insensitive_borders"); background-color: gtk("@insensitive_base_color"); } @if $t==backdrop { color: gtk("@theme_unfocused_text_color"); border-color: gtk("@unfocused_borders"); background-color: gtk("@theme_unfocused_base_color"); } @if $t==backdrop-insensitive { color: gtk("@theme_unfocused_view_text_color"); border-color: gtk("@unfocused_insensitive_borders"); background-color: gtk("@theme_unfocused_view_bg_color"); } } /**************** * Text Entries * ****************/ %entry, entry { %entry_basic, & { min-height: 30px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: $r; transition: all 200ms $ease-out-quad; @include entry(normal); image { // icons inside the entry &.left { padding-left: 0; padding-right: 6px; } &.right { padding-left: 6px; padding-right: 0; } } // FIXME // undershoot { // &.left { @include undershoot(left); } // &.right { @include undershoot(right); } // } &.flat { &:focus, & { min-height: 0; padding: 2px; @include entry(normal); } } &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); } &:backdrop { @include entry(backdrop); } &:backdrop:disabled { @include entry(backdrop-insensitive); } selection { &:focus, & { @extend %selected_items; }} @each $e_type, $e_color in (error, gtk("@error_color")), (warning, gtk("@warning_color")) { &.#{$e_type} { color: $e_color; border-color: $e_color; background-color: gtkalpha($e_color, 0.5); &:focus { @include entry(focus, $e_color); background-color: gtkalpha($e_color, 0.5); } &:selected, &:selected:focus { background-color: $e_color; } &:backdrop { @if $e_color == gtk("@error_color") { color: gtk("@error_color_backdrop"); border-color: gtk("@error_color_backdrop"); - background-color: gtkalpha("@error_color_backdrop", 0.5); + background-color: gtkalpha(gtk("@error_color_backdrop"), 0.5); } @else if $e_color == gtk("@warning_color") { color: gtk("@warning_color_backdrop"); border-color: gtk("@warning_color_backdrop"); - background-color: gtkalpha("@warning_color_backdrop", 0.5); + background-color: gtkalpha(gtk("@warning_color_backdrop"), 0.5); } } } } image { // entry icons colors color: gtkmix(gtk("@theme_fg_color"),gtk("@theme_text_color"), 0.8); &:hover { color: gtk("@theme_button_decoration_hover"); } &:active { color: gtk("@theme_button_decoration_focus"); } &:backdrop { color: gtkmix(gtk("@theme_unfocused_fg_color"), gtk("@theme_unfocused_fg_color"), 0.8); } } // FIXME // &:drop(active) { // &:focus, & { // border-color: $drop_target_color; // box-shadow: inset 0 0 0 1px $drop_target_color; // } // } } progress { margin: 1px; border-radius: 0; border-width: 0 0 2px; border-color: gtk("@theme_selected_bg_color"); border-style: solid; background-image: none; background-color: transparent; box-shadow: none; &:backdrop { background-color: transparent; border-color: gtk("@theme_unfocused_selected_bg_color"); } } } treeview acceleditor > label { background-color: gtk("@theme_selected_bg_color"); } treeview entry { &.flat, & { border-radius: 0; background-image: none; background-color: gtk("@theme_base_color"); &:focus { border-color: gtk("@theme_view_active_decoration_color"); } } } diff --git a/src/gtk3/widgets/_headerbar.scss b/src/gtk3/widgets/_headerbar.scss index 4b110da..7e7c9d3 100644 --- a/src/gtk3/widgets/_headerbar.scss +++ b/src/gtk3/widgets/_headerbar.scss @@ -1,193 +1,193 @@ @charset "UTF-8"; /*************** * Header bars * ***************/ %titlebar, headerbar { transition: none; padding: 0px 6px; border-width: 0px 0px 1px 0px; border-radius: 3px 3px 0px 0px; border-style: solid; border-color: gtk("@borders"); color: gtk("@theme_titlebar_foreground"); background-image: none; background-color: gtk("@theme_titlebar_background"); &:backdrop { border-color: transparent; background-image: none; background-color: gtk("@theme_titlebar_background_backdrop"); color: gtk("@theme_titlebar_foreground_backdrop"); box-shadow: none; } label { font-weight: normal; &:backdrop { color: gtk("@theme_titlebar_foreground_backdrop"); } } .path-bar button { color: gtk("@theme_titlebar_foreground"); font-weight: normal; &:backdrop { color: gtk("@theme_titlebar_foreground_backdrop"); } } button { transition: none; @include button(undecorated); color: gtk("@theme_titlebar_foreground"); &.flat { @include button(undecorated); color: gtk("@theme_titlebar_foreground"); } &:hover { @include button(hover); color: gtk("@theme_titlebar_foreground"); &:backdrop { @include button(backdrop-hover); } } &:active, &:checked { @include button(active); &:hover { @include button(active-hover); } &:backdrop { background-image: none; background-color: gtk("@theme_titlebar_background_backdrop"); border-color: gtk("@theme_titlebar_background_backdrop"); color: gtk("@theme_titlebar_foreground_backdrop"); &:hover { @include button(backdrop-hover); } } } &.suggested-action { @extend %suggested-action; } &:backdrop { border-color: transparent; background-image: none; background-color: gtk("@theme_titlebar_background_backdrop"); color: gtk("@theme_titlebar_foreground_backdrop"); } &.flat:backdrop, &.flat:backdrop:disabled, &:disabled:backdrop { background-image: none; background-color: gtk("@theme_titlebar_background_backdrop"); color: gtk("@theme_titlebar_foreground_backdrop"); border-color: transparent; } &.flat:disabled { @extend %undecorated_button;; color: gtk("@theme_titlebar_foreground_insensitive"); } &:disabled { background-color: transparent; background-image: none; border-color: transparent; color: gtk("@theme_titlebar_foreground_insensitive"); &:active, &:checked { @include button(insensitive-active); } } } .title { font-weight: normal; padding: 0px 12px; &:backdrop { color: gtk("@theme_titlebar_foreground_backdrop"); } } .subtitle { font-size: smaller; padding: 0 12px; @extend .dim-label; &:backdrop { color: gtk("@theme_titlebar_foreground_backdrop"); } } separator { border-width: 0px; background-color: transparent; background-image: none; border-color: transparent; } &.selection-mode, &.selection-mode headerbar { background-color: gtkmix("@theme_titlebar_background", "@theme_button_decoration_focus", 0.5); separator { background-color: gtk("@theme_button_decoration_focus"); } button:not(.titlebutton) { - background-color: gtkalpha("@theme_button_decoration_focus", 0.5); + background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.5); &:active, &:focus { background-color: gtk("@theme_button_decoration_focus"); } } &.suggested-action { @extend %suggested-action; } .subtitle:link { @extend *:link:selected; } .selection-menu { padding: 4px 6px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); -gtk-icon-shadow: none; } } } .tiled &, .maximized & { border-radius: 0; // squared corners when the window is max'd or tiled } } headerbar { // add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height entry, spinbutton, separator, button { margin-top: 3px; margin-bottom: 3px; } } %suggested-action { background-image: none; background-color: gtk("@theme_button_decoration_focus"); &:hover { background-color: gtk("@theme_button_decoration_hover"); color: gtk("@theme_button_foreground_normal"); } &:disabled { background-color: transparent; background-image: none; color: gtk("@theme_titlebar_foreground_insensitive"); &:active, &:checked { @include button(insensitive-active); } } &:backdrop { background-color: gtk("@theme_titlebar_background_backdrop"); border-color: transparent; color: gtk("@theme_titlebar_foreground_backdrop"); &:disabled { color: gtk("@theme_titlebar_foreground_insensitive_backdrop"); } } } diff --git a/src/gtk3/widgets/_infobar.scss b/src/gtk3/widgets/_infobar.scss index f63e817..f252867 100644 --- a/src/gtk3/widgets/_infobar.scss +++ b/src/gtk3/widgets/_infobar.scss @@ -1,70 +1,70 @@ @charset "UTF-8"; /************** * GtkInfoBar * **************/ infobar { border-style: none; border-bottom: 1px solid gtk("@borders"); background-color: gtk("@theme_bg_color"); background-image: none; &:backdrop { border-bottom: 1px solid gtk("@unfocused_borders"); } } .info, .question, .warning, .error { background-color: gtk("@theme_bg_color"); background-image: none; color: gtk("@warning_color"); text-shadow: none; &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@warning_color_backdrop"); } button { box-shadow: none; background-image:none; - background-color: gtkalpha("@warning_color", 0.5); - border-color: gtkalpha("@warning_color", 0.5); + background-color: gtkalpha(gtk("@warning_color"), 0.5); + border-color: gtkalpha(gtk("@warning_color"), 0.5); color: gtk("@theme_button_foreground_normal"); &:hover { - background-color: gtkalpha("@warning_color", 0.25); + background-color: gtkalpha(gtk("@warning_color"), 0.25); border-color: gtk("@warning_color"); } &:active, &:checked { background-color: gtk("@warning_color"); color: gtk("@theme_bg_color"); border-color: gtk("@warning_color"); } &:disabled { - background-color: gtkalpha("@warning_color_insensitive", 0.5); - border-color: gtkalpha("@warning_color_insensitive", 0.5); + background-color: gtkalpha(gtk("@warning_color_insensitive"), 0.5); + border-color: gtkalpha(gtk("@warning_color_insensitive"), 0.5); color: gtk("@theme_button_foreground_insensitive"); } &:backdrop { - background-color: gtkalpha("@warning_color_backdrop", 0.5); - border-color: gtkalpha("@warning_color_backdrop", 0.5); + background-color: gtkalpha(gtk("@warning_color_backdrop"), 0.5); + border-color: gtkalpha(gtk("@warning_color_backdrop"), 0.5); color: gtk("@theme_button_foreground_backdrop"); &:active, &:checked { background-color: gtk("@warning_color_backdrop"); color: gtk("@theme_unfocused_bg_color"); border-color: gtk("@warning_color_backdrop"); } &:disabled { - background-color: gtkalpha("@warning_color_insensitive_backdrop", 0.5); - border-color: gtkalpha("@warning_color_insensitive_backdrop", 0.5); + background-color: gtkalpha(gtk("@warning_color_insensitive_backdrop"), 0.5); + border-color: gtkalpha(gtk("@warning_color_insensitive_backdrop"), 0.5); color: gtk("@theme_button_foreground_backdrop_insensitive"); } &:disabled:active, &:disabled:checked { background-color: gtk("@warning_color_insensitive_backdrop"); color: gtk("@insensitive_unfocused_bg_color"); border-color: gtk("@warning_color_insensitive_backdrop"); } } } } diff --git a/src/gtk3/widgets/_link.scss b/src/gtk3/widgets/_link.scss index bc9f593..c107fb5 100644 --- a/src/gtk3/widgets/_link.scss +++ b/src/gtk3/widgets/_link.scss @@ -1,57 +1,57 @@ @charset "UTF-8"; /********* * Links * *********/ %link, *:link { color: gtk("@link_color"); &:visited { color: gtk("@link_visited_color"); *:selected & { color: gtkmix(gtk("@theme_selected_fg_color"), gtk("@theme_selected_bg_color"), 0.6); } } &:hover { color: gtkshade("@link_color", 1.1); *:selected & { color: gtkmix(gtk("@theme_selected_fg_color"), gtk("@theme_selected_bg_color"), 0.9); } } &:active { color: gtk("@link_color"); *:selected & { color: gtkmix(gtk("@theme_selected_fg_color"), gtk("@theme_selected_bg_color"), 0.8); } } &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { color: gtk("@theme_unfocused_selected_bg_color"); } @at-root %link_selected, &:selected, *:selected & { - color: gtkmix("@theme_selected_fg_color", "@theme_selected_bg_color", 0.8); + color: gtkmix(gtk("@theme_selected_fg_color"), gtk("@theme_selected_bg_color"), 0.8); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } > label { @extend %link; text-decoration-line: underline; } } diff --git a/src/gtk3/widgets/_notebook.scss b/src/gtk3/widgets/_notebook.scss index dcbbf27..e272230 100644 --- a/src/gtk3/widgets/_notebook.scss +++ b/src/gtk3/widgets/_notebook.scss @@ -1,218 +1,218 @@ @charset "UTF-8"; /***************** * Notebooks and * * Tabs * *****************/ /************* * Notebooks * *************/ notebook { &.frame { border: none; padding: 0px; box-shadow: inset 0px 0px 0px 1px gtk("@borders"); } > header { padding: 0px; border: none; background-color: gtk("@theme_bg_color"); //box-shadow: inset 0 -1px gtk("@borders"); &.top { box-shadow: inset 0 -1px gtk("@borders"); // border &:backdrop { box-shadow: inset 0 -1px gtk("@unfocused_borders"); } } &.bottom { box-shadow: inset 0 1px gtk("@borders"); &:backdrop { box-shadow: inset 0 1px gtk("@unfocused_borders"); } } &.right { box-shadow: inset 1px 0 gtk("@borders"); &:backdrop { box-shadow: inset 1px 0 gtk("@unfocused_borders"); } } &.left { box-shadow: inset -1px 0 gtk("@borders"); &:backdrop { box-shadow: inset -1px 0 gtk("@unfocused_borders"); } } &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); } tabs { margin: 0px; } @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), (bottom,top,0px 0px 3px 3px), (left,right, 3px 0px 0px 3px), (right,left, 0px 3px 3px 0px) { &.#{$_tab} { > tabs { > tab { padding: 4px 6px; - border: 1px solid gtkalpha("@theme_fg_color", 0.2); - background-color: gtkalpha("@theme_fg_color", 0.2); + border: 1px solid gtkalpha(gtk("@theme_fg_color"), 0.2); + background-color: gtkalpha(gtk("@theme_fg_color"), 0.2); border-radius: #{$_radius}; border-#{$_border}-color: transparent; &:hover, &.prelight-page { - background-color: gtkalpha("@theme_selected_bg_color", 0.2); - border-color: gtkalpha("@theme_selected_bg_color", 0.2); + background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.2); + border-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.2); } &:checked { border-color: gtk("@borders"); border-#{$_border}-color: gtk("@theme_bg_color"); background-color: gtk("@theme_bg_color"); &:backdrop { border-color: gtk("@unfocused_borders"); border-#{$_border}-color: gtk("@theme_unfocused_bg_color"); background-color: gtk("@theme_unfocused_bg_color"); } } } } } } @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), (bottom, right, -3px 0px 0px 0px), (left, bottom, 0px -3px 0px 0px), (right, bottom, 0px -3px 0px 0px) { &.#{$_tab} { > tabs { > tab { &.reorderable-page { border-width: 3px; border-style: solid; border-color: transparent; background-color: gtk("@theme_bg_color"); background-clip: padding-box; border-#{$_border}-width: 1px; border-#{$_border}-color: gtk("@borders"); box-shadow: inset #{$_shadow1} gtk("@theme_bg_color"); &:hover, &.prelight-page { - box-shadow: inset 0px -3px 0px 0px gtkalpha("@theme_selected_bg_color",0.2), inset $_shadow1 gtk("@theme_bg_color"); + box-shadow: inset 0px -3px 0px 0px gtkalpha(gtk("@theme_selected_bg_color"),0.2), inset $_shadow1 gtk("@theme_bg_color"); } &:checked { box-shadow: inset 0px -3px 0px 0px gtk("@theme_selected_bg_color"), inset $_shadow1 gtk("@theme_bg_color"); &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); border-color: transparent; border-#{$_border}-color: gtk("@unfocused_borders"); box-shadow:none; } } &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); border-#{$_border}-color: gtk("@unfocused_borders"); box-shadow:none; } } } } } } &.top > tabs > arrow { @extend %notebook_vert_arrows; border-top-style: none; } &.bottom > tabs > arrow { @extend %notebook_vert_arrows; border-bottom-style: none; } @at-root %notebook_vert_arrows { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } } &.left > tabs > arrow { @extend %notebook_horz_arrows; border-left-style: none; } &.right > tabs > arrow { @extend %notebook_horz_arrows; border-right-style: none; } @at-root %notebook_horz_arrows { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } > tabs > arrow { @extend %button_basic; @extend %button_basic.flat; min-height: 16px; min-width: 16px; border-radius: 0; &:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; } &:disabled { @include button(undecorated); } } // colors the button like the label, overridden otherwise button.flat { padding: 0; margin: 4px; // FIXME: generalize .small-button? min-width: 12px; min-height: 12px; border: 0px solid; border-radius: 50%; color: gtk("@theme_bg_color"); background-color: gtk("@borders"); background-image: none; &:hover { background-color: $error_color; } &:active { background-color: $error_color;} &:backdrop { background-color: gtk("@unfocused_borders"); color: gtk("@theme_unfocused_bg_color"); } } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks background-color: transparent; border-style: solid; border-color: gtk("@borders"); border-width: 0px; } } diff --git a/src/gtk3/widgets/_progressbar.scss b/src/gtk3/widgets/_progressbar.scss index 9891fd8..2d5b07f 100644 --- a/src/gtk3/widgets/_progressbar.scss +++ b/src/gtk3/widgets/_progressbar.scss @@ -1,145 +1,145 @@ @charset "UTF-8"; /***************** * Progress bars * *****************/ progressbar { // sizing &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } // FIXME: insensitive state missing and some other state should be set probably font-size: smaller; color: gtkalpha(gtk("@theme_button_foreground_normal"), 0.3); trough { border: 0px solid transparent; border-radius: $r; background-color: gtkalpha(gtk("@theme_button_foreground_normal"),0.3); } - &:backdrop trough { background-color: gtkalpha("@theme_button_foreground_backdrop",0.3); } // looks like states are not passed to the trough component here + &:backdrop trough { background-color: gtkalpha(gtk("@theme_button_foreground_backdrop"),0.3); } // looks like states are not passed to the trough component here progress { background-color: gtk("@theme_selected_bg_color"); border: 0px solid transparent; border-radius: 3px; box-shadow: none; //needed for clipping } &:backdrop progress { background-color: gtk("@theme_unfocused_selected_bg_color_alt"); } // states not passed here as well &.osd { // progressbar.osd used for epiphany page loading progress background-color: transparent; } } treeview.view { &.progressbar { border: 0px solid transparent; border-radius: $r; background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_selected_fg_color"); background-image: none; &:selected { &:focus, & { background-color: gtkalpha(gtk("@theme_selected_bg_color"),0.25); } } } &.trough { background-color: $trough_color; &:selected { &:focus, & { - background-color: gtkalpha("@theme_selected_fg_color",0.3); + background-color: gtkalpha(gtk("@theme_selected_fg_color"),0.3); } } } } /************* * Level Bar * *************/ levelbar { block { min-width: 32px; min-height: 6px; } &.vertical block { min-width: 6px; min-height: 32px; } trough { border: 1px solid; padding: 2px; border-radius: 3px; @include entry(normal); &:backdrop { @include entry(backdrop); } } &.horizontal.discrete block { margin: 0 1px; } &.vertical.discrete block { margin: 1px 0; } block:not(.empty) { border: 1px solid gtk("@theme_selected_bg_color"); background-color: gtk("@theme_selected_bg_color"); box-shadow: none; border-radius: 1px; &:backdrop { border-color: gtk("@theme_unfocused_selected_bg_color_alt"); background-color: gtk("@theme_unfocused_selected_bg_color_alt"); } } block { &.low { border-color: gtk("@warning_color"); background-color: gtk("@warning_color"); &:backdrop { background-color: gtk("@warning_color_backdrop"); border-color: gtk("@warning_color_backdrop"); } } &.high { border-color: gtk("@success_color"); background-color: gtk("@success_color"); &:backdrop { background-color: gtk("@success_color_backdrop"); border-color: gtk("@success_color_backdrop"); } } &.full { border-color: gtk("@success_color"); background-color: gtk("@success_color"); &:backdrop { background-color: gtk("@success_color_backdrop"); border-color: gtk("@success_color_backdrop"); } } &.empty { background-color: gtkalpha(gtk("@theme_button_foreground_normal"),0.3); border-color: transparent; box-shadow: none; &:backdrop { - background-color: gtkalpha("@theme_button_foreground_insensitive",0.3); + background-color: gtkalpha(gtk("@theme_button_foreground_insensitive"),0.3); } } } } diff --git a/src/gtk3/widgets/_scale.scss b/src/gtk3/widgets/_scale.scss index 71fd92f..924bb1f 100644 --- a/src/gtk3/widgets/_scale.scss +++ b/src/gtk3/widgets/_scale.scss @@ -1,99 +1,99 @@ @charset "UTF-8"; /************ * GtkScale * ************/ scale { &.fine-tune { &.trough { margin: 8px; border-radius: $r; } } slider { min-width: 18px; min-height: 18px; background-color: gtk("@theme_button_background_normal"); border: 1px solid gtk("@borders"); border-radius: 50%; box-shadow: none; margin: -9px; &:hover { border-style: solid; border-width: 2px; border-color: gtk("@theme_button_decoration_hover"); border-radius: 50%; // needed for double marks scales &:backdrop { background-color: gtk("@theme_button_background_backdrop"); border-color: gtk("@theme_button_decoration_hover_insensitive"); } } &:disabled { border-style: solid; // needed for double marks scales or they'll get border-radius: 50%; // overridden - background-color: gtkalpha("@theme_button_background_insensitive", 100.0); + background-color: gtkalpha(gtk("@theme_button_background_insensitive"), 100.0); opacity: 1.0; border-color: gtk("@insensitive_borders"); &:backdrop { - background-color: gtkalpha("@theme_button_background_backdrop_insensitive", 100.0); + background-color: gtkalpha(gtk("@theme_button_background_backdrop_insensitive"), 100.0); border-color: gtk("@unfocused_insensitive_borders"); } } &:active { border: 2px solid gtk("@theme_button_decoration_focus"); &:backdrop { background-color: gtk("@theme_button_background_normal"); border-color: gtk("@theme_button_decoration_focus_backdrop"); } } &:backdrop { background-color: gtk("@theme_button_background_backdrop"); border-color: gtk("@unfocused_borders"); } } trough { min-width: 6px; min-height: 6px; margin: 9px; border: 0px solid; border-radius: $r; background-color: $trough_color; box-shadow: none; &:disabled, &.vertical:disabled { border-color: $trough_color_insensitive; background-color: $trough_color_insensitive; box-shadow: none; &:backdrop { background-color: $trough_color_backdrop_insensitive; border-color: $trough_color_backdrop_insensitive; } } &:backdrop { background-color: $trough_color_backdrop; border-color: $trough_color_backdrop; } } highlight { border: 0px solid; border-radius: 3px; background-color: gtk("@theme_selected_bg_color"); border-color: gtk("@theme_selected_bg_color"); &.vertical { background-color: gtk("@theme_selected_bg_color"); border-color: gtk("@theme_selected_bg_color"); } &:disabled { background-color: gtk("@insensitive_selected_bg_color"); } &:backdrop { background-color: gtk("@theme_unfocused_selected_bg_color"); border-color: gtk("@theme_unfocused_selected_bg_color"); &:disabled { background-color: gtk("@insensitive_unfocused_selected_bg_color"); } } } } diff --git a/src/gtk3/widgets/_scrollbar.scss b/src/gtk3/widgets/_scrollbar.scss index 363232c..6f9237c 100644 --- a/src/gtk3/widgets/_scrollbar.scss +++ b/src/gtk3/widgets/_scrollbar.scss @@ -1,134 +1,134 @@ @charset "UTF-8"; /************** * Scrollbars * **************/ scrollbar { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; background-color: gtk("@theme_bg_color"); border-width: 0px 0px; border-color: gtk("@theme_bg_color"); margin: 5px; button { min-width: 14px; min-height: 14px; margin: 0px; padding: 0px 0px; border: none; border-radius: 0px; background-image: none; background-color: transparent; color: transparent; box-shadow: none; &:hover { border: none; background-image: none; background-color: gtk("@theme_bg_color"); color: transparent; } &:active, &:active:hover { border: none; background-image: none; background-color: gtk("@theme_bg_color"); color: transparent; } &:disabled { border: none; background-color: gtk("@theme_bg_color"); background-image: none; color: transparent; } } // Overlay Scrollbars &.dragging, // if this isn't set, the scrollbars don't update their size correctly &.hovering { opacity: 0.9910; } // probably a gtk bug &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // &.overlay-indicator:not(.dragging):not(.hovering) { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } &.overlay-indicator { background: none; } trough { //margin: 0px; transition-duration: 0.1s; min-width: 3px; min-height: 14px; border-radius: 8px; background-color: transparent; } &:hover { trough { background-color: $trough_color_backdrop; min-width: 6px; } slider { min-width: 6px; background-color: gtk("@theme_button_decoration_hover"); } } &.horizontal trough { //margin: 0px; transition-duration: 0.1s; min-width: 14px; min-height: 3px; border-radius: 8px; background-color: transparent; } &.horizontal:hover { &.horizontal trough { background-color: $trough_color_backdrop; min-height: 6px; } &.horizontal slider { min-height: 6px; background-color: gtk("@theme_button_decoration_hover"); } } slider { //margin: 0px; transition-duration: 0.1s; min-width: 3px; min-height: 30px; border-radius: 8px; background-clip: padding-box; - background-color: gtkalpha("@theme_fg_color", 0.5); + background-color: gtkalpha(gtk("@theme_fg_color"), 0.5); &:hover { min-width: 6px; background-color: gtk("@theme_button_decoration_hover"); } } &.horizontal slider { transition-duration: 0.1s; min-width: 30px; min-height: 3px; border-radius: 8px; background-clip: padding-box; - background-color: gtkalpha("@theme_fg_color", 0.5); + background-color: gtkalpha(gtk("@theme_fg_color"), 0.5); &:hover { min-height: 6px; background-color: gtk("@theme_button_decoration_hover"); } } } diff --git a/src/gtk3/widgets/_switch.scss b/src/gtk3/widgets/_switch.scss index 7cf8e0a..19da0c9 100644 --- a/src/gtk3/widgets/_switch.scss +++ b/src/gtk3/widgets/_switch.scss @@ -1,54 +1,54 @@ @charset "UTF-8"; /********** * Switch * **********/ switch { margin: 2px; font-weight: bold; font-size: smaller; min-width: 48px; min-height: 24px; border: 0px solid; border-radius: 12px; color: transparent; - background-color: gtkalpha("@theme_button_foreground_normal",0.3); + background-color: gtkalpha(gtk("@theme_button_foreground_normal"),0.3); text-shadow: none; &:checked { background-color: gtk("@theme_selected_bg_color"); } &:backdrop { - background-color: gtkalpha("@theme_button_foreground_backdrop", 0.3); + background-color: gtkalpha(gtk("@theme_button_foreground_backdrop"), 0.3); text-shadow: none; &:checked { background-color: gtk("@theme_unfocused_selected_bg_color_alt"); } } slider { min-width: 22px; min-height: 22px; border: 1px solid; border-radius: 11px; background-color: gtk("@theme_bg_color"); border-color: gtk("@borders"); } &:hover slider { border-color: gtk("@theme_button_decoration_hover"); } &:disabled slider { background-color: gtk("@insensitive_bg_color"); } &:backdrop { slider { background-color: gtk("@theme_unfocused_bg_color"); } &:disabled slider { background-color: gtk("@insensitive_unfocused_bg_color"); } } } diff --git a/src/gtk3/widgets/_treeview.scss b/src/gtk3/widgets/_treeview.scss index 2c22b48..5e90174 100644 --- a/src/gtk3/widgets/_treeview.scss +++ b/src/gtk3/widgets/_treeview.scss @@ -1,181 +1,181 @@ @charset "UTF-8"; @mixin item-hover-middle { @if $new-highlight { background-color: gtk("@theme_selected_bg_color"); border-left-color: gtk("@theme_selected_fg_color"); border-top-color: gtk("@theme_selected_fg_color"); } @else { - background-color: gtkalpha("@theme_selected_bg_color", 0.3); + background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.3); border-left-color: gtk("@theme_fg_color"); border-top-color: gtk("@theme_fg_color"); } } @mixin item-selected-middle { @if $new-highlight { background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3); color: gtk("@theme_button_foreground_active"); border: 1px solid gtk("@theme_button_decoration_focus"); border-left: 0; border-right: 0; border-radius: 0px; } @else { background-color: gtk("@theme_selected_bg_color"); border-left-color: gtk("@theme_selected_fg_color"); border-top-color: gtk("@theme_selected_fg_color"); } } @mixin item-selected-middle-backdrop { @if $new-highlight { background-color: gtkalpha(gtk("@theme_button_decoration_focus_backdrop"), 0.3); color: gtk("@theme_button_foreground_active_backdrop"); border: 1px solid gtk("@theme_button_decoration_focus_backdrop"); border-left: 0; border-right: 0; border-radius: 0px; } @else { background-color: gtk("@theme_unfocused_selected_bg_color"); border-left-color: gtk("@theme_unfocused_selected_fg_color"); border-top-color: gtk("@theme_unfocused_selected_fg_color"); } } /************** * Tree Views * **************/ treeview.view { -GtkTreeView-grid-line-width: 0; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; border-left-color: gtk("@borders"); // this is actually the tree lines color, border-top-color: transparent; // while this is the grid lines color, better then nothing rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { border-radius: 0; } // rest border radius in lists &:hover { @include item-hover-middle(); } &:selected { @include item-selected-middle(); } &:backdrop:selected { @include item-selected-middle-backdrop(); } &:disabled { color: gtk("@insensitive_borders"); &:selected { color: gtk("@insensitive_selected_fg_color"); &:backdrop { color: gtk("@insensitive_unfocused_selected_fg_color"); } } &:backdrop { color: gtk("@unfocused_insensitive_borders"); } } &.separator { min-height: 2px; color: gtk("@borders"); } &.separator:backdrop { color: gtk("@unfocused_borders"); } &:backdrop { border-left-color: gtk("@unfocused_borders"); } &:drop(active) { border-style: solid none; border-width: 1px; border-color: gtk("@theme_button_decoration_hover"); } &.expander { // GtkTreeView uses the larger of the expander’s min-width and min-height min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); color: gtk("@theme_fg_color"); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }; &:hover { color: gtk("@theme_button_decoration_hover"); } &:selected { color: gtk("@theme_selected_fg_color"); } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:selected { color: gtk("@theme_selected_fg_color"); } &:backdrop { color: gtk("@theme_unfocused_base_color"); } } &:backdrop { color: gtk("@theme_unfocused_base_color"); } } header { button { @extend %column_header_button; color: gtk("@theme_button_foreground_normal"); background-color: gtk("@theme_button_background_normal"); text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: gtk("@theme_button_foreground_normal"); - background-color: gtkalpha("@theme_button_decoration_hover", 0.5); + background-color: gtkalpha(gtk("@theme_button_decoration_hover"), 0.5); box-shadow: none; transition: none; //I shouldn't need this } &:active { @extend %column_header_button; color: gtk("@theme_button_foreground_normal"); - background-color: gtkalpha("@theme_button_decoration_hover", 0.5); + background-color: gtkalpha(gtk("@theme_button_decoration_hover"), 0.5); transition: none; //I shouldn't need this } } button:last-child { &:backdrop, & { border-right-style: none; }} } button.dnd, header.button.dnd { // for treeview-like derive widgets &:active, &:selected, &:hover, & { padding: 0 6px; color: gtk("@theme_selected_fg_color"); background-image: none; background-color: gtk("@theme_selected_bg_color"); border-style: none; border-radius: 0; box-shadow: none; text-shadow: none; transition: none; } } } %column_header_button { padding: 6px; border-style: none solid solid none; border-radius: 0; background-image: none; border-color: gtk("@borders"); text-shadow: none; &:disabled { border-color: gtk("@insensitive_borders"); color: gtk("@theme_button_foreground_insensitive"); background-color: gtk("@theme_button_background_insensitive"); background-image: none; } &:backdrop { border-color: gtk("@unfocused_borders"); border-style: none solid solid none; color: gtk("@theme_button_foreground_backdrop"); background-image: none; background-color: gtk("@theme_button_background_backdrop"); &:disabled { border-color: gtk("@unfocused_insensitive_borders"); background-image: none; background-color: gtk("@theme_button_background_backdrop_insensitive"); color: gtk("@theme_button_foreground_backdrop_insensitive"); } } }