/* Default color scheme */ @define-color base_color #3d3d3e; /* used by some apps */ @define-color bg_color #3d3d3e; @define-color text_color #ffffff; @define-color fg_color #ffffff; @define-color selected_bg_color #141414; @define-color selected_fg_color #3399FF; @define-color tooltip_bg_color #000000; @define-color tooltip_fg_color #eeeeee; @define-color theme_base_color @base_color; @define-color theme_bg_color @bg_color; @define-color theme_text_color @text_color; @define-color theme_fg_color @fg_color; @define-color theme_selected_bg_color @selected_bg_color; @define-color theme_selected_fg_color @selected_fg_color; @define-color theme_tooltip_bg_color @tooltip_bg_color; @define-color theme_tooltip_fg_color @tooltip_fg_color; @define-color theme_main_color #FFFFFF; /*#000000;*/ @define-color view_color #303030; @define-color button_gradient_color_a #5F5F5F; /*shade(@theme_bg_color, 1.75);*/ @define-color button_gradient_color_b #434343; @define-color button_hover_gradient_color_a shade(@button_gradient_color_a, 0.8); @define-color button_hover_gradient_color_b shade(@button_gradient_color_b, 1.2); @define-color insensitive_bg_color alpha(#0b0b0d, 0.2); @define-color insensitive_fg_color #000000; /*alpha(#ababab, 0.7);*/ @define-color insensitive_border_color alpha(#717171, 0.50); @define-color frame_color #707070; @define-color light_frame_color #808080; @define-color inactive_frame_color shade(@theme_bg_color, 0.8); @define-color notebook_active_tab_a #262626; @define-color notebook_active_tab_b #0c0c0c; @define-color switch_slider_color #737373; @define-color switch_slider_border #666666; @define-color entry_color #303030; @define-color entry_shadow #999999; @define-color internal_element_color #8a8a8a; @define-color internal_element_prelight #a3a3a3; @define-color internal_element_insensitive shade(@internal_element_color, 0.75); @define-color progressbar_background_a shade(@theme_selected_fg_color, 1.3); @define-color progressbar_background_b shade(@theme_selected_fg_color, 0.5); @define-color progressbar_border #a1a1a1; @define-color progressbar_pattern #000000; @define-color less_dark_color #4d4d4d; /*shade(@scroll_slider_color, 1.3)*/ @define-color darker_color #383838; @define-color menu_controls_color #ffffff; @define-color focus_border alpha(@theme_fg_color, 0.50); @define-color trough_bg_color_a #2F2F30; @define-color trough_bg_color_b #414243; @define-color active_switch_bg_color @selected_fg_color; @define-color borders #ababab; @define-color theme_unfocused_base_color shade(@insensitive_bg_color, 1.015); @define-color app_notification_a shade(@theme_bg_color, 1.35); /*#656568*/ @define-color app_notification_b shade(@theme_bg_color, 1.05); /*#39393A*/ @define-color app_notification_c @theme_bg_color; /*#333334*/ @define-color app_notification_border #000000; @define-color content_view_bg @less_dark_color; /******* * OSD * *******/ @define-color osd_highlight #ffffff; @define-color osd_lowlight #525252; @define-color osd_base #212526; @define-color osd_fg #ededed; @define-color osd_bg alpha(@osd_base, 0.80); @define-color osd_text_shadow alpha(black, 0.75); @define-color osd_toolbar_bg_a alpha(@osd_base, 0.80); @define-color osd_toolbar_bg_b alpha(#101010, 0.80); @define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.80); @define-color osd_button_bg_a alpha(@osd_highlight, 0.16); @define-color osd_button_bg_b alpha(@osd_lowlight, 0.05); @define-color osd_button_bg_c alpha(@osd_highlight, 0.12); @define-color osd_button_bg_insensitive alpha(@osd_highlight, 0.25); @define-color osd_button_bg_insensitive_active alpha(@osd_highlight, 0.16); @define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28); @define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14); @define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14); @define-color osd_button_bg_active_a alpha(@osd_lowlight, 0.18); @define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23); @define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17); @define-color osd_button_fg shade(@osd_fg, 0.80); @define-color osd_button_fg_hover shade(@osd_fg, 0.96); @define-color osd_button_fg_active shade(@osd_fg, 1.10); @define-color osd_button_fg_insensitive shade(@osd_fg, 0.70); @define-color osd_button_border alpha(@osd_highlight, 0.40); @define-color osd_button_inset shade(@osd_fg, 0.67); @define-color osd_button_shadow alpha(black, 0.35); @define-color osd_trough_bg alpha(@osd_button_fg, 0.10); /* FIXME: needs dark colors from here */ @define-color link_color #2EB8E6; /*#4a90d9*/ @define-color warning_color #f57900; @define-color error_color #cc0000; @define-color success_color #4e9a06; @define-color info_fg_color rgb (255, 255, 255); @define-color info_bg_color rgb (61, 116, 189); @define-color warning_fg_color rgb (255, 255, 255); @define-color warning_bg_color rgb (252, 128, 0); @define-color question_fg_color rgb (255, 255, 255); @define-color question_bg_color rgb (0, 152, 38); @define-color error_fg_color rgb (255, 255, 255); @define-color error_bg_color rgb (237, 0, 0); @define-color os_chrome_bg_color black; @define-color os_chrome_fg_color #ccc; @define-color os_chrome_selected_bg_color #333; @define-color os_chrome_selected_fg_color white; @define-color chrome_bg_color #1e1a17; @define-color chrome_fg_color #fff; @define-color scale_progress_fill #2c85e2; @define-color scale_progress_border #1864b2; @define-color scale_progress_border_b #3e90e5; @define-color overshoot_bg_color rgba(0,200,255,0.3); * { padding: 0px; background-clip: padding-box; -GtkTextView-error-underline-color: @error_color; -GtkScrolledWindow-scrollbar-spacing: 0; /* Webkit and Firefox have problem with steppers and also with a negative margin for the slider */ -GtkScrollbar-has-backward-stepper: true; -GtkScrollbar-has-forward-stepper: true; -GtkToolItemGroup-expander-size: 12; -GtkTreeView-expander-size: 13; -GtkTreeView-horizontal-separator: 4; -GtkIMHtml-hyperlink-color: @link_color; -GtkHTML-link-color: @link_color; -WnckTasklist-fade-overlay-rect: 0; /* this makes emacs behave weirdly */ /*border-radius: 1px;*/ -GtkWindow-resize-grip-width: 10; -GtkWindow-resize-grip-height: 10; outline-color: @focus_border; outline-style: dashed; outline-offset: 2px; /*2px*/ } /*************** * Base States * ***************/ .background { color: @theme_fg_color; background-color: @theme_bg_color; } .background:hover { background-color: alpha(shade(@theme_bg_color, 1.1), 0.4); color: shade(@theme_selected_fg_color, 1.1); } *:selected { background-color: alpha(@theme_selected_bg_color, 0.5); border-style: solid; border-width: 1px; border-radius: 0px; border-image: url("assets/menuitem-hiver-border-dark.svg") 1 / 1px stretch; background-image: linear-gradient(to bottom, mix(@view_color, #202020, 0.7), mix(@view_color, #0c0c0c, 0.7)); color: @theme_selected_fg_color; } *:selected:focus { border-style: solid; border-width: 1px; border-radius: 0px; border-image: url("assets/menuitem-hiver-border-dark.svg") 1 / 1px stretch; background-color: @theme_selected_bg_color; background-image: linear-gradient(to bottom, #202020, #0c0c0c); color: @theme_selected_fg_color; } .needs-attention label, .needs-attention > .label { background-size: 6px 6px; background-image: image(@selected_fg_color); background-position: right top; background-repeat: no-repeat; padding-right: 6px; } iconview :selected { border: none; background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } iconview :selected:focus { border: none; background-color: red; /*@theme_selected_bg_color; */ color: @theme_selected_fg_color; } .background:disabled { /* no need to a different background */ /*background-color: @theme_bg_color; */ /*@insensitive_bg_color;*/ color: @insensitive_fg_color; border-color: @insensitive_border_color; text-shadow: none; -gtk-icon-shadow: none; } *:active { background-color: shade(@theme_bg_color, 0.915); } .background { border-style: none; border-width: 0px; border-radius: 0px; } window.background.chromium { background-color: #515152; } /* gucharmap uses fallback colors */ .gtkstyle-fallback { color: @theme_fg_color; background-color: @theme_bg_color; } tooltip { padding: 4px 4px; border-style: none; border-radius: 1px; background-color: @theme_tooltip_bg_color; color: @theme_tooltip_fg_color; } tooltip.background, tooltip * { background-color: @theme_tooltip_bg_color; color: @theme_tooltip_fg_color; } .content-view.view.rubberband, .view.rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband, .rubberband, rubberband { background-color: alpha(@theme_selected_bg_color, 0.35); border-color: @theme_selected_bg_color; border-style: solid; border-width: 1px; border-radius: 1px; } row { border: 1px solid transparent; } /**************** * Floating Bar * ****************/ .floating-bar { border-radius: 1px; border-width: 0px; border-style: solid; text-shadow: 0 -1px black; color: @theme_fg_color; background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 1.5), @theme_bg_color 40%, shade(@button_gradient_color_b, 0.7)); } .floating-bar.top { border-top-right-radius: 0; border-top-left-radius: 0; } .floating-bar.right { border-top-right-radius: 0; border-bottom-right-radius: 0; } .floating-bar.bottom { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .floating-bar.left { border-top-left-radius: 0; border-bottom-left-radius: 0; } /********* * Views * *********/ .view{ color: @theme_text_color; /*color: @theme_fg_color;*/ /*color: @insensitive_fg_color;*/ border-radius: 0; /*background-color: @theme_bg_color*/; /*border-width: 3;*/ background-color: @view_color; } .view:disabled, .view :disabled { color: @insensitive_fg_color; } *:drop(active) { box-shadow: inset 0 0 0 1px @green; } .view:selected, .view:active, .view :selected, .view :active, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view text selection, iconview text selection, textview text selection, flowbox flowboxchild:selected, spinbutton selection, entry selection { /* background-color: @theme_selected_fg_color; color: @theme_text_color;*/ background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /*.view:selected:focus, iconview:selected:focus,*/ .view :selected:focus, iconview :selected:focus, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text selection:focus, iconview text selection:focus, textview text selection:focus, spinbutton selection:focus, entry selection:focus { background-color: @theme_selected_bg_color; /* used by Firefox for the border!! */ color: @theme_selected_fg_color; } /* It's better not to have too bright text views. */ textview.view, iconview.view, treeview.view, GtkHTML { /* For Evolution (not enough; see entries section below) */ background-color: @view_color; color: @theme_text_color; } textview.view:disabled, iconview.view:disabled, treeview.view:disabled { color: @insensitive_fg_color; } /* This is for highlighting the current line in source views. */ textview { background-color: shade (@view_color, 1.2); /* #dddddd; */ color: @theme_text_color; } widget.view, widget.view:disabled { background-color: @theme_bg_color; color: @theme_text_color; } /* Exceptional views */ calendar.view, iconview.view, iconview, GtkDialog .view { background-color: @view_color; color: @theme_fg_color; /*background-color: @theme_bg_color;*/ background-image: none; } /************** * Separators * **************/ treeview separator, separator { color: darker (@theme_bg_color); } .pane-separator, paned > separator { border-style: none; border-image: none; border-width: 0px; border-radius: 0; background-color: shade(@theme_bg_color,1.2); color: shade(@theme_selected_bg_color, 1.5); background-repeat: no-repeat; background-position: center; background-image: url("assets/pane-separator-grip.png"); } .pane-separator:hover, .pane-separator:selected, paned > separator:hover, paned > separator:selected { background-image: url("assets/pane-separator-grip-hover.png"); } .pane-separator.vertical, paned.vertical > separator { background-image: url("assets/pane-separator-grip-vertical.png"); } .pane-separator.vertical:hover, .pane-separator.vertical:selected, paned.vertical > separator:hover, paned.vertical > separator:selected { background-image: url("assets/pane-separator-grip-vertical-hover.png"); } .dnd { border-width: 1px; border-style: solid; border-color: @theme_selected_bg_color; border-radius: 0; } /************ * Spinners * ************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background-image: none; background-color: transparent; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:active, spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:active:disabled, spinner:checked:disabled { opacity: 0.5; } /**************** * Text Entries * ****************/ spinbutton, entry { background-color: @entry_color; border-width: 1px; border-style: solid; border-radius: 0px; color: @theme_fg_color; box-shadow: inset 0 6px alpha(black, 0.03), inset 0 5px alpha(black, 0.06), inset 0 3px alpha(black, 0.1), inset 0 2px alpha(black, 0.2), inset 1px 1px alpha(black, 0.3); } spinbutton:not(.vertical), entry { padding: 2px 4px; min-height: 20px; text-shadow: 1px 1px 0px black; } spinbutton.vertical { padding: 4px 2px; } /*.toolbar .entry { background-color: #303030; }*/ entry:selected { background-color: @theme_selected_fg_color; } entry:selected:focus { background-color: @theme_selected_bg_color; } spinbutton:focus, entry:focus { border-image: none; border-style: solid; border-color: @theme_selected_fg_color; /*box-shadow: none;*/ } spinbutton:disabled, entry:disabled { background-color: @theme_bg_color; color: @insensitive_fg_color; box-shadow: none; text-shadow: none; } spinbutton:not(.vertical) progress, spinbutton:not(.vertical) progress:focus, entry progress, entry progress:focus { margin-left: 2px; margin-right: 2px; border-image: none; border-style: none; background-color: transparent; background-image: /*linear-gradient(to top, transparent 2px, white 2px, white 3px, @theme_selected_bg_color 3px, @theme_selected_bg_color 5px, transparent 5px);*/ linear-gradient(to bottom, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 25%, @progressbar_background_b 43%, shade(@progressbar_background_b, 1.08) 44%, shade(@progressbar_background_a, 0.91)); background-size: auto; box-shadow: none; } /*entry progress.pulse, entry progress.pulse:focus { background-image: linear-gradient(to top, transparent 2px, white 2px, white 3px, @borders 3px, @borders 5px, transparent 5px); }*/ entry:active { background-color: shade(@theme_selected_bg_color, 1.23); } /* Correction for Yelp and Evolution */ textview.entry, textview entry, GtkHTML.entry { background-color: @view_color; color: @theme_text_color; } /* for Totem's search */ /*.entry GtkEntry { background-color: transparent; }*/ cursor-handle.top, cursor-handle.bottom { background-color:transparent; box-shadow: none; border-style: none; border-radius: 0px; border-width: 0px; } /******************* * Symbolic images * *******************/ /* No need to do anything. */ /**************** * Progress bar * ****************/ progressbar { padding: 0px; /* since gtk-3.14, these cause bad text positioning */ /*-GtkProgressBar-xspacing: 0; -GtkProgressBar-yspacing: 0;*/ } progressbar.horizontal trough, levelbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, levelbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar row, progressbar row.view, progressbar row:hover, progressbar row:selected, progressbar row:selected:focus { border-image: none; border-radius: 0px; background-image: linear-gradient(-45deg, alpha(@progressbar_pattern, 0.09), alpha(@progressbar_pattern, 0.09) 25%, transparent 25%, transparent 50%, alpha(@progressbar_pattern, 0.09) 50%, alpha(@progressbar_pattern, 0.09) 75%, transparent 75%, transparent), linear-gradient(to bottom, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 25%, @progressbar_background_b 43%, shade(@progressbar_background_b, 1.08) 44%, shade(@progressbar_background_a, 0.91)); } progressbar row:selected, progressbar row:selected:focus { color: @theme_fg_color; } progressbar.vertical row, progressbar.vertical row.view, progressbar.vertical row:hover, progressbar.vertical row:selected, progressbar.vertical row:selected:focus { background-image: linear-gradient(-135deg, alpha(@progressbar_pattern, 0.09), alpha(@progressbar_pattern, 0.09) 25%, transparent 25%, transparent 50%, alpha(@progressbar_pattern, 0.09) 50%, alpha(@progressbar_pattern, 0.09) 75%, transparent 75%, transparent), linear-gradient(to right, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 25%, @progressbar_background_b 43%, shade(@progressbar_background_b, 1.08) 44%, shade(@progressbar_background_a, 0.91)); } progressbar progress { background-image: linear-gradient(to bottom, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 26%, @progressbar_background_b 47%, shade(@progressbar_background_b, 1.09) 48%, shade(@progressbar_background_a, 0.89)); } progressbar.vertical progress { background-image: linear-gradient(to right, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 26%, @progressbar_background_b 47%, shade(@progressbar_background_b, 1.09) 48%, shade(@progressbar_background_a, 0.89)); } trough row { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.7), shade(@less_dark_color, 1.6)); border-width: 0px; border-style: none; border-radius: 0px; /*border-color: shade(@theme_selected_bg_color, 1.6);*/ border-color: shade(@theme_bg_color, 1.4); padding: 1px; } .trough row:selected, .trough row:selected:focus { border-image: none; } progressbar progress { border-radius: 0px; border-style: none; border-image: none; /*color: @theme_main_color;*/ /*border-color: @progressbar_border;*/ } progressbar trough, levelbar trough { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.4), @theme_bg_color 50%, shade(@theme_bg_color, 1.8)); border-width: 0px; border-style: none; border-image: none; border-radius: 0px; } progressbar.vertical trough, levelbar.vertical trough { background-image: linear-gradient(to right, shade(@theme_bg_color, 0.4), @theme_bg_color 50%, shade(@theme_bg_color, 1.8)); } /*************** * GtkLevelBar * ***************/ levelbar block { min-width: 32px; min-height: 6px; } levelbar.vertical block { min-width: 6px; min-height: 32px; } levelbar.horizontal.discrete block { margin: 0 2px; } levelbar.vertical.discrete block { margin: 2px 0; } levelbar block:not(.empty) { border-image: none; background-color: #4a90d9; border-radius: 0px; } levelbar block.low { background-image: linear-gradient(to bottom, shade(@warning_bg_color, 1.2), shade(@warning_bg_color, 0.7)); } levelbar.vertical block.low { background-image: linear-gradient(to right, shade(@warning_bg_color, 1.2), shade(@warning_bg_color, 0.7)); } levelbar block.high { background-image: linear-gradient(to bottom, shade(@success_color, 1.2), shade(@success_color, 0.7)); } levelbar.vertical block.high { background-image: linear-gradient(to right, shade(@success_color, 1.2), shade(@success_color, 0.7)); } levelbar block.full { border-style: none; background-image: linear-gradient(to bottom, shade(@link_color, 1.2), shade(@link_color, 0.6)); } levelbar.vertical block.full { border-style: none; background-image: linear-gradient(to right, shade(@link_color, 1.2), shade(@link_color, 0.6)); } levelbar block.empty { background-color: transparent; background-image: linear-gradient(to bottom, shade(@less_dark_color, 1.7), shade(@less_dark_color, 0.5)); } levelbar.vertical block.empty { background-color: transparent; background-image: linear-gradient(to right, shade(@less_dark_color, 1.7), shade(@less_dark_color, 0.5)); } /********** * Frames * **********/ frame > border, /* 3.22.24 */ /*frame,*/ .frame, calendar { padding: 2px; } frame > border, /*frame,*/ .frame { color: @theme_fg_color; border-style: solid; border-width: 1px; border-color: @theme_main_color; /* used by Firefox */ padding: 0px; /*background-image: linear-gradient(to bottom, shade(@theme_bg_color, 1.33), shade(@theme_bg_color, 1.06) 8px, @theme_bg_color 18px, @theme_bg_color);*/ } /* For some reason unknown to me, these are sometimes borderless,... */ notebook frame, notebook .frame, notebook viewport { /*background-image: none;*/ /*background-color: @theme_bg_color;*/ /* ... sometimes bordered! */ /*padding: 0px;*/ } /************* * Notebooks * *************/ notebook { background-color: transparent; } /* gtk-3.12 */ notebook, notebook > header { background-image: none; background-color: transparent; border-style: none; border-image: none; border-width: 0px; } notebook > stack { padding: 0px; /*disabled because XFCE does not play nice with it (redrawing problems)*/ /*background-image: linear-gradient(to bottom, shade(@theme_bg_color, 1.35), shade(@theme_bg_color, 1.05) 20%, @theme_bg_color 30%, @theme_bg_color);*/ background-color: @theme_bg_color; /*background-clip: border-box;*/ color: @theme_fg_color; /* gdebi bug? */ border: 1px outset shade(@bg_color,0.8); } /* make exceptions for Nemo, Nautilus and SpaceFM */ /*NemoWindow notebook, NautilusWindow notebook, FMMainWindow notebook { background-image: linear-gradient(to bottom, @theme_bg_color, @theme_bg_color); } */ notebook.arrow:disabled { color: transparent; } notebook > header tab { min-width: 30px; min-height: 16px; border-radius: 0px; padding: 3px 8px 0px; border-style: solid; border-width: 2px; background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 0.8), shade(@button_gradient_color_b, 0.8)); } notebook > header tab:checked { background-image: linear-gradient(to bottom, @notebook_active_tab_a, @notebook_active_tab_b); } notebook > header.top tab { /* top right-left bottom */ padding: 2px 8px 1px; } notebook > header.top tab:checked { padding: 3px 8px 1px; } notebook > header.bottom tabs tab { padding: 1px 8px 2px; } notebook > header.bottom tabs tab:checked { padding: 1px 8px 3px; } notebook > header.left tabs tab, notebook > header.left tabs tab:checked, notebook > header.right tabs tab, notebook > header.right tabs tab:checked { padding: 3px 6px 3px; } notebook > header.left tabs tab:checked { background-image: linear-gradient(to right, @notebook_active_tab_a, @notebook_active_tab_b); } notebook > header.right tabs tab:checked { background-image: linear-gradient(to left, @notebook_active_tab_a, @notebook_active_tab_b); } notebook > header.bottom tabs tab:checked { background-image: linear-gradient(to top, @notebook_active_tab_a, @notebook_active_tab_b); } /* close button styling */ notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:hover:checked { background-color: transparent; background-image: none; border-image: none; border-color: transparent; } notebook > header > tabs > arrow { min-height: 12px; min-width: 12px; border-radius: 0; } notebook > header > tabs > arrow:disabled { color: black; } 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.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"); } /*************** * GtkTreeView * ***************/ treeview { -GtkTreeView-vertical-separator: 0; } treeview.view, treeview.view:disabled { color: @theme_fg_color; /*background-color: @theme_bg_color;*/ } treeview .view { color: @theme_fg_color; } /* row as a separator */ treeview.view.separator, treeview.view.separator:hover { color: alpha(@light_frame_color, 0.6); } treeview.view:hover { /*color: @theme_main_color;*/ background-color: alpha(@theme_selected_bg_color, 0.2); } treeview.view:drop(active) { /*color: @theme_main_color;*/ background-color: alpha(@theme_selected_bg_color, 0.4); box-shadow: inset 0 0 0 1px green; } treeview.view:selected { border-style: solid; border-width: 1px 0px 0px 0px; border-radius: 0px; background-image: linear-gradient(to bottom, #303030, #0c0c0c); } treeview.view.trough { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.4), @theme_bg_color 50%, shade(@theme_bg_color, 1.8)); border-width: 0px; border-style: none; border-image: none; border-radius: 0px; padding: 0px; } treeview.view.progressbar { border-width: 0px; border-style: none; border-image: none; border-radius: 0px; background-image: linear-gradient(-45deg, alpha(@progressbar_pattern, 0.09), alpha(@progressbar_pattern, 0.09) 25%, transparent 25%, transparent 50%, alpha(@progressbar_pattern, 0.09) 50%, alpha(@progressbar_pattern, 0.09) 75%, transparent 75%, transparent), linear-gradient(to bottom, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 25%, @progressbar_background_b 43%, shade(@progressbar_background_b, 1.08) 44%, shade(@progressbar_background_a, 0.91)); } /*GtkTreeView row:selected:disabled { color: @theme_selected_fg_color; }*/ treeview row:nth-child(odd), treeview row:nth-child(odd):hover { background-color: shade(@theme_bg_color, 0.93); } treeview row:nth-child(even), treeview row:nth-child(even):hover { background-color: @theme_bg_color; } treeview row:nth-child(odd):disabled, treeview row:nth-child(even):disabled { color: @insensitive_fg_color; } treeview column:sorted row:nth-child(odd), treeview column:sorted row:nth-child(odd):hover { background-color: shade(@theme_bg_color, 0.85); } treeview column:sorted row:nth-child(even), treeview column:sorted row:nth-child(even):hover { background-color: shade(@theme_bg_color, 0.9); } column-header { padding: 1px 2px; } column-header button, treeview button { border-width: 2px 0px 2px 1px; border-radius: 0; border-style: solid; } column-header button:hover, treeview button:hover { border-width: 2px 0px 2px 1px; border-radius: 0; border-style: solid; background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 0.8), shade(@button_gradient_color_b, 0.8)); } .cell { padding: 2px; border-width: 0px; } /************ * GtkScale * ************/ scale { min-height: 10px; min-width: 10px; } scale slider, scale slider:hover { min-height: 20px; min-width: 16px; border-width: 0px; border-radius: 0px; border-style: none; margin: -8px 0; color: transparent; background-color: transparent; } scale.vertical slider, scale.vertical slider:hover { min-width: 20px; min-height: 16px; margin: 0 -8px; } scale slider:disabled { color: transparent; background-color: transparent; } .scale.slider.fine-tune:active, .scale.slider.fine-tune:active:hover, .scale.slider.fine-tune.horizontal:active, .scale.slider.fine-tune.horizontal:active:hover { background-size: 80%; background-repeat: no-repeat; background-position: center; } scale trough { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.5), shade(@theme_bg_color, 1.7)); border-width: 0px; border-radius: 0px; margin: 8px 0; } scale.vertical trough { background-image: linear-gradient(to right, shade(@theme_bg_color, 0.5), shade(@theme_bg_color, 1.7)); margin: 0 8px; } scale trough:disabled { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.85), shade(@theme_bg_color, 1.4)); } scale.vertical trough:disabled { background-image: linear-gradient(to right, shade(@theme_bg_color, 0.85), shade(@theme_bg_color, 1.4)); } scale fill, scale highlight { background-image: linear-gradient(to bottom, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 26%, @progressbar_background_b 47%, shade(@progressbar_background_b, 1.09) 48%, shade(@progressbar_background_a, 0.89)); border-radius: 0px; } scale.vertical fill, scale.vertical highlight { background-image: linear-gradient(to right, @progressbar_background_a, shade(@progressbar_background_b, 1.1) 26%, @progressbar_background_b 47%, shade(@progressbar_background_b, 1.09) 48%, shade(@progressbar_background_a, 0.89)); } scale marks.top { margin-bottom: 0px; margin-top: 12px; } scale marks.bottom { margin-top: 0px; margin-bottom: 12px; } scale.fine-tune marks.top { margin-bottom: 0px; margin-top: 12px; } scale.fine-tune marks.bottom { margin-top: 0px; margin-bottom: 12px; } 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; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox { /* align with side buttons */ padding: 0; color: @theme_fg_color; text-shadow: 0 -1px black; } combobox :hover { text-shadow: none; } combobox .separator { /* always disable separators */ -GtkWidget-horizontal-separator: 0; -GtkWidget-vertical-separator: 0; } /* compensation for combo shadow */ /*GtkTreeMenu .menuitem *,*/ combobox menu { /*color: @theme_selected_fg_color;*/ text-shadow: none; } /* Yet another change in gtk-3.18 for breaking themes! */ /*combobox *, combobox *:hover, combobox *:hover:active, combobox *:active, combobox *:disabled { background-image: none; background-color: transparent; }*/ /*********** * Buttons * ***********/ button { min-height: 16px; min-width: 16px; padding: 2px 4px; /*margin: 0px;*/ border-radius: 0px; border-width: 3px; border-style: solid; /*text-shadow: 0 -1px black;*/ color: @theme_fg_color; background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); margin: -1px; } button.image-button, .primary-toolbar.toolbar button.image-button { padding: 3px 4px 4px 4px; } button image, button image:hover, button image:active, button image:hover:active, button image:disabled, button label, button label:hover, button label:active, button label:hover:active, button label:disabled { background-image: none; background-color: transparent; } button:hover, button.flat:hover { background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 1.1), shade(@button_gradient_color_b, 1.1)); } button:active, button:checked, button.flat:active, button.flat:checked, headerbar button.titlebutton:active, .titlebar button.titlebutton:active, calendar.header button.titlebutton:active, headerbar button.titlebutton:checked, .titlebar button.titlebutton:checked, calendar.header button.titlebutton:checked { /* some apps need this */ color: @theme_fg_color; border-style: solid; /*background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.97), shade(@button_gradient_color_a, 0.9));*/ background-image: linear-gradient(to bottom, #4978a7, #345372 31%, #2e4964 32%, #5ba0e5); } button:hover:active, button:hover:checked, button.flat:hover:active, button.flat:hover:checked, headerbar button.titlebutton:hover:active, .titlebar button.titlebutton:hover:active, calendar.header button.titlebutton:hover:active, headerbar button.titlebutton:hover:checked, .titlebar button.titlebutton:hover:checked, calendar.header button.titlebutton:hover:checked { color: @theme_fg_color; border-style: solid; /*background-image: linear-gradient(to bottom, @button_gradient_color_b, shade(@button_gradient_color_a, 1.1));*/ background-image: linear-gradient(to bottom, #5f8cb9, #41678d 31%, #2e4964 32%, #6daae7); } button:disabled { background-color: transparent; background-image: linear-gradient(to bottom, alpha(@button_gradient_color_a, 0.5), alpha(@button_gradient_color_b, 0.5)); color: @insensitive_fg_color; -gtk-icon-effect: dim; } button:active:disabled, button:checked:disabled, button:disabled:active, button:disabled:checked, headerbar button.titlebutton:active:disabled, .titlebar button.titlebutton:active:disabled, calendar.header button.titlebutton:active:disabled, headerbar button.titlebutton:hover:checked:disabled, .titlebar button.titlebutton:hover:checked:disabled, calendar.header button.titlebutton:hover:checked:disabled, headerbar button.titlebutton:disabled:active, .titlebar button.titlebutton:disabled:active, calendar.header button.titlebutton:disabled:active, headerbar button.titlebutton:hover:disabled:checked, .titlebar button.titlebutton:hover:disabled:checked, calendar.header .button.titlebutton:hover:disabled:checked { background-color: transparent; /*background-image: linear-gradient(to bottom, alpha(shade(@button_gradient_color_b, 0.97), 0.5), alpha(shade(@button_gradient_color_a, 0.9), 0.5));*/ background-image: linear-gradient(to bottom, alpha(#4978a7,0.55), alpha(#345372,0.55) 31%, alpha(#2e4964,0.55) 32%, alpha(#5ba0e5,0.55)); color: @insensitive_fg_color; } button.color { padding: 4px; } /*button.color colorswatch:only-child { box-shadow: 0 1px rgba(255, 255, 255, 0.76923); }*/ button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } /*button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { box-shadow: none; }*/ button:focus, switch:focus, scale:focus { outline-width: 1px; /*box-shadow: 0 0 0 -1 cyan;*/ } button.flat:not(:hover):not(:active):not(:checked) { background-color: transparent; background-image: none; /*border: none;*/ border-radius: 0px; border-color: transparent; border-width: 3px; border-style: solid; border-image-source: none; margin: -1px; } /****************************** * Destructive action buttons * ******************************/ button.destructive-action { background-image: linear-gradient(to bottom, mix (@button_gradient_color_a, red, 0.3), mix (@button_gradient_color_b, red, 0.3)); } button.destructive-action:hover { background-image: linear-gradient(to bottom, mix (@button_gradient_color_a, red, 0.5), mix (@button_gradient_color_b, red, 0.5)); } button.destructive-action:active, button.destructive-action:checked { background-image: linear-gradient(to bottom, #a74949, #723434 31%, #642e2e 32%, #e55b5b); } /**************************** * Suggested action buttons * ****************************/ button.suggested-action { background-image: linear-gradient(to bottom, mix (@button_gradient_color_a, green, 0.3), mix (@button_gradient_color_b, green, 0.3)); } button.suggested-action:hover { background-image: linear-gradient(to bottom, mix (@button_gradient_color_a, green, 0.5), mix (@button_gradient_color_b, green, 0.5)); } button.suggested-action:active, button.suggested-action:checked { background-image: linear-gradient(to bottom, #49a754, #347237 31%, #2e6430 32%, #5be562); } /****************** * Linked Buttons * ******************/ /* We don't make them different. */ button.link label{ text-decoration: underline; } /***************** * GtkSpinButton * *****************/ spinbutton button, spinbutton button:disabled, spinbutton button:hover, spinbutton button:active, spinbutton button:focus, spinbutton button:checked { background-image: none; background-color: transparent; /*border-width: 1px;*/ border-style: none; border-image: none; padding: 0px 4px 0px 0px; } spinbutton.vertical button, spinbutton.vertical button:disabled, spinbutton.vertical button:hover, spinbutton.vertical button:active, spinbutton.vertical button:focus, spinbutton.vertical button:checked { /* top right bottom left */ padding: 4px 0px 4px 0px; } spinbutton button, spinbutton button:focus { color: shade(@theme_text_color, 0.75); } spinbutton button:hover, spinbutton button:active, spinbutton button:checked { color: @theme_text_color; } spinbutton button:disabled { color: shade(@insensitive_fg_color, 0.7); } spinbutton:not(.vertical) button { margin: 0px; min-height: 16px; } spinbutton:not(.vertical) entry { margin: 0px; min-width: 28px; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } spinbutton.vertical button { margin: 0px; min-height: 16px; min-width: 16px; } spinbutton.vertical entry { margin: 0px; min-height: 26px; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } /************** * Scrollbars * **************/ scrollbar { background-image: none; border-style: solid; /* due to a bug, emacs' scrollbar can't have a transparent background */ background-color: @theme_bg_color; /*box-shadow: inset 0 0 0 -1px black;*/ border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 1.5) shade(@theme_bg_color, 0.7) shade(@theme_bg_color, 0.5) shade(@theme_bg_color, 1.5); } scrollbar trough { border-style: none; border-width: 0px; background-image: linear-gradient(to bottom, @theme_bg_color, @theme_bg_color 33.32%, shade(@theme_bg_color, 0.5) 33.33%, shade(@theme_bg_color, 1.7) 66.66%, @theme_bg_color 66.67%, @theme_bg_color); border-radius: 0px; } scrollbar.vertical trough { border-style: none; border-width: 0px; background-image: linear-gradient(to right, @theme_bg_color, @theme_bg_color 33.32%, shade(@theme_bg_color, 0.5) 33.33%, shade(@theme_bg_color, 1.7) 66.66%, @theme_bg_color 66.67%, @theme_bg_color); border-radius: 0px; } scrollbar slider { min-width: 34px; min-height: 8px; background-color: transparent; background-image: url("assets/holes_tiny_horiz.png"), linear-gradient(to right, #616161, #414141); background-repeat: no-repeat; background-position: center; border-radius: 0px; border-width: 2px; border-style: solid; margin: 0px; /*-4px 0 */ } scrollbar.vertical slider { min-width: 8px; min-height: 34px; background-color: transparent; background-image: url("assets/holes_tiny_vert.png"), linear-gradient(to bottom, #616161, #414141); border-radius: 0px; border-width: 2px; border-style: solid; margin: 0px; /*0px -4px*/ } scrollbar slider:hover { background-image: url("assets/holes_tiny_glow_horiz.png"), linear-gradient(to right, #616161, #414141); } scrollbar.vertical slider:hover { background-image: url("assets/holes_tiny_glow_vert.png"), linear-gradient(to bottom, #616161, #414141); } scrollbar slider:hover:active { color: @theme_fg_color; border-style: solid; background-image: url("assets/holes_tiny_glow_horiz.png"), linear-gradient(to right, #525252, #525252); } scrollbar.vertical slider:hover:active { background-image: url("assets/holes_tiny_glow_vert.png"), linear-gradient(to bottom, #525252, #525252); } scrollbar button, scrollbar.horizontal button, scrollbar.vertical button { min-width: 12px; min-height: 12px; color: @theme_fg_color; border-image: none; border-style: none; border-width: 0px; background-image: none; background-color: transparent; } scrollbar button:hover, scrollbar.horizontal button:hover, scrollbar.vertical button:hover { background-image: none; background-color: transparent; color: @theme_selected_fg_color; border-image: none; border-style: none; border-width: 0px; } scrollbar button:hover:active, scrollbar.horizontal button:hover:active, scrollbar.vertical button:hover:active { background-image: none; background-color: transparent; color: @theme_selected_fg_color; border-image: none; border-style: none; border-width: 0px; } scrollbar button:disabled, scrollbar.horizontal button:disabled, scrollbar.vertical button:disabled { background-image: none; background-color: transparent; color: black; border-image: none; border-style: none; border-width: 0px; } scrollbar slider:disabled { background-image: none; background-color: shade(@theme_bg_color, 1.5); } scrollbar.fine-tune slider:hover:active { background-image: url("assets/holes_tiny_glow_fine_horiz.png"), linear-gradient(to right, #525252, #525252); } scrollbar.fine-tune.vertical slider:active { background-image: url("assets/holes_tiny_glow_fine_vert.png"), linear-gradient(to bottom, #525252, #525252); } scrolledwindow junction, .scrollbars-junction { background-image: none; background-color: transparent; } 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"); } /********* * Menus * *********/ /* arrows (a ridiculous change in gtk-3.22) */ menu menuitem arrow, .menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } menu > arrow.top, .menu > arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } menu > arrow.bottom, .menu > arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /* this controls the general appearance of the menubar */ menubar { background-image: none; background-color: @theme_bg_color; border-width: 0px; border-style: none; padding: 0px; color: @theme_text_color; -GtkWidget-window-dragging: true; /*-GtkMenuBar-internal-padding: 0;*/ } /*.menubar * { background-color: transparent; }*/ menubar menuitem, menubar > menuitem { padding: 3px 7px; } menu menuitem { padding: 3px 4px; } menubar menuitem, menubar > menuitem, menu menuitem { border-style: solid; border-width: 1px; border-image: none; border-color: transparent; background-color: transparent; } menubar menuitem:hover, menubar > menuitem:hover { background-image: none; background-color: @theme_bg_color; border-style: solid; border-width: 1px; border-radius: 0px; border-image: url("assets/menuitem-border-dark.svg") 2 / 2px stretch; /* join menuitem to menu border-radius: 3px 3px 0px 0px; border-width: 0px;*/ } /*menubar menuitem *:disabled,*/ /* gdebi bug? */ menubar menuitem *:hover, /*menubar > menuitem *:disabled,*/ menubar > menuitem *:hover { color: @theme_selected_fg_color; } menu *:disabled { -gtk-icon-effect:dim; } menu, menubar menu, menuitem menu { background-color: shade(@theme_selected_bg_color, 0.8); background-image: linear-gradient(to bottom, shade(@theme_bg_color, 1.5), @theme_bg_color 11px, @theme_bg_color); border-style: none; border-width: 0px 1px 1px 1px; border-radius: 0; padding: 1px; } /*.menu *{ background-color: transparent; }*/ menuitem, menuitem * { padding: 2px 0px; } /* scroll arrows */ menu button { border-image: none; color: @theme_fg_color; background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color, 1.3), shade(@theme_selected_bg_color, 0.5)); } menu button:hover { color: @theme_main_color; background-image: linear-gradient(to bottom, #ffffff, #808080); } menu button:disabled { background-image: none; background-color: transparent; border-style: none; } menuitem:hover, menu menuitem:hover { background-image: linear-gradient(to bottom, #303030, #0c0c0c); color: @theme_selected_fg_color; border-style: solid; border-width: 1px; border-radius: 0px; border-image: url("assets/menuitem-hiver-border-dark.svg") 1 / 1px stretch; } menuitem *:hover, menu menuitem *:hover { color: @theme_selected_fg_color; } menu menuitem:disabled, menu menuitem *:disabled { color: @insensitive_fg_color; } menuitem.separator { padding: 4px; border-style: none; border-color: @theme_selected_bg_color; } menuitem.accelerator, menu menuitem.accelerator { color: alpha(@theme_main_color, 0.66); } menuitem.accelerator:hover, menuitem.accelerator:active, menu menuitem.accelerator:hover, menu menuitem.accelerator:active { color: alpha(@theme_text_color, 0.45); } 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; } /*************** * Menu Button * ***************/ /* compensation for combo shadow */ /*GtkMenuButton*/ menu { text-shadow: none; } /************ * Toolbars * ************/ toolbar { padding: 0; border-radius: 0px; border-width: 3px; border-style: solid; color: @theme_fg_color; background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); -GtkWidget-window-dragging: true; /*-GtkToolbar-button-relief: normal;*/ } toolbar button.text-button { padding: 2px 5px; } toolbar button.image-button { padding: 5px 4px 4px 5px; } /******************** * Primary Toolbars * ********************/ .toolbar:disabled { background-image: none; background-color: shade(@theme_bg_color, 0.97); } /* (primary) toolbar buttons */ toolbar button, .primary-toolbar button, .primary-toolbar toolbar button, .primary-toolbar.toolbar button, toolbar button:disabled, .primary-toolbar button:disabled, .primary-toolbar toolbar button:disabled, .primary-toolbar.toolbar button:disabled, toolbar button:disabled:hover, .primary-toolbar button:disabled:hover, .primary-toolbar toolbar button:disabled:hover, .primary-toolbar.toolbar button:disabled:hover { border-image: none; border-color: transparent; background-image: none; background-color: transparent; } toolbar button:active, .primary-toolbar button:active, .primary-toolbar toolbar button:active, .primary-toolbar.toolbar button:active, toolbar button:checked, .primary-toolbar button:checked, .primary-toolbar toolbar button:checked, .primary-toolbar.toolbar button:checked { color: @theme_fg_color; border-style: solid; /*background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.97), shade(@button_gradient_color_a, 0.9));*/ background-image: linear-gradient(to bottom, #4978a7, #345372 31%, #2e4964 32%, #5ba0e5); } toolbar button:hover:active, .primary-toolbar button:hover:active, .primary-toolbar toolbar button:hover:active, .primary-toolbar.toolbar button:hover:active, toolbar button:active:hover, .primary-toolbar button:active:hover, .primary-toolbar toolbar button:active:hover, .primary-toolbar.toolbar button:active:hover, toolbar button:checked:hover, .primary-toolbar button:checked:hover, .primary-toolbar toolbar button:checked:hover, .primary-toolbar.toolbar button:checked:hover { color: @theme_fg_color; border-style: solid; /*background-image: linear-gradient(to bottom, @button_gradient_color_b, shade(@button_gradient_color_a, 1.1));*/ background-image: linear-gradient(to bottom, #5f8cb9, #41678d 31%, #2e4964 32%, #6daae7); } toolbar button:hover, .primary-toolbar button:hover, .primary-toolbar toolbar button:hover, .primary-toolbar.toolbar button:hover, toolbar combobox button, .primary-toolbar toolbar combobox button, .primary-toolbartoolbar combobox button { background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); } .toolbar GtkSeparatorToolItem { border-style: solid; border-width: 1px; border-color: shade(@theme_bg_color, 0.85); } /* progressbars on primary toolbar entries are special */ toolbar entry.progressbar { background-image: linear-gradient(to bottom, @trough_bg_color_a, @trough_bg_color_b); border-width: 1px; border-radius: 0px; border-style: solid; border-color: shade(@inactive_frame_color, 0.925); border-image: none; color: @theme_text_color; } /******************* * Inline toolbars * *******************/ .inline-toolbar.toolbar { border-radius: 0px; border-width: 3px; border-style: solid; background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); } /*************** * Header bars * ***************/ .titlebar, headerbar { border-width: 0px; border-style: solid; padding: 3px; background-color: @theme_bg_color; border-color: alpha(@frame_color, 0.6); background-image: linear-gradient(to bottom, @notebook_active_tab_a, @notebook_active_tab_b); } .titlebar:backdrop, headerbar:backdrop { background-image: none; } .titlebar:backdrop, headerbar:backdrop, headerbar:backdrop label, .titlebar:backdrop label, headerbar:backdrop button, .titlebar:backdrop button { color: @insensitive_fg_color; } headerbar button.text-button { padding: 2px 6px; } headerbar button.image-button { padding: 5px 4px 4px 5px; } /******* * OSD * *******/ .background.osd { color: @osd_fg; background-image: none; background-color: @osd_bg; } GtkOverlay.osd { background-color: transparent; } .osd.button, .osd.button:active, .osd .button, .osd button, .osd .button:active, .osd.button:checked, .osd .button:checked, .osd button:checked { border-width: 1px; border-style: solid; border-image: none; border-color: @osd_button_border; border-radius: 5px; } .osd.button, .osd .button, .osd button { padding: 4px; background-image: linear-gradient(to bottom, @osd_button_bg_a, @osd_button_bg_b 68%, @osd_button_bg_c); color: @osd_button_fg; text-shadow: 0 -1px @osd_button_shadow; -gtk-icon-shadow: 0 -1px @osd_button_shadow; } .osd.button, .osd.button:hover, .osd.button:active, .osd .button, .osd button, .osd .button:hover, .osd .button:active, .osd.button:checked, .osd .button:checked, .osd button:checked { background-color: transparent; } .osd.button:disabled, .osd .button:disabled, .osd button:disabled { background-image: none; background-color: @osd_button_bg_insensitive; } .osd.button:active:disabled, .osd .button:active:disabled, .osd button:active:disabled, .osd.button:disabled:active, .osd .button:disabled:active, .osd.button:checked:disabled, .osd .button:checked:disabled, .osd button:checked:disabled, .osd.button:disabled:checked, .osd .button:disabled:checked, .osd button:disabled:checked { background-image: none; background-color: @osd_button_bg_insensitive_active; } .osd.button:hover, .osd .button:hover, .osd button:hover { color: @osd_button_fg_hover; } .osd .button:active, .osd .button:hover:active, .osd .button:checked, .osd .button:hover:checked, .osd button:hover:checked { color: @osd_button_fg_active; } .osd.button:disabled, .osd.button:disabled:active, .osd .button:disabled, .osd button:disabled, .osd .button:active *:disabled, .osd .button:checked *:disabled, .osd button:checked *:disabled { color: @osd_button_fg_insensitive; } .osd.button:hover, .osd .button:hover, .osd button:hover { background-image: linear-gradient(to bottom, @osd_button_bg_hover_a, @osd_button_bg_hover_b 68%, @osd_button_bg_hover_c); } .osd.button:active, .osd.button:active:hover, .osd .button:active, .osd .button:active:hover, .osd GtkMenuButton.button:active, .osd.button:checked, .osd.button:checked:hover, .osd .button:checked, .osd button:checked, .osd .button:checked:hover, .osd button:checked:hover, .osd GtkMenuButton.button:checked { background-image: linear-gradient(to bottom, @osd_button_bg_active_a, @osd_button_bg_active_b 68%, @osd_button_bg_active_c); } .osd GtkMenuButton.button:active, .osd GtkMenuButton.button:checked { background-color: transparent; border-color: @osd_button_border; } .osd GtkMenuButton.button:active, .osd GtkMenuButton.button:checked { color: @osd_button_fg_active; text-shadow: 0 -1px @osd_button_shadow; } .osd.toolbar, .osd toolbar { color: @osd_fg; text-shadow: 0 1px @osd_text_shadow; padding: 10px; border-style: none; border-radius: 7px; background-image: linear-gradient(to bottom, @osd_toolbar_bg_a, @osd_toolbar_bg_b 63%, @osd_toolbar_bg_c); background-color: transparent; -GtkToolbar-button-relief: normal; } .osd.toolbar .button, .osd toolbar button { padding: 4px; border-width: 1px 0; border-radius: 0; box-shadow: inset -1px 0 @osd_button_inset; } .osd.toolbar .button:first-child, .osd toolbar button:first-child { border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; box-shadow: inset -1px 0 @osd_button_inset; } .osd.toolbar .button:last-child, .osd toolbar button:last-child { box-shadow: none; border-radius: 0 5px 5px 0; border-width: 1px 1px 1px 0; } .osd.toolbar .button:only-child, .osd.toolbar GtkToolButton .button, .osd.toolbar GtkToolButton:only-child .button, .osd.toolbar GtkToolButton:last-child .button, .osd.toolbar GtkToolButton:first-child .button, .osd toolbar button:only-child, .osd toolbar toolbutton button, .osd toolbar toolbutton:only-child button, .osd toolbar toolbutton:last-child button, .osd toolbar toolbutton:first-child button { border-width: 1px; border-radius: 5px; border-style: solid; box-shadow: none; } .osd.toolbar .separator { color: shade(@osd_lowlight, 0.80); } /* used by gnome-settings-daemon's media-keys OSD and Epiphany */ .osd.trough, .osd trough { background-color: @osd_trough_bg; } .osd.progressbar, .osd progressbar { background-color: @osd_fg; } .osd .scale.trough, .osd scale trough { border-color: @osd_button_border; background-image: linear-gradient(to bottom, shade(@osd_button_border, 0.70), shade(@osd_button_border, 0.90)); background-color: transparent; } .osd GtkProgressBar, GtkProgressBar.osd, progressbar.osd { padding: 0; } .osd GtkProgressBar.trough, GtkProgressBar.osd.trough, progressbar.osd trough { padding: 0; border-image: none; border-style: none; border-width: 0; background-image: none; background-color: transparent; border-radius: 0; } .osd GtkProgressBar.progressbar, GtkProgressBar.osd.progressbar, progressbar.osd progress { border-style: none; background-color: shade(@progressbar_background_b, 1.3); background-image: linear-gradient(to bottom, @progressbar_background_a, @progressbar_background_b); border-radius: 0; } /************************** * Selection Mode classes * **************************/ /* Not different from other toolbars. */ /**************** * GtkAssistant * ****************/ GtkAssistant .sidebar .highlight, assistant .sidebar label.highlight { color: @theme_fg_color; background-image: linear-gradient(to bottom, mix (@notebook_active_tab_a, white, 0.2), mix (@notebook_active_tab_a, white, 0.05) 44%, shade(@notebook_active_tab_a, 0.9) 45%, black); background-color: @darker_color; border-style: none; padding: 5px 8px; border-radius: 0px; box-shadow: inset 0px 2px 0px alpha(@entry_shadow, 0.1), inset 1px 1px 0px alpha(@entry_shadow, 0.33), inset 0 -1px 0px black, inset -1px -1px 0px black; } GtkAssistant .sidebar, assistant .sidebar { padding: 12px; border-radius: 0px; border-style: none; border-width: 0px; color: mix (@theme_fg_color, @theme_bg_color, 0.40); /*?*/ background-color: @darker_color; background-image: linear-gradient(to bottom, shade(@darker_color, 1.33), shade(@darker_color, 1.06) 8px, @darker_color 18px, @darker_color); } /************* * GtkSwitch * *************/ switch { font-weight: bold; } switch trough { color: @theme_fg_color; border-style: solid; border-width: 1px; border-radius: 0px; } switch trough:active, switch:checked { /*color: @theme_main_color;*/ background-image: linear-gradient(to bottom, shade(@active_switch_bg_color, 0.9), shade(@active_switch_bg_color, 1.1)); } switch trough:disabled, switch:disabled { background-image: none; background-color: shade(@theme_bg_color, 0.9); color: @insensitive_fg_color; } switch slider { border-radius: 0px; border-width: 3px; padding: 0px; border-style: solid; background-image: url("assets/switch-slider-grip.svg"), linear-gradient(to bottom, shade(@button_gradient_color_a, 1.1), shade(@button_gradient_color_b, 0.9)); background-repeat: no-repeat; background-position: center; } switch slider:disabled { background-image: none; background-color: shade(@switch_slider_color, 0.6); } GtkStatusbar { padding: 5px; color: @theme_fg_color; } GtkStatusbar .frame { background-image: none; /* gtk-3.12 */ background-color: transparent; } scrolledwindow { /*background-color: @theme_bg_color;*/ } /* no double frames */ scrolledwindow viewport.frame { border-style: none; } image, image:hover, image:active, image:hover:active, image:disabled, label, label:hover, label:active, label:hover:active, label:disabled, /* gtk-3.12 */ GtkBox, GtkBox:disabled, GtkGrid, GtkGrid:disabled { background-image: none; background-color: transparent; } viewport, iconview { border-radius: 1px; padding: 0px; /*background-color: @theme_bg_color;*/ } iconview.view.cell:selected, iconview.view.cell:selected:focus { background-color: transparent; border-style: solid; border-width: 3px; border-radius: 6px; border-color: shade(@theme_selected_bg_color, 1.5); color: @theme_text_color; /* FIXME: this probably needs to be better; * see https://bugzilla.gnome.org/show_bug.cgi?id=644157 */ outline-color: @progressbar_border; outline-style: solid; outline-offset: 3px; } /* These are for Evolution, whose new version can also be made fully readable with this theme fortunately. */ EMailDisplay, EPreviewPane entry { background-color: @view_color; color: @theme_text_color; } /* make plain-text preview readable */ EMailDisplay GtkExpander label { color: @theme_text_color; } EMailDisplay .expander:hover { color: @theme_fg_color; border-color: @theme_fg_color; } GtkHTML GtkExpander label { color: @theme_text_color; } GtkHTML:active { color: @theme_text_color; } EShellWindow *:active { background-color: #717175; } EShellWindow button *:active, EShellWindow button *:checked { background-color: transparent; } EShellWindow:disabled { /* removes the "flash" when quitting */ background-color: @theme_bg_color; } /***************** * Color Chooser * *****************/ colorswatch/*, colorswatch:selected*/ { background-image: none; background-color: transparent; border-style: solid; border-color: transparent; border-width: 1px; padding: 2px; } colorswatch.dark overlay:hover { background-image: linear-gradient(to bottom, alpha(white, 0) 40%, alpha(white, 0.3)); } colorswatch.light overlay:hover { background-image: linear-gradient(to top, alpha(black, 0) 40%, alpha(black, 0.1)); } colorswatch overlay:selected { border-style: solid; border-width: 1px; } colorswatch.light overlay:selected { border-color: alpha(black, 0.5); color: black; } colorswatch.dark overlay:selected { border-color: alpha(white, 0.5); color: white; } colorswatch.light overlay:selected:hover { border-color: alpha(black, 0.8); } colorswatch.dark overlay:selected:hover { border-color: alpha(white, 0.8); } colorswatch.light overlay:selected, colorswatch.dark overlay:selected, colorswatch.light overlay:selected:hover, colorswatch.dark overlay:selected:hover { background-image: none; background-color: transparent; } /*************************** * Radio and Check Buttons * ***************************/ GtkCheckButton, GtkRadioButton, radio, check, radio:selected, check:selected, radio:selected:focus, check:selected:focus, cell.radio, cell.check, cell.radio:selected, cell.check:selected, cell.radio:selected:focus, cell.check:selected:focus { background-color: transparent; border-width: 0px; border-style: none; } check:hover, check:selected:hover, radio:hover, radio:selected:hover, treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { background-color: transparent; } /***************** * GtkCheckButton * *****************/ GtkCheckButton:hover { background-color: alpha(@theme_main_color, 0.09); /*shade(@theme_bg_color, 0.9)*/ } GtkCheckButton:selected:hover { background-color: alpha(@theme_main_color, 0.15); /*shade(@theme_bg_color, 0.8)*/ } /***************** * GtkRadioButton * *****************/ GtkRadioButton:hover { background-color: alpha(@theme_main_color, 0.09); /*shade(@theme_bg_color, 0.9)*/ } GtkRadioButton:selected:hover { background-color: alpha(@theme_main_color, 0.15); /*shade(@theme_bg_color, 0.8)*/ } /************* * 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:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } .expander { border-style: solid; border-width: 1px; border-radius: 2px; border-color: @internal_element_color; color: @internal_element_color; background-image: none; background-color: transparent; } .expander:active { border-color: @internal_element_color; color: @internal_element_color; background-color: transparent; } .expander:hover { border-color: @internal_element_prelight; color: @internal_element_prelight; } .expander row { border-color: @internal_element_color; color: @internal_element_color; } .expander row:selected, .expander row:selected:focus { border-image: none; border-color: shade(@internal_element_prelight, 1.3); color: shade(@internal_element_prelight, 1.3); background-image: none; background-color: transparent; } .expander row:selected:hover { background-color: transparent; } .expander column:sorted:selected, .expander column:sorted:selected:hover { background-image: none; background-color: transparent; } /**************** * Content view * ****************/ .content-view.view { background-color: @content_view_bg; } .content-view.view:hover { background-color: shade(@content_view_bg, 1.1); color: @theme_text_color; } .content-view.view:selected, .content-view.view:active { background-color: @theme_selected_bg_color; } .content-view.view:disabled { background-color: @theme_unfocused_base_color; } GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } iconview.content-view.check { background-image: url("assets/grid-selection-unchecked.svg"); background-color: transparent; } iconview.content-view.check:active, iconview.content-view.check:checked { background-image: url("assets/grid-selection-checked.svg"); background-color: transparent; } .content-view.view.check, .content-view.view.check:active, .content-view.view.check:checked { background-color: transparent; } iconview.content-view.check:hover, iconview.content-view.check:disabled, iconview.content-view.check:selected { background-color: transparent; } /********************* * App Notifications * *********************/ .app-notification { border-style: solid; border-color: @app_notification_border; border-width: 0 1px 1px 1px; border-radius: 0 0 5px 5px; padding: 8px; background-image: linear-gradient(to bottom, @app_notification_a, @app_notification_b 20%, @app_notification_c 30%, @app_notification_c); color: @theme_text_color; text-shadow: 0 1px black; /*font-weight: bold;*/ } /************* * Calendars * *************/ calendar.view { border-radius: 0px; border-style: solid; border-width: 1px; border-color: @frame_color; padding: 2px; } calendar.header { border-radius: 0; border-style: solid; border-width: 2px 0px 2px 1px; background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); } calendar.button, calendar.button:disabled { background-image: none; background-color: transparent; } .highlight, calendar.highlight { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; border-radius: 0; padding: 0px; border-width: 0px; } calendar:indeterminate { color: alpha(currentColor,0.3); } /************** * GtkInfoBar * **************/ infobar { border-width: 0; border-style: none; } .info { background-color: @info_bg_color; color: @info_fg_color; } .warning { background-color: @warning_bg_color; color: @warning_fg_color; } .question { background-color: @question_bg_color; color: @question_fg_color; } .error { background-color: @error_bg_color; color: @error_fg_color; } /* some apps need this */ label { color: @theme_fg_color; } :disabled label, label:disabled { color: @insensitive_fg_color; } /* however...*/ row:selected label { color: @theme_selected_fg_color; } label.keycap { border: 2px outset shade(@base_color, 0.7); padding: 2px; text-shadow: 1px 1px 0px black; } /************** * Dim labels * **************/ .dim-label, .dim-label:hover, .dim-label:focus, .view.dim-label { color: mix (@theme_fg_color, @theme_bg_color, 0.50); text-shadow: none; } .dim-label:selected, .dim-label:selected:focus { color: mix (@theme_selected_fg_color, @theme_base_color, 0.50); text-shadow: none; } /*********** * Sidebar * ***********/ .sidebar > separator, .sidebar > separator:hover { color: alpha(@frame_color, 0.6); } stacksidebar.sidebar row { padding: 8px 4px; } stacksidebar.sidebar row > label { padding-left: 5px; padding-right: 5px; } /*stacksidebar.sidebar row.needs-attention > .label { background-size: 5px 5px, 0 0; }*/ /**************** * File Chooser * ****************/ placessidebar row { min-height: 24px; padding: 0px; } placessidebar row > revealer { padding: 0 10px; } placessidebar row image.sidebar-icon:dir(ltr) { padding-right: 5px; } placessidebar row image.sidebar-icon:dir(rtl) { padding-left: 5px; } placessidebar row label.sidebar-label:dir(ltr) { padding-right: 5px; } placessidebar row label.sidebar-label:dir(rtl) { padding-left: 5px; } /* label padding */ revealer > box { padding: 6px; } /************************** * Client Side Decoration * **************************/ .window-frame, decoration { border-radius: 0px; border-width: 0px; /* h, v, blur, spread, color */ box-shadow: 0 -1px 0 0 #B3B3B3, 0 3px 8px 3px black; /* resize cursor area */ margin: 4px; } .window-frame.solid-csd, .solid-csd decoration { /* resize cursor area */ margin: 0; padding: 4px; background-color: @theme_bg_color; box-shadow: inset 0 0 1px 1px shade(@theme_bg_color, 0.6), inset 1px 1px 0 0 shade(@theme_bg_color, 1.4); } .titlebar .titlebutton { background: none; border-color: transparent; border-image: none; padding: 5px 5px 6px 5px; } .titlebar .titlebutton:hover { background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 1.1), shade(@button_gradient_color_b, 1.1)); } .titlebar .titlebutton:active { background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.97), shade(@button_gradient_color_a, 0.9)); } /* Now they even control menu and tooltip shadows under CSD!! Without this, GTK3 menus and tooltips would cause trouble under Enlightenment. Damn! */ .window-frame.csd.popup, .window-frame.csd.tooltip, .window-frame.csd.message-dialog, .csd.popup decoration, tooltip.csd decoration, messagedialog.csd decoration { border-radius: 0; box-shadow: 0 1px 4px 0 alpha (black, 0.7); } /********************** * GtkPopover * * (GtkVolumeButton) * **********************/ popover { border-radius: 2px; background-clip: border-box; border-color: shade(@theme_bg_color, 0.5); border-width: 1px; border-style: solid; box-shadow: 0 1px 5px black; margin: 3px; } /* popover button, popover button:hover, popover button:active, popover button:disabled { background-image: none; border-style: none; border-image: none; } */ modelbutton.flat, popover.background checkbutton, popover.background radiobutton, .menuitem.button.flat { min-height: 16px; padding: 3px 7px; border-radius: 0px; border-style: solid; border-width: 1px; border-image: none; border-color: transparent; background-color: transparent; } modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, .menuitem.button.flat:hover { background-image: linear-gradient(to bottom, #303030, #0c0c0c); color: @theme_selected_fg_color; border-style: solid; border-width: 1px; border-radius: 0px; border-image: url("assets/menuitem-hiver-border-dark.svg") 1 / 1px stretch; } 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"); } /************************ * overshoot/undershoot * ************************/ /* displays at end of mouse scrolling */ overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(@overshoot_bg_color), to(alpha(@overshoot_bg_color, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(73, 87, 56, 0.17)), to(rgba(73, 87, 56, 0))); background-size: 100% 20%, 100% 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border-style: none; box-shadow: none; } /* overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@overshoot_backdrop_bg_color, 0.07)), to(alpha(@overshoot_backdrop_bg_color, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } */ overshoot.top:backdrop { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(@overshoot_backdrop_bg_color), to(rgba(137, 145, 131, 0))); background-size: 100% 20%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border-style: none; box-shadow: none; } overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(@overshoot_bg_color), to(rgba(158, 179, 137, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(73, 87, 56, 0.17)), to(rgba(73, 87, 56, 0))); background-size: 100% 20%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border-style: none; box-shadow: none; } overshoot.bottom:backdrop { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(@overshoot_backdrop_bg_color), to(rgba(137, 145, 131, 0))); background-size: 100% 20%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border-style: none; box-shadow: none; } overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(@overshoot_bg_color), to(rgba(158, 179, 137, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(73, 87, 56, 0.07)), to(rgba(73, 87, 56, 0))); background-size: 20% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border-style: none; box-shadow: none; } overshoot.left:backdrop { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(@overshoot_backdrop_bg_color), to(rgba(137, 145, 131, 0))); background-size: 20% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border-style: none; box-shadow: none; } overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(@overshoot_bg_color), to(rgba(158, 179, 137, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(73, 87, 56, 0.07)), to(rgba(73, 87, 56, 0))); background-size: 20% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border-style: none; box-shadow: none; } overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(@overshoot_backdrop_bg_color), to(rgba(137, 145, 131, 0))); background-size: 20% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border-style: none; box-shadow: none; } undershoot.top { background-color: transparent; background-image: linear-gradient(to bottom, alpha(black, 0.5), alpha(black, 0.15), alpha(black, 0)); background-size: 10px 50%; background-repeat: repeat-x; background-origin: content-box; background-position: center top; } undershoot.bottom { background-color: transparent; background-image: linear-gradient(to top, alpha(black, 0.5), alpha(black, 0.15), alpha(black, 0)); background-size: 10px 50%; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; } undershoot.left { background-color: transparent; background-image: linear-gradient(to right, alpha(black, 0.5), alpha(black, 0.15), alpha(black, 0)); background-size: 50% 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; } undershoot.right { background-color: transparent; background-image: linear-gradient(to left, alpha(black, 0.5), alpha(black, 0.15), alpha(black, 0)); background-size: 50% 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; } /************************************************************** * dark widgets ***************************************************************/ /************************* * Check and Radio items * *************************/ /* First draw menu check and radio items */ menuitem radio, menuitem radio:hover, menuitem radio:disabled, menuitem.check, menuitem.check:hover, menuitem.check:disabled { background-color: transparent; /*-gtk-icon-source: none;*/ border-style: none; border-image: none; } menuitem.radio, /* Firefox */ menuitem radio { -gtk-icon-source: url("assets/radio-menuitem-unchecked.svg"); } menuitem.radio:hover, menuitem radio:hover { -gtk-icon-source: url("assets/radio-menuitem-unchecked-prelight.svg"); } menuitem.radio:disabled, menuitem radio:disabled { -gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg"); } menuitem.radio:active, menuitem.radio:checked, menuitem radio:active, menuitem radio:checked { -gtk-icon-source: url("assets/radio-menuitem-checked.svg"); } menuitem.radio:active:hover, menuitem.radio:checked:hover, menuitem radio:active:hover, menuitem radio:checked:hover { -gtk-icon-source: url("assets/radio-menuitem-checked-prelight.svg"); } menuitem.radio:active:disabled, menuitem.radio:disabled:active, menuitem.radio:checked:disabled, menuitem.radio:disabled:checked. menuitem radio:active:disabled, menuitem radio:disabled:active, menuitem radio:checked:disabled, menuitem radio:disabled:checked { -gtk-icon-source: url("assets/radio-menuitem-checked-insensitive.svg"); } menuitem.radio:indeterminate, menuitem radio:indeterminate { -gtk-icon-source: url("assets/radio-menuitem-mixed.svg"); } menuitem.radio:indeterminate:hover, menuitem radio:indeterminate:hover { -gtk-icon-source: url("assets/radio-menuitem-mixed-prelight.svg"); } menuitem.radio:indeterminate:disabled, menuitem radio:indeterminate:disabled { -gtk-icon-source: url("assets/radio-menuitem-mixed-insensitive.svg"); } menuitem.check, menuitem check { -gtk-icon-source: url("assets/checkbox-menuitem-unchecked.svg"); } menuitem.check:hover, menuitem check:hover { -gtk-icon-source: url("assets/checkbox-menuitem-unchecked-prelight.svg"); } menuitem.check:active, menuitem.check:checked, menuitem check:active, menuitem check:checked { -gtk-icon-source: url("assets/checkbox-menuitem-checked.svg"); } menuitem.check:active:hover, menuitem.check:checked:hover, menuitem check:active:hover, menuitem check:checked:hover { -gtk-icon-source: url("assets/checkbox-menuitem-checked-prelight.svg"); } menuitem.check:active:disabled, menuitem.check:disabled:active, menuitem.check:checked:disabled, menuitem.check:disabled:checked, menuitem check:active:disabled, menuitem check:disabled:active, menuitem check:checked:disabled, menuitem check:disabled:checked { -gtk-icon-source: url("assets/checkbox-menuitem-checked-insensitive.svg"); } menuitem.check:indeterminate, menuitem check:indeterminate { -gtk-icon-source: url("assets/checkbox-menuitem-mixed.svg"); } menuitem.check:indeterminate:hover, menuitem check:indeterminate:hover { -gtk-icon-source: url("assets/checkbox-menuitem-mixed-prelight.svg"); } menuitem.check:indeterminate:disabled, menuitem check:indeterminate:disabled { -gtk-icon-source: url("assets/checkbox-menuitem-mixed-insensitive.svg"); } /* Now draw regular check and radio items */ check:indeterminate, check:indeterminate:hover, check row:selected:indeterminate, check row:selected:focus:indeterminate, check:indeterminate.button.flat, check:indeterminate:hover.button.flat, check row:selected:indeterminate.button.flat, check row:selected:focus:indeterminate.button.flat { -gtk-icon-source: url("assets/checkbox-mixed-dark.svg"); } check:indeterminate:disabled, check row:selected:indeterminate:disabled, check row:selected:focus:indeterminate:disabled, check:indeterminate:disabled.button.flat, check row:selected:indeterminate:disabled.button.flat, check row:selected:focus:indeterminate:disabled.button.flat { -gtk-icon-source: url("assets/checkbox-mixed-insensitive-dark.svg"); } check, check:hover, check row:selected, check row:selected:focus, check.button.flat, check:hover.button.flat, check row:selected.button.flat, check row:selected:focus.button.flat { -gtk-icon-source: url("assets/checkbox-unchecked-dark.svg"); } check:disabled, check row:selected:disabled, check row:selected:focus:disabled, check:disabled.button.flat, check row:selected:disabled.button.flat, check row:selected:focus:disabled.button.flat { -gtk-icon-source: url("assets/checkbox-unchecked-insensitive-dark.svg"); } check:active, check row:selected:active, check row:selected:focus:active, check:active.button.flat, check row:selected:active.button.flat, check row:selected:focus:active.button.flat, check:checked, check:checked:hover, check row:selected:checked, check row:selected:focus:checked, check:checked.button.flat, check:checked:hover.button.flat, check row:selected:focus:checked.button.flat { -gtk-icon-source: url("assets/checkbox-checked-dark.svg"); } check:active:disabled, check row:selected:active:disabled, check row:selected:focus:active:disabled, check:active:disabled.button.flat, check row:selected:active:disabled.button.flat, check row:selected:focus:active:disabled.button.flat, check:checked:disabled, check row:selected:checked:disabled, check row:selected:focus:checked:disabled, check:checked:disabled.button.flat, check row:selected:checked:disabled.button.flat, check row:selected:focus:checked:disabled.button.flat { -gtk-icon-source: url("assets/checkbox-checked-insensitive-dark.svg"); } radio:indeterminate, radio:indeterminate:hover, radio row:selected:indeterminate, radio row:selected:focus:indeterminate, radio:indeterminate.button.flat, radio:indeterminate:hover.button.flat, radio row:selected:indeterminate.button.flat, radio row:selected:focus:indeterminate.button.flat { -gtk-icon-source: url("assets/radio-mixed-dark.svg"); } radio:indeterminate:disabled, radio row:selected:indeterminate:disabled, radio row:selected:focus:indeterminate:disabled, radio:indeterminate:disabled.button.flat, radio row:selected:indeterminate:disabled.button.flat, radio row:selected:focus:indeterminate:disabled.button.flat { -gtk-icon-source: url("assets/radio-mixed-insensitive-dark.svg"); } radio, radio:hover, radio row:selected, radio row:selected:focus, radio.button.flat, radio:hover.button.flat, radio row:selected.button.flat, radio row:selected:focus.button.flat { -gtk-icon-source: url("assets/radio-unselected-dark.svg"); } radio:disabled, radio row:selected:disabled, radio row:selected:focus:disabled { -gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg"); } radio:active, radio row:selected:active, radio row:selected:focus:active, radio:active.button.flat, radio row:selected:active.button.flat, radio row:selected:focus:active.button.flat, radio:checked, radio:checked:hover, radio row:selected:focus:checked, radio:checked.button.flat, radio:checked:hover.button.flat, radio row:selected:focus:checked.button.flat { -gtk-icon-source: url("assets/radio-selected-dark.svg"); } radio:active:disabled, radio row:selected:active:disabled, radio row:selected:focus:active:disabled, radio:active:disabled.button.flat, radio row:selected:active:disabled.button.flat, radio row:selected:focus:active:disabled.button.flat, radio:checked:disabled, radio row:selected:checked:disabled, radio row:selected:focus:checked:disabled, radio:checked:disabled.button.flat, radio row:selected:checked:disabled.button.flat, radio row:selected:focus:checked:disabled.button.flat { -gtk-icon-source: url("assets/radio-selected-insensitive-dark.svg"); } .sidebar .radio:active, .sidebar .radio:active:focus, .sidebar .radio:active:hover, .sidebar .radio:checked, .sidebar .radio:checked:focus, .sidebar .radio:checked:hover { -gtk-icon-source: url("assets/sidebar-radio-checked-dark.svg"); } .sidebar .radio:hover { -gtk-icon-source: url("assets/sidebar-radio-prelight.svg"); } .sidebar .radio:active:selected, .sidebar .radio:active:selected:focus, .sidebar .radio:checked:selected, .sidebar .radio:checked:selected:focus { -gtk-icon-source: url("assets/sidebar-radio-selected-dark.svg"); } .sidebar .radio:selected:hover, .sidebar .radio:selected:focus { -gtk-icon-source: url("assets/sidebar-radio-selected-prelight.svg"); } /* Also draw toggle button check items (a redundant Gtk+ widget) */ .button.check, .button.check:hover { border-style: none; border-image: none; background-image: url("assets/checkbox-unchecked-dark.svg"); } .button.check:disabled { border-style: none; border-image: none; background-image: url("assets/checkbox-unchecked-insensitive-dark.svg"); } .button.check:active, .button.check:active:hover { background-image: url("assets/checkbox-checked-dark.svg"); } .button.check:active:disabled { background-image: url("assets/checkbox-checked-insensitive-dark.svg"); } .button.check:indeterminate, .button.check:indeterminate:hover { background-image: url("assets/checkbox-mixed-dark.svg"); } .button.check:indeterminate:disabled { background-image: url("assets/checkbox-mixed-insensitive-dark.svg"); } checkbutton:disabled label, radiobutton:disabled label { color: @insensitive_fg_color; } /*********** * Entries * ***********/ spinbutton, entry, switch trough, switch { border-image: url("assets/entry-border-dark.svg") 1 / 1px stretch; } switch trough:active, switch:checked { border-image: url("assets/switch-trough-active.svg") 1 / 1px stretch; } frame > border, /* 3.22.24 */ /*frame,*/ .frame, calendar.view { border-image: url("assets/frame-border-dark.svg") 1 / 1px stretch; } /*********** * Sliders * ***********/ scale slider, scale.horizontal slider { background-image: url("assets/knob_horizontal.png"); } scale slider:disabled, scale.horizontal slider:disabled { background-image: url("assets/scale-slider-horizontal-insensitive-dark.png"); } scale.vertical slider { background-image: url("assets/knob_vertical.png"); } scale.vertical slider:disabled { background-image: url("assets/scale-slider-vertical-insensitive-dark.png"); } GtkScale.scale-has-marks-above.slider.horizontal { background-image: url("assets/scale-slider-marks-above-horizontal-dark.svg"); } GtkScale.scale-has-marks-above.slider.horizontal:disabled { background-image: url("assets/scale-slider-marks-above-horizontal-insensitive-dark.svg"); } GtkScale.scale-has-marks-above.slider.vertical { background-image: url("assets/scale-slider-marks-above-vertical-dark.svg"); } GtkScale.scale-has-marks-above.slider.vertical:disabled { background-image: url("assets/scale-slider-marks-above-vertical-insensitive-dark.svg"); } GtkScale.scale-has-marks-below.slider.horizontal { background-image: url("assets/scale-slider-marks-below-horizontal-dark.svg"); } GtkScale.scale-has-marks-below.slider.horizontal:disabled { background-image: url("assets/scale-slider-marks-below-horizontal-insensitive-dark.svg"); } GtkScale.scale-has-marks-below.slider.vertical { background-image: url("assets/scale-slider-marks-below-vertical-dark.svg"); } GtkScale.scale-has-marks-below.slider.vertical:disabled { background-image: url("assets/scale-slider-marks-below-vertical-insensitive-dark.svg"); } .cursor-handle.top { background-image: url("assets/scale-slider-marks-above-horizontal-dark.svg"); } .cursor-handle.bottom { background-image: url("assets/scale-slider-marks-below-horizontal-dark.svg"); } /*********** * Buttons * ***********/ button, toolbar, .inline-toolbar.toolbar, toolbar button:hover, .primary-toolbar button:hover, .primary-toolbar toolbar button:hover, .primary-toolbar.toolbar button:hover, toolbar combobox button, .primary-toolbar toolbar combobox button, .primary-toolbar.toolbar combobox button, switch slider, .titlebar .titlebutton:hover { border-image: url("assets/button-border-dark.svg") 3 / 3px stretch; } switch slider:active { border-image: url("assets/switch-border-active.svg") 3 / 3px stretch; } button:active, button:hover:active, toolbar button:active, .primary-toolbar button:active, .primary-toolbar toolbar button:active, .primary-toolbar.toolbar button:active, toolbar button:hover:active, .primary-toolbar button:hover:active, .primary-toolbar toolbar button:hover:active, .primary-toolbar.toolbar button:hover:active, .titlebar .titlebutton:active, button:checked, button:hover:checked, toolbar button:checked, .primary-toolbar button:checked, .primary-toolbar toolbar button:checked, .primary-toolbar.toolbar button:checked, .toolbar button:hover:checked, .primary-toolbar button:hover:checked, .primary-toolbar toolbar button:hover:checked, .primary-toolbar.toolbar button:hover:checked, .titlebar .titlebutton:checked { border-image: url("assets/button-active-border-dark.svg") 3 / 3px stretch; } /*.toolbar .button:hover, .primary-toolbar .button:hover, .primary-toolbar .toolbar .button:hover, .primary-toolbar.toolbar .button:hover { border-image: url("assets/toolbar-button-hover.svg") 3 / 3px stretch; }*/ button:disabled { border-image: url("assets/button-border-insensitive.svg") 3 / 3px stretch; } button:active:disabled, button:checked:disabled, button:disabled:active, button:disabled:checked, headerbar button.titlebutton:active:disabled, .titlebar button.titlebutton:active:disabled, calendar.header button.titlebutton:active:disabled, headerbar button.titlebutton:hover:checked:disabled, .titlebar button.titlebutton:hover:checked:disabled, calendar.header button.titlebutton:hover:checked:disabled, headerbar button.titlebutton:disabled:active, .titlebar button.titlebutton:disabled:active, calendar.header button.titlebutton:disabled:active, headerbar button.titlebutton:hover:disabled:checked, .titlebar button.titlebutton:hover:disabled:checked, calendar.header button.titlebutton:hover:disabled:checked { border-image: url("assets/button-active-border-insensitive.svg") 3 / 3px stretch; } button.default, notebook button.default { border-image: url("assets/button-default-border-dark.svg") 3 / 3px stretch; } button.default:active, notebook button.default:active, button.default:checked, notebook button.default:checked { border-image: url("assets/button-default-active-border-dark.svg") 3 / 3px stretch; } column-header button, treeview button, calendar.header { border-image: url("assets/column-header-border-dark.svg") 2 0 2 1 / 2px 0px 2px 1px stretch; } /********************* * Notebook and Tabs * *********************/ /*notebook > stack { border-image: url("assets/notebook-border-dark.svg") 0 1 1 1 / 0px 1px 1px 1px stretch; }*/ notebook > header tab { border-image: url("assets/tab-border.svg") 2 / 2px stretch; } notebook > header tab:checked { border-image: url("assets/tab-active-border.svg") 2 / 2px stretch; } notebook > header tab.left:checked { border-image: url("assets/tab-active-border-left.svg") 2 / 2px stretch; } notebook > header tab.right:checked { border-image: url("assets/tab-active-border-right.svg") 2 / 2px stretch; } notebook > header tab.bottom:checked { border-image: url("assets/tab-active-border-bottom.svg") 2 / 2px stretch; } notebook:focus { background-color: shade(@theme_bg_color, 1.1); } /************** * Tree Views * **************/ treeview.view:selected, treeview.view:selected:focus { border-image: url("assets/row-selected-dark.svg") 1 0 0 0 / 1px 0px 0px 0px stretch; } treeview.view.trough:selected, treeview.view.trough:selected:focus { border-image: none; } /********* * Menus * *********/ menu, menubar menu, menuitem menu { border-image: url("assets/menu-border-dark.svg") 0 1 1 1 / 0px 1px 1px 1px stretch; } /*************** * Scroll Bars * ***************/ scrollbar slider { border-image: url("assets/scrollbar-slider-border-dark.svg") 2 / 2px stretch; } scrollbar.vertical slider { border-image: url("assets/scrollbar-slider-border-vertical.svg") 2 / 2px stretch; } scrolledwindow junction, .scrollbars-junction { border-image: none; border-width: 0px; } /* 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(#deddda, 1.8); @define-color wm_unfocused_title #deddda; @define-color wm_highlight #000000; @define-color wm_borders_edge #313132; @define-color wm_bg_a shade(#3d3d3e, 1.2); @define-color wm_bg_b #3d3d3e; @define-color wm_shadow alpha(#000000, 0.35); @define-color wm_border alpha(#000000, 0.18); @define-color wm_button_hover_color_a shade(#3d3d3e, 1.3); @define-color wm_button_hover_color_b #3d3d3e; @define-color wm_button_active_color_a shade(#3d3d3e, 0.85); @define-color wm_button_active_color_b shade(#3d3d3e, 0.89); @define-color wm_button_active_color_c shade(#3d3d3e, 0.9); @define-color content_view_bg @view_color;