mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-04 13:13:04 +00:00
update
This commit is contained in:
vinceliuice
parent
6bb490fb89
commit
1cfb473c9e
@ -2,7 +2,8 @@ $variant: 'dark';
|
||||
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/drawing-3.0';
|
||||
@import '../../sass/gtk/common-3.0';
|
||||
@import '../../sass/gtk/apps-3.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
@import '../../sass/gtk/colors-other';
|
||||
|
||||
@ -2,7 +2,8 @@ $variant: 'light';
|
||||
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/drawing-3.0';
|
||||
@import '../../sass/gtk/common-3.0';
|
||||
@import '../../sass/gtk/apps-3.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
@import '../../sass/gtk/colors-other';
|
||||
|
||||
@ -3,7 +3,7 @@ $variant: 'dark';
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/drawing-4.0';
|
||||
@import '../../sass/gtk/common-4.0';
|
||||
@import '../../sass/gtk/apps-4.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
|
||||
@ -3,7 +3,7 @@ $variant: 'light';
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/drawing-4.0';
|
||||
@import '../../sass/gtk/common-4.0';
|
||||
@import '../../sass/gtk/apps-4.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
|
||||
@ -136,7 +136,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
|
||||
.calendar-day,
|
||||
.calendar-day-base {
|
||||
@extend %numeric;
|
||||
// @extend %smaller;
|
||||
@extend %smaller;
|
||||
text-align: center;
|
||||
width: if($font_size == 'normal', 2.8em, 2.4em);
|
||||
height: if($font_size == 'normal', 2.8em, 2.4em);
|
||||
|
||||
@ -65,7 +65,6 @@
|
||||
min-height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
margin-right: 6px;
|
||||
border: none !important;
|
||||
border-radius: $modal_radius - $base_padding * 2;
|
||||
font-weight: bold;
|
||||
@ -79,7 +78,6 @@
|
||||
|
||||
&:last-child {
|
||||
@extend %last_dialog_button;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
.toggle-switch {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
border-radius: $circular_radius;
|
||||
background-gradient-direction: vertical;
|
||||
background-gradient-start: rgba($fg_color, 0.25);
|
||||
background-gradient-end: rgba($fg_color, 0.35);
|
||||
@ -23,6 +24,7 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: white;
|
||||
border-radius: $circular_radius;
|
||||
box-shadow: 0 2px 4px transparentize(black, .9);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
122
src/sass/gtk/_colors-other.scss
Normal file
122
src/sass/gtk/_colors-other.scss
Normal file
@ -0,0 +1,122 @@
|
||||
//WM
|
||||
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
|
||||
$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
|
||||
|
||||
@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
|
||||
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
|
||||
|
||||
@define-color wm_bg #{"" + opacify($header_bg, 1)};
|
||||
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
|
||||
|
||||
@define-color wm_border_focused #{"" + $wm_borders_focused};
|
||||
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
|
||||
|
||||
@define-color wm_highlight alpha(#{white}, 0.12);
|
||||
@define-color wm_shadow alpha(#{black}, 0.75);
|
||||
|
||||
//WM Buttons
|
||||
|
||||
// Close
|
||||
@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
|
||||
@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
|
||||
@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
|
||||
|
||||
@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
|
||||
|
||||
// Minimize, Maximize
|
||||
@define-color wm_button_hover_bg #{"" + $bg_color};
|
||||
@define-color wm_button_active_bg #{"" + $bg_color};
|
||||
|
||||
@define-color wm_button_hover_border #{"" + $solid_borders_color};
|
||||
|
||||
@define-color wm_icon_bg #{"" + $alt_fg_color};
|
||||
@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
|
||||
@define-color wm_icon_hover_bg #{"" + $fg_color};
|
||||
@define-color wm_icon_active_bg #{"" + $fg_color};
|
||||
|
||||
// Titlebar
|
||||
@define-color titlebar_gradient_a #{"" + $header_bg};
|
||||
@define-color titlebar_gradient_b #{"" + $header_bg};
|
||||
|
||||
//
|
||||
// Budgie-desktop specific indicator colours
|
||||
//
|
||||
|
||||
// unfocused window 'dot(s)'
|
||||
@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
|
||||
// focused window 'line'
|
||||
@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
|
||||
|
||||
// group-ed and unfocused window 'line(s)'
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
|
||||
|
||||
// attention 'dot'
|
||||
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
|
||||
// because of lacking specific style-class on 'needs_attention' state,
|
||||
// so use warning orange dot instead.
|
||||
@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
|
||||
|
||||
//
|
||||
// Color Palette Definitions for compatibility with Granite.
|
||||
//
|
||||
|
||||
//* Strawberry *
|
||||
@define-color STRAWBERRY_100 #{#FF9262};
|
||||
@define-color STRAWBERRY_300 #{#FF793E};
|
||||
@define-color STRAWBERRY_500 #{#F15D22};
|
||||
@define-color STRAWBERRY_700 #{#CF3B00};
|
||||
@define-color STRAWBERRY_900 #{#AC1800};
|
||||
//* Orange *
|
||||
@define-color ORANGE_100 #{#FFDB91};
|
||||
@define-color ORANGE_300 #{#FFCA40};
|
||||
@define-color ORANGE_500 #{#FAA41A};
|
||||
@define-color ORANGE_700 #{#DE8800};
|
||||
@define-color ORANGE_900 #{#C26C00};
|
||||
//* Banana *
|
||||
@define-color BANANA_100 #{#FFFFA8};
|
||||
@define-color BANANA_300 #{#FFFA7D};
|
||||
@define-color BANANA_500 #{#FFCE51};
|
||||
@define-color BANANA_700 #{#D1A023};
|
||||
@define-color BANANA_900 #{#A27100};
|
||||
//* Lime *
|
||||
@define-color LIME_100 #{#A2F3BE};
|
||||
@define-color LIME_300 #{#8ADBA6};
|
||||
@define-color LIME_500 #{#73C48F};
|
||||
@define-color LIME_700 #{#479863};
|
||||
@define-color LIME_900 #{#1C6D38};
|
||||
//* Blueberry *
|
||||
@define-color BLUEBERRY_100 #{#94A6FF};
|
||||
@define-color BLUEBERRY_300 #{#6A7CE0};
|
||||
@define-color BLUEBERRY_500 #{#3F51B5};
|
||||
@define-color BLUEBERRY_700 #{#213397};
|
||||
@define-color BLUEBERRY_900 #{#031579};
|
||||
//* Grape *
|
||||
@define-color GRAPE_100 #{#D25DE6};
|
||||
@define-color GRAPE_300 #{#B84ACB};
|
||||
@define-color GRAPE_500 #{#9C27B0};
|
||||
@define-color GRAPE_700 #{#830E97};
|
||||
@define-color GRAPE_900 #{#6A007E};
|
||||
//* Cocoa *
|
||||
@define-color COCOA_100 #{#9F9792};
|
||||
@define-color COCOA_300 #{#7B736E};
|
||||
@define-color COCOA_500 #{#574F4A};
|
||||
@define-color COCOA_700 #{#463E39};
|
||||
@define-color COCOA_900 #{#342C27};
|
||||
//* Silver *
|
||||
@define-color SILVER_100 #{#EEE};
|
||||
@define-color SILVER_300 #{#CCC};
|
||||
@define-color SILVER_500 #{#AAA};
|
||||
@define-color SILVER_700 #{#888};
|
||||
@define-color SILVER_900 #{#666};
|
||||
//* Slate *
|
||||
@define-color SLATE_100 #{#888};
|
||||
@define-color SLATE_300 #{#666};
|
||||
@define-color SLATE_500 #{#444};
|
||||
@define-color SLATE_700 #{#222};
|
||||
@define-color SLATE_900 #{#111};
|
||||
//* Black *
|
||||
@define-color BLACK_100 #{#474341};
|
||||
@define-color BLACK_300 #{#403C3A};
|
||||
@define-color BLACK_500 #{#393634};
|
||||
@define-color BLACK_700 #{#33302F};
|
||||
@define-color BLACK_900 #{#2B2928};
|
||||
@ -37,131 +37,3 @@ $theme_text: currentColor;
|
||||
|
||||
/* Very contrasty background for text views (@theme_text_color foreground) */
|
||||
@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
|
||||
|
||||
//WM
|
||||
|
||||
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
|
||||
$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
|
||||
|
||||
@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
|
||||
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
|
||||
|
||||
@define-color wm_bg #{"" + opacify($header_bg, 1)};
|
||||
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
|
||||
|
||||
@define-color wm_border_focused #{"" + $wm_borders_focused};
|
||||
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
|
||||
|
||||
@define-color wm_highlight alpha(#{white}, 0.12);
|
||||
@define-color wm_shadow alpha(#{black}, 0.75);
|
||||
|
||||
//WM Buttons
|
||||
|
||||
// Close
|
||||
@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
|
||||
@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
|
||||
@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
|
||||
|
||||
@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
|
||||
|
||||
// Minimize, Maximize
|
||||
@define-color wm_button_hover_bg #{"" + $bg_color};
|
||||
@define-color wm_button_active_bg #{"" + $bg_color};
|
||||
|
||||
@define-color wm_button_hover_border #{"" + $solid_borders_color};
|
||||
|
||||
@define-color wm_icon_bg #{"" + $alt_fg_color};
|
||||
@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
|
||||
@define-color wm_icon_hover_bg #{"" + $fg_color};
|
||||
@define-color wm_icon_active_bg #{"" + $fg_color};
|
||||
|
||||
// Titlebar
|
||||
@define-color titlebar_gradient_a #{"" + $header_bg};
|
||||
@define-color titlebar_gradient_b #{"" + $header_bg};
|
||||
|
||||
//
|
||||
// Budgie-desktop specific indicator colours
|
||||
//
|
||||
|
||||
// unfocused window 'dot(s)'
|
||||
@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
|
||||
// focused window 'line'
|
||||
@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
|
||||
|
||||
// group-ed and unfocused window 'line(s)'
|
||||
@if $gnome_version == 'old' {
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
|
||||
} @else {
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + color-mix(in srgb, $selected_bg_color 35%, $header_bg)};
|
||||
}
|
||||
|
||||
// attention 'dot'
|
||||
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
|
||||
// because of lacking specific style-class on 'needs_attention' state,
|
||||
// so use warning orange dot instead.
|
||||
@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
|
||||
|
||||
//
|
||||
// Color Palette Definitions for compatibility with Granite.
|
||||
//
|
||||
|
||||
//* Strawberry *
|
||||
@define-color STRAWBERRY_100 #{#FF9262};
|
||||
@define-color STRAWBERRY_300 #{#FF793E};
|
||||
@define-color STRAWBERRY_500 #{#F15D22};
|
||||
@define-color STRAWBERRY_700 #{#CF3B00};
|
||||
@define-color STRAWBERRY_900 #{#AC1800};
|
||||
//* Orange *
|
||||
@define-color ORANGE_100 #{#FFDB91};
|
||||
@define-color ORANGE_300 #{#FFCA40};
|
||||
@define-color ORANGE_500 #{#FAA41A};
|
||||
@define-color ORANGE_700 #{#DE8800};
|
||||
@define-color ORANGE_900 #{#C26C00};
|
||||
//* Banana *
|
||||
@define-color BANANA_100 #{#FFFFA8};
|
||||
@define-color BANANA_300 #{#FFFA7D};
|
||||
@define-color BANANA_500 #{#FFCE51};
|
||||
@define-color BANANA_700 #{#D1A023};
|
||||
@define-color BANANA_900 #{#A27100};
|
||||
//* Lime *
|
||||
@define-color LIME_100 #{#A2F3BE};
|
||||
@define-color LIME_300 #{#8ADBA6};
|
||||
@define-color LIME_500 #{#73C48F};
|
||||
@define-color LIME_700 #{#479863};
|
||||
@define-color LIME_900 #{#1C6D38};
|
||||
//* Blueberry *
|
||||
@define-color BLUEBERRY_100 #{#94A6FF};
|
||||
@define-color BLUEBERRY_300 #{#6A7CE0};
|
||||
@define-color BLUEBERRY_500 #{#3F51B5};
|
||||
@define-color BLUEBERRY_700 #{#213397};
|
||||
@define-color BLUEBERRY_900 #{#031579};
|
||||
//* Grape *
|
||||
@define-color GRAPE_100 #{#D25DE6};
|
||||
@define-color GRAPE_300 #{#B84ACB};
|
||||
@define-color GRAPE_500 #{#9C27B0};
|
||||
@define-color GRAPE_700 #{#830E97};
|
||||
@define-color GRAPE_900 #{#6A007E};
|
||||
//* Cocoa *
|
||||
@define-color COCOA_100 #{#9F9792};
|
||||
@define-color COCOA_300 #{#7B736E};
|
||||
@define-color COCOA_500 #{#574F4A};
|
||||
@define-color COCOA_700 #{#463E39};
|
||||
@define-color COCOA_900 #{#342C27};
|
||||
//* Silver *
|
||||
@define-color SILVER_100 #{#EEE};
|
||||
@define-color SILVER_300 #{#CCC};
|
||||
@define-color SILVER_500 #{#AAA};
|
||||
@define-color SILVER_700 #{#888};
|
||||
@define-color SILVER_900 #{#666};
|
||||
//* Slate *
|
||||
@define-color SLATE_100 #{#888};
|
||||
@define-color SLATE_300 #{#666};
|
||||
@define-color SLATE_500 #{#444};
|
||||
@define-color SLATE_700 #{#222};
|
||||
@define-color SLATE_900 #{#111};
|
||||
//* Black *
|
||||
@define-color BLACK_100 #{#474341};
|
||||
@define-color BLACK_300 #{#403C3A};
|
||||
@define-color BLACK_500 #{#393634};
|
||||
@define-color BLACK_700 #{#33302F};
|
||||
@define-color BLACK_900 #{#2B2928};
|
||||
|
||||
@ -1531,7 +1531,7 @@ headerbar {
|
||||
font-size: smaller;
|
||||
padding-left: $container_padding * 2;
|
||||
padding-right: $container_padding * 2;
|
||||
margin-top: -3px;
|
||||
// margin-top: -3px;
|
||||
@extend %dim-label;
|
||||
}
|
||||
|
||||
|
||||
@ -1548,6 +1548,7 @@ button.link {
|
||||
//
|
||||
spinbutton {
|
||||
background: none;
|
||||
min-height: $small_size;
|
||||
|
||||
&:drop(active) { box-shadow: none; }
|
||||
|
||||
@ -1599,9 +1600,12 @@ spinbutton {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
min-width: $menuitem_size;
|
||||
min-height: $small_size - 4px;
|
||||
}
|
||||
|
||||
> button, > text { @extend %linked; min-height: $small_size; }
|
||||
> button { min-height: $small_size; }
|
||||
|
||||
> button, > text { @extend %linked; }
|
||||
|
||||
&:dir(ltr) > text,
|
||||
&:dir(rtl) > button.up { border-radius: $bt_radius 0 0 $bt_radius; }
|
||||
@ -4024,10 +4028,10 @@ scrolledwindow {
|
||||
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
||||
// This draws a box on top of the content, the size changes programmatically.
|
||||
> overshoot {
|
||||
&.top { @include overshoot_alt(top); }
|
||||
&.bottom { @include overshoot_alt(bottom); }
|
||||
&.left { @include overshoot_alt(left); }
|
||||
&.right { @include overshoot_alt(right); }
|
||||
&.top { @include overshoot(top); }
|
||||
&.bottom { @include overshoot(bottom); }
|
||||
&.left { @include overshoot(left); }
|
||||
&.right { @include overshoot(right); }
|
||||
}
|
||||
|
||||
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
||||
|
||||
494
src/sass/gtk/_drawing-3.0.scss
Normal file
494
src/sass/gtk/_drawing-3.0.scss
Normal file
@ -0,0 +1,494 @@
|
||||
|
||||
// Solid color image
|
||||
@function _solid($c) {
|
||||
@return linear-gradient(to bottom, $c, $c);
|
||||
}
|
||||
|
||||
// Entries
|
||||
|
||||
@mixin entry($t) {
|
||||
//
|
||||
// Entries drawing function
|
||||
//
|
||||
// $t: entry type
|
||||
//
|
||||
|
||||
@if $t==normal {
|
||||
//
|
||||
// normal entry
|
||||
//
|
||||
color: $text_color;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 2px transparent;
|
||||
}
|
||||
|
||||
@if $t==hover {
|
||||
//
|
||||
// hover entry
|
||||
//
|
||||
color: $text_color;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
|
||||
transition-duration: $shorter_duration * 2;
|
||||
}
|
||||
|
||||
@if $t==focus {
|
||||
//
|
||||
// focused entry
|
||||
//
|
||||
color: $text_color;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 2px $entry_highlight;
|
||||
transition-duration: $longer_duration * 2;
|
||||
}
|
||||
|
||||
@if $t==insensitive {
|
||||
//
|
||||
// insensitive entry
|
||||
//
|
||||
color: $disabled_fg_color;
|
||||
background-color: rgba($entry_bg, 0.02);
|
||||
}
|
||||
|
||||
@if $t==header-normal {
|
||||
//
|
||||
// normal header-bar entry
|
||||
//
|
||||
color: $header_fg;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 2px transparent;
|
||||
|
||||
image, image:hover { color: inherit; }
|
||||
}
|
||||
|
||||
@if $t==header-hover {
|
||||
//
|
||||
// header-hover entry
|
||||
//
|
||||
color: $header_fg;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
|
||||
transition-duration: $shorter_duration * 2;
|
||||
}
|
||||
|
||||
@if $t==header-focus {
|
||||
//
|
||||
// focused header-bar entry
|
||||
//
|
||||
// border-color: $selection_mode_bg;
|
||||
background-image: none;
|
||||
background-color: $entry_bg;
|
||||
box-shadow: inset 0 0 0 2px $entry_highlight;
|
||||
}
|
||||
|
||||
@if $t==header-insensitive {
|
||||
//
|
||||
// insensitive header-bar entry
|
||||
//
|
||||
color: rgba($header_fg, 0.35);
|
||||
background-color: rgba($entry_bg, 0.02);
|
||||
}
|
||||
|
||||
@else if $t==osd {
|
||||
//
|
||||
// normal osd entry
|
||||
//
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_entry_border;
|
||||
background-color: $osd_entry_bg;
|
||||
|
||||
image, image:hover { color: inherit; }
|
||||
}
|
||||
|
||||
@else if $t==osd-focus {
|
||||
//
|
||||
// active osd entry
|
||||
//
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
border-color: darken($selection_mode_bg, 5%);
|
||||
}
|
||||
|
||||
@else if $t==osd-insensitive {
|
||||
//
|
||||
// insensitive osd entry
|
||||
//
|
||||
color: $osd_disabled_fg_color;
|
||||
background-color: transparentize($osd_entry_bg, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
@mixin button($t, $actionb_bg: red, $actionb_fg: green) {
|
||||
//
|
||||
// Button drawing function
|
||||
//
|
||||
// $t: button type,
|
||||
// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons
|
||||
|
||||
@if $t==normal {
|
||||
//
|
||||
// normal button
|
||||
//
|
||||
color: $fg_color;
|
||||
border-color: $button_borders;
|
||||
background-color: $button_bg;
|
||||
@if $variant=='light' { box-shadow: $shadow_3; }
|
||||
@if $variant=='dark' {
|
||||
box-shadow: inset 0 1px $button_highlight, inset 0 -1px rgba(white, 0.02), $shadow_3;
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==hover {
|
||||
//
|
||||
// hovered button
|
||||
//
|
||||
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
||||
border-color: $button_borders;
|
||||
background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
|
||||
@if $variant=='light' { box-shadow: none; }
|
||||
@if $variant=='dark' {
|
||||
box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==active {
|
||||
//
|
||||
// pushed button
|
||||
//
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
border-color: if($variant=='light', $selected_bg_color, $dark_borders_color);
|
||||
@if $variant=='light' { box-shadow: none; }
|
||||
}
|
||||
|
||||
@else if $t==insensitive {
|
||||
//
|
||||
// insensitive button
|
||||
//
|
||||
label, & { color: $disabled_fg_color; }
|
||||
|
||||
border-color: if($variant == 'light', $button_border, $dark_borders_color);
|
||||
background-color: rgba($button_bg, 0.55);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==insensitive-active {
|
||||
//
|
||||
// insensitive pushed button
|
||||
//
|
||||
label, & { color: transparentize($selected_fg_color, 0.45); }
|
||||
|
||||
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
|
||||
background-color: rgba($selected_bg_color, 0.45);
|
||||
@if $variant=='light' { box-shadow: none; }
|
||||
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@if $t==flat-normal {
|
||||
//
|
||||
// normal button
|
||||
//
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
background-clip: if($variant=='light', border-box, padding-box);
|
||||
}
|
||||
|
||||
@else if $t==flat-hover {
|
||||
//
|
||||
// hovered button
|
||||
//
|
||||
color: darken($fg_color, 10%);
|
||||
background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
// border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
|
||||
}
|
||||
|
||||
@else if $t==flat-active {
|
||||
//
|
||||
// pushed button
|
||||
//
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
|
||||
}
|
||||
|
||||
@else if $t==flat-checked {
|
||||
//
|
||||
// pushed button
|
||||
//
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
|
||||
}
|
||||
|
||||
@else if $t==flat-insensitive {
|
||||
//
|
||||
// insensitive button
|
||||
//
|
||||
label, & { color: $disabled_fg_color; }
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@else if $t==flat-insensitive-active {
|
||||
//
|
||||
// insensitive pushed button
|
||||
//
|
||||
label, & { color: transparentize($selected_fg_color, 0.35); }
|
||||
|
||||
background-color: if($variant=='light', rgba(black, 0.3), rgba(white, 0.15));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@if $t==header-normal {
|
||||
//
|
||||
// normal header-bar button
|
||||
//
|
||||
color: $header_fg;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==header-hover {
|
||||
//
|
||||
// hovered header-bar button
|
||||
//
|
||||
color: darken($header_fg, 2%);
|
||||
background-color: rgba($header_fg, 0.1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==header-active {
|
||||
//
|
||||
// pushed header-bar button
|
||||
//
|
||||
color: $header_fg;
|
||||
background-color: rgba($header_fg, 0.25);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==header-checked {
|
||||
//
|
||||
// pushed header-bar button
|
||||
//
|
||||
color: $header_fg;
|
||||
background-color: rgba($header_fg, 0.12);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==header-insensitive {
|
||||
//
|
||||
// insensitive header-bar button
|
||||
//
|
||||
label, & { color: rgba($header_fg, 0.35); }
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==header-insensitive-active {
|
||||
//
|
||||
// header-bar insensitive pushed button
|
||||
//
|
||||
label, & { color: rgba($header_fg, 0.35); }
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==osd {
|
||||
//
|
||||
// normal osd button
|
||||
//
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_button_border;
|
||||
background-color: rgba(white, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==osd-hover {
|
||||
//
|
||||
// active osd button
|
||||
//
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_button_border;
|
||||
background-color: rgba(white, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==osd-active {
|
||||
//
|
||||
// active osd button
|
||||
//
|
||||
color: $selected_fg_color;
|
||||
border-color: $osd_button_border;
|
||||
background-color: rgba(white, 0.25);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@else if $t==osd-insensitive {
|
||||
//
|
||||
// insensitive osd button
|
||||
//
|
||||
color: $osd_disabled_fg_color;
|
||||
border-color: $osd_button_border;
|
||||
background-color: rgba(white, 0.03);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==suggested_destructive {
|
||||
//
|
||||
// suggested or destructive action buttons
|
||||
//
|
||||
@if $variant == 'light' { background-clip: border-box; }
|
||||
|
||||
color: $actionb_fg;
|
||||
background-color: $actionb_bg;
|
||||
background-image: none;
|
||||
box-shadow: if($variant=='light', none, (inset 0 1px rgba(white, 0.15), inset 0 -1px rgba(white, 0.03)));
|
||||
border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
|
||||
}
|
||||
|
||||
@else if $t==undecorated {
|
||||
//
|
||||
// reset
|
||||
//
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Overshoot
|
||||
//
|
||||
@mixin overshoot($p, $t:normal, $c:$fg_color) {
|
||||
//
|
||||
// overshoot
|
||||
//
|
||||
// $p: position
|
||||
// $t: type
|
||||
// $c: base color
|
||||
//
|
||||
// possible $p values:
|
||||
// top, bottom, right, left
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, backdrop
|
||||
//
|
||||
|
||||
$_small_gradient_length: 5%;
|
||||
$_big_gradient_length: 100%;
|
||||
|
||||
$_position: center top;
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
|
||||
@if $p==bottom {
|
||||
$_position: center bottom;
|
||||
$_linear_gradient_direction: to top;
|
||||
}
|
||||
|
||||
@else if $p==right {
|
||||
$_position: right center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
@else if $p==left {
|
||||
$_position: left center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $c;
|
||||
$_big_gradient_color: $c;
|
||||
|
||||
@if $c==$fg_color {
|
||||
$_small_gradient_color: $borders_color;
|
||||
$_big_gradient_color: $text_color;
|
||||
|
||||
@if $t==backdrop { $_small_gradient_color: $fill_color; }
|
||||
}
|
||||
|
||||
$_small_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.5,
|
||||
to($_small_gradient_color),
|
||||
to(rgba($_small_gradient_color, 0)));
|
||||
|
||||
$_big_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.6,
|
||||
from(rgba($_big_gradient_color, 0.07)),
|
||||
to(rgba($_big_gradient_color, 0)));
|
||||
|
||||
@if $t==normal {
|
||||
background-image: $_small_gradient, $_big_gradient;
|
||||
background-size: $_small_gradient_size, $_big_gradient_size;
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
background-image: $_small_gradient;
|
||||
background-size: $_small_gradient_size;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $_position;
|
||||
|
||||
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
||||
border: none; //
|
||||
box-shadow: none; //
|
||||
}
|
||||
|
||||
@mixin undershoot($p, $c: $wm_shadow, $neighbor: false, $style: default) {
|
||||
//
|
||||
// undershoot
|
||||
//
|
||||
// $p: position
|
||||
// $c: shade color
|
||||
// $neighbor: use ~ instead of >
|
||||
//
|
||||
// possible $p values:
|
||||
// top, bottom, right, left
|
||||
//
|
||||
|
||||
$_border_pos: '';
|
||||
$_direction: '';
|
||||
$_selector: if($neighbor, '~', '>');
|
||||
|
||||
@if $p==top {
|
||||
$_direction: bottom;
|
||||
$_border_pos: 0 1px;
|
||||
} @else if $p==bottom {
|
||||
$_direction: top;
|
||||
$_border_pos: 0 -1px;
|
||||
} @else if $p==left {
|
||||
$_direction: right;
|
||||
$_border_pos: 1px 0;
|
||||
} @else if $p==right {
|
||||
$_direction: left;
|
||||
$_border_pos: -1px 0;
|
||||
} @else {
|
||||
@error "Unknown position #{$p}"
|
||||
}
|
||||
|
||||
#{$_selector} undershoot.#{$p} {
|
||||
box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
|
||||
background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -384,87 +384,9 @@
|
||||
|
||||
//
|
||||
// Overshoot
|
||||
//
|
||||
@mixin overshoot($p, $t:normal, $c:$fg_color) {
|
||||
//
|
||||
// overshoot
|
||||
//
|
||||
// $p: position
|
||||
// $t: type
|
||||
// $c: base color
|
||||
//
|
||||
// possible $p values:
|
||||
// top, bottom, right, left
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, backdrop
|
||||
//
|
||||
|
||||
$_small_gradient_length: 5%;
|
||||
$_big_gradient_length: 100%;
|
||||
|
||||
$_position: center top;
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
|
||||
@if $p==bottom {
|
||||
$_position: center bottom;
|
||||
$_linear_gradient_direction: to top;
|
||||
}
|
||||
|
||||
@else if $p==right {
|
||||
$_position: right center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
@else if $p==left {
|
||||
$_position: left center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $c;
|
||||
$_big_gradient_color: $c;
|
||||
|
||||
@if $c==$fg_color {
|
||||
$_small_gradient_color: $borders_color;
|
||||
$_big_gradient_color: $text_color;
|
||||
|
||||
@if $t==backdrop { $_small_gradient_color: $fill_color; }
|
||||
}
|
||||
|
||||
$_small_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.5,
|
||||
to($_small_gradient_color),
|
||||
to(rgba($_small_gradient_color, 0)));
|
||||
|
||||
$_big_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.6,
|
||||
from(rgba($_big_gradient_color, 0.07)),
|
||||
to(rgba($_big_gradient_color, 0)));
|
||||
|
||||
@if $t==normal {
|
||||
background-image: $_small_gradient, $_big_gradient;
|
||||
background-size: $_small_gradient_size, $_big_gradient_size;
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
background-image: $_small_gradient;
|
||||
background-size: $_small_gradient_size;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $_position;
|
||||
|
||||
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
||||
border: none; //
|
||||
box-shadow: none; //
|
||||
}
|
||||
|
||||
@mixin overshoot_alt($p) {
|
||||
@mixin overshoot($p) {
|
||||
//
|
||||
// overshoot
|
||||
//
|
||||
@ -116,6 +116,10 @@ preferencesgroup > box {
|
||||
> box.single-line {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
grid > box > switch {
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user