From 15064551dd61669c2b33573c9ba0893b7cb853be Mon Sep 17 00:00:00 2001 From: EliverLara Date: Sun, 5 Dec 2021 13:56:24 -0600 Subject: [PATCH] Gtk-4: Add initial suppport to gtk v4 --- gtk-4.0/_apps.scss | 19 + gtk-4.0/_colors-public.scss | 185 + gtk-4.0/_colors.scss | 116 + gtk-4.0/_common.scss | 45 + gtk-4.0/_drawing.scss | 617 +++ gtk-4.0/_elementary-colors.scss | 71 + gtk-4.0/_widgets.scss | 40 + gtk-4.0/apps/_budgie.scss | 1008 ++++ gtk-4.0/apps/_caja.scss | 79 + gtk-4.0/apps/_geary.scss | 37 + gtk-4.0/apps/_gnome.scss | 206 + gtk-4.0/apps/_lightdm.scss | 115 + gtk-4.0/apps/_mate.scss | 20 + gtk-4.0/apps/_nemo.scss | 68 + gtk-4.0/apps/_pantheon.scss | 445 ++ gtk-4.0/apps/_unity.scss | 170 + gtk-4.0/apps/_xfce.scss | 107 + gtk-4.0/gtk-dark.css | 6310 +++++++++++++++++++++++ gtk-4.0/gtk-dark.scss | 11 + gtk-4.0/gtk.css | 6310 +++++++++++++++++++++++ gtk-4.0/gtk.scss | 11 + gtk-4.0/thumbnail.png | Bin 0 -> 1735 bytes gtk-4.0/widgets/_action-bars.scss | 27 + gtk-4.0/widgets/_app-notifications.scss | 23 + gtk-4.0/widgets/_base-states.scss | 178 + gtk-4.0/widgets/_buttons.scss | 581 +++ gtk-4.0/widgets/_calendar.scss | 59 + gtk-4.0/widgets/_checks-radios.scss | 165 + gtk-4.0/widgets/_color-chooser.scss | 139 + gtk-4.0/widgets/_comboboxes.scss | 41 + gtk-4.0/widgets/_dialogs.scss | 70 + gtk-4.0/widgets/_entries.scss | 181 + gtk-4.0/widgets/_expanders.scss | 16 + gtk-4.0/widgets/_file-chooser.scss | 102 + gtk-4.0/widgets/_floating-bar.scss | 33 + gtk-4.0/widgets/_frames.scss | 87 + gtk-4.0/widgets/_granite.scss | 206 + gtk-4.0/widgets/_header-bars.scss | 283 + gtk-4.0/widgets/_infobars.scss | 119 + gtk-4.0/widgets/_level-bars.scss | 62 + gtk-4.0/widgets/_links.scss | 49 + gtk-4.0/widgets/_lists.scss | 51 + gtk-4.0/widgets/_menus.scss | 133 + gtk-4.0/widgets/_misc.scss | 62 + gtk-4.0/widgets/_notebooks.scss | 276 + gtk-4.0/widgets/_paned.scss | 69 + gtk-4.0/widgets/_pathbars.scss | 29 + gtk-4.0/widgets/_popovers.scss | 45 + gtk-4.0/widgets/_print-dialog.scss | 18 + gtk-4.0/widgets/_progress-bars.scss | 56 + gtk-4.0/widgets/_scales.scss | 420 ++ gtk-4.0/widgets/_scrollbars.scss | 176 + gtk-4.0/widgets/_sidebar.scss | 209 + gtk-4.0/widgets/_spinbuttons.scss | 192 + gtk-4.0/widgets/_spinner.scss | 27 + gtk-4.0/widgets/_switches.scss | 95 + gtk-4.0/widgets/_toolbars.scss | 84 + gtk-4.0/widgets/_tooltips.scss | 28 + gtk-4.0/widgets/_touch-copy-paste.scss | 82 + gtk-4.0/widgets/_treeviews.scss | 233 + gtk-4.0/widgets/_windows.scss | 136 + 61 files changed, 20832 insertions(+) create mode 100755 gtk-4.0/_apps.scss create mode 100755 gtk-4.0/_colors-public.scss create mode 100755 gtk-4.0/_colors.scss create mode 100755 gtk-4.0/_common.scss create mode 100755 gtk-4.0/_drawing.scss create mode 100644 gtk-4.0/_elementary-colors.scss create mode 100755 gtk-4.0/_widgets.scss create mode 100755 gtk-4.0/apps/_budgie.scss create mode 100644 gtk-4.0/apps/_caja.scss create mode 100755 gtk-4.0/apps/_geary.scss create mode 100755 gtk-4.0/apps/_gnome.scss create mode 100755 gtk-4.0/apps/_lightdm.scss create mode 100644 gtk-4.0/apps/_mate.scss create mode 100644 gtk-4.0/apps/_nemo.scss create mode 100755 gtk-4.0/apps/_pantheon.scss create mode 100755 gtk-4.0/apps/_unity.scss create mode 100644 gtk-4.0/apps/_xfce.scss create mode 100755 gtk-4.0/gtk-dark.css create mode 100755 gtk-4.0/gtk-dark.scss create mode 100755 gtk-4.0/gtk.css create mode 100755 gtk-4.0/gtk.scss create mode 100644 gtk-4.0/thumbnail.png create mode 100644 gtk-4.0/widgets/_action-bars.scss create mode 100644 gtk-4.0/widgets/_app-notifications.scss create mode 100644 gtk-4.0/widgets/_base-states.scss create mode 100644 gtk-4.0/widgets/_buttons.scss create mode 100644 gtk-4.0/widgets/_calendar.scss create mode 100644 gtk-4.0/widgets/_checks-radios.scss create mode 100644 gtk-4.0/widgets/_color-chooser.scss create mode 100644 gtk-4.0/widgets/_comboboxes.scss create mode 100644 gtk-4.0/widgets/_dialogs.scss create mode 100644 gtk-4.0/widgets/_entries.scss create mode 100644 gtk-4.0/widgets/_expanders.scss create mode 100644 gtk-4.0/widgets/_file-chooser.scss create mode 100644 gtk-4.0/widgets/_floating-bar.scss create mode 100644 gtk-4.0/widgets/_frames.scss create mode 100644 gtk-4.0/widgets/_granite.scss create mode 100644 gtk-4.0/widgets/_header-bars.scss create mode 100644 gtk-4.0/widgets/_infobars.scss create mode 100644 gtk-4.0/widgets/_level-bars.scss create mode 100644 gtk-4.0/widgets/_links.scss create mode 100644 gtk-4.0/widgets/_lists.scss create mode 100644 gtk-4.0/widgets/_menus.scss create mode 100644 gtk-4.0/widgets/_misc.scss create mode 100644 gtk-4.0/widgets/_notebooks.scss create mode 100644 gtk-4.0/widgets/_paned.scss create mode 100644 gtk-4.0/widgets/_pathbars.scss create mode 100644 gtk-4.0/widgets/_popovers.scss create mode 100644 gtk-4.0/widgets/_print-dialog.scss create mode 100644 gtk-4.0/widgets/_progress-bars.scss create mode 100644 gtk-4.0/widgets/_scales.scss create mode 100644 gtk-4.0/widgets/_scrollbars.scss create mode 100644 gtk-4.0/widgets/_sidebar.scss create mode 100644 gtk-4.0/widgets/_spinbuttons.scss create mode 100644 gtk-4.0/widgets/_spinner.scss create mode 100644 gtk-4.0/widgets/_switches.scss create mode 100644 gtk-4.0/widgets/_toolbars.scss create mode 100644 gtk-4.0/widgets/_tooltips.scss create mode 100644 gtk-4.0/widgets/_touch-copy-paste.scss create mode 100644 gtk-4.0/widgets/_treeviews.scss create mode 100644 gtk-4.0/widgets/_windows.scss diff --git a/gtk-4.0/_apps.scss b/gtk-4.0/_apps.scss new file mode 100755 index 0000000..eb3f702 --- /dev/null +++ b/gtk-4.0/_apps.scss @@ -0,0 +1,19 @@ +/********************** + * DE-Specific Styles * + **********************/ + +@import 'apps/budgie'; +@import 'apps/gnome'; +@import 'apps/xfce'; +@import 'apps/pantheon'; +@import 'apps/unity'; +@import 'apps/mate'; + +/*********************** + * App-Specific Styles * + ***********************/ + +@import 'apps/geary'; +@import 'apps/lightdm'; +@import 'apps/nemo'; +@import 'apps/caja'; \ No newline at end of file diff --git a/gtk-4.0/_colors-public.scss b/gtk-4.0/_colors-public.scss new file mode 100755 index 0000000..34661c0 --- /dev/null +++ b/gtk-4.0/_colors-public.scss @@ -0,0 +1,185 @@ +//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 #{"" +$fg_color}; + +/* text color for entries, views and content in general */ +@define-color theme_text_color #{"" +$text_color}; + +/* widget base background color */ +@define-color theme_bg_color #{"" +$bg_color}; + +/* text widgets and the like base background color */ +@define-color theme_base_color #{"" +$base_color}; + +/* base background color of selections */ +@define-color theme_selected_bg_color #{"" +$selected_bg_color}; + +/* text/foreground color of selections */ +@define-color theme_selected_fg_color #{"" +$selected_fg_color}; + +/* base background color of disabled widgets */ +@define-color insensitive_bg_color #{"" +$insensitive_bg_color}; + +/* text foreground color of disabled widgets */ +@define-color insensitive_fg_color #{"" +$insensitive_fg_color}; + +/* disabled text widgets and the like base background color */ +@define-color insensitive_base_color #{"" +$base_color}; + +/* widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color}; + +/* text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color #{"" +$text_color}; + +/* widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color}; + +/* text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #{"" +$backdrop_base_color}; + +/* base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color}; + +/* text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color}; + +/* widgets main borders color */ +@define-color borders #{"" +$borders_color}; + +/* widgets main borders color on backdrop windows */ +@define-color unfocused_borders #{"" +$backdrop_borders_color}; + +/* 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 destructive_color #{$destructive_color} + +@define-color fg_color #{"" +$fg_color}; +@define-color text_color #{"" +$text_color}; +@define-color bg_color #{"" +$bg_color}; +@define-color base_color #{"" +$base_color}; +@define-color selected_bg_color #{"" +$selected_bg_color}; +@define-color selected_fg_color #{"" +$selected_fg_color}; +@define-color unfocused_fg_color #{"" +$backdrop_fg_color}; +@define-color unfocused_text_color #{"" +$text_color}; +@define-color unfocused_bg_color #{"" +$backdrop_bg_color}; +@define-color unfocused_base_color #{"" +$backdrop_base_color}; +@define-color unfocused_selected_bg_color #{"" +$selected_bg_color}; +@define-color unfocused_selected_fg_color #{"" + $selected_fg_color}; + +//WM + +$_wm_highlight: if($variant=='light', $top_highlight, // 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 shade(#{$fg_color}, 1.8); +@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 shade(#{$bg_color}, 1.2); +@define-color wm_bg_b #{$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 #{"" + $base_color}; +@define-color text_view_bg #{"" + $base_color}; + +//Budgie desktop +@define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color}; +@define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color}; +@define-color placeholder_text_color #{"" +$backdrop_text_color}; + +// Elementary OS colors +@define-color STRAWBERRY_100 #{$STRAWBERRY_100}; +@define-color STRAWBERRY_300 #{$STRAWBERRY_300}; +@define-color STRAWBERRY_500 #{$STRAWBERRY_500}; +@define-color STRAWBERRY_700 #{$STRAWBERRY_700}; +@define-color STRAWBERRY_900 #{$STRAWBERRY_900}; + +@define-color ORANGE_100 #{$ORANGE_100}; +@define-color ORANGE_300 #{$ORANGE_300}; +@define-color ORANGE_500 #{$ORANGE_500}; +@define-color ORANGE_700 #{$ORANGE_700}; +@define-color ORANGE_900 #{$ORANGE_900}; + +@define-color BANANA_100 #{$BANANA_100}; +@define-color BANANA_300 #{$BANANA_300}; +@define-color BANANA_500 #{$BANANA_500}; +@define-color BANANA_700 #{$BANANA_700}; +@define-color BANANA_900 #{$BANANA_900}; + +@define-color LIME_100 #{$LIME_100}; +@define-color LIME_300 #{$LIME_300}; +@define-color LIME_500 #{$LIME_500}; +@define-color LIME_700 #{$LIME_700}; +@define-color LIME_900 #{$LIME_900}; + +@define-color MINT_100 #{$MINT_100}; +@define-color MINT_300 #{$MINT_300}; +@define-color MINT_500 #{$MINT_500}; +@define-color MINT_700 #{$MINT_700}; +@define-color MINT_900 #{$MINT_900}; + +@define-color BLUEBERRY_100 #{$BLUEBERRY_100}; +@define-color BLUEBERRY_300 #{$BLUEBERRY_300}; +@define-color BLUEBERRY_500 #{$BLUEBERRY_500}; +@define-color BLUEBERRY_700 #{$BLUEBERRY_700}; +@define-color BLUEBERRY_900 #{$BLUEBERRY_900}; + +@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100}; +@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300}; +@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500}; +@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700}; +@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900}; + +@define-color GRAPE_100 #{$GRAPE_100}; +@define-color GRAPE_300 #{$GRAPE_300}; +@define-color GRAPE_500 #{$GRAPE_500}; +@define-color GRAPE_700 #{$GRAPE_700}; +@define-color GRAPE_900 #{$GRAPE_900}; + +@define-color COCOA_100 #{$COCOA_100}; +@define-color COCOA_300 #{$COCOA_300}; +@define-color COCOA_500 #{$COCOA_500}; +@define-color COCOA_700 #{$COCOA_700}; +@define-color COCOA_900 #{$COCOA_900}; + +@define-color SILVER_100 #{$SILVER_100}; +@define-color SILVER_300 #{$SILVER_300}; +@define-color SILVER_500 #{$SILVER_500}; +@define-color SILVER_700 #{$SILVER_700}; +@define-color SILVER_900 #{$SILVER_900}; + +@define-color SLATE_100 #{$SLATE_100}; +@define-color SLATE_300 #{$SLATE_300}; +@define-color SLATE_500 #{$SLATE_500}; +@define-color SLATE_700 #{$SLATE_700}; +@define-color SLATE_900 #{$SLATE_900}; + +@define-color BLACK_100 #{$BLACK_100}; +@define-color BLACK_300 #{$BLACK_300}; +@define-color BLACK_500 #{$BLACK_500}; +@define-color BLACK_700 #{$BLACK_700}; +@define-color BLACK_900 #{"" + $BLACK_900}; \ No newline at end of file diff --git a/gtk-4.0/_colors.scss b/gtk-4.0/_colors.scss new file mode 100755 index 0000000..5b3c470 --- /dev/null +++ b/gtk-4.0/_colors.scss @@ -0,0 +1,116 @@ +// When color definition differs for dark and light variant +// it gets @if ed depending on $variant + +// Main definitions +$base_color: if($variant == 'light', #ebf0f5, lighten(#161925, 1%)); +$text_color: if($variant == 'light', #31363D, #C3C7D1); +$bg_color: if($variant == 'light', darken( #EEEEEE, 3%), #161925); +$fg_color: if($variant == 'light', #31363d, #C3C7D1); +$switch_bg: if($variant == 'light', #ffffff, transparentize(black,1)); +$shadow_color: rgba(162, 162, 165, 0.21); +$_sidebar_color: if($variant == 'light', #222e39, #161925); + +// Primary colors +$lime: #71f79f; +$red: #ed254e; +$orange: #ff6a00; +$yellow: #f9dc5c; +$purple: #c74ded; +$darkpurple: #7b7bbd; +$blue: #7cb7ff; +$cyan: #00c1e4; +$slider: #7b7bbd; +$teal: #00e8c6; + +$selected_fg_color: #fefefe; +$selected_bg_color: #c50ed2; +//$selected_bg_color: #f7005a; +/*$selected_bg_color: #00e8c6;06d6a0*/ +$selected_borders_color: darken($selected_bg_color, 10%); +$borders_color: if($variant == 'light', transparentize(black,0.87), transparentize(#0C0E15,0.2)); +$borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); + +$selected-tab-gradient-start: #5800E2; +$selected-tab-gradient-end: #FF00E6; + +$link_color: $blue; +$link_visited_color:transparentize($link_color,0.5); +$top_highlight: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); +$bottom_highlight: if($variant == 'light', transparentize(black, 0.8), transparentize(black, 0.9)); +$dark_fill: mix($borders_color, $bg_color, 35%); +$headerbar_color: mix($base_color, darken($bg_color, 8%), 30%); +$headerbar_fg_color: $text_color; +$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); +$popover_bg_color: $base_color; +$popover_hover_color: lighten($bg_color, 5%); + +$scrollbar_bg_color: mix($base_color, $bg_color, 50%); +$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); +$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); +$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); + +$warning_color: if($variant == 'light', $orange, darken($orange,10%)); +$error_color: if($variant == 'light', $red, darken($red,5%)); +$success_color: if($variant == 'light', $cyan, darken($cyan,10%)); +$destructive_color: if($variant == 'light', darken($red,5%), darken($red,10%)); +$suggested_color: if($variant == 'light', $selected_bg_color, darken($selected_bg_color,10%)); + +$osd_fg_color: #fefefe; +$osd_text_color: white; +$osd_bg_color: transparentize(darken($_sidebar_color, 3%), 0.02); +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_borders_color: transparentize(black, 0.3); + +$sidebar_bg_color: mix($bg_color, $base_color, 50%); +$base_hover_color: transparentize($fg_color, 0.95); + +$tooltip_borders_color: transparentize(white, 0.9); +$shadow_color: transparentize(black, 0.9); + +$drop_target_color: #a1ce4b; + +$text_shadow_color: if($variant == 'dark', $shadow_color, transparentize(white, 0.9)); +$icon_shadow_color: $text_shadow_color; + +$drop_target_color: $lime; + +// Infobar colors +$info_color: $lime; +$question_color: $cyan; + +// Panel colors +$panel_bg_color: transparentize($base_color, 0); +$panel_fg_color: white; +$panel_borders_color: transparentize($base_color, 0.8); + +// Disabled state colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_base_color: darken($base_color, 5%); +$insensitive_borders_color: $borders_color; + +// Backdrop state colors +$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); +$backdrop_bg_color: $bg_color; +$backdrop_headerbar_bg_color: $headerbar_color; +$backdrop_headerbar_fg_color: if($variant == 'light', transparentize($headerbar_fg_color, 0.5), transparentize($headerbar_fg_color, 0.2)); +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_bg_color: transparentize($selected_bg_color, 0.4); +$backdrop_selected_fg_color: if($variant == 'light', $selected_fg_color, transparentize($selected_fg_color, 0.5)); +$backdrop_borders_color: mix($borders_color, $bg_color, 90%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); +$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); + +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); + +$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); + +$scale_bg: if($variant == 'light', transparentize(black,0.86) ,transparentize(white,0.86)); +$scale_disabled_bg: if($variant == 'light', transparentize(black, 0.94) ,transparentize(white, 0.94)); +$suggested_bg_color: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); +$destructive_bg_color: linear-gradient(to right, #FF416C, #FF4B2B); +$menu_shadow_color: $borders_color; diff --git a/gtk-4.0/_common.scss b/gtk-4.0/_common.scss new file mode 100755 index 0000000..e0e9303 --- /dev/null +++ b/gtk-4.0/_common.scss @@ -0,0 +1,45 @@ +/********* +* Common * +*********/ + +@function gtkalpha($c,$a) { + @return unquote("alpha(#{$c},#{$a})"); +} + +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$asset_suffix: if($variant=='dark', '-dark', ''); +$backdrop_transition: 200ms ease-out; +$button_transition: all 200ms $ease-out-quad; + +* { + padding: 0; + -GtkToolButton-icon-spacing: 4; + -GtkTextView-error-underline-color: $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; + + -GtkToolItemGroup-expander-size: 11; + + -GtkWidget-text-handle-width: 20; + -GtkWidget-text-handle-height: 24; + + -GtkDialog-button-spacing: 4; + -GtkDialog-action-area-border: 0; + + // We use the outline properties to signal the focus properties + // to the adwaita engine: using real CSS properties is faster, + // and we don't use any outlines for now. + + outline-color: transparentize($fg_color, 0.7); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 2px; + + -gtk-secondary-caret-color: $selected_bg_color; +} diff --git a/gtk-4.0/_drawing.scss b/gtk-4.0/_drawing.scss new file mode 100755 index 0000000..280380f --- /dev/null +++ b/gtk-4.0/_drawing.scss @@ -0,0 +1,617 @@ +/***************** +* Drawing mixins * +*****************/ + +// generic drawing of more complex things + +@function _widget_edge($c:$borders_edge) { +// outer highlight "used" on most widgets + @if $c == none { @return none; } + @else { @return 0 1px $c; } +} + +@mixin lines($t, $c:$selected_bg_color) { + @if $t==up { + box-shadow: inset 0 -3px 0 0 darken($c,5%); + } + @if $t==down { + box-shadow: inset 0 3px 0 0 darken($c,5%); + } + @if $t==both { + box-shadow: inset 0 -3px 0 0 darken($c,5%), + inset 0 3px 0 0 darken($c,5%); + } +} + +@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { +// +// Helper function to stack up to 4 box-shadows; +// + @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } + @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } + @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } + @else { box-shadow: $shadow1; } +} + +// entries + +@function entry_focus_border($fc:$selected_bg_color) { + @if $variant == 'light' { @return $fc; } + @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); } +} + + +@function entry_gradient($c) { + @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%), + mix($borders_color, $c, 3%) 2px, + $c 90%); } + @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%), + mix($borders_color, $c, 40%) 3px, + $c 90%); } +} + +@mixin entry($t, $fc:$selected_bg_color, $edge: none) { +// +// 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; +// + + $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1)); + $_entry_edge: if($edge == none, none, _widget_edge($edge)); + + @if $t==normal { + color: $text_color; + border-color: $borders_color; + background-color: $base_color; + // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. + } + @if $t==focus { + border-color: entry_focus_border($fc); + } + @if $t==insensitive { + color: $insensitive_fg_color; + border-color: $borders_color; + background-color: $insensitive_bg_color; + box-shadow: $_entry_edge; + } + @if $t==backdrop { + color: $backdrop_text_color; + border-color: $backdrop_borders_color; + background-color: $backdrop_base_color; + box-shadow: $_blank_edge; + } + @if $t==backdrop-insensitive { + color: $backdrop_insensitive_color; + border-color: $backdrop_borders_color; + background-color: $insensitive_bg_color; + box-shadow: $_blank_edge; + } + @if $t==osd { + color: $osd_text_color; + border-color: $osd_borders_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + } + @if $t==osd-focus { + color: $osd_text_color; + border-color: $selected_bg_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-clip: padding-box; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + } + @if $t==osd-insensitive { + color: $osd_insensitive_fg_color; + border-color: $osd_borders_color; + background-color: $osd_insensitive_bg_color; + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + } + @if $t==osd-backdrop { + color: $osd_text_color; + border-color: $osd_borders_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + } +} + +// buttons + +@function _border_color ($c) { @return darken($c, 25%); } // colored buttons want + // the border form the + // base color + +@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) { +// +// calculate the color of text shadows +// +// $tc is the text color +// $bg is the background color +// + $_lbg: lightness($bg)/100%; + @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); } + @else { @return transparentize(black, $_lbg*0.8); } +} + +@function _button_hilight_color($c) { +// +// calculate the right top hilight color for buttons +// +// $c: base color; +// + @if lightness($c)>95% { @return white; } + @else if lightness($c)>90% { @return transparentize(white, 0.2); } + @else if lightness($c)>80% { @return transparentize(white, 0.4); } + @else if lightness($c)>50% { @return transparentize(white, 0.6); } + @else if lightness($c)>40% { @return transparentize(white, 0.8); } + @else { @return transparentize(white, 0.95); } +} + +@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { +// +// helper function for the text emboss effect +// +// $tc is the optional text color, not the shadow color +// +// TODO: this functions needs a way to deal with special cases +// + + $_shadow: _text_shadow_color($tc, $bg); + + @if lightness($tc)<50% { + text-shadow: 0 1px $_shadow; + -gtk-icon-shadow: 0 1px $_shadow; + } + @else { + text-shadow: 0 -1px $_shadow; + -gtk-icon-shadow: 0 -1px $_shadow; + } +} + +@mixin button($t, $c:$base_color, $tc:$text_color, $edge: none) { +// +// Button drawing function +// +// $t: button type, +// $c: base button color for colored* types +// $tc: optional text color for colored* types +// $edge: set to none to not draw the bottom edge or specify a color to not +// use the default one +// +// possible $t values: +// normal, hover, active, insensitive, insensitive-active, +// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated +// + + $_hilight_color: _button_hilight_color($c); + $_button_edge: if($edge == none, none, _widget_edge($edge)); + $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); + + + @if $t==rounded { + box-shadow: none; + // border: 1px solid $c; + color: white; + border-radius: 100px; + background: $suggested_bg_color; } + + @if $t==rounded-red { + box-shadow: none; + // border: 1px solid $c; + color: white; + border-radius: 100px; + background: $destructive_bg_color; + } + + @if $t==normal { + // + // normal button + // + font-weight: normal; + color: $tc; + background-color: mix($bg_color, $base_color, 15%); + text-shadow: none; + } + + @else if $t==hover { + // + // hovered button + // + color: $tc; + outline-color: transparentize($tc, 0.7); + background-color: $c; + text-shadow: none; + } + + @if $t==normal-header { + // + // normal button headerbar look + // + color: if($tc==$text_color, #8b8b8b, $tc); + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; +} + + @else if $t==hover-header { + // + // hovered button headerbar look + // + color: if($tc==$text_color, $selected_bg_color, $tc); + border-radius: 0; + text-shadow: none; + border:none; +} + +@else if $t==active-header { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px transparentize(#c50ed2, 0.02); + color: rgb(255, 255, 255); +} + +@else if $t==backdrop-header { +// +// backdrop button headerbar look +// +color: if($tc==$text_color, transparentize($tc, 0.6), $tc); +background-color: transparent; +border-radius: 0; +text-shadow: none; +box-shadow: none; +} + + + @else if $t==active { + // + // pushed button + // + color: $tc; + outline-color: transparentize($tc, 0.7); + background-color: if($c==$base_color, $selected_bg_color, $c); + text-shadow: none; +} + @else if $t==insensitive { + // + // insensitive button + // + color: if($tc==$text_color, $backdrop_text_color, $tc); + outline-color: transparentize($tc, 0.7); + background-color: if($c==$base_color, $insensitive_bg_color, $c); + text-shadow: none; +} + @else if $t==insensitive-active { + // + // insensitive pushed button + // + color: transparentize($selected_fg_color, 0.3); + outline-color: transparentize($tc, 0.7); + background-color: if($c==$base_color, $selected_bg_color, $c); + text-shadow: none; + label { color: transparentize($selected_fg_color, 0.3); } +} + @else if $t==backdrop { + // + // backdrop button + // + color: if($tc==$text_color, $backdrop_text_color, transparentize($tc, 0.6)); + outline-color: transparentize($tc, 0.7); + background-color: if($c==$base_color, $backdrop_base_color, $c); + text-shadow: none; +} + + @else if $t==backdrop-active { + // + // backdrop pushed button FIXME no colors here! + // + color: transparentize($selected_fg_color, 0.3); + outline-color: transparentize($tc, 0.7); + background-color: $selected_bg_color; + text-shadow: none; + label { color: transparentize($selected_fg_color, 0.3); } +} + + @else if $t==backdrop-insensitive { + // + // backdrop insensitive button + // + color: if($tc==$text_color, $backdrop_text_color, $tc); + outline-color: transparentize($tc, 0.7); + background-color: if($c==$base_color, $insensitive_bg_color, $c); + text-shadow: none; +} + + @else if $t==backdrop-insensitive-active { + // + // backdrop insensitive pushed button + // + color: transparentize($selected_fg_color, 0.3); + outline-color: transparentize($tc, 0.7); + background-color: $selected_bg_color; + text-shadow: none; +} + + @else if $t==osd { + // + // normal osd button + // + $_bg: if($c!=$base_color, transparentize($c, 0.5), + $osd_bg_color); + + color: $osd_fg_color; + border-color: $osd_borders_color; + background-color: $_bg; + background-clip: padding-box; + box-shadow: inset 0 1px transparentize(white, 0.9); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: transparentize($osd_fg_color, 0.7); + } + @else if $t==osd-hover { + // + // active osd button + // + $_bg: if($c!=$base_color, transparentize($c, 0.3), + lighten($osd_bg_color, 12%)); + + color: white; + border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $_bg, $_bg); + background-clip: padding-box; + box-shadow: inset 0 1px transparentize(white, 0.9); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: transparentize($osd_fg_color, 0.7); + } + @else if $t==osd-active { + // + // active osd button + // + $_bg: if($c!=$base_color, $c, lighten($osd_bg_color, 6%)); + + color: white; + border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $_bg, $_bg); + background-clip: padding-box; + box-shadow: inset 0 1px transparentize(white, 0.9); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: transparentize($osd_fg_color, 0.7); + } + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $osd_insensitive_bg_color, $osd_insensitive_bg_color); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + } + @else if $t==osd-backdrop { + // + // backdrop osd button + // + $_bg: if($c!=$base_color, transparentize($c, 0.5), + $osd_bg_color); + + color: $osd_fg_color; + border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $_bg, $_bg); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + } + @else if $t==undecorated { + // + // reset + // + // border-color: transparent; + background-color: transparent; + background-image: none; + border-color: transparent; + @include _shadows(inset 0 1px transparentize(white, 1), + $_blank_edge); + + text-shadow: none; + -gtk-icon-shadow: none; + } +} + +@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) { + color: mix($tc, $bg_color, 80%); + @if $flat { background-image: linear-gradient(to bottom, $c, $c); } + @else { + background-image: linear-gradient(to bottom, + mix(black,$c,15%) 5%, + mix(black,$c,10%) 20%, + mix(black,$c,10%) 90%, + $c); + } + + border-color: if($c!=$bg_color, _border_color($c), $border_color); + + @if not($noedge) { + @if lightness($c) > 60% { + box-shadow: inset 0 -1px $borders_edge, + 0 1px $borders_edge; + } + @else { + box-shadow: inset 0 -1px transparentize($borders_edge, 0.5), + 0 1px transparentize($borders_edge, 0.5); + } + } + @else { box-shadow: none; } +} + +@mixin headerbar_fill($c:$headerbar_color, $hc:$top_highlight, $ov: none) { +// +// headerbar fill +// +// $c: base color +// $hc: top highlight color +// $ov: a background layer for background shorthand (hence no commas!) +// + $gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px); + + @if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); } + + @if $ov != none { background: $c $ov, $gradient; } + @else { background: $c $gradient; } + + box-shadow: inset 0 1px $hc; // top highlight +} + +@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: darken($borders_color, 10%); + $_big_gradient_color: $fg_color; + + @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } + } + + $_small_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, 0.5, + to($_small_gradient_color), + to(transparentize($_small_gradient_color, 1))); + + $_big_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, 0.6, + from(transparentize($_big_gradient_color, 0.93)), + to(transparentize($_big_gradient_color, 1))); + + @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) { +// +// undershoot +// +// $p: position +// +// possible $p values: +// top, bottom, right, left +// + + $_undershoot_color_dark: transparentize(black, 0.8); + $_undershoot_color_light: transparentize(white, 0.8); + + $_gradient_dir: left; + $_dash_bg_size: 10px 1px; + $_gradient_repeat: repeat-x; + $_bg_pos: center $p; + + background-color: transparent; // shouldn't be needed, but better to be sure; + + @if ($p == left) or ($p == right) { + $_gradient_dir: top; + $_dash_bg_size: 1px 10px; + $_gradient_repeat: repeat-y; + $_bg_pos: $p center; + } + + background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%); + + padding-#{$p}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; + border: none; + box-shadow: none; +} + +@mixin scale-highlight($dir) { + background: linear-gradient(to $dir, #00f17d, #00f7d2); +} + +@mixin selected-tab($dir) { + background: + linear-gradient(to $dir, $selected-tab-gradient-start, $selected-tab-gradient-end) + left + bottom + lighten(mix($base_color, $headerbar_color, 30%), 2%) + no-repeat; + @if $dir==right { background-size: 100% 2px; } + @else if $dir==bottom { background-size: 2px 100%; } + border: 0; +} \ No newline at end of file diff --git a/gtk-4.0/_elementary-colors.scss b/gtk-4.0/_elementary-colors.scss new file mode 100644 index 0000000..6229b13 --- /dev/null +++ b/gtk-4.0/_elementary-colors.scss @@ -0,0 +1,71 @@ +$STRAWBERRY_100: #ff8c82; +$STRAWBERRY_300: #ed5353; +$STRAWBERRY_500: #c6262e; +$STRAWBERRY_700: #a10705; +$STRAWBERRY_900: #7a0000; + +$ORANGE_100: #ffc27d; +$ORANGE_300: #ffa154; +$ORANGE_500: #f37329; +$ORANGE_700: #cc3b02; +$ORANGE_900: #a62100; + +$BANANA_100: #fff394; +$BANANA_300: #ffe16b; +$BANANA_500: #f9c440; +$BANANA_700: #d48e15; +$BANANA_900: #ad5f00; + +$LIME_100: #d1ff82; +$LIME_300: #9bdb4d; +$LIME_500: #68b723; +$LIME_700: #3a9104; +$LIME_900: #206b00; + +$MINT_100: #89ffdd; +$MINT_300: #43d6b5; +$MINT_500: #28bca3; +$MINT_700: #0e9a83; +$MINT_900: #007367; + +$BLUEBERRY_100: #8cd5ff; +$BLUEBERRY_300: #64baff; +$BLUEBERRY_500: #3689e6; +$BLUEBERRY_700: #0d52bf; +$BLUEBERRY_900: #002e99; + +$BUBBLEGUM_100: #fe9ab8; +$BUBBLEGUM_300: #f4679d; +$BUBBLEGUM_500: #de3e80; +$BUBBLEGUM_700: #bc245d; +$BUBBLEGUM_900: #910e38; + +$GRAPE_100: #e4c6fa; +$GRAPE_300: #cd9ef7; +$GRAPE_500: #a56de2; +$GRAPE_700: #7239b3; +$GRAPE_900: #452981; + +$COCOA_100: #a3907c; +$COCOA_300: #8a715e; +$COCOA_500: #715344; +$COCOA_700: #57392d; +$COCOA_900: #3d211b; + +$SILVER_100: #fafafa; +$SILVER_300: #d4d4d4; +$SILVER_500: #abacae; +$SILVER_700: #7e8087; +$SILVER_900: #555761; + +$SLATE_100: #95a3ab; +$SLATE_300: #667885; +$SLATE_500: #485a6c; +$SLATE_700: #273445; +$SLATE_900: #0e141f; + +$BLACK_100: #666; +$BLACK_300: #4d4d4d; +$BLACK_500: #333; +$BLACK_700: #1a1a1a; +$BLACK_900: #000; \ No newline at end of file diff --git a/gtk-4.0/_widgets.scss b/gtk-4.0/_widgets.scss new file mode 100755 index 0000000..9c999ee --- /dev/null +++ b/gtk-4.0/_widgets.scss @@ -0,0 +1,40 @@ +/*********** + * Widgets * + ***********/ + +@import 'widgets/action-bars'; +@import 'widgets/app-notifications'; +@import 'widgets/base-states'; +@import 'widgets/buttons'; +@import 'widgets/calendar'; +@import 'widgets/checks-radios'; +@import 'widgets/color-chooser'; +@import 'widgets/comboboxes'; +@import 'widgets/dialogs'; +@import 'widgets/entries'; +@import 'widgets/expanders'; +@import 'widgets/floating-bar'; +@import 'widgets/frames'; +@import 'widgets/granite'; +@import 'widgets/header-bars'; +@import 'widgets/infobars'; +@import 'widgets/level-bars'; +@import 'widgets/links'; +@import 'widgets/lists'; +@import 'widgets/menus'; +@import 'widgets/misc'; +@import 'widgets/notebooks'; +@import 'widgets/paned'; +@import 'widgets/pathbars'; +@import 'widgets/popovers'; +@import 'widgets/progress-bars'; +@import 'widgets/scales'; +@import 'widgets/scrollbars'; +@import 'widgets/sidebar'; +@import 'widgets/spinbuttons'; +@import 'widgets/spinner'; +@import 'widgets/switches'; +@import 'widgets/toolbars'; +@import 'widgets/tooltips'; +@import 'widgets/treeviews'; +@import 'widgets/windows'; diff --git a/gtk-4.0/apps/_budgie.scss b/gtk-4.0/apps/_budgie.scss new file mode 100755 index 0000000..86ef974 --- /dev/null +++ b/gtk-4.0/apps/_budgie.scss @@ -0,0 +1,1008 @@ +/********* +* Budgie * +*********/ +$_borders_color: darken($headerbar_color, 10%); +$alert_color: $red; +$button_bg: transparent; +$entry_border: transparent; +$mpris_overlay_fg: $fg_color; +$mpris_overlay_bg: transparentize(if($variant=='light',$base_color, darken($bg_color, 10%)), 0.1); +$mpris_overlay_border: $top_highlight; +$panel_bg: transparentize( darken($headerbar_color,10%),0.05); +$panel_color: $headerbar_fg_color; +$panel_secondary_color: lighten($headerbar_fg_color, 70%); +$panel_border: transparentize($_borders_color, 0.08); +$panel_shadow: transparentize(black, 0.7); +$raven_bg: transparentize($headerbar_color, 0.08); +$raven_expander_border: transparentize($_borders_color, 0.05); +$raven_border: transparentize($_borders_color, 0.08); +$raven_expander_bg: transparentize(lighten($panel_bg, 3%), 0.5); +$raven_background_bg: transparent; +$raven_background_border: transparent; + +$depth: 0 1px 1px rgba(0, 0, 0, 0.06), +0 1px 2px rgba(0, 0, 0, 0.20), +inset 0px 1px 0px 0px $top_highlight; + +@function gtkalpha($c,$a) { + @return unquote("alpha(#{$c},#{$a})"); +} + +$roundness: 2px; +$border_width: 1px; +$pos_list: ((top, bottom),(bottom,top),(left,right),(right,left)); + +// Container for both the "panel" area and the shadow. Wise to keep +// this transparent.. +.budgie-container { + background-color: transparent; + &:backdrop { background-color: transparent; } + + popover list, + popover row { + border: none; + background: none; + padding: 0; + margin: 0; + } +} + +.budgie-popover .container, +.budgie-popover border, +.budgie-popover list, +.budgie-popover row { + @extend %reset_style +} + +%reset_style { + padding: 0; + margin: 0; + background: none; + border: none; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + opacity: 1; + min-width: 0; + min-height: 0; +} + +.budgie-popover, +.budgie-popover.background { + border-radius: 2px; + padding: 0; + background: if($variant == 'light', linear-gradient(to bottom, #EAEAEA, rgb(187, 184, 184)) , mix($base_color, darken($headerbar_color, 8%), 30%)); + background-clip: border-box; + box-shadow: 0 2px 3px 1px transparentize(black, 0.65); + border: 1px solid $_borders_color; + list, + row { + &:hover { background: none; } + } + + > frame.container { + margin: 0 -1px -1px; // remove gap + padding: 2px 0 0; + } + button { + color: $panel_color; + border: none; + background: transparent; + // @include button(normal-header); + &:hover { + color: $selected_bg_color; + } + } +} + +.budgie-popover > .container { + padding: 2px; +} + +// Budgie Menu +.budgie-menu { + color: $panel_color; + .container { padding: 0; } + + button:hover { -gtk-icon-effect: none; } + + entry.search { + border: none; + background: none; + padding: 5px 2px; + border-bottom: 1px solid $_borders_color; + border-radius: 0; + font-size: 120%; + box-shadow: none; + color:$panel_color; + image { + &:dir(ltr) { padding-left: 8px; padding-right: 12px; } + &:dir(rtl) { padding-left: 12px; padding-right: 8px; } + } + } + + .categories { + border-width: 0; + margin-left: 3px; + background: transparent; + &:dir(ltr) { border-right: 1px solid $_borders_color; } + &:dir(rtl) { border-left: 1px solid $_borders_color; } + } + + .category-button { + padding: 7px; + border-radius: 2px 0 0 2px; + + &:hover { + background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); + color: $fg_color; + } + &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } + &:checked { + color: $selected_fg_color; + background: $suggested_bg_color; + &:hover { + color: transparentize($selected_fg_color, 0.1); + } + } + &:checked:disabled { + opacity: 0.5; + label { color: transparentize($selected_fg_color, 0.3); } + } + + } + + scrollbar { + background-color: transparent; + border-color: $_borders_color; + } + + button:not(.category-button) { + padding-top: 5px; + padding-bottom: 5px; + border-radius: 0; + box-shadow: none; + background:yellow; + } + button{ + border: none; + background: transparent; + } + + undershoot, overshoot { background: none; } + + list { + color: transparentize($panel_color, 0.3); + } +} + +// Menu Button +button.budgie-menu-launcher { + padding: 0 2px; + color: $panel_secondary_color; + box-shadow: none; + background-color: transparent; + &:hover { color: $panel_secondary_color; } + &:active, &:checked { color: $panel_secondary_color; } + + &:backdrop { + color: $panel_secondary_color; + background-color: transparent; + &:hover { color: $panel_secondary_color; } + &:active, &:checked { + color: $selected_bg_color; + box-shadow: none; + background-color: mix($bg_color, $base_color, 20%); + } + } +} + +// User Menu +.user-menu { + + .content-box separator { + margin-left: 6px; + margin-right: 6px; + background-color: transparentize($fg_color, 0.9); + } + + button { margin: 5px; } + + // top-row (user-name and avatar) + > box.vertical row.activatable:first-child, + > frame.container > box.vertical row.activatable:first-child { + + .indicator-item { + box-shadow: $depth; + background-color: $selected_bg_color; + transition-duration: 0.2s; + + &:dir(ltr) { // mask avatar's background + padding-left: 7px; // non-scaling unit + background-position: left center; + background-repeat: no-repeat; + background-size: 38px auto; // non-scaling unit + } + &:dir(rtl) { + padding-right: 7px; + background-position: right center; + background-repeat: no-repeat; + background-size: 38px auto; + } + + label { + color: $selected_fg_color; + + &:dir(ltr) { padding-left: 5px; } + &:dir(rtl) { padding-right: 5px; } + } + + image { + color: $selected_fg_color; + + &:first-child { // avatar image + min-width: 24px; + min-height: 20px; + } + } + } + } +} + +// Raven Trigger +button.raven-trigger { + padding-left: 2px; + padding-right: 2px; + color: $panel_secondary_color; + box-shadow: none; + &:hover { + color: $panel_secondary_color; + background-color: transparent; + } + &:active, &:checked { + box-shadow: none; + background-color: transparent; + color: $selected_bg_color; + } + &:backdrop { + color: $panel_secondary_color; + &:hover { + color: $panel_secondary_color; + } + &:active, &:checked { + box-shadow: none; + color: $selected_bg_color; + background-color: transparent; + } + } +} + +// Places Menu +.places-menu { + .container { padding: 0; } + + .message-bar { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + + .name-button { + border: 0; + border-radius: 0; + padding: 4px 6px; + } + + .unmount-button { + padding: 4px 4px; + border: 0; + border-radius: 0; + } + + .places-section-header { + padding: 0px; + border-bottom: 1px solid $raven_expander_border; + box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"}; + } + + .places-section-header > button { + padding: 8px; + border: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + .places-list { + background: transparentize($fg_color, 0.96); + border-bottom: 1px solid $raven_expander_border; + } + + .unlock-area { + border-top: 1px solid transparentize($raven_expander_border, 0.1); + border-bottom: 1px solid transparentize($raven_expander_border, 0.1); + } + + .unlock-area entry { + border-radius: 0; + border: 0; + } + + .unlock-area button { + border-radius: 0; + border: 0; + border-left: 1px solid transparentize($raven_expander_border, 0.1); + } + + .alternative-label { + font-size: 15px; + padding: 3px; + } + + .always-expand { + background: transparent; + border-bottom: none; + } +} + +// Night Light indicator +.night-light-indicator { + .container { padding: 0; } + + .view-header { + font-size: 14px; + padding: 10px; + border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; + box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04);"}; + } + + .display-settings-button { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border: none; + padding: 3px; + border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; + box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04);"}; + } +} + +// Panel +.budgie-panel { + color: $panel_secondary_color; + background-color: $panel_bg; + background-image: none; + box-shadow: none; + border: none; + transition: all 150ms ease-in; + + .alert { color: $alert_color; } + + &:backdrop { + color: $panel_secondary_color; + background-color: $panel_bg; + } + + button { + border-top-width: 0; + border-bottom-width: 0; + border-radius: 0; + &.flat { + background: transparent; + border: none; + &:hover, &:active, &:checked { + background: transparent; + color: $selected_bg_color; + } + } + } + + popover list, + popover row { + padding: 0; + margin: 0; + } + + label { + color: $panel_secondary_color; + font-weight: 700; + } + + &.transparent { + background-color: transparentize($panel_bg, 0.75); + + .top & { + border-bottom-color: transparent; + } + + .bottom & { + border-top-color: transparent; + } + + .left & { + border-right-color: transparent; + } + + .right & { + border-left-color: transparent; + } + } + + .end-region { + // background-color: rgba(0,0,0,0.3); + border-radius: 0px; + separator { background-color: transparentize($headerbar_fg_color, 0.85); } + label { + font-weight: 700; + color: $headerbar_fg_color; + } + } +} + +// Tasklist +.budgie-panel #tasklist-button, +.budgie-panel #tasklist-button:backdrop { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: transparentize($panel_bg,1); // fixes the transition + border-radius: 0; + background-color: transparent; + box-shadow: none; + background-clip: padding-box; + + @extend %underscores; +} + +// Icon Tasklist +.budgie-panel { + + button.flat.launcher { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: transparentize($panel_bg,1); // fixes the transition + border-radius: 0; + padding: 0; + background-clip: padding-box; + background-color: transparent; + & { box-shadow: none; } + } + + .unpinned button.flat.launcher, + .pinned button.flat.launcher.running { @extend %underscores; } +} + +%underscores { + &:hover { box-shadow: none; } + &:active, &:checked { box-shadow: none; } + + @each $pos, $b_pos in $pos_list { + .#{$pos} & { + padding-#{$b_pos}: 2px; + border-#{$pos}: 2px solid transparent; + + @at-root { + .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running) { border-#{$pos}: 2px solid transparent; } + .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-#{$pos}: 2px solid transparentize(white, 0.9); } + .#{$pos} .budgie-panel .unpinned button.flat.launcher, + .#{$pos} .budgie-panel .pinned button.flat.launcher.running { border-#{$pos}: 2px solid transparentize(white, 0.9); } + } + &:hover { + border-#{$pos}: 2px solid transparentize(white, 0.75); + } + &:active, &:checked { + border-#{$pos}: 2px solid $selected_bg_color; + } + } + } +} + +@each $pos, $b_pos in $pos_list { + + // Panel borders + .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; } + + // Raven borders + .#{$pos} .raven-frame { + padding: 0; + background: none; + + border { + border: none; + border-#{$b_pos}: $border_width solid $raven_border; + } + } + + // Shadows + .#{$pos} .shadow-block { + background-color: transparent; + background-image: linear-gradient(to $b_pos, + $panel_shadow, + transparent); + } +} + +// Raven +.raven { + padding: 0; + color: $fg_color; + background: if($variant == 'light', linear-gradient(to bottom, #EAEAEA, rgb(187, 184, 184)) , mix($base_color, darken($headerbar_color, 8%), 30%)); + transition: 170ms ease-out; + + .raven-header { + * { + padding-top: 0; + padding-bottom: 0; + } + + min-height: 32px; + color: $panel_color; + border: solid $raven_expander_border; + border-width: 1px 0; + background-color: $raven_expander_bg; + + &.top { + border-top-style: none; + border-color: transparent; + margin-top: 3px; + min-height: 32px; + button.image-button { + &:hover { + color: darken($selected_bg_color,5%); + box-shadow: none; + } + } + } + + > button.text-button { + border-radius: 2px; + color: $selected_fg_color; + background-color: transparentize(darken($red,5%), 0.1); + @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); + &:hover { + border-radius: 2px; + color: $selected_fg_color; + background-color: transparentize($red, 0.1); + @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); + } + &:active { + color: $selected_fg_color; + background-color: transparentize(lighten($red,5%), 0.1); + @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); + } + } + + &.bottom { border-bottom-style: none; } + button { + @include button(normal-header); + border-radius: 0; + + &:hover { + @include button(hover-header); + border-radius: 0; + } + + &:disabled { + color: $insensitive_fg_color; + } + &.text-button.radio { + margin: 5px 0px; + min-height: 20px; + padding: 3px; + &:active, + &:checked { + @include button(active-header); + } + } + } + } + + list { + color: $panel_color; + background-color: transparent; + &:selected { background-color: transparentize($selected_bg_color,0.1); } + row, + row.activatable { + + background-color: transparent; + &:hover { background-color: transparentize(lighten($panel_bg, 15%), 0.7);} + &:selected { background-color: transparentize($selected_bg_color,0.1); } + } + } + + .raven-background { + color: $panel_color; + background-color: transparent; + border-color: transparent; + + &.middle { border-bottom-style: none; } // applet background between two headers + } + + .powerstrip { + background-color: transparent; + border-top-color: transparent; + } + + .powerstrip button.image-button { + border-radius:50%; + padding: 5px; + min-width: 32px; + min-height: 32px; + margin-bottom: 3px; + + background: $purple; + + color: $selected_fg_color; + box-shadow: $depth; + border: none; + font-size: 100%; + + &:hover { + background: transparentize($purple,0.15); + color: $selected_fg_color; + } + &:active { + background: $purple; + color: $selected_fg_color; + } + &:first-child { + background: $suggested_bg_color; + + &:hover { + background: transparentize($selected_bg_color, 0.15); + } + &:active { + background: $selected_bg_color; + } + } + &:last-child { + background: $destructive_bg_color; + + &:hover { + background: transparentize($red, 0.15); + } + &:active { + background: $red; + } + } + } + .option-subtitle { + font-size: 13px; + } +} + +// Calendar +calendar.raven-calendar { + padding: 6px; + color: $panel_color; + background: transparent; + border-color: transparent; + + &:indeterminate { color: gtkalpha(currentColor,0.3); } + + &:selected { + background: transparent; + color: darken($selected_bg_color, 4%); + font-weight: bold; + } + + &:backdrop { background-color: transparent; } + + &.header { + color: $panel_color; + border: none; + border-radius: 0; + background-color: transparent; + } + & button, & button:focus { + color: gtkalpha(currentColor,0.5); + background-color: transparent; + + &:hover { + color: $fg_color; + background-color: transparent; + } + } +} + +// MPRIS Applet +.raven-mpris { + color: $mpris_overlay_fg; + background-color: $mpris_overlay_bg; + border: solid $mpris_overlay_border; + border-width: 1px 0; + border-bottom-color: $bottom_highlight; + + button.image-button { + padding: 10px; + background-color: $base_color; + box-shadow: $depth; + + &:hover { background-color: $selected_bg_color; } + + &:active { background-color: darken($selected_bg_color,5%); } + + &:first-child { margin-right: 4px; } + + &:last-child { margin-left: 4px; } + + &:last-child, + &:first-child { + padding: 4px; + margin-top: 6px; + margin-bottom: 6px; + } + } +} + +// Notifications +.budgie-notification-window { + background: none; + border-radius: 1px; + button { + background-color: $selected_bg_color; + color: $selected_fg_color; + border: none; + &:hover { + background-color: darken($selected_bg_color, 5%); + border: none; + } + &:active, &:checked { background-color: darken($selected_bg_color, 5%); } + } +} + +.budgie-notification { + &.background { + border-radius: 1px; + } + .notification-title { + font-size: 110%; + color: $headerbar_fg_color; + } + .notification-body { color: transparentize($headerbar_fg_color, 0.3); } + button { + background-color: transparent; + color: $selected_fg_color; + &:hover { + background-color: transparent; + color: $red; + box-shadow: none; + } + &:active, &:checked { + background-color: transparent; + color: darken($red, 5%); + } + } +} + +.drop-shadow { + color: $headerbar_fg_color; + background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); + box-shadow: 0 1px 2px 0 transparentize(black, 0.8); + border-radius: 2px; +} + +// On Screen Display in Budgie +.budgie-osd-window { + @extend .budgie-notification-window; +} + +// Internal part of the OSD +.budgie-osd { + @extend .budgie-notification; +} + +// Alt+tab switcher in Budgie +.budgie-switcher-window { + @extend .budgie-notification-window; + + // Flowbox + flowbox { color: $fg_color; } + flowboxchild { + padding: 3px; + margin: 3px; + color: $fg_color; + + &:hover { background-color: $button_bg; } + &:active { color: $fg_color; } + &:selected { + color: $selected_fg_color; + background-color: transparentize($selected_bg_color,0.5); + + &:active { color: $selected_fg_color; } + &:hover { background-color: mix(black, $selected_bg_color, 10%); } + &:disabled { + color: transparentize($selected_fg_color, 0.3); + background-color: transparentize($selected_bg_color, 0.3); + label { color: transparentize($selected_fg_color, 0.3); } + } + } + } +} + +// Internal part of the Switcher +.budgie-switcher { + @extend .budgie-notification; +} + +// Session Dialog +.budgie-session-dialog { + color: $headerbar_fg_color; + background-color: $panel_bg; + + label:backdrop { color: $backdrop_headerbar_fg_color; } + &.background { @extend .drop-shadow; } + .dialog-title { font-size: 120%; } + + .linked.horizontal > button { + margin-bottom: 0; + min-height: 32px; + border-bottom: none; + border-color:$_borders_color; + border-radius: 0; + color: #fff; + background-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.20); + + label { font-weight: 700; } + &:first-child { border-left: none; border-bottom-left-radius: 2px; } + &:last-child { border-right: none; border-bottom-right-radius: 2px; } + &:hover { + background-color: transparentize($selected_bg_color, 0.1); + &:backdrop { + label { color: transparentize(white, 0.5); } + } + } + + @each $b_type, $b_color in (suggested-action, $selected_bg_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { + background-color: transparentize($b_color, 0.1); + &:hover { background-color: transparentize(lighten($b_color,5%), 0.1); } + &:active, &:checked { background-color: transparentize(lighten($b_color,5%), 0.1); } + } + } + } + + entry { + background-color: #505359; + color: $headerbar_fg_color; + &:focus { background-color: #505359; } + &:backdrop { background-color: #505359; } + } +} + +// PolKit Dialog +.budgie-polkit-dialog { + @extend .budgie-session-dialog; + + .message { color: transparentize($headerbar_fg_color, 0.3); } + .failure { color: $alert_color; } +} + +// Run Dialog +.budgie-run-dialog { + @extend .budgie-session-dialog; + + entry.search, entry.search:focus { + font-size: 120%; + padding: 8px 5px; + border: none; + box-shadow: none; + + image { + color: $headerbar_fg_color; + &:dir(ltr) { padding-left: 8px; padding-right: 12px; } + &:dir(rtl) { padding-left: 12px; padding-right: 8px; } + } + } + + list row:selected .dim-label { opacity: 1; } + + scrolledwindow { border-top: 1px solid darken($entry_border, 5%); } +} + +// Budgie styled Gtk Menus +.budgie-menubar { + menu { + margin: 4px; + padding: 5px; + border-radius: 0; + background-color: $panel_bg; + menuitem:hover { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + arrow { + border:none; + min-width:16px; + min-height:16px; + + &.top { + -gtk-icon-source:-gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); + } + + &.bottom { + -gtk-icon-source:-gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid mix($fg_color, $raven_bg, 10%); + } + } + + menuitem { + accelerator { + color: transparentize($fg_color, 0.65); + } + + check, radio { + min-height: 16px; + min-width: 16px; + } + } +} + +// settings-window +window.background.budgie-settings-window.csd { + + > box.horizontal > stack > scrolledwindow { + + // hide double-borders + buttonbox.inline-toolbar { border-style: none none solid; } + + } +} + +.workspace-switcher { + + .workspace-layout { + border: 0 solid $panel_bg; + + .top &, + .bottom & { + &:dir(ltr) { border-left-width: 1px; } + + &:dir(rtl) { border-right-width: 1px; } + } + + .left &, + .right & { border-top-width: 1px; } + } + + .workspace-item, + .workspace-add-button { + border: 0 solid lighten($panel_bg, 10%); + + .top &, + .bottom & { + &:dir(ltr) { border-right-width: 1px; } + + &:dir(rtl) { border-left-width: 1px; } + } + + .left &, + .right & { border-bottom-width: 1px; } + } + + .workspace-item { + + &.current-workspace { background-color: lighten($panel_bg, 5%); } + } + + .workspace-add-button { + border: none; + background: transparent; + box-shadow: none; + &:hover { box-shadow: none; } + + &:active { background-image: none; } + + &:active image { margin: 1px 0 -1px; } + } + + .workspace-icon-button { + .budgie-panel & { // to overwrite the .budgie-panel button style below + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 2px; + } + } +} \ No newline at end of file diff --git a/gtk-4.0/apps/_caja.scss b/gtk-4.0/apps/_caja.scss new file mode 100644 index 0000000..c389303 --- /dev/null +++ b/gtk-4.0/apps/_caja.scss @@ -0,0 +1,79 @@ +.caja-notebook { + + .frame { border-width: 0 0 1px; } + + .entry { + background: $bg_color; + color: $fg_color; + border-color: $borders_color; + &:selected { + background: $selected_bg_color; + color: $selected_fg_color; + } + } +} + + /************** + * Caja sidebar * + **************/ + +.caja-side-pane { + + .frame { border-width: 1px 0 0; } + + background: $headerbar_color; + treeview.view, + textview.view text, + viewport.frame, + widget .vertical { + background: $_sidebar_color; + padding: 3px 2px; + color: #98abb2; + &:hover { + background-color: transparentize(darken($_sidebar_color, 2%), 0.05); + } + &:selected { + color: $selected_fg_color; + background:$selected_bg_color; + } + } +} + + /************** + * Caja pathbar * + **************/ + +.caja-navigation-window paned, .caja-navigation-window .primary-toolbar { + background: $headerbar_color; +} + +.caja-navigation-window { + + .primary-toolbar button, + .vertical button.image-button.toggle:not(.text-button) { + &, &:backdrop { @include button(undecorated); } + &:hover, + &:active, + &:backdrop:active, + &:backdrop:checked { + background: $selected_bg_color; + box-shadow: none; + &, & label { + color: $selected_fg_color; + } + } + } +} + +.caja-pathbar button { + @include button(normal-header); + margin-top: 7px; + margin-bottom: 7px; + &:hover { color: $selected_bg_color; } + &:checked { @include button(active-header); } + &:backdrop:disabled { + @include button(backdrop-header,$base_color,transparentize($fg_color,0.8)); + } + +} + diff --git a/gtk-4.0/apps/_geary.scss b/gtk-4.0/apps/_geary.scss new file mode 100755 index 0000000..2bae579 --- /dev/null +++ b/gtk-4.0/apps/_geary.scss @@ -0,0 +1,37 @@ +/********* + * Geary * + *********/ + +.geary-titlebar-left, +.geary-titlebar-right { + + .separator { + opacity: 0; + } +} + +ConversationListView { + -GtkTreeView-grid-line-width: 0; + + .view { + &:active, + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + + &:backdrop { + background-color: $backdrop_selected_bg_color; + color: $backdrop_selected_fg_color; + } + } + + .cell { + border: solid transparentize(black, 0.8); + border-width: 0 0 1px 0; + &:selected { + color: $selected_fg_color; + border: 0px solid darken($selected_bg_color, 10% ); + } + } + } +} diff --git a/gtk-4.0/apps/_gnome.scss b/gtk-4.0/apps/_gnome.scss new file mode 100755 index 0000000..244a442 --- /dev/null +++ b/gtk-4.0/apps/_gnome.scss @@ -0,0 +1,206 @@ +/************ + * Nautilus * + ************/ +.nautilus-window { + .frame{ + *:selected, *:selected:backdrop{ + background: transparent; + color: $selected_bg_color; + label { + color: $selected_bg_color; + } + } + } + paned { + > separator { background-image: none; } + } + .sidebar { + background-color: transparent; + // background-image: none; + + &:backdrop { + background-color: transparent; + // background-image: none; + } + + .list-row { + button { + border: none; + background-color: transparentize(darken($base_color,3%),0.05); + &:active { + background-color: transparentize($selected_bg_color,0.25); + } + } + + &:selected { + background-color: transparentize($selected_bg_color,0.25); + &:hover { + background-color: transparentize($selected_bg_color,0.1); + } + } + + &:hover { + background-color: transparentize($base_color,0.5); + &:active { + background-color: transparentize($selected_bg_color,0.1); + } + } + } + } + &.background { + background-color: transparentize(darken($base_color,3%),0.05); + &:backdrop { + background-color: transparentize(darken($base_color,3%),0.05); + } + } + + notebook { + > stack:only-child { // the :not(:only-child) is for "hidden" notebooks + background-color: $base_color; + &:backdrop { background-color: $backdrop_base_color; } + } + } + + searchbar { + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + .searchbar-container { + margin-top: -1px; + } + + .titlebar { + .search { + border: 1px solid transparent; + border-radius: 10px; + box-shadow: none; + margin-top: 10px; + margin-bottom: 10px; + } + .path-bar-box { + .dim-label { + color:transparent; + } + widget > .text-button:last-child, + widget > .text-button:last-child:active, + widget > .text-button:last-child:checked, + button:active, button:checked { + @include button(active-header); + &:backdrop{ + &, label{ + color: darken(rgb(255, 255, 255), 4%); + } + } + } + } + .linked:not(.path-bar) { + button { + &:active, &:checked, &:active:backdrop, &:checked:backdrop { + background: transparent; + color: $selected_bg_color; + box-shadow: none; + border: none; } + } + } + } + + .linked:not(.vertical) > entry { + border-radius: 10px; + margin-right: 5px; + &:focus { + border-color: transparentize($selected_bg_color, 0.4); + } + } +} + +.nautilus-circular-button { + border-radius: 20px; + -gtk-outline-radius: 20px; +} + +.disk-space-display { + border: 2px solid; + + .unknown { + background-color: #888a85; + border-color: darken(#888a85, 20%); + } + + .used { + background-color: #9FB0B9; + border-color: darken(#9FB0B9, 20%); + } + + .free { + background-color: #D8D8D8; + border-color: darken(#D8D8D8, 20%); + } +} + +.nautilus-desktop { + + color: $fg_color; + + .nautilus-canvas-item { + border-radius: 5px; + color: $selected_fg_color; + text-shadow: 1px 1px transparentize(black, 0.4); + + &:active { + color: $fg_color; + text-shadow: none; + } + + &:hover { + color: $fg_color; + text-shadow: none; + } + + &:selected { + color: $selected_fg_color; + text-shadow: none; + } + + .dim-label { + &:selected { + color: $selected_fg_color; + } + } + } + + .nautilus-list { + + .dim-label { + &:selected { + color: $selected_fg_color; + } + } + } +} + +/********* + * Gedit * + *********/ +.gedit-search-slider { + padding: 4px; + border-radius: 0 0 3px 3px; + border: 0; + background-color: $bg_color; + } + + + /********* + * Gnucash * + *********/ + #gnc-id-main-window { + entry.gnc-class-register-foreground { + background: transparent; + border: none; + box-shadow: none; + } + .arrow.button.toggle { + transition: none; + box-shadow: none; + &:hover { border-color: $selected_bg_color; } + } +} \ No newline at end of file diff --git a/gtk-4.0/apps/_lightdm.scss b/gtk-4.0/apps/_lightdm.scss new file mode 100755 index 0000000..f9ff41a --- /dev/null +++ b/gtk-4.0/apps/_lightdm.scss @@ -0,0 +1,115 @@ +/*********** + * LightDm * + ***********/ + +// the panel widget at the top +#panel_window { + background-color: $panel_bg_color; + color: $panel_fg_color; + font-weight: bold; + box-shadow: inset 0 -1px darken($panel_bg_color, 7%); + + // the menubars/menus of the panel, i.e. indicators + .menubar, + .menubar > .menuitem + menubar, + menubar > menuitem { + background-color: transparent; + color: $panel_fg_color; + font-weight: bold; + } + + .menubar .menuitem:disabled, + menubar menuitem:disabled { + color: transparentize($panel_fg_color, 0.5); + + GtkLabel { color: inherit; } + label { color: inherit; } + } + .menubar .menu > .menuitem, + menubar menu > menuitem { font-weight: normal; } +} + +// the login window +#login_window, +#shutdown_dialog, +#restart_dialog { + font-weight: normal; + border-style: none; + background-color: transparent; + color: $fg_color; +} + +// the top half of the login-window, in GtkDialog terms, the content +#content_frame { + padding-bottom: 14px; + background-color: $bg_color; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border: solid transparentize(black, 0.9); + border-width: 1px 1px 0 1px; +} + +#content_frame button { + @include button(normal); + + &:hover { @include button(hover); } + &:active, &:checked { @include button(active); } + &:disabled { @include button(insensitive); } +} + +// the lower half of the login-window, in GtkDialog terms the buttonbox or action area +#buttonbox_frame { + padding-top: 20px; + padding-bottom: 0px; + border-style: none; + background-color: if($variant=='light', $osd_bg_color, $headerbar_color); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: solid transparentize(black, 0.9); + border-width: 0 1px 1px 1px; +} + +#buttonbox_frame button{ + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } + &:disabled { @include button(osd-insensitive); } +} + +#login_window #user_combobox { + color: $fg_color; + font-size: 13px; + + .menu, + menu { font-weight: normal; } +} + +// the user's avatar box +#user_image { + padding: 3px; + border-radius: 2px; +} + +// the shutdown button +#shutdown_button.button { + @include button(suggested_destructive, $destructive_color); + + &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); } +} + +// the restart button +#restart_button.button { + @include button(suggested_destructive, $suggested_color); + + &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); } +} + +// the warning, in case a wrong password is entered or something else goes wrong according to PAM +#greeter_infobar { + border-bottom-width: 0; + font-weight: bold; +} diff --git a/gtk-4.0/apps/_mate.scss b/gtk-4.0/apps/_mate.scss new file mode 100644 index 0000000..05c9b41 --- /dev/null +++ b/gtk-4.0/apps/_mate.scss @@ -0,0 +1,20 @@ +// +// Mate OSD Window +// + +MsdOsdWindow.background.osd { + border-radius: 2px; + border: 1px solid $borders_color; + + .progressbar { + background-color: $selected_bg_color; + border: none; + border-color: $selected_bg_color; + border-radius: 5px; + } + .trough { + background-color: darken($osd_bg_color, 5%); + border: none; + border-radius: 5px; + } + } \ No newline at end of file diff --git a/gtk-4.0/apps/_nemo.scss b/gtk-4.0/apps/_nemo.scss new file mode 100644 index 0000000..72cb1b7 --- /dev/null +++ b/gtk-4.0/apps/_nemo.scss @@ -0,0 +1,68 @@ +.nemo-window { + .places-treeview { + -NemoPlacesTreeView-disk-full-bg-color: lighten($_sidebar_color, 15%); + -NemoPlacesTreeView-disk-full-fg-color: $teal; + -GtkTreeView-vertical-separator: 7; + .view.cell, + iconview.cell { + &:hover { + background: transparentize(darken($_sidebar_color, 3%), 0.3); + } + &:selected { + background: $selected_bg_color; + } + } + } + + .sidebar { + color: #98abb2; + background-color: $_sidebar_color; + .view, .iconview, row { + background-color: transparent; + } + } + + .nemo-window-pane { + widget.entry { + background-clip: padding-box; + min-height: 28px; + padding: 5px; + color: $fg_color; + border: 1px solid $borders_color; + border-radius: 3px; + box-shadow: inset 0 1px transparentize(black, 0.1), + inset 1px 0 transparentize(black, 0.04), + inset -1px 0 transparentize(black, 0.04), + inset 0 -1px transparentize(black, 0.02), + 0 1px transparentize(white, 0.4); + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + + toolbar.primary-toolbar { + margin-bottom: -1px; + background: $headerbar_color; + button { + @include button(normal-header); + margin-top: 5px; + margin-bottom: 5px; + min-height: 24px; + &:hover { + background: transparent; + color: $selected_bg_color; + } + &:selected, + &:active, + &:checked { @include button(active-header); } + } + } + + .nemo-inactive-pane .view, + .nemo-inactive-pane iconview { + background-color: darken($base_color, 2%); + } + +} \ No newline at end of file diff --git a/gtk-4.0/apps/_pantheon.scss b/gtk-4.0/apps/_pantheon.scss new file mode 100755 index 0000000..63c069f --- /dev/null +++ b/gtk-4.0/apps/_pantheon.scss @@ -0,0 +1,445 @@ +/******** + * Gala * + *******/ + + .gala-notification { + border-width: 0; + border-radius: 2px; + color: white; + border: 1px solid $base_color; + background-color: $base_color; + + .title, + .label { + color: $fg_color; + } +} + +.gala-button { + padding: 3px; + color: $base_color; + border: none; + border-radius: 50%; + background-image: linear-gradient(to bottom, + #7e7e7e, + #3e3e3e + ); + box-shadow: inset 0 0 0 1px transparentize(white, 0.02), + inset 0 1px 0 0 transparentize(white, 0.07), + inset 0 -1px 0 0 transparentize(white, 0.01), + 0 0 0 1px transparentize(black, 0.40), + 0 3px 6px transparentize(black, 0.16), + 0 3px 6px transparentize(black, 0.23); + text-shadow: 0 1px 1px transparentize(black, 0.6); +} + +/********** + * Notify * + *********/ + +.notify { + /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ + + border-radius: 5px; + border: 1px solid transparentize(black, 0.30); + + background-color: transparentize($base_color, 0.95); + + .low {} + .critical {} +} + + +/*************** + * SwitchBoard * + ***************/ + +.category-label { + font-weight: bold; + color: $fg_color; +} + + +/************* + * Slingshot * + ************/ + +.button.app { + border: none; + border-radius: 0; + box-shadow: none; + background-image: none; + + .app { + &:hover{ + border-radius: 8px; + border: none; + background-color: transparentize($selected_bg_color, 0.7); + color: white; + } + &:focus{ + /*background-color: transparentize(black, 0.20);*/ + } + } +} + +.search-item { + border-radius: 0; + border: none; + color: $fg_color; + background: none; + + &:hover, + &:focus { + border-radius: 0; + background-color: transparentize($selected_bg_color, 0.7); + color: $selected_fg_color; + } +} + + +.search-entry-large, +.search-entry-large:focus { + border: none; + font-size: 18px; + font-weight: 300; + background-image: none; + background: none; + box-shadow: none; + border-radius: 0; +} + +.search-category-header { + font-weight: bold; + color: $fg_color; +} + + + +/********* + * Panel * + ********/ + +.panel { + background-color: transparent; + transition: all 100ms ease-in-out; + + &.maximized { + background-color: $panel_bg_color; + } + + &.translucent { + background-color: transparentize($panel_bg_color, 0.5);; + } + + &.color-light.translucent { + background-color: transparentize($panel_fg_color, 0.15); + } +} + +menubar.panel, +.panel menubar { + box-shadow: none; + border: none; +} + +.composited-indicator { + + > revealer, + > revealer image, + > revealer label, + > revealer spinner { + color: #fff; + font-weight: bold; + text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); + transition: all 200ms ease-in-out; + -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); + } + + > revealer image:first-child + label { + margin-left: 5px; + } +} + +.panel.color-light .composited-indicator { + + > revealer, + > revealer image, + > revealer label, + > revealer spinner { + color: transparentize(black, 0.4); + text-shadow: 0 1px transparentize(white, 0.9); + -gtk-icon-shadow: 0 1px transparentize(white, 0.9); + } +} + +/************** + * Calculator * + **************/ + +PantheonCalculatorMainWindow { + border-radius: 0 0 4px 4px; + + .window-frame { + border-radius:3px; + } +} + +/********* + * Cards * + *********/ + +.deck { + background-color: darken($bg_color, 8%); +} + +.card { + background-color: $base_color; + border: none; + box-shadow: 0 0 0 1px transparentize(black, 0.95), + 0 3px 3px transparentize(black, 0.8); + transition: all 150ms ease-in-out; +} + +.card.collapsed { + background-color: darken($base_color, 5%); + box-shadow: 0 0 0 1px transparentize(black, 0.95), + 0 1px 2px transparentize(black, 0.8); +} + +/********* + * Noise * + *********/ + +NoiseLibraryWindow { + border-radius: 0 0 4px 4px; + + .action-bar { + border-radius: 0 0 4px 4px; + } + + .window-frame { + border-radius:3px; + } +} + +/******** + * Snap * + ********/ + +SnapMainWindow, +SnapSnapWindow { + + .take-button { + border-radius: 0; + } +} + + +/******************* + * Photos/Shotwell * + *******************/ + +DirectWindow, +LibraryWindow { + + .the-button-in-the-combobox { + background: none; + } +} + +.checkerboard-layout { + background-color: $bg_color; + background-image: linear-gradient(45deg, + transparentize(black, 0.9) 25%, + transparent 25%, + transparent 75%, + transparentize(black, 0.9) 75%, + transparentize(black, 0.9)), + linear-gradient(45deg, + transparentize(black, 0.9) 25%, + transparent 25%, + transparent 75%, + transparentize(black, 0.9) 75%, + transparentize(black, 0.9)); + background-size: 24px 24px; + background-position: 0 0, 12px 12px +} + +.checkboard-layout .item { + background-color: $fg_color; +} + +/********* +* Avatar * +*********/ + +.avatar { + border: 1px solid transparentize(#000, 0.77); + border-radius: 50%; + box-shadow: + inset 0 0 0 1px transparentize(#fff, 0.95), + inset 0 1px 0 0 transparentize(#fff, 0.55), + inset 0 -1px 0 0 transparentize(#fff, 0.85), + 0 1px 3px transparentize(#000, 0.88), + 0 1px 2px transparentize(#000, 0.77); +} + +/************ +* Level bar * +*************/ + +.source-list.view { + &.level-bar { + &, &:selected, &:selected:focus { + background: linear-gradient(lighten($_sidebar_color, 15%), lighten($_sidebar_color, 15%)); + border: 1px solid transparentize(black, 0.86); + box-shadow: 0 1px 0 transparentize(#000, 0.75); + border-radius: 2px; + } + &.fill-block { + border: none; + &, &:hover, &:selected, &:selected:focus { + @include scale-highlight(right); + } + } + } +} + + +/************************** + * Colors in context menu * +**************************/ + +checkbutton.color-button { + border: 1px solid $borders_color; + border-radius: 100px; + background-clip: border-box; + padding: 0; + margin: 2px 1px; + + > check { + -gtk-icon-source: none; + background: none; + margin-right: 0; + padding: 2px; + } + + &.none { + > check { + background-color: transparent; + border-radius: 100px; + -gtk-icon-source: -gtk-icontheme("close-symbolic"); + } + } + +} + +radiobutton.color-button { + > radio { + -gtk-icon-source: none; + margin-right: 0; + border: 1px solid rgba(black, 0.15); + border-radius: 100px; + background-clip: border-box; + } + + &:active > radio { + border: 1px solid rgba(black, 0.35); + } +} + +.color-button { + check, + check:checked, + radio, + radio:checked, { + background-image: none; + border: 1px solid rgba(black, 0.2); + border-radius: 50%; + color: $base_color; + -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); + } + + &.red check, + &.red radio, + &.strawberry check, + &.strawberry radio { + background-color: #{'@STRAWBERRY_300'}; + -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'}; + } + + &.orange check, + &.orange radio { + background-color: #{'@ORANGE_300'}; + -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'}; + } + + &.yellow check, + &.yellow radio, + &.banana check, + &.banana radio { + background-color: #{'@BANANA_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'}; + } + + &.green check, + &.green radio, + &.lime check, + &.lime radio { + background-color: #{'@LIME_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'}; + } + + &.blue check, + &.blue radio, + &.blueberry check, + &.blueberry radio { + background-color: #{'@BLUEBERRY_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'}; + } + + &.purple check, + &.purple radio, + &.grape check, + &.grape radio { + background-color: #{'@GRAPE_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'}; + } + + &.brown check, + &.brown radio, + &.cocoa check, + &.cocoa radio { + background-color: #{'@COCOA_300'}; + -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'}; + } + + &.mint check, + &.mint radio { + background-color: #{'@MINT_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'}; + } + + &.pink check, + &.pink radio, + &.bubblegum check, + &.bubblegum radio { + background-color: #{'@BUBBLEGUM_500'}; + -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'}; + } + + &.slate check, + &.slate radio { + background-color: #{'@SLATE_300'}; + -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'}; + + } + + &.auto radio { + background-image: url("assets/color-button-auto.png"); + background-position: -1px -1px; + background-repeat: no-repeat; + background-size: calc(100% + 2px); + } +} \ No newline at end of file diff --git a/gtk-4.0/apps/_unity.scss b/gtk-4.0/apps/_unity.scss new file mode 100755 index 0000000..b21e7c8 --- /dev/null +++ b/gtk-4.0/apps/_unity.scss @@ -0,0 +1,170 @@ +/******** +* Unity * +*********/ + +$unity_color: #eeeeee; /* Unity window border color */ +$unity_text_color: #31363D; /* Unity window text color */ +$backdrop_unity_text_color: darken($unity_text_color,10%); /* Backdrop Unity window text color */ +$unity_panel_color: darken($unity_color, 10%); /* Unity panel color #454D50 */ + +UnityDecoration { + + /* Border properties (top, right, bottom, left) */ + -UnityDecoration-extents: 28px 1px 1px 1px;/* the size of the decorations */ + -UnityDecoration-input-extents: 10px;/* the extra size of the input areas */ + + /* Shadows settings */ + -UnityDecoration-shadow-offset-x: 1px;/* Size property, the shadow x offset */ + -UnityDecoration-shadow-offset-y: 1px;/* Size property, the shadow y offset */ + -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.647);/* Color property, active window shadow color */ + -UnityDecoration-active-shadow-radius: 8px;/* Size property, active window shadow radius */ + -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.647);/* Color property, inactive windows shadow color */ + -UnityDecoration-inactive-shadow-radius: 5px;/* Size property, inactive windows shadow radius */ + + /* Glow applied to the selected scaled window */ + -UnityDecoration-glow-size: 8px;/* Size property, size of glow */ + -UnityDecoration-glow-color: $selected_bg_color;/* Color property of the glow */ + + /* Title settings */ + -UnityDecoration-title-indent: 10px;/* Size property, left indent of the title */ + -UnityDecoration-title-fade: 35px;/* Size property, space of the title that can be faded */ + -UnityDecoration-title-alignment: 0.0;/* Float from 0.0 to 1.0, to align the title */ + background-color: $unity_color; + color: $unity_text_color; + + .top { + padding: 0 5px 0 5px; + border-radius: 4px 4px 0px 0px; + box-shadow: none; + border: 1px solid $unity_color; + border-bottom-width: 0; + background-color: $unity_color; + color: $unity_text_color; + border-top: 1px solid rgba(255,255,255,0.1); + + &:backdrop { + border-bottom-width: 0; + color: $backdrop_unity_text_color; + border-top: 1px solid rgba(255,255,255,0.1); + } + + .menuitem { + color: $unity_text_color; + + &:backdrop { + color: $backdrop_unity_text_color; + } + } + } +} + + +UnityDecoration.left, +UnityDecoration.right { + background-repeat: repeat-x; + background-color: darken($unity_color, 0.6); + background-size: 1px 120px; + background-clip: border-box; + background-image: linear-gradient(to bottom, + $unity_color, + darken($unity_color, 0.6) + ); +} + +UnityDecoration.bottom { + background-size: 1px; + background-repeat: repeat-x; + background-color: darken($unity_color, 0.6); +} + +UnityDecoration.left:backdrop, +UnityDecoration.right:backdrop, +UnityDecoration.bottom:backdrop { + background-size: 1px; + background-repeat: repeat-x; +} + + +/************** +* Unity Panel * +***************/ + +UnityPanelWidget, +.unity-panel { +background-color: $unity_panel_color; +color: $unity_text_color; +} + + +UnityPanelWidget:backdrop, +.unity-panel:backdrop { + color: $backdrop_unity_text_color; +} + +.unity-panel.menuitem, +.unity-panel .menuitem { + border-width: 0 1px; + color: $unity_text_color; +} + +.unity-panel.menubar, +.unity-panel .menubar { + color: $unity_text_color; +} + +.unity-panel.menu.menubar, +.unity-panel .menu .menubar { + background-color: $unity_panel_color; + color: $unity_text_color; +} + +.unity-panel.menubar:backdrop, +.unity-panel .menubar *:backdrop { + color: $backdrop_fg_color; +} + +.unity-panel.menubar.menuitem, +.unity-panel.menubar .menuitem { + padding: 3px 5px; + border-width: 1px; + border-style: solid; + border: none; + background: none; + color: $unity_text_color; + box-shadow: none; +} + +.unity-panel.menubar.menuitem:hover, +.unity-panel.menubar .menuitem:hover { + border-radius: 0; + background-color: darken($unity_color, 1.05); + color: $unity_text_color; + box-shadow: none; +} + +.unity-panel.menubar .menuitem *:hover { + color: white; + box-shadow: none; +} + +.unity-panel.menubar .menuitem.separator, +.unity-panel.menubar.menuitem.separator { + border: none; + color: $borders_color; +} + +/* Force Quit */ +SheetStyleDialog.unity-force-quit { + background-color: $base_color; +} + + +@keyframes playbackmenuitem_spinner { + to { -gtk-icon-transform: rotate(1turn); } +} + +.menu IdoPlaybackMenuItem.menuitem:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: playbackmenuitem_spinner 1s infinite linear; + color: $selected_bg_color; +} diff --git a/gtk-4.0/apps/_xfce.scss b/gtk-4.0/apps/_xfce.scss new file mode 100644 index 0000000..57a4b54 --- /dev/null +++ b/gtk-4.0/apps/_xfce.scss @@ -0,0 +1,107 @@ +// Xfce Panel +.xfce4-panel.panel { + background-color: $panel_bg_color; + + text-shadow: none; + -gtk-icon-shadow: none; + + button.flat { @extend %panelbutton; } + } + + #tasklist-button { + color: transparentize($panel_fg_color, 0.2); + border-radius: 0; + border: none; + background-color: transparentize($panel_bg_color, 1); + + &:hover { + color: lighten($panel_fg_color, 10%); + background-color: transparentize(black, 0.83); + } + + &:checked { + color: white; + background-color: transparentize(black, 0.75); + box-shadow: inset 0 -2px $selected_bg_color; + } + } + + %panelbutton { + color: $panel_fg_color; + border-radius: 0; + border: none; + background-color: transparentize($panel_bg_color, 1); + + &:hover { + border: none; + background-color: lighten($panel_bg_color, 10%); + } + &:active, &:checked { + color: $selected_fg_color; + border-bottom: 2px solid $selected_bg_color; + background-color: lighten($panel_bg_color, 5%); + + label, image { color: inherit; } + } + } + + + +#whiskermenu-window button { + background-color:transparent; + border: none; + border-radius: 0; + font-weight: normal; + padding: 2px; + margin: 1px 0px; + &:hover, &:checked { + background-color: $selected_bg_color; + } +} + +/* thunar */ +.thunar toolbar { + background-color: $headerbar_color; +} + +/* buttons in toolbar */ +.thunar toolbar.horizontal button image { + -gtk-icon-transform:scale(0.72); +} + +scrolledwindow.sidebar treeview.view { + background: darken($_sidebar_color, 2%); + padding: 1.5px; +} + +/* path-bar of thunar */ +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button { + margin-top: 7px; + margin-bottom: 7px; + &:hover { color: $selected_bg_color; } + &:checked { @include button(active-header); } +} + +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button { + background: none; + outline: none; + border: none; + box-shadow: none; +} + +/* thunar sidepane */ +window.thunar paned > scrolledwindow treeview.view { + + &:hover { + background: darken($_sidebar_color, 3%); + } + &:selected { + @include button(active-header); + border-radius: 0; + box-shadow: none; + } +} + +window.thunar toolbar#location-toolbar entry { + border-radius: 10px; +} \ No newline at end of file diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css new file mode 100755 index 0000000..d437c7a --- /dev/null +++ b/gtk-4.0/gtk-dark.css @@ -0,0 +1,6310 @@ +/*$selected_bg_color: #00e8c6;06d6a0*/ +/* GTK NAMED COLORS + ---------------- + use responsibly! */ +/* widget text/foreground color */ +@define-color theme_fg_color #C3C7D1; +/* text color for entries, views and content in general */ +@define-color theme_text_color #C3C7D1; +/* widget base background color */ +@define-color theme_bg_color #161925; +/* text widgets and the like base background color */ +@define-color theme_base_color #181b28; +/* base background color of selections */ +@define-color theme_selected_bg_color #c50ed2; +/* text/foreground color of selections */ +@define-color theme_selected_fg_color #fefefe; +/* base background color of disabled widgets */ +@define-color insensitive_bg_color #171a26; +/* text foreground color of disabled widgets */ +@define-color insensitive_fg_color #6d707b; +/* disabled text widgets and the like base background color */ +@define-color insensitive_base_color #181b28; +/* widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #6d707b; +/* text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color #C3C7D1; +/* widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #161925; +/* text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #1a1d2b; +/* base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #c50ed2; +/* text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #fefefe; +/* widgets main borders color */ +@define-color borders rgba(12, 14, 21, 0.8); +/* widgets main borders color on backdrop windows */ +@define-color unfocused_borders rgba(13, 16, 23, 0.82); +/* these are pretty self explicative */ +@define-color warning_color #cc5500; +@define-color error_color #e6133e; +@define-color success_color #0096b1; +@define-color fg_color #C3C7D1; +@define-color text_color #C3C7D1; +@define-color bg_color #161925; +@define-color base_color #181b28; +@define-color selected_bg_color #c50ed2; +@define-color selected_fg_color #fefefe; +@define-color unfocused_fg_color #6d707b; +@define-color unfocused_text_color #C3C7D1; +@define-color unfocused_bg_color #161925; +@define-color unfocused_base_color #1a1d2b; +@define-color unfocused_selected_bg_color #c50ed2; +@define-color unfocused_selected_fg_color #fefefe; +/* 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 shade(#C3C7D1, 1.8); +@define-color wm_unfocused_title #6d707b; +@define-color wm_highlight rgba(0, 0, 0, 0); +@define-color wm_borders_edge rgba(255, 255, 255, 0.1); +@define-color wm_bg_a shade(#161925, 1.2); +@define-color wm_bg_b #161925; +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); +@define-color wm_button_hover_color_a shade(#161925, 1.3); +@define-color wm_button_hover_color_b #161925; +@define-color wm_button_active_color_a shade(#161925, 0.85); +@define-color wm_button_active_color_b shade(#161925, 0.89); +@define-color wm_button_active_color_c shade(#161925, 0.9); +@define-color content_view_bg #181b28; +@define-color text_view_bg #181b28; +@define-color budgie_tasklist_indicator_color #c50ed2; +@define-color budgie_tasklist_indicator_color_active #c50ed2; +@define-color placeholder_text_color #a1a5b0; +@define-color STRAWBERRY_100 #ff8c82; +@define-color STRAWBERRY_300 #ed5353; +@define-color STRAWBERRY_500 #c6262e; +@define-color STRAWBERRY_700 #a10705; +@define-color STRAWBERRY_900 #7a0000; +@define-color ORANGE_100 #ffc27d; +@define-color ORANGE_300 #ffa154; +@define-color ORANGE_500 #f37329; +@define-color ORANGE_700 #cc3b02; +@define-color ORANGE_900 #a62100; +@define-color BANANA_100 #fff394; +@define-color BANANA_300 #ffe16b; +@define-color BANANA_500 #f9c440; +@define-color BANANA_700 #d48e15; +@define-color BANANA_900 #ad5f00; +@define-color LIME_100 #d1ff82; +@define-color LIME_300 #9bdb4d; +@define-color LIME_500 #68b723; +@define-color LIME_700 #3a9104; +@define-color LIME_900 #206b00; +@define-color MINT_100 #89ffdd; +@define-color MINT_300 #43d6b5; +@define-color MINT_500 #28bca3; +@define-color MINT_700 #0e9a83; +@define-color MINT_900 #007367; +@define-color BLUEBERRY_100 #8cd5ff; +@define-color BLUEBERRY_300 #64baff; +@define-color BLUEBERRY_500 #3689e6; +@define-color BLUEBERRY_700 #0d52bf; +@define-color BLUEBERRY_900 #002e99; +@define-color BUBBLEGUM_100 #fe9ab8; +@define-color BUBBLEGUM_300 #f4679d; +@define-color BUBBLEGUM_500 #de3e80; +@define-color BUBBLEGUM_700 #bc245d; +@define-color BUBBLEGUM_900 #910e38; +@define-color GRAPE_100 #e4c6fa; +@define-color GRAPE_300 #cd9ef7; +@define-color GRAPE_500 #a56de2; +@define-color GRAPE_700 #7239b3; +@define-color GRAPE_900 #452981; +@define-color COCOA_100 #a3907c; +@define-color COCOA_300 #8a715e; +@define-color COCOA_500 #715344; +@define-color COCOA_700 #57392d; +@define-color COCOA_900 #3d211b; +@define-color SILVER_100 #fafafa; +@define-color SILVER_300 #d4d4d4; +@define-color SILVER_500 #abacae; +@define-color SILVER_700 #7e8087; +@define-color SILVER_900 #555761; +@define-color SLATE_100 #95a3ab; +@define-color SLATE_300 #667885; +@define-color SLATE_500 #485a6c; +@define-color SLATE_700 #273445; +@define-color SLATE_900 #0e141f; +@define-color BLACK_100 #666; +@define-color BLACK_300 #4d4d4d; +@define-color BLACK_500 #333; +@define-color BLACK_700 #1a1a1a; +@define-color BLACK_900 #000; +/***************** +* Drawing mixins * +*****************/ +/********* +* Common * +*********/ +* { + padding: 0; + -GtkToolButton-icon-spacing: 4; + -GtkTextView-error-underline-color: #e6133e; + -GtkScrolledWindow-scrollbar-spacing: 0; + -GtkToolItemGroup-expander-size: 11; + -GtkWidget-text-handle-width: 20; + -GtkWidget-text-handle-height: 24; + -GtkDialog-button-spacing: 4; + -GtkDialog-action-area-border: 0; + outline-color: rgba(195, 199, 209, 0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 2px; + -gtk-secondary-caret-color: #c50ed2; } + +/*********** + * Widgets * + ***********/ +/*************** +* Action bars * +***************/ +.action-bar { + background-color: #030305; + border: solid rgba(12, 14, 21, 0.8); + border-width: 1px 0 0 0; + color: #C3C7D1; + box-shadow: none; } + .action-bar:backdrop { + background-color: #030305; + box-shadow: none; + -gtk-icon-effect: dim; } + .action-bar:first-child { + border-radius: 6px 6px 0px 0px; + border-width: 1px 1px 0px 1px; } + .action-bar:last-child { + border-radius: 0 0 6px 6px; + border-width: 0px 1px 1px 1px; } + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 10px; + border-radius: 0 0 5px 5px; + background-color: rgba(16, 19, 27, 0.98); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; } + .app-notification:backdrop, + .app-notification.frame:backdrop { + background-image: none; + transition: 200ms ease-out; } + .app-notification border, + .app-notification.frame border { + border: none; } + +/*************** + * Base States * + ***************/ +.background { + color: #C3C7D1; + background-color: #161925; } + .background:backdrop { + color: #6d707b; + background-color: #161925; + text-shadow: none; + -gtk-icon-shadow: none; } + +/* + 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 { + color: #C3C7D1; + background-color: #161925; } + .gtkstyle-fallback:hover { + color: #C3C7D1; + background-color: #292f45; } + .gtkstyle-fallback:active { + color: #C3C7D1; + background-color: #030305; } + .gtkstyle-fallback:disabled { + color: #6d707b; + background-color: #171a26; } + .gtkstyle-fallback:selected { + color: #fefefe; + background-color: #c50ed2; } + +.view, iconview, +.view text, +iconview text, +textview text { + color: #C3C7D1; + background-color: #181b28; } + .view:backdrop, iconview:backdrop, + .view text:backdrop, + iconview text:backdrop, + textview text:backdrop { + color: #a1a5b0; + background-color: #1a1d2b; } + .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + .view text:selected:focus, + iconview text:selected:focus, + textview text:selected:focus, + .view text:selected, + iconview text:selected, + textview text:selected { + border-radius: 3px; } + +textview border { + background-color: #171a27; } + +.rubberband, +rubberband, +flowbox rubberband, +.content-view rubberband, +treeview.view rubberband { + border: 1px solid #980ba2; + background-color: rgba(152, 11, 162, 0.2); } + +flowbox flowboxchild { + padding: 3px; + border-radius: 3px; } + flowbox flowboxchild:selected { + outline-offset: -2px; } + +label { + caret-color: currentColor; } + label.separator { + color: #C3C7D1; } + label.separator:backdrop { + color: #6d707b; } + label selection { + background-color: #c50ed2; + color: #fefefe; } + label:disabled { + color: #6d707b; } + label:disabled:backdrop { + color: #333955; } + label:backdrop { + color: #6d707b; } + +.dim-label, label.separator, .titlebar .subtitle, +headerbar .subtitle { + opacity: 0.55; + text-shadow: none; } + +assistant .sidebar { + background-color: #181b28; + border-top: 1px solid rgba(12, 14, 21, 0.8); } + assistant .sidebar:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } +assistant.csd .sidebar { + border-top-style: none; } +assistant .sidebar label { + padding: 6px 12px; } +assistant .sidebar label.highlight { + background-color: #393c47; } + +.app-notification, +.app-notification.frame, .osd .scale-popup, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .osd { + color: #fefefe; + border: 1px solid #171e27; + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + outline-color: rgba(254, 254, 254, 0.3); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .app-notification:backdrop, .osd .scale-popup:backdrop, popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } + +*:selected { + background: #c50ed2; + color: #fefefe; } + +/*********** + * Buttons * + ***********/ +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#e63bf2), to(transparent)); } + to { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#c50ed2), to(transparent)); } } +notebook > header > tabs > arrow, +button { + min-height: 20px; + min-width: 16px; + padding: 2px 6px; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 4px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + notebook > header > tabs > arrow, + button.flat { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + transition: none; } + notebook > header > tabs > arrow:hover, + button.flat:hover { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-duration: 500ms; + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:hover:active, + button.flat:hover:active { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + notebook > header > tabs > arrow:hover, + button:hover { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; + -gtk-icon-effect: highlight; } + notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, + button:active, + button:checked { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #af0cba; + text-shadow: none; + transition-duration: 50ms; } + notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, + button:backdrop.flat, + button:backdrop { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #1a1d2b; + text-shadow: none; + transition: 200ms ease-out; + -gtk-icon-effect: none; } + notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, + button:backdrop.flat:active, + button:backdrop.flat:checked, + button:backdrop:active, + button:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, + button:backdrop.flat:active label, + button:backdrop.flat:checked label, + button:backdrop:active label, + button:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, + button:backdrop.flat:disabled, + button:backdrop:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, + button:backdrop.flat:disabled:active, + button:backdrop.flat:disabled:checked, + button:backdrop:disabled:active, + button:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, + button.flat:backdrop, + button.flat:disabled, + button.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + notebook > header > tabs > arrow:disabled, + button:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, + button:disabled:active, + button:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, + button:disabled:active label, + button:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + notebook > header > tabs > arrow.image-button, + button.image-button { + min-width: 24px; + padding-left: 4px; + padding-right: 4px; } + notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, + button.image-button.circular, + button.image-button.sidebar-button { + padding: 6px 4px; + border-radius: 50px; + box-shadow: none; } + notebook > header > tabs > arrow.image-button.sidebar-button, + button.image-button.sidebar-button { + background-color: #252a3e; + color: #fff; } + notebook > header > tabs > arrow.image-button.sidebar-button:hover, + button.image-button.sidebar-button:hover { + background-color: #c50ed2; } + notebook > header > tabs > arrow.text-button, + button.text-button { + padding-left: 16px; + padding-right: 16px; } + notebook > header > tabs > arrow.text-button.image-button, + button.text-button.image-button { + padding-left: 8px; + padding-right: 8px; + border-radius: 2px; } + notebook > header > tabs > arrow.text-button.image-button label, + button.text-button.image-button label { + padding-left: 8px; + padding-right: 8px; } + combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), + button:drop(active) { + color: #71f79f; + border-color: #71f79f; + box-shadow: inset 0 0 0 1px #71f79f; } +row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { + color: #fefefe; + border-color: transparent; } + row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { + color: #6d707b; } +button.osd { + min-width: 24px; + min-height: 20px; + color: #fefefe; + border-radius: 5px; + outline-color: rgba(254, 254, 254, 0.3); + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd.image-button { + min-width: 32px; } + button.osd:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd:active, + button.osd:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd:disabled:backdrop, + button.osd:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + border: none; } + button.osd:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + border: none; } +.app-notification button, +.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, +.osd button { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, + .osd button:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, + .osd button:active:backdrop, + .osd button:active, + .osd button:checked:backdrop, + .osd button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, + .osd button:disabled:backdrop, + .osd button:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, + .osd button:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, + .osd button.flat { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, + .osd button.flat:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, + .osd button.flat:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-image: none; + border-color: transparent; + box-shadow: none; } + .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, + .osd button.flat:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, + .osd button.flat:active, + .osd button.flat:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } +button.suggested-action { + border: none; + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .selection-mode button.titlebutton, button.suggested-action.flat { + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + button.suggested-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:active, button.suggested-action:checked { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { + color: rgba(255, 255, 255, 0.5); } + .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { + color: rgba(255, 255, 255, 0.5); } + .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(0, 193, 228, 0.8); } + button.suggested-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:disabled:active, button.suggested-action:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + .osd button.suggested-action { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 193, 228, 0.5); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 193, 228, 0.7), rgba(0, 193, 228, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #00c1e4, #00c1e4); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd button.suggested-action:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 193, 228, 0.5), rgba(0, 193, 228, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +button.destructive-action { + border: none; + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #FF416C, #FF4B2B); } + button.destructive-action.flat { + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + button.destructive-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:active, button.destructive-action:checked { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop, button.destructive-action.flat:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { + color: rgba(255, 255, 255, 0.5); } + button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { + color: rgba(255, 255, 255, 0.5); } + button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(206, 17, 56, 0.8); } + button.destructive-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:disabled:active, button.destructive-action:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + .osd button.destructive-action { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(206, 17, 56, 0.5); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(206, 17, 56, 0.7), rgba(206, 17, 56, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #ce1138, #ce1138); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd button.destructive-action:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(206, 17, 56, 0.5), rgba(206, 17, 56, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +.stack-switcher > button { + outline-offset: -3px; } + .stack-switcher > button > label { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > button > image { + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + padding-bottom: 3px; } + .stack-switcher > button.text-button { + padding-left: 10px; + padding-right: 10px; } + .stack-switcher > button.image-button { + padding-left: 2px; + padding-right: 2px; } + .stack-switcher > button.needs-attention:active > label, + .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, + .stack-switcher > button.needs-attention:checked > image { + animation: none; + background-image: none; } +.inline-toolbar button, .inline-toolbar button:backdrop { + border-radius: 2px; + border-width: 1px; } +.primary-toolbar button, .primary-toolbar .raised button { + -gtk-icon-shadow: none; } + .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; } + +.stack-switcher > button.needs-attention > label, +.stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e63bf2), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.9074509804)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 3px, right 2px; } + .stack-switcher > button.needs-attention > label:backdrop, + .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { + background-size: 6px 6px, 0 0; } + .stack-switcher > button.needs-attention > label:dir(rtl), + .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { + background-position: left 3px, left 2px; } + +toolbar button:hover { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } +toolbar button:active { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + +.inline-toolbar toolbutton > button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + .inline-toolbar toolbutton > button:hover { + color: #fefefe; } + .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { + color: #af0cba; } + .inline-toolbar toolbutton > button:disabled { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { + color: rgba(175, 12, 186, 0.3); } + .inline-toolbar toolbutton > button:backdrop { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { + color: #af0cba; } + .inline-toolbar toolbutton > button:backdrop:disabled { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { + color: rgba(175, 12, 186, 0.3); } + +toolbar.inline-toolbar toolbutton > button.flat:backdrop, +toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop { + border-color: transparent; + box-shadow: none; } + +.inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > +entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 0; + border-right-style: none; + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } + +.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } +.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right-style: solid; } +.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child { + border-radius: 3px; + border-style: solid; } + +.linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > +entry, .linked.vertical > combobox > box > button.combo { + border-style: solid solid none solid; + border-radius: 0; } + +.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > +entry:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > +entry:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-style: solid; } +.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > +entry:only-child { + border-radius: 3px; + border-style: solid; } + +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:disabled, button:link, +button:visited, button:link:hover, button:link:active, button:link:checked, +button:visited:hover, +button:visited:active, +button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + +/* menu buttons */ +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: #202435; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +button.color { + padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } + +notebook button, list button, .view button, iconview button, popover button { + box-shadow: none; } + notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { + box-shadow: none; } +notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { + box-shadow: none; } + +/************ + * Calendar * + ***********/ +calendar { + color: #C3C7D1; + border: 1px solid rgba(12, 14, 21, 0.8); } + calendar:selected { + border-radius: 3px; } + calendar.header { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; } + calendar.header:backdrop { + border-color: rgba(0, 0, 0, 0.1); } + calendar.button { + color: rgba(195, 199, 209, 0.45); } + calendar.button:hover { + color: #C3C7D1; } + calendar.button:backdrop { + color: rgba(109, 112, 123, 0.45); } + calendar.button:disabled { + color: rgba(109, 112, 123, 0.45); } + calendar:indeterminate, calendar:indeterminate:backdrop { + color: alpha(currentColor,0.55); } + calendar.highlight, calendar.highlight:backdrop { + font-size: smaller; + color: #C3C7D1; } + calendar:backdrop { + color: #a1a5b0; + border-color: rgba(13, 16, 23, 0.82); } + +/************************* + * Check and Radio Items * + *************************/ +check { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-dark.png"), url("../assets/radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover-dark.png"), url("../assets/checkbox-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover-dark.png"), url("../assets/radio-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +check:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active-dark.png"), url("../assets/checkbox-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +radio:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active-dark.png"), url("../assets/radio-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +check:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop-dark.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop-dark.png"), url("../assets/radio-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:checked { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-dark.png"), url("../assets/radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover-dark.png"), url("../assets/checkbox-checked-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover-dark.png"), url("../assets/radio-checked-hover@2.png")); + -gtk-icon-shadow: none; } + +check:checked:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active-dark.png"), url("../assets/checkbox-checked-active@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active-dark.png"), url("../assets/radio-checked-active@2.png")); + -gtk-icon-shadow: none; } + +check:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop-dark.png"), url("../assets/checkbox-checked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop-dark.png"), url("../assets/radio-checked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check, iconview.content-view check, +.view.content-view.check, +iconview.content-view.check { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio, iconview.content-view radio, +.view.content-view.radio, +iconview.content-view.radio { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:hover, iconview.content-view check:hover, +.view.content-view.check:hover, +iconview.content-view.check:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:hover, iconview.content-view radio:hover, +.view.content-view.radio:hover, +iconview.content-view.radio:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:active, iconview.content-view check:active, +.view.content-view.check:active, +iconview.content-view.check:active { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:active, iconview.content-view radio:active, +.view.content-view.radio:active, +iconview.content-view.radio:active { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:backdrop, iconview.content-view check:backdrop, +.view.content-view.check:backdrop, +iconview.content-view.check:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:backdrop, iconview.content-view radio:backdrop, +.view.content-view.radio:backdrop, +iconview.content-view.radio:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:disabled, iconview.content-view check:disabled, +.view.content-view.check:disabled, +iconview.content-view.check:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:disabled, iconview.content-view radio:disabled, +.view.content-view.radio:disabled, +iconview.content-view.radio:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, +.view.content-view.check:disabled:backdrop, +iconview.content-view.check:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, +.view.content-view.radio:disabled:backdrop, +iconview.content-view.radio:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); + -gtk-icon-shadow: none; } + +checkbutton.text-button, radiobutton.text-button { + padding: 2px 0; + outline-offset: 0; } + checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { + margin-left: 4px; } + checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { + margin-right: 4px; } + +check, +radio { + margin: 0 4px; + min-height: 16px; + min-width: 16px; + border: none; } + menu menuitem check, menu menuitem + radio { + margin: 0; } + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem + radio, menu menuitem + radio:hover, menu menuitem + radio:disabled { + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; } + +/***************** + * Color Chooser * + *****************/ +colorswatch, colorswatch:drop(active) { + border-style: none; } +colorswatch.top { + border-top-left-radius: 5.5px; + border-top-right-radius: 5.5px; } + colorswatch.top overlay { + border-top-left-radius: 5px; + border-top-right-radius: 5px; } +colorswatch.bottom { + border-bottom-left-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.bottom overlay { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 5.5px; + border-bottom-left-radius: 5.5px; } + colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; } +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; } +colorswatch.dark overlay { + color: #fefefe; } + colorswatch.dark overlay:hover { + border-color: rgba(12, 14, 21, 0.8); } + colorswatch.dark overlay:backdrop { + color: rgba(254, 254, 254, 0.5); } +colorswatch.light overlay { + color: #C3C7D1; } + colorswatch.light overlay:hover { + border-color: rgba(12, 14, 21, 0.8); } + colorswatch.light overlay:backdrop { + color: #a1a5b0; } +colorswatch:drop(active) { + box-shadow: none; } + colorswatch:drop(active).light overlay { + border-color: #71f79f; + box-shadow: inset 0 0 0 2px rgba(12, 14, 21, 0.8), inset 0 0 0 1px #71f79f; } + colorswatch:drop(active).dark overlay { + border-color: #71f79f; + box-shadow: inset 0 0 0 2px rgba(12, 14, 21, 0.8), inset 0 0 0 1px #71f79f; } +colorswatch overlay { + box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(12, 14, 21, 0.8); } + colorswatch overlay:hover { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { + border-color: rgba(12, 14, 21, 0.8); + box-shadow: none; } +colorswatch#add-color-button { + border-radius: 5px 5px 0 0; } + colorswatch#add-color-button:only-child { + border-radius: 5px; } + colorswatch#add-color-button overlay { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + colorswatch#add-color-button overlay:hover { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #181b28; + text-shadow: none; } + colorswatch#add-color-button overlay:backdrop { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #1a1d2b; + text-shadow: none; } +colorswatch:disabled { + opacity: 0.5; } + colorswatch:disabled overlay { + border-color: rgba(0, 0, 0, 0.6); + box-shadow: none; } +row:selected colorswatch { + box-shadow: 0 0 0 2px #fefefe; } +colorswatch#editor-color-sample { + border-radius: 4px; } + colorswatch#editor-color-sample overlay { + border-radius: 4.5px; } + +colorchooser .popover.osd { + border-radius: 5px; } + +/************** + * ComboBoxes * + **************/ +combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:not(headerbar) { + background-color: rgba(22, 25, 37, 0.95); } +messagedialog .titlebar { + min-height: 20px; + background-image: none; + background-color: rgba(22, 25, 37, 0.95); + border-style: none; + border-top-left-radius: 4px; + border-top-right-radius: 4px; } +messagedialog.csd.background { + background-color: rgba(22, 25, 37, 0.95); + color: #C3C7D1; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } +messagedialog.csd .dialog-action-area button { + padding: 10px 14px; + border-radius: 0; + border-left-style: solid; + border-right-style: none; + border-bottom-style: none; + background-color: transparent; + color: #C3C7D1; + box-shadow: none; } + messagedialog.csd .dialog-action-area button:hover { + background-color: rgba(197, 14, 210, 0.9); + color: white; } + messagedialog.csd .dialog-action-area button:first-child { + border-left-style: none; + border-bottom-left-radius: 4px; } + messagedialog.csd .dialog-action-area button:last-child { + border-bottom-right-radius: 4px; } + messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action { + color: white; } + +filechooser .dialog-action-box { + border-top: 1px solid rgba(12, 14, 21, 0.8); } + filechooser .dialog-action-box:backdrop { + border-top-color: rgba(13, 16, 23, 0.82); } +filechooser #pathbarbox { + border-bottom: 1px solid #161925; } + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; } + +/**************** + * Text Entries * + ****************/ +spinbutton:not(.vertical), entry { + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; + border-radius: 3px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; } + spinbutton:not(.vertical) image.left, + entry image.left { + padding-left: 0; + padding-right: 6px; } + spinbutton:not(.vertical) image.right, + entry image.right { + padding-left: 6px; + padding-right: 0; } + spinbutton:not(.vertical) undershoot.left, + entry undershoot.left { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; + border: none; + box-shadow: none; } + spinbutton:not(.vertical) undershoot.right, + entry undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; + border: none; + box-shadow: none; } + spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus, + entry.flat { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + box-shadow: none; + border-radius: 0; } + spinbutton:focus:not(.vertical), + entry:focus { + border-color: #980ba2; } + spinbutton:disabled:not(.vertical), + entry:disabled { + color: #6d707b; + border-color: rgba(12, 14, 21, 0.8); + background-color: #171a26; + box-shadow: none; } + spinbutton:backdrop:not(.vertical), + entry:backdrop { + color: #a1a5b0; + border-color: rgba(13, 16, 23, 0.82); + background-color: #1a1d2b; + box-shadow: none; + transition: 200ms ease-out; } + spinbutton:backdrop:disabled:not(.vertical), + entry:backdrop:disabled { + color: #333955; + border-color: rgba(13, 16, 23, 0.82); + background-color: #171a26; + box-shadow: none; } + spinbutton.error:not(.vertical), + entry.error { + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; + color: #e6133e; + border-color: #410512; } + spinbutton.error:focus:not(.vertical), + entry.error:focus { + border-color: #410512; } + spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), + entry.error:selected:focus, + entry.error:selected { + background-color: #e6133e; } + spinbutton.warning:not(.vertical), + entry.warning { + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; + color: #cc5500; + border-color: #1a0b00; } + spinbutton.warning:focus:not(.vertical), + entry.warning:focus { + border-color: #1a0b00; } + spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), + entry.warning:selected:focus, + entry.warning:selected { + background-color: #cc5500; } + spinbutton:not(.vertical) image, + entry image { + color: #a1a5af; } + spinbutton:not(.vertical) image:hover, + entry image:hover { + color: #C3C7D1; } + spinbutton:not(.vertical) image:active, + entry image:active { + color: #c50ed2; } + spinbutton:not(.vertical) image:backdrop, + entry image:backdrop { + color: #5c5f6b; } + spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus, + entry:drop(active) { + border-color: #71f79f; + box-shadow: inset 0 0 0 1px #71f79f; } + .osd spinbutton:not(.vertical), + .osd entry { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:focus:not(.vertical), + .osd entry:focus { + color: white; + border-color: #c50ed2; + background-color: rgba(0, 0, 0, 0.5); + background-clip: padding-box; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:backdrop:not(.vertical), + .osd entry:backdrop { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd spinbutton:disabled:not(.vertical), + .osd entry:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(40, 43, 50, 0.5); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +spinbutton:not(.vertical) progress, +entry progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: #c50ed2; + border-style: solid; + box-shadow: none; } + spinbutton:not(.vertical) progress:backdrop, + entry progress:backdrop { + background-color: transparent; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus + button, .linked:not(.vertical) > +entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +entry, .linked:not(.vertical) > +entry:focus + +entry { + border-left-color: #980ba2; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > +entry:focus { + border-color: #980ba2; } +.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:drop(active) + button, .linked:not(.vertical) > +entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + +entry, .linked:not(.vertical) > +entry:drop(active) + +entry { + border-left-color: #71f79f; } +.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > +entry:not(:disabled) + entry:not(:disabled), .linked.vertical > +entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { + border-top-color: rgba(21, 24, 36, 0.94); + background-image: linear-gradient(to bottom, #181b28, #181b28); } + .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > + entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > + entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { + border-top-color: rgba(23, 26, 38, 0.946); + background-image: linear-gradient(to bottom, #1a1d2b, #1a1d2b); } +.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > +entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > +entry:disabled + entry:disabled { + border-top-color: rgba(21, 24, 36, 0.94); } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > +entry + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:focus:not(:only-child) { + border-top-color: #980ba2; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > +entry + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:drop(active):not(:only-child) { + border-top-color: #71f79f; } +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:focus:not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:focus:not(:only-child) + entry, +.linked.vertical > +entry:focus:not(:only-child) + button, +.linked.vertical > +entry:focus:not(:only-child) + combobox > box > button.combo { + border-top-color: #980ba2; } +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:drop(active):not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:drop(active):not(:only-child) + entry, +.linked.vertical > +entry:drop(active):not(:only-child) + button, +.linked.vertical > +entry:drop(active):not(:only-child) + combobox > box > button.combo { + border-top-color: #71f79f; } + +treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { + background-color: #181b28; + transition-property: color, background; } +treeview entry.flat, treeview entry { + border-radius: 0; + background-image: none; + background-color: #181b28; } + treeview entry.flat:focus, treeview entry:focus { + border-color: #c50ed2; } + +/************* + * Expanders * + *************/ +expander arrow { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + expander arrow:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + expander arrow:hover { + color: white; } + expander arrow:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +/**************** + * Floating Bar * + ****************/ +.floating-bar { + background-color: #161925; + border-width: 1px; + border-style: solid solid none; + border-color: rgba(12, 14, 21, 0.8); + border-radius: 3px 3px 0 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + .floating-bar.bottom.left { + border-left-style: none; + border-top-left-radius: 0; } + .floating-bar.bottom.right { + border-right-style: none; + border-top-right-radius: 0; } + .floating-bar > button { + padding: 4px; } + .floating-bar:backdrop { + background-color: #161925; + border-color: rgba(13, 16, 23, 0.82); } + +/********** + * Frames * + **********/ +frame > border, +.frame { + box-shadow: none; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid rgba(12, 14, 21, 0.8); } + frame > border.flat, + .frame.flat { + border-style: none; } + frame > border:backdrop, + .frame:backdrop { + border-color: rgba(13, 16, 23, 0.82); } + +actionbar > revealer > box { + padding: 6px; + border-top: 1px solid rgba(12, 14, 21, 0.8); } + actionbar > revealer > box:backdrop { + border-color: rgba(13, 16, 23, 0.82); } + +scrolledwindow viewport.frame { + border-style: none; } +scrolledwindow overshoot.top { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 100% 5%, 100% 100%; + background-repeat: no-repeat; + background-position: center top; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.top:backdrop { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 100% 5%; + background-repeat: no-repeat; + background-position: center top; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.bottom { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 100% 5%, 100% 100%; + background-repeat: no-repeat; + background-position: center bottom; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.bottom:backdrop { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 100% 5%; + background-repeat: no-repeat; + background-position: center bottom; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.left { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 5% 100%, 100% 100%; + background-repeat: no-repeat; + background-position: left center; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.left:backdrop { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 5% 100%; + background-repeat: no-repeat; + background-position: left center; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.right { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 5% 100%, 100% 100%; + background-repeat: no-repeat; + background-position: right center; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.right:backdrop { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 5% 100%; + background-repeat: no-repeat; + background-position: right center; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow undershoot.top { + background-color: transparent; + background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-top: 1px; + background-size: 10px 1px; + background-repeat: repeat-x; + background-origin: content-box; + background-position: center top; + border: none; + box-shadow: none; } +scrolledwindow undershoot.bottom { + background-color: transparent; + background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-bottom: 1px; + background-size: 10px 1px; + background-repeat: repeat-x; + background-origin: content-box; + background-position: center bottom; + border: none; + box-shadow: none; } +scrolledwindow undershoot.left { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; + border: none; + box-shadow: none; } +scrolledwindow undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; + border: none; + box-shadow: none; } +scrolledwindow junction { + border-color: transparent; + border-image: linear-gradient(to bottom, rgba(12, 14, 21, 0.8) 1px, transparent 1px) 0 0 0 1/0 1px stretch; + background-color: #171a27; } + scrolledwindow junction:dir(rtl) { + border-image-slice: 0 1 0 0; } + scrolledwindow junction:backdrop { + border-image-source: linear-gradient(to bottom, rgba(13, 16, 23, 0.82) 1px, transparent 1px); + background-color: #10131b; + transition: 200ms ease-out; } + +separator { + background: rgba(0, 0, 0, 0.1); } + +/************ + * Popovers * + ************/ +GraniteWidgetsPopOver { + -GraniteWidgetsPopOver-arrow-width: 21; + -GraniteWidgetsPopOver-arrow-height: 10; + -GraniteWidgetsPopOver-border-radius: 8px; + -GraniteWidgetsPopOver-border-width: 0; + -GraniteWidgetsPopOver-shadow-size: 12; + border: 1px solid #181b28; + background: #181b28; + color: #C3C7D1; } + GraniteWidgetsPopOver .button { + background-image: none; + background: none; + border: none; } + GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { + color: #c50ed2; } + GraniteWidgetsPopOver > .frame { + border: none; } + GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { + border: none; + background: none; } + +GraniteWidgetsStaticNotebook .frame { + border: none; } + +.popover_bg { + background-color: #181b28; + background-image: none; + border: 1px solid #181b28; + color: #C3C7D1; } + +/*********** + * Welcome * + **********/ +GraniteWidgetsWelcome { + background-color: #181b28; } + GraniteWidgetsWelcome GtkLabel { + color: #C3C7D1; } + GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { + color: rgba(195, 199, 209, 0.8); } + +/************** +* Source List * +***************/ +.source-list { + -GtkTreeView-horizontal-separator: 1px; + -GtkTreeView-vertical-separator: 6px; + background-color: #161925; + border: solid rgba(12, 14, 21, 0.8); + color: #C3C7D1; + border-right-width: 1px; } + .source-list .category-expander { + color: transparent; } + .source-list .badge { + background-image: none; + background-color: rgba(0, 0, 0, 0.4); + color: #161925; + border-radius: 10px; + padding: 0 6px; + margin: 0 3px; + border-width: 0; } + .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { + background-color: rgba(0, 0, 0, 0.2); + color: #0c0e15; } + .source-list row, + .source-list .list-row { + border: none; + padding: 0; } + .source-list row > GtkLabel, + .source-list row > label, + .source-list .list-row > GtkLabel, + .source-list .list-row > label { + padding-left: 6px; + padding-right: 6px; } + +/************** +* Text Styles * +**************/ +.h1 { + font-size: 24px; } + +.h2 { + font-weight: 300; + font-size: 18px; } + +.h3 { + font-size: 11px; } + +.h4, +.category-label { + font-size: 12px; + padding: 6px; + color: rgba(195, 199, 209, 0.3); + font-weight: bold; + text-shadow: 0 1px rgba(255, 255, 255, 0.2); } + +/************** +* Storage Bar * +**************/ +.storage-bar .trough { + border: none; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); + background-image: none; + background-color: transparent; + padding: 8px 6px; } +.storage-bar .fill-block { + background-color: #f9dc5c; + border: none; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); + transition: all 200ms ease-in-out; + padding: 8px 6px; } + .storage-bar .fill-block:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-left-width: 1px; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } + .storage-bar .fill-block:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } + .storage-bar .fill-block.empty-block { + background-color: #181b28; } + .storage-bar .fill-block.app { + background-color: #7cb7ff; } + .storage-bar .fill-block.audio { + background-color: #ff6a00; } + .storage-bar .fill-block.photo { + background-color: #ed254e; } + .storage-bar .fill-block.video { + background-color: #c74ded; } + .storage-bar .fill-block .legend { + padding: 12px; + border-radius: 4px; } + +/*************** + * Header bars * + ***************/ +.titlebar:not(headerbar), .titlebar, headerbar { + padding: 0px 13px; + min-height: 34px; + background: #0c0e14; + color: #C3C7D1; + border-radius: 0; } + .titlebar:backdrop, + headerbar:backdrop { + border-color: rgba(13, 16, 23, 0.82); + transition: 200ms ease-out; } + .titlebar .title, + headerbar .title { + font-weight: bold; + padding-left: 12px; + padding-right: 12px; } + .titlebar .subtitle, + headerbar .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; } + .titlebar entry, + headerbar entry { + min-height: 24px; } + .titlebar button, + headerbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + min-height: 14px; + margin-top: 5px; + margin-bottom: 5px; + box-shadow: none; } + .titlebar button.image-button, + headerbar button.image-button { + padding: 3px 4px; } + .titlebar button.suggested-action, + headerbar button.suggested-action { + box-shadow: none; + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.suggested-action:disabled, .titlebar button.suggested-action:disabled:backdrop, .titlebar button.suggested-action:backdrop, + headerbar button.suggested-action:disabled, + headerbar button.suggested-action:disabled:backdrop, + headerbar button.suggested-action:backdrop { + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.suggested-action:disabled:hover, .titlebar button.suggested-action:disabled:active, .titlebar button.suggested-action:disabled:checked, .titlebar button.suggested-action:disabled:backdrop:hover, .titlebar button.suggested-action:disabled:backdrop:active, .titlebar button.suggested-action:disabled:backdrop:checked, .titlebar button.suggested-action:backdrop:hover, .titlebar button.suggested-action:backdrop:active, .titlebar button.suggested-action:backdrop:checked, + headerbar button.suggested-action:disabled:hover, + headerbar button.suggested-action:disabled:active, + headerbar button.suggested-action:disabled:checked, + headerbar button.suggested-action:disabled:backdrop:hover, + headerbar button.suggested-action:disabled:backdrop:active, + headerbar button.suggested-action:disabled:backdrop:checked, + headerbar button.suggested-action:backdrop:hover, + headerbar button.suggested-action:backdrop:active, + headerbar button.suggested-action:backdrop:checked { + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.appmenu, + headerbar button.appmenu { + background: transparent; } + .titlebar button.appmenu:backdrop, + headerbar button.appmenu:backdrop { + background: transparent; } + .titlebar button:hover, .titlebar button:active, .titlebar button:checked, + headerbar button:hover, + headerbar button:active, + headerbar button:checked { + background-color: transparent; + color: #c50ed2; + box-shadow: none; + border: none; } + .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, + headerbar button:backdrop, + headerbar button:disabled, + headerbar button:backdrop:disabled { + color: rgba(195, 199, 209, 0.2); + background-color: transparent; + border-radius: 0; + text-shadow: none; + box-shadow: none; + border: none; } + .titlebar button:backdrop:hover, .titlebar button:backdrop:active, .titlebar button:backdrop:checked, + headerbar button:backdrop:hover, + headerbar button:backdrop:active, + headerbar button:backdrop:checked { + background-color: transparent; + color: #c50ed2; + box-shadow: none; } + .titlebar button:backdrop:hover label, .titlebar button:backdrop:active label, .titlebar button:backdrop:checked label, + headerbar button:backdrop:hover label, + headerbar button:backdrop:active label, + headerbar button:backdrop:checked label { + color: #c50ed2; } + .titlebar button.suggested-action, + headerbar button.suggested-action { + font-weight: bold; + min-height: 24px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 4px; + font-weight: normal; + color: white; + background-color: #181b28; + text-shadow: none; + box-shadow: none; } + .titlebar button.suggested-action:hover, + headerbar button.suggested-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:active, + headerbar button.suggested-action:active { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:disabled, + headerbar button.suggested-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:disabled label, + headerbar button.suggested-action:disabled label { + color: rgba(255, 255, 255, 0.5); } + .titlebar button.suggested-action:backdrop, + headerbar button.suggested-action:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; + border-radius: 3px; } + .titlebar button.suggested-action:backdrop:disabled, + headerbar button.suggested-action:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.destructive-action, + headerbar button.destructive-action { + font-weight: bold; + min-height: 24px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 4px; + font-weight: normal; + color: white; + background-color: #181b28; + text-shadow: none; + box-shadow: none; } + .titlebar button.destructive-action:hover, + headerbar button.destructive-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:active, + headerbar button.destructive-action:active { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:disabled, + headerbar button.destructive-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:disabled label, + headerbar button.destructive-action:disabled label { + color: rgba(255, 255, 255, 0.5); } + .titlebar button.destructive-action:backdrop, + headerbar button.destructive-action:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; + border-radius: 3px; } + .titlebar button.destructive-action:backdrop:disabled, + headerbar button.destructive-action:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.titlebutton, + headerbar button.titlebutton { + color: transparent; + box-shadow: none; + border: none; + background-color: transparent; + background-image: none; + background-repeat: no-repeat; } + .titlebar button.titlebutton:hover, .titlebar button.titlebutton:active, .titlebar button.titlebutton:checked, .titlebar button.titlebutton:backdrop, .titlebar button.titlebutton:backdrop:hover, .titlebar button.titlebutton *, + headerbar button.titlebutton:hover, + headerbar button.titlebutton:active, + headerbar button.titlebutton:checked, + headerbar button.titlebutton:backdrop, + headerbar button.titlebutton:backdrop:hover, + headerbar button.titlebutton * { + color: transparent; + box-shadow: none; + background-color: transparent; } + .titlebar .linked > button, + .titlebar headerbar .linked > button, .titlebar .linked > button:active, .titlebar .linked > button:checked, .titlebar .linked > button:hover, + .titlebar .linked > button:backdrop, + headerbar .titlebar .linked > button, + .titlebar headerbar .linked > button, + headerbar .linked > button, + headerbar .titlebar .linked > button:active, + .titlebar headerbar .linked > button:active, + headerbar .linked > button:active, + headerbar .titlebar .linked > button:checked, + .titlebar headerbar .linked > button:checked, + headerbar .linked > button:checked, + headerbar .titlebar .linked > button:hover, + .titlebar headerbar .linked > button:hover, + headerbar .titlebar .linked > button:backdrop, + .titlebar headerbar .linked > button:backdrop, + headerbar .linked > button:hover, + headerbar .linked > button:backdrop { + border-radius: 23px; + border-right-style: none; + border: none; + box-shadow: none; + margin: 10px 0px; + min-height: 20px; + transition: all .1s ease-in; } + .titlebar .linked > button:only-child, + .titlebar headerbar .linked > button:only-child, + headerbar .titlebar .linked > button:only-child, + headerbar .linked > button:only-child { + border-radius: 13px; + border-style: none; } + .titlebar .linked > button:active, + headerbar .linked > button:active { + background: linear-gradient(to right, #c50ed2, #8500f7); + color: snow; } + .titlebar .linked > button:checked, + headerbar .linked > button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: snow; } + .titlebar .linked > button:checked:backdrop, + headerbar .linked > button:checked:backdrop { + color: #ffe6e6; } + .titlebar .linked > button:checked:backdrop label, + headerbar .linked > button:checked:backdrop label { + color: #ffe6e6; } + .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, + headerbar.selection-mode button:backdrop.flat:active, + headerbar.selection-mode button:backdrop.flat:checked, + headerbar.selection-mode button:backdrop:active, + headerbar.selection-mode button:backdrop:checked { + border-color: #980ba2; } + .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, + headerbar.selection-mode button:backdrop.flat:active label, + headerbar.selection-mode button:backdrop.flat:checked label, + headerbar.selection-mode button:backdrop:active label, + headerbar.selection-mode button:backdrop:checked label { + color: rgba(197, 14, 210, 0.6); } + .tiled .titlebar, .maximized .titlebar, + .tiled headerbar.titlebar, .maximized headerbar.titlebar { + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } + .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, + .tiled headerbar:backdrop, + .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { + border-radius: 0; } + .default-decoration.titlebar, headerbar.default-decoration { + padding: 5px 4px; + min-height: 20px; } + .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { + min-height: 20px; + min-width: 20px; + margin: 0; + padding: 0; } + +headerbar entry, +headerbar spinbutton, +headerbar separator { + margin-top: 5px; + margin-bottom: 5px; } +headerbar switch { + margin-top: 10px; + margin-bottom: 10px; } +headerbar separator { + background: transparent; } + +.background:not(.tiled):not(.maximized) .titlebar { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); } + .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { + border-top-left-radius: 4px; + border-top-right-radius: 4px; } + +window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { + border-top-left-radius: 4px; } +window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { + border-top-right-radius: 4px; } + +window.csd > .titlebar:not(headerbar) { + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; } +.titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { + background: #0c0e14; } + +/************** + * GtkInfoBar * + **************/ +.info, .warning, .question, .error, +infobar { + text-shadow: none; + color: #C3C7D1; + background-color: #161925; + border-bottom: 1px solid #030305; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15); } + +.info, .warning, .question, .error { + text-shadow: none; + color: #fefefe; + border: none; } + .info .label, .warning .label, .question .label, .error .label { + color: #fefefe; } + .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { + color: rgba(254, 254, 254, 0.5); } + .info button, .warning button, .question button, .error button { + border-radius: 2px; + border: none; + background: rgba(24, 27, 40, 0.98); + color: #C3C7D1; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } + .info button .label, .warning button .label, .question button .label, .error button .label { + color: #C3C7D1; } + .info button:active, .warning button:active, .question button:active, .error button:active { + background: #181b28; + color: #C3C7D1; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } + .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { + background: rgba(24, 27, 40, 0.8); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } + .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { + background: rgba(24, 27, 40, 0.6); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { + background: rgba(24, 27, 40, 0.5); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { + background: rgba(24, 27, 40, 0.8); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + +.info { + background-color: #71f79f; } + .info:backdrop { + background-color: #a1fac0; + color: rgba(254, 254, 254, 0.5); } + +.warning { + background-color: #cc5500; } + .warning:backdrop { + background-color: #ff6a00; + color: rgba(254, 254, 254, 0.5); } + +.question { + background-color: #00c1e4; } + .question:backdrop { + background-color: #18dcff; + color: rgba(254, 254, 254, 0.5); } + +.error { + background-color: #e6133e; } + .error:backdrop { + background-color: #ef3d61; + color: rgba(254, 254, 254, 0.5); } + +/************* + * Level Bar * + *************/ +levelbar block { + min-width: 32px; + min-height: 6px; } +levelbar.vertical block { + min-width: 6px; + min-height: 32px; } +levelbar:backdrop { + transition: 200ms ease-out; } +levelbar trough { + padding: 3px; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.2); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + levelbar trough:backdrop { + background-color: rgba(255, 255, 255, 0.06); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } +levelbar.horizontal.discrete block { + margin: 0 1px; } +levelbar.vertical.discrete block { + margin: 1px 0; } +levelbar block { + border-radius: 2px; } + levelbar block:backdrop { + box-shadow: none; } + levelbar block.low { + background-color: #cc5500; } + levelbar block.low:backdrop { + border-color: #cc5500; } + levelbar block.high, levelbar block:not(.empty) { + background-color: #00c1e4; } + levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { + border-color: #00c1e4; } + levelbar block.full { + background-color: #0096b1; } + levelbar block.full:backdrop { + border-color: #0096b1; } + levelbar block.empty { + background-color: rgba(0, 0, 0, 0.35); + box-shadow: none; } + +/********* + * Links * + *********/ +*:link, button:link, +button:visited { + color: #7cb7ff; } + *:link:visited, + button:visited { + color: rgba(124, 183, 255, 0.5); } + *:selected *:link:visited, *:selected button:visited:link, + *:selected button:visited { + color: #e79eec; } + *:link:hover, button:hover:link, + button:hover:visited { + color: #afd3ff; } + *:selected *:link:hover, *:selected button:hover:link, + *:selected button:hover:visited { + color: #f8e6fa; } + *:link:active, button:active:link, + button:active:visited { + color: #7cb7ff; } + *:selected *:link:active, *:selected button:active:link, + *:selected button:active:visited { + color: #f3cef5; } + *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, + button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, + button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, + button:backdrop:visited { + color: #c50ed2; } + *:link:selected, button:selected:link, + button:selected:visited, *:selected *:link, *:selected button:link, + *:selected button:visited { + color: #f3cef5; } + +button:link, +button:visited { + text-shadow: none; } + button:link:hover, button:link:active, button:link:checked, + button:visited:hover, + button:visited:active, + button:visited:checked { + text-shadow: none; } + button:link > label, + button:visited > label { + text-decoration-line: underline; } + +/********* + * Lists * + *********/ +list { + color: #C3C7D1; + background-color: #181b28; + border-color: rgba(12, 14, 21, 0.8); } + list:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } + +row { + padding: 5px 11px; + transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + row label { + padding-left: 8px; } + row:hover { + transition: none; } + row:backdrop { + transition: 200ms ease-out; } + row.activatable.has-open-popup, row.activatable:hover { + background-color: rgba(195, 199, 209, 0.05); } + row.activatable:active { + box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + row.activatable:backdrop:hover { + background-color: transparent; } + row.activatable:selected:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + row.activatable:selected.has-open-popup, row.activatable:selected:hover { + background-color: rgba(197, 14, 210, 0.5); } + row.activatable:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + row.activatable button.flat { + background-color: transparent; } + +/********* + * Menus * + *********/ +menubar, +.menubar { + background-color: #0c0e14; + color: #C3C7D1; + -GtkWidget-window-dragging: true; + padding: 0px; + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } + menubar > menuitem, + .menubar > menuitem { + min-height: 16px; + padding: 4px 8px; } + menubar > menuitem:hover, + .menubar > menuitem:hover { + box-shadow: inset 0 -3px #c50ed2; } + menubar > menuitem:disabled, + .menubar > menuitem:disabled { + color: #6d707b; + box-shadow: none; } + +menu, .menu, .context-menu { + font: initial; + margin: 4px; + padding: 2px 0px; + background: linear-gradient(to bottom, #1a1d2b, #12151f); + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 5px; } + .csd menu, + .csd .menu, + .csd .context-menu { + border: none; } + menu:backdrop, .menu:backdrop, .context-menu:backdrop { + background-color: #191c2a; } + menu menuitem, .menu menuitem, .context-menu menuitem { + min-height: 17px; + min-width: 40px; + padding: 4px 6px; + text-shadow: none; } + menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { + color: #fefefe; + background-color: #c50ed2; } + menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { + color: #6d707b; } + menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { + color: #333955; } + menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { + color: #6d707b; + background-color: transparent; } + menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { + min-height: 16px; + min-width: 16px; } + menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + margin-left: 10px; } + menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); + margin-right: 10px; } + menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { + color: inherit; } + menu > arrow, .menu > arrow, .context-menu > arrow { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + min-height: 16px; + min-width: 16px; + padding: 4px; + background-color: #181b27; + border-radius: 0; } + menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #292c39; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #292c39; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { + background-color: #292c39; } + menu > arrow:backdrop, .menu > arrow:backdrop, .context-menu > arrow:backdrop { + background-color: #191c2a; } + menu > arrow:disabled, .menu > arrow:disabled, .context-menu > arrow:disabled { + color: transparent; + background-color: transparent; + border-color: transparent; } + +menuitem accelerator { + color: alpha(currentColor,0.55); } +menuitem check, +menuitem radio { + min-height: 16px; + min-width: 16px; } + menuitem check:dir(ltr), + menuitem radio:dir(ltr) { + margin-right: 7px; } + menuitem check:dir(rtl), + menuitem radio:dir(rtl) { + margin-left: 7px; } + +.csd.popup { + background: transparent; } + +/******** + * Misc * + ********/ +.content-view { + background-color: #090a0f; } + .content-view:hover { + -gtk-icon-effect: highlight; } + .content-view:backdrop { + background-color: #090a0f; } + +.osd .scale-popup button.flat { + border-style: none; + border-radius: 5px; } +.scale-popup button:hover { + background-color: rgba(195, 199, 209, 0.1); + border-radius: 5px; } + +/************ +* Assistant * +*************/ +assistant { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } + assistant .sidebar { + background-color: #181b28; + border-top: 1px solid rgba(12, 14, 21, 0.8); + border-bottom-left-radius: 4px; } + assistant .sidebar:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } + assistant.csd .sidebar { + border-top-style: none; } + assistant .sidebar GtkLabel, + assistant .sidebar label { + padding: 6px 12px; } + assistant .sidebar GtkLabel.highlight, + assistant .sidebar label.highlight { + background-color: #393c47; } + +/************* + * Notebooks * + *************/ +notebook > header { + padding: 1px; + border-color: transparent; + border-width: 1px; + background-color: #10121a; } + notebook > header:backdrop { + border-color: rgba(13, 16, 23, 0.82); + background-color: #161925; } + notebook > header tabs { + margin: 0px; } + notebook > header.top { + border-bottom-style: solid; } + notebook > header.top > tabs { + margin-bottom: -2px; } + notebook > header.top > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.top > tabs > tab:checked { + background: linear-gradient(to right, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 100% 2px; + border: 0; } + notebook > header.bottom { + border-top-style: solid; } + notebook > header.bottom > tabs { + margin-top: -2px; } + notebook > header.bottom > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.bottom > tabs > tab:checked { + background: linear-gradient(to right, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 100% 2px; + border: 0; } + notebook > header.left { + border-right-style: solid; } + notebook > header.left > tabs { + margin-right: -2px; } + notebook > header.left > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.left > tabs > tab:checked { + background: linear-gradient(to bottom, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 2px 100%; + border: 0; } + notebook > header.right { + border-left-style: solid; } + notebook > header.right > tabs { + margin-left: -2px; } + notebook > header.right > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.right > tabs > tab:checked { + background: linear-gradient(to bottom, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 2px 100%; + border: 0; } + notebook > header.top > tabs > arrow { + border-top-style: none; } + notebook > header.bottom > tabs > arrow { + border-bottom-style: none; } + notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; } + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + notebook > header.left > tabs > arrow { + border-left-style: none; } + notebook > header.right > tabs > arrow { + border-right-style: none; } + notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; } + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + notebook > header > tabs > arrow { + min-height: 14px; + min-width: 14px; + border-radius: 0; } + notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { + background-clip: padding-box; + background-image: none; + background-color: rgba(255, 255, 255, 0.3); + border-color: transparent; + box-shadow: none; } + notebook > header > tabs > arrow:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + notebook > header tab { + min-height: 24px; + min-width: 24px; + padding: 1px 12px; + outline-offset: -5px; + color: #6d707b; + font-weight: normal; + border-width: 1px; + border-color: transparent; } + notebook > header tab:hover { + color: #989ca6; } + notebook > header tab:hover.reorderable-page { + border-color: rgba(12, 14, 21, 0.1); + background-color: rgba(22, 25, 37, 0.2); } + notebook > header tab:backdrop { + color: #4a4d59; } + notebook > header tab:backdrop.reorderable-page { + border-color: transparent; + background-color: transparent; } + notebook > header tab:checked { + color: #C3C7D1; } + notebook > header tab:checked.reorderable-page { + border-color: rgba(12, 14, 21, 0.3); + background-color: rgba(22, 25, 37, 0.5); } + notebook > header tab:checked.reorderable-page:hover { + background-color: rgba(22, 25, 37, 0.7); } + notebook > header tab:backdrop:checked { + color: #6d707b; } + notebook > header tab:backdrop:checked.reorderable-page { + border-color: rgba(13, 16, 23, 0.82); + background-color: #1a1d2b; } + notebook > header tab button.flat { + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + min-width: 20px; + min-height: 20px; } + notebook > header tab button.flat:hover { + background: transparent; + box-shadow: none; + color: #ed254e; } + notebook > header tab button.flat, notebook > header tab button.flat:backdrop { + color: alpha(currentColor,0.3); } + notebook > header.top tabs, notebook > header.bottom tabs { + padding-left: 0px; + padding-right: 0px; } + notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { + margin-left: 0.5px; + margin-right: 0.5px; } + notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { + margin-left: -1px; } + notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { + margin-right: -1px; } + notebook > header.top tabs tab, notebook > header.bottom tabs tab { + margin-left: 0.5px; + margin-right: 0.5px; } + notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { + border-style: none solid; } + notebook > header.left tabs, notebook > header.right tabs { + padding-top: 4px; + padding-bottom: 4px; } + notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; } + notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { + margin-top: -1px; } + notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { + margin-bottom: -1px; } + notebook > header.left tabs tab, notebook > header.right tabs tab { + margin-top: 4px; + margin-bottom: 4px; } + notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { + border-style: solid none; } + notebook > header.top tab { + padding-bottom: 3px; } + notebook > header.bottom tab { + padding-top: 3px; } + notebook > header button { + margin-top: 1px; + margin-bottom: 1px; + padding: 1px 1px; } +notebook > stack:not(:only-child) { + background-color: #181b28; } + notebook > stack:not(:only-child):backdrop { + background-color: #1a1d2b; } + +/********* + * Paned * + *********/ +paned > separator { + min-width: 1px; + min-height: 1px; + -gtk-icon-source: none; + border-style: none; + background-color: transparent; + background-image: image(rgba(12, 14, 21, 0.8)); + background-size: 1px 1px; } + paned > separator:selected { + background-image: image(#c50ed2); } + paned > separator:backdrop { + background-image: image(rgba(13, 16, 23, 0.82)); } + paned > separator.wide { + min-width: 5px; + min-height: 5px; + background-color: #161925; + background-image: image(rgba(12, 14, 21, 0.8)), image(rgba(12, 14, 21, 0.8)); + background-size: 1px 1px, 1px 1px; } + paned > separator.wide:backdrop { + background-color: #161925; + background-image: image(rgba(13, 16, 23, 0.82)), image(rgba(13, 16, 23, 0.82)); } +paned.horizontal > separator { + background-repeat: repeat-y; } + paned.horizontal > separator:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + background-position: left; } + paned.horizontal > separator:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + background-position: right; } + paned.horizontal > separator.wide { + margin: 0; + padding: 0; + background-repeat: repeat-y, repeat-y; + background-position: left, right; } +paned.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + background-repeat: repeat-x; + background-position: top; } + paned.vertical > separator.wide { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; } + +/************ + * Pathbars * + ************/ +.path-bar button.text-button, .path-bar button.image-button, .path-bar button { + padding-left: 4px; + padding-right: 4px; } +.path-bar button.text-button.image-button label { + padding-left: 0; + padding-right: 0; } +.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { + padding-right: 8px; } +.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { + padding-left: 8px; } +.path-bar button image { + padding-left: 4px; + padding-right: 4px; } +.path-bar button.slider-button { + padding-left: 0; + padding-right: 0; } + +/*************** + * Popovers * + ***************/ +popover.background { + padding: 2px; + border-radius: 5px; + background: linear-gradient(to bottom, #1a1d2b, #12151f); + box-shadow: 0 4px 6px rgba(12, 14, 21, 0.8); } + .csd popover.background, popover.background { + border: 1px solid rgba(12, 14, 21, 0.8); } + popover.background:backdrop { + background-color: #161925; + box-shadow: none; } + popover.background > list, + popover.background > .view, + popover.background > iconview, + popover.background > toolbar { + border-style: none; + background-color: transparent; } + .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator { + margin: 3px; } + popover.background list separator { + margin: 0px; } + +/***************** + * Progress bars * + *****************/ +progressbar { + font-size: smaller; + color: rgba(195, 199, 209, 0.4); } + progressbar.horizontal trough, + progressbar.horizontal progress { + min-height: 6px; } + progressbar.vertical trough, + progressbar.vertical progress { + min-width: 6px; } + progressbar.horizontal progress { + margin: 0; } + progressbar.vertical progress { + margin: 0; + background: linear-gradient(to bottom, #00f17d, #00f7d2); } + progressbar:backdrop { + box-shadow: none; + transition: 200ms ease-out; } + progressbar.osd { + min-width: 3px; + min-height: 3px; + background-color: transparent; } + progressbar.osd trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; } + progressbar.osd progress { + border-style: none; + border-radius: 0; } + +/************ + * GtkScale * + ************/ +progressbar trough, scale trough, scale fill { + background-color: rgba(255, 255, 255, 0.14); + border: none; + border-radius: 3px; + margin: 0; } + progressbar trough:disabled, scale trough:disabled, scale fill:disabled { + background-color: rgba(255, 255, 255, 0.06); } + progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { + background-color: rgba(255, 255, 255, 0.06); + transition: 200ms ease-out; } + progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { + background-color: rgba(255, 255, 255, 0.06); } + +progressbar progress, scale highlight { + border: none; + background: linear-gradient(to right, #00f17d, #00f7d2); + border-radius: 3px; + margin: 0; } + progressbar progress:disabled, scale highlight:disabled { + border: none; + background-color: rgba(255, 255, 255, 0.14); } + progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { + border-color: #db10ea; + background-color: #db10ea; } + progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { + background-color: rgba(255, 255, 255, 0.06); } + +scale { + min-height: 16px; + min-width: 16px; + padding: 8px; } + scale.horizontal trough, + scale.horizontal progress { + min-height: 6px; } + scale.vertical trough, + scale.vertical progress { + min-width: 6px; } + scale.vertical highlight { + background: linear-gradient(to bottom, #00f17d, #00f7d2); } + scale slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + background-color: #181b28; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + border-radius: 12px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border, box-shadow; } + scale slider:active { + background-color: #c50ed2; } + scale slider:active:disabled { + background-color: #171a26; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.fine-tune.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; } + scale.fine-tune.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; } + scale.fine-tune slider { + margin: -6px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 5px; + outline-color: transparent; } + scale fill:backdrop, scale fill { + background-color: rgba(12, 14, 21, 0.8); } + scale fill:disabled:backdrop, scale fill:disabled { + border-color: transparent; + background-color: transparent; } + .osd scale fill { + background-color: rgba(97, 97, 97, 0.775); } + .osd scale fill:disabled:backdrop, .osd scale fill:disabled { + border-color: transparent; + background-color: transparent; } + scale slider { + border-color: #181b28; + border: 2px solid #00f17d; + border-radius: 12px; + background-color: #292f45; } + scale slider:active { + border-color: #980ba2; } + scale slider:disabled { + background-color: #0c0e15; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + scale slider:backdrop, scale slider:backdrop:disabled { + transition: 200ms ease-out; + background-color: #0c0e15; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + row:selected scale slider:disabled, row:selected scale slider { + border-color: #980ba2; } + .osd scale slider { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border-color: rgba(0, 0, 0, 0.7); + background-color: #10131b; } + .osd scale slider:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #10131b; } + .osd scale slider:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #10131b; } + .osd scale slider:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-color: #10131b; } + .osd scale slider:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-color: #10131b; } + .osd scale slider:backdrop:disabled { + background-color: #10131b; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 6px; + margin-top: -12px; } + scale marks.bottom { + margin-top: 6px; + margin-bottom: -12px; } + scale marks.top { + margin-right: 6px; + margin-left: -12px; } + scale marks.bottom { + margin-left: 6px; + margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -9px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -9px; } + scale.fine-tune marks.top { + margin-right: 6px; + margin-left: -9px; } + scale.fine-tune marks.bottom { + margin-left: 6px; + margin-right: -9px; } + scale.horizontal indicator { + min-height: 6px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 3px; } + scale.vertical indicator { + min-height: 1px; + min-width: 6px; } + scale.vertical.fine-tune indicator { + min-width: 3px; } + scale.horizontal.marks-before:not(.marks-after) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.color { + min-height: 0; + min-width: 0; } + scale.color trough { + background-image: image(rgba(12, 14, 21, 0.8)); + background-repeat: no-repeat; } + scale.color.horizontal { + padding: 0 0 15px 0; } + scale.color.horizontal trough { + padding-bottom: 4px; + background-position: 0 -3px; + border-top-left-radius: 0; + border-top-right-radius: 0; } + scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { + margin-bottom: -15px; + margin-top: 6px; } + scale.color.vertical:dir(ltr) { + padding: 0 0 0 15px; } + scale.color.vertical:dir(ltr) trough { + padding-left: 4px; + background-position: 3px 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { + margin-left: -15px; + margin-right: 6px; } + scale.color.vertical:dir(rtl) { + padding: 0 15px 0 0; } + scale.color.vertical:dir(rtl) trough { + padding-right: 4px; + background-position: -3px 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { + margin-right: -15px; + margin-left: 6px; } + scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { + padding: 0 0 12px 0; } + scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { + padding-bottom: 7px; + background-position: 0 -6px; } + scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { + margin-bottom: -15px; + margin-top: 6px; } + scale.color.fine-tune.vertical:dir(ltr) { + padding: 0 0 0 12px; } + scale.color.fine-tune.vertical:dir(ltr) trough { + padding-left: 7px; + background-position: 6px 0; } + scale.color.fine-tune.vertical:dir(ltr) slider { + margin-left: -15px; + margin-right: 6px; } + scale.color.fine-tune.vertical:dir(rtl) { + padding: 0 12px 0 0; } + scale.color.fine-tune.vertical:dir(rtl) trough { + padding-right: 7px; + background-position: -6px 0; } + scale.color.fine-tune.vertical:dir(rtl) slider { + margin-right: -15px; + margin-left: 6px; } + +/************** + * Scrollbars * + **************/ +scrollbar { + background-color: #171a27; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.bottom { + border-top: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.left { + border-right: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.right { + border-left: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar:backdrop { + background-color: #10131b; + border-color: rgba(13, 16, 23, 0.82); + transition: 200ms ease-out; } + scrollbar slider { + min-width: 6px; + min-height: 6px; + margin: -1px; + border: 4px solid transparent; + border-radius: 8px; + background-clip: padding-box; + background-color: #7e818c; } + scrollbar slider:hover { + background-color: #a0a4af; } + scrollbar slider:hover:active { + background-color: #e323f0; } + scrollbar slider:backdrop { + background-color: #393c47; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { + margin: 0; + min-width: 3px; + min-height: 3px; + background-color: #C3C7D1; + border: 1px solid black; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; + background-color: #C3C7D1; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid black; + -gtk-icon-source: none; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } + scrollbar button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #7e818c; } + scrollbar button:hover { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #a0a4af; } + scrollbar button:active, scrollbar button:checked { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #e323f0; } + scrollbar button:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(126, 129, 140, 0.2); } + scrollbar button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #393c47; } + scrollbar button:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(57, 60, 71, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } + +treeview ~ scrollbar.vertical { + border-top: 1px solid rgba(12, 14, 21, 0.8); + margin-top: -1px; } + +/*********** + * Sidebar * + ***********/ +.sidebar { + border-style: none; + border-width: 0; + background-color: #171a27; } + .sidebar .frame { + border: none; } + stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { + border-right: none; + border-left-style: none; } + stacksidebar.sidebar:dir(rtl) list + .sidebar:dir(rtl), stacksidebar.sidebar.right list + .sidebar:dir(rtl), .sidebar.right { + border-left: 1px solid rgba(12, 14, 21, 0.8); + border-right-style: none; } + .sidebar:backdrop { + background-color: #181b28; + border-color: rgba(13, 16, 23, 0.82); } + .sidebar row { + padding: 8px 12px; + transition: all .12s ease-in; } + .sidebar row label { + color: #98abb2; } + .sidebar row:selected { + color: #fefefe; } + .sidebar row:selected:backdrop { + color: rgba(254, 254, 254, 0.5); + background: rgba(197, 14, 210, 0.6); } + .sidebar row:selected:backdrop label { + color: #fefefe; } + .sidebar row:selected label { + color: #fefefe; } + .sidebar.source-list { + background: #161925; + padding: 4px 0px; } + .sidebar.source-list.view, iconview.sidebar.source-list { + transition: all .12s ease-in; } + .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { + background-color: #c50ed2; + color: #fefefe; } + .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { + background-color: rgba(197, 14, 210, 0.9); } + .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { + background-color: rgba(0, 0, 0, 0.13); } + paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { + border-style: none; + border-color: rgba(12, 14, 21, 0.8); } + +stacksidebar row { + padding: 10px 4px; } + stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; } + stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; } + +/*******************************************************************/ +/* PLACESSIDEBAR */ +/*******************************************************************/ +/*--*/ +placessidebar.sidebar { + background-color: transparent; + background-image: linear-gradient(to right, #171e27 40px, #161925 35px, #161925 36px, #161925 36px, #161925 99%, #161925 100%); } + placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { + margin-left: -14px; + margin-right: 12px; + padding-left: 14px; + padding-right: 12px; + color: #9ecfa2; } + placessidebar.sidebar row.sidebar-row:hover { + transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: rgba(0, 0, 0, 0.76); + background-color: transparent; + /*rgba(65,67,75,0.4); */ + background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } + placessidebar.sidebar row.sidebar-row:active:hover { + color: rgba(0, 0, 0, 0.76); + background-color: rgba(0, 0, 0, 0.23); } + placessidebar.sidebar row.sidebar-row:selected { + color: rgba(255, 255, 255, 0.938); + background-color: transparent; + background-image: linear-gradient(to right, #c50ed2 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + placessidebar.sidebar row.sidebar-row:selected:hover { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.24); } + placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { + color: #ffffff; } + placessidebar.sidebar row.sidebar-row:selected:backdrop { + color: rgba(0, 0, 0, 0.54); + background-color: transparent; + background-image: linear-gradient(to right, #c50ed2 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { + color: rgba(254, 254, 254, 0.5); + -gtk-icon-shadow: 0 1px rgba(254, 254, 254, 0.3); } + placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); + color: inherit; } + placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { + color: #f9dc5c; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) { + box-shadow: inset 0 1px #71f79f, inset 0 -1px #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled), placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) image { + color: #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected { + background: #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected image { + color: #fefefe; } +placessidebar list { + background-color: transparent; } + placessidebar list:backdrop { + background-color: transparent; } + +/***************** + * GtkSpinButton * + *****************/ +spinbutton:not(.vertical) { + padding: 0; } + spinbutton:not(.vertical) entry { + min-width: 28px; + margin: 0; + background: none; + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; } + spinbutton:not(.vertical) button { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: #b2b6c0; + background-image: none; + border-style: none none none solid; + border-color: rgba(12, 14, 21, 0.1); + border-radius: 0; + box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } + spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + spinbutton:not(.vertical) button:hover { + color: #C3C7D1; + background-color: rgba(195, 199, 209, 0.05); } + spinbutton:not(.vertical) button:disabled { + color: rgba(109, 112, 123, 0.3); } + spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + spinbutton:not(.vertical) button:backdrop { + color: #656873; + background-color: transparent; + border-color: rgba(13, 16, 23, 0.12); + transition: 200ms ease-out; } + spinbutton:not(.vertical) button:backdrop:disabled { + color: rgba(51, 57, 85, 0.3); + background-image: none; + border-style: none none none solid; + box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } + spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { + border-style: none solid none none; } + spinbutton:not(.vertical) button:last-child { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } +.osd spinbutton:not(.vertical) button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-style: none none none solid; + border-color: rgba(0, 0, 0, 0.4); + border-radius: 0; + box-shadow: none; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + .osd spinbutton:not(.vertical) button:hover { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-color: rgba(0, 0, 0, 0.5); + background-color: rgba(254, 254, 254, 0.1); + -gtk-icon-shadow: 0 1px black; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-color: rgba(0, 0, 0, 0.5); + -gtk-icon-shadow: none; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #87898d; + border-color: rgba(0, 0, 0, 0.5); + -gtk-icon-shadow: none; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:last-child { + border-radius: 0 3px 3px 0; } + .osd spinbutton:not(.vertical) button:dir(rtl):first-child { + border-radius: 3px 0 0 3px; } +spinbutton.vertical:disabled { + color: #6d707b; } +spinbutton.vertical:backdrop:disabled { + color: #333955; } +spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } +spinbutton.vertical entry { + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; } +spinbutton.vertical button { + min-height: 32px; + min-width: 32px; + padding: 0; + border-width: 1px; + border-color: rgba(12, 14, 21, 0.8); + box-shadow: 0 1px rgba(255, 255, 255, 0.1); } +spinbutton.vertical button.up { + border-radius: 3px 3px 0 0; + border-style: solid solid none solid; } +spinbutton.vertical button.down { + border-radius: 0 0 3px 3px; + border-style: none solid solid solid; } +.osd spinbutton.vertical button:first-child { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd spinbutton.vertical button:first-child:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +treeview spinbutton:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; } + treeview spinbutton:not(.vertical) entry { + min-height: 0; + padding: 1px 2px; } + +/*********** + * Spinner * + ***********/ +menu spinner { + color: #c50ed2; } + +/********************* + * Spinner Animation * + *********************/ +@keyframes spin { + to { + -gtk-icon-transform: rotate(1turn); } } +spinner { + background: none; + opacity: 0; + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } + spinner:checked { + opacity: 1; + animation: spin 1s linear infinite; } + spinner:checked:disabled { + opacity: 0.5; } + +/********** + * Switch * + **********/ +switch { + font-size: 1px; + font-weight: bold; + outline-offset: -4px; + transition: all 200ms ease-in; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 14px; + color: transparent; + padding: 2.3px 0px; + background: linear-gradient(to right, #1E2233, #1E2233); } + switch:disabled { + background-color: #171a26; } + switch:backdrop { + background-color: #161925; + transition: 200ms ease-out; } + switch:backdrop:disabled { + background-color: #171a26; } + switch:active, switch:checked { + background: linear-gradient(to right, #f7005a, #fadd00); } + switch:active slider, switch:checked slider { + background: #fff; } + switch:active:backdrop, switch:checked:backdrop { + background: linear-gradient(to right, #de0051, #e1c600); } + switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop { + box-shadow: none; + background-color: rgba(24, 27, 40, 0.9); + border: none; } + switch slider { + padding: 2px; + margin: 0 2.3px; + min-width: 12px; + min-height: 12px; + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + background-color: #151723; } + switch slider:backdrop { + padding: 2px; + box-shadow: none; + background-color: #181b28; } + switch trough:active, switch trough:checked { + background-color: #c50ed2; } + switch trough:active:backdrop, switch trough:checked:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + +/************ + * Toolbars * + ************/ +toolbar, .inline-toolbar, searchbar, +.location-bar { + -GtkWidget-window-dragging: true; + padding: 4px; + background-color: #161925; } + +toolbar { + padding: 4px 3px 3px 4px; } + .osd toolbar { + background-color: transparent; } + toolbar.osd { + padding: 13px; + border: none; + border-radius: 5px; + background-color: rgba(16, 19, 27, 0.98); } + toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { + border-radius: 0; } + toolbar.horizontal separator { + margin: 0 7px 1px 6px; } + toolbar.vertical separator { + margin: 6px 1px 7px 0; } + toolbar:not(.inline-toolbar):not(.osd) switch, + toolbar:not(.inline-toolbar):not(.osd) scale, + toolbar:not(.inline-toolbar):not(.osd) entry, + toolbar:not(.inline-toolbar):not(.osd) spinbutton, + toolbar:not(.inline-toolbar):not(.osd) button { + margin-right: 1px; + margin-bottom: 1px; } + +.inline-toolbar { + padding: 3px; + border-width: 0 1px 1px; + border-radius: 0 0 5px 5px; } + +searchbar, +.location-bar { + border-width: 0 0 1px; + padding: 3px; } + +.inline-toolbar, searchbar, +.location-bar { + border-style: solid; + border-color: rgba(12, 14, 21, 0.8); + background-color: rgba(20, 23, 33, 0.94); } + .inline-toolbar:backdrop, searchbar:backdrop, + .location-bar:backdrop { + border-color: rgba(13, 16, 23, 0.82); + background-color: rgba(20, 23, 33, 0.937); + box-shadow: none; + transition: 200ms ease-out; } + +searchbar { + background: #181b28; } + +/************ + * Tooltips * + ************/ +tooltip { + padding: 4px; + /* not working */ + border-radius: 4px; + box-shadow: none; + text-shadow: 0 1px black; } + tooltip.background { + background-color: #0c0e15; + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.1); } + tooltip decoration { + background-color: transparent; } + tooltip * { + padding: 4px; + background-color: transparent; + color: white; } + +/************** + * Tree Views * + **************/ +treeview.view { + border-left-color: #6e717d; + border-top-color: #161925; } + * { + -GtkTreeView-horizontal-separator: 4; + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; } + treeview.view:selected:focus, treeview.view:selected { + border-radius: 0; } + treeview.view:selected:backdrop, treeview.view:selected { + border-left-color: #e286e8; + border-top-color: rgba(195, 199, 209, 0.1); } + treeview.view:disabled { + color: #6d707b; } + treeview.view:disabled:selected { + color: #dc6ee4; } + treeview.view:disabled:selected:backdrop { + color: rgba(204, 44, 216, 0.85); } + treeview.view:disabled:backdrop { + color: #333955; } + treeview.view.separator { + min-height: 2px; + color: #161925; } + treeview.view.separator:backdrop { + color: rgba(22, 25, 37, 0.1); } + treeview.view:backdrop { + border-left-color: #424550; + border-top: #161925; } + treeview.view:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: #980ba2; } + treeview.view:drop(active).after { + border-top-style: none; } + treeview.view:drop(active).before { + border-bottom-style: none; } + treeview.view.expander { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: #90939e; } + treeview.view.expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + treeview.view.expander:hover { + color: #C3C7D1; } + treeview.view.expander:selected { + color: #edb6f1; } + treeview.view.expander:selected:hover { + color: #fefefe; } + treeview.view.expander:selected:backdrop { + color: rgba(222, 119, 229, 0.65); } + treeview.view.expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + treeview.view.expander:backdrop { + color: #545763; } + treeview.view.progressbar { + border: 1px solid #980ba2; + border-radius: 4px; + background-color: #c50ed2; + background-image: linear-gradient(to bottom, #c50ed2, #980ba2); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); } + treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { + border-radius: 4px; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + background-image: linear-gradient(to bottom, #181b28, #050608); } + treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { + border-color: #1a1d2b; + background-color: #1a1d2b; } + treeview.view.progressbar:backdrop { + border-color: #1a1d2b; + background-image: none; + box-shadow: none; } + treeview.view.trough { + background-color: rgba(195, 199, 209, 0.1); + border-radius: 4px; } + treeview.view.trough:selected:focus, treeview.view.trough:selected { + background-color: #980ba2; + border-radius: 4px; } + treeview.view header button { + color: #6e717d; + background-color: #181b28; + font-weight: bold; + text-shadow: none; + box-shadow: none; } + treeview.view header button:hover { + color: #999ca7; + box-shadow: none; + transition: none; } + treeview.view header button:active { + color: #C3C7D1; + transition: none; } + treeview.view header button:last-child:backdrop, treeview.view header button:last-child { + border-right-style: none; } + treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, + treeview.view header.button.dnd:active, + treeview.view header.button.dnd:selected, + treeview.view header.button.dnd:hover, + treeview.view header.button.dnd { + padding: 0 6px; + transition: none; + background-image: none; + background-color: #c50ed2; + color: #181b28; + border-radius: 0; + border-style: none; + box-shadow: inset 0 0 0 1px #181b28; + text-shadow: none; } + treeview.view acceleditor > label { + background-color: #c50ed2; } + +treeview.view header button, treeview.view header button:hover, treeview.view header button:active { + padding: 0 6px; + border-radius: 0; + background-image: none; + text-shadow: none; + border-width: 1px; + border-style: none solid solid none; + border-color: #161925; } + treeview.view header button:disabled { + border-color: #161925; + background-image: none; } + treeview.view header button:backdrop { + border-color: #161925; + border-style: none solid solid none; + color: #424550; + background-image: none; + background-color: #1a1d2b; } + treeview.view header button:backdrop:disabled { + border-color: #161925; + background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + border-radius: 4px 4px 0 0; + border-width: 0px; + border-width: 0px; + box-shadow: 0 4px 10px 2px rgba(12, 14, 21, 0.6); + margin: 10px; } + decoration:backdrop { + box-shadow: 0 4px 10px 2px rgba(12, 14, 21, 0.4); + transition: 200ms ease-out; } + .maximized decoration, .fullscreen decoration, .tiled decoration { + border-radius: 0; } + .popup decoration { + box-shadow: none; } + .ssd decoration { + box-shadow: none; } + .csd.popup decoration { + border-radius: 7px; + box-shadow: 0 4px 8px rgba(12, 14, 21, 0.8); + border: 1px solid rgba(12, 14, 21, 0.8); } + tooltip.csd decoration { + border-radius: 5px; + box-shadow: none; } + messagedialog.csd decoration { + border-radius: 7px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(12, 14, 21, 0.6); } + .solid-csd decoration { + border-radius: 0; + margin: 0px; + background-color: #161925; + border: solid 1px rgba(13, 16, 23, 0.82); + box-shadow: none; } + +button.titlebutton { + background-repeat: no-repeat; + background-position: center; + min-height: 20px; + padding: 0 1px; + box-shadow: none; } + button.titlebutton.close { + background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } + button.titlebutton.close:hover, button.titlebutton.close:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } + button.titlebutton.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } + button.titlebutton.maximize:hover, button.titlebutton.maximize:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } + button.titlebutton.minimize { + background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } + button.titlebutton.minimize:hover, button.titlebutton.minimize:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } + button.titlebutton:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } + +headerbar.selection-mode button.titlebutton, +.titlebar.selection-mode button.titlebutton { + text-shadow: 0 -1px rgba(0, 0, 0, 0.648627451); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.648627451); } + headerbar.selection-mode button.titlebutton:backdrop, + .titlebar.selection-mode button.titlebutton:backdrop { + -gtk-icon-shadow: none; } + +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, +.view text:selected:focus, +iconview text:selected:focus, +textview text:selected:focus, +.view text:selected, +iconview text:selected, +textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, +textview text selection:focus, +textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, +.menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, +entry selection:focus, +entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { + background-color: #c50ed2; } + row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + .view text:selected:focus, + iconview text:selected:focus, + textview text:selected:focus, + .view text:selected, + iconview text:selected, + textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, + textview text selection:focus, + textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, + popover.background radiobutton:selected, + .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, + entry selection:focus, + entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { + color: #fefefe; + font-weight: normal; } + row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + iconview text:disabled:selected:focus, + textview text:disabled:selected:focus, + .view text:disabled:selected, + iconview text:disabled:selected, + textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, + textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, + popover.background radiobutton:disabled:selected, + .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, + entry selection:disabled, row:disabled:selected { + color: #e286e8; } + row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + iconview text:backdrop:selected:focus, + textview text:backdrop:selected:focus, + .view text:backdrop:selected, + iconview text:backdrop:selected, + textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, + textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, + .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, + entry selection:backdrop, row:backdrop:selected { + color: rgba(254, 254, 254, 0.5); } + row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + .view text:backdrop:disabled:selected, + iconview text:backdrop:disabled:selected, + textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, + textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, popover.background checkbutton:backdrop:disabled:selected, + popover.background radiobutton:backdrop:disabled:selected, + .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, + entry selection:backdrop:disabled, row:backdrop:disabled:selected { + color: rgba(204, 44, 216, 0.85); } + +.monospace { + font-family: Monospace; } + +/********************** + * DE-Specific Styles * + **********************/ +/********* +* Budgie * +*********/ +.budgie-container { + background-color: transparent; } + .budgie-container:backdrop { + background-color: transparent; } + .budgie-container popover list, + .budgie-container popover row { + border: none; + background: none; + padding: 0; + margin: 0; } + +.budgie-popover .container, +.budgie-popover border, +.budgie-popover list, +.budgie-popover row { + padding: 0; + margin: 0; + background: none; + border: none; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + opacity: 1; + min-width: 0; + min-height: 0; } + +.budgie-popover, +.budgie-popover.background { + border-radius: 2px; + padding: 0; + background: #07080c; + background-clip: border-box; + box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); + border: 1px solid black; } + .budgie-popover list:hover, + .budgie-popover row:hover, + .budgie-popover.background list:hover, + .budgie-popover.background row:hover { + background: none; } + .budgie-popover > frame.container, + .budgie-popover.background > frame.container { + margin: 0 -1px -1px; + padding: 2px 0 0; } + .budgie-popover button, + .budgie-popover.background button { + color: #C3C7D1; + border: none; + background: transparent; } + .budgie-popover button:hover, + .budgie-popover.background button:hover { + color: #c50ed2; } + +.budgie-popover > .container { + padding: 2px; } + +.budgie-menu { + color: #C3C7D1; } + .budgie-menu .container { + padding: 0; } + .budgie-menu button:hover { + -gtk-icon-effect: none; } + .budgie-menu entry.search { + border: none; + background: none; + padding: 5px 2px; + border-bottom: 1px solid black; + border-radius: 0; + font-size: 120%; + box-shadow: none; + color: #C3C7D1; } + .budgie-menu entry.search image:dir(ltr) { + padding-left: 8px; + padding-right: 12px; } + .budgie-menu entry.search image:dir(rtl) { + padding-left: 12px; + padding-right: 8px; } + .budgie-menu .categories { + border-width: 0; + margin-left: 3px; + background: transparent; } + .budgie-menu .categories:dir(ltr) { + border-right: 1px solid black; } + .budgie-menu .categories:dir(rtl) { + border-left: 1px solid black; } + .budgie-menu .category-button { + padding: 7px; + border-radius: 2px 0 0 2px; } + .budgie-menu .category-button:hover { + background-color: rgba(195, 199, 209, 0.05); + color: #C3C7D1; } + .budgie-menu .category-button:active { + box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + .budgie-menu .category-button:checked { + color: #fefefe; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .budgie-menu .category-button:checked:hover { + color: rgba(254, 254, 254, 0.9); } + .budgie-menu .category-button:checked:disabled { + opacity: 0.5; } + .budgie-menu .category-button:checked:disabled label { + color: rgba(254, 254, 254, 0.7); } + .budgie-menu scrollbar { + background-color: transparent; + border-color: black; } + .budgie-menu button:not(.category-button) { + padding-top: 5px; + padding-bottom: 5px; + border-radius: 0; + box-shadow: none; + background: yellow; } + .budgie-menu button { + border: none; + background: transparent; } + .budgie-menu undershoot, .budgie-menu overshoot { + background: none; } + .budgie-menu list { + color: rgba(195, 199, 209, 0.7); } + +button.budgie-menu-launcher { + padding: 0 2px; + color: white; + box-shadow: none; + background-color: transparent; } + button.budgie-menu-launcher:hover { + color: white; } + button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { + color: white; } + button.budgie-menu-launcher:backdrop { + color: white; + background-color: transparent; } + button.budgie-menu-launcher:backdrop:hover { + color: white; } + button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { + color: #c50ed2; + box-shadow: none; + background-color: #181b27; } + +.user-menu .content-box separator { + margin-left: 6px; + margin-right: 6px; + background-color: rgba(195, 199, 209, 0.1); } +.user-menu button { + margin: 5px; } +.user-menu > box.vertical row.activatable:first-child .indicator-item, +.user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); + background-color: #c50ed2; + transition-duration: 0.2s; } + .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { + padding-left: 7px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38px auto; } + .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { + padding-right: 7px; + background-position: right center; + background-repeat: no-repeat; + background-size: 38px auto; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { + color: #fefefe; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { + padding-left: 5px; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { + padding-right: 5px; } + .user-menu > box.vertical row.activatable:first-child .indicator-item image, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { + color: #fefefe; } + .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { + min-width: 24px; + min-height: 20px; } + +button.raven-trigger { + padding-left: 2px; + padding-right: 2px; + color: white; + box-shadow: none; } + button.raven-trigger:hover { + color: white; + background-color: transparent; } + button.raven-trigger:active, button.raven-trigger:checked { + box-shadow: none; + background-color: transparent; + color: #c50ed2; } + button.raven-trigger:backdrop { + color: white; } + button.raven-trigger:backdrop:hover { + color: white; } + button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { + box-shadow: none; + color: #c50ed2; + background-color: transparent; } + +.places-menu .container { + padding: 0; } +.places-menu .message-bar { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.places-menu .name-button { + border: 0; + border-radius: 0; + padding: 4px 6px; } +.places-menu .unmount-button { + padding: 4px 4px; + border: 0; + border-radius: 0; } +.places-menu .places-section-header { + padding: 0px; + border-bottom: 1px solid rgba(0, 0, 0, 0.95); + box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } +.places-menu .places-section-header > button { + padding: 8px; + border: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } +.places-menu .places-list { + background: rgba(195, 199, 209, 0.04); + border-bottom: 1px solid rgba(0, 0, 0, 0.95); } +.places-menu .unlock-area { + border-top: 1px solid rgba(0, 0, 0, 0.85); + border-bottom: 1px solid rgba(0, 0, 0, 0.85); } +.places-menu .unlock-area entry { + border-radius: 0; + border: 0; } +.places-menu .unlock-area button { + border-radius: 0; + border: 0; + border-left: 1px solid rgba(0, 0, 0, 0.85); } +.places-menu .alternative-label { + font-size: 15px; + padding: 3px; } +.places-menu .always-expand { + background: transparent; + border-bottom: none; } + +.night-light-indicator .container { + padding: 0; } +.night-light-indicator .view-header { + font-size: 14px; + padding: 10px; + border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35);; + box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04);; } +.night-light-indicator .display-settings-button { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border: none; + padding: 3px; + border-top: 1px solid mix(@theme_base_color, #000000, 0.35);; + box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04);; } + +.budgie-panel { + color: white; + background-color: rgba(0, 0, 0, 0.95); + background-image: none; + box-shadow: none; + border: none; + transition: all 150ms ease-in; } + .budgie-panel .alert { + color: #ed254e; } + .budgie-panel:backdrop { + color: white; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-panel button { + border-top-width: 0; + border-bottom-width: 0; + border-radius: 0; } + .budgie-panel button.flat { + background: transparent; + border: none; } + .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { + background: transparent; + color: #c50ed2; } + .budgie-panel popover list, + .budgie-panel popover row { + padding: 0; + margin: 0; } + .budgie-panel label { + color: white; + font-weight: 700; } + .budgie-panel.transparent { + background-color: rgba(0, 0, 0, 0.2); } + .top .budgie-panel.transparent { + border-bottom-color: transparent; } + .bottom .budgie-panel.transparent { + border-top-color: transparent; } + .left .budgie-panel.transparent { + border-right-color: transparent; } + .right .budgie-panel.transparent { + border-left-color: transparent; } + .budgie-panel .end-region { + border-radius: 0px; } + .budgie-panel .end-region separator { + background-color: rgba(195, 199, 209, 0.15); } + .budgie-panel .end-region label { + font-weight: 700; + color: #C3C7D1; } + +.budgie-panel #tasklist-button, +.budgie-panel #tasklist-button:backdrop { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: rgba(0, 0, 0, 0); + border-radius: 0; + background-color: transparent; + box-shadow: none; + background-clip: padding-box; } + +.budgie-panel button.flat.launcher { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: rgba(0, 0, 0, 0); + border-radius: 0; + padding: 0; + background-clip: padding-box; + background-color: transparent; } + .budgie-panel button.flat.launcher { + box-shadow: none; } + +.budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, +.budgie-panel .pinned button.flat.launcher.running:hover { + box-shadow: none; } +.budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, +.budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, +.budgie-panel .pinned button.flat.launcher.running:checked { + box-shadow: none; } +.top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, +.top .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .top button.flat.launcher.running { + padding-bottom: 2px; + border-top: 2px solid transparent; } + .top .budgie-panel .pinned button.flat.launcher:not(.running) { + border-top: 2px solid transparent; } + + .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-top: 2px solid rgba(255, 255, 255, 0.1); } + + .top .budgie-panel .unpinned button.flat.launcher, + .top .budgie-panel .pinned button.flat.launcher.running { + border-top: 2px solid rgba(255, 255, 255, 0.1); } + .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, + .top .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .top button.flat.launcher.running:hover { + border-top: 2px solid rgba(255, 255, 255, 0.25); } + .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, + .top .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, + .top .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .top button.flat.launcher.running:checked { + border-top: 2px solid #c50ed2; } +.bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, +.bottom .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .bottom button.flat.launcher.running { + padding-top: 2px; + border-bottom: 2px solid transparent; } + .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { + border-bottom: 2px solid transparent; } + + .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-bottom: 2px solid rgba(255, 255, 255, 0.1); } + + .bottom .budgie-panel .unpinned button.flat.launcher, + .bottom .budgie-panel .pinned button.flat.launcher.running { + border-bottom: 2px solid rgba(255, 255, 255, 0.1); } + .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, + .bottom .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .bottom button.flat.launcher.running:hover { + border-bottom: 2px solid rgba(255, 255, 255, 0.25); } + .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, + .bottom .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, + .bottom .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .bottom button.flat.launcher.running:checked { + border-bottom: 2px solid #c50ed2; } +.left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, +.left .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .left button.flat.launcher.running { + padding-right: 2px; + border-left: 2px solid transparent; } + .left .budgie-panel .pinned button.flat.launcher:not(.running) { + border-left: 2px solid transparent; } + + .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-left: 2px solid rgba(255, 255, 255, 0.1); } + + .left .budgie-panel .unpinned button.flat.launcher, + .left .budgie-panel .pinned button.flat.launcher.running { + border-left: 2px solid rgba(255, 255, 255, 0.1); } + .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, + .left .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .left button.flat.launcher.running:hover { + border-left: 2px solid rgba(255, 255, 255, 0.25); } + .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, + .left .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, + .left .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .left button.flat.launcher.running:checked { + border-left: 2px solid #c50ed2; } +.right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, +.right .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .right button.flat.launcher.running { + padding-left: 2px; + border-right: 2px solid transparent; } + .right .budgie-panel .pinned button.flat.launcher:not(.running) { + border-right: 2px solid transparent; } + + .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-right: 2px solid rgba(255, 255, 255, 0.1); } + + .right .budgie-panel .unpinned button.flat.launcher, + .right .budgie-panel .pinned button.flat.launcher.running { + border-right: 2px solid rgba(255, 255, 255, 0.1); } + .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, + .right .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .right button.flat.launcher.running:hover { + border-right: 2px solid rgba(255, 255, 255, 0.25); } + .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, + .right .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, + .right .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .right button.flat.launcher.running:checked { + border-right: 2px solid #c50ed2; } + +.top .budgie-panel { + border-bottom: 1px solid rgba(0, 0, 0, 0.92); } + +.top .raven-frame { + padding: 0; + background: none; } + .top .raven-frame border { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.92); } + +.top .shadow-block { + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } + +.bottom .budgie-panel { + border-top: 1px solid rgba(0, 0, 0, 0.92); } + +.bottom .raven-frame { + padding: 0; + background: none; } + .bottom .raven-frame border { + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.92); } + +.bottom .shadow-block { + background-color: transparent; + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } + +.left .budgie-panel { + border-right: 1px solid rgba(0, 0, 0, 0.92); } + +.left .raven-frame { + padding: 0; + background: none; } + .left .raven-frame border { + border: none; + border-right: 1px solid rgba(0, 0, 0, 0.92); } + +.left .shadow-block { + background-color: transparent; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } + +.right .budgie-panel { + border-left: 1px solid rgba(0, 0, 0, 0.92); } + +.right .raven-frame { + padding: 0; + background: none; } + .right .raven-frame border { + border: none; + border-left: 1px solid rgba(0, 0, 0, 0.92); } + +.right .shadow-block { + background-color: transparent; + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } + +.raven { + padding: 0; + color: #C3C7D1; + background: #07080c; + transition: 170ms ease-out; } + .raven .raven-header { + min-height: 32px; + color: #C3C7D1; + border: solid rgba(0, 0, 0, 0.95); + border-width: 1px 0; + background-color: rgba(6, 7, 10, 0.45); } + .raven .raven-header * { + padding-top: 0; + padding-bottom: 0; } + .raven .raven-header.top { + border-top-style: none; + border-color: transparent; + margin-top: 3px; + min-height: 32px; } + .raven .raven-header.top button.image-button:hover { + color: #af0cba; + box-shadow: none; } + .raven .raven-header > button.text-button { + border-radius: 2px; + color: #fefefe; + background-color: rgba(230, 19, 62, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header > button.text-button:hover { + border-radius: 2px; + color: #fefefe; + background-color: rgba(237, 37, 78, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header > button.text-button:active { + color: #fefefe; + background-color: rgba(239, 61, 97, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header.bottom { + border-bottom-style: none; } + .raven .raven-header button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + border-radius: 0; } + .raven .raven-header button:hover { + color: #c50ed2; + border-radius: 0; + text-shadow: none; + border: none; + border-radius: 0; } + .raven .raven-header button:disabled { + color: #6d707b; } + .raven .raven-header button.text-button.radio { + margin: 5px 0px; + min-height: 20px; + padding: 3px; } + .raven .raven-header button.text-button.radio:active, .raven .raven-header button.text-button.radio:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .raven list { + color: #C3C7D1; + background-color: transparent; } + .raven list:selected { + background-color: rgba(197, 14, 210, 0.9); } + .raven list row, + .raven list row.activatable { + background-color: transparent; } + .raven list row:hover, + .raven list row.activatable:hover { + background-color: rgba(29, 33, 48, 0.25); } + .raven list row:selected, + .raven list row.activatable:selected { + background-color: rgba(197, 14, 210, 0.9); } + .raven .raven-background { + color: #C3C7D1; + background-color: transparent; + border-color: transparent; } + .raven .raven-background.middle { + border-bottom-style: none; } + .raven .powerstrip { + background-color: transparent; + border-top-color: transparent; } + .raven .powerstrip button.image-button { + border-radius: 50%; + padding: 5px; + min-width: 32px; + min-height: 32px; + margin-bottom: 3px; + background: #c74ded; + color: #fefefe; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); + border: none; + font-size: 100%; } + .raven .powerstrip button.image-button:hover { + background: rgba(199, 77, 237, 0.85); + color: #fefefe; } + .raven .powerstrip button.image-button:active { + background: #c74ded; + color: #fefefe; } + .raven .powerstrip button.image-button:first-child { + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .raven .powerstrip button.image-button:first-child:hover { + background: rgba(197, 14, 210, 0.85); } + .raven .powerstrip button.image-button:first-child:active { + background: #c50ed2; } + .raven .powerstrip button.image-button:last-child { + background: linear-gradient(to right, #FF416C, #FF4B2B); } + .raven .powerstrip button.image-button:last-child:hover { + background: rgba(237, 37, 78, 0.85); } + .raven .powerstrip button.image-button:last-child:active { + background: #ed254e; } + .raven .option-subtitle { + font-size: 13px; } + +calendar.raven-calendar { + padding: 6px; + color: #C3C7D1; + background: transparent; + border-color: transparent; } + calendar.raven-calendar:indeterminate { + color: alpha(currentColor,0.3); } + calendar.raven-calendar:selected { + background: transparent; + color: #b30dbf; + font-weight: bold; } + calendar.raven-calendar:backdrop { + background-color: transparent; } + calendar.raven-calendar.header { + color: #C3C7D1; + border: none; + border-radius: 0; + background-color: transparent; } + calendar.raven-calendar button, calendar.raven-calendar button:focus { + color: alpha(currentColor,0.5); + background-color: transparent; } + calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { + color: #C3C7D1; + background-color: transparent; } + +.raven-mpris { + color: #C3C7D1; + background-color: rgba(3, 3, 5, 0.9); + border: solid rgba(255, 255, 255, 0.1); + border-width: 1px 0; + border-bottom-color: rgba(0, 0, 0, 0.1); } + .raven-mpris button.image-button { + padding: 10px; + background-color: #181b28; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } + .raven-mpris button.image-button:hover { + background-color: #c50ed2; } + .raven-mpris button.image-button:active { + background-color: #af0cba; } + .raven-mpris button.image-button:first-child { + margin-right: 4px; } + .raven-mpris button.image-button:last-child { + margin-left: 4px; } + .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { + padding: 4px; + margin-top: 6px; + margin-bottom: 6px; } + +.budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { + background: none; + border-radius: 1px; } + .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { + background-color: #c50ed2; + color: #fefefe; + border: none; } + .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { + background-color: #af0cba; + border: none; } + .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { + background-color: #af0cba; } + +.budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { + border-radius: 1px; } +.budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { + font-size: 110%; + color: #C3C7D1; } +.budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { + color: rgba(195, 199, 209, 0.7); } +.budgie-notification button, .budgie-osd button, .budgie-switcher button { + background-color: transparent; + color: #fefefe; } + .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { + background-color: transparent; + color: #ed254e; + box-shadow: none; } + .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { + background-color: transparent; + color: #e6133e; } + +.drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { + color: #C3C7D1; + background-color: rgba(22, 25, 37, 0.95); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + border-radius: 2px; } + +.budgie-switcher-window flowbox { + color: #C3C7D1; } +.budgie-switcher-window flowboxchild { + padding: 3px; + margin: 3px; + color: #C3C7D1; } + .budgie-switcher-window flowboxchild:hover { + background-color: transparent; } + .budgie-switcher-window flowboxchild:active { + color: #C3C7D1; } + .budgie-switcher-window flowboxchild:selected { + color: #fefefe; + background-color: rgba(197, 14, 210, 0.5); } + .budgie-switcher-window flowboxchild:selected:active { + color: #fefefe; } + .budgie-switcher-window flowboxchild:selected:hover { + background-color: #b10dbd; } + .budgie-switcher-window flowboxchild:selected:disabled { + color: rgba(254, 254, 254, 0.7); + background-color: rgba(197, 14, 210, 0.7); } + .budgie-switcher-window flowboxchild:selected:disabled label { + color: rgba(254, 254, 254, 0.7); } + +.budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { + color: #C3C7D1; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { + color: rgba(195, 199, 209, 0.8); } + .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { + font-size: 120%; } + .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { + margin-bottom: 0; + min-height: 32px; + border-bottom: none; + border-color: black; + border-radius: 0; + color: #fff; + background-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } + .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { + font-weight: 700; } + .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { + border-left: none; + border-bottom-left-radius: 2px; } + .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { + border-right: none; + border-bottom-right-radius: 2px; } + .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { + background-color: rgba(197, 14, 210, 0.9); } + .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { + color: rgba(255, 255, 255, 0.5); } + .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { + background-color: rgba(197, 14, 210, 0.9); } + .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { + background-color: rgba(219, 16, 234, 0.9); } + .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { + background-color: rgba(219, 16, 234, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { + background-color: rgba(206, 17, 56, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { + background-color: rgba(230, 19, 62, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { + background-color: rgba(230, 19, 62, 0.9); } + .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { + background-color: #505359; + color: #C3C7D1; } + .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { + background-color: #505359; } + .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { + background-color: #505359; } + +.budgie-polkit-dialog .message { + color: rgba(195, 199, 209, 0.7); } +.budgie-polkit-dialog .failure { + color: #ed254e; } + +.budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { + font-size: 120%; + padding: 8px 5px; + border: none; + box-shadow: none; } + .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { + color: #C3C7D1; } + .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { + padding-left: 8px; + padding-right: 12px; } + .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { + padding-left: 12px; + padding-right: 8px; } +.budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, +.budgie-run-dialog list row:selected headerbar .subtitle, +headerbar .budgie-run-dialog list row:selected .subtitle { + opacity: 1; } +.budgie-run-dialog scrolledwindow { + border-top: 1px solid rgba(0, 0, 0, 0); } + +.budgie-menubar menu { + margin: 4px; + padding: 5px; + border-radius: 0; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-menubar menu menuitem:hover { + background-color: #c50ed2; + color: #fefefe; } +.budgie-menubar arrow { + border: none; + min-width: 16px; + min-height: 16px; } + .budgie-menubar arrow.top { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid rgba(33, 35, 42, 0.928); } + .budgie-menubar arrow.bottom { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid rgba(33, 35, 42, 0.928); } +.budgie-menubar menuitem accelerator { + color: rgba(195, 199, 209, 0.35); } +.budgie-menubar menuitem check, .budgie-menubar menuitem radio { + min-height: 16px; + min-width: 16px; } + +window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { + border-style: none none solid; } + +.workspace-switcher .workspace-layout { + border: 0 solid rgba(0, 0, 0, 0.95); } + .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { + border-left-width: 1px; } + .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { + border-right-width: 1px; } + .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { + border-top-width: 1px; } +.workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { + border: 0 solid rgba(19, 22, 32, 0.95); } + .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), + .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { + border-right-width: 1px; } + .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), + .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { + border-left-width: 1px; } + .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { + border-bottom-width: 1px; } +.workspace-switcher .workspace-item.current-workspace { + background-color: rgba(10, 11, 16, 0.95); } +.workspace-switcher .workspace-add-button { + border: none; + background: transparent; + box-shadow: none; } + .workspace-switcher .workspace-add-button:hover { + box-shadow: none; } + .workspace-switcher .workspace-add-button:active { + background-image: none; } + .workspace-switcher .workspace-add-button:active image { + margin: 1px 0 -1px; } +.budgie-panel .workspace-switcher .workspace-icon-button { + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 2px; } + +/************ + * Nautilus * + ************/ +.nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { + background: transparent; + color: #c50ed2; } + .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { + color: #c50ed2; } +.nautilus-window paned > separator { + background-image: none; } +.nautilus-window .sidebar { + background-color: transparent; } + .nautilus-window .sidebar:backdrop { + background-color: transparent; } + .nautilus-window .sidebar .list-row button { + border: none; + background-color: rgba(18, 21, 31, 0.95); } + .nautilus-window .sidebar .list-row button:active { + background-color: rgba(197, 14, 210, 0.75); } + .nautilus-window .sidebar .list-row:selected { + background-color: rgba(197, 14, 210, 0.75); } + .nautilus-window .sidebar .list-row:selected:hover { + background-color: rgba(197, 14, 210, 0.9); } + .nautilus-window .sidebar .list-row:hover { + background-color: rgba(24, 27, 40, 0.5); } + .nautilus-window .sidebar .list-row:hover:active { + background-color: rgba(197, 14, 210, 0.9); } +.nautilus-window.background { + background-color: rgba(18, 21, 31, 0.95); } + .nautilus-window.background:backdrop { + background-color: rgba(18, 21, 31, 0.95); } +.nautilus-window notebook > stack:only-child { + background-color: #181b28; } + .nautilus-window notebook > stack:only-child:backdrop { + background-color: #1a1d2b; } +.nautilus-window searchbar { + border-top: 1px solid rgba(0, 0, 0, 0.12); } +.nautilus-window .searchbar-container { + margin-top: -1px; } +.nautilus-window .titlebar .search { + border: 1px solid transparent; + border-radius: 10px; + box-shadow: none; + margin-top: 10px; + margin-bottom: 10px; } +.nautilus-window .titlebar .path-bar-box .dim-label, .nautilus-window .titlebar .path-bar-box label.separator, .nautilus-window .titlebar .path-bar-box .subtitle { + color: transparent; } +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child, +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active, +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked, +.nautilus-window .titlebar .path-bar-box button:active, .nautilus-window .titlebar .path-bar-box button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label, + .nautilus-window .titlebar .path-bar-box button:active:backdrop, + .nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label { + color: whitesmoke; } +.nautilus-window .titlebar .linked:not(.path-bar) button:active, .nautilus-window .titlebar .linked:not(.path-bar) button:checked, .nautilus-window .titlebar .linked:not(.path-bar) button:active:backdrop, .nautilus-window .titlebar .linked:not(.path-bar) button:checked:backdrop { + background: transparent; + color: #c50ed2; + box-shadow: none; + border: none; } +.nautilus-window .linked:not(.vertical) > entry { + border-radius: 10px; + margin-right: 5px; } + .nautilus-window .linked:not(.vertical) > entry:focus { + border-color: rgba(197, 14, 210, 0.6); } + +.nautilus-circular-button { + border-radius: 20px; + -gtk-outline-radius: 20px; } + +.disk-space-display { + border: 2px solid; } + .disk-space-display .unknown { + background-color: #888a85; + border-color: #555653; } + .disk-space-display .used { + background-color: #9FB0B9; + border-color: #667f8c; } + .disk-space-display .free { + background-color: #D8D8D8; + border-color: #a5a5a5; } + +.nautilus-desktop { + color: #C3C7D1; } + .nautilus-desktop .nautilus-canvas-item { + border-radius: 5px; + color: #fefefe; + text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } + .nautilus-desktop .nautilus-canvas-item:active { + color: #C3C7D1; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item:hover { + color: #C3C7D1; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item:selected { + color: #fefefe; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, + .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, + headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { + color: #fefefe; } + .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, + .nautilus-desktop .nautilus-list headerbar .subtitle:selected, + headerbar .nautilus-desktop .nautilus-list .subtitle:selected { + color: #fefefe; } + +/********* + * Gedit * + *********/ +.gedit-search-slider { + padding: 4px; + border-radius: 0 0 3px 3px; + border: 0; + background-color: #161925; } + +/********* +* Gnucash * +*********/ +#gnc-id-main-window entry.gnc-class-register-foreground { + background: transparent; + border: none; + box-shadow: none; } +#gnc-id-main-window .arrow.button.toggle { + transition: none; + box-shadow: none; } + #gnc-id-main-window .arrow.button.toggle:hover { + border-color: #c50ed2; } + +.xfce4-panel.panel { + background-color: #181b28; + text-shadow: none; + -gtk-icon-shadow: none; } + +#tasklist-button { + color: rgba(255, 255, 255, 0.8); + border-radius: 0; + border: none; + background-color: rgba(24, 27, 40, 0); } + #tasklist-button:hover { + color: white; + background-color: rgba(0, 0, 0, 0.17); } + #tasklist-button:checked { + color: white; + background-color: rgba(0, 0, 0, 0.25); + box-shadow: inset 0 -2px #c50ed2; } + +.xfce4-panel.panel button.flat { + color: white; + border-radius: 0; + border: none; + background-color: rgba(24, 27, 40, 0); } + .xfce4-panel.panel button.flat:hover { + border: none; + background-color: #2b3148; } + .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.flat:checked { + color: #fefefe; + border-bottom: 2px solid #c50ed2; + background-color: #212638; } + .xfce4-panel.panel button.flat:active label, .xfce4-panel.panel button.flat:active image, .xfce4-panel.panel button.flat:checked label, .xfce4-panel.panel button.flat:checked image { + color: inherit; } + +#whiskermenu-window button { + background-color: transparent; + border: none; + border-radius: 0; + font-weight: normal; + padding: 2px; + margin: 1px 0px; } + #whiskermenu-window button:hover, #whiskermenu-window button:checked { + background-color: #c50ed2; } + +/* thunar */ +.thunar toolbar { + background-color: #0c0e14; } + +/* buttons in toolbar */ +.thunar toolbar.horizontal button image { + -gtk-icon-transform: scale(0.72); } + +scrolledwindow.sidebar treeview.view { + background: #12151f; + padding: 1.5px; } + +/* path-bar of thunar */ +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button { + margin-top: 7px; + margin-bottom: 7px; } + window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button:hover, .thunar toolbar .path-bar-button:hover { + color: #c50ed2; } + window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button:checked, .thunar toolbar .path-bar-button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button { + background: none; + outline: none; + border: none; + box-shadow: none; } + +/* thunar sidepane */ +window.thunar paned > scrolledwindow treeview.view:hover { + background: #10131b; } +window.thunar paned > scrolledwindow treeview.view:selected { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; + border-radius: 0; + box-shadow: none; } + +window.thunar toolbar#location-toolbar entry { + border-radius: 10px; } + +/******** + * Gala * + *******/ +.gala-notification { + border-width: 0; + border-radius: 2px; + color: white; + border: 1px solid #181b28; + background-color: #181b28; } + .gala-notification .title, + .gala-notification .label { + color: #C3C7D1; } + +.gala-button { + padding: 3px; + color: #181b28; + border: none; + border-radius: 50%; + background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } + +/********** + * Notify * + *********/ +.notify { + /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ + border-radius: 5px; + border: 1px solid rgba(0, 0, 0, 0.7); + background-color: rgba(24, 27, 40, 0.05); } + +/*************** + * SwitchBoard * + ***************/ +.category-label { + font-weight: bold; + color: #C3C7D1; } + +/************* + * Slingshot * + ************/ +.button.app { + border: none; + border-radius: 0; + box-shadow: none; + background-image: none; } + .button.app .app:hover { + border-radius: 8px; + border: none; + background-color: rgba(197, 14, 210, 0.3); + color: white; } + .button.app .app:focus { + /*background-color: transparentize(black, 0.20);*/ } + +.search-item { + border-radius: 0; + border: none; + color: #C3C7D1; + background: none; } + .search-item:hover, .search-item:focus { + border-radius: 0; + background-color: rgba(197, 14, 210, 0.3); + color: #fefefe; } + +.search-entry-large, +.search-entry-large:focus { + border: none; + font-size: 18px; + font-weight: 300; + background-image: none; + background: none; + box-shadow: none; + border-radius: 0; } + +.search-category-header { + font-weight: bold; + color: #C3C7D1; } + +/********* + * Panel * + ********/ +.panel { + background-color: transparent; + transition: all 100ms ease-in-out; } + .panel.maximized { + background-color: #181b28; } + .panel.translucent { + background-color: rgba(24, 27, 40, 0.5); } + .panel.color-light.translucent { + background-color: rgba(255, 255, 255, 0.85); } + +menubar.panel, +.panel menubar { + box-shadow: none; + border: none; } + +.composited-indicator > revealer, +.composited-indicator > revealer image, +.composited-indicator > revealer label, +.composited-indicator > revealer spinner { + color: #fff; + font-weight: bold; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); + transition: all 200ms ease-in-out; + -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } +.composited-indicator > revealer image:first-child + label { + margin-left: 5px; } + +.panel.color-light .composited-indicator > revealer, +.panel.color-light .composited-indicator > revealer image, +.panel.color-light .composited-indicator > revealer label, +.panel.color-light .composited-indicator > revealer spinner { + color: rgba(0, 0, 0, 0.6); + text-shadow: 0 1px rgba(255, 255, 255, 0.1); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } + +/************** + * Calculator * + **************/ +PantheonCalculatorMainWindow { + border-radius: 0 0 4px 4px; } + PantheonCalculatorMainWindow .window-frame { + border-radius: 3px; } + +/********* + * Cards * + *********/ +.deck { + background-color: #07080b; } + +.card { + background-color: #181b28; + border: none; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); + transition: all 150ms ease-in-out; } + +.card.collapsed { + background-color: #0e1018; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } + +/********* + * Noise * + *********/ +NoiseLibraryWindow { + border-radius: 0 0 4px 4px; } + NoiseLibraryWindow .action-bar { + border-radius: 0 0 4px 4px; } + NoiseLibraryWindow .window-frame { + border-radius: 3px; } + +/******** + * Snap * + ********/ +SnapMainWindow .take-button, +SnapSnapWindow .take-button { + border-radius: 0; } + +/******************* + * Photos/Shotwell * + *******************/ +DirectWindow .the-button-in-the-combobox, +LibraryWindow .the-button-in-the-combobox { + background: none; } + +.checkerboard-layout { + background-color: #161925; + background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); + background-size: 24px 24px; + background-position: 0 0, 12px 12px; } + +.checkboard-layout .item { + background-color: #C3C7D1; } + +/********* +* Avatar * +*********/ +.avatar { + border: 1px solid rgba(0, 0, 0, 0.23); + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } + +/************ +* Level bar * +*************/ +.source-list.view.level-bar, iconview.source-list.level-bar, .source-list.view.level-bar:selected, iconview.source-list.level-bar:selected, .source-list.view.level-bar:selected:focus, iconview.source-list.level-bar:selected:focus { + background: linear-gradient(#333955, #333955); + border: 1px solid rgba(0, 0, 0, 0.14); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + border-radius: 2px; } +.source-list.view.level-bar.fill-block, iconview.source-list.level-bar.fill-block { + border: none; } + .source-list.view.level-bar.fill-block, iconview.source-list.level-bar.fill-block, .source-list.view.level-bar.fill-block:hover, iconview.source-list.level-bar.fill-block:hover, .source-list.view.level-bar.fill-block:selected, iconview.source-list.level-bar.fill-block:selected, .source-list.view.level-bar.fill-block:selected:focus, iconview.source-list.level-bar.fill-block:selected:focus { + background: linear-gradient(to right, #00f17d, #00f7d2); } + +/************************** + * Colors in context menu * +**************************/ +checkbutton.color-button { + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 100px; + background-clip: border-box; + padding: 0; + margin: 2px 1px; } + checkbutton.color-button > check { + -gtk-icon-source: none; + background: none; + margin-right: 0; + padding: 2px; } + checkbutton.color-button.none > check { + background-color: transparent; + border-radius: 100px; + -gtk-icon-source: -gtk-icontheme("close-symbolic"); } + +radiobutton.color-button > radio { + -gtk-icon-source: none; + margin-right: 0; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 100px; + background-clip: border-box; } +radiobutton.color-button:active > radio { + border: 1px solid rgba(0, 0, 0, 0.35); } + +.color-button check, +.color-button check:checked, +.color-button radio, +.color-button radio:checked { + background-image: none; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 50%; + color: #181b28; + -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } +.color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { + background-color: @STRAWBERRY_300; + -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } +.color-button.orange check, .color-button.orange radio { + background-color: @ORANGE_300; + -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } +.color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { + background-color: @BANANA_500; + -gtk-icon-shadow: 0 1px 1px @BANANA_700; } +.color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { + background-color: @LIME_500; + -gtk-icon-shadow: 0 1px 1px @LIME_700; } +.color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { + background-color: @BLUEBERRY_500; + -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } +.color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { + background-color: @GRAPE_500; + -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } +.color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { + background-color: @COCOA_300; + -gtk-icon-shadow: 0 1px 1px @COCOA_500; } +.color-button.mint check, .color-button.mint radio { + background-color: @MINT_500; + -gtk-icon-shadow: 0 1px 1px @MINT_700; } +.color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { + background-color: @BUBBLEGUM_500; + -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } +.color-button.slate check, .color-button.slate radio { + background-color: @SLATE_300; + -gtk-icon-shadow: 0 1px 1px @SLATE_500; } +.color-button.auto radio { + background-image: url("assets/color-button-auto.png"); + background-position: -1px -1px; + background-repeat: no-repeat; + background-size: calc(100% + 2px); } + +/******** +* Unity * +*********/ +/* Unity window border color */ +/* Unity window text color */ +/* Backdrop Unity window text color */ +/* Unity panel color #454D50 */ +UnityDecoration { + /* Border properties (top, right, bottom, left) */ + -UnityDecoration-extents: 28px 1px 1px 1px; + /* the size of the decorations */ + -UnityDecoration-input-extents: 10px; + /* the extra size of the input areas */ + /* Shadows settings */ + -UnityDecoration-shadow-offset-x: 1px; + /* Size property, the shadow x offset */ + -UnityDecoration-shadow-offset-y: 1px; + /* Size property, the shadow y offset */ + -UnityDecoration-active-shadow-color: rgba 0, 0, 0, 0.647; + /* Color property, active window shadow color */ + -UnityDecoration-active-shadow-radius: 8px; + /* Size property, active window shadow radius */ + -UnityDecoration-inactive-shadow-color: rgba 0, 0, 0, 0.647; + /* Color property, inactive windows shadow color */ + -UnityDecoration-inactive-shadow-radius: 5px; + /* Size property, inactive windows shadow radius */ + /* Glow applied to the selected scaled window */ + -UnityDecoration-glow-size: 8px; + /* Size property, size of glow */ + -UnityDecoration-glow-color: #c50ed2; + /* Color property of the glow */ + /* Title settings */ + -UnityDecoration-title-indent: 10px; + /* Size property, left indent of the title */ + -UnityDecoration-title-fade: 35px; + /* Size property, space of the title that can be faded */ + -UnityDecoration-title-alignment: 0.0; + /* Float from 0.0 to 1.0, to align the title */ + background-color: #eeeeee; + color: #31363D; } + UnityDecoration .top { + padding: 0 5px 0 5px; + border-radius: 4px 4px 0px 0px; + box-shadow: none; + border: 1px solid #eeeeee; + border-bottom-width: 0; + background-color: #eeeeee; + color: #31363D; + border-top: 1px solid rgba(255, 255, 255, 0.1); } + UnityDecoration .top:backdrop { + border-bottom-width: 0; + color: #1a1d21; + border-top: 1px solid rgba(255, 255, 255, 0.1); } + UnityDecoration .top .menuitem { + color: #31363D; } + UnityDecoration .top .menuitem:backdrop { + color: #1a1d21; } + +UnityDecoration.left, +UnityDecoration.right { + background-repeat: repeat-x; + background-color: #ececec; + background-size: 1px 120px; + background-clip: border-box; + background-image: linear-gradient(to bottom, #eeeeee, #ececec); } + +UnityDecoration.bottom { + background-size: 1px; + background-repeat: repeat-x; + background-color: #ececec; } + +UnityDecoration.left:backdrop, +UnityDecoration.right:backdrop, +UnityDecoration.bottom:backdrop { + background-size: 1px; + background-repeat: repeat-x; } + +/************** +* Unity Panel * +***************/ +UnityPanelWidget, +.unity-panel { + background-color: #d5d5d5; + color: #31363D; } + +UnityPanelWidget:backdrop, +.unity-panel:backdrop { + color: #1a1d21; } + +.unity-panel.menuitem, +.unity-panel .menuitem { + border-width: 0 1px; + color: #31363D; } + +.unity-panel.menubar, +.unity-panel .menubar { + color: #31363D; } + +.unity-panel.menu.menubar, +.unity-panel .menu .menubar { + background-color: #d5d5d5; + color: #31363D; } + +.unity-panel.menubar:backdrop, +.unity-panel .menubar *:backdrop { + color: #6d707b; } + +.unity-panel.menubar.menuitem, +.unity-panel.menubar .menuitem { + padding: 3px 5px; + border-width: 1px; + border-style: solid; + border: none; + background: none; + color: #31363D; + box-shadow: none; } + +.unity-panel.menubar.menuitem:hover, +.unity-panel.menubar .menuitem:hover { + border-radius: 0; + background-color: #ebebeb; + color: #31363D; + box-shadow: none; } + +.unity-panel.menubar .menuitem *:hover { + color: white; + box-shadow: none; } + +.unity-panel.menubar .menuitem.separator, +.unity-panel.menubar.menuitem.separator { + border: none; + color: rgba(12, 14, 21, 0.8); } + +/* Force Quit */ +SheetStyleDialog.unity-force-quit { + background-color: #181b28; } + +@keyframes playbackmenuitem_spinner { + to { + -gtk-icon-transform: rotate(1turn); } } +.menu IdoPlaybackMenuItem.menuitem:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: playbackmenuitem_spinner 1s infinite linear; + color: #c50ed2; } + +MsdOsdWindow.background.osd { + border-radius: 2px; + border: 1px solid rgba(12, 14, 21, 0.8); } + MsdOsdWindow.background.osd .progressbar { + background-color: #c50ed2; + border: none; + border-color: #c50ed2; + border-radius: 5px; } + MsdOsdWindow.background.osd .trough { + background-color: rgba(7, 8, 11, 0.98); + border: none; + border-radius: 5px; } + +/*********************** + * App-Specific Styles * + ***********************/ +/********* + * Geary * + *********/ +.geary-titlebar-left .separator, +.geary-titlebar-right .separator { + opacity: 0; } + +ConversationListView { + -GtkTreeView-grid-line-width: 0; } + ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { + background-color: #c50ed2; + color: #fefefe; } + ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); + color: rgba(254, 254, 254, 0.5); } + ConversationListView .view .cell, ConversationListView iconview .cell { + border: solid rgba(0, 0, 0, 0.2); + border-width: 0 0 1px 0; } + ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { + color: #fefefe; + border: 0px solid #980ba2; } + +/*********** + * LightDm * + ***********/ +#panel_window { + background-color: #181b28; + color: white; + font-weight: bold; + box-shadow: inset 0 -1px #0b0c12; } + #panel_window .menubar, + #panel_window .menubar > .menuitem + menubar, + #panel_window menubar > menuitem { + background-color: transparent; + color: white; + font-weight: bold; } + #panel_window .menubar .menuitem:disabled, + #panel_window menubar menuitem:disabled { + color: rgba(255, 255, 255, 0.5); } + #panel_window .menubar .menuitem:disabled GtkLabel, + #panel_window menubar menuitem:disabled GtkLabel { + color: inherit; } + #panel_window .menubar .menuitem:disabled label, + #panel_window menubar menuitem:disabled label { + color: inherit; } + #panel_window .menubar .menu > .menuitem, + #panel_window menubar menu > menuitem { + font-weight: normal; } + +#login_window, +#shutdown_dialog, +#restart_dialog { + font-weight: normal; + border-style: none; + background-color: transparent; + color: #C3C7D1; } + +#content_frame { + padding-bottom: 14px; + background-color: #161925; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border: solid rgba(0, 0, 0, 0.1); + border-width: 1px 1px 0 1px; } + +#content_frame button { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + #content_frame button:hover { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #181b28; + text-shadow: none; } + #content_frame button:active, #content_frame button:checked { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + #content_frame button:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + +#buttonbox_frame { + padding-top: 20px; + padding-bottom: 0px; + border-style: none; + background-color: #0c0e14; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: solid rgba(0, 0, 0, 0.1); + border-width: 0 1px 1px 1px; } + +#buttonbox_frame button { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:active, #buttonbox_frame button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + +#login_window #user_combobox { + color: #C3C7D1; + font-size: 13px; } + #login_window #user_combobox .menu, + #login_window #user_combobox menu { + font-weight: normal; } + +#user_image { + padding: 3px; + border-radius: 2px; } + +#greeter_infobar { + border-bottom-width: 0; + font-weight: bold; } + +.nemo-window .places-treeview { + -NemoPlacesTreeView-disk-full-bg-color: #333955; + -NemoPlacesTreeView-disk-full-fg-color: #00e8c6; + -GtkTreeView-vertical-separator: 7; } + .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, + .nemo-window .places-treeview iconview.cell:hover { + background: rgba(16, 19, 27, 0.7); } + .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, + .nemo-window .places-treeview iconview.cell:selected { + background: #c50ed2; } +.nemo-window .sidebar { + color: #98abb2; + background-color: #161925; } + .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { + background-color: transparent; } +.nemo-window .nemo-window-pane widget.entry { + background-clip: padding-box; + min-height: 28px; + padding: 5px; + color: #C3C7D1; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 3px; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.9), inset 1px 0 rgba(0, 0, 0, 0.96), inset -1px 0 rgba(0, 0, 0, 0.96), inset 0 -1px rgba(0, 0, 0, 0.98), 0 1px rgba(255, 255, 255, 0.6); } + .nemo-window .nemo-window-pane widget.entry:selected { + background-color: #c50ed2; + color: #fefefe; } +.nemo-window toolbar.primary-toolbar { + margin-bottom: -1px; + background: #0c0e14; } + .nemo-window toolbar.primary-toolbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + margin-top: 5px; + margin-bottom: 5px; + min-height: 24px; } + .nemo-window toolbar.primary-toolbar button:hover { + background: transparent; + color: #c50ed2; } + .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } +.nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, +.nemo-window .nemo-inactive-pane iconview { + background-color: #141722; } + +.caja-notebook .frame { + border-width: 0 0 1px; } +.caja-notebook .entry { + background: #161925; + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); } + .caja-notebook .entry:selected { + background: #c50ed2; + color: #fefefe; } + +/************** +* Caja sidebar * +**************/ +.caja-side-pane { + background: #0c0e14; } + .caja-side-pane .frame { + border-width: 1px 0 0; } + .caja-side-pane treeview.view, + .caja-side-pane textview.view text, + .caja-side-pane viewport.frame, + .caja-side-pane widget .vertical { + background: #161925; + padding: 3px 2px; + color: #98abb2; } + .caja-side-pane treeview.view:hover, + .caja-side-pane textview.view text:hover, + .caja-side-pane viewport.frame:hover, + .caja-side-pane widget .vertical:hover { + background-color: rgba(18, 21, 31, 0.95); } + .caja-side-pane treeview.view:selected, + .caja-side-pane textview.view text:selected, + .caja-side-pane viewport.frame:selected, + .caja-side-pane widget .vertical:selected { + color: #fefefe; + background: #c50ed2; } + +/************** +* Caja pathbar * +**************/ +.caja-navigation-window paned, .caja-navigation-window .primary-toolbar { + background: #0c0e14; } + +.caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button:backdrop, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button), +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } +.caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:checked, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked { + background: #c50ed2; + box-shadow: none; } + .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:hover label, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:active label, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:active label, .caja-navigation-window .primary-toolbar button:backdrop:checked, .caja-navigation-window .primary-toolbar button:backdrop:checked label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked label { + color: #fefefe; } + +.caja-pathbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + margin-top: 7px; + margin-bottom: 7px; } + .caja-pathbar button:hover { + color: #c50ed2; } + .caja-pathbar button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .caja-pathbar button:backdrop:disabled { + color: rgba(195, 199, 209, 0.2); + background-color: transparent; + border-radius: 0; + text-shadow: none; + box-shadow: none; } + +/*# sourceMappingURL=gtk-dark.css.map */ diff --git a/gtk-4.0/gtk-dark.scss b/gtk-4.0/gtk-dark.scss new file mode 100755 index 0000000..dbd9b1f --- /dev/null +++ b/gtk-4.0/gtk-dark.scss @@ -0,0 +1,11 @@ + + +$variant: 'dark'; + +@import '../gtk-3.0/colors'; +@import '../gtk-3.0/elementary-colors'; +@import '../gtk-3.0/colors-public'; +@import 'drawing'; +@import 'common'; +@import 'widgets'; +@import 'apps'; diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css new file mode 100755 index 0000000..6cabe42 --- /dev/null +++ b/gtk-4.0/gtk.css @@ -0,0 +1,6310 @@ +/*$selected_bg_color: #00e8c6;06d6a0*/ +/* GTK NAMED COLORS + ---------------- + use responsibly! */ +/* widget text/foreground color */ +@define-color theme_fg_color #C3C7D1; +/* text color for entries, views and content in general */ +@define-color theme_text_color #C3C7D1; +/* widget base background color */ +@define-color theme_bg_color #161925; +/* text widgets and the like base background color */ +@define-color theme_base_color #181b28; +/* base background color of selections */ +@define-color theme_selected_bg_color #c50ed2; +/* text/foreground color of selections */ +@define-color theme_selected_fg_color #fefefe; +/* base background color of disabled widgets */ +@define-color insensitive_bg_color #171a26; +/* text foreground color of disabled widgets */ +@define-color insensitive_fg_color #6d707b; +/* disabled text widgets and the like base background color */ +@define-color insensitive_base_color #181b28; +/* widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #6d707b; +/* text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color #C3C7D1; +/* widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #161925; +/* text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #1a1d2b; +/* base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #c50ed2; +/* text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #fefefe; +/* widgets main borders color */ +@define-color borders rgba(12, 14, 21, 0.8); +/* widgets main borders color on backdrop windows */ +@define-color unfocused_borders rgba(13, 16, 23, 0.82); +/* these are pretty self explicative */ +@define-color warning_color #cc5500; +@define-color error_color #e6133e; +@define-color success_color #0096b1; +@define-color fg_color #C3C7D1; +@define-color text_color #C3C7D1; +@define-color bg_color #161925; +@define-color base_color #181b28; +@define-color selected_bg_color #c50ed2; +@define-color selected_fg_color #fefefe; +@define-color unfocused_fg_color #6d707b; +@define-color unfocused_text_color #C3C7D1; +@define-color unfocused_bg_color #161925; +@define-color unfocused_base_color #1a1d2b; +@define-color unfocused_selected_bg_color #c50ed2; +@define-color unfocused_selected_fg_color #fefefe; +/* 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 shade(#C3C7D1, 1.8); +@define-color wm_unfocused_title #6d707b; +@define-color wm_highlight rgba(0, 0, 0, 0); +@define-color wm_borders_edge rgba(255, 255, 255, 0.1); +@define-color wm_bg_a shade(#161925, 1.2); +@define-color wm_bg_b #161925; +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); +@define-color wm_button_hover_color_a shade(#161925, 1.3); +@define-color wm_button_hover_color_b #161925; +@define-color wm_button_active_color_a shade(#161925, 0.85); +@define-color wm_button_active_color_b shade(#161925, 0.89); +@define-color wm_button_active_color_c shade(#161925, 0.9); +@define-color content_view_bg #181b28; +@define-color text_view_bg #181b28; +@define-color budgie_tasklist_indicator_color #c50ed2; +@define-color budgie_tasklist_indicator_color_active #c50ed2; +@define-color placeholder_text_color #a1a5b0; +@define-color STRAWBERRY_100 #ff8c82; +@define-color STRAWBERRY_300 #ed5353; +@define-color STRAWBERRY_500 #c6262e; +@define-color STRAWBERRY_700 #a10705; +@define-color STRAWBERRY_900 #7a0000; +@define-color ORANGE_100 #ffc27d; +@define-color ORANGE_300 #ffa154; +@define-color ORANGE_500 #f37329; +@define-color ORANGE_700 #cc3b02; +@define-color ORANGE_900 #a62100; +@define-color BANANA_100 #fff394; +@define-color BANANA_300 #ffe16b; +@define-color BANANA_500 #f9c440; +@define-color BANANA_700 #d48e15; +@define-color BANANA_900 #ad5f00; +@define-color LIME_100 #d1ff82; +@define-color LIME_300 #9bdb4d; +@define-color LIME_500 #68b723; +@define-color LIME_700 #3a9104; +@define-color LIME_900 #206b00; +@define-color MINT_100 #89ffdd; +@define-color MINT_300 #43d6b5; +@define-color MINT_500 #28bca3; +@define-color MINT_700 #0e9a83; +@define-color MINT_900 #007367; +@define-color BLUEBERRY_100 #8cd5ff; +@define-color BLUEBERRY_300 #64baff; +@define-color BLUEBERRY_500 #3689e6; +@define-color BLUEBERRY_700 #0d52bf; +@define-color BLUEBERRY_900 #002e99; +@define-color BUBBLEGUM_100 #fe9ab8; +@define-color BUBBLEGUM_300 #f4679d; +@define-color BUBBLEGUM_500 #de3e80; +@define-color BUBBLEGUM_700 #bc245d; +@define-color BUBBLEGUM_900 #910e38; +@define-color GRAPE_100 #e4c6fa; +@define-color GRAPE_300 #cd9ef7; +@define-color GRAPE_500 #a56de2; +@define-color GRAPE_700 #7239b3; +@define-color GRAPE_900 #452981; +@define-color COCOA_100 #a3907c; +@define-color COCOA_300 #8a715e; +@define-color COCOA_500 #715344; +@define-color COCOA_700 #57392d; +@define-color COCOA_900 #3d211b; +@define-color SILVER_100 #fafafa; +@define-color SILVER_300 #d4d4d4; +@define-color SILVER_500 #abacae; +@define-color SILVER_700 #7e8087; +@define-color SILVER_900 #555761; +@define-color SLATE_100 #95a3ab; +@define-color SLATE_300 #667885; +@define-color SLATE_500 #485a6c; +@define-color SLATE_700 #273445; +@define-color SLATE_900 #0e141f; +@define-color BLACK_100 #666; +@define-color BLACK_300 #4d4d4d; +@define-color BLACK_500 #333; +@define-color BLACK_700 #1a1a1a; +@define-color BLACK_900 #000; +/***************** +* Drawing mixins * +*****************/ +/********* +* Common * +*********/ +* { + padding: 0; + -GtkToolButton-icon-spacing: 4; + -GtkTextView-error-underline-color: #e6133e; + -GtkScrolledWindow-scrollbar-spacing: 0; + -GtkToolItemGroup-expander-size: 11; + -GtkWidget-text-handle-width: 20; + -GtkWidget-text-handle-height: 24; + -GtkDialog-button-spacing: 4; + -GtkDialog-action-area-border: 0; + outline-color: rgba(195, 199, 209, 0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 2px; + -gtk-secondary-caret-color: #c50ed2; } + +/*********** + * Widgets * + ***********/ +/*************** +* Action bars * +***************/ +.action-bar { + background-color: #030305; + border: solid rgba(12, 14, 21, 0.8); + border-width: 1px 0 0 0; + color: #C3C7D1; + box-shadow: none; } + .action-bar:backdrop { + background-color: #030305; + box-shadow: none; + -gtk-icon-effect: dim; } + .action-bar:first-child { + border-radius: 6px 6px 0px 0px; + border-width: 1px 1px 0px 1px; } + .action-bar:last-child { + border-radius: 0 0 6px 6px; + border-width: 0px 1px 1px 1px; } + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 10px; + border-radius: 0 0 5px 5px; + background-color: rgba(16, 19, 27, 0.98); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; } + .app-notification:backdrop, + .app-notification.frame:backdrop { + background-image: none; + transition: 200ms ease-out; } + .app-notification border, + .app-notification.frame border { + border: none; } + +/*************** + * Base States * + ***************/ +.background { + color: #C3C7D1; + background-color: #161925; } + .background:backdrop { + color: #6d707b; + background-color: #161925; + text-shadow: none; + -gtk-icon-shadow: none; } + +/* + 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 { + color: #C3C7D1; + background-color: #161925; } + .gtkstyle-fallback:hover { + color: #C3C7D1; + background-color: #292f45; } + .gtkstyle-fallback:active { + color: #C3C7D1; + background-color: #030305; } + .gtkstyle-fallback:disabled { + color: #6d707b; + background-color: #171a26; } + .gtkstyle-fallback:selected { + color: #fefefe; + background-color: #c50ed2; } + +.view, iconview, +.view text, +iconview text, +textview text { + color: #C3C7D1; + background-color: #181b28; } + .view:backdrop, iconview:backdrop, + .view text:backdrop, + iconview text:backdrop, + textview text:backdrop { + color: #a1a5b0; + background-color: #1a1d2b; } + .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + .view text:selected:focus, + iconview text:selected:focus, + textview text:selected:focus, + .view text:selected, + iconview text:selected, + textview text:selected { + border-radius: 3px; } + +textview border { + background-color: #171a27; } + +.rubberband, +rubberband, +flowbox rubberband, +.content-view rubberband, +treeview.view rubberband { + border: 1px solid #980ba2; + background-color: rgba(152, 11, 162, 0.2); } + +flowbox flowboxchild { + padding: 3px; + border-radius: 3px; } + flowbox flowboxchild:selected { + outline-offset: -2px; } + +label { + caret-color: currentColor; } + label.separator { + color: #C3C7D1; } + label.separator:backdrop { + color: #6d707b; } + label selection { + background-color: #c50ed2; + color: #fefefe; } + label:disabled { + color: #6d707b; } + label:disabled:backdrop { + color: #333955; } + label:backdrop { + color: #6d707b; } + +.dim-label, label.separator, .titlebar .subtitle, +headerbar .subtitle { + opacity: 0.55; + text-shadow: none; } + +assistant .sidebar { + background-color: #181b28; + border-top: 1px solid rgba(12, 14, 21, 0.8); } + assistant .sidebar:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } +assistant.csd .sidebar { + border-top-style: none; } +assistant .sidebar label { + padding: 6px 12px; } +assistant .sidebar label.highlight { + background-color: #393c47; } + +.app-notification, +.app-notification.frame, .osd .scale-popup, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .osd { + color: #fefefe; + border: 1px solid #171e27; + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + outline-color: rgba(254, 254, 254, 0.3); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .app-notification:backdrop, .osd .scale-popup:backdrop, popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } + +*:selected { + background: #c50ed2; + color: #fefefe; } + +/*********** + * Buttons * + ***********/ +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#e63bf2), to(transparent)); } + to { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#c50ed2), to(transparent)); } } +notebook > header > tabs > arrow, +button { + min-height: 20px; + min-width: 16px; + padding: 2px 6px; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 4px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + notebook > header > tabs > arrow, + button.flat { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + transition: none; } + notebook > header > tabs > arrow:hover, + button.flat:hover { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-duration: 500ms; + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:hover:active, + button.flat:hover:active { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + notebook > header > tabs > arrow:hover, + button:hover { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; + -gtk-icon-effect: highlight; } + notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, + button:active, + button:checked { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #af0cba; + text-shadow: none; + transition-duration: 50ms; } + notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, + button:backdrop.flat, + button:backdrop { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #1a1d2b; + text-shadow: none; + transition: 200ms ease-out; + -gtk-icon-effect: none; } + notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, + button:backdrop.flat:active, + button:backdrop.flat:checked, + button:backdrop:active, + button:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, + button:backdrop.flat:active label, + button:backdrop.flat:checked label, + button:backdrop:active label, + button:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, + button:backdrop.flat:disabled, + button:backdrop:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, + button:backdrop.flat:disabled:active, + button:backdrop.flat:disabled:checked, + button:backdrop:disabled:active, + button:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, + button.flat:backdrop, + button.flat:disabled, + button.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + notebook > header > tabs > arrow:disabled, + button:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, + button:disabled:active, + button:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, + button:disabled:active label, + button:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + notebook > header > tabs > arrow.image-button, + button.image-button { + min-width: 24px; + padding-left: 4px; + padding-right: 4px; } + notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, + button.image-button.circular, + button.image-button.sidebar-button { + padding: 6px 4px; + border-radius: 50px; + box-shadow: none; } + notebook > header > tabs > arrow.image-button.sidebar-button, + button.image-button.sidebar-button { + background-color: #252a3e; + color: #fff; } + notebook > header > tabs > arrow.image-button.sidebar-button:hover, + button.image-button.sidebar-button:hover { + background-color: #c50ed2; } + notebook > header > tabs > arrow.text-button, + button.text-button { + padding-left: 16px; + padding-right: 16px; } + notebook > header > tabs > arrow.text-button.image-button, + button.text-button.image-button { + padding-left: 8px; + padding-right: 8px; + border-radius: 2px; } + notebook > header > tabs > arrow.text-button.image-button label, + button.text-button.image-button label { + padding-left: 8px; + padding-right: 8px; } + combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), + button:drop(active) { + color: #71f79f; + border-color: #71f79f; + box-shadow: inset 0 0 0 1px #71f79f; } +row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { + color: #fefefe; + border-color: transparent; } + row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { + color: #6d707b; } +button.osd { + min-width: 24px; + min-height: 20px; + color: #fefefe; + border-radius: 5px; + outline-color: rgba(254, 254, 254, 0.3); + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd.image-button { + min-width: 32px; } + button.osd:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd:active, + button.osd:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); + border: none; + box-shadow: none; } + button.osd:disabled:backdrop, + button.osd:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + border: none; } + button.osd:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + border: none; } +.app-notification button, +.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, +.osd button { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, + .osd button:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, + .osd button:active:backdrop, + .osd button:active, + .osd button:checked:backdrop, + .osd button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, + .osd button:disabled:backdrop, + .osd button:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, + .osd button:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, + .osd button.flat { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, + .osd button.flat:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, + .osd button.flat:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-image: none; + border-color: transparent; + box-shadow: none; } + .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, + .osd button.flat:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, + .osd button.flat:active, + .osd button.flat:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } +button.suggested-action { + border: none; + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .selection-mode button.titlebutton, button.suggested-action.flat { + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + button.suggested-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:active, button.suggested-action:checked { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { + color: rgba(255, 255, 255, 0.5); } + .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { + color: rgba(255, 255, 255, 0.5); } + .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(0, 193, 228, 0.8); } + button.suggested-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:disabled:active, button.suggested-action:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + .osd button.suggested-action { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 193, 228, 0.5); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 193, 228, 0.7), rgba(0, 193, 228, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #00c1e4, #00c1e4); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd button.suggested-action:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 193, 228, 0.5), rgba(0, 193, 228, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +button.destructive-action { + border: none; + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #FF416C, #FF4B2B); } + button.destructive-action.flat { + box-shadow: none; + color: white; + border-radius: 100px; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + button.destructive-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:active, button.destructive-action:checked { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop, button.destructive-action.flat:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { + color: rgba(255, 255, 255, 0.5); } + button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { + color: rgba(254, 254, 254, 0.7); } + button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { + color: rgba(255, 255, 255, 0.5); } + button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #c50ed2; + text-shadow: none; } + button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(206, 17, 56, 0.8); } + button.destructive-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:disabled:active, button.destructive-action:disabled:checked { + color: rgba(254, 254, 254, 0.7); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { + color: rgba(254, 254, 254, 0.7); } + .osd button.destructive-action { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(206, 17, 56, 0.5); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(206, 17, 56, 0.7), rgba(206, 17, 56, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #ce1138, #ce1138); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd button.destructive-action:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(206, 17, 56, 0.5), rgba(206, 17, 56, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +.stack-switcher > button { + outline-offset: -3px; } + .stack-switcher > button > label { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > button > image { + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + padding-bottom: 3px; } + .stack-switcher > button.text-button { + padding-left: 10px; + padding-right: 10px; } + .stack-switcher > button.image-button { + padding-left: 2px; + padding-right: 2px; } + .stack-switcher > button.needs-attention:active > label, + .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, + .stack-switcher > button.needs-attention:checked > image { + animation: none; + background-image: none; } +.inline-toolbar button, .inline-toolbar button:backdrop { + border-radius: 2px; + border-width: 1px; } +.primary-toolbar button, .primary-toolbar .raised button { + -gtk-icon-shadow: none; } + .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { + color: #fefefe; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #c50ed2; + text-shadow: none; } + +.stack-switcher > button.needs-attention > label, +.stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e63bf2), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.9074509804)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 3px, right 2px; } + .stack-switcher > button.needs-attention > label:backdrop, + .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { + background-size: 6px 6px, 0 0; } + .stack-switcher > button.needs-attention > label:dir(rtl), + .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { + background-position: left 3px, left 2px; } + +toolbar button:hover { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } +toolbar button:active { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + +.inline-toolbar toolbutton > button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + .inline-toolbar toolbutton > button:hover { + color: #fefefe; } + .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { + color: #af0cba; } + .inline-toolbar toolbutton > button:disabled { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { + color: rgba(175, 12, 186, 0.3); } + .inline-toolbar toolbutton > button:backdrop { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { + color: #af0cba; } + .inline-toolbar toolbutton > button:backdrop:disabled { + color: #a1a5b0; } + .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { + color: rgba(175, 12, 186, 0.3); } + +toolbar.inline-toolbar toolbutton > button.flat:backdrop, +toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop { + border-color: transparent; + box-shadow: none; } + +.inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > +entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 0; + border-right-style: none; + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } + +.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } +.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right-style: solid; } +.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child { + border-radius: 3px; + border-style: solid; } + +.linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > +entry, .linked.vertical > combobox > box > button.combo { + border-style: solid solid none solid; + border-radius: 0; } + +.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > +entry:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > +entry:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-style: solid; } +.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > +entry:only-child { + border-radius: 3px; + border-style: solid; } + +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:disabled, button:link, +button:visited, button:link:hover, button:link:active, button:link:checked, +button:visited:hover, +button:visited:active, +button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + +/* menu buttons */ +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: #202435; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +button.color { + padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } + +notebook button, list button, .view button, iconview button, popover button { + box-shadow: none; } + notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { + box-shadow: none; } +notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { + box-shadow: none; } + +/************ + * Calendar * + ***********/ +calendar { + color: #C3C7D1; + border: 1px solid rgba(12, 14, 21, 0.8); } + calendar:selected { + border-radius: 3px; } + calendar.header { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; } + calendar.header:backdrop { + border-color: rgba(0, 0, 0, 0.1); } + calendar.button { + color: rgba(195, 199, 209, 0.45); } + calendar.button:hover { + color: #C3C7D1; } + calendar.button:backdrop { + color: rgba(109, 112, 123, 0.45); } + calendar.button:disabled { + color: rgba(109, 112, 123, 0.45); } + calendar:indeterminate, calendar:indeterminate:backdrop { + color: alpha(currentColor,0.55); } + calendar.highlight, calendar.highlight:backdrop { + font-size: smaller; + color: #C3C7D1; } + calendar:backdrop { + color: #a1a5b0; + border-color: rgba(13, 16, 23, 0.82); } + +/************************* + * Check and Radio Items * + *************************/ +check { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-dark.png"), url("../assets/radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover-dark.png"), url("../assets/checkbox-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover-dark.png"), url("../assets/radio-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +check:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active-dark.png"), url("../assets/checkbox-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +radio:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active-dark.png"), url("../assets/radio-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +check:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop-dark.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop-dark.png"), url("../assets/radio-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:checked { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-dark.png"), url("../assets/radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover-dark.png"), url("../assets/checkbox-checked-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover-dark.png"), url("../assets/radio-checked-hover@2.png")); + -gtk-icon-shadow: none; } + +check:checked:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active-dark.png"), url("../assets/checkbox-checked-active@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active-dark.png"), url("../assets/radio-checked-active@2.png")); + -gtk-icon-shadow: none; } + +check:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop-dark.png"), url("../assets/checkbox-checked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop-dark.png"), url("../assets/radio-checked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:active { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:active { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); + -gtk-icon-shadow: none; } + +check:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +radio:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:checked:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); + -gtk-icon-shadow: none; } + +radio:checked:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:hover:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:active:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +check:indeterminate:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); + -gtk-icon-shadow: none; } + +radio:indeterminate:disabled:backdrop:selected { + -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check, iconview.content-view check, +.view.content-view.check, +iconview.content-view.check { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio, iconview.content-view radio, +.view.content-view.radio, +iconview.content-view.radio { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:hover, iconview.content-view check:hover, +.view.content-view.check:hover, +iconview.content-view.check:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:hover, iconview.content-view radio:hover, +.view.content-view.radio:hover, +iconview.content-view.radio:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:active, iconview.content-view check:active, +.view.content-view.check:active, +iconview.content-view.check:active { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:active, iconview.content-view radio:active, +.view.content-view.radio:active, +iconview.content-view.radio:active { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:backdrop, iconview.content-view check:backdrop, +.view.content-view.check:backdrop, +iconview.content-view.check:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:backdrop, iconview.content-view radio:backdrop, +.view.content-view.radio:backdrop, +iconview.content-view.radio:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:disabled, iconview.content-view check:disabled, +.view.content-view.check:disabled, +iconview.content-view.check:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:disabled, iconview.content-view radio:disabled, +.view.content-view.radio:disabled, +iconview.content-view.radio:disabled { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, +.view.content-view.check:disabled:backdrop, +iconview.content-view.check:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); + -gtk-icon-shadow: none; } + +.view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, +.view.content-view.radio:disabled:backdrop, +iconview.content-view.radio:disabled:backdrop { + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); + -gtk-icon-shadow: none; } + +checkbutton.text-button, radiobutton.text-button { + padding: 2px 0; + outline-offset: 0; } + checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { + margin-left: 4px; } + checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { + margin-right: 4px; } + +check, +radio { + margin: 0 4px; + min-height: 16px; + min-width: 16px; + border: none; } + menu menuitem check, menu menuitem + radio { + margin: 0; } + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem + radio, menu menuitem + radio:hover, menu menuitem + radio:disabled { + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; } + +/***************** + * Color Chooser * + *****************/ +colorswatch, colorswatch:drop(active) { + border-style: none; } +colorswatch.top { + border-top-left-radius: 5.5px; + border-top-right-radius: 5.5px; } + colorswatch.top overlay { + border-top-left-radius: 5px; + border-top-right-radius: 5px; } +colorswatch.bottom { + border-bottom-left-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.bottom overlay { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 5.5px; + border-bottom-left-radius: 5.5px; } + colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; } +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 5.5px; + border-bottom-right-radius: 5.5px; } + colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; } +colorswatch.dark overlay { + color: #fefefe; } + colorswatch.dark overlay:hover { + border-color: rgba(12, 14, 21, 0.8); } + colorswatch.dark overlay:backdrop { + color: rgba(254, 254, 254, 0.5); } +colorswatch.light overlay { + color: #C3C7D1; } + colorswatch.light overlay:hover { + border-color: rgba(12, 14, 21, 0.8); } + colorswatch.light overlay:backdrop { + color: #a1a5b0; } +colorswatch:drop(active) { + box-shadow: none; } + colorswatch:drop(active).light overlay { + border-color: #71f79f; + box-shadow: inset 0 0 0 2px rgba(12, 14, 21, 0.8), inset 0 0 0 1px #71f79f; } + colorswatch:drop(active).dark overlay { + border-color: #71f79f; + box-shadow: inset 0 0 0 2px rgba(12, 14, 21, 0.8), inset 0 0 0 1px #71f79f; } +colorswatch overlay { + box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(12, 14, 21, 0.8); } + colorswatch overlay:hover { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { + border-color: rgba(12, 14, 21, 0.8); + box-shadow: none; } +colorswatch#add-color-button { + border-radius: 5px 5px 0 0; } + colorswatch#add-color-button:only-child { + border-radius: 5px; } + colorswatch#add-color-button overlay { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + colorswatch#add-color-button overlay:hover { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #181b28; + text-shadow: none; } + colorswatch#add-color-button overlay:backdrop { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #1a1d2b; + text-shadow: none; } +colorswatch:disabled { + opacity: 0.5; } + colorswatch:disabled overlay { + border-color: rgba(0, 0, 0, 0.6); + box-shadow: none; } +row:selected colorswatch { + box-shadow: 0 0 0 2px #fefefe; } +colorswatch#editor-color-sample { + border-radius: 4px; } + colorswatch#editor-color-sample overlay { + border-radius: 4.5px; } + +colorchooser .popover.osd { + border-radius: 5px; } + +/************** + * ComboBoxes * + **************/ +combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:not(headerbar) { + background-color: rgba(22, 25, 37, 0.95); } +messagedialog .titlebar { + min-height: 20px; + background-image: none; + background-color: rgba(22, 25, 37, 0.95); + border-style: none; + border-top-left-radius: 4px; + border-top-right-radius: 4px; } +messagedialog.csd.background { + background-color: rgba(22, 25, 37, 0.95); + color: #C3C7D1; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } +messagedialog.csd .dialog-action-area button { + padding: 10px 14px; + border-radius: 0; + border-left-style: solid; + border-right-style: none; + border-bottom-style: none; + background-color: transparent; + color: #C3C7D1; + box-shadow: none; } + messagedialog.csd .dialog-action-area button:hover { + background-color: rgba(197, 14, 210, 0.9); + color: white; } + messagedialog.csd .dialog-action-area button:first-child { + border-left-style: none; + border-bottom-left-radius: 4px; } + messagedialog.csd .dialog-action-area button:last-child { + border-bottom-right-radius: 4px; } + messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action { + color: white; } + +filechooser .dialog-action-box { + border-top: 1px solid rgba(12, 14, 21, 0.8); } + filechooser .dialog-action-box:backdrop { + border-top-color: rgba(13, 16, 23, 0.82); } +filechooser #pathbarbox { + border-bottom: 1px solid #161925; } + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; } + +/**************** + * Text Entries * + ****************/ +spinbutton:not(.vertical), entry { + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; + border-radius: 3px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; } + spinbutton:not(.vertical) image.left, + entry image.left { + padding-left: 0; + padding-right: 6px; } + spinbutton:not(.vertical) image.right, + entry image.right { + padding-left: 6px; + padding-right: 0; } + spinbutton:not(.vertical) undershoot.left, + entry undershoot.left { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; + border: none; + box-shadow: none; } + spinbutton:not(.vertical) undershoot.right, + entry undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; + border: none; + box-shadow: none; } + spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus, + entry.flat { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + box-shadow: none; + border-radius: 0; } + spinbutton:focus:not(.vertical), + entry:focus { + border-color: #980ba2; } + spinbutton:disabled:not(.vertical), + entry:disabled { + color: #6d707b; + border-color: rgba(12, 14, 21, 0.8); + background-color: #171a26; + box-shadow: none; } + spinbutton:backdrop:not(.vertical), + entry:backdrop { + color: #a1a5b0; + border-color: rgba(13, 16, 23, 0.82); + background-color: #1a1d2b; + box-shadow: none; + transition: 200ms ease-out; } + spinbutton:backdrop:disabled:not(.vertical), + entry:backdrop:disabled { + color: #333955; + border-color: rgba(13, 16, 23, 0.82); + background-color: #171a26; + box-shadow: none; } + spinbutton.error:not(.vertical), + entry.error { + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; + color: #e6133e; + border-color: #410512; } + spinbutton.error:focus:not(.vertical), + entry.error:focus { + border-color: #410512; } + spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), + entry.error:selected:focus, + entry.error:selected { + background-color: #e6133e; } + spinbutton.warning:not(.vertical), + entry.warning { + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); + background-color: #181b28; + color: #cc5500; + border-color: #1a0b00; } + spinbutton.warning:focus:not(.vertical), + entry.warning:focus { + border-color: #1a0b00; } + spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), + entry.warning:selected:focus, + entry.warning:selected { + background-color: #cc5500; } + spinbutton:not(.vertical) image, + entry image { + color: #a1a5af; } + spinbutton:not(.vertical) image:hover, + entry image:hover { + color: #C3C7D1; } + spinbutton:not(.vertical) image:active, + entry image:active { + color: #c50ed2; } + spinbutton:not(.vertical) image:backdrop, + entry image:backdrop { + color: #5c5f6b; } + spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus, + entry:drop(active) { + border-color: #71f79f; + box-shadow: inset 0 0 0 1px #71f79f; } + .osd spinbutton:not(.vertical), + .osd entry { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:focus:not(.vertical), + .osd entry:focus { + color: white; + border-color: #c50ed2; + background-color: rgba(0, 0, 0, 0.5); + background-clip: padding-box; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:backdrop:not(.vertical), + .osd entry:backdrop { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd spinbutton:disabled:not(.vertical), + .osd entry:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(40, 43, 50, 0.5); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +spinbutton:not(.vertical) progress, +entry progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: #c50ed2; + border-style: solid; + box-shadow: none; } + spinbutton:not(.vertical) progress:backdrop, + entry progress:backdrop { + background-color: transparent; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus + button, .linked:not(.vertical) > +entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +entry, .linked:not(.vertical) > +entry:focus + +entry { + border-left-color: #980ba2; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > +entry:focus { + border-color: #980ba2; } +.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:drop(active) + button, .linked:not(.vertical) > +entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + +entry, .linked:not(.vertical) > +entry:drop(active) + +entry { + border-left-color: #71f79f; } +.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > +entry:not(:disabled) + entry:not(:disabled), .linked.vertical > +entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { + border-top-color: rgba(21, 24, 36, 0.94); + background-image: linear-gradient(to bottom, #181b28, #181b28); } + .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > + entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > + entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { + border-top-color: rgba(23, 26, 38, 0.946); + background-image: linear-gradient(to bottom, #1a1d2b, #1a1d2b); } +.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > +entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > +entry:disabled + entry:disabled { + border-top-color: rgba(21, 24, 36, 0.94); } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > +entry + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:focus:not(:only-child) { + border-top-color: #980ba2; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > +entry + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:drop(active):not(:only-child) { + border-top-color: #71f79f; } +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:focus:not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:focus:not(:only-child) + entry, +.linked.vertical > +entry:focus:not(:only-child) + button, +.linked.vertical > +entry:focus:not(:only-child) + combobox > box > button.combo { + border-top-color: #980ba2; } +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:drop(active):not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:drop(active):not(:only-child) + entry, +.linked.vertical > +entry:drop(active):not(:only-child) + button, +.linked.vertical > +entry:drop(active):not(:only-child) + combobox > box > button.combo { + border-top-color: #71f79f; } + +treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { + background-color: #181b28; + transition-property: color, background; } +treeview entry.flat, treeview entry { + border-radius: 0; + background-image: none; + background-color: #181b28; } + treeview entry.flat:focus, treeview entry:focus { + border-color: #c50ed2; } + +/************* + * Expanders * + *************/ +expander arrow { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + expander arrow:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + expander arrow:hover { + color: white; } + expander arrow:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +/**************** + * Floating Bar * + ****************/ +.floating-bar { + background-color: #161925; + border-width: 1px; + border-style: solid solid none; + border-color: rgba(12, 14, 21, 0.8); + border-radius: 3px 3px 0 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + .floating-bar.bottom.left { + border-left-style: none; + border-top-left-radius: 0; } + .floating-bar.bottom.right { + border-right-style: none; + border-top-right-radius: 0; } + .floating-bar > button { + padding: 4px; } + .floating-bar:backdrop { + background-color: #161925; + border-color: rgba(13, 16, 23, 0.82); } + +/********** + * Frames * + **********/ +frame > border, +.frame { + box-shadow: none; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid rgba(12, 14, 21, 0.8); } + frame > border.flat, + .frame.flat { + border-style: none; } + frame > border:backdrop, + .frame:backdrop { + border-color: rgba(13, 16, 23, 0.82); } + +actionbar > revealer > box { + padding: 6px; + border-top: 1px solid rgba(12, 14, 21, 0.8); } + actionbar > revealer > box:backdrop { + border-color: rgba(13, 16, 23, 0.82); } + +scrolledwindow viewport.frame { + border-style: none; } +scrolledwindow overshoot.top { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 100% 5%, 100% 100%; + background-repeat: no-repeat; + background-position: center top; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.top:backdrop { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 100% 5%; + background-repeat: no-repeat; + background-position: center top; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.bottom { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 100% 5%, 100% 100%; + background-repeat: no-repeat; + background-position: center bottom; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.bottom:backdrop { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 100% 5%; + background-repeat: no-repeat; + background-position: center bottom; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.left { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 5% 100%, 100% 100%; + background-repeat: no-repeat; + background-position: left center; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.left:backdrop { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 5% 100%; + background-repeat: no-repeat; + background-position: left center; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow overshoot.right { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(195, 199, 209, 0.07)), to(rgba(195, 199, 209, 0))); + background-size: 5% 100%, 100% 100%; + background-repeat: no-repeat; + background-position: right center; + background-color: transparent; + border: none; + box-shadow: none; } + scrolledwindow overshoot.right:backdrop { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(rgba(13, 16, 23, 0.82)), to(rgba(13, 16, 23, 0))); + background-size: 5% 100%; + background-repeat: no-repeat; + background-position: right center; + background-color: transparent; + border: none; + box-shadow: none; } +scrolledwindow undershoot.top { + background-color: transparent; + background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-top: 1px; + background-size: 10px 1px; + background-repeat: repeat-x; + background-origin: content-box; + background-position: center top; + border: none; + box-shadow: none; } +scrolledwindow undershoot.bottom { + background-color: transparent; + background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-bottom: 1px; + background-size: 10px 1px; + background-repeat: repeat-x; + background-origin: content-box; + background-position: center bottom; + border: none; + box-shadow: none; } +scrolledwindow undershoot.left { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; + border: none; + box-shadow: none; } +scrolledwindow undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; + border: none; + box-shadow: none; } +scrolledwindow junction { + border-color: transparent; + border-image: linear-gradient(to bottom, rgba(12, 14, 21, 0.8) 1px, transparent 1px) 0 0 0 1/0 1px stretch; + background-color: #171a27; } + scrolledwindow junction:dir(rtl) { + border-image-slice: 0 1 0 0; } + scrolledwindow junction:backdrop { + border-image-source: linear-gradient(to bottom, rgba(13, 16, 23, 0.82) 1px, transparent 1px); + background-color: #10131b; + transition: 200ms ease-out; } + +separator { + background: rgba(0, 0, 0, 0.1); } + +/************ + * Popovers * + ************/ +GraniteWidgetsPopOver { + -GraniteWidgetsPopOver-arrow-width: 21; + -GraniteWidgetsPopOver-arrow-height: 10; + -GraniteWidgetsPopOver-border-radius: 8px; + -GraniteWidgetsPopOver-border-width: 0; + -GraniteWidgetsPopOver-shadow-size: 12; + border: 1px solid #181b28; + background: #181b28; + color: #C3C7D1; } + GraniteWidgetsPopOver .button { + background-image: none; + background: none; + border: none; } + GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { + color: #c50ed2; } + GraniteWidgetsPopOver > .frame { + border: none; } + GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { + border: none; + background: none; } + +GraniteWidgetsStaticNotebook .frame { + border: none; } + +.popover_bg { + background-color: #181b28; + background-image: none; + border: 1px solid #181b28; + color: #C3C7D1; } + +/*********** + * Welcome * + **********/ +GraniteWidgetsWelcome { + background-color: #181b28; } + GraniteWidgetsWelcome GtkLabel { + color: #C3C7D1; } + GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { + color: rgba(195, 199, 209, 0.8); } + +/************** +* Source List * +***************/ +.source-list { + -GtkTreeView-horizontal-separator: 1px; + -GtkTreeView-vertical-separator: 6px; + background-color: #161925; + border: solid rgba(12, 14, 21, 0.8); + color: #C3C7D1; + border-right-width: 1px; } + .source-list .category-expander { + color: transparent; } + .source-list .badge { + background-image: none; + background-color: rgba(0, 0, 0, 0.4); + color: #161925; + border-radius: 10px; + padding: 0 6px; + margin: 0 3px; + border-width: 0; } + .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { + background-color: rgba(0, 0, 0, 0.2); + color: #0c0e15; } + .source-list row, + .source-list .list-row { + border: none; + padding: 0; } + .source-list row > GtkLabel, + .source-list row > label, + .source-list .list-row > GtkLabel, + .source-list .list-row > label { + padding-left: 6px; + padding-right: 6px; } + +/************** +* Text Styles * +**************/ +.h1 { + font-size: 24px; } + +.h2 { + font-weight: 300; + font-size: 18px; } + +.h3 { + font-size: 11px; } + +.h4, +.category-label { + font-size: 12px; + padding: 6px; + color: rgba(195, 199, 209, 0.3); + font-weight: bold; + text-shadow: 0 1px rgba(255, 255, 255, 0.2); } + +/************** +* Storage Bar * +**************/ +.storage-bar .trough { + border: none; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); + background-image: none; + background-color: transparent; + padding: 8px 6px; } +.storage-bar .fill-block { + background-color: #f9dc5c; + border: none; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); + transition: all 200ms ease-in-out; + padding: 8px 6px; } + .storage-bar .fill-block:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-left-width: 1px; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } + .storage-bar .fill-block:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } + .storage-bar .fill-block.empty-block { + background-color: #181b28; } + .storage-bar .fill-block.app { + background-color: #7cb7ff; } + .storage-bar .fill-block.audio { + background-color: #ff6a00; } + .storage-bar .fill-block.photo { + background-color: #ed254e; } + .storage-bar .fill-block.video { + background-color: #c74ded; } + .storage-bar .fill-block .legend { + padding: 12px; + border-radius: 4px; } + +/*************** + * Header bars * + ***************/ +.titlebar:not(headerbar), .titlebar, headerbar { + padding: 0px 13px; + min-height: 34px; + background: #0c0e14; + color: #C3C7D1; + border-radius: 0; } + .titlebar:backdrop, + headerbar:backdrop { + border-color: rgba(13, 16, 23, 0.82); + transition: 200ms ease-out; } + .titlebar .title, + headerbar .title { + font-weight: bold; + padding-left: 12px; + padding-right: 12px; } + .titlebar .subtitle, + headerbar .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; } + .titlebar entry, + headerbar entry { + min-height: 24px; } + .titlebar button, + headerbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + min-height: 14px; + margin-top: 5px; + margin-bottom: 5px; + box-shadow: none; } + .titlebar button.image-button, + headerbar button.image-button { + padding: 3px 4px; } + .titlebar button.suggested-action, + headerbar button.suggested-action { + box-shadow: none; + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.suggested-action:disabled, .titlebar button.suggested-action:disabled:backdrop, .titlebar button.suggested-action:backdrop, + headerbar button.suggested-action:disabled, + headerbar button.suggested-action:disabled:backdrop, + headerbar button.suggested-action:backdrop { + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.suggested-action:disabled:hover, .titlebar button.suggested-action:disabled:active, .titlebar button.suggested-action:disabled:checked, .titlebar button.suggested-action:disabled:backdrop:hover, .titlebar button.suggested-action:disabled:backdrop:active, .titlebar button.suggested-action:disabled:backdrop:checked, .titlebar button.suggested-action:backdrop:hover, .titlebar button.suggested-action:backdrop:active, .titlebar button.suggested-action:backdrop:checked, + headerbar button.suggested-action:disabled:hover, + headerbar button.suggested-action:disabled:active, + headerbar button.suggested-action:disabled:checked, + headerbar button.suggested-action:disabled:backdrop:hover, + headerbar button.suggested-action:disabled:backdrop:active, + headerbar button.suggested-action:disabled:backdrop:checked, + headerbar button.suggested-action:backdrop:hover, + headerbar button.suggested-action:backdrop:active, + headerbar button.suggested-action:backdrop:checked { + border: none; + background-image: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .titlebar button.appmenu, + headerbar button.appmenu { + background: transparent; } + .titlebar button.appmenu:backdrop, + headerbar button.appmenu:backdrop { + background: transparent; } + .titlebar button:hover, .titlebar button:active, .titlebar button:checked, + headerbar button:hover, + headerbar button:active, + headerbar button:checked { + background-color: transparent; + color: #c50ed2; + box-shadow: none; + border: none; } + .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, + headerbar button:backdrop, + headerbar button:disabled, + headerbar button:backdrop:disabled { + color: rgba(195, 199, 209, 0.2); + background-color: transparent; + border-radius: 0; + text-shadow: none; + box-shadow: none; + border: none; } + .titlebar button:backdrop:hover, .titlebar button:backdrop:active, .titlebar button:backdrop:checked, + headerbar button:backdrop:hover, + headerbar button:backdrop:active, + headerbar button:backdrop:checked { + background-color: transparent; + color: #c50ed2; + box-shadow: none; } + .titlebar button:backdrop:hover label, .titlebar button:backdrop:active label, .titlebar button:backdrop:checked label, + headerbar button:backdrop:hover label, + headerbar button:backdrop:active label, + headerbar button:backdrop:checked label { + color: #c50ed2; } + .titlebar button.suggested-action, + headerbar button.suggested-action { + font-weight: bold; + min-height: 24px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 4px; + font-weight: normal; + color: white; + background-color: #181b28; + text-shadow: none; + box-shadow: none; } + .titlebar button.suggested-action:hover, + headerbar button.suggested-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:active, + headerbar button.suggested-action:active { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:disabled, + headerbar button.suggested-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.suggested-action:disabled label, + headerbar button.suggested-action:disabled label { + color: rgba(255, 255, 255, 0.5); } + .titlebar button.suggested-action:backdrop, + headerbar button.suggested-action:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; + border-radius: 3px; } + .titlebar button.suggested-action:backdrop:disabled, + headerbar button.suggested-action:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #00c1e4; + text-shadow: none; } + .titlebar button.destructive-action, + headerbar button.destructive-action { + font-weight: bold; + min-height: 24px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 4px; + font-weight: normal; + color: white; + background-color: #181b28; + text-shadow: none; + box-shadow: none; } + .titlebar button.destructive-action:hover, + headerbar button.destructive-action:hover { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:active, + headerbar button.destructive-action:active { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:disabled, + headerbar button.destructive-action:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.destructive-action:disabled label, + headerbar button.destructive-action:disabled label { + color: rgba(255, 255, 255, 0.5); } + .titlebar button.destructive-action:backdrop, + headerbar button.destructive-action:backdrop { + color: rgba(255, 255, 255, 0.4); + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; + border-radius: 3px; } + .titlebar button.destructive-action:backdrop:disabled, + headerbar button.destructive-action:backdrop:disabled { + color: white; + outline-color: rgba(255, 255, 255, 0.3); + background-color: #ce1138; + text-shadow: none; } + .titlebar button.titlebutton, + headerbar button.titlebutton { + color: transparent; + box-shadow: none; + border: none; + background-color: transparent; + background-image: none; + background-repeat: no-repeat; } + .titlebar button.titlebutton:hover, .titlebar button.titlebutton:active, .titlebar button.titlebutton:checked, .titlebar button.titlebutton:backdrop, .titlebar button.titlebutton:backdrop:hover, .titlebar button.titlebutton *, + headerbar button.titlebutton:hover, + headerbar button.titlebutton:active, + headerbar button.titlebutton:checked, + headerbar button.titlebutton:backdrop, + headerbar button.titlebutton:backdrop:hover, + headerbar button.titlebutton * { + color: transparent; + box-shadow: none; + background-color: transparent; } + .titlebar .linked > button, + .titlebar headerbar .linked > button, .titlebar .linked > button:active, .titlebar .linked > button:checked, .titlebar .linked > button:hover, + .titlebar .linked > button:backdrop, + headerbar .titlebar .linked > button, + .titlebar headerbar .linked > button, + headerbar .linked > button, + headerbar .titlebar .linked > button:active, + .titlebar headerbar .linked > button:active, + headerbar .linked > button:active, + headerbar .titlebar .linked > button:checked, + .titlebar headerbar .linked > button:checked, + headerbar .linked > button:checked, + headerbar .titlebar .linked > button:hover, + .titlebar headerbar .linked > button:hover, + headerbar .titlebar .linked > button:backdrop, + .titlebar headerbar .linked > button:backdrop, + headerbar .linked > button:hover, + headerbar .linked > button:backdrop { + border-radius: 23px; + border-right-style: none; + border: none; + box-shadow: none; + margin: 10px 0px; + min-height: 20px; + transition: all .1s ease-in; } + .titlebar .linked > button:only-child, + .titlebar headerbar .linked > button:only-child, + headerbar .titlebar .linked > button:only-child, + headerbar .linked > button:only-child { + border-radius: 13px; + border-style: none; } + .titlebar .linked > button:active, + headerbar .linked > button:active { + background: linear-gradient(to right, #c50ed2, #8500f7); + color: snow; } + .titlebar .linked > button:checked, + headerbar .linked > button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: snow; } + .titlebar .linked > button:checked:backdrop, + headerbar .linked > button:checked:backdrop { + color: #ffe6e6; } + .titlebar .linked > button:checked:backdrop label, + headerbar .linked > button:checked:backdrop label { + color: #ffe6e6; } + .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, + headerbar.selection-mode button:backdrop.flat:active, + headerbar.selection-mode button:backdrop.flat:checked, + headerbar.selection-mode button:backdrop:active, + headerbar.selection-mode button:backdrop:checked { + border-color: #980ba2; } + .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, + headerbar.selection-mode button:backdrop.flat:active label, + headerbar.selection-mode button:backdrop.flat:checked label, + headerbar.selection-mode button:backdrop:active label, + headerbar.selection-mode button:backdrop:checked label { + color: rgba(197, 14, 210, 0.6); } + .tiled .titlebar, .maximized .titlebar, + .tiled headerbar.titlebar, .maximized headerbar.titlebar { + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } + .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, + .tiled headerbar:backdrop, + .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { + border-radius: 0; } + .default-decoration.titlebar, headerbar.default-decoration { + padding: 5px 4px; + min-height: 20px; } + .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { + min-height: 20px; + min-width: 20px; + margin: 0; + padding: 0; } + +headerbar entry, +headerbar spinbutton, +headerbar separator { + margin-top: 5px; + margin-bottom: 5px; } +headerbar switch { + margin-top: 10px; + margin-bottom: 10px; } +headerbar separator { + background: transparent; } + +.background:not(.tiled):not(.maximized) .titlebar { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); } + .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { + border-top-left-radius: 4px; + border-top-right-radius: 4px; } + +window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { + border-top-left-radius: 4px; } +window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { + border-top-right-radius: 4px; } + +window.csd > .titlebar:not(headerbar) { + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; } +.titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { + background: #0c0e14; } + +/************** + * GtkInfoBar * + **************/ +.info, .warning, .question, .error, +infobar { + text-shadow: none; + color: #C3C7D1; + background-color: #161925; + border-bottom: 1px solid #030305; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15); } + +.info, .warning, .question, .error { + text-shadow: none; + color: #fefefe; + border: none; } + .info .label, .warning .label, .question .label, .error .label { + color: #fefefe; } + .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { + color: rgba(254, 254, 254, 0.5); } + .info button, .warning button, .question button, .error button { + border-radius: 2px; + border: none; + background: rgba(24, 27, 40, 0.98); + color: #C3C7D1; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } + .info button .label, .warning button .label, .question button .label, .error button .label { + color: #C3C7D1; } + .info button:active, .warning button:active, .question button:active, .error button:active { + background: #181b28; + color: #C3C7D1; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } + .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { + background: rgba(24, 27, 40, 0.8); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } + .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { + background: rgba(24, 27, 40, 0.6); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { + background: rgba(24, 27, 40, 0.5); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { + background: rgba(24, 27, 40, 0.8); + color: rgba(195, 199, 209, 0.5); + box-shadow: none; } + +.info { + background-color: #71f79f; } + .info:backdrop { + background-color: #a1fac0; + color: rgba(254, 254, 254, 0.5); } + +.warning { + background-color: #cc5500; } + .warning:backdrop { + background-color: #ff6a00; + color: rgba(254, 254, 254, 0.5); } + +.question { + background-color: #00c1e4; } + .question:backdrop { + background-color: #18dcff; + color: rgba(254, 254, 254, 0.5); } + +.error { + background-color: #e6133e; } + .error:backdrop { + background-color: #ef3d61; + color: rgba(254, 254, 254, 0.5); } + +/************* + * Level Bar * + *************/ +levelbar block { + min-width: 32px; + min-height: 6px; } +levelbar.vertical block { + min-width: 6px; + min-height: 32px; } +levelbar:backdrop { + transition: 200ms ease-out; } +levelbar trough { + padding: 3px; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.2); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + levelbar trough:backdrop { + background-color: rgba(255, 255, 255, 0.06); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } +levelbar.horizontal.discrete block { + margin: 0 1px; } +levelbar.vertical.discrete block { + margin: 1px 0; } +levelbar block { + border-radius: 2px; } + levelbar block:backdrop { + box-shadow: none; } + levelbar block.low { + background-color: #cc5500; } + levelbar block.low:backdrop { + border-color: #cc5500; } + levelbar block.high, levelbar block:not(.empty) { + background-color: #00c1e4; } + levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { + border-color: #00c1e4; } + levelbar block.full { + background-color: #0096b1; } + levelbar block.full:backdrop { + border-color: #0096b1; } + levelbar block.empty { + background-color: rgba(0, 0, 0, 0.35); + box-shadow: none; } + +/********* + * Links * + *********/ +*:link, button:link, +button:visited { + color: #7cb7ff; } + *:link:visited, + button:visited { + color: rgba(124, 183, 255, 0.5); } + *:selected *:link:visited, *:selected button:visited:link, + *:selected button:visited { + color: #e79eec; } + *:link:hover, button:hover:link, + button:hover:visited { + color: #afd3ff; } + *:selected *:link:hover, *:selected button:hover:link, + *:selected button:hover:visited { + color: #f8e6fa; } + *:link:active, button:active:link, + button:active:visited { + color: #7cb7ff; } + *:selected *:link:active, *:selected button:active:link, + *:selected button:active:visited { + color: #f3cef5; } + *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, + button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, + button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, + button:backdrop:visited { + color: #c50ed2; } + *:link:selected, button:selected:link, + button:selected:visited, *:selected *:link, *:selected button:link, + *:selected button:visited { + color: #f3cef5; } + +button:link, +button:visited { + text-shadow: none; } + button:link:hover, button:link:active, button:link:checked, + button:visited:hover, + button:visited:active, + button:visited:checked { + text-shadow: none; } + button:link > label, + button:visited > label { + text-decoration-line: underline; } + +/********* + * Lists * + *********/ +list { + color: #C3C7D1; + background-color: #181b28; + border-color: rgba(12, 14, 21, 0.8); } + list:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } + +row { + padding: 5px 11px; + transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + row label { + padding-left: 8px; } + row:hover { + transition: none; } + row:backdrop { + transition: 200ms ease-out; } + row.activatable.has-open-popup, row.activatable:hover { + background-color: rgba(195, 199, 209, 0.05); } + row.activatable:active { + box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + row.activatable:backdrop:hover { + background-color: transparent; } + row.activatable:selected:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + row.activatable:selected.has-open-popup, row.activatable:selected:hover { + background-color: rgba(197, 14, 210, 0.5); } + row.activatable:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + row.activatable button.flat { + background-color: transparent; } + +/********* + * Menus * + *********/ +menubar, +.menubar { + background-color: #0c0e14; + color: #C3C7D1; + -GtkWidget-window-dragging: true; + padding: 0px; + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } + menubar > menuitem, + .menubar > menuitem { + min-height: 16px; + padding: 4px 8px; } + menubar > menuitem:hover, + .menubar > menuitem:hover { + box-shadow: inset 0 -3px #c50ed2; } + menubar > menuitem:disabled, + .menubar > menuitem:disabled { + color: #6d707b; + box-shadow: none; } + +menu, .menu, .context-menu { + font: initial; + margin: 4px; + padding: 2px 0px; + background: linear-gradient(to bottom, #1a1d2b, #12151f); + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 5px; } + .csd menu, + .csd .menu, + .csd .context-menu { + border: none; } + menu:backdrop, .menu:backdrop, .context-menu:backdrop { + background-color: #191c2a; } + menu menuitem, .menu menuitem, .context-menu menuitem { + min-height: 17px; + min-width: 40px; + padding: 4px 6px; + text-shadow: none; } + menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { + color: #fefefe; + background-color: #c50ed2; } + menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { + color: #6d707b; } + menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { + color: #333955; } + menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { + color: #6d707b; + background-color: transparent; } + menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { + min-height: 16px; + min-width: 16px; } + menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + margin-left: 10px; } + menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); + margin-right: 10px; } + menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { + color: inherit; } + menu > arrow, .menu > arrow, .context-menu > arrow { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + min-height: 16px; + min-width: 16px; + padding: 4px; + background-color: #181b27; + border-radius: 0; } + menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #292c39; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #292c39; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { + background-color: #292c39; } + menu > arrow:backdrop, .menu > arrow:backdrop, .context-menu > arrow:backdrop { + background-color: #191c2a; } + menu > arrow:disabled, .menu > arrow:disabled, .context-menu > arrow:disabled { + color: transparent; + background-color: transparent; + border-color: transparent; } + +menuitem accelerator { + color: alpha(currentColor,0.55); } +menuitem check, +menuitem radio { + min-height: 16px; + min-width: 16px; } + menuitem check:dir(ltr), + menuitem radio:dir(ltr) { + margin-right: 7px; } + menuitem check:dir(rtl), + menuitem radio:dir(rtl) { + margin-left: 7px; } + +.csd.popup { + background: transparent; } + +/******** + * Misc * + ********/ +.content-view { + background-color: #090a0f; } + .content-view:hover { + -gtk-icon-effect: highlight; } + .content-view:backdrop { + background-color: #090a0f; } + +.osd .scale-popup button.flat { + border-style: none; + border-radius: 5px; } +.scale-popup button:hover { + background-color: rgba(195, 199, 209, 0.1); + border-radius: 5px; } + +/************ +* Assistant * +*************/ +assistant { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } + assistant .sidebar { + background-color: #181b28; + border-top: 1px solid rgba(12, 14, 21, 0.8); + border-bottom-left-radius: 4px; } + assistant .sidebar:backdrop { + background-color: #1a1d2b; + border-color: rgba(13, 16, 23, 0.82); } + assistant.csd .sidebar { + border-top-style: none; } + assistant .sidebar GtkLabel, + assistant .sidebar label { + padding: 6px 12px; } + assistant .sidebar GtkLabel.highlight, + assistant .sidebar label.highlight { + background-color: #393c47; } + +/************* + * Notebooks * + *************/ +notebook > header { + padding: 1px; + border-color: transparent; + border-width: 1px; + background-color: #10121a; } + notebook > header:backdrop { + border-color: rgba(13, 16, 23, 0.82); + background-color: #161925; } + notebook > header tabs { + margin: 0px; } + notebook > header.top { + border-bottom-style: solid; } + notebook > header.top > tabs { + margin-bottom: -2px; } + notebook > header.top > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.top > tabs > tab:checked { + background: linear-gradient(to right, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 100% 2px; + border: 0; } + notebook > header.bottom { + border-top-style: solid; } + notebook > header.bottom > tabs { + margin-top: -2px; } + notebook > header.bottom > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.bottom > tabs > tab:checked { + background: linear-gradient(to right, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 100% 2px; + border: 0; } + notebook > header.left { + border-right-style: solid; } + notebook > header.left > tabs { + margin-right: -2px; } + notebook > header.left > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.left > tabs > tab:checked { + background: linear-gradient(to bottom, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 2px 100%; + border: 0; } + notebook > header.right { + border-left-style: solid; } + notebook > header.right > tabs { + margin-left: -2px; } + notebook > header.right > tabs > tab:backdrop { + box-shadow: none; } + notebook > header.right > tabs > tab:checked { + background: linear-gradient(to bottom, #5800E2, #FF00E6) left bottom #141620 no-repeat; + background-size: 2px 100%; + border: 0; } + notebook > header.top > tabs > arrow { + border-top-style: none; } + notebook > header.bottom > tabs > arrow { + border-bottom-style: none; } + notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; } + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + notebook > header.left > tabs > arrow { + border-left-style: none; } + notebook > header.right > tabs > arrow { + border-right-style: none; } + notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; } + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + notebook > header > tabs > arrow { + min-height: 14px; + min-width: 14px; + border-radius: 0; } + notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { + background-clip: padding-box; + background-image: none; + background-color: rgba(255, 255, 255, 0.3); + border-color: transparent; + box-shadow: none; } + notebook > header > tabs > arrow:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + notebook > header tab { + min-height: 24px; + min-width: 24px; + padding: 1px 12px; + outline-offset: -5px; + color: #6d707b; + font-weight: normal; + border-width: 1px; + border-color: transparent; } + notebook > header tab:hover { + color: #989ca6; } + notebook > header tab:hover.reorderable-page { + border-color: rgba(12, 14, 21, 0.1); + background-color: rgba(22, 25, 37, 0.2); } + notebook > header tab:backdrop { + color: #4a4d59; } + notebook > header tab:backdrop.reorderable-page { + border-color: transparent; + background-color: transparent; } + notebook > header tab:checked { + color: #C3C7D1; } + notebook > header tab:checked.reorderable-page { + border-color: rgba(12, 14, 21, 0.3); + background-color: rgba(22, 25, 37, 0.5); } + notebook > header tab:checked.reorderable-page:hover { + background-color: rgba(22, 25, 37, 0.7); } + notebook > header tab:backdrop:checked { + color: #6d707b; } + notebook > header tab:backdrop:checked.reorderable-page { + border-color: rgba(13, 16, 23, 0.82); + background-color: #1a1d2b; } + notebook > header tab button.flat { + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + min-width: 20px; + min-height: 20px; } + notebook > header tab button.flat:hover { + background: transparent; + box-shadow: none; + color: #ed254e; } + notebook > header tab button.flat, notebook > header tab button.flat:backdrop { + color: alpha(currentColor,0.3); } + notebook > header.top tabs, notebook > header.bottom tabs { + padding-left: 0px; + padding-right: 0px; } + notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { + margin-left: 0.5px; + margin-right: 0.5px; } + notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { + margin-left: -1px; } + notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { + margin-right: -1px; } + notebook > header.top tabs tab, notebook > header.bottom tabs tab { + margin-left: 0.5px; + margin-right: 0.5px; } + notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { + border-style: none solid; } + notebook > header.left tabs, notebook > header.right tabs { + padding-top: 4px; + padding-bottom: 4px; } + notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; } + notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { + margin-top: -1px; } + notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { + margin-bottom: -1px; } + notebook > header.left tabs tab, notebook > header.right tabs tab { + margin-top: 4px; + margin-bottom: 4px; } + notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { + border-style: solid none; } + notebook > header.top tab { + padding-bottom: 3px; } + notebook > header.bottom tab { + padding-top: 3px; } + notebook > header button { + margin-top: 1px; + margin-bottom: 1px; + padding: 1px 1px; } +notebook > stack:not(:only-child) { + background-color: #181b28; } + notebook > stack:not(:only-child):backdrop { + background-color: #1a1d2b; } + +/********* + * Paned * + *********/ +paned > separator { + min-width: 1px; + min-height: 1px; + -gtk-icon-source: none; + border-style: none; + background-color: transparent; + background-image: image(rgba(12, 14, 21, 0.8)); + background-size: 1px 1px; } + paned > separator:selected { + background-image: image(#c50ed2); } + paned > separator:backdrop { + background-image: image(rgba(13, 16, 23, 0.82)); } + paned > separator.wide { + min-width: 5px; + min-height: 5px; + background-color: #161925; + background-image: image(rgba(12, 14, 21, 0.8)), image(rgba(12, 14, 21, 0.8)); + background-size: 1px 1px, 1px 1px; } + paned > separator.wide:backdrop { + background-color: #161925; + background-image: image(rgba(13, 16, 23, 0.82)), image(rgba(13, 16, 23, 0.82)); } +paned.horizontal > separator { + background-repeat: repeat-y; } + paned.horizontal > separator:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + background-position: left; } + paned.horizontal > separator:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + background-position: right; } + paned.horizontal > separator.wide { + margin: 0; + padding: 0; + background-repeat: repeat-y, repeat-y; + background-position: left, right; } +paned.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + background-repeat: repeat-x; + background-position: top; } + paned.vertical > separator.wide { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; } + +/************ + * Pathbars * + ************/ +.path-bar button.text-button, .path-bar button.image-button, .path-bar button { + padding-left: 4px; + padding-right: 4px; } +.path-bar button.text-button.image-button label { + padding-left: 0; + padding-right: 0; } +.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { + padding-right: 8px; } +.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { + padding-left: 8px; } +.path-bar button image { + padding-left: 4px; + padding-right: 4px; } +.path-bar button.slider-button { + padding-left: 0; + padding-right: 0; } + +/*************** + * Popovers * + ***************/ +popover.background { + padding: 2px; + border-radius: 5px; + background: linear-gradient(to bottom, #1a1d2b, #12151f); + box-shadow: 0 4px 6px rgba(12, 14, 21, 0.8); } + .csd popover.background, popover.background { + border: 1px solid rgba(12, 14, 21, 0.8); } + popover.background:backdrop { + background-color: #161925; + box-shadow: none; } + popover.background > list, + popover.background > .view, + popover.background > iconview, + popover.background > toolbar { + border-style: none; + background-color: transparent; } + .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator { + margin: 3px; } + popover.background list separator { + margin: 0px; } + +/***************** + * Progress bars * + *****************/ +progressbar { + font-size: smaller; + color: rgba(195, 199, 209, 0.4); } + progressbar.horizontal trough, + progressbar.horizontal progress { + min-height: 6px; } + progressbar.vertical trough, + progressbar.vertical progress { + min-width: 6px; } + progressbar.horizontal progress { + margin: 0; } + progressbar.vertical progress { + margin: 0; + background: linear-gradient(to bottom, #00f17d, #00f7d2); } + progressbar:backdrop { + box-shadow: none; + transition: 200ms ease-out; } + progressbar.osd { + min-width: 3px; + min-height: 3px; + background-color: transparent; } + progressbar.osd trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; } + progressbar.osd progress { + border-style: none; + border-radius: 0; } + +/************ + * GtkScale * + ************/ +progressbar trough, scale trough, scale fill { + background-color: rgba(255, 255, 255, 0.14); + border: none; + border-radius: 3px; + margin: 0; } + progressbar trough:disabled, scale trough:disabled, scale fill:disabled { + background-color: rgba(255, 255, 255, 0.06); } + progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { + background-color: rgba(255, 255, 255, 0.06); + transition: 200ms ease-out; } + progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { + background-color: rgba(255, 255, 255, 0.06); } + +progressbar progress, scale highlight { + border: none; + background: linear-gradient(to right, #00f17d, #00f7d2); + border-radius: 3px; + margin: 0; } + progressbar progress:disabled, scale highlight:disabled { + border: none; + background-color: rgba(255, 255, 255, 0.14); } + progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { + border-color: #db10ea; + background-color: #db10ea; } + progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { + background-color: rgba(255, 255, 255, 0.06); } + +scale { + min-height: 16px; + min-width: 16px; + padding: 8px; } + scale.horizontal trough, + scale.horizontal progress { + min-height: 6px; } + scale.vertical trough, + scale.vertical progress { + min-width: 6px; } + scale.vertical highlight { + background: linear-gradient(to bottom, #00f17d, #00f7d2); } + scale slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + background-color: #181b28; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + border-radius: 12px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border, box-shadow; } + scale slider:active { + background-color: #c50ed2; } + scale slider:active:disabled { + background-color: #171a26; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.fine-tune.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; } + scale.fine-tune.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; } + scale.fine-tune slider { + margin: -6px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 5px; + outline-color: transparent; } + scale fill:backdrop, scale fill { + background-color: rgba(12, 14, 21, 0.8); } + scale fill:disabled:backdrop, scale fill:disabled { + border-color: transparent; + background-color: transparent; } + .osd scale fill { + background-color: rgba(97, 97, 97, 0.775); } + .osd scale fill:disabled:backdrop, .osd scale fill:disabled { + border-color: transparent; + background-color: transparent; } + scale slider { + border-color: #181b28; + border: 2px solid #00f17d; + border-radius: 12px; + background-color: #292f45; } + scale slider:active { + border-color: #980ba2; } + scale slider:disabled { + background-color: #0c0e15; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + scale slider:backdrop, scale slider:backdrop:disabled { + transition: 200ms ease-out; + background-color: #0c0e15; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } + row:selected scale slider:disabled, row:selected scale slider { + border-color: #980ba2; } + .osd scale slider { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + border-color: rgba(0, 0, 0, 0.7); + background-color: #10131b; } + .osd scale slider:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #10131b; } + .osd scale slider:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); + background-color: #10131b; } + .osd scale slider:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-color: #10131b; } + .osd scale slider:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + background-color: #10131b; } + .osd scale slider:backdrop:disabled { + background-color: #10131b; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 6px; + margin-top: -12px; } + scale marks.bottom { + margin-top: 6px; + margin-bottom: -12px; } + scale marks.top { + margin-right: 6px; + margin-left: -12px; } + scale marks.bottom { + margin-left: 6px; + margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -9px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -9px; } + scale.fine-tune marks.top { + margin-right: 6px; + margin-left: -9px; } + scale.fine-tune marks.bottom { + margin-left: 6px; + margin-right: -9px; } + scale.horizontal indicator { + min-height: 6px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 3px; } + scale.vertical indicator { + min-height: 1px; + min-width: 6px; } + scale.vertical.fine-tune indicator { + min-width: 3px; } + scale.horizontal.marks-before:not(.marks-after) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-before:not(.marks-after).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:hover { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:active { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:backdrop { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + background-color: #292f45; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + scale.vertical.marks-after:not(.marks-before).fine-tune slider { + margin: -7px; } + scale.color { + min-height: 0; + min-width: 0; } + scale.color trough { + background-image: image(rgba(12, 14, 21, 0.8)); + background-repeat: no-repeat; } + scale.color.horizontal { + padding: 0 0 15px 0; } + scale.color.horizontal trough { + padding-bottom: 4px; + background-position: 0 -3px; + border-top-left-radius: 0; + border-top-right-radius: 0; } + scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { + margin-bottom: -15px; + margin-top: 6px; } + scale.color.vertical:dir(ltr) { + padding: 0 0 0 15px; } + scale.color.vertical:dir(ltr) trough { + padding-left: 4px; + background-position: 3px 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { + margin-left: -15px; + margin-right: 6px; } + scale.color.vertical:dir(rtl) { + padding: 0 15px 0 0; } + scale.color.vertical:dir(rtl) trough { + padding-right: 4px; + background-position: -3px 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { + margin-right: -15px; + margin-left: 6px; } + scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { + padding: 0 0 12px 0; } + scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { + padding-bottom: 7px; + background-position: 0 -6px; } + scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { + margin-bottom: -15px; + margin-top: 6px; } + scale.color.fine-tune.vertical:dir(ltr) { + padding: 0 0 0 12px; } + scale.color.fine-tune.vertical:dir(ltr) trough { + padding-left: 7px; + background-position: 6px 0; } + scale.color.fine-tune.vertical:dir(ltr) slider { + margin-left: -15px; + margin-right: 6px; } + scale.color.fine-tune.vertical:dir(rtl) { + padding: 0 12px 0 0; } + scale.color.fine-tune.vertical:dir(rtl) trough { + padding-right: 7px; + background-position: -6px 0; } + scale.color.fine-tune.vertical:dir(rtl) slider { + margin-right: -15px; + margin-left: 6px; } + +/************** + * Scrollbars * + **************/ +scrollbar { + background-color: #171a27; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.bottom { + border-top: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.left { + border-right: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar.right { + border-left: 1px solid rgba(12, 14, 21, 0.8); } + scrollbar:backdrop { + background-color: #10131b; + border-color: rgba(13, 16, 23, 0.82); + transition: 200ms ease-out; } + scrollbar slider { + min-width: 6px; + min-height: 6px; + margin: -1px; + border: 4px solid transparent; + border-radius: 8px; + background-clip: padding-box; + background-color: #7e818c; } + scrollbar slider:hover { + background-color: #a0a4af; } + scrollbar slider:hover:active { + background-color: #e323f0; } + scrollbar slider:backdrop { + background-color: #393c47; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { + margin: 0; + min-width: 3px; + min-height: 3px; + background-color: #C3C7D1; + border: 1px solid black; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; + background-color: #C3C7D1; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid black; + -gtk-icon-source: none; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } + scrollbar button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #7e818c; } + scrollbar button:hover { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #a0a4af; } + scrollbar button:active, scrollbar button:checked { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #e323f0; } + scrollbar button:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(126, 129, 140, 0.2); } + scrollbar button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #393c47; } + scrollbar button:backdrop:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: rgba(57, 60, 71, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } + +treeview ~ scrollbar.vertical { + border-top: 1px solid rgba(12, 14, 21, 0.8); + margin-top: -1px; } + +/*********** + * Sidebar * + ***********/ +.sidebar { + border-style: none; + border-width: 0; + background-color: #171a27; } + .sidebar .frame { + border: none; } + stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { + border-right: none; + border-left-style: none; } + stacksidebar.sidebar:dir(rtl) list + .sidebar:dir(rtl), stacksidebar.sidebar.right list + .sidebar:dir(rtl), .sidebar.right { + border-left: 1px solid rgba(12, 14, 21, 0.8); + border-right-style: none; } + .sidebar:backdrop { + background-color: #181b28; + border-color: rgba(13, 16, 23, 0.82); } + .sidebar row { + padding: 8px 12px; + transition: all .12s ease-in; } + .sidebar row label { + color: #98abb2; } + .sidebar row:selected { + color: #fefefe; } + .sidebar row:selected:backdrop { + color: rgba(254, 254, 254, 0.5); + background: rgba(197, 14, 210, 0.6); } + .sidebar row:selected:backdrop label { + color: #fefefe; } + .sidebar row:selected label { + color: #fefefe; } + .sidebar.source-list { + background: #161925; + padding: 4px 0px; } + .sidebar.source-list.view, iconview.sidebar.source-list { + transition: all .12s ease-in; } + .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { + background-color: #c50ed2; + color: #fefefe; } + .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { + background-color: rgba(197, 14, 210, 0.9); } + .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { + background-color: rgba(0, 0, 0, 0.13); } + paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { + border-style: none; + border-color: rgba(12, 14, 21, 0.8); } + +stacksidebar row { + padding: 10px 4px; } + stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; } + stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; } + +/*******************************************************************/ +/* PLACESSIDEBAR */ +/*******************************************************************/ +/*--*/ +placessidebar.sidebar { + background-color: transparent; + background-image: linear-gradient(to right, #171e27 40px, #161925 35px, #161925 36px, #161925 36px, #161925 99%, #161925 100%); } + placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { + margin-left: -14px; + margin-right: 12px; + padding-left: 14px; + padding-right: 12px; + color: #9ecfa2; } + placessidebar.sidebar row.sidebar-row:hover { + transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: rgba(0, 0, 0, 0.76); + background-color: transparent; + /*rgba(65,67,75,0.4); */ + background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } + placessidebar.sidebar row.sidebar-row:active:hover { + color: rgba(0, 0, 0, 0.76); + background-color: rgba(0, 0, 0, 0.23); } + placessidebar.sidebar row.sidebar-row:selected { + color: rgba(255, 255, 255, 0.938); + background-color: transparent; + background-image: linear-gradient(to right, #c50ed2 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + placessidebar.sidebar row.sidebar-row:selected:hover { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.24); } + placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { + color: #ffffff; } + placessidebar.sidebar row.sidebar-row:selected:backdrop { + color: rgba(0, 0, 0, 0.54); + background-color: transparent; + background-image: linear-gradient(to right, #c50ed2 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { + color: rgba(254, 254, 254, 0.5); + -gtk-icon-shadow: 0 1px rgba(254, 254, 254, 0.3); } + placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); + color: inherit; } + placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { + color: #f9dc5c; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) { + box-shadow: inset 0 1px #71f79f, inset 0 -1px #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled), placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) image { + color: #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected { + background: #71f79f; } + placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected image { + color: #fefefe; } +placessidebar list { + background-color: transparent; } + placessidebar list:backdrop { + background-color: transparent; } + +/***************** + * GtkSpinButton * + *****************/ +spinbutton:not(.vertical) { + padding: 0; } + spinbutton:not(.vertical) entry { + min-width: 28px; + margin: 0; + background: none; + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; } + spinbutton:not(.vertical) button { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: #b2b6c0; + background-image: none; + border-style: none none none solid; + border-color: rgba(12, 14, 21, 0.1); + border-radius: 0; + box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } + spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + spinbutton:not(.vertical) button:hover { + color: #C3C7D1; + background-color: rgba(195, 199, 209, 0.05); } + spinbutton:not(.vertical) button:disabled { + color: rgba(109, 112, 123, 0.3); } + spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + spinbutton:not(.vertical) button:backdrop { + color: #656873; + background-color: transparent; + border-color: rgba(13, 16, 23, 0.12); + transition: 200ms ease-out; } + spinbutton:not(.vertical) button:backdrop:disabled { + color: rgba(51, 57, 85, 0.3); + background-image: none; + border-style: none none none solid; + box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } + spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { + border-style: none solid none none; } + spinbutton:not(.vertical) button:last-child { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } +.osd spinbutton:not(.vertical) button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-style: none none none solid; + border-color: rgba(0, 0, 0, 0.4); + border-radius: 0; + box-shadow: none; + -gtk-icon-shadow: 0 1px black; } + .osd spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + .osd spinbutton:not(.vertical) button:hover { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-color: rgba(0, 0, 0, 0.5); + background-color: rgba(254, 254, 254, 0.1); + -gtk-icon-shadow: 0 1px black; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #fefefe; + border-color: rgba(0, 0, 0, 0.5); + -gtk-icon-shadow: none; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:disabled { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + color: #87898d; + border-color: rgba(0, 0, 0, 0.5); + -gtk-icon-shadow: none; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:last-child { + border-radius: 0 3px 3px 0; } + .osd spinbutton:not(.vertical) button:dir(rtl):first-child { + border-radius: 3px 0 0 3px; } +spinbutton.vertical:disabled { + color: #6d707b; } +spinbutton.vertical:backdrop:disabled { + color: #333955; } +spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } +spinbutton.vertical entry { + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; } +spinbutton.vertical button { + min-height: 32px; + min-width: 32px; + padding: 0; + border-width: 1px; + border-color: rgba(12, 14, 21, 0.8); + box-shadow: 0 1px rgba(255, 255, 255, 0.1); } +spinbutton.vertical button.up { + border-radius: 3px 3px 0 0; + border-style: solid solid none solid; } +spinbutton.vertical button.down { + border-radius: 0 0 3px 3px; + border-style: none solid solid solid; } +.osd spinbutton.vertical button:first-child { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + .osd spinbutton.vertical button:first-child:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd spinbutton.vertical button:first-child:backdrop { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(16, 19, 27, 0.98), rgba(16, 19, 27, 0.98)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } +treeview spinbutton:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; } + treeview spinbutton:not(.vertical) entry { + min-height: 0; + padding: 1px 2px; } + +/*********** + * Spinner * + ***********/ +menu spinner { + color: #c50ed2; } + +/********************* + * Spinner Animation * + *********************/ +@keyframes spin { + to { + -gtk-icon-transform: rotate(1turn); } } +spinner { + background: none; + opacity: 0; + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } + spinner:checked { + opacity: 1; + animation: spin 1s linear infinite; } + spinner:checked:disabled { + opacity: 0.5; } + +/********** + * Switch * + **********/ +switch { + font-size: 1px; + font-weight: bold; + outline-offset: -4px; + transition: all 200ms ease-in; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 14px; + color: transparent; + padding: 2.3px 0px; + background: linear-gradient(to right, #1E2233, #1E2233); } + switch:disabled { + background-color: #171a26; } + switch:backdrop { + background-color: #161925; + transition: 200ms ease-out; } + switch:backdrop:disabled { + background-color: #171a26; } + switch:active, switch:checked { + background: linear-gradient(to right, #f7005a, #fadd00); } + switch:active slider, switch:checked slider { + background: #fff; } + switch:active:backdrop, switch:checked:backdrop { + background: linear-gradient(to right, #de0051, #e1c600); } + switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop { + box-shadow: none; + background-color: rgba(24, 27, 40, 0.9); + border: none; } + switch slider { + padding: 2px; + margin: 0 2.3px; + min-width: 12px; + min-height: 12px; + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + background-color: #151723; } + switch slider:backdrop { + padding: 2px; + box-shadow: none; + background-color: #181b28; } + switch trough:active, switch trough:checked { + background-color: #c50ed2; } + switch trough:active:backdrop, switch trough:checked:backdrop { + background-color: rgba(197, 14, 210, 0.6); } + +/************ + * Toolbars * + ************/ +toolbar, .inline-toolbar, searchbar, +.location-bar { + -GtkWidget-window-dragging: true; + padding: 4px; + background-color: #161925; } + +toolbar { + padding: 4px 3px 3px 4px; } + .osd toolbar { + background-color: transparent; } + toolbar.osd { + padding: 13px; + border: none; + border-radius: 5px; + background-color: rgba(16, 19, 27, 0.98); } + toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { + border-radius: 0; } + toolbar.horizontal separator { + margin: 0 7px 1px 6px; } + toolbar.vertical separator { + margin: 6px 1px 7px 0; } + toolbar:not(.inline-toolbar):not(.osd) switch, + toolbar:not(.inline-toolbar):not(.osd) scale, + toolbar:not(.inline-toolbar):not(.osd) entry, + toolbar:not(.inline-toolbar):not(.osd) spinbutton, + toolbar:not(.inline-toolbar):not(.osd) button { + margin-right: 1px; + margin-bottom: 1px; } + +.inline-toolbar { + padding: 3px; + border-width: 0 1px 1px; + border-radius: 0 0 5px 5px; } + +searchbar, +.location-bar { + border-width: 0 0 1px; + padding: 3px; } + +.inline-toolbar, searchbar, +.location-bar { + border-style: solid; + border-color: rgba(12, 14, 21, 0.8); + background-color: rgba(20, 23, 33, 0.94); } + .inline-toolbar:backdrop, searchbar:backdrop, + .location-bar:backdrop { + border-color: rgba(13, 16, 23, 0.82); + background-color: rgba(20, 23, 33, 0.937); + box-shadow: none; + transition: 200ms ease-out; } + +searchbar { + background: #181b28; } + +/************ + * Tooltips * + ************/ +tooltip { + padding: 4px; + /* not working */ + border-radius: 4px; + box-shadow: none; + text-shadow: 0 1px black; } + tooltip.background { + background-color: #0c0e15; + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.1); } + tooltip decoration { + background-color: transparent; } + tooltip * { + padding: 4px; + background-color: transparent; + color: white; } + +/************** + * Tree Views * + **************/ +treeview.view { + border-left-color: #6e717d; + border-top-color: #161925; } + * { + -GtkTreeView-horizontal-separator: 4; + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; } + treeview.view:selected:focus, treeview.view:selected { + border-radius: 0; } + treeview.view:selected:backdrop, treeview.view:selected { + border-left-color: #e286e8; + border-top-color: rgba(195, 199, 209, 0.1); } + treeview.view:disabled { + color: #6d707b; } + treeview.view:disabled:selected { + color: #dc6ee4; } + treeview.view:disabled:selected:backdrop { + color: rgba(204, 44, 216, 0.85); } + treeview.view:disabled:backdrop { + color: #333955; } + treeview.view.separator { + min-height: 2px; + color: #161925; } + treeview.view.separator:backdrop { + color: rgba(22, 25, 37, 0.1); } + treeview.view:backdrop { + border-left-color: #424550; + border-top: #161925; } + treeview.view:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: #980ba2; } + treeview.view:drop(active).after { + border-top-style: none; } + treeview.view:drop(active).before { + border-bottom-style: none; } + treeview.view.expander { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: #90939e; } + treeview.view.expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + treeview.view.expander:hover { + color: #C3C7D1; } + treeview.view.expander:selected { + color: #edb6f1; } + treeview.view.expander:selected:hover { + color: #fefefe; } + treeview.view.expander:selected:backdrop { + color: rgba(222, 119, 229, 0.65); } + treeview.view.expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + treeview.view.expander:backdrop { + color: #545763; } + treeview.view.progressbar { + border: 1px solid #980ba2; + border-radius: 4px; + background-color: #c50ed2; + background-image: linear-gradient(to bottom, #c50ed2, #980ba2); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); } + treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { + border-radius: 4px; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + background-image: linear-gradient(to bottom, #181b28, #050608); } + treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { + border-color: #1a1d2b; + background-color: #1a1d2b; } + treeview.view.progressbar:backdrop { + border-color: #1a1d2b; + background-image: none; + box-shadow: none; } + treeview.view.trough { + background-color: rgba(195, 199, 209, 0.1); + border-radius: 4px; } + treeview.view.trough:selected:focus, treeview.view.trough:selected { + background-color: #980ba2; + border-radius: 4px; } + treeview.view header button { + color: #6e717d; + background-color: #181b28; + font-weight: bold; + text-shadow: none; + box-shadow: none; } + treeview.view header button:hover { + color: #999ca7; + box-shadow: none; + transition: none; } + treeview.view header button:active { + color: #C3C7D1; + transition: none; } + treeview.view header button:last-child:backdrop, treeview.view header button:last-child { + border-right-style: none; } + treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, + treeview.view header.button.dnd:active, + treeview.view header.button.dnd:selected, + treeview.view header.button.dnd:hover, + treeview.view header.button.dnd { + padding: 0 6px; + transition: none; + background-image: none; + background-color: #c50ed2; + color: #181b28; + border-radius: 0; + border-style: none; + box-shadow: inset 0 0 0 1px #181b28; + text-shadow: none; } + treeview.view acceleditor > label { + background-color: #c50ed2; } + +treeview.view header button, treeview.view header button:hover, treeview.view header button:active { + padding: 0 6px; + border-radius: 0; + background-image: none; + text-shadow: none; + border-width: 1px; + border-style: none solid solid none; + border-color: #161925; } + treeview.view header button:disabled { + border-color: #161925; + background-image: none; } + treeview.view header button:backdrop { + border-color: #161925; + border-style: none solid solid none; + color: #424550; + background-image: none; + background-color: #1a1d2b; } + treeview.view header button:backdrop:disabled { + border-color: #161925; + background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + border-radius: 4px 4px 0 0; + border-width: 0px; + border-width: 0px; + box-shadow: 0 4px 10px 2px rgba(12, 14, 21, 0.6); + margin: 10px; } + decoration:backdrop { + box-shadow: 0 4px 10px 2px rgba(12, 14, 21, 0.4); + transition: 200ms ease-out; } + .maximized decoration, .fullscreen decoration, .tiled decoration { + border-radius: 0; } + .popup decoration { + box-shadow: none; } + .ssd decoration { + box-shadow: none; } + .csd.popup decoration { + border-radius: 7px; + box-shadow: 0 4px 8px rgba(12, 14, 21, 0.8); + border: 1px solid rgba(12, 14, 21, 0.8); } + tooltip.csd decoration { + border-radius: 5px; + box-shadow: none; } + messagedialog.csd decoration { + border-radius: 7px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(12, 14, 21, 0.6); } + .solid-csd decoration { + border-radius: 0; + margin: 0px; + background-color: #161925; + border: solid 1px rgba(13, 16, 23, 0.82); + box-shadow: none; } + +button.titlebutton { + background-repeat: no-repeat; + background-position: center; + min-height: 20px; + padding: 0 1px; + box-shadow: none; } + button.titlebutton.close { + background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } + button.titlebutton.close:hover, button.titlebutton.close:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } + button.titlebutton.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } + button.titlebutton.maximize:hover, button.titlebutton.maximize:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } + button.titlebutton.minimize { + background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } + button.titlebutton.minimize:hover, button.titlebutton.minimize:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } + button.titlebutton:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } + +headerbar.selection-mode button.titlebutton, +.titlebar.selection-mode button.titlebutton { + text-shadow: 0 -1px rgba(0, 0, 0, 0.648627451); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.648627451); } + headerbar.selection-mode button.titlebutton:backdrop, + .titlebar.selection-mode button.titlebutton:backdrop { + -gtk-icon-shadow: none; } + +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, +.view text:selected:focus, +iconview text:selected:focus, +textview text:selected:focus, +.view text:selected, +iconview text:selected, +textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, +textview text selection:focus, +textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, +.menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, +entry selection:focus, +entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { + background-color: #c50ed2; } + row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + .view text:selected:focus, + iconview text:selected:focus, + textview text:selected:focus, + .view text:selected, + iconview text:selected, + textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, + textview text selection:focus, + textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, + popover.background radiobutton:selected, + .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, + entry selection:focus, + entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { + color: #fefefe; + font-weight: normal; } + row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + iconview text:disabled:selected:focus, + textview text:disabled:selected:focus, + .view text:disabled:selected, + iconview text:disabled:selected, + textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, + textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, + popover.background radiobutton:disabled:selected, + .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, + entry selection:disabled, row:disabled:selected { + color: #e286e8; } + row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + iconview text:backdrop:selected:focus, + textview text:backdrop:selected:focus, + .view text:backdrop:selected, + iconview text:backdrop:selected, + textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, + textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, + .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, + entry selection:backdrop, row:backdrop:selected { + color: rgba(254, 254, 254, 0.5); } + row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + .view text:backdrop:disabled:selected, + iconview text:backdrop:disabled:selected, + textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, + textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, popover.background checkbutton:backdrop:disabled:selected, + popover.background radiobutton:backdrop:disabled:selected, + .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, + entry selection:backdrop:disabled, row:backdrop:disabled:selected { + color: rgba(204, 44, 216, 0.85); } + +.monospace { + font-family: Monospace; } + +/********************** + * DE-Specific Styles * + **********************/ +/********* +* Budgie * +*********/ +.budgie-container { + background-color: transparent; } + .budgie-container:backdrop { + background-color: transparent; } + .budgie-container popover list, + .budgie-container popover row { + border: none; + background: none; + padding: 0; + margin: 0; } + +.budgie-popover .container, +.budgie-popover border, +.budgie-popover list, +.budgie-popover row { + padding: 0; + margin: 0; + background: none; + border: none; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + opacity: 1; + min-width: 0; + min-height: 0; } + +.budgie-popover, +.budgie-popover.background { + border-radius: 2px; + padding: 0; + background: #07080c; + background-clip: border-box; + box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); + border: 1px solid black; } + .budgie-popover list:hover, + .budgie-popover row:hover, + .budgie-popover.background list:hover, + .budgie-popover.background row:hover { + background: none; } + .budgie-popover > frame.container, + .budgie-popover.background > frame.container { + margin: 0 -1px -1px; + padding: 2px 0 0; } + .budgie-popover button, + .budgie-popover.background button { + color: #C3C7D1; + border: none; + background: transparent; } + .budgie-popover button:hover, + .budgie-popover.background button:hover { + color: #c50ed2; } + +.budgie-popover > .container { + padding: 2px; } + +.budgie-menu { + color: #C3C7D1; } + .budgie-menu .container { + padding: 0; } + .budgie-menu button:hover { + -gtk-icon-effect: none; } + .budgie-menu entry.search { + border: none; + background: none; + padding: 5px 2px; + border-bottom: 1px solid black; + border-radius: 0; + font-size: 120%; + box-shadow: none; + color: #C3C7D1; } + .budgie-menu entry.search image:dir(ltr) { + padding-left: 8px; + padding-right: 12px; } + .budgie-menu entry.search image:dir(rtl) { + padding-left: 12px; + padding-right: 8px; } + .budgie-menu .categories { + border-width: 0; + margin-left: 3px; + background: transparent; } + .budgie-menu .categories:dir(ltr) { + border-right: 1px solid black; } + .budgie-menu .categories:dir(rtl) { + border-left: 1px solid black; } + .budgie-menu .category-button { + padding: 7px; + border-radius: 2px 0 0 2px; } + .budgie-menu .category-button:hover { + background-color: rgba(195, 199, 209, 0.05); + color: #C3C7D1; } + .budgie-menu .category-button:active { + box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + .budgie-menu .category-button:checked { + color: #fefefe; + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .budgie-menu .category-button:checked:hover { + color: rgba(254, 254, 254, 0.9); } + .budgie-menu .category-button:checked:disabled { + opacity: 0.5; } + .budgie-menu .category-button:checked:disabled label { + color: rgba(254, 254, 254, 0.7); } + .budgie-menu scrollbar { + background-color: transparent; + border-color: black; } + .budgie-menu button:not(.category-button) { + padding-top: 5px; + padding-bottom: 5px; + border-radius: 0; + box-shadow: none; + background: yellow; } + .budgie-menu button { + border: none; + background: transparent; } + .budgie-menu undershoot, .budgie-menu overshoot { + background: none; } + .budgie-menu list { + color: rgba(195, 199, 209, 0.7); } + +button.budgie-menu-launcher { + padding: 0 2px; + color: white; + box-shadow: none; + background-color: transparent; } + button.budgie-menu-launcher:hover { + color: white; } + button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { + color: white; } + button.budgie-menu-launcher:backdrop { + color: white; + background-color: transparent; } + button.budgie-menu-launcher:backdrop:hover { + color: white; } + button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { + color: #c50ed2; + box-shadow: none; + background-color: #181b27; } + +.user-menu .content-box separator { + margin-left: 6px; + margin-right: 6px; + background-color: rgba(195, 199, 209, 0.1); } +.user-menu button { + margin: 5px; } +.user-menu > box.vertical row.activatable:first-child .indicator-item, +.user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); + background-color: #c50ed2; + transition-duration: 0.2s; } + .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { + padding-left: 7px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38px auto; } + .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { + padding-right: 7px; + background-position: right center; + background-repeat: no-repeat; + background-size: 38px auto; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { + color: #fefefe; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { + padding-left: 5px; } + .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { + padding-right: 5px; } + .user-menu > box.vertical row.activatable:first-child .indicator-item image, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { + color: #fefefe; } + .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, + .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { + min-width: 24px; + min-height: 20px; } + +button.raven-trigger { + padding-left: 2px; + padding-right: 2px; + color: white; + box-shadow: none; } + button.raven-trigger:hover { + color: white; + background-color: transparent; } + button.raven-trigger:active, button.raven-trigger:checked { + box-shadow: none; + background-color: transparent; + color: #c50ed2; } + button.raven-trigger:backdrop { + color: white; } + button.raven-trigger:backdrop:hover { + color: white; } + button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { + box-shadow: none; + color: #c50ed2; + background-color: transparent; } + +.places-menu .container { + padding: 0; } +.places-menu .message-bar { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.places-menu .name-button { + border: 0; + border-radius: 0; + padding: 4px 6px; } +.places-menu .unmount-button { + padding: 4px 4px; + border: 0; + border-radius: 0; } +.places-menu .places-section-header { + padding: 0px; + border-bottom: 1px solid rgba(0, 0, 0, 0.95); + box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } +.places-menu .places-section-header > button { + padding: 8px; + border: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } +.places-menu .places-list { + background: rgba(195, 199, 209, 0.04); + border-bottom: 1px solid rgba(0, 0, 0, 0.95); } +.places-menu .unlock-area { + border-top: 1px solid rgba(0, 0, 0, 0.85); + border-bottom: 1px solid rgba(0, 0, 0, 0.85); } +.places-menu .unlock-area entry { + border-radius: 0; + border: 0; } +.places-menu .unlock-area button { + border-radius: 0; + border: 0; + border-left: 1px solid rgba(0, 0, 0, 0.85); } +.places-menu .alternative-label { + font-size: 15px; + padding: 3px; } +.places-menu .always-expand { + background: transparent; + border-bottom: none; } + +.night-light-indicator .container { + padding: 0; } +.night-light-indicator .view-header { + font-size: 14px; + padding: 10px; + border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35);; + box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04);; } +.night-light-indicator .display-settings-button { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border: none; + padding: 3px; + border-top: 1px solid mix(@theme_base_color, #000000, 0.35);; + box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04);; } + +.budgie-panel { + color: white; + background-color: rgba(0, 0, 0, 0.95); + background-image: none; + box-shadow: none; + border: none; + transition: all 150ms ease-in; } + .budgie-panel .alert { + color: #ed254e; } + .budgie-panel:backdrop { + color: white; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-panel button { + border-top-width: 0; + border-bottom-width: 0; + border-radius: 0; } + .budgie-panel button.flat { + background: transparent; + border: none; } + .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { + background: transparent; + color: #c50ed2; } + .budgie-panel popover list, + .budgie-panel popover row { + padding: 0; + margin: 0; } + .budgie-panel label { + color: white; + font-weight: 700; } + .budgie-panel.transparent { + background-color: rgba(0, 0, 0, 0.2); } + .top .budgie-panel.transparent { + border-bottom-color: transparent; } + .bottom .budgie-panel.transparent { + border-top-color: transparent; } + .left .budgie-panel.transparent { + border-right-color: transparent; } + .right .budgie-panel.transparent { + border-left-color: transparent; } + .budgie-panel .end-region { + border-radius: 0px; } + .budgie-panel .end-region separator { + background-color: rgba(195, 199, 209, 0.15); } + .budgie-panel .end-region label { + font-weight: 700; + color: #C3C7D1; } + +.budgie-panel #tasklist-button, +.budgie-panel #tasklist-button:backdrop { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: rgba(0, 0, 0, 0); + border-radius: 0; + background-color: transparent; + box-shadow: none; + background-clip: padding-box; } + +.budgie-panel button.flat.launcher { + outline-color: transparent; + transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-color: rgba(0, 0, 0, 0); + border-radius: 0; + padding: 0; + background-clip: padding-box; + background-color: transparent; } + .budgie-panel button.flat.launcher { + box-shadow: none; } + +.budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, +.budgie-panel .pinned button.flat.launcher.running:hover { + box-shadow: none; } +.budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, +.budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, +.budgie-panel .pinned button.flat.launcher.running:checked { + box-shadow: none; } +.top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, +.top .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .top button.flat.launcher.running { + padding-bottom: 2px; + border-top: 2px solid transparent; } + .top .budgie-panel .pinned button.flat.launcher:not(.running) { + border-top: 2px solid transparent; } + + .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-top: 2px solid rgba(255, 255, 255, 0.1); } + + .top .budgie-panel .unpinned button.flat.launcher, + .top .budgie-panel .pinned button.flat.launcher.running { + border-top: 2px solid rgba(255, 255, 255, 0.1); } + .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, + .top .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .top button.flat.launcher.running:hover { + border-top: 2px solid rgba(255, 255, 255, 0.25); } + .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, + .top .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, + .top .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .top button.flat.launcher.running:checked { + border-top: 2px solid #c50ed2; } +.bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, +.bottom .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .bottom button.flat.launcher.running { + padding-top: 2px; + border-bottom: 2px solid transparent; } + .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { + border-bottom: 2px solid transparent; } + + .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-bottom: 2px solid rgba(255, 255, 255, 0.1); } + + .bottom .budgie-panel .unpinned button.flat.launcher, + .bottom .budgie-panel .pinned button.flat.launcher.running { + border-bottom: 2px solid rgba(255, 255, 255, 0.1); } + .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, + .bottom .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .bottom button.flat.launcher.running:hover { + border-bottom: 2px solid rgba(255, 255, 255, 0.25); } + .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, + .bottom .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, + .bottom .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .bottom button.flat.launcher.running:checked { + border-bottom: 2px solid #c50ed2; } +.left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, +.left .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .left button.flat.launcher.running { + padding-right: 2px; + border-left: 2px solid transparent; } + .left .budgie-panel .pinned button.flat.launcher:not(.running) { + border-left: 2px solid transparent; } + + .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-left: 2px solid rgba(255, 255, 255, 0.1); } + + .left .budgie-panel .unpinned button.flat.launcher, + .left .budgie-panel .pinned button.flat.launcher.running { + border-left: 2px solid rgba(255, 255, 255, 0.1); } + .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, + .left .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .left button.flat.launcher.running:hover { + border-left: 2px solid rgba(255, 255, 255, 0.25); } + .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, + .left .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, + .left .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .left button.flat.launcher.running:checked { + border-left: 2px solid #c50ed2; } +.right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, +.right .budgie-panel .pinned button.flat.launcher.running, +.budgie-panel .pinned .right button.flat.launcher.running { + padding-left: 2px; + border-right: 2px solid transparent; } + .right .budgie-panel .pinned button.flat.launcher:not(.running) { + border-right: 2px solid transparent; } + + .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { + border-right: 2px solid rgba(255, 255, 255, 0.1); } + + .right .budgie-panel .unpinned button.flat.launcher, + .right .budgie-panel .pinned button.flat.launcher.running { + border-right: 2px solid rgba(255, 255, 255, 0.1); } + .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, + .right .budgie-panel .pinned button.flat.launcher.running:hover, + .budgie-panel .pinned .right button.flat.launcher.running:hover { + border-right: 2px solid rgba(255, 255, 255, 0.25); } + .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, + .right .budgie-panel .pinned button.flat.launcher.running:active, + .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, + .right .budgie-panel .pinned button.flat.launcher.running:checked, + .budgie-panel .pinned .right button.flat.launcher.running:checked { + border-right: 2px solid #c50ed2; } + +.top .budgie-panel { + border-bottom: 1px solid rgba(0, 0, 0, 0.92); } + +.top .raven-frame { + padding: 0; + background: none; } + .top .raven-frame border { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.92); } + +.top .shadow-block { + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } + +.bottom .budgie-panel { + border-top: 1px solid rgba(0, 0, 0, 0.92); } + +.bottom .raven-frame { + padding: 0; + background: none; } + .bottom .raven-frame border { + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.92); } + +.bottom .shadow-block { + background-color: transparent; + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } + +.left .budgie-panel { + border-right: 1px solid rgba(0, 0, 0, 0.92); } + +.left .raven-frame { + padding: 0; + background: none; } + .left .raven-frame border { + border: none; + border-right: 1px solid rgba(0, 0, 0, 0.92); } + +.left .shadow-block { + background-color: transparent; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } + +.right .budgie-panel { + border-left: 1px solid rgba(0, 0, 0, 0.92); } + +.right .raven-frame { + padding: 0; + background: none; } + .right .raven-frame border { + border: none; + border-left: 1px solid rgba(0, 0, 0, 0.92); } + +.right .shadow-block { + background-color: transparent; + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } + +.raven { + padding: 0; + color: #C3C7D1; + background: #07080c; + transition: 170ms ease-out; } + .raven .raven-header { + min-height: 32px; + color: #C3C7D1; + border: solid rgba(0, 0, 0, 0.95); + border-width: 1px 0; + background-color: rgba(6, 7, 10, 0.45); } + .raven .raven-header * { + padding-top: 0; + padding-bottom: 0; } + .raven .raven-header.top { + border-top-style: none; + border-color: transparent; + margin-top: 3px; + min-height: 32px; } + .raven .raven-header.top button.image-button:hover { + color: #af0cba; + box-shadow: none; } + .raven .raven-header > button.text-button { + border-radius: 2px; + color: #fefefe; + background-color: rgba(230, 19, 62, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header > button.text-button:hover { + border-radius: 2px; + color: #fefefe; + background-color: rgba(237, 37, 78, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header > button.text-button:active { + color: #fefefe; + background-color: rgba(239, 61, 97, 0.9); + box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } + .raven .raven-header.bottom { + border-bottom-style: none; } + .raven .raven-header button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + border-radius: 0; } + .raven .raven-header button:hover { + color: #c50ed2; + border-radius: 0; + text-shadow: none; + border: none; + border-radius: 0; } + .raven .raven-header button:disabled { + color: #6d707b; } + .raven .raven-header button.text-button.radio { + margin: 5px 0px; + min-height: 20px; + padding: 3px; } + .raven .raven-header button.text-button.radio:active, .raven .raven-header button.text-button.radio:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .raven list { + color: #C3C7D1; + background-color: transparent; } + .raven list:selected { + background-color: rgba(197, 14, 210, 0.9); } + .raven list row, + .raven list row.activatable { + background-color: transparent; } + .raven list row:hover, + .raven list row.activatable:hover { + background-color: rgba(29, 33, 48, 0.25); } + .raven list row:selected, + .raven list row.activatable:selected { + background-color: rgba(197, 14, 210, 0.9); } + .raven .raven-background { + color: #C3C7D1; + background-color: transparent; + border-color: transparent; } + .raven .raven-background.middle { + border-bottom-style: none; } + .raven .powerstrip { + background-color: transparent; + border-top-color: transparent; } + .raven .powerstrip button.image-button { + border-radius: 50%; + padding: 5px; + min-width: 32px; + min-height: 32px; + margin-bottom: 3px; + background: #c74ded; + color: #fefefe; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); + border: none; + font-size: 100%; } + .raven .powerstrip button.image-button:hover { + background: rgba(199, 77, 237, 0.85); + color: #fefefe; } + .raven .powerstrip button.image-button:active { + background: #c74ded; + color: #fefefe; } + .raven .powerstrip button.image-button:first-child { + background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } + .raven .powerstrip button.image-button:first-child:hover { + background: rgba(197, 14, 210, 0.85); } + .raven .powerstrip button.image-button:first-child:active { + background: #c50ed2; } + .raven .powerstrip button.image-button:last-child { + background: linear-gradient(to right, #FF416C, #FF4B2B); } + .raven .powerstrip button.image-button:last-child:hover { + background: rgba(237, 37, 78, 0.85); } + .raven .powerstrip button.image-button:last-child:active { + background: #ed254e; } + .raven .option-subtitle { + font-size: 13px; } + +calendar.raven-calendar { + padding: 6px; + color: #C3C7D1; + background: transparent; + border-color: transparent; } + calendar.raven-calendar:indeterminate { + color: alpha(currentColor,0.3); } + calendar.raven-calendar:selected { + background: transparent; + color: #b30dbf; + font-weight: bold; } + calendar.raven-calendar:backdrop { + background-color: transparent; } + calendar.raven-calendar.header { + color: #C3C7D1; + border: none; + border-radius: 0; + background-color: transparent; } + calendar.raven-calendar button, calendar.raven-calendar button:focus { + color: alpha(currentColor,0.5); + background-color: transparent; } + calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { + color: #C3C7D1; + background-color: transparent; } + +.raven-mpris { + color: #C3C7D1; + background-color: rgba(3, 3, 5, 0.9); + border: solid rgba(255, 255, 255, 0.1); + border-width: 1px 0; + border-bottom-color: rgba(0, 0, 0, 0.1); } + .raven-mpris button.image-button { + padding: 10px; + background-color: #181b28; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } + .raven-mpris button.image-button:hover { + background-color: #c50ed2; } + .raven-mpris button.image-button:active { + background-color: #af0cba; } + .raven-mpris button.image-button:first-child { + margin-right: 4px; } + .raven-mpris button.image-button:last-child { + margin-left: 4px; } + .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { + padding: 4px; + margin-top: 6px; + margin-bottom: 6px; } + +.budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { + background: none; + border-radius: 1px; } + .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { + background-color: #c50ed2; + color: #fefefe; + border: none; } + .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { + background-color: #af0cba; + border: none; } + .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { + background-color: #af0cba; } + +.budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { + border-radius: 1px; } +.budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { + font-size: 110%; + color: #C3C7D1; } +.budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { + color: rgba(195, 199, 209, 0.7); } +.budgie-notification button, .budgie-osd button, .budgie-switcher button { + background-color: transparent; + color: #fefefe; } + .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { + background-color: transparent; + color: #ed254e; + box-shadow: none; } + .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { + background-color: transparent; + color: #e6133e; } + +.drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { + color: #C3C7D1; + background-color: rgba(22, 25, 37, 0.95); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + border-radius: 2px; } + +.budgie-switcher-window flowbox { + color: #C3C7D1; } +.budgie-switcher-window flowboxchild { + padding: 3px; + margin: 3px; + color: #C3C7D1; } + .budgie-switcher-window flowboxchild:hover { + background-color: transparent; } + .budgie-switcher-window flowboxchild:active { + color: #C3C7D1; } + .budgie-switcher-window flowboxchild:selected { + color: #fefefe; + background-color: rgba(197, 14, 210, 0.5); } + .budgie-switcher-window flowboxchild:selected:active { + color: #fefefe; } + .budgie-switcher-window flowboxchild:selected:hover { + background-color: #b10dbd; } + .budgie-switcher-window flowboxchild:selected:disabled { + color: rgba(254, 254, 254, 0.7); + background-color: rgba(197, 14, 210, 0.7); } + .budgie-switcher-window flowboxchild:selected:disabled label { + color: rgba(254, 254, 254, 0.7); } + +.budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { + color: #C3C7D1; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { + color: rgba(195, 199, 209, 0.8); } + .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { + font-size: 120%; } + .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { + margin-bottom: 0; + min-height: 32px; + border-bottom: none; + border-color: black; + border-radius: 0; + color: #fff; + background-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } + .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { + font-weight: 700; } + .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { + border-left: none; + border-bottom-left-radius: 2px; } + .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { + border-right: none; + border-bottom-right-radius: 2px; } + .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { + background-color: rgba(197, 14, 210, 0.9); } + .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { + color: rgba(255, 255, 255, 0.5); } + .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { + background-color: rgba(197, 14, 210, 0.9); } + .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { + background-color: rgba(219, 16, 234, 0.9); } + .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { + background-color: rgba(219, 16, 234, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { + background-color: rgba(206, 17, 56, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { + background-color: rgba(230, 19, 62, 0.9); } + .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { + background-color: rgba(230, 19, 62, 0.9); } + .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { + background-color: #505359; + color: #C3C7D1; } + .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { + background-color: #505359; } + .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { + background-color: #505359; } + +.budgie-polkit-dialog .message { + color: rgba(195, 199, 209, 0.7); } +.budgie-polkit-dialog .failure { + color: #ed254e; } + +.budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { + font-size: 120%; + padding: 8px 5px; + border: none; + box-shadow: none; } + .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { + color: #C3C7D1; } + .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { + padding-left: 8px; + padding-right: 12px; } + .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { + padding-left: 12px; + padding-right: 8px; } +.budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, +.budgie-run-dialog list row:selected headerbar .subtitle, +headerbar .budgie-run-dialog list row:selected .subtitle { + opacity: 1; } +.budgie-run-dialog scrolledwindow { + border-top: 1px solid rgba(0, 0, 0, 0); } + +.budgie-menubar menu { + margin: 4px; + padding: 5px; + border-radius: 0; + background-color: rgba(0, 0, 0, 0.95); } + .budgie-menubar menu menuitem:hover { + background-color: #c50ed2; + color: #fefefe; } +.budgie-menubar arrow { + border: none; + min-width: 16px; + min-height: 16px; } + .budgie-menubar arrow.top { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid rgba(33, 35, 42, 0.928); } + .budgie-menubar arrow.bottom { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid rgba(33, 35, 42, 0.928); } +.budgie-menubar menuitem accelerator { + color: rgba(195, 199, 209, 0.35); } +.budgie-menubar menuitem check, .budgie-menubar menuitem radio { + min-height: 16px; + min-width: 16px; } + +window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { + border-style: none none solid; } + +.workspace-switcher .workspace-layout { + border: 0 solid rgba(0, 0, 0, 0.95); } + .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { + border-left-width: 1px; } + .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { + border-right-width: 1px; } + .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { + border-top-width: 1px; } +.workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { + border: 0 solid rgba(19, 22, 32, 0.95); } + .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), + .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { + border-right-width: 1px; } + .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), + .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { + border-left-width: 1px; } + .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { + border-bottom-width: 1px; } +.workspace-switcher .workspace-item.current-workspace { + background-color: rgba(10, 11, 16, 0.95); } +.workspace-switcher .workspace-add-button { + border: none; + background: transparent; + box-shadow: none; } + .workspace-switcher .workspace-add-button:hover { + box-shadow: none; } + .workspace-switcher .workspace-add-button:active { + background-image: none; } + .workspace-switcher .workspace-add-button:active image { + margin: 1px 0 -1px; } +.budgie-panel .workspace-switcher .workspace-icon-button { + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 2px; } + +/************ + * Nautilus * + ************/ +.nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { + background: transparent; + color: #c50ed2; } + .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { + color: #c50ed2; } +.nautilus-window paned > separator { + background-image: none; } +.nautilus-window .sidebar { + background-color: transparent; } + .nautilus-window .sidebar:backdrop { + background-color: transparent; } + .nautilus-window .sidebar .list-row button { + border: none; + background-color: rgba(18, 21, 31, 0.95); } + .nautilus-window .sidebar .list-row button:active { + background-color: rgba(197, 14, 210, 0.75); } + .nautilus-window .sidebar .list-row:selected { + background-color: rgba(197, 14, 210, 0.75); } + .nautilus-window .sidebar .list-row:selected:hover { + background-color: rgba(197, 14, 210, 0.9); } + .nautilus-window .sidebar .list-row:hover { + background-color: rgba(24, 27, 40, 0.5); } + .nautilus-window .sidebar .list-row:hover:active { + background-color: rgba(197, 14, 210, 0.9); } +.nautilus-window.background { + background-color: rgba(18, 21, 31, 0.95); } + .nautilus-window.background:backdrop { + background-color: rgba(18, 21, 31, 0.95); } +.nautilus-window notebook > stack:only-child { + background-color: #181b28; } + .nautilus-window notebook > stack:only-child:backdrop { + background-color: #1a1d2b; } +.nautilus-window searchbar { + border-top: 1px solid rgba(0, 0, 0, 0.12); } +.nautilus-window .searchbar-container { + margin-top: -1px; } +.nautilus-window .titlebar .search { + border: 1px solid transparent; + border-radius: 10px; + box-shadow: none; + margin-top: 10px; + margin-bottom: 10px; } +.nautilus-window .titlebar .path-bar-box .dim-label, .nautilus-window .titlebar .path-bar-box label.separator, .nautilus-window .titlebar .path-bar-box .subtitle { + color: transparent; } +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child, +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active, +.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked, +.nautilus-window .titlebar .path-bar-box button:active, .nautilus-window .titlebar .path-bar-box button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop, + .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label, + .nautilus-window .titlebar .path-bar-box button:active:backdrop, + .nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label { + color: whitesmoke; } +.nautilus-window .titlebar .linked:not(.path-bar) button:active, .nautilus-window .titlebar .linked:not(.path-bar) button:checked, .nautilus-window .titlebar .linked:not(.path-bar) button:active:backdrop, .nautilus-window .titlebar .linked:not(.path-bar) button:checked:backdrop { + background: transparent; + color: #c50ed2; + box-shadow: none; + border: none; } +.nautilus-window .linked:not(.vertical) > entry { + border-radius: 10px; + margin-right: 5px; } + .nautilus-window .linked:not(.vertical) > entry:focus { + border-color: rgba(197, 14, 210, 0.6); } + +.nautilus-circular-button { + border-radius: 20px; + -gtk-outline-radius: 20px; } + +.disk-space-display { + border: 2px solid; } + .disk-space-display .unknown { + background-color: #888a85; + border-color: #555653; } + .disk-space-display .used { + background-color: #9FB0B9; + border-color: #667f8c; } + .disk-space-display .free { + background-color: #D8D8D8; + border-color: #a5a5a5; } + +.nautilus-desktop { + color: #C3C7D1; } + .nautilus-desktop .nautilus-canvas-item { + border-radius: 5px; + color: #fefefe; + text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } + .nautilus-desktop .nautilus-canvas-item:active { + color: #C3C7D1; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item:hover { + color: #C3C7D1; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item:selected { + color: #fefefe; + text-shadow: none; } + .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, + .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, + headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { + color: #fefefe; } + .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, + .nautilus-desktop .nautilus-list headerbar .subtitle:selected, + headerbar .nautilus-desktop .nautilus-list .subtitle:selected { + color: #fefefe; } + +/********* + * Gedit * + *********/ +.gedit-search-slider { + padding: 4px; + border-radius: 0 0 3px 3px; + border: 0; + background-color: #161925; } + +/********* +* Gnucash * +*********/ +#gnc-id-main-window entry.gnc-class-register-foreground { + background: transparent; + border: none; + box-shadow: none; } +#gnc-id-main-window .arrow.button.toggle { + transition: none; + box-shadow: none; } + #gnc-id-main-window .arrow.button.toggle:hover { + border-color: #c50ed2; } + +.xfce4-panel.panel { + background-color: #181b28; + text-shadow: none; + -gtk-icon-shadow: none; } + +#tasklist-button { + color: rgba(255, 255, 255, 0.8); + border-radius: 0; + border: none; + background-color: rgba(24, 27, 40, 0); } + #tasklist-button:hover { + color: white; + background-color: rgba(0, 0, 0, 0.17); } + #tasklist-button:checked { + color: white; + background-color: rgba(0, 0, 0, 0.25); + box-shadow: inset 0 -2px #c50ed2; } + +.xfce4-panel.panel button.flat { + color: white; + border-radius: 0; + border: none; + background-color: rgba(24, 27, 40, 0); } + .xfce4-panel.panel button.flat:hover { + border: none; + background-color: #2b3148; } + .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.flat:checked { + color: #fefefe; + border-bottom: 2px solid #c50ed2; + background-color: #212638; } + .xfce4-panel.panel button.flat:active label, .xfce4-panel.panel button.flat:active image, .xfce4-panel.panel button.flat:checked label, .xfce4-panel.panel button.flat:checked image { + color: inherit; } + +#whiskermenu-window button { + background-color: transparent; + border: none; + border-radius: 0; + font-weight: normal; + padding: 2px; + margin: 1px 0px; } + #whiskermenu-window button:hover, #whiskermenu-window button:checked { + background-color: #c50ed2; } + +/* thunar */ +.thunar toolbar { + background-color: #0c0e14; } + +/* buttons in toolbar */ +.thunar toolbar.horizontal button image { + -gtk-icon-transform: scale(0.72); } + +scrolledwindow.sidebar treeview.view { + background: #12151f; + padding: 1.5px; } + +/* path-bar of thunar */ +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button { + margin-top: 7px; + margin-bottom: 7px; } + window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button:hover, .thunar toolbar .path-bar-button:hover { + color: #c50ed2; } + window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button:checked, .thunar toolbar .path-bar-button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + +window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button { + background: none; + outline: none; + border: none; + box-shadow: none; } + +/* thunar sidepane */ +window.thunar paned > scrolledwindow treeview.view:hover { + background: #10131b; } +window.thunar paned > scrolledwindow treeview.view:selected { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; + border-radius: 0; + box-shadow: none; } + +window.thunar toolbar#location-toolbar entry { + border-radius: 10px; } + +/******** + * Gala * + *******/ +.gala-notification { + border-width: 0; + border-radius: 2px; + color: white; + border: 1px solid #181b28; + background-color: #181b28; } + .gala-notification .title, + .gala-notification .label { + color: #C3C7D1; } + +.gala-button { + padding: 3px; + color: #181b28; + border: none; + border-radius: 50%; + background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } + +/********** + * Notify * + *********/ +.notify { + /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ + border-radius: 5px; + border: 1px solid rgba(0, 0, 0, 0.7); + background-color: rgba(24, 27, 40, 0.05); } + +/*************** + * SwitchBoard * + ***************/ +.category-label { + font-weight: bold; + color: #C3C7D1; } + +/************* + * Slingshot * + ************/ +.button.app { + border: none; + border-radius: 0; + box-shadow: none; + background-image: none; } + .button.app .app:hover { + border-radius: 8px; + border: none; + background-color: rgba(197, 14, 210, 0.3); + color: white; } + .button.app .app:focus { + /*background-color: transparentize(black, 0.20);*/ } + +.search-item { + border-radius: 0; + border: none; + color: #C3C7D1; + background: none; } + .search-item:hover, .search-item:focus { + border-radius: 0; + background-color: rgba(197, 14, 210, 0.3); + color: #fefefe; } + +.search-entry-large, +.search-entry-large:focus { + border: none; + font-size: 18px; + font-weight: 300; + background-image: none; + background: none; + box-shadow: none; + border-radius: 0; } + +.search-category-header { + font-weight: bold; + color: #C3C7D1; } + +/********* + * Panel * + ********/ +.panel { + background-color: transparent; + transition: all 100ms ease-in-out; } + .panel.maximized { + background-color: #181b28; } + .panel.translucent { + background-color: rgba(24, 27, 40, 0.5); } + .panel.color-light.translucent { + background-color: rgba(255, 255, 255, 0.85); } + +menubar.panel, +.panel menubar { + box-shadow: none; + border: none; } + +.composited-indicator > revealer, +.composited-indicator > revealer image, +.composited-indicator > revealer label, +.composited-indicator > revealer spinner { + color: #fff; + font-weight: bold; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); + transition: all 200ms ease-in-out; + -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } +.composited-indicator > revealer image:first-child + label { + margin-left: 5px; } + +.panel.color-light .composited-indicator > revealer, +.panel.color-light .composited-indicator > revealer image, +.panel.color-light .composited-indicator > revealer label, +.panel.color-light .composited-indicator > revealer spinner { + color: rgba(0, 0, 0, 0.6); + text-shadow: 0 1px rgba(255, 255, 255, 0.1); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } + +/************** + * Calculator * + **************/ +PantheonCalculatorMainWindow { + border-radius: 0 0 4px 4px; } + PantheonCalculatorMainWindow .window-frame { + border-radius: 3px; } + +/********* + * Cards * + *********/ +.deck { + background-color: #07080b; } + +.card { + background-color: #181b28; + border: none; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); + transition: all 150ms ease-in-out; } + +.card.collapsed { + background-color: #0e1018; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } + +/********* + * Noise * + *********/ +NoiseLibraryWindow { + border-radius: 0 0 4px 4px; } + NoiseLibraryWindow .action-bar { + border-radius: 0 0 4px 4px; } + NoiseLibraryWindow .window-frame { + border-radius: 3px; } + +/******** + * Snap * + ********/ +SnapMainWindow .take-button, +SnapSnapWindow .take-button { + border-radius: 0; } + +/******************* + * Photos/Shotwell * + *******************/ +DirectWindow .the-button-in-the-combobox, +LibraryWindow .the-button-in-the-combobox { + background: none; } + +.checkerboard-layout { + background-color: #161925; + background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); + background-size: 24px 24px; + background-position: 0 0, 12px 12px; } + +.checkboard-layout .item { + background-color: #C3C7D1; } + +/********* +* Avatar * +*********/ +.avatar { + border: 1px solid rgba(0, 0, 0, 0.23); + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } + +/************ +* Level bar * +*************/ +.source-list.view.level-bar, iconview.source-list.level-bar, .source-list.view.level-bar:selected, iconview.source-list.level-bar:selected, .source-list.view.level-bar:selected:focus, iconview.source-list.level-bar:selected:focus { + background: linear-gradient(#333955, #333955); + border: 1px solid rgba(0, 0, 0, 0.14); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + border-radius: 2px; } +.source-list.view.level-bar.fill-block, iconview.source-list.level-bar.fill-block { + border: none; } + .source-list.view.level-bar.fill-block, iconview.source-list.level-bar.fill-block, .source-list.view.level-bar.fill-block:hover, iconview.source-list.level-bar.fill-block:hover, .source-list.view.level-bar.fill-block:selected, iconview.source-list.level-bar.fill-block:selected, .source-list.view.level-bar.fill-block:selected:focus, iconview.source-list.level-bar.fill-block:selected:focus { + background: linear-gradient(to right, #00f17d, #00f7d2); } + +/************************** + * Colors in context menu * +**************************/ +checkbutton.color-button { + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 100px; + background-clip: border-box; + padding: 0; + margin: 2px 1px; } + checkbutton.color-button > check { + -gtk-icon-source: none; + background: none; + margin-right: 0; + padding: 2px; } + checkbutton.color-button.none > check { + background-color: transparent; + border-radius: 100px; + -gtk-icon-source: -gtk-icontheme("close-symbolic"); } + +radiobutton.color-button > radio { + -gtk-icon-source: none; + margin-right: 0; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 100px; + background-clip: border-box; } +radiobutton.color-button:active > radio { + border: 1px solid rgba(0, 0, 0, 0.35); } + +.color-button check, +.color-button check:checked, +.color-button radio, +.color-button radio:checked { + background-image: none; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 50%; + color: #181b28; + -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } +.color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { + background-color: @STRAWBERRY_300; + -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } +.color-button.orange check, .color-button.orange radio { + background-color: @ORANGE_300; + -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } +.color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { + background-color: @BANANA_500; + -gtk-icon-shadow: 0 1px 1px @BANANA_700; } +.color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { + background-color: @LIME_500; + -gtk-icon-shadow: 0 1px 1px @LIME_700; } +.color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { + background-color: @BLUEBERRY_500; + -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } +.color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { + background-color: @GRAPE_500; + -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } +.color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { + background-color: @COCOA_300; + -gtk-icon-shadow: 0 1px 1px @COCOA_500; } +.color-button.mint check, .color-button.mint radio { + background-color: @MINT_500; + -gtk-icon-shadow: 0 1px 1px @MINT_700; } +.color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { + background-color: @BUBBLEGUM_500; + -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } +.color-button.slate check, .color-button.slate radio { + background-color: @SLATE_300; + -gtk-icon-shadow: 0 1px 1px @SLATE_500; } +.color-button.auto radio { + background-image: url("assets/color-button-auto.png"); + background-position: -1px -1px; + background-repeat: no-repeat; + background-size: calc(100% + 2px); } + +/******** +* Unity * +*********/ +/* Unity window border color */ +/* Unity window text color */ +/* Backdrop Unity window text color */ +/* Unity panel color #454D50 */ +UnityDecoration { + /* Border properties (top, right, bottom, left) */ + -UnityDecoration-extents: 28px 1px 1px 1px; + /* the size of the decorations */ + -UnityDecoration-input-extents: 10px; + /* the extra size of the input areas */ + /* Shadows settings */ + -UnityDecoration-shadow-offset-x: 1px; + /* Size property, the shadow x offset */ + -UnityDecoration-shadow-offset-y: 1px; + /* Size property, the shadow y offset */ + -UnityDecoration-active-shadow-color: rgba 0, 0, 0, 0.647; + /* Color property, active window shadow color */ + -UnityDecoration-active-shadow-radius: 8px; + /* Size property, active window shadow radius */ + -UnityDecoration-inactive-shadow-color: rgba 0, 0, 0, 0.647; + /* Color property, inactive windows shadow color */ + -UnityDecoration-inactive-shadow-radius: 5px; + /* Size property, inactive windows shadow radius */ + /* Glow applied to the selected scaled window */ + -UnityDecoration-glow-size: 8px; + /* Size property, size of glow */ + -UnityDecoration-glow-color: #c50ed2; + /* Color property of the glow */ + /* Title settings */ + -UnityDecoration-title-indent: 10px; + /* Size property, left indent of the title */ + -UnityDecoration-title-fade: 35px; + /* Size property, space of the title that can be faded */ + -UnityDecoration-title-alignment: 0.0; + /* Float from 0.0 to 1.0, to align the title */ + background-color: #eeeeee; + color: #31363D; } + UnityDecoration .top { + padding: 0 5px 0 5px; + border-radius: 4px 4px 0px 0px; + box-shadow: none; + border: 1px solid #eeeeee; + border-bottom-width: 0; + background-color: #eeeeee; + color: #31363D; + border-top: 1px solid rgba(255, 255, 255, 0.1); } + UnityDecoration .top:backdrop { + border-bottom-width: 0; + color: #1a1d21; + border-top: 1px solid rgba(255, 255, 255, 0.1); } + UnityDecoration .top .menuitem { + color: #31363D; } + UnityDecoration .top .menuitem:backdrop { + color: #1a1d21; } + +UnityDecoration.left, +UnityDecoration.right { + background-repeat: repeat-x; + background-color: #ececec; + background-size: 1px 120px; + background-clip: border-box; + background-image: linear-gradient(to bottom, #eeeeee, #ececec); } + +UnityDecoration.bottom { + background-size: 1px; + background-repeat: repeat-x; + background-color: #ececec; } + +UnityDecoration.left:backdrop, +UnityDecoration.right:backdrop, +UnityDecoration.bottom:backdrop { + background-size: 1px; + background-repeat: repeat-x; } + +/************** +* Unity Panel * +***************/ +UnityPanelWidget, +.unity-panel { + background-color: #d5d5d5; + color: #31363D; } + +UnityPanelWidget:backdrop, +.unity-panel:backdrop { + color: #1a1d21; } + +.unity-panel.menuitem, +.unity-panel .menuitem { + border-width: 0 1px; + color: #31363D; } + +.unity-panel.menubar, +.unity-panel .menubar { + color: #31363D; } + +.unity-panel.menu.menubar, +.unity-panel .menu .menubar { + background-color: #d5d5d5; + color: #31363D; } + +.unity-panel.menubar:backdrop, +.unity-panel .menubar *:backdrop { + color: #6d707b; } + +.unity-panel.menubar.menuitem, +.unity-panel.menubar .menuitem { + padding: 3px 5px; + border-width: 1px; + border-style: solid; + border: none; + background: none; + color: #31363D; + box-shadow: none; } + +.unity-panel.menubar.menuitem:hover, +.unity-panel.menubar .menuitem:hover { + border-radius: 0; + background-color: #ebebeb; + color: #31363D; + box-shadow: none; } + +.unity-panel.menubar .menuitem *:hover { + color: white; + box-shadow: none; } + +.unity-panel.menubar .menuitem.separator, +.unity-panel.menubar.menuitem.separator { + border: none; + color: rgba(12, 14, 21, 0.8); } + +/* Force Quit */ +SheetStyleDialog.unity-force-quit { + background-color: #181b28; } + +@keyframes playbackmenuitem_spinner { + to { + -gtk-icon-transform: rotate(1turn); } } +.menu IdoPlaybackMenuItem.menuitem:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: playbackmenuitem_spinner 1s infinite linear; + color: #c50ed2; } + +MsdOsdWindow.background.osd { + border-radius: 2px; + border: 1px solid rgba(12, 14, 21, 0.8); } + MsdOsdWindow.background.osd .progressbar { + background-color: #c50ed2; + border: none; + border-color: #c50ed2; + border-radius: 5px; } + MsdOsdWindow.background.osd .trough { + background-color: rgba(7, 8, 11, 0.98); + border: none; + border-radius: 5px; } + +/*********************** + * App-Specific Styles * + ***********************/ +/********* + * Geary * + *********/ +.geary-titlebar-left .separator, +.geary-titlebar-right .separator { + opacity: 0; } + +ConversationListView { + -GtkTreeView-grid-line-width: 0; } + ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { + background-color: #c50ed2; + color: #fefefe; } + ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { + background-color: rgba(197, 14, 210, 0.6); + color: rgba(254, 254, 254, 0.5); } + ConversationListView .view .cell, ConversationListView iconview .cell { + border: solid rgba(0, 0, 0, 0.2); + border-width: 0 0 1px 0; } + ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { + color: #fefefe; + border: 0px solid #980ba2; } + +/*********** + * LightDm * + ***********/ +#panel_window { + background-color: #181b28; + color: white; + font-weight: bold; + box-shadow: inset 0 -1px #0b0c12; } + #panel_window .menubar, + #panel_window .menubar > .menuitem + menubar, + #panel_window menubar > menuitem { + background-color: transparent; + color: white; + font-weight: bold; } + #panel_window .menubar .menuitem:disabled, + #panel_window menubar menuitem:disabled { + color: rgba(255, 255, 255, 0.5); } + #panel_window .menubar .menuitem:disabled GtkLabel, + #panel_window menubar menuitem:disabled GtkLabel { + color: inherit; } + #panel_window .menubar .menuitem:disabled label, + #panel_window menubar menuitem:disabled label { + color: inherit; } + #panel_window .menubar .menu > .menuitem, + #panel_window menubar menu > menuitem { + font-weight: normal; } + +#login_window, +#shutdown_dialog, +#restart_dialog { + font-weight: normal; + border-style: none; + background-color: transparent; + color: #C3C7D1; } + +#content_frame { + padding-bottom: 14px; + background-color: #161925; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border: solid rgba(0, 0, 0, 0.1); + border-width: 1px 1px 0 1px; } + +#content_frame button { + font-weight: normal; + color: #C3C7D1; + background-color: #181b28; + text-shadow: none; } + #content_frame button:hover { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #181b28; + text-shadow: none; } + #content_frame button:active, #content_frame button:checked { + color: #C3C7D1; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #c50ed2; + text-shadow: none; } + #content_frame button:disabled { + color: #a1a5b0; + outline-color: rgba(195, 199, 209, 0.3); + background-color: #171a26; + text-shadow: none; } + +#buttonbox_frame { + padding-top: 20px; + padding-bottom: 0px; + border-style: none; + background-color: #0c0e14; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: solid rgba(0, 0, 0, 0.1); + border-width: 0 1px 1px 1px; } + +#buttonbox_frame button { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(16, 19, 27, 0.98); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:hover { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(39, 44, 66, 0.98), rgba(39, 44, 66, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:active, #buttonbox_frame button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(28, 31, 47, 0.98), rgba(28, 31, 47, 0.98)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(254, 254, 254, 0.3); } + #buttonbox_frame button:disabled { + color: #87898d; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(40, 43, 50, 0.5), rgba(40, 43, 50, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + +#login_window #user_combobox { + color: #C3C7D1; + font-size: 13px; } + #login_window #user_combobox .menu, + #login_window #user_combobox menu { + font-weight: normal; } + +#user_image { + padding: 3px; + border-radius: 2px; } + +#greeter_infobar { + border-bottom-width: 0; + font-weight: bold; } + +.nemo-window .places-treeview { + -NemoPlacesTreeView-disk-full-bg-color: #333955; + -NemoPlacesTreeView-disk-full-fg-color: #00e8c6; + -GtkTreeView-vertical-separator: 7; } + .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, + .nemo-window .places-treeview iconview.cell:hover { + background: rgba(16, 19, 27, 0.7); } + .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, + .nemo-window .places-treeview iconview.cell:selected { + background: #c50ed2; } +.nemo-window .sidebar { + color: #98abb2; + background-color: #161925; } + .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { + background-color: transparent; } +.nemo-window .nemo-window-pane widget.entry { + background-clip: padding-box; + min-height: 28px; + padding: 5px; + color: #C3C7D1; + border: 1px solid rgba(12, 14, 21, 0.8); + border-radius: 3px; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.9), inset 1px 0 rgba(0, 0, 0, 0.96), inset -1px 0 rgba(0, 0, 0, 0.96), inset 0 -1px rgba(0, 0, 0, 0.98), 0 1px rgba(255, 255, 255, 0.6); } + .nemo-window .nemo-window-pane widget.entry:selected { + background-color: #c50ed2; + color: #fefefe; } +.nemo-window toolbar.primary-toolbar { + margin-bottom: -1px; + background: #0c0e14; } + .nemo-window toolbar.primary-toolbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + margin-top: 5px; + margin-bottom: 5px; + min-height: 24px; } + .nemo-window toolbar.primary-toolbar button:hover { + background: transparent; + color: #c50ed2; } + .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } +.nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, +.nemo-window .nemo-inactive-pane iconview { + background-color: #141722; } + +.caja-notebook .frame { + border-width: 0 0 1px; } +.caja-notebook .entry { + background: #161925; + color: #C3C7D1; + border-color: rgba(12, 14, 21, 0.8); } + .caja-notebook .entry:selected { + background: #c50ed2; + color: #fefefe; } + +/************** +* Caja sidebar * +**************/ +.caja-side-pane { + background: #0c0e14; } + .caja-side-pane .frame { + border-width: 1px 0 0; } + .caja-side-pane treeview.view, + .caja-side-pane textview.view text, + .caja-side-pane viewport.frame, + .caja-side-pane widget .vertical { + background: #161925; + padding: 3px 2px; + color: #98abb2; } + .caja-side-pane treeview.view:hover, + .caja-side-pane textview.view text:hover, + .caja-side-pane viewport.frame:hover, + .caja-side-pane widget .vertical:hover { + background-color: rgba(18, 21, 31, 0.95); } + .caja-side-pane treeview.view:selected, + .caja-side-pane textview.view text:selected, + .caja-side-pane viewport.frame:selected, + .caja-side-pane widget .vertical:selected { + color: #fefefe; + background: #c50ed2; } + +/************** +* Caja pathbar * +**************/ +.caja-navigation-window paned, .caja-navigation-window .primary-toolbar { + background: #0c0e14; } + +.caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button:backdrop, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button), +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } +.caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:checked, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active, +.caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked { + background: #c50ed2; + box-shadow: none; } + .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:hover label, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:active label, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:active label, .caja-navigation-window .primary-toolbar button:backdrop:checked, .caja-navigation-window .primary-toolbar button:backdrop:checked label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):hover label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):active label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:active label, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked, + .caja-navigation-window .vertical button.image-button.toggle:not(.text-button):backdrop:checked label { + color: #fefefe; } + +.caja-pathbar button { + color: #8b8b8b; + text-shadow: none; + box-shadow: none; + background: transparent; + border: none; + margin-top: 7px; + margin-bottom: 7px; } + .caja-pathbar button:hover { + color: #c50ed2; } + .caja-pathbar button:checked { + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px rgba(197, 14, 210, 0.98); + color: white; } + .caja-pathbar button:backdrop:disabled { + color: rgba(195, 199, 209, 0.2); + background-color: transparent; + border-radius: 0; + text-shadow: none; + box-shadow: none; } + +/*# sourceMappingURL=gtk.css.map */ diff --git a/gtk-4.0/gtk.scss b/gtk-4.0/gtk.scss new file mode 100755 index 0000000..dbd9b1f --- /dev/null +++ b/gtk-4.0/gtk.scss @@ -0,0 +1,11 @@ + + +$variant: 'dark'; + +@import '../gtk-3.0/colors'; +@import '../gtk-3.0/elementary-colors'; +@import '../gtk-3.0/colors-public'; +@import 'drawing'; +@import 'common'; +@import 'widgets'; +@import 'apps'; diff --git a/gtk-4.0/thumbnail.png b/gtk-4.0/thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..3eeec60f2dcee80b0fdf79a9f17da59100558c7c GIT binary patch literal 1735 zcmeAS@N?(olHy`uVBq!ia0y~yU}$AvU{K&-W?*38zUm#!z`($g?&#~tz_78O`%fY( zNHWeY;38hVtDxYMI}|Ej-KfW$@$DLj&J?(?*IS)XFk4RxU!Y2qna-*QA|diH!DR{ zMVBulnX9cTCLw3~tff-2S~KP>_YH{2$S&Wt@5JWq2aQaf)HKbuY(KPa$j6WO#g7ASjUe#9C`RubB93LlehMTMta0wy>_Lx45kF@|X9vZ?F9P_c!_K5r&() zSPrigQ8!>dvytKH5#G!cmcy%3GD`X<&vW+*o407Ki+k{r6`M;dTdscn@cPfM-UnA0 zE^TH$xlT-0o#p6i?v@HMISt0U`=-rWdg#~%eIxsXlmatLw}|NUzDaXMpPjh$<^7H~ zPngfFc zucNJRy?pgHPoId>pWmMP_?qv;T88IG1>HSZ_AL{Y)nqxaOwiSR`|hKw*YC8k_gT7f z%aj?5*KOM4?H9Fe*O3)#wnfBbFkIfkv8bP8Rwu{oZjO09tlJj|dU&z!T*z{8g{Yc7 z`|>Hw7dEr4ox#3rvZ$&ae{hgMU?BUFiR_Cf2>AQ&{3Tt_z`($ml#Bv?;0OzfQ5T6EydDYuErH!Ll7YOv3_ z^QK2+M^oo)t~>_DJT(qgS2?2pm!-EgJ8<+_ zbMWc2cZ`p#st$5YihcO@@$2XPueuoiIdCXzShOfkvFBN@eMotSk|SSdSKq~s-fni` z7|wZ}o+l3&czODIpEpoHBsz0n^kDrQkN=NVCt#K5Sq zxWLGxM@7SPg93xQuZxy`<^A)gcc1TB-Hexu7EEnCxKX#oapzv<6R)Qn6&HIJJN2%_ zx)(25f8Afr|DvlxZ{0u6irB#S)*BNqrQFvHz8Jjxj0s!YOXDw0>F1a}rk#G+E4a?G z*f7R0-)_Rj1jQqwE4x4JT9mlx{Ug(AZYb6a%Q%kXv6 zW)#Qnu6ybhZxVj~(CqCBM}A3fe}Ctx(k0P9+rH;)oEr80r~I0R4PiD<>RWbSQ4$vj zFKc`9!QPHP$)@tu|1}+L>kh=vwyi&S{{N?|tEd0@v;Mxpg$trh8s{d|oNi#dw^yIx z+A4WFB~ISHuyYSGK5pdex~4B}Z9cV%X-cWbip$zbi%tkGP7q08U|2oIV!A43Z!lg7ec#$`gxH8PfCeb5nJTlZ#SQ^NKU_OWrf@w_{*nVDNPHb6Mw< G&;$T9KHpXV literal 0 HcmV?d00001 diff --git a/gtk-4.0/widgets/_action-bars.scss b/gtk-4.0/widgets/_action-bars.scss new file mode 100644 index 0000000..c610c3d --- /dev/null +++ b/gtk-4.0/widgets/_action-bars.scss @@ -0,0 +1,27 @@ +/*************** +* Action bars * +***************/ + +.action-bar { + background-color: darken($bg_color, 10%); + border: solid $borders_color; + border-width: 1px 0 0 0; + color: $fg_color; + box-shadow: none; + + &:backdrop { + background-color: darken($backdrop_bg_color, 10%); + box-shadow: none; + -gtk-icon-effect: dim; + } + + &:first-child { + border-radius: 6px 6px 0px 0px; + border-width: 1px 1px 0px 1px; + } + + &:last-child { + border-radius: 0 0 6px 6px; + border-width: 0px 1px 1px 1px; + } +} diff --git a/gtk-4.0/widgets/_app-notifications.scss b/gtk-4.0/widgets/_app-notifications.scss new file mode 100644 index 0000000..fa46542 --- /dev/null +++ b/gtk-4.0/widgets/_app-notifications.scss @@ -0,0 +1,23 @@ +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + @extend %osd; + + padding: 10px; + border-radius: 0 0 5px 5px; + background-color: $osd_bg_color; + background-image: linear-gradient(to bottom, transparentize(black, 0.8), + transparent 2px); + background-clip: padding-box; + + &:backdrop { + background-image: none; + transition: $backdrop_transition; + } + + button { @extend %osd_button; } + + border { border: none; } +} diff --git a/gtk-4.0/widgets/_base-states.scss b/gtk-4.0/widgets/_base-states.scss new file mode 100644 index 0000000..d02076d --- /dev/null +++ b/gtk-4.0/widgets/_base-states.scss @@ -0,0 +1,178 @@ +/*************** + * Base States * + ***************/ +.background { + color: $fg_color; + background-color: $bg_color; + + &:backdrop { + color: $backdrop_fg_color; + background-color: $backdrop_bg_color; + text-shadow: none; + -gtk-icon-shadow: none; + } +} + +/* + 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 { + color: $fg_color; + background-color: $bg_color; + + &:hover { + color: $fg_color; + background-color: lighten($bg_color, 10%); + } + + &:active { + color: $fg_color; + background-color: darken($bg_color, 10%); + } + + &:disabled { + color: $insensitive_fg_color; + background-color: $insensitive_bg_color; + } + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + } +} + +.view, +%view { + color: $text_color; + background-color: $base_color; + + &:backdrop { + color: $backdrop_text_color; + background-color: $backdrop_base_color; + } + + &:selected { + &:focus, & { + @extend %selected_items; + + border-radius: 3px; + } + } +} + +.view, +textview { + text { + @extend %view; + + selection { &:focus, & { @extend %selected_items; }} + } +} + +textview border { background-color: mix($bg_color, $base_color, 50%); } + +iconview { @extend .view; } + +.rubberband, +rubberband { + border: 1px solid darken($selected_bg_color, 10%); + background-color: transparentize(darken($selected_bg_color, 10%), 0.8); +} + +flowbox { + rubberband { @extend rubberband; } + + flowboxchild { + padding: 3px; + border-radius: 3px; + + &:selected { + @extend %selected_items; + + outline-offset: -2px; + } + } +} + +label { + caret-color: currentColor; // this shouldn't be needed. + + &.separator { + @extend .dim-label; + + color: $fg_color; + + &:backdrop { color: $backdrop_fg_color; } + } + + row:selected &, + &:selected { @extend %nobg_selected_items; } + + selection { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + + selection { @extend %selected_items:disabled; } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &:backdrop { + color: $backdrop_fg_color; + + selection { @extend %selected_items:backdrop; } + } +} + +.dim-label { + opacity: 0.55; + text-shadow: none; +} + +assistant { + .sidebar { + background-color: $base_color; + border-top: 1px solid $borders_color; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + } + + &.csd .sidebar { border-top-style: none; } + + .sidebar label { padding: 6px 12px; } + + .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } +} + +%osd, .osd { + color: $osd_fg_color; + border: 1px solid #171e27; + background-color: $osd_bg_color; + background-clip: padding-box; + outline-color: transparentize($osd_fg_color, 0.7); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + + &:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; + } +} + +*:selected { + background: $selected_bg_color; + color: $selected_fg_color; +} \ No newline at end of file diff --git a/gtk-4.0/widgets/_buttons.scss b/gtk-4.0/widgets/_buttons.scss new file mode 100644 index 0000000..fc1a427 --- /dev/null +++ b/gtk-4.0/widgets/_buttons.scss @@ -0,0 +1,581 @@ +/*********** + * Buttons * + ***********/ +// stuff for .needs-attention +$_dot_color: if($variant=='light', $selected_bg_color, + lighten($selected_bg_color,15%)); +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.01, + to($_dot_color), + to(transparent)); + } + + to { + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($selected_bg_color), + to(transparent)); + } +} + +%button, +button { + @at-root %button_basic, & { + min-height: 20px; + min-width: 16px; + padding: 2px 6px; + border: 1px solid $borders_color; + border-radius: 4px; + transition: $button_transition; + + @include button(normal); + + &.flat { + @include button(undecorated); + // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set + // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but + // it won't fade out when the pointer leave the button allocation area. To make the transition more evident + // in this case the duration is increased. + transition: none; + + &:hover { + transition: $button_transition; + transition-duration: 500ms; + @include button(hover,$selected_bg_color,$selected_fg_color); + + &:active { transition: $button_transition; } + } + } + + &:hover { + @include button(hover,$selected_bg_color,$selected_fg_color); + -gtk-icon-effect: highlight; + } + + &:active, + &:checked { + @include button(active,darken($selected_bg_color,5%),$selected_fg_color); + + transition-duration: 50ms; + } + + &:backdrop { + &.flat, & { + @include button(backdrop); + + transition: $backdrop_transition; + -gtk-icon-effect: none; + + &:active, + &:checked { @include button(backdrop-active); } + + &:disabled { + @include button(backdrop-insensitive); + + &:active, + &:checked { @include button(backdrop-insensitive-active); } + } + } + } + + &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }} + + &:disabled { + @include button(insensitive); + + &:active, + &:checked { @include button(insensitive-active); } + } + + &.image-button { + min-width: 24px; + padding-left: 4px; + padding-right: 4px; + &.circular,&.sidebar-button{ + padding: 6px 4px; + border-radius: 50px; + box-shadow: none; + } + &.sidebar-button { + background-color: lighten($_sidebar_color, 7.77%); + color: #fff; + &:hover{ + background-color: $selected_bg_color; + } + } + } + + + &.text-button { + padding-left: 16px; + padding-right: 16px; + } + + &.text-button.image-button { + padding-left: 8px; + padding-right: 8px; + border-radius: 2px; + label { + padding-left: 8px; + padding-right: 8px; + } + } + + &:drop(active) { + color: $drop_target_color; + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + + @at-root %button_selected, & { + row:selected & { + @if $variant == 'light' { border-color: $selected_borders_color; } + + &.flat:not(:active):not(:checked):not(:hover):not(disabled) { + color: $selected_fg_color; + border-color: transparent; + + &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); } + } + } + } + + + // big standalone buttons like in Documents pager + &.osd { + min-width: 24px; + min-height: 20px; + + &.image-button { min-width: 32px; } + + color: $osd_fg_color; + border-radius: 5px; + outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? + + @include button(osd); + + border: none; + box-shadow: none; + + &:hover { + @include button(osd-hover); + + border: none; + box-shadow: none; + } + + &:active, + &:checked { + @include button(osd-active); + + border: none; + box-shadow: none; + } + + &:disabled { + &:backdrop, & { + @include button(osd-insensitive); + + border: none; + } + } + + &:backdrop { + @include button(osd-backdrop); + + border: none; + } + } + + //overlay / OSD style + @at-root %osd_button, + .osd & { + @include button(osd); + + &:hover { @include button(osd-hover); } + + &:active, + &:checked { &:backdrop, & { @include button(osd-active); }} + + &:disabled { &:backdrop, & { @include button(osd-insensitive); }} + + &:backdrop { @include button(osd-backdrop); } + + &.flat { + @include button(undecorated); + + box-shadow: none; //FIXME respect no edge on the button mixin + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + + &:hover { @include button(osd-hover); } + + &:disabled { + @include button(osd-insensitive); + background-image: none; + border-color: transparent; + box-shadow: none; + } + + &:backdrop { @include button(undecorated); } + + &:active, + &:checked { @include button(osd-active); } + } + } + + // Suggested and Destructive Action buttons + @each $b_type, $b_color in (suggested-action, $cyan), + (destructive-action, $destructive_color) { + &.#{$b_type} { + border: none; + + @if $b_type == suggested-action { + @include button(rounded, $b_color, white); + } @else { + @include button(rounded-red, $b_color, white); + } + + &.flat { + // @include button(undecorated); + @include button(rounded, $b_color, white); + //color: $b_color; //FIXME: does it work on the dark variant? + } + + &:hover { @include button(hover, $b_color, white); } + + &:active, + &:checked { @include button(active, $b_color, white); } + + &:backdrop, + &.flat:backdrop { + @include button(backdrop, $b_color, white); + label { color: transparentize(white, 0.5);} + &:active, + &:checked { @include button(backdrop-active, $b_color, white); } + + &:disabled { + @include button(backdrop-insensitive, $b_color, white); + label { color: transparentize(white, 0.5);} + + &:active, + &:checked { @include button(backdrop-insensitive-active, $b_color, white); } + } + } + + &.flat { + &:backdrop, &:disabled, &:backdrop:disabled { + @include button(undecorated); + + color: transparentize($b_color, 0.2); + } + } + + &:disabled { + @include button(insensitive, $b_color, white); + + &:active, + &:checked { @include button(insensitive-active, $b_color, white); } + } + + .osd & { + @include button(osd, $b_color); + + &:hover { @include button(osd-hover, $b_color); } + + &:active, + &:checked { &:backdrop, & { @include button(osd-active, $b_color); }} + + &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }} + + &:backdrop { @include button(osd-backdrop, $b_color); } + } + } + } + + .stack-switcher > & { + // to position the needs attention dot, padding is added to the button + // child, a label needs just lateral padding while an icon needs vertical + // padding added too. + + outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset + + > label { + padding-left: 6px; // label padding + padding-right: 6px; // + } + + > image { + padding-left: 6px; // image padding + padding-right: 6px; // + padding-top: 3px; // + padding-bottom: 3px; // + } + + &.text-button { + // compensate text-button paddings + padding-left: 10px; + padding-right: 10px; + } + + &.image-button { + // we want image buttons to have a 1:1 aspect ratio, so compensation + // of the padding added to the GtkImage is needed + padding-left: 2px; + padding-right: 2px; + } + + &.needs-attention { + > label, + > image { @extend %needs_attention; } + + &:active, + &:checked { + > label, + > image { + animation: none; + background-image: none; + } + } + } + } + + //inline-toolbar buttons + .inline-toolbar &, .inline-toolbar &:backdrop { + border-radius: 2px; + border-width: 1px; + @extend %linked; + } + + .primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows + -gtk-icon-shadow: none; + + &:hover, + &:focus { + @include button(hover,$selected_bg_color,$selected_fg_color); + } + + } + + .linked > &, + .linked > &:hover, + .linked > &:active, + .linked > &:checked, + .linked > &:backdrop { @extend %linked; } + + .linked.vertical > &, + .linked.vertical > &:hover, + .linked.vertical > &:active, + .linked.vertical > &:checked, + .linked.vertical > &:backdrop { @extend %linked_vertical; } +} + +%needs_attention { + animation: needs_attention 150ms ease-in; + $_dot_shadow: _text_shadow_color(); + $_dot_shadow_r: if($variant=='light',0.5,0.45); + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($_dot_color), + to(transparent)), + -gtk-gradient(radial, + center center, 0, + center center, $_dot_shadow_r, + to($_dot_shadow), + to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + + @if $variant == 'light' { background-position: right 3px, right 4px; } + + @else { background-position: right 3px, right 2px; } + + &:backdrop { background-size: 6px 6px, 0 0;} + + &:dir(rtl) { + @if $variant == 'light' { background-position: left 3px, left 4px; } + + @else { background-position: left 3px, left 2px; } + } +} + +toolbar { + button { + &:hover { @include button(normal,darken($bg_color,7%));} + &:active { @include button(normal,darken($bg_color,12%));} + } +} +// all the following is for the +|- buttons on inline toolbars, that way +// should really be deprecated... +.inline-toolbar toolbutton > button { // redefining the button look is + // needed since those are flat... + @include button(undecorated); + + &:hover { color: $selected_fg_color; } + + &:active, + &:checked{ color: darken($selected_bg_color, 5%); } + + &:disabled { + color: $backdrop_text_color; + + &:active, + &:checked { color: transparentize(darken($selected_bg_color, 5%),0.7); } + } + + &:backdrop { + color: $backdrop_text_color; + + &:active, + &:checked { color: darken($selected_bg_color, 5%); } + + &:disabled { + color: $backdrop_text_color; + + &:active, + &:checked { color: transparentize(darken($selected_bg_color, 5%),0.7); } + } + } +} + +// More inline toolbar buttons +toolbar.inline-toolbar toolbutton, +toolbar.inline-toolbar toolbutton:backdrop { + > button.flat { + &:backdrop { + border-color: transparent; + box-shadow: none; + } + } +} + +%linked_middle { + border: 1px solid $borders_color; + border-radius: 0; + border-right-style: none; + box-shadow: inset 0px 1px 0px 0px $top_highlight; +} + +%linked { + @extend %linked_middle; + + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + + &:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right-style: solid; + } + + &:only-child { + border-radius: 3px; + border-style: solid; + } +} + +%linked_vertical_middle { + border-style: solid solid none solid; + border-radius: 0; +} + +%linked_vertical{ + @extend %linked_vertical_middle; + + &:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + + &:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-style: solid; + } + + &:only-child { + border-radius: 3px; + border-style: solid; + } +} + +%undecorated_button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px transparentize(white,1), + 0 1px transparentize(white, 1); + text-shadow: none; + -gtk-icon-shadow: none; +} + +/* menu buttons */ +modelbutton.flat, +.menuitem.button.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; + + @extend %undecorated_button; + + &:hover { background-color: $popover_hover_color; } + + &:selected { @extend %selected_items; } + + &:backdrop, + &:backdrop:hover { @extend %undecorated_button; } + + // FIXME: remove the following when the checks/radios rewrite lands + check:last-child, + radio:last-child { margin-left: 8px; } + + check:first-child, + radio:first-child { margin-right: 8px; } +} + +modelbutton.flat arrow { + background: none; + + &:hover { background: none; } + + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + + &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +} + +button.color { + padding: 4px; + + colorswatch:only-child { + &, overlay { border-radius: 0; } + + @if $variant == 'light' { + box-shadow: none; + + &:disabled, + &:backdrop { box-shadow: none; } + } + } +} + +notebook, list, .view, popover { + button { + box-shadow: none; + &:backdrop { + box-shadow: none; + } + } + .linked > button { + box-shadow: none; + } +} diff --git a/gtk-4.0/widgets/_calendar.scss b/gtk-4.0/widgets/_calendar.scss new file mode 100644 index 0000000..1fa0c8c --- /dev/null +++ b/gtk-4.0/widgets/_calendar.scss @@ -0,0 +1,59 @@ +/************ + * Calendar * + ***********/ +calendar { + color: $text_color; + border: 1px solid $borders_color; + + &:selected { + @extend %selected_items; + + border-radius: 3px; + } + + &.header { + border-bottom: 1px solid transparentize(black, 0.9); + border-radius: 0; + + &:backdrop { border-color: transparentize(black, 0.9); } + } + + &.button { + @extend %undecorated_button; + + color: transparentize($fg_color, 0.55); + + &:hover { + @extend %undecorated_button; + + color: $fg_color; + } + + &:backdrop { + @extend %undecorated_button; + + color: transparentize($backdrop_fg_color,0.55); + } + + &:disabled { + @extend %undecorated_button; + + color: transparentize($insensitive_fg_color,0.55); + } + } + + &:indeterminate, + &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); } + + &.highlight, + &.highlight:backdrop { + font-size: smaller; + color: $fg_color; + } + + + &:backdrop { + color: $backdrop_text_color; + border-color: $backdrop_borders_color; + } +} diff --git a/gtk-4.0/widgets/_checks-radios.scss b/gtk-4.0/widgets/_checks-radios.scss new file mode 100644 index 0000000..242fdaf --- /dev/null +++ b/gtk-4.0/widgets/_checks-radios.scss @@ -0,0 +1,165 @@ +/************************* + * Check and Radio Items * + *************************/ +// draw regular check and radio items using our PNG assets +// all assets are rendered from assets.svg. never add pngs directly + + +// unchecked +@each $s,$un in ('','-unchecked'), + (':hover', '-unchecked-hover'), + (':active', '-unchecked-active'), + (':backdrop', '-unchecked-backdrop'), + (':disabled', '-unchecked-insensitive'), + (':disabled:backdrop', '-unchecked-insensitive') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}-dark.png"),url("../assets/radio#{$un}@2.png"))); + -gtk-icon-shadow: none; + } +} + +// checked +@each $s,$ch in (':checked', '-checked'), + (':checked:hover', '-checked-hover'), + (':checked:active', '-checked-active'), + (':checked:backdrop', '-checked-backdrop'), + (':checked:disabled', '-checked-insensitive'), + (':checked:disabled:backdrop', '-checked-insensitive') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}-dark.png"),url("../assets/radio#{$ch}@2.png"))); + -gtk-icon-shadow: none; + } +} + +// mixed +@each $s,$mx in (':indeterminate', '-mixed'), + (':indeterminate:hover', '-mixed-hover'), + (':indeterminate:active', '-mixed-active'), + (':indeterminate:backdrop', '-mixed-backdrop'), + (':indeterminate:disabled', '-mixed-insensitive'), + (':indeterminate:disabled:backdrop', '-mixed-insensitive') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png"))); + -gtk-icon-shadow: none; + } +} + +// unchecked:selected +@each $s,$un in (':selected','-unchecked'), + (':hover:selected', '-unchecked'), + (':active:selected', '-unchecked'), + (':backdrop:selected', '-unchecked'), + (':disabled:selected', '-unchecked'), + (':disabled:backdrop:selected', '-unchecked') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}-dark.png"),url("../assets/selected-radio#{$un}@2.png"))); + -gtk-icon-shadow: none; + } +} + +// checked:selected +@each $s,$ch in (':checked:selected', '-checked'), + (':checked:hover:selected', '-checked'), + (':checked:active:selected', '-checked'), + (':checked:backdrop:selected', '-checked'), + (':checked:disabled:selected', '-checked'), + (':checked:disabled:backdrop:selected', '-checked') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}-dark.png"),url("../assets/selected-radio#{$ch}@2.png"))); + -gtk-icon-shadow: none; + } +} + + +// mixed:selected +@each $s,$mx in (':indeterminate:selected', '-mixed'), + (':indeterminate:hover:selected', '-mixed'), + (':indeterminate:active:selected', '-mixed'), + (':indeterminate:backdrop:selected', '-mixed'), + (':indeterminate:disabled:selected', '-mixed'), + (':indeterminate:disabled:backdrop:selected', '-mixed') { + check#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png"))); + -gtk-icon-shadow: none; + } + radio#{$s}{ + -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png"))); + -gtk-icon-shadow: none; + } +} + + +// selection-mode unchecked +@each $s,$un in ('','-unchecked'), + (':hover', '-unchecked-hover'), + (':active', '-unchecked-active'), + (':backdrop', '-unchecked-backdrop'), + (':disabled', '-unchecked-insensitive'), + (':disabled:backdrop', '-unchecked-backdrop-insensitive') { + .view.content-view check#{$s}, + .view.content-view.check#{$s}{ + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")); + -gtk-icon-shadow: none; + } + .view.content-view radio#{$s}, + .view.content-view.radio#{$s}{ + -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png")); + -gtk-icon-shadow: none; + } +} + +checkbutton.text-button, radiobutton.text-button { + // this is for a nice focus on check and radios text + padding: 2px 0; + outline-offset: 0; + + label:not(:only-child) { + &:first-child { margin-left: 4px; } + &:last-child { margin-right: 4px; } + } +} + +check, +radio { + margin: 0 4px; + + min-height: 16px; + min-width: 16px; + border: none; + + menu menuitem & { + margin: 0; // this is a workaround for a menu check/radio size allocation issue + + &, &:hover, &:disabled { //FIXME use button reset mixin + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; + } + } +} diff --git a/gtk-4.0/widgets/_color-chooser.scss b/gtk-4.0/widgets/_color-chooser.scss new file mode 100644 index 0000000..3502a55 --- /dev/null +++ b/gtk-4.0/widgets/_color-chooser.scss @@ -0,0 +1,139 @@ +/***************** + * Color Chooser * + *****************/ +colorswatch { + // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one + // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is + // applied to the overlay box. + + &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state + + $_colorswatch_radius: 5px; + $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3), + inset 0 3px 2px -2px transparentize(black, 0.5)); + + // base color corners rounding + // to avoid the artifacts caused by rounded corner anti-aliasing the base color + // sports a bigger radius. + // nth-child is needed by the custom color strip. + + &.top { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-top-right-radius: $_colorswatch_radius + 0.5px; + + overlay { + border-top-left-radius: $_colorswatch_radius; + border-top-right-radius: $_colorswatch_radius; + } + } + + &.bottom { + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + + overlay { + border-bottom-left-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.left, + &:first-child:not(.top) { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + + overlay { + border-top-left-radius: $_colorswatch_radius; + border-bottom-left-radius: $_colorswatch_radius; + } + } + + &.right, + &:last-child:not(.bottom) { + border-top-right-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + + overlay { + border-top-right-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.dark overlay { + color: $selected_fg_color; + + &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } + + &:backdrop { color: $backdrop_selected_fg_color; } + } + + &.light overlay { + color: $text_color; + + &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } + + &:backdrop { color: $backdrop_text_color; } + } + + &:drop(active) { + box-shadow: none; + + &.light overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + + &.dark overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + } + + overlay { + box-shadow: $_colorswatch_overlay_shadow; + border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); + + &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); } + + &:backdrop, &:backdrop:hover { + border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); + box-shadow: none; + } + } + + &#add-color-button { + border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; + + &:only-child { border-radius: $_colorswatch_radius; } + + overlay { + @include button(normal); + + &:hover { @include button(hover); } + + &:backdrop { @include button(backdrop); } + } + } + + &:disabled { + opacity: 0.5; + + overlay { + border-color: transparentize(black, 0.4); + box-shadow: none; + } + } + + row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } + + &#editor-color-sample { + border-radius: 4px; + + overlay { border-radius: 4.5px; } + } +} + +// colorscale popup +colorchooser .popover.osd { border-radius: 5px; } diff --git a/gtk-4.0/widgets/_comboboxes.scss b/gtk-4.0/widgets/_comboboxes.scss new file mode 100644 index 0000000..3424c6d --- /dev/null +++ b/gtk-4.0/widgets/_comboboxes.scss @@ -0,0 +1,41 @@ +/************** + * ComboBoxes * + **************/ +combobox { + arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + min-height: 16px; + min-width: 16px; + } + + &.linked { + button:nth-child(2) { + &:dir(ltr) { @extend %linked:last-child; } + &:dir(rtl) { @extend %linked:first-child; } + } + } + + &:drop(active) { // FIXME: untested + box-shadow: none; + + button.combo { @extend %button_basic:drop(active); } + } +} + +.linked > combobox > box > button.combo { + // the combo is a composite widget so the way we do button linking doesn't + // work, special case needed. See + // https://bugzilla.gnome.org/show_bug.cgi?id=733979 + + &:dir(ltr), + &:dir(rtl) { @extend %linked_middle; } // specificity bump +} + +.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } +.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } +.linked:not(.vertical) > combobox:only-child > box > button.combo {@extend %linked:only-child; } + +.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } +.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} +.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } +.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } diff --git a/gtk-4.0/widgets/_dialogs.scss b/gtk-4.0/widgets/_dialogs.scss new file mode 100644 index 0000000..7989722 --- /dev/null +++ b/gtk-4.0/widgets/_dialogs.scss @@ -0,0 +1,70 @@ +/*********** + * Dialogs * + ***********/ +messagedialog { // Message Dialog styling + .titlebar:not(headerbar) { + background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); + } + .titlebar { + min-height: 20px; + background-image: none; + background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); + border-style: none; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + &.csd { // rounded bottom border styling for csd version + &.background { + background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); + color: if($variant=='light', $headerbar_fg_color, $fg_color); + + // bigger radius for better antialiasing + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + + .dialog-action-area button { + padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround + border-radius: 0; + border-left-style: solid; + border-right-style: none; + border-bottom-style: none; + background-color: transparent; + color: if($variant=='light', $headerbar_fg_color, $fg_color); + box-shadow: none; + + &:hover { + background-color: transparentize($selected_bg_color, 0.1); + color: white; + } + + &:first-child{ + border-left-style: none; + border-bottom-left-radius: 4px; + } + + &:last-child { + border-bottom-right-radius: 4px; + } + &.destructive-action, &.suggested-action{ + color:white; + } + } + } +} + +filechooser { + .dialog-action-box { + border-top: 1px solid $borders_color; + + &:backdrop { border-top-color: $backdrop_borders_color; } + } + + #pathbarbox { border-bottom: 1px solid $bg_color; } +} + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; +} diff --git a/gtk-4.0/widgets/_entries.scss b/gtk-4.0/widgets/_entries.scss new file mode 100644 index 0000000..f30c017 --- /dev/null +++ b/gtk-4.0/widgets/_entries.scss @@ -0,0 +1,181 @@ +/**************** + * Text Entries * + ****************/ + +%entry, +entry { + %entry_basic, & { + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; + border-radius: 3px; + 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; } + } + + undershoot { + &.left { @include undershoot(left); } + &.right { @include undershoot(right); } + } + + &.flat { + &:focus, & { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + box-shadow: none; + border-radius: 0; + } + } + + &:focus { @include entry(focus); } + + &:disabled { @include entry(insensitive); } + + &:backdrop { + @include entry(backdrop); + + transition: $backdrop_transition; + } + + &:backdrop:disabled { @include entry(backdrop-insensitive); } + + selection { &:focus, & { @extend %selected_items; }} + + // entry error and warning style + @each $e_type, $e_color in (error, $error_color), + (warning, $warning_color) { + &.#{$e_type} { + @include entry(normal); + color: $e_color; + border-color: entry_focus_border($e_color); + + &:focus { @include entry(focus, $e_color); } + + &:selected { &:focus, & { background-color: $e_color; }} + } + } + + & image { // entry icons colors + color: mix($fg_color, $base_color, 80%); + + &:hover { color: $fg_color; } + + &:active { color: $selected_bg_color; } + + &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } + } + + &:drop(active) { + &:focus, & { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + + .osd & { + @include entry(osd); + + &:focus { @include entry(osd-focus); } + + &:backdrop { @include entry(osd-backdrop); } + + &:disabled { @include entry(osd-insensitive); } + } + } + + progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: $selected_bg_color; + border-style: solid; + box-shadow: none; + + &:backdrop { background-color: transparent; } + } + + // linked entries + .linked:not(.vertical) > & { @extend %linked; } + .linked:not(.vertical) > &:focus + &, + .linked:not(.vertical) > &:focus + button, + .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } + + .linked:not(.vertical) > &:focus { border-color: entry_focus_border(); } + + .linked:not(.vertical) > &:drop(active) + &, + .linked:not(.vertical) > &:drop(active) + button, + .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } + + // Vertically linked entries + // FIXME: take care of "colored" entries + .linked.vertical > & { + @extend %linked_vertical; + + // brighter border between linked entries + &:not(:disabled) + entry:not(:disabled), + &:not(:disabled) + %entry:not(:disabled) { + border-top-color: mix($borders_color, $base_color, 30%); + background-image: linear-gradient(to bottom, $base_color, $base_color); + + &:backdrop { + border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); + background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color); + } + } + + // brighter border between linked insensitive entries + &:disabled + %entry:disabled, + &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } + + // color back the top border of a linked focused entry following another entry and add back the focus shadow. + // :not(:only-child) is a specificity bump hack. + + %entry:focus:not(:only-child), + + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } + + + %entry:drop(active):not(:only-child), + + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } + + // this takes care of coloring the top border of the focused entry subsequent widget. + // :not(:only-child) is a specificity bump hack. + &:focus:not(:only-child) { + + %entry, + + entry, + + button, + + combobox > box > button.combo { border-top-color: entry_focus_border(); } + } + + &:drop(active):not(:only-child) { + + %entry, + + entry, + + button, + + combobox > box > button.combo { border-top-color: $drop_target_color; } + } + } +} + +treeview entry { + &:focus { + &:dir(rtl), &:dir(ltr) { // specificity bump hack + background-color: $base_color; + transition-property: color, background; + } + } + + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus { border-color: $selected_bg_color; } + } +} diff --git a/gtk-4.0/widgets/_expanders.scss b/gtk-4.0/widgets/_expanders.scss new file mode 100644 index 0000000..47b4448 --- /dev/null +++ b/gtk-4.0/widgets/_expanders.scss @@ -0,0 +1,16 @@ +/************* + * Expanders * + *************/ +expander { + arrow { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + &:hover { color: lighten($fg_color,30%); } //only lightens the arrow + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + } +} diff --git a/gtk-4.0/widgets/_file-chooser.scss b/gtk-4.0/widgets/_file-chooser.scss new file mode 100644 index 0000000..2f7d146 --- /dev/null +++ b/gtk-4.0/widgets/_file-chooser.scss @@ -0,0 +1,102 @@ +/**************** + * File chooser * + ****************/ +$_placesidebar_icons_opacity: 0.7; + +placessidebar { + > viewport.frame { border-style: none; } + + row { + // Needs overriding of the GtkListBoxRow padding + min-height: 36px; + padding: 0px; + + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + > revealer { padding: 0 14px; } + + &:selected { color: $selected_fg_color; } + + &:disabled { color: $insensitive_fg_color; } + + &:backdrop { + color: $backdrop_fg_color; + + &:selected { color: $backdrop_selected_fg_color; } + + &:disabled { color: $backdrop_insensitive_color; } + } + + image.sidebar-icon { + opacity: $_placesidebar_icons_opacity; // dim the device icons + + &:dir(ltr) { padding-right: 8px; } + &:dir(rtl) { padding-left: 8px; } + } + + label.sidebar-label { + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } + } + + @at-root button.sidebar-button { + @extend %button_basic.flat; + + @extend %button_selected.flat; + + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; + border-radius: 100%; + -gtk-outline-radius: 100%; + + &:not(:hover):not(:active), + &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }} + } + + // in the sidebar case it makes no sense to click the selected row + &:selected:active { box-shadow: none; } + + &.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image($drop_target_color); + background-clip: content-box; + } + + &.sidebar-new-bookmark-row { color: $selected_bg_color; } + + &:drop(active):not(:disabled) { + color: $drop_target_color; + box-shadow: inset 0 1px $drop_target_color, + inset 0 -1px $drop_target_color; + + &:selected { + color: $selected_fg_color; + background-color: $drop_target_color; + } + } + } +} + +placesview { + .server-list-button > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } + + row.activatable:hover { background-color: transparent; } + + // this selects the "connect to server" label + > actionbar > revealer > box > label { + padding-left: 8px; + padding-right: 8px; + } +} diff --git a/gtk-4.0/widgets/_floating-bar.scss b/gtk-4.0/widgets/_floating-bar.scss new file mode 100644 index 0000000..e9a2465 --- /dev/null +++ b/gtk-4.0/widgets/_floating-bar.scss @@ -0,0 +1,33 @@ +/**************** + * Floating Bar * + ****************/ +.floating-bar { + background-color: $bg_color; + border-width: 1px; + border-style: solid solid none; + border-color: $borders_color; + border-radius: 3px 3px 0 0; + box-shadow: inset 0 1px $top_highlight; + + &.bottom { + + &.left { + border-left-style: none; + border-top-left-radius: 0; + } + + &.right { + border-right-style: none; + border-top-right-radius: 0; + } + } + + > button { + padding:4px; + } + + &:backdrop { + background-color: $backdrop_bg_color; + border-color: $backdrop_borders_color; + } +} diff --git a/gtk-4.0/widgets/_frames.scss b/gtk-4.0/widgets/_frames.scss new file mode 100644 index 0000000..d85b832 --- /dev/null +++ b/gtk-4.0/widgets/_frames.scss @@ -0,0 +1,87 @@ +/********** + * Frames * + **********/ +frame > border, +.frame { + box-shadow: none; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid $borders_color; + + &.flat { border-style: none; } + + &:backdrop { border-color: $backdrop_borders_color; } +} + +actionbar > revealer > box { + padding: 6px; + border-top: 1px solid $borders_color; + + &:backdrop { border-color: $backdrop_borders_color; } +} + +scrolledwindow { + viewport.frame { // avoid double borders when viewport inside scrolled window + border-style: none; + } + + // This is used when content is touch-dragged past boundaries. + // draws a box on top of the content, the size changes programmatically. + overshoot { + &.top { + @include overshoot(top); + + &:backdrop { @include overshoot(top, backdrop); } + } + + &.bottom { + @include overshoot(bottom); + + &:backdrop { @include overshoot(bottom, backdrop); } + } + + &.left { + @include overshoot(left); + + &:backdrop { @include overshoot(left, backdrop); } + } + + &.right { + @include overshoot(right); + + &:backdrop { @include overshoot(right, backdrop); } + } + } + + // Overflow indication, works similarly to the overshoot, the size if fixed tho. + undershoot { + &.top { @include undershoot(top); } + + &.bottom { @include undershoot(bottom); } + + &.left { @include undershoot(left); } + + &.right { @include undershoot(right); } + } + + junction { // the small square between two scrollbars + border-color: transparent; + // the border image is used to add the missing dot between the borders, details, details, details... + border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; + background-color: $scrollbar_bg_color; + + &:dir(rtl) { border-image-slice: 0 1 0 0; } + + &:backdrop { + border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); + background-color: $backdrop_scrollbar_bg_color; + transition: $backdrop_transition; + } + } +} + +//vbox and hbox separators +separator { + background: transparentize(black, 0.9); +} diff --git a/gtk-4.0/widgets/_granite.scss b/gtk-4.0/widgets/_granite.scss new file mode 100644 index 0000000..3e49050 --- /dev/null +++ b/gtk-4.0/widgets/_granite.scss @@ -0,0 +1,206 @@ +/************ + * Popovers * + ************/ + +GraniteWidgetsPopOver { + + -GraniteWidgetsPopOver-arrow-width: 21; + -GraniteWidgetsPopOver-arrow-height: 10; + -GraniteWidgetsPopOver-border-radius: 8px; + -GraniteWidgetsPopOver-border-width: 0; + -GraniteWidgetsPopOver-shadow-size: 12; + + border: 1px solid $base_color; + background: $base_color; + color: $fg_color; + + .button { + background-image: none; + background: none; + border: none; + + &:active, + &:active:hover, { + color: $selected_bg_color; + } + } + + > .frame { + border:none; + } + + .sidebar.view { + border: none; + background: none; + } +} + +GraniteWidgetsStaticNotebook .frame { + border: none; +} + +.popover_bg { + background-color: $base_color; + background-image: none; + border: 1px solid $base_color; + color: $fg_color; +} + + +/*********** + * Welcome * + **********/ + +GraniteWidgetsWelcome { + background-color: $base_color; + + GtkLabel { + color: $fg_color; + } + + .h1,.h3 { + color: transparentize($fg_color, 0.2); + } +} + +/************** +* Source List * +***************/ + +.source-list { + -GtkTreeView-horizontal-separator: 1px; + -GtkTreeView-vertical-separator: 6px; + + background-color: $bg_color; + border: solid $borders_color; + color: $fg_color; + border-right-width: 1px; + + &:backdrop {} + + .category-expander { + color: transparent; + } + + .badge { + background-image: none; + background-color: transparentize(black, 0.6); + color: $bg_color; + border-radius: 10px; + padding: 0 6px; + margin: 0 3px; + border-width: 0; + + &:selected:backdrop, + &:selected:hover:backdrop { + background-color: transparentize(black, 0.8); + color: darken($bg_color, 5%); + } + } + + row, + .list-row { + border:none; + padding: 0; + + > GtkLabel, + > label { + padding-left: 6px; + padding-right: 6px; + } + } +} + + +/************** +* Text Styles * +**************/ + +.h1 { + font-size: 24px; +} + +.h2 { + font-weight: 300; + font-size: 18px; +} + +.h3 { + font-size: 11px; +} + +.h4, +.category-label { + font-size: 12px; + padding: 6px; + color: transparentize($fg_color, 0.7); + font-weight: bold; + text-shadow: 0 1px transparentize(white,0.8); +} + + +/************** +* Storage Bar * +**************/ +.storage-bar { + + .trough { + border: none; + box-shadow:0 1px 0 0 $bottom_highlight; + background-image: none; + background-color: transparent; + padding: 8px 6px; + } + + .fill-block { + background-color: $yellow; + border:none; + box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); + + transition: all 200ms ease-in-out; + + padding: 8px 6px; + + &:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-left-width: 1px; + box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), + inset 1px 0 0 transparentize(black, 0.9), + inset 0 -1px 0 0 transparentize(black, 0.9); + } + + &:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), + inset -1px 0 0 transparentize(black, 0.9), + inset 0 -1px 0 0 transparentize(black, 0.9); + } + + &.empty-block { + background-color: $base_color; + } + + &.app { + background-color: $blue; + } + + &.audio { + background-color: $orange; + } + + &.photo { + background-color: $red; + } + + &.video { + background-color: $purple; + } + + .legend { + padding: 12px; + border-radius: 4px; + } + } +} \ No newline at end of file diff --git a/gtk-4.0/widgets/_header-bars.scss b/gtk-4.0/widgets/_header-bars.scss new file mode 100644 index 0000000..5ab0c6a --- /dev/null +++ b/gtk-4.0/widgets/_header-bars.scss @@ -0,0 +1,283 @@ +/*************** + * Header bars * + ***************/ +%titlebar, +headerbar { + padding: 0px 13px; + min-height: 34px; + background: $headerbar_color; + color: $headerbar_fg_color; + border-radius: 0; + &:backdrop { + border-color: $backdrop_borders_color; + // background-image: none; + + transition: $backdrop_transition; + } + + .title { + font-weight: bold; + padding-left: 12px; + padding-right: 12px; + } + + .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; + + @extend .dim-label; + } + + entry { min-height: 24px;} + + button { + @include button(normal-header); + min-height: 14px; + margin-top: 5px; + margin-bottom: 5px; + box-shadow: none; + &.image-button{ + padding: 3px 4px; + } + &.suggested-action{ + box-shadow: none; + border: none; + background-image: $suggested_bg_color; + &:disabled, &:disabled:backdrop, &:backdrop { + border: none; + background-image: $suggested_bg_color; + &:hover, + &:active, + &:checked { + border: none; + background-image: $suggested_bg_color; + } + } + + } + + &.appmenu{ + background: transparent; + &:backdrop{background: transparent;} + } + &:hover, + &:active, + &:checked { + background-color: transparent; + color: $selected_bg_color; + box-shadow: none; + border: none; + //@include button(hover-header); + } + + &:backdrop, + &:disabled, + &:backdrop:disabled { + @include button(backdrop-header,red,transparentize($fg_color,0.8)); + border: none; + } + + &:backdrop { + &:hover, + &:active, + &:checked { + background-color: transparent; + color: $selected_bg_color; + label {color: $selected_bg_color;} + box-shadow: none; + } + } + + @each $b_type, $b_color in (suggested-action, $cyan), + (destructive-action, $destructive_color) { + &.#{$b_type} { + font-weight: bold; + min-height: 24px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 4px; + @include button(normal, $b_color, white); + box-shadow: none; + + &:hover { @include button(hover, $b_color, white); } + + &:active { @include button(active, $b_color, white); } + + &:disabled { + @include button(insensitive, $b_color, white); + label {color: transparentize(white,0.5);} + } + + &:backdrop { + @include button(backdrop, $b_color, white); + border-radius: 3px; + } + + &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); } + + } + } + + //Reset style + &.titlebutton { + color: transparent; + box-shadow: none; + border: none; + background-color: transparent; + background-image: none; + background-repeat: no-repeat; + &:hover, + &:active, + &:checked, + &:backdrop, + &:backdrop:hover,* { + color: transparent; + box-shadow: none; + background-color: transparent; + } + } + } + %linked-header { + border-radius: 23px; + border-right-style: none; + border: none; + box-shadow: none; + margin: 10px 0px; + min-height: 20px; + &:first-child { + } + + &:last-child { + } + + &:only-child { + border-radius: 13px; + border-style: none; + } + transition: all .1s ease-in; + } + .linked > button { + @extend %linked-header; + } + .linked > button:active{ + @extend %linked-header; + background: linear-gradient(to right, #c50ed2, #8500f7) ; + color: rgb(255, 250, 250); + } + .linked > button:checked{ + @extend %linked-header; + border-radius: 23px; + background: linear-gradient(to right, #c50ed2, #8500f7); + box-shadow: 0px 0px 5px transparentize(#c50ed2, 0.02); + color: rgb(255, 250, 250); + &:backdrop{ + color: darken(rgb(255, 250, 250), 4%); + label{ + color: darken(rgb(255, 250, 250), 4%);; + } + } + } + .linked > button:hover, + .linked > button:backdrop { + @extend %linked-header; + } + // End reset style + + &.selection-mode { + button { + + &:backdrop { + &.flat, & { + &:active, + &:checked { + //@include button(backdrop-active, $selected_bg_color, $selected_fg_color); + label{ + color:$backdrop_selected_bg_color; + } + border-color: $selected_borders_color; + } + } + } + } + + } + + .tiled &, + .maximized & { + &.titlebar { + @if $variant == 'light' { box-shadow: none; } + @else { box-shadow: inset 0 -1px $bottom_highlight; } + } + &:backdrop, & { border-radius: 0; } + } // squared corners when the window is maximized or tiled + + &.default-decoration { + padding: 5px 4px; + min-height: 20px; + + button.titlebutton { + min-height: 20px; + min-width: 20px; + margin: 0; + padding: 0; + } + } +} + +headerbar { + // add vertical margins to common widget on the headerbar to avoid them spanning the whole height + entry, + spinbutton, + separator { + margin-top: 5px; + margin-bottom: 5px; + } + switch { + margin-top: 10px; + margin-bottom: 10px; + } + separator { background: transparent; } +} + +.background:not(.tiled):not(.maximized) .titlebar { + @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; } + @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; } + + + &:backdrop, & { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } +} + +headerbar { + window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case + window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }} + + window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }} +} + +.titlebar:not(headerbar) { + window.csd > & { + // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; + } + + > separator { + &, &:backdrop { + background: $headerbar_color; + } + } + + @extend %titlebar; +} + +.titlebar{ + @extend %titlebar; +} \ No newline at end of file diff --git a/gtk-4.0/widgets/_infobars.scss b/gtk-4.0/widgets/_infobars.scss new file mode 100644 index 0000000..1193ea6 --- /dev/null +++ b/gtk-4.0/widgets/_infobars.scss @@ -0,0 +1,119 @@ +/************** + * GtkInfoBar * + **************/ +%infobar, +infobar { + text-shadow: none; + color: $fg_color; + background-color: $bg_color; + border-bottom:1px solid darken($bg_color,10%); + box-shadow: 0 1px 0 0 transparentize(black, 0.95), + 0 1px 2px 0 transparentize(black, 0.85); + +} + +%color_infobar { + + @extend %infobar; + + text-shadow: none; + color: $selected_fg_color; + border:none; + + .label { + color: $selected_fg_color; + + &:backdrop { + color: $backdrop_selected_fg_color; + } + } + + button { + border-radius: 2px; + border: none; + background: transparentize($base_color, 0.02); + color: $fg_color; + box-shadow: 0 1px 0 0 transparentize(black, 0.8); + + .label { + color: $fg_color; + } + + &:active { + background: $base_color; + color: $fg_color; + + box-shadow: 0 1px 2px 0 transparentize(black, 0.6); + + &:backdrop { + background: transparentize($base_color, 0.2); + color: transparentize($fg_color, 0.5); + box-shadow: none; + } + } + + &:hover, + &:focus { + box-shadow: 0 1px 2px 0 transparentize(black, 0.6); + } + + &:disabled { + background: transparentize($base_color, 0.4); + color: transparentize($fg_color, 0.5); + box-shadow: none; + + &:backdrop { + background: transparentize($base_color, 0.5); + color: transparentize($fg_color, 0.5); + box-shadow: none; + } + } + + &:backdrop { + background: transparentize($base_color, 0.2); + color: transparentize($fg_color, 0.5); + box-shadow: none; + } + } +} + +.info { + @extend %color_infobar; + background-color: $info_color; + + &:backdrop { + background-color:lighten($info_color,10%); + color: $backdrop_selected_fg_color; + } +} + +.warning { + @extend %color_infobar; + background-color: $warning_color; + + &:backdrop { + background-color:lighten($warning_color,10%); + color: $backdrop_selected_fg_color; + } +} + +.question { + @extend %color_infobar; + background-color: $question_color; + + &:backdrop { + background-color:lighten($question_color,10%); + color: $backdrop_selected_fg_color; + } + +} + +.error { + @extend %color_infobar; + background-color: $error_color; + + &:backdrop { + background-color:lighten($error_color,10%); + color: $backdrop_selected_fg_color; + } +} diff --git a/gtk-4.0/widgets/_level-bars.scss b/gtk-4.0/widgets/_level-bars.scss new file mode 100644 index 0000000..9aa645c --- /dev/null +++ b/gtk-4.0/widgets/_level-bars.scss @@ -0,0 +1,62 @@ +/************* + * Level Bar * + *************/ +levelbar { + block { + min-width: 32px; + min-height: 6px; + } + + &.vertical block { + min-width: 6px; + min-height: 32px; + } + + &:backdrop { transition: $backdrop_transition; } + + trough { + padding: 3px; + border-radius: 3px; + background-color: if($variant == 'light' ,transparentize(white,0.2),transparentize(white,0.8)); + box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1); + + &:backdrop { + background-color: if($variant == 'light' ,transparentize(white,0.4),transparentize(white,0.94)); + box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1); + } + } + + &.horizontal.discrete block { margin: 0 1px; } + + &.vertical.discrete block { margin: 1px 0; } + + block { + border-radius: 2px; + + &:backdrop { box-shadow: none; } + + &.low { + background-color: $warning_color; + + &:backdrop { border-color: $warning_color; }; + } + + &.high, + &:not(.empty) { + background-color: $cyan; + + &:backdrop { border-color: $cyan; } + } + + &.full { + background-color: $success_color; + + &:backdrop { border-color: $success_color; }; + } + + &.empty { + background-color: if($variant == 'light' ,transparentize(black, 0.86),transparentize(black,0.65)); + box-shadow: none; + } + } +} diff --git a/gtk-4.0/widgets/_links.scss b/gtk-4.0/widgets/_links.scss new file mode 100644 index 0000000..db6d1e8 --- /dev/null +++ b/gtk-4.0/widgets/_links.scss @@ -0,0 +1,49 @@ +/********* + * Links * + *********/ +*:link { + color: $link_color; + + &:visited { + color: $link_visited_color; + + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } + } + + &:hover { + color: lighten($link_color,10%); + + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } + } + + &:active { + color: $link_color; + + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } + } + + &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }} + + @at-root %link_selected, + &:selected, + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } +} + +button:link, +button:visited { + @extend %undecorated_button; + + @extend *:link; + + text-shadow: none; + + &:hover, + &:active, + &:checked { + @extend %undecorated_button; + + text-shadow: none; + } + + > label { text-decoration-line: underline; } +} diff --git a/gtk-4.0/widgets/_lists.scss b/gtk-4.0/widgets/_lists.scss new file mode 100644 index 0000000..ad06b45 --- /dev/null +++ b/gtk-4.0/widgets/_lists.scss @@ -0,0 +1,51 @@ +/********* + * Lists * + *********/ +list { + color: $text_color; + background-color: $base_color; + border-color: $borders_color; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } +} + +row { + padding: 5px 11px; + transition: all 150ms $ease-out-quad; + + label { + padding-left: 8px; + } + + &:hover { transition: none; } + + &:backdrop { transition: $backdrop_transition; } + + &.activatable { + &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 + + &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); } + + &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } + + &:backdrop:hover { background-color: transparent; } + + &:selected { + &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } + + &.has-open-popup, + &:hover { background-color: transparentize($selected_bg_color, 0.5); } + + &:backdrop { background-color: $backdrop_selected_bg_color; } + } + + button.flat{ + background-color: transparent; + } + } + + &:selected { @extend %selected_items; } +} diff --git a/gtk-4.0/widgets/_menus.scss b/gtk-4.0/widgets/_menus.scss new file mode 100644 index 0000000..e7a8e9c --- /dev/null +++ b/gtk-4.0/widgets/_menus.scss @@ -0,0 +1,133 @@ +/********* + * Menus * + *********/ +menubar, +.menubar { + background-color: $headerbar_color; + color: $headerbar_fg_color; + -GtkWidget-window-dragging: true; + padding: 0px; + box-shadow: inset 0 -1px transparentize(black, 0.9); + + > menuitem { + min-height: 16px; + padding: 4px 8px; + + &:hover { //Seems like it :hover even with keyboard focus + box-shadow: inset 0 -3px $selected_bg_color; + } + + &:disabled { + color: $insensitive_fg_color; + box-shadow: none; + } + } +} + +menu, +.menu, +.context-menu { + font: initial; + margin: 4px; + padding: 2px 0px; + background: if( $variant == 'light', linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%))); + border: 1px solid $borders_color; // adds borders in a non composited env + border-radius: 5px; + + .csd & { border: none; } // axes borders in a composited env + + &:backdrop { background-color: $backdrop_menu_color; } + + menuitem { + min-height: 17px; + min-width: 40px; + padding: 4px 6px; + text-shadow: none; + + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + + &:disabled { + color: $insensitive_fg_color; + &:backdrop { color: $backdrop_insensitive_color; } + } + + &:backdrop, + &:backdrop:hover { + color: $backdrop_fg_color; + background-color: transparent; + } + + // submenu indicators + arrow { + min-height: 16px; + min-width: 16px; + + &:dir(ltr) { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + margin-left: 10px; + } + + &:dir(rtl) { + -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); + margin-right: 10px; + } + } + + // avoids labels color being overridden, see + // https://bugzilla.gnome.org/show_bug.cgi?id=767058 + label { &:dir(rtl), &:dir(ltr) { color: inherit; }} + } + + // overflow arrows + > arrow { + @include button(undecorated); + + min-height: 16px; + min-width: 16px; + padding: 4px; + background-color: $menu_color; + border-radius: 0; + + &.top { + margin-top: -6px; + border-bottom: 1px solid mix($fg_color, $base_color, 10%); + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + } + + &.bottom { + margin-bottom: -6px; + border-top: 1px solid mix($fg_color, $base_color, 10%); + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + + &:hover { background-color: mix($fg_color, $base_color, 10%); } + + &:backdrop { background-color: $backdrop_menu_color; } + + &:disabled { + color: transparent; + background-color: transparent; + border-color: transparent ; + } + } +} + +menuitem { + accelerator { color: gtkalpha(currentColor,0.55); } + + check, + radio { + min-height: 16px; + min-width: 16px; + + &:dir(ltr) { margin-right: 7px; } + &:dir(rtl) { margin-left: 7px; } + } +} + +.csd.popup { + background: transparent; +} diff --git a/gtk-4.0/widgets/_misc.scss b/gtk-4.0/widgets/_misc.scss new file mode 100644 index 0000000..390f1a5 --- /dev/null +++ b/gtk-4.0/widgets/_misc.scss @@ -0,0 +1,62 @@ +/******** + * Misc * + ********/ +//content view (grid/list) +.content-view { + background-color: darken($bg_color,7%); + + &:hover { -gtk-icon-effect: highlight; } + + &:backdrop { background-color: darken($bg_color,7%); } + + rubberband { @extend rubberband; } +} + +.scale-popup { + .osd & { @extend %osd; } + + .osd & button.flat { //FIXME: quick hack, redo properly + border-style: none; + border-radius: 5px; + } + + button { // +/- buttons on GtkVolumeButton popup + &:hover { + @extend %undecorated_button; + background-color: transparentize($fg_color,0.9); + border-radius: 5px; + } + + &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }} + } +} + +/************ +* Assistant * +*************/ + +assistant { + + border-bottom-left-radius:4px; + border-bottom-right-radius:4px; + + .sidebar { + background-color: $base_color; + border-top: 1px solid $borders_color; + + border-bottom-left-radius:4px; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + } + + &.csd .sidebar { border-top-style: none; } + + .sidebar GtkLabel, + .sidebar label { padding: 6px 12px; } + + .sidebar GtkLabel.highlight, + .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } +} diff --git a/gtk-4.0/widgets/_notebooks.scss b/gtk-4.0/widgets/_notebooks.scss new file mode 100644 index 0000000..2c5a679 --- /dev/null +++ b/gtk-4.0/widgets/_notebooks.scss @@ -0,0 +1,276 @@ +/************* + * Notebooks * + *************/ +notebook { + > header { + padding: 1px; + border-color: transparent; + border-width: 1px; + background-color: mix($base_color, $headerbar_color, 30%); + + &:backdrop { + border-color: $backdrop_borders_color; + background-color: $backdrop_bg_color; + } + + tabs { margin: 0px; } + + &.top { + border-bottom-style: solid; + > tabs { + margin-bottom: -2px; + > tab { + + + &:backdrop { box-shadow: none; } + + &:checked { + @include selected-tab(right); + } + } + } + } + + &.bottom { + border-top-style: solid; + > tabs { + margin-top: -2px; + > tab { + + + &:backdrop { box-shadow: none; } + + &:checked { + @include selected-tab(right); + } + } + } + } + + &.left { + border-right-style: solid; + > tabs { + margin-right: -2px; + > tab { + + + &:backdrop { box-shadow: none; } + + &:checked { + @include selected-tab(bottom); + } + } + } + } + + &.right { + border-left-style: solid; + > tabs { + margin-left: -2px; + > tab { + + + &:backdrop { box-shadow: none; } + + &:checked { + @include selected-tab(bottom); + } + } + } + } + + &.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: 14px; + min-width: 14px; + 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); } + } + + tab { + min-height: 24px; + min-width: 24px; + padding: 1px 12px; + + outline-offset: -5px; + + color: $insensitive_fg_color; + font-weight: normal; + + border-width: 1px; // for reorderable tabs + border-color: transparent; // + + &:hover { + color: mix($insensitive_fg_color, $fg_color, 50%); + + &.reorderable-page { + border-color: transparentize($borders_color, 0.7); + background-color: transparentize($bg_color, 0.8); + } + } + + &:backdrop { + color: mix($backdrop_fg_color, $backdrop_bg_color, 60%); + + &.reorderable-page { + border-color: transparent; + background-color: transparent; + } + } + + &:checked { + color: $fg_color; + &.reorderable-page { + border-color: transparentize($borders_color, 0.5); + background-color: transparentize($bg_color, 0.5); + + &:hover { background-color: transparentize($bg_color, 0.3); } + } + } + + &:backdrop:checked { + color: $backdrop_fg_color; + &.reorderable-page { + border-color: $backdrop_borders_color; + background-color: $backdrop_base_color; + } + } + + // colors the button like the label, overridden otherwise + button.flat { + &:hover { + background: transparent; + box-shadow: none; + color: $red; + } + + &, &:backdrop { color: gtkalpha(currentColor, 0.3); } + + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + // FIXME: generalize .small-button? + min-width: 20px; + min-height: 20px; + } + } + + &.top, + &.bottom { + tabs { + padding-left: 0px; + padding-right: 0px; + + &:not(:only-child) { + margin-left: 0.5px; + margin-right: 0.5px; + + &:first-child { margin-left: -1px; } + &:last-child { margin-right: -1px; } + } + + tab { + margin-left: 0.5px; + margin-right: 0.5px; + + &.reorderable-page { border-style: none solid; } + } + } + } + + &.left, + &.right { + tabs { + padding-top: 4px; + padding-bottom: 4px; + + &:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; + + &:first-child { margin-top: -1px; } + &:last-child { margin-bottom: -1px; } + } + + tab { + margin-top: 4px; + margin-bottom: 4px; + + &.reorderable-page { border-style: solid none; } + } + } + } + + &.top tab { padding-bottom: 3px; } + &.bottom tab { padding-top: 3px; } + button{ + margin-top: 1px; + margin-bottom: 1px; + padding: 1px 1px; + } + } + + > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks + background-color: $base_color; + + &:backdrop { background-color: $backdrop_base_color; } + } +} diff --git a/gtk-4.0/widgets/_paned.scss b/gtk-4.0/widgets/_paned.scss new file mode 100644 index 0000000..e3d6bbd --- /dev/null +++ b/gtk-4.0/widgets/_paned.scss @@ -0,0 +1,69 @@ +/********* + * Paned * + *********/ +paned { + > separator { + min-width: 1px; + min-height: 1px; + -gtk-icon-source: none; // defeats the ugly default handle decoration + border-style: none; // just to be sure + background-color: transparent; + // workaround, using background istead of a border since the border will get rendered twice (?) + background-image: image($borders_color); + background-size: 1px 1px; + + &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? + + &:backdrop { background-image: image($backdrop_borders_color); } + + &.wide { + min-width: 5px; + min-height: 5px; + background-color: $bg_color; + background-image: image($borders_color), image($borders_color); + background-size: 1px 1px, 1px 1px; + + &:backdrop { + background-color: $backdrop_bg_color; + background-image: image($backdrop_borders_color), + image($backdrop_borders_color); + } + } + } + + &.horizontal > separator { + background-repeat: repeat-y; + + &:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + background-position: left; + } + &:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + background-position: right; + } + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-y, repeat-y; + background-position: left, right; + } + } + + &.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + background-repeat: repeat-x; + background-position: top; + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; + } + } +} diff --git a/gtk-4.0/widgets/_pathbars.scss b/gtk-4.0/widgets/_pathbars.scss new file mode 100644 index 0000000..65083c9 --- /dev/null +++ b/gtk-4.0/widgets/_pathbars.scss @@ -0,0 +1,29 @@ +/************ + * Pathbars * + ************/ +.path-bar button { + &.text-button, &.image-button, & { + padding-left: 4px; + padding-right: 4px; + } + + &.text-button.image-button label { + padding-left: 0; + padding-right: 0; + } + + &.text-button.image-button, & { + label:last-child { padding-right: 8px; } + label:first-child { padding-left: 8px; } + } + + image { + padding-left: 4px; + padding-right: 4px; + } + + &.slider-button { + padding-left: 0; + padding-right: 0; + } +} diff --git a/gtk-4.0/widgets/_popovers.scss b/gtk-4.0/widgets/_popovers.scss new file mode 100644 index 0000000..d59181e --- /dev/null +++ b/gtk-4.0/widgets/_popovers.scss @@ -0,0 +1,45 @@ +/*************** + * Popovers * + ***************/ + +popover.background { + padding: 2px; + border-radius: 5px; + background: if( $variant == 'light', linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%))); + + .csd &, & { border: 1px solid $borders_color; } + + box-shadow: 0 4px 6px $menu_shadow_color; + + &:backdrop { + background-color: $backdrop_bg_color; + box-shadow: none; + } + + > list, + > .view, + > toolbar { + border-style: none; + background-color: transparent; + } + + .csd &, & { + &.touch-selection, + &.magnifier { + @extend %osd; + + border: 1px solid transparentize(white, 0.9); + + button { @extend %osd_button }; + } + + &.osd { @extend %osd; } + } + + separator { margin: 3px; } + + list separator { margin: 0px; } + + checkbutton, + radiobutton { @extend modelbutton.flat; } +} diff --git a/gtk-4.0/widgets/_print-dialog.scss b/gtk-4.0/widgets/_print-dialog.scss new file mode 100644 index 0000000..7ae1b8d --- /dev/null +++ b/gtk-4.0/widgets/_print-dialog.scss @@ -0,0 +1,18 @@ +/**************** + * Print dialog * +*****************/ +printdialog { + paper { + color: $fg_color; + border: 1px solid $borders_color; + background: white; + padding: 0; + + &:backdrop { + color: $backdrop_fg_color; + border-color: $backdrop_borders_color; + } + } + + .dialog-action-box { margin: 12px; } +} \ No newline at end of file diff --git a/gtk-4.0/widgets/_progress-bars.scss b/gtk-4.0/widgets/_progress-bars.scss new file mode 100644 index 0000000..2a872f1 --- /dev/null +++ b/gtk-4.0/widgets/_progress-bars.scss @@ -0,0 +1,56 @@ +/***************** + * Progress bars * + *****************/ +progressbar { + // sizing + &.horizontal { + trough, + progress { min-height: 6px; } + } + + &.vertical { + trough, + progress { min-width: 6px; } + } + + &.horizontal progress { margin: 0;} // the progress node is positioned after the trough border + &.vertical progress { margin: 0; @include scale-highlight(bottom);} // this moves it over it. + + + // FIXME: insensitive state missing and some other state should be set probably + font-size: smaller; + color: transparentize($fg_color, 0.6); + + &:backdrop { + box-shadow: none; + transition: $backdrop_transition; + } + + trough { @extend %scale_trough; } + + &:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here + + progress { + @extend %scale_highlight; + } + + &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well + + &.osd { // progressbar.osd used for epiphany page loading progress + min-width: 3px; + min-height: 3px; + background-color: transparent; + + trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; + } + + progress { + border-style: none; + border-radius: 0; + } + } +} diff --git a/gtk-4.0/widgets/_scales.scss b/gtk-4.0/widgets/_scales.scss new file mode 100644 index 0000000..694c661 --- /dev/null +++ b/gtk-4.0/widgets/_scales.scss @@ -0,0 +1,420 @@ +/************ + * GtkScale * + ************/ +%scale_trough { + background-color: $scale_bg; + border: none; + border-radius: 3px; + margin: 0; + + &:disabled { background-color: $scale_disabled_bg; } + + &:backdrop { + background-color: $scale_disabled_bg; + transition: $backdrop_transition; + + &:disabled { background-color: $scale_disabled_bg; } + } +} + +%scale_highlight { + border: none; + @include scale-highlight(right); + border-radius: 3px; + margin: 0; + + &:disabled { + border: none; + background-color: $scale_bg; + } + + &:backdrop, + &:active:backdrop { + border-color: lighten($selected_bg_color, 5%); + background-color: lighten($selected_bg_color, 5%); + &:disabled { + background-color: $scale_disabled_bg; + } + } +} + +scale { + // sizing + $_marks_lenght: 6px; + $_marks_distance: 6px; + + min-height: 16px; + min-width: 16px; + padding: 8px; + + &.horizontal { + trough, + progress { min-height: 6px; } + } + + &.vertical { + trough, + progress { min-width: 6px;} + highlight { @include scale-highlight(bottom); } + } + + // the slider is inside the trough, so to have make it bigger there's a negative margin + + slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + + background-color: $base_color; + box-shadow: inset 0 1px $top_highlight; + // 0px 0px 1px 1px rgba(0,0,0,0.1); + border-radius: 12px; + + transition: $button_transition; + transition-property: background, border, box-shadow; + + &:active { + background-color: $selected_bg_color; + + &:disabled { + background-color: $insensitive_bg_color; + box-shadow: inset 0 1px $top_highlight; + //0px 0px 1px 1px rgba(0,0,0,0.05); + } + } + } + + // click-and-hold the slider to activate + &.fine-tune { + &.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; + } + + &.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; + } + + // to make the trough grow in fine-tune mode + slider { margin: -6px; } + + fill, + highlight, + trough { + border-radius: 5px; + -gtk-outline-radius: 7px; + } + } + + // the backing bit + trough { + @extend %scale_trough; + + outline-offset: 2px; + -gtk-outline-radius: 5px; + outline-color: transparent; + } + + // the colored part of the backing bit + highlight { @extend %scale_highlight; } + + // this is another differently styled part of the backing bit, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + fill { + @extend %scale_trough; + + &:backdrop, & { background-color: $borders_color; } + + &:disabled { + &:backdrop, & { + border-color: transparent; + background-color: transparent; + } + } + + // OSD + .osd & { + background-color: mix($osd_fg_color, $osd_borders_color, 25%); + + &:disabled { + &:backdrop, & { + border-color: transparent; + background-color: transparent; + } + } + } + } + + $_scale_bg: if($variant == 'light', #fff, lighten($bg_color, 10%)); + $_scale_disabled_bg: darken($_scale_bg, 15%); + slider { + border-color: $base_color; + border: 2px solid #00f17d; + border-radius: 12px; + + background-color: $_scale_bg; + // box-shadow: inset 0 1px $top_highlight, + // 0px 0px 1px 1px rgba(0,0,0,0.1); + + &:hover { @include button(hover-alt, $edge: $shadow_color); } + + &:active { border-color: $selected_borders_color; } + + &:disabled { + background-color: $_scale_disabled_bg; + box-shadow: inset 0 1px $top_highlight, + 0px 0px 1px 1px rgba(0,0,0,0.1); + } + + &:backdrop, + &:backdrop:disabled { + transition: $backdrop_transition; + + background-color: $_scale_disabled_bg; + box-shadow: inset 0 1px $top_highlight, + 0px 0px 1px 1px rgba(0,0,0,0.1); + } + + // ...on selected list rows + row:selected & { &:disabled, & { border-color: $selected_borders_color; } } + + // OSD + .osd & { + @include button(osd); + border-color: darken($osd_borders_color, 3%); + background-color: opacify($osd_bg_color, 1); // solid background needed here + + &:hover { + @include button(osd-hover); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + + &:active { + @include button(osd-active); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + + &:disabled { + @include button(osd-insensitive); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + + &:backdrop { + @include button(osd-backdrop); + background-color: opacify($osd_bg_color, 1); // solid background needed here + + &:disabled { + @include button(osd-backdrop-insensitive); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + } + } + } + + value { color: gtkalpha(currentColor, 0.4); } + + marks { + color: gtkalpha(currentColor, 0.4); + + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght); + } + } + } + + &.fine-tune marks { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px); + } + } + } + + &.horizontal { + indicator { + min-height: $_marks_lenght; + min-width: 1px; + } + + &.fine-tune indicator { min-height: ($_marks_lenght - 3px); } + } + + &.vertical { + indicator { + min-height: 1px; + min-width: $_marks_lenght; + } + + &.fine-tune indicator { min-width: ($_marks_lenght - 3px); } + } + + // *WARNING* scale with marks madness following + + // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... + $suffix: if($variant == 'light', '', '-dark'); + + @each $dir_class, $dir_infix in ('horizontal', 'horz'), + ('vertical', 'vert') { + @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'), + ('scale-has-marks-below', 'marks-after:not(.marks-before)') { + @each $state, $state_infix in ('', ''), + (':hover', '-hover'), + (':active', '-active'), + (':disabled', '-insensitive'), + (':backdrop', '-backdrop'), + (':backdrop:disabled', '-backdrop-insensitive') { + &.#{$dir_class}.#{$marks_class} { + + slider { + &#{$state} { + // an asymmetric slider asset is used here, so the margins are uneven, the smaller + // margin is set on the point side. + min-height: 15px; + min-width: 15px; + margin: -7px; + border: 2px solid #00f17d; + border-radius: 50%; + + background-color: $_scale_bg; + box-shadow: inset 0 1px $top_highlight; + + } + } + + &.fine-tune slider { + // bigger negative margins to make the trough grow here as well + margin: -7px; + } + } + } + } + } + + &.color { + min-height: 0; + min-width: 0; + + trough { + background-image: image($borders_color); + background-repeat: no-repeat; + } + + &.horizontal { + padding: 0 0 15px 0; + + trough { + padding-bottom: 4px; + background-position: 0 -3px; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + slider { + &:dir(ltr), &:dir(rtl) { // specificity bumb + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-bottom: -15px; + margin-top: 6px; + } + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 15px; + + trough { + padding-left: 4px; + background-position: 3px 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-left: -15px; + margin-right: 6px; + } + } + } + + &:dir(rtl) { + padding: 0 15px 0 0; + + trough { + padding-right: 4px; + background-position: -3px 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-right: -15px; + margin-left: 6px; + } + } + } + } + + &.fine-tune { + &.horizontal { + &:dir(ltr), &:dir(rtl) { // specificity bump + padding: 0 0 12px 0; + + trough { + padding-bottom: 7px; + background-position: 0 -6px; + } + + slider { + margin-bottom: -15px; + margin-top: 6px; + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 12px; + + trough { + padding-left: 7px; + background-position: 6px 0; + } + + slider { + margin-left: -15px; + margin-right: 6px; + } + } + + &:dir(rtl) { + padding: 0 12px 0 0; + + trough { + padding-right: 7px; + background-position: -6px 0; + } + + slider { + margin-right: -15px; + margin-left: 6px; + } + } + } + } + } +} diff --git a/gtk-4.0/widgets/_scrollbars.scss b/gtk-4.0/widgets/_scrollbars.scss new file mode 100644 index 0000000..eff1e0d --- /dev/null +++ b/gtk-4.0/widgets/_scrollbars.scss @@ -0,0 +1,176 @@ +/************** + * Scrollbars * + **************/ +scrollbar { + $_slider_min_length: 40px; + + // disable steppers + @at-root * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + } + + background-color: $scrollbar_bg_color; + transition: 300ms $ease-out-quad; + + // scrollbar border + &.top { border-bottom: 1px solid $borders_color; } + &.bottom { border-top: 1px solid $borders_color; } + &.left { border-right: 1px solid $borders_color; } + &.right { border-left: 1px solid $borders_color; } + + &:backdrop { + background-color: $backdrop_scrollbar_bg_color; + border-color: $backdrop_borders_color; + transition: $backdrop_transition; + } + + // slider + slider { + min-width: 6px; + min-height: 6px; + margin: -1px; + border: 4px solid transparent; + border-radius: 8px; + background-clip: padding-box; + background-color: $scrollbar_slider_color; + + &:hover { background-color: $scrollbar_slider_hover_color; } + + &:hover:active { background-color: $scrollbar_slider_active_color; } + + &:backdrop { background-color: $backdrop_scrollbar_slider_color; } + + &:disabled { background-color: transparent; } + } + + &.fine-tune { + slider { + min-width: 4px; + min-height: 4px; + } + + &.horizontal slider { border-width: 5px 4px; } + &.vertical slider { border-width: 4px 5px; } + } + + &.overlay-indicator { + &:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; + + slider { + margin: 0; + min-width: 3px; + min-height: 3px; + background-color: $fg_color; + border: 1px solid if($variant == 'light', white, black); + } + + button { + min-width: 5px; + min-height: 5px; + background-color: $fg_color; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid if($variant == 'light', white, black); + -gtk-icon-source: none; + } + + &.horizontal { + slider { + margin: 0 2px; + min-width: $_slider_min_length; + } + + button { + margin: 1px 2px; + min-width: 5px; + } + } + + &.vertical { + slider { + margin: 2px 0; + min-height: $_slider_min_length; + } + + button { + margin: 2px 1px; + min-height: 5px; + } + } + } + + &.dragging, + &.hovering { opacity: 0.8; } + } + + &.horizontal slider { min-width: $_slider_min_length; } + + &.vertical slider { min-height: $_slider_min_length; } + + // button styling + button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + + @include button(undecorated); + + color: $scrollbar_slider_color; + + &:hover { + @include button(undecorated); + + color: $scrollbar_slider_hover_color; + } + &:active, &:checked { + @include button(undecorated); + + color: $scrollbar_slider_active_color; + } + &:disabled { + @include button(undecorated); + + color: transparentize($scrollbar_slider_color, 0.8); + } + &:backdrop { + @include button(undecorated); + + color: $backdrop_scrollbar_slider_color; + + &:disabled { + @include button(undecorated); + + color: transparentize($backdrop_scrollbar_slider_color, 0.8); + } + } + } + + // button icons + &.vertical { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + } + } + + &.horizontal { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } + } + } +} + +treeview ~ scrollbar.vertical { + border-top: 1px solid $borders_color; + margin-top: -1px; +} diff --git a/gtk-4.0/widgets/_sidebar.scss b/gtk-4.0/widgets/_sidebar.scss new file mode 100644 index 0000000..875e26b --- /dev/null +++ b/gtk-4.0/widgets/_sidebar.scss @@ -0,0 +1,209 @@ +/*********** + * Sidebar * + ***********/ +.sidebar { + border-style: none; + border-width: 0; + background-color: mix($bg_color, $base_color, 50%); + + .frame{ + border: none; + } + + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: none; + border-left-style: none; + } + + @at-root %sidebar_right + &:dir(rtl), + &.right { + border-left: 1px solid $borders_color; + border-right-style: none; + } + + &:backdrop { + background-color: $backdrop_sidebar_bg_color; + border-color: $backdrop_borders_color; + } + + row{ + padding: 8px 12px; + transition: all .12s ease-in; + label{ + color: #98abb2; + } + &:selected{ + color: $selected_fg_color; + // border-left: 4px solid $selected_bg_color; + &:backdrop{ + color: $backdrop_selected_fg_color; + background: $backdrop_selected_bg_color; + label{ + color: $selected_fg_color; + } + } + &:hover{ + // background-color: transparentize($selected_bg_color, 0.8); + } + label{ + color: $selected_fg_color; + } + } + } + + //elementary os file manager + &.source-list{ + background: $_sidebar_color; + padding: 4px 0px; + &.view{ + transition: all .12s ease-in; + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } + + &.has-open-popup, + &:hover { background-color: transparentize($selected_bg_color, 0.1); } + + &:backdrop { background-color: $backdrop_selected_bg_color; } + } + &:hover, iconview.source-list:hover { + background-color: transparentize(black, 0.87); + } + } + } + + + paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { + border-style: none; + border-color: $borders_color; + } +} +} + +stacksidebar { + &.sidebar { + &:dir(ltr), + &.left, + &.left:dir(rtl) { list { @extend %sidebar_left; }} + + &:dir(rtl), + &.right { list { @extend %sidebar_right; }} + } + + row { + padding: 10px 4px; + + > label { + padding-left: 6px; + padding-right: 6px; + } + + &.needs-attention > label { + @extend %needs_attention; + + background-size: 6px 6px, 0 0; + } + } +} + +/*******************************************************************/ +/* PLACESSIDEBAR */ +/*******************************************************************/ + +/*--*/ + +placessidebar{ + &.sidebar{ + background-color: transparent; + background-image:linear-gradient(to right, #171e27 40px, + $_sidebar_color 35px,$_sidebar_color 36px, + $_sidebar_color 36px,$_sidebar_color 99%, + $_sidebar_color 100%); + row{ + &.sidebar-row { + &.sidebar-row{ + .sidebar-icon { + margin-left:-14px; + margin-right: 12px; + padding-left: 14px; + padding-right: 12px; + color: #9ecfa2; + } + } + &:hover{ + transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: rgba(0,0,0,0.76); + background-color: transparent; /*rgba(65,67,75,0.4); */ + background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%); + } + + &:active{ + &:hover{ + color: rgba(0,0,0,0.76); + background-color: rgba(0,0,0,0.23); + } + } + + &:selected{ + color: rgba(255, 255, 255, 0.938); + background-color: transparent; + background-image:linear-gradient(to right, $selected_bg_color 40px, + rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); + &:hover{ + color: #ffffff; + background-color: rgba(0,0,0,0.24); + .sidebar-icon { + color: #ffffff; + } + } + &:backdrop{ + color: rgba(0,0,0,0.54);; + background-color: transparent; + background-image:linear-gradient(to right, $selected_bg_color 40px, + rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); + + .sidebar-icon { + color: $backdrop_selected_fg_color; + -gtk-icon-shadow: 0 1px transparentize($backdrop_selected_fg_color, 0.2); + } + } + + .sidebar-icon { + -gtk-icon-shadow: 0 1px transparentize(#fff, 0.2); + color: inherit; + } + } + + &.sidebar-new-bookmark-row { + &, label, .sidebar-icon { + color: $yellow; + } + } + + &:drop(active):not(:disabled) { + &, label, image { color: $drop_target_color; } + + box-shadow: inset 0 1px $drop_target_color, + inset 0 -1px $drop_target_color; + + &:selected { + &, label, image { color: $selected_fg_color; } + background: $drop_target_color; + } + } + + } + } + } + list{ + background-color: transparent; + &:backdrop { background-color: transparent; } + } + + +} diff --git a/gtk-4.0/widgets/_spinbuttons.scss b/gtk-4.0/widgets/_spinbuttons.scss new file mode 100644 index 0000000..4810bbe --- /dev/null +++ b/gtk-4.0/widgets/_spinbuttons.scss @@ -0,0 +1,192 @@ +/***************** + * GtkSpinButton * + *****************/ +spinbutton { + &:not(.vertical) { + // in this horizontal configuration, the whole spinbutton + // behaves as the entry, so we extend the entry styling + // and nuke the style on the internal entry + @extend %entry; + + padding: 0; + + entry { + min-width: 28px; + // reset all the other props since the spinbutton node is styled here + margin: 0; + background: none; + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; + } + + button { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: mix($fg_color, $base_color, 90%); + background-image: none; + border-style: none none none solid; + border-color: transparentize($borders_color, 0.7); + border-radius: 0; + box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07); + + &:dir(rtl) { border-style: none solid none none; } + + &:hover { + color: $fg_color; + background-color: $base_hover_color; + } + + &:disabled { color: transparentize($insensitive_fg_color, 0.7); } + + &:active { + background-color: transparentize(black, 0.9); + box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); + } + + &:backdrop { + color: mix($backdrop_fg_color, $backdrop_base_color, 90%); + background-color: transparent; + border-color: transparentize($backdrop_borders_color, 0.7); + transition: $backdrop_transition; + } + + &:backdrop:disabled { + color: transparentize($backdrop_insensitive_color,0.7); + background-image: none; + border-style: none none none solid; // It is needed or it gets overridden + box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07); + + &:dir(rtl) { border-style: none solid none none; } + } + + &:last-child { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + } + } + + // OSD horizontal + .osd &:not(.vertical) { + button { + @include button(undecorated); + + color: $osd_fg_color; + border-style: none none none solid; + border-color: transparentize($osd_borders_color, 0.3); + border-radius: 0; + box-shadow: none; + -gtk-icon-shadow: 0 1px black; + + &:dir(rtl) { border-style: none solid none none; } + + &:hover { + @include button(undecorated); + + color: $osd_fg_color; + border-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-color: transparentize($osd_fg_color, 0.9); + -gtk-icon-shadow: 0 1px black; + box-shadow: none; + } + + &:backdrop { + @include button(undecorated); + + color: $osd_fg_color; + border-color: transparentize(opacify($osd_borders_color, 1), 0.5); + -gtk-icon-shadow: none; + box-shadow: none; + } + + &:disabled { + @include button(undecorated); + + color: $osd_insensitive_fg_color; + border-color: transparentize(opacify($osd_borders_color, 1), 0.5); + -gtk-icon-shadow: none; + box-shadow: none; + } + + &:last-child { border-radius: 0 3px 3px 0; } + + &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } + } + } + + // Vertical + &.vertical { + // in the vertical configuration, we treat the spinbutton + // as a box, and tweak the style of the entry in the middle + // so that it's linked + + // FIXME: this should not be set at all, but otherwise it gets the wrong + // color + &:disabled { color: $insensitive_fg_color; } + &:backdrop:disabled { color: $backdrop_insensitive_color; } + + &:drop(active) { + border-color: transparent; + box-shadow: none; + } + + entry { + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; + } + + button { + min-height: 32px; + min-width: 32px; + padding: 0; + border-width: 1px; + border-color: $borders_color; + box-shadow: 0 1px $top_highlight; + + &.up { @extend %top_button; } + + &.down { @extend %bottom_button; } + } + + %top_button { + border-radius: 3px 3px 0 0; + border-style: solid solid none solid; + } + + %bottom_button { + border-radius: 0 0 3px 3px; + border-style: none solid solid solid; + } + } + + // OSD vertical + .osd &.vertical button:first-child { + @include button(osd); + + &:hover { @include button(osd-hover);} + + &:active { @include button(osd-active); } + + &:disabled { @include button(osd-insensitive); } + + &:backdrop { @include button(osd-backdrop); } + } + + // Misc + treeview &:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; + + entry { + min-height: 0; + padding: 1px 2px; + } + } +} diff --git a/gtk-4.0/widgets/_spinner.scss b/gtk-4.0/widgets/_spinner.scss new file mode 100644 index 0000000..1bd61a6 --- /dev/null +++ b/gtk-4.0/widgets/_spinner.scss @@ -0,0 +1,27 @@ +/*********** + * Spinner * + ***********/ + +menu spinner { + color: $selected_bg_color; +} + +/********************* + * Spinner Animation * + *********************/ +@keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } +} + +spinner { + background: none; + opacity: 0; // non spinning spinner makes no sense + -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); + + &:checked { + opacity: 1; + animation: spin 1s linear infinite; + + &:disabled { opacity: 0.5; } + } +} diff --git a/gtk-4.0/widgets/_switches.scss b/gtk-4.0/widgets/_switches.scss new file mode 100644 index 0000000..882e123 --- /dev/null +++ b/gtk-4.0/widgets/_switches.scss @@ -0,0 +1,95 @@ +/********** + * Switch * + **********/ +switch { + font-size: 1px; + font-weight: bold; + outline-offset: -4px; + transition: all 200ms ease-in; + + border: 1px solid $borders_color; + border-radius: 14px; + color: transparent; + padding: 2.3px 0px; + background: linear-gradient(to right, #1E2233, #1E2233); + // border: 1px solid rgba(170, 170, 170, 0.4); + &:disabled { + background-color: $insensitive_bg_color; + } + + &:backdrop { + background-color: $backdrop_bg_color; + transition: $backdrop_transition; + + &:disabled { background-color: $insensitive_bg_color; } + } + + + &:active, + &:checked { + background: linear-gradient(to right, #f7005a, #fadd00); + slider{ + background: #fff; + } + &:backdrop { + background: linear-gradient(to right, darken(#f7005a, 5%), darken(#fadd00, 5%)); + slider { + &:backdrop { + box-shadow:none; + background-color:transparentize($base_color, 0.1); + border:none; + } + } + } + } + + // Handle + slider { + padding: 2px; + margin: 0 2.3px; + min-width: 12px; + min-height: 12px; + + border-radius: 100%; + transition: $button_transition; + background-color: darken(#1E2233, 5%); + + &:backdrop { + padding:2px; + box-shadow:none; + background-color:$base_color; + } + } + + &:checked slider { } + + &:backdrop { + } + + row:selected & { + @if $variant == 'light' { + box-shadow: none; + border-color: $selected_borders_color; + + &:backdrop { border-color: $selected_borders_color; } + + &.slider:dir(rtl) { border-left-color: $borders_color; } + &.slider:dir(ltr) { border-right-color: $borders_color; } + + &.slider { &:checked, & { border-color: $selected_borders_color; } } + } + } + + // Trough + trough { + + &:active, + &:checked { + background-color: $selected_bg_color; + + &:backdrop { + background-color: $backdrop_selected_bg_color; + } + } + } +} diff --git a/gtk-4.0/widgets/_toolbars.scss b/gtk-4.0/widgets/_toolbars.scss new file mode 100644 index 0000000..c7d5b90 --- /dev/null +++ b/gtk-4.0/widgets/_toolbars.scss @@ -0,0 +1,84 @@ +/************ + * Toolbars * + ************/ +%toolbar { + -GtkWidget-window-dragging: true; + padding: 4px; + background-color: $bg_color; +} + +toolbar { + @extend %toolbar; + + padding: 4px 3px 3px 4px; + + // on OSD + .osd & { background-color: transparent; } + + // stand-alone OSD toolbars + &.osd { + padding: 13px; + border: none; + border-radius: 5px; + background-color: $osd_bg_color; + + &.left, + &.right, + &.top, + &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars + } + + // toolbar separators + &.horizontal separator { margin: 0 7px 1px 6px; } + &.vertical separator { margin: 6px 1px 7px 0; } + + &:not(.inline-toolbar):not(.osd) { + switch, + scale, + entry, + spinbutton, + button { + margin-right: 1px; + margin-bottom: 1px; + } + } +} + +//searchbar, location-bar & inline-toolbar +.inline-toolbar { + @extend %toolbar; + + @extend %darkbar; + + padding: 3px; + border-width: 0 1px 1px; + border-radius: 0 0 5px 5px; +} + +searchbar, +.location-bar { + @extend %toolbar; + + @extend %darkbar; + + border-width: 0 0 1px; + padding: 3px; +} + +%darkbar { + border-style: solid; + border-color: $borders_color; + $_bg: mix($bg_color, $borders_color, 70%); + background-color: $_bg; + + &:backdrop { + border-color: $backdrop_borders_color; + background-color: $backdrop_dark_fill; + box-shadow: none; + transition: $backdrop_transition; + } +} + +searchbar{ + background: $base_color; +} \ No newline at end of file diff --git a/gtk-4.0/widgets/_tooltips.scss b/gtk-4.0/widgets/_tooltips.scss new file mode 100644 index 0000000..7d3c1f6 --- /dev/null +++ b/gtk-4.0/widgets/_tooltips.scss @@ -0,0 +1,28 @@ +/************ + * Tooltips * + ************/ +tooltip { + &.background { + // background-color needs to be set this way otherwise it gets drawn twice + // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. + background-color: darken($_sidebar_color, 5%); + background-clip: padding-box; + border: 1px solid $tooltip_borders_color; // this suble border is meant to + // not make the tooltip melt with + // very dark backgrounds + } + + padding: 4px; /* not working */ + border-radius: 4px; + box-shadow: none; // otherwise it gets inherited by windowframe.csd + text-shadow: 0 1px black; + + // FIXME: we need a border or tooltips vanish on black background. + decoration { background-color: transparent; } + + * { // Yeah this is ugly + padding: 4px; + background-color: transparent; + color: white; + } +} diff --git a/gtk-4.0/widgets/_touch-copy-paste.scss b/gtk-4.0/widgets/_touch-copy-paste.scss new file mode 100644 index 0000000..c9f4db2 --- /dev/null +++ b/gtk-4.0/widgets/_touch-copy-paste.scss @@ -0,0 +1,82 @@ +/********************** + * Touch Copy & Paste * + *********************/ +//touch selection handlebars for the Popover.osd above +cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + + @each $s,$as in ('',''), + (':hover','-hover'), + (':active','-active') { //no need for insensitive and backdrop + &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { + $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-left: 10px; + } + + &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { + $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-right: 10px; + } + + &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { + $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } + } +} + +.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview + +button.circular { // FIXME: aggregate to buttons + border-radius: 20px; + -gtk-outline-radius: 20px; + + label { padding: 0; } +} + +// shortcut window keys +.keycap { + min-width: 20px; + min-height: 25px; + margin-top: 2px; + padding-bottom: 3px; + padding-left: 6px; + padding-right: 6px; + + color: $fg_color; + background-color: $base_color; + border: 1px solid; + border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color); + border-radius: 5px; + box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%)); + font-size: smaller; + + &:backdrop { + background-color: $backdrop_base_color; + color: $backdrop_fg_color; + transition: $backdrop_transition; + } +} + +*:drop(active):focus, +*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; +} + +stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons + +stackswitcher button.circular, +stackswitcher button.text-button.circular { // FIXME aggregate with buttons + min-width: 32px; + min-height: 32px; + padding: 0; +} diff --git a/gtk-4.0/widgets/_treeviews.scss b/gtk-4.0/widgets/_treeviews.scss new file mode 100644 index 0000000..478f148 --- /dev/null +++ b/gtk-4.0/widgets/_treeviews.scss @@ -0,0 +1,233 @@ +/************** + * Tree Views * + **************/ +treeview.view { + @at-root * { + -GtkTreeView-horizontal-separator: 4; + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; + } + + border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, + border-top-color: $bg_color; // while this is the grid lines color, better then nothing + + rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { + &:focus, & { + border-radius: 0; + + @extend %selected_items; + } + + &:backdrop, & { + border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly + } + } + + &:disabled { + color: $insensitive_fg_color; + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } + } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &.separator { + min-height: 2px; + color: $bg_color; + + &:backdrop { color: transparentize($bg_color, 0.9); } + } + + &:backdrop { + border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); + border-top: $backdrop_bg_color; + } + &:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: $selected_borders_color; + + &.after { border-top-style: none; } + + &.before { border-bottom-style: none; } + } + + &.expander { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + color: mix($fg_color, $base_color, 70%); + + &:hover { color: $fg_color; } + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 70%); + + &:hover { color: $selected_fg_color; } + + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); } + } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } + } + + &.progressbar { // progress bar in treeviews + @if $variant == light { color: $base_color; } + + border: 1px solid $selected_borders_color; + border-radius: 4px; + background-color: $selected_bg_color; + background-image: linear-gradient(to bottom, + $selected_bg_color, + darken($selected_bg_color,10%)); + box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), + transparentize(white,0.85)), + 0 1px if($variant=='light', transparentize(black, 0.8), + transparentize(black,0.9)); + + &:selected { + &:focus, & { + border-radius: 4px; + + @if $variant == 'light' { + color: $selected_bg_color; + box-shadow: none; + } + + @else { box-shadow: inset 0 1px transparentize(white, 0.95); } + + background-image: linear-gradient(to bottom, + $base_color, + darken($base_color,10%)); + + &:backdrop { + @if $variant == 'light' { + color: $selected_bg_color; + border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) + } + + @else { border-color: $backdrop_base_color; } + + background-color: $backdrop_base_color; + } + } + } + + &:backdrop { + @if $variant == 'light' { color: $backdrop_base_color; } + + @else { border-color: $backdrop_base_color; } + + background-image: none; + box-shadow: none; + } + } + + &.trough { // progress bar trough in treeviews + background-color: transparentize($fg_color,0.9); + border-radius: 4px; + + &:selected { + &:focus, & { + background-color: if($variant == 'light', + transparentize($selected_fg_color, 0.7), + darken($selected_bg_color, 10%)); + border-radius: 4px; + + @if $variant == 'light' { + border-width: 1px 0; + border-style: solid; + border-color: $selected_bg_color; + } + } + } + } + + header { + button { + $_column_header_color: mix($fg_color, $base_color, 50%); + + @extend %column_header_button; + + color: $_column_header_color; + background-color: $base_color; + font-weight: bold; + text-shadow: none; + box-shadow: none; + + &:hover { + @extend %column_header_button; + + color: mix($_column_header_color, $fg_color, 50%); + box-shadow: none; + transition: none; //I shouldn't need this + } + + &:active { + @extend %column_header_button; + + color: $fg_color; + 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; + transition: none; + background-image: none; + background-color: $selected_bg_color; + color: $base_color; + border-radius: 0; + border-style: none; + box-shadow: inset 0 0 0 1px $base_color; + text-shadow: none; + } + } + + acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test +} + +%column_header_button { + padding: 0 6px; + border-radius: 0; + background-image: none; + text-shadow: none; + border-width: 1px; + border-style: none solid solid none; + border-color: $bg_color; + + &:disabled { + border-color: $bg_color; + background-image: none; + } + + &:backdrop { + border-color: $backdrop_bg_color; + border-style: none solid solid none; + color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); + background-image: none; + background-color: $backdrop_base_color; + + &:disabled { + border-color: $backdrop_bg_color; + background-image: none; + } + } +} diff --git a/gtk-4.0/widgets/_windows.scss b/gtk-4.0/widgets/_windows.scss new file mode 100644 index 0000000..03a47dc --- /dev/null +++ b/gtk-4.0/widgets/_windows.scss @@ -0,0 +1,136 @@ +/********************** + * Window Decorations * + *********************/ +decoration { + border-radius: 4px 4px 0 0; + + // lamefun trick to get rounded borders regardless of CSD use + border-width: 0px; + + // this needs to be transparent + // see bug #722563 + $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); + $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); + + // lamefun trick to get rounded borders regardless of CSD use + border-width: 0px; + + box-shadow: 0 4px 10px 2px transparentize($borders_color, 0.2); + // FIXME rationalize shadows + + // this is used for the resize cursor area + margin: 10px; + + &:backdrop { + // the transparent shadow here is to enforce that the shadow extents don't + // change when we go to backdrop, to prevent jumping windows. + // The biggest shadow should be in the same order then in the active state + // or the jumping will happen during the transition. + box-shadow: 0 4px 10px 2px transparentize($borders_color, 0.4); + transition: $backdrop_transition; + } + + .maximized &, + .fullscreen &, + .tiled & { border-radius: 0; } + + .popup & { box-shadow: none; } + + // server-side decorations as used by mutter + .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows + + .csd.popup & { + border-radius: 7px; + box-shadow: 0 4px 8px $menu_shadow_color; + border: 1px solid $borders_color; + } + + tooltip.csd & { + border-radius: 5px; + box-shadow: none; + } + + messagedialog.csd & { + border-radius: 7px; + box-shadow: 0 1px 2px transparentize(black, 0.8), + 0 0 0 1px transparentize($_wm_border,0.1); + } + + .solid-csd & { + border-radius: 0; + margin: 0px; + background-color: $backdrop_bg_color; + border: solid 1px $backdrop_borders_color; + box-shadow: none; + } +} + +// Window Close button +button.titlebutton { + background-repeat: no-repeat; + background-position: center; + min-height: 20px; + padding: 0 1px; + box-shadow: none; + + &.close { + background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png")); + } + } + &.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png")); + } + } + &.minimize { + background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png")); + } + } + + .selection-mode & { + @extend %button.flat.suggested-action; + + @extend %nobg_selected_items; + } + + &:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png")); + } +} + +headerbar.selection-mode button.titlebutton, +.titlebar.selection-mode button.titlebutton { + @include _button_text_shadow(white, $selected_bg_color); + + &:backdrop { -gtk-icon-shadow: none; } +} + + +// catch all extend :) + +%selected_items { + background-color: $selected_bg_color; + + @at-root %nobg_selected_items, & { + color: $selected_fg_color; + font-weight: normal; + //&:hover{background-color: transparent;} + @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } + + &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } + + &:backdrop { + color: $backdrop_selected_fg_color; + + &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } + } + } +} + +.monospace { font-family: Monospace; }