* { padding: 0px; background-clip: padding-box; /* Style properties */ -GtkToolButton-icon-spacing: 4; -textview-error-underline-color: @error_color; -paned-handle-size: 5; -GtkScrolledWindow-scrollbar-spacing: 0; /* this is more stylish with this theme */; -GtkToolItemGroup-expander-size: 12; -expander-expander-size: 12; -treeview-expander-size: 13; -treeview-horizontal-separator: 4; -GtkIMHtml-hyperlink-color: @link_color; -GtkHTML-link-color: @link_color; -WnckTasklist-fade-overlay-rect: 0; outline-color: alpha(@focus_border, 0.6); outline-style: dotted; outline-offset: -3px; outline-width: 2px; -gtk-icon-style: regular; /* no symbolic icons */ text-shadow: none; } /*************** * Base States * ***************/ .background { color: @theme_fg_color; background-color: @theme_bg_color; border-style: none; border-width: 0px; border-radius: 0px; } .background:backdrop { text-shadow: none; -gtk-icon-shadow: none; } *:hover { background-color: alpha(shade(@theme_bg_color, 1.1), 1.0); color: @theme_fg_color; } *:selected { background-color: shade(@theme_selected_bg_color, 1.23); color: @theme_selected_fg_color; } *:selected:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } *:selected:backdrop { text-shadow: none; -gtk-icon-shadow: none; } *:disabled { } *:active { background-color: shade(@theme_bg_color, 0.915); } .gtkstyle-fallback { background-color: @theme_bg_color; color: @theme_fg_color; } .gtkstyle-fallback:hover { background-color: shade(@theme_bg_color, 1.10); color: @theme_fg_color; } .gtkstyle-fallback:active { background-color: shade(@theme_bg_color, 0.915); color: @theme_fg_color; } .gtkstyle-fallback:disabled { background-color: @less_dark_color; /*@insensitive_bg_color;*/ color: @insensitive_fg_color; border-color: @insensitive_border_color; } .gtkstyle-fallback:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /*Fix for applications that have issues finding a default monospace font*/ .monospace { font-family: Monospace; } /************ * Tooltips * ************/ tooltip, tooltip.background, .tooltip, .tooltip.background { padding: 4px; border-style: solid; border-width: 2px; border-radius: 3px; border-color: #888a85; background-color: @theme_tooltip_bg_color; color: @theme_tooltip_fg_color; text-shadow: none; } tooltip label, .tooltip label { color: @theme_tooltip_fg_color; padding: 4px; text-shadow: none; } /* needed for override CSD setting */ tooltip decoration, .tooltip decoration, tooltip.csd decoration, .tooltip.csd decoration, tooltip.ssd decoration, .tooltip.ssd decoration, tooltip.solid-csd decoration, .tooltip.solid-csd decoration, tooltip.background.csd decoration, .tooltip.background.csd decoration, tooltip.background.ssd decoration, .tooltip.background.ssd decoration, tooltip.background.solid-csd decoration, .tooltip.background.solid-csd decoration { border-radius: 3px; box-shadow: 0 1px 5px @wm_shadow; padding: 0px; } /***************** * Miscellaneous * *****************/ content-view.view.rubberband, .content-view.view.rubberband, view.rubberband, .view.rubberband, rubberband, .rubberband { background-color: alpha(@theme_selected_bg_color, 0.35); background-image: linear-gradient(to bottom, alpha (@theme_selected_bg_color, 0.35), alpha (@theme_selected_bg_color, 0.35)); border-color: @theme_selected_bg_color; border-style: solid; border-width: 1px; border-radius: 2px; } expander { -gtk-icon-style: regular; } /*********** * Sidebar * ***********/ sidebar *, sidebar .view, stacksidebar, stacksidebar .view, placessidebar .view{ -gtk-icon-style: regular; background-color: shade (@theme_bg_color, 1.08); } stacksidebar label, placessidebar label { color:@theme_text_color; padding: 8px 1px 8px 1px; } placessidebar image { -gtk-icon-style: regular; } sidebar frame { border-style: none; } sidebar:backdrop { background-color: shade (@theme_bg_color, 1.08); } placessidebar button{ background-color: transparent; background-image: none; border-style:none; border-image:none; } stacksidebar list row:selected, stacksidebar list row:active, placessidebar list row:selected, placessidebar list row:active, placessidebar list row:selected *, placessidebar list row:active *{ background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color,0.6 ), shade(@theme_selected_bg_color, 1.5)); } /**************** * Floating Bar * ****************/ floating-bar { border-radius: 3px; border-width: 0px; border-style: solid; text-shadow: none; 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, .view, .view:disabled { background-color: @less_dark_color; color: @theme_selected_fg_color; border-radius: 0; /*border-width: 3;*/ } view:selected, view:active, .view:selected, .view:active { background-color: shade(@theme_selected_bg_color, 1.23); color: @theme_selected_fg_color; } view:selected:focus, .view:selected:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /* It's better not to have too bright text views. */ textview text, textview.view:disabled, GtkHTML { /* For Evolution (not enough; see entries section below) */ background-color: @view_color; color: @theme_main_color; } textview text selection, textview text selection:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /* This is for highlighting the current line in source views. */ textview { background-color: #D9D9D9; /* #dddddd; */ color: @theme_main_color; } /* Exceptional views */ calendar.view, iconview.view, dialog .view, dialog view { background-color: @less_dark_color; color: @theme_fg_color; } /* for firefox and probably other apps */ label:selected, label selection, label selection:focus, label selection:hover { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } label:disabled:selected, label selection:disabled { color: @insensitive_fg_color; } label:backdrop:selected, label selection:backdrop { color: @theme_fg_color; } label:backdrop:disabled:selected, label selection:backdrop:disabled { color: @insensitive_fg_color; } /**************************** * Caret for editable text * ****************************/ view, .view{ caret-color:#000000; } entry, .entry { caret-color:#ffffff; } /*hide carot when window is not selected*/ /*do NOT use .view to avoid creating caja desktop flashes*/ /*works in gedit, pluma, etc*/ view:backdrop, entry:backdrop, .entry:backdrop { caret-color:transparent; } /************** * Separators * **************/ treeview separator, separator, .separator { color: darker (@theme_bg_color); background-color: darker (@theme_bg_color); } pane-separator { border-style: none; border-image: none; border-width: 0px; border-radius: 0; background-color: transparent; color: shade(@theme_selected_bg_color, 1.5); background-repeat: no-repeat; background-position: center; background-image: url("assets/pane-separator-grip.svg"); } pane-separator:hover, pane-separator:selected { background-image: url("assets/pane-separator-grip-hover.svg"); } pane-separator.vertical { background-image: url("assets/pane-separator-grip-vertical.svg"); } pane-separator.vertical:hover, pane-separator.vertical:selected { background-image: url("assets/pane-separator-grip-vertical-hover.svg"); } dnd { border-width: 1px; border-style: solid; border-color: @theme_selected_bg_color; border-radius: 0; } /********************* * 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; } /**************** * Text Entries * ****************/ entry { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.2), shade(@theme_bg_color, 0.5) 10%, @theme_bg_color 50%, shade(@theme_bg_color, 1.5)); border-width: 1px; border-style: none; border-radius: 11px; padding: 4px 7px; color: @theme_fg_color; box-shadow: inset 0 -3px alpha(@entry_shadow, 0.04), inset 0 -2px alpha(@entry_shadow, 0.05), inset 0 -1px alpha(@entry_shadow, 0.07); } toolbar entry { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.3), shade(@theme_bg_color, 1.1) 50%, mix(#ffffff, @theme_bg_color, 0.75)); } entry selection:focus { background-color: shade(@theme_selected_bg_color, 0.9); } entry:focus { border-image: none; box-shadow: inset 0 -2px alpha(@entry_shadow, 0.05), inset 0 -1px alpha(@entry_shadow, 0.07); } entry:disabled { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.8), shade(@theme_bg_color, 1.2)); border-image: none; border-style: none; /*border-color: alpha(@inactive_frame_color, 0.3);*/ color: @insensitive_fg_color; box-shadow: none; } entry progressbar, entry progressbar: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); background-size: auto; box-shadow: none; } entry progressbar.pulse, entry progressbar.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, GtkHTML.entry { background-color: @view_color; color: @theme_main_color; } entry.cursor-handle, cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; } cursor-handle.top, cursor-handle.bottom { background-color:transparent; box-shadow: none; border-style: none; border-radius: 0px; border-width: 0px; } entry.cursor-handle.top, cursor-handle.top { -gtk-icon-source: -gtk-icontheme("selection-start-symbolic"); } entry.cursor-handle.bottom, cursor-handle.bottom { -gtk-icon-source: -gtk-icontheme("selection-end-symbolic"); } entry image.left { padding-right: 6px; } entry image.right { padding-left: 6px; } /******************* * Symbolic images * *******************/ /* No need to do anything. */ /**************** * Progress bar * ****************/ progressbar { border-radius: 16px; border-style: none; /* Label font color of progressbar*/ color: @theme_text_color; /*border-color: @progressbar_border;*/ padding: 0px; font-size: smaller; } progressbar progress, /*for most horizontal progressbars*/ .view .progressbar, /*for progressbars in treeviews, these are always horizontal*/ .view:focus .progressbar { /*override selected:focus default*/ min-height: 19px; border-width: 1px; border-style:solid; border-color:transparent; border-radius: 16px; 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.vertical progress { min-width: 19px; border-width: 1px; border-style:solid; border-color:transparent; border-radius: 16px; 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 trough, /*for most horizontal progressbars*/ .view .trough, /*for progressbars in treeviews, these are always horizontal*/ .view:focus .trough{ /*override selected:focus default*/ min-height: 19px; border-width: 0px; border-style: solid; border-radius: 16px; background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.4), @theme_bg_color 50%, shade(@theme_bg_color, 1.8)); } progressbar.vertical trough { min-width: 19px; border-width: 0px; border-style: solid; border-radius: 16px; background-image: linear-gradient(to right, shade(@theme_bg_color, 0.4), @theme_bg_color 50%, shade(@theme_bg_color, 1.8)); } progressbar trough:selected, progressbar trough:selected:focus { border-image: none; } /********** * Frames * **********/ frame, calendar { padding: 2px; } .frame, frame { color: lighter (@theme_fg_color); border-style: solid; padding: 0px; border-radius: 3px; } .frame, frame> border{ box-shadow: none; margin: 0; padding: 0; border-radius: 3px; border-width: 1px; border-style: solid; border-color: alpha(@frame_color, 0.6); } frame.border-inset> border, frame.border-outset> border, frame.border-ridge> border, frame.border-groove> border, .frame.border-inset> border, .frame.border-outset> border, .frame.border-ridge> border, .frame.border-groove> border{ box-shadow: none; margin: 0; padding: 0; border-radius: 3px; border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 1.3); } frame > border.flat, .frame.flat { border-style: none; } .frame.action-bar frame.action-bar { padding: 6px; border-width: 1px 0 0; } /* disable for GTK3-3.16 , issue with caja list-view frame*/ scrolledwindow.frame { /* background-color: transparent; */ -gtk-icon-style: regular; } /* no double frames */ scrolledwindow viewport.frame { border-style: none; } /* level bars as used for password quality or remaining power */ levelbar { min-width: 34px; min-height: 3px; } levelbar.vertical { min-width: 3px; min-height: 34px; } levelbar trough { padding: 2px; border-radius: 2px; background-image: linear-gradient(to bottom, @trough_bg_color_a, @trough_bg_color_b); background-color: transparent; box-shadow: inset 1px 1px alpha(#000, 0.15), inset -1px -1px alpha(#000, 0.15); } levelbar block.filled { border-width: 2px; border-style: solid; border-color: @button_border_active; background-image: -gtk-gradient (linear, 0.45 top, 0.55 bottom, from (shade (@button_bg_active, 1.30)), color-stop (0.40, shade (@button_bg_active, 1.04)), color-stop (0.60, shade (@button_bg_active, 0.92)), to (shade (@button_bg_active, 1.20))); } levelbar.continuous block.filled { padding: 1px; border-radius: 2px; } levelbar.discrete.horizontal block.filled { margin: 0 1px; } levelbar.discrete.vertical block.filled { margin: 1px 0; } .level-bar.indicator-discrete.fill-block.horizontal:first-child { border-radius: 2px 0 0 2px; } .level-bar.indicator-discrete.fill-block.horizontal:last-child { border-radius: 0 2px 2px 0; } .level-bar.indicator-discrete.fill-block.vertical:first-child { border-radius: 2px 2px 0 0; } .level-bar.indicator-discrete.fill-block.vertical:last-child { border-radius: 0 0 2px 2px; } levelbar block.low { border-color: shade(@warning_color, 0.80); background-image: linear-gradient(to bottom, shade(@warning_color, 1.3), @warning_color 75%, shade(@warning_color, 0.90)); } levelbar block.high { border-color: shade(@link_color, 0.85); background-image: linear-gradient(to bottom, shade(@link_color, 1.2), @link_color 75%, shade(@link_color, 0.95)); } levelbar block.full { border-color: shade(@link_color, 0.95); background-image: linear-gradient(to bottom, shade(@link_color, 1.2), @link_color 75%, shade(@link_color, 0.95)); } levelbar block.empty { border: 1px solid #2a76c6; border-radius: 1px; background-color: transparent; border-color: rgba(46, 52, 54, 0.2); box-shadow: none; } levelbar block.empty:backdrop { border-color: rgba(139, 142, 143, 0.15); } /************* * Notebooks * *************/ notebook { background-color: transparent; border-radius: 3px; padding: 1px 0px 1px 1px; } notebook header { background-image: none; background-color: transparent; border-style: none; border-image: none; border-width: 0px; } notebook.frame, printdialog > box.view.vertical.dialog-vbox > box.vertical > notebook, dialog.background.csd > box.vertical.dialog-vbox > notebook, /* eg. meld preferences */ dialog.background.ssd > box.vertical.dialog-vbox > notebook, dialog.background.solid-csd > box.vertical.dialog-vbox > notebook { background-color: @less_dark_color; border-color: @less_dark_color; border-style: solid; border-width: 0px 1px 0px 1px; color: @theme_fg_color; } notebook.arrow:disabled { color: transparent; } notebook tab { border-style: solid; border-width: 1px 1px 0px 1px; border-color: shade(@less_dark_color, 0.75); background-image: linear-gradient(to bottom, shade(@less_dark_color, 1.6), shade(@less_dark_color, 0.5)); } notebook tab:checked { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.75), shade(@less_dark_color, 0.86) 40%, shade(@less_dark_color, 0.95) 70%, @less_dark_color); } /*Keep pluma (etc) tabs from jumping when saving */ notebook header tab image, notebook header tab spinner{ padding: 0px; } notebook header.top tab label{ /* top right-left bottom */ padding: 5px 8px 5px; } notebook header.bottom tab label{ padding: 0px 8px 3px; } notebook header.bottom tab:checked { padding: 0px 8px 3px; background-image: linear-gradient(to top, shade(@less_dark_color, 1.25), shade(@less_dark_color, 1.14) 40%, shade(@less_dark_color, 1.05) 70%, @less_dark_color); } notebook header.bottom tab{ border-radius: 0px 0px 3px 3px; border-width: 0px 1px 1px 1px; } notebook header.left tab label{ border-radius: 3px 0px 0px 3px; padding: 2px 4px 2px; border-width: 1px 0px 1px 1px; } notebook header.right tab label{ border-radius: 0px 3px 3px 0px; padding: 2px 4px 2px; border-width: 1px 1px 1px 0px; } notebook header.left tab:checked, notebook header.right tab:checked { background-image: none; background-color: @less_dark_color; } notebook tab button, notebook tab button:hover, notebook tab button:hover:checked { border-style: none; border-image: none; border-radius: 5px; background-color: transparent; background-image: none; /*-GtkButton-child-displacement-x: 0; -GtkButton-child-displacement-y: 0;*/ } /*** The contents of notebooks ***/ notebook viewport, notebook iconview, /*notebook GtkDrawingArea,*//*no longer recognized by gtk3.20*/ notebook paned, notebook GtkEventBox, notebook frame { background-color: @less_dark_color; } notebook button { background-image: linear-gradient(to bottom, shade(@less_dark_color, 1.3), shade(@less_dark_color, 0.4)); border-color: shade(@button_border, 1.4); } notebook button:hover { background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@less_dark_color, 0.4))); /* this should be defined here to be overriden by the style of toolbar buttons below */ border-image: url("assets/button-border-dark1.svg") 3 / 3px stretch; } notebook button:checked, notebook button:hover:checked, notebook button:active, notebook button:hover:active { border-image: url("assets/button-active-border-dark1.svg") 3 / 3px stretch; } notebook toolbar, notebook inline-toolbar toolbar { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.4), shade(@less_dark_color, 1.36)); border-color: alpha(@light_frame_color, 0.6); /*shade(@less_dark_color, 0.8);*/ } notebook .entry { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.2), shade(@less_dark_color, 0.5) 10%, @less_dark_color 50%, shade(@less_dark_color, 1.5)); box-shadow: inset 0 -3px alpha(@entry_shadow, 0.03), inset 0 -2px alpha(@entry_shadow, 0.04), inset 0 -1px alpha(@entry_shadow, 0.06); } notebook .entry:focus { border-color: shade(@less_dark_color, 1.4); box-shadow: inset 0 -2px alpha(@entry_shadow, 0.04), inset 0 -1px alpha(@entry_shadow, 0.06); } notebook .entry:disabled { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.8), shade(@less_dark_color, 1.2)); } notebook toolbar .entry { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.3), shade(@less_dark_color, 1.1) 50%, mix(#ffffff, @less_dark_color, 0.75)); } notebook scrollbar button, notebook scrollbar button.horizontal, notebook scrollbar button.vertical { border-image: none; border-style: none; border-width: 0px; background-image: none; background-color: transparent; } notebook scrollbar button:hover, notebook scrollbar button.horizontal:hover, notebook scrollbar button.vertical:hover, notebook scrollbar button:hover:active, notebook scrollbar button.horizontal:hover:active, notebook scrollbar button.vertical:hover:active { border-image: none; border-style: none; border-width: 0px; } notebook scrollbar slider:hover, notebook scrollbar slider:hover:active, notebook scrollbar slider.vertical:hover, notebook scrollbar slider.vertical:hover:active { border-color: shade(@scroll_slider_color, 1.1); } notebook column-header button, notebook column-header button:hover { border-image: none; border-width: 0px 0px 1px 1px; border-radius: 0; border-style: solid; border-color: @less_dark_color; } notebook scale.horizontal trough { background-image: linear-gradient(to bottom, @less_dark_color, @less_dark_color 35%, shade(@less_dark_color, 0.5)35%, shade(@less_dark_color, 1.7)65%, @less_dark_color 65%, @less_dark_color); border-width: 0px; border-radius: 2px; margin-left: 8px; margin-right: 8px; } notebook scale.vertical trough { background-image: linear-gradient(to right, @less_dark_color, @less_dark_color 35%, shade(@less_dark_color, 0.5)35%, shade(@less_dark_color, 1.7)65%, @less_dark_color 65%, @less_dark_color); border-width: 0px; margin-top: 8px; margin-bottom: 8px; } notebook.horizontal scale trough:disabled { background-image: linear-gradient(to bottom, @less_dark_color, @less_dark_color 35%, shade(@less_dark_color, 0.85)35%, shade(@less_dark_color, 1.4)65%, @less_dark_color 65%, @less_dark_color); } notebook.vertical scale trough:disabled { background-image: linear-gradient(to right, @less_dark_color, @less_dark_color 35%, shade(@less_dark_color, 0.85)35%, shade(@less_dark_color, 1.4)65%, @less_dark_color 65%, @less_dark_color); } notebook progressbar trough { background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.4), @less_dark_color 50%, shade(@less_dark_color, 1.8)); } notebook progressbar.trough.vertical { background-image: linear-gradient(to right, shade(@less_dark_color, 0.4), @less_dark_color 50%, shade(@less_dark_color, 1.8)); } notebook .pane-separator { color: shade(@theme_selected_bg_color, 2.0); background-repeat: no-repeat; background-position: center; background-image: url("assets/notebook-pane-separator-grip.svg"); } notebook .pane-separator:hover, notebook .pane-separator:selected { background-image: url("assets/notebook-pane-separator-grip-hover.svg"); } notebook .pane-separator.vertical { background-image: url("assets/notebook-pane-separator-grip-vertical.svg"); } notebook .pane-separator.vertical:hover, notebook .pane-separator.vertical:selected { background-image: url("assets/notebook-pane-separator-grip-vertical-hover.svg"); } notebook .sidebar.separator, notebook .sidebar.separator:hover { color: alpha(@light_frame_color, 0.6); } notebook .frame { border-color: alpha(@light_frame_color, 0.6); } /*************** * treeview * ***************/ treeview { background-color: @less_dark_color; -treeview-vertical-separator: 0; } treeview.view, treeview.view:disabled { background-color: @less_dark_color; color: @theme_fg_color; } treeview .view { color: @theme_fg_color; } /*force separators to appear, stop jumping */ treeview.view.separator { min-height: 2px; } /* row as a separator */ treeview.view.separator, treeview.view.separator:hover { color: alpha(@light_frame_color, 0.6); } treeview:hover, notebook container treeview:hover { background-color: alpha(@theme_selected_bg_color, 0.4); } treeview:active, treeview:selected, treeview:selected:focus { background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color,0.6 ), shade(@theme_selected_bg_color, 1.5)); } /* Rows are no longer recognized in gtk3.20! treeview row:nth-child(odd), treeview row:nth-child(odd):hover { background-color: @less_dark_color; } treeview row:nth-child(even), treeview row:nth-child(even):hover { background-color: shade(@less_dark_color, 1.05); } */ treeview:disabled{ color: @insensitive_fg_color; } treeview header button { padding: 0px 2px; } treeview header button, treeview button { border-image: none; border-width: 0px 0px 1px 1px; border-radius: 0; border-style: solid; border-color: @less_dark_color; } treeview header button { background-image: linear-gradient(to bottom, shade(@less_dark_color, 1.3), shade(@less_dark_color, 0.4)); } treeview button { background-image: linear-gradient(to bottom, shade(@less_dark_color, 1.3), shade(@less_dark_color, 0.4)); } treeview header button:hover, treeview button:hover { border-image: none; border-width: 0px 0px 1px 1px; border-radius: 0; border-style: solid; border-color: @less_dark_color; background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 1.5), shade(@button_gradient_color_a, 0.7) 39%, @theme_bg_color 40%, shade(@less_dark_color, 0.4)); } row { border-width: 0px; } list row { transition: all 400ms ease-out; } list row.activatable { background-image: none; border-image: none; border-color: transparent } list row.activatable:focus{ background-color: transparent; background-image: linear-gradient(to bottom, alpha(@button_gradient_color_a, 0.5), alpha(@button_gradient_color_b, 0.5)); outline-width: 0px; } list row.activatable:selected, list row.activatable:selected:hover { background-color: transparent; background-image: linear-gradient(to bottom, @button_gradient_color_a, @button_gradient_color_b); } list row.activatable:hover { background-color: transparent; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); } list row scale.horizontal trough { background-image: none; background-color: transparent; } .cell { padding: 2px; border-width: 0px; } /*keep active .view color off of treeview cells using an image */ .view.cell:selected, .view.cell:active{ background-color:transparent; } /************ * GtkScale * ************/ scale, scale:hover, scale:disabled { /* deprecated -GtkScale-slider-length: 16; -GtkRange-slider-width: 20; -GtkRange-trough-border: 0;*/ background-color:transparent; } scale slider, scale slider:hover { border-width: 0px; border-radius: 0px; border-style: none; color: transparent; background-color: transparent; background-repeat: no-repeat; background-position: center; } 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.horizontal trough { background-image: linear-gradient(to bottom, @theme_bg_color, @theme_bg_color 35%, shade(@theme_bg_color, 0.5)35%, shade(@theme_bg_color, 1.7)65%, @theme_bg_color 65%, @theme_bg_color); border-width: 0px; border-radius: 2px; margin-left: 8px; margin-right: 8px; } scale.vertical trough { background-image: linear-gradient(to right, @theme_bg_color, @theme_bg_color 35%, shade(@theme_bg_color, 0.5)35%, shade(@theme_bg_color, 1.7)65%, @theme_bg_color 65%, @theme_bg_color); border-width: 0px; border-radius: 2px; margin-top: 8px; margin-bottom: 8px; } scale:disabled trough { background-image: linear-gradient(to bottom, @theme_bg_color, @theme_bg_color 35%, shade(@theme_bg_color, 0.85)35%, shade(@theme_bg_color, 1.4)65%, @theme_bg_color 65%, @theme_bg_color); border-width: 0px; border-radius: 2px; margin-left: 8px; margin-right: 8px; } scale.vertical:disabled trough { background-image: linear-gradient(to right, @theme_bg_color, @theme_bg_color 35%, shade(@theme_bg_color, 0.5)35%, shade(@theme_bg_color, 1.7)65%, @theme_bg_color 65%, @theme_bg_color); margin-top: 8px; margin-bottom: 8px; } scale.horizontal mark indicator { background-color: shade(@theme_bg_color, 0.56); min-height: 8px; min-width: 1px; } scale.vertical mark indicator { background-color: shade(@theme_bg_color, 0.56); min-height: 1px; min-width: 8px; } scale highlight, scale:hover highlight{ background-image: linear-gradient(to bottom, transparent, transparent 35%, @link_color 35%, @link_color 65%, transparent 65%, transparent); border-color: @progressbar_border; background-color: transparent; } scale.vertical highlight, scale.vertical:hover highlight{ background-image: linear-gradient(to right, transparent, transparent 35%, @link_color 35%, @link_color 65%, transparent 65%, transparent); border-color: @progressbar_border; background-color: transparent; } scale:disabled highlight { background-color:transparent; } scale progress { background-image: linear-gradient(to bottom, shade(@theme_bg_color, 1.4), shade(@theme_bg_color, 0.8)); border-radius: 3px; } scale.vertical progress { background-image: linear-gradient(to right, shade(@theme_bg_color, 1.4), shade(@theme_bg_color, 0.8)); } /************** * ComboBoxes * **************/ combobox{ /* align with side buttons */ padding: 0; /* -GtkComboBox-shadow-type: none; */ color: @theme_fg_color; text-shadow: none; } combobox.separator { /* always disable separators */ -GtkWidget-horizontal-separator: 0; -GtkWidget-vertical-separator: 0; } /* since gtk+-3.18, avoid flat text background */ combobox button cellview { background-color: transparent; } combobox button { padding: 0px 3px; /* These buttons may be wide. */ background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); } combobox button:hover { /* These buttons may be wide. */ background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 1.5), shade(@button_gradient_color_a, 0.7) 39%, @theme_bg_color 40%, shade(@button_gradient_color_b, 0.7)); } GtkComboBox.combobox-entry button { padding: 0px; } /* compensation for combo shadow */ /*GtkTreeMenu menuitem *,*/ combobox menu { text-shadow: none; } combobox button cellview:hover { background-color:transparent; } combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); color: @menu_controls_color; min-height: 16px; min-width: 16px; } /*********** * Buttons * ***********/ button { -gtk-icon-style: regular; padding: 0px; border-radius: 3px; border-width: 1px; border-style: solid; text-shadow: none; color: @theme_fg_color; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); transition: all 400ms ease-out; } /* ie. mate-control-center */ button.flat { transition: all 400ms ease-out; padding: 0px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255,255,255,0), 0 1px rgba(255,255,255,0); text-shadow: none; -gtk-icon-shadow: none; border-image: none; } button:focus{ outline-width: 0px; } /*Borders don't always work here*/ button.flat:focus{ outline-width: 2px; } button.flat:hover { border-radius: 3px; } button.image-button.circular-button { border-image: none; border-width: 1px; border-style: solid; border-color: @button_border; border-radius: 10px; padding: 2px } /* ie. controls gnome-mplayer, virtual-manager */ button.flat.image-button, button.flat.image-button:hover, button.scale.flat { padding: 4px; } button image, button image:hover, button image:checked, button image:hover:checked, button image:active, button image:hover:active, button image:disabled, button label, button label:hover, button label:checked, button label:hover:checked, button label:active, button label:hover:active, button label:disabled { background-image: none; background-color: transparent; } button label:disabled { color: shade(@theme_fg_color, 0.6); } button:hover { border-image: none; border-style: solid; border-color: shade(@button_border, 1.1); background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } button:checked, button:hover:checked, button:active, button:hover:active { /* some apps need this */ color: @theme_fg_color; border-style: solid; background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.7), @theme_bg_color 50%, shade(@button_gradient_color_a, 1.5)); } button:disabled, button.default:disabled { background-color: transparent; background-image: linear-gradient(to bottom, alpha(@button_gradient_color_a, 0.2), alpha(@button_gradient_color_b, 0.3)); border-image: none; border-style: solid; border-color: alpha(@button_border, 0.3); /*shade(@button_border, 1.2)*/ color: @insensitive_fg_color; } button:disabled image, .button:disabled image, button:active:disabled image, .button:active:disabled image{ opacity: 0.5; } button:active:disabled { background-color: transparent; background-image: linear-gradient(to bottom, alpha(@button_gradient_color_b, 0.6), alpha(@button_gradient_color_a, 0.5)); border-image: none; border-style: solid; border-color: alpha(@button_border, 0.3); color: @insensitive_fg_color; } button.font, button.color { padding: 4px 3px; } /****************** * Linked Buttons * ******************/ /* We don't make them different. */ /***************** * GtkSpinButton * *****************/ spinbutton, spinbutton:focus, spinbutton:backdrop, spinbutton.vertical, spinbutton.vertical:focus, spinbutton.vertical:backdrop { border-color: @less_dark_color; border-width: 1px; border-style: solid; border-radius: 3px; padding: 0px; } spinbutton.horizontal > entry, spinbutton.horizontal > entry:focus, spinbutton.horizontal > entry:backdrop { padding: 4px 10px 4px 4px; box-shadow: none; border-radius: 3px 0px 0px 3px; border-style: none; } spinbutton > button:disabled { color: shade(@insensitive_fg_color, 0.7); background-image: none; } spinbutton > button, spinbutton > button:focus, spinbutton > button:backdrop { border-image: none; color: shade(@insensitive_fg_color, 1.1); } spinbutton > button:hover, spinbutton > button:active { color: @theme_text_color; } spinbutton > button:hover { border-image: none; border-style: solid; border-color: shade(@button_border, 1.1); background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } spinbutton > button:active { border-image: none; border-style: solid; background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.7), @theme_bg_color 50%, shade(@button_gradient_color_a, 1.5)); } spinbutton.horizontal > button, spinbutton.horizontal > button:focus, spinbutton.horizontal > button:backdrop, spinbutton.horizontal > button:hover, spinbutton.horizontal > button:active, spinbutton.horizontal > button:disabled { min-height: 10px; min-width: 10px; padding: 5px 4px; box-shadow: none; border-style: solid; border-color: @less_dark_color; } spinbutton.horizontal > button.down, spinbutton.horizontal > button.down:focus, spinbutton.horizontal > button.down:backdrop, spinbutton.horizontal > button.down:hover, spinbutton.horizontal > button.down:active, spinbutton.horizontal > button.down:disabled { border-radius: 0px; border-width: 0px 1px 0px 1px; } spinbutton.horizontal > button.up, spinbutton.horizontal > button.up:focus, spinbutton.horizontal > button.up:backdrop, spinbutton.horizontal > button.up:hover, spinbutton.horizontal > button.up:active, spinbutton.horizontal > button.up:disabled { border-radius: 0 3px 3px 0; border-width: 0px; } spinbutton.vertical > entry { border-style: none; border-radius: 0; padding: 5px 1px; box-shadow: none; } spinbutton.vertical > button, spinbutton.vertical > button:focus, spinbutton.vertical > button:backdrop, spinbutton.vertical > button:hover, spinbutton.vertical > button:active, spinbutton.vertical > button:disabled { border-color: @less_dark_color; border-image: none; border-style: solid; padding: 6px 0px; } spinbutton.vertical > button.up, spinbutton.vertical > button.up:focus, spinbutton.vertical > button.up:backdrop, spinbutton.vertical > button.up:hover, spinbutton.vertical > button.up:active, spinbutton.vertical > button.up:disabled { border-width: 0px 0px 1px 0px; border-radius: 3px 3px 0px 0px; } spinbutton.vertical > button.down, spinbutton.vertical > button.down:focus, spinbutton.vertical > button.down:backdrop, spinbutton.vertical > button.down:hover, spinbutton.vertical > button.down:active, spinbutton.vertical > button.down:disabled { border-width: 1px 0px 0px 0px; border-radius: 0px 0px 3px 3px; } /* ie. yelp */ *:link, *:visited { color: @link_color; } linkbutton button, linkbutton button:hover, linkbutton button:active, linkbutton button:active:hover { transition: all 400ms ease-in; text-shadow: none; } /************** * Scrollbars * **************/ scrollbar { background-image: none; background-color: @less_dark_color; border-style: none; } scrollbar.vertical { border-style: none; } scrollbar.horizontal { border-style: none; } scrollbar junction { /* the small square between scrollbars!!! */ background-image: none; background-color: @less_dark_color; border-width: 0; border-radius: 0; border-image: none; box-shadow: none; } scrollbar trough, scrollbar.vertical trough { background-image: linear-gradient(to right, @scrollbar_trough, shade (@scrollbar_trough, 1.08)); border-style: solid; border-radius: 0; border-image: none; border-width: 0px 0px 0px 1px; border-color: shade (@theme_bg_color, 0.94); } scrollbar.horizontal trough { background-image: linear-gradient(to bottom, @scrollbar_trough, shade (@scrollbar_trough, 1.08)); border-style: solid; border-radius: 0; border-image: none; border-width: 1px 0px 0px 0px; border-color: shade (@theme_bg_color, 0.94); } scrollbar button, scrollbar.horizontal button, scrollbar.vertical button { color: @theme_fg_color; /*@internal_element_color*/ border-image: none; border-style: none; border-width: 0px; background-image: none; background-color: @less_dark_color; min-width: 10px; min-height: 10px; } scrollbar button:hover, scrollbar button.horizontal:hover, scrollbar button.vertical:hover { background-image: none; background-color: shade(@less_dark_color, 1.4); /*border-color: shade(@highlighted_border, 1.1);*/ color: @theme_fg_color; border-image: none; border-style: none; border-width: 0px; min-width: 10px; min-height: 10px; } scrollbar button:hover:active, scrollbar.vertical button:hover:active, scrollbar.horizontal button:hover:active { background-color: @less_dark_color; background-image: linear-gradient(to top, shade(@less_dark_color, 1.5), shade(@less_dark_color, 0.86)); color: @theme_fg_color; border-image: none; border-style: none; border-width: 0px; } scrollbar button:disabled, scrollbar button.horizontal:disabled, scrollbar button.vertical:disabled { background-image: none; background-color: transparent; color: @insensitive_fg_color; border-image: none; border-style: none; border-width: 0px; } /*Workaround for Yelp scrollbar redraw bug caused my minumum height */ /*Compromise for working steppers in Libreoffice, partial horiz scrollbar display in Yelp*/ scrollbar.horizontal button{ min-height: 8px; min-width: 14px; } /*Keep this off as many scrollbars as possible */ /*Also ensure arrow icons same size vertical and horizontal */ scrollbar.horizontal button{ min-height: 8px; min-width: 14px; } scrollbar.vertical button{ min-height: 14px; min-width: 14px; } scrollbar slider, scrollbar .slider { background-color: transparent; background-image: linear-gradient(to top, shade(@scroll_slider_color, 0.6), shade(@scroll_slider_color, 1.6) 50%, shade(@scroll_slider_color, 2.0)); border-color: transparent; border-radius: 6px; border-width: 1px; border-image: none; } scrollbar.vertical slider, scrollbar.vertical .slider { border-width: 1px; background-image: linear-gradient(to top, shade(@scroll_slider_color, 0.6), shade(@scroll_slider_color, 1.6) 50%, shade(@scroll_slider_color, 2.0)); min-width: 13px; min-height: 42px; } scrollbar.horizontal slider, scrollbar.horizontal .slider { border-width: 1px; background-image: linear-gradient(to left, shade(@scroll_slider_color, 0.6), shade(@scroll_slider_color, 1.6) 50%, shade(@scroll_slider_color, 2.0)); min-height: 13px; min-width: 42px; } scrollbar slider:hover scrollbar .slider:hover { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; } scrollbar.vertical slider:hover, scrollbar.vertical .slider:hover { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; } scrollbar.horizontal slider:hover, scrollbar.horizontal .slider:hover { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; } scrollbar slider:hover:active, scrollbar .slider:hover:active { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; background-image: linear-gradient(to top, shade(@scroll_slider_color, 2.0), shade(@scroll_slider_color, 1.6) 55%, shade(@scroll_slider_color, 0.6)); } scrollbar.vertical slider:hover:active, scrollbar.vertical .slider:hover:active { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; background-image: linear-gradient(to top, shade(@scroll_slider_color, 2.0), shade(@scroll_slider_color, 1.6) 55%, shade(@scroll_slider_color, 0.6)); } scrollbar.horizontal slider:hover:active, scrollbar.horizontal .slider:hover:active { border-width: 1px; border-color: @scroll_slider_color; border-radius: 6px; background-image: linear-gradient(to left, shade(@scroll_slider_color, 2.0), shade(@scroll_slider_color, 1.6) 55%, shade(@scroll_slider_color, 0.6)); } scrollbar slider:disabled, scrollbar .slider:disabled { background-image: none; background-color: shade(@theme_bg_color, 1.5); } scrollbar slider.fine-tune:hover:active, scrollbar .slider.fine-tune:hover:active { background-image: url("assets/slider_fine_horizontal.svg"), linear-gradient(to top, shade(@scroll_slider_color, 3.3), shade(@scroll_slider_color, 1.6) 55%, shade(@scroll_slider_color, 0.6)); background-repeat: no-repeat; background-position: center; } scrollbar.vertical slider.fine-tune:hover:active, scrollbar.vertical .slider.fine-tune:hover:active { background-image: url("assets/slider_fine_vertical.svg"), linear-gradient(to left, shade(@scroll_slider_color, 3.3), shade(@scroll_slider_color, 1.6) 55%, shade(@scroll_slider_color, 0.6)); background-repeat: no-repeat; background-position: center; } /********* * Menus * *********/ /* this controls the general appearance of the menubar */ 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; } menubar menuitem, .menubar menuitem { -gtk-icon-style: regular; transition: all 300ms ease-out; padding: 3px 7px; border-width: 0px; border-style: none; background-color: transparent; } menu menuitem, .menu menuitem { padding: 3px 4px; transition: all 300ms ease-out; border-width: 0px; border-radius: 3px 3px 0px 0px; border-style: solid; border-width: 1px; border-radius: 3px; border-image: none; border-color:transparent; } menubar menuitem:hover, .menubar menuitem:hover { background-image: none; background-color: @theme_selected_bg_color; border-style: solid; border-image: none; /* join menuitem to menu */ border-radius: 3px 3px 0px 0px; border-width: 0px; border-color: @theme_selected_bg_color; color: @theme_text_color; } menubar menuitem:disabled, .menubar menuitem:disabled { color: @insensitive_fg_color; } menuitem:disabled image, .menuitem:disabled image, menuitem:active:disabled image, .menuitem:active:disabled image{ opacity: 0.5; } menu, .menu { background-color: shade(@theme_selected_bg_color, 0.8); background-image: linear-gradient(to left, shade(@theme_selected_bg_color, 0.9), shade(@theme_selected_bg_color, 0.5)); border-style: none; border-width: 0px; border-radius: 0; padding: 1px; } menuitem:hover, menu menuitem:hover, .menu menuitem:hover { background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color, 1.2), shade(@theme_selected_bg_color, 0.3)); color: @theme_fg_color; border-style: solid; border-width: 1px; border-radius: 3px; border-image: url("assets/menu-border-dark.svg") 2 / 2px stretch; } menu menuitem:disabled, .menu menuitem:disabled { color: @insensitive_fg_color; background-color: transparent; border-color: transparent; } menu menuitem:disabled label, .menu menuitem:disabled label{ color: shade(@insensitive_fg_color, 0.8); } /* fixes for firefox menus, and menuitem arrows */ .menuitem { color: @theme_fg_color; transition: none; } .menuitem:hover { color: @theme_main_color; } menu separator, .menu separator { min-height: 1px; background-image: linear-gradient(to right, shade(@theme_selected_bg_color, 1.05), shade(@theme_selected_bg_color, 1.25)); } /* fix for broken firefox */ menu separator { color: shade(@theme_selected_bg_color, 1.05); } menuitem arrow { min-height: 16px; min-width: 16px; margin-left: 10px; } 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"); } /* settings for 4 menu level, this is needed to override the menuitem:hover state from previous menu level, as GtkArrow itself don't support states. thanks gtk+ devs for this madness */ menu > menuitem > arrow.right, menu > menuitem:hover menu > menuitem > arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right, menu > menuitem > arrow.left, menu > menuitem:hover menu > menuitem > arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left, .menu > menuitem > arrow.right, .menu > menuitem:hover .menu > menuitem > arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right, .menu > menuitem > arrow.left, .menu > menuitem:hover .menu > menuitem > arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left { color: @theme_fg_color; -gtk-icon-shadow: 0px 1px shade (@theme_main_color, 1.0), 1px 0px shade (@theme_main_color, 1.0), -1px 0px shade (@theme_main_color, 1.0), 0px -1px shade (@theme_main_color, 1.0); } menu > menuitem:hover > arrow.right, menu > menuitem:hover menu > menuitem:hover arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right, menu > menuitem:hover > arrow.left, menu > menuitem:hover menu > menuitem:hover arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left, menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left, .menu > menuitem:hover > arrow.right, .menu > menuitem:hover .menu > menuitem:hover arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right, .menu > menuitem:hover > arrow.left, .menu > menuitem:hover .menu > menuitem:hover arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left, .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left { color: @theme_main_color; -gtk-icon-shadow: 0px 1px shade (@theme_fg_color, 1.0), 1px 0px shade (@theme_fg_color, 1.0), -1px 0px shade (@theme_fg_color, 1.0), 0px -1px shade (@theme_fg_color, 1.0); } /* scroll arrows */ menu > arrow.top, .menu > arrow.top { margin-top: -2px; margin-left: -2px; } menu > arrow.bottom, .menu > arrow.bottom { margin-bottom: -2px; margin-left: -2px; } menu > arrow, .menu > arrow { border-image: none; background-color: transparent; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); color: @theme_fg_color; -gtk-icon-shadow: 0px 1px shade (@theme_main_color, 1.0), 1px 0px shade (@theme_main_color, 1.0), -1px 0px shade (@theme_main_color, 1.0), 0px -1px shade (@theme_main_color, 1.0); } menu > arrow:hover, .menu > arrow:hover { background-color: transparent; background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color, 1.2), shade(@theme_selected_bg_color, 0.3)); color: @theme_main_color; -gtk-icon-shadow: 0px 1px shade (@theme_fg_color, 1.0), 1px 0px shade (@theme_fg_color, 1.0), -1px 0px shade (@theme_fg_color, 1.0), 0px -1px shade (@theme_fg_color, 1.0); } menu > arrow:disabled, .menu > arrow:disabled { background-image: none; background-color: transparent; border-style: none; color: @insensitive_fg_color; -gtk-icon-shadow: none; } menuitem accelerator, menu menuitem accelerator, .menu menuitem accelerator { color: alpha(@theme_fg_color, 0.66); } menuitem accelerator:hover, menuitem accelerator:active, menu menuitem accelerator:hover, menu menuitem accelerator:active, .menu menuitem accelerator:hover, .menu menuitem accelerator:active { color: alpha(@theme_text_color, 0.45); } /*************** * Menu Button * ***************/ /* compensation for combo shadow */ button.popup menu { text-shadow: none; } /************ * Toolbars * ************/ toolbar { background-image: linear-gradient(to bottom, @toolbar_gradient_base, @toolbar_gradient_bottom); border-style: none; border-width: 0; border-radius: 0px; padding: 1px; -GtkWidget-window-dragging: true; -GtkToolbar-button-relief: normal; } toolbar button.text-button { padding: 2px 5px; } toolbar button.image-button { padding: 5px 4px 4px 5px; } toolbar button:focus, primary-toolbar button:focus{ outline-width: 2px; } /*use only outlines for focus on toolbar buttons */ toolbar button:focus:not(:hover), toolbar.primary-toolbar button:focus:not(:hover), toolbar.primary-toolbar button.text-button:focus:not(:hover), toolbar.primary-toolbar toolbar button:focus:not(:hover){ border-image: none; } /******************** * 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, toolbar button:disabled, .primary-toolbar button:disabled, .primary-toolbar toolbar button:disabled, toolbar button:disabled:hover, .primary-toolbar button:disabled:hover, .primary-toolbar toolbar button:disabled:hover { border-style: solid; border-width: 1px; border-image: none; border-color: transparent; background-image: none; background-color: transparent; } toolbar button:hover, .primary-toolbar button:hover, .primary-toolbar toolbar button:hover { border-style: solid; border-color: shade(@button_border, 1.1); border-radius: 3px; background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } toolbar button:checked, .primary-toolbar button:checked, .primary-toolbar toolbar button:checked, toolbar button:active, .primary-toolbar button:active, .primary-toolbar toolbar button:active, toolbar combobox button, .primary-toolbar toolbar combobox button { border-radius: 3px; background-image: none; } toolbar button:checked:hover, .primary-toolbar button:checked:hover, .primary-toolbar toolbar button:checked:hover, toolbar button:active:hover, .primary-toolbar button:active:hover, .primary-toolbar toolbar button:active:hover, toolbar combobox button:hover, .primary-toolbar toolbar combobox button:hover { border-image: none; border-style: solid; border-color: shade(@button_border, 1.1); background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, .primary-toolbar toolbar button:checked:disabled, toolbar button:active:disabled, .primary-toolbar button:active:disabled, .primary-toolbar toolbar button:active:disabled, toolbar combobox button:disabled, .primary-toolbar toolbar combobox button:disabled { border-image: none; border-style: solid; border-color: @inactive_frame_color; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); } toolbar separatortoolitem { 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: 2px; border-style: solid; border-color: shade(@inactive_frame_color, 0.925); border-image: none; color: @theme_text_color; } /******************* * Inline toolbars * *******************/ inline-toolbar toolbar { border-width: 1px; border-radius: 3px; border-style: solid; background-image: linear-gradient(to bottom, @toolbar_gradient_base, shade(@theme_bg_color, 1.6)); border-color: alpha(@frame_color, 0.6); /*shade(@theme_bg_color, 0.8);*/ } /****************** * Stack switcher * ******************/ stackswitcher > button > label, headerbar stackswitcher > button.titlebutton > label, .titlebar stackswitcher > button.titlebutton > label, calendar.header stackswitcher > button.titlebutton > label { padding-left: 6px; padding-right: 6px; } stackswitcher > button > image, headerbar stackswitcher > button.titlebutton > image, .titlebar stackswitcher > button.titlebutton > image, calendar.header stackswitcher > button.titlebutton > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } stackswitcher > button.text-button { padding: 5px 10px 6px; } stackswitcher > button.image-button, headerbar stackswitcher > titlebutton button, .titlebar stackswitcher > titlebutton button, calendar.header stackswitcher > .titlebutton button { padding: 5px 2px; } stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-color: transparent; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl) { background-position: left 3px, left 4px; } stackswitcher > button.needs-attention:active > label, stackswitcher > button.needs-attention:active > image, stackswitcher > button.needs-attention:checked > label, stackswitcher > button.needs-attention:checked > image { animation: none; background-image: none; } /******* * OSD * *******/ .osd, .background.osd { color: @osd_fg; background-image: none; background-color: @osd_bg; border-radius:20px; } overlay.osd { background-color: transparent; } .osd.frame, osd.frame { background-clip: border-box; background-origin: border-box; } .osd button, .osd button:focus, .osd button:checked, .osd button:hover:active, .osd button:focus:hover:active, button.osd, button.osd:focus, button.osd:checked, button.osd:hover:active, button.osd:focus:hover:active { border-width: 1px; border-style: solid; border-image: none; border-color: @osd_button_border; border-radius: 5px; } .osd button, button.osd { 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: none; -gtk-icon-shadow: 0 -1px @osd_button_shadow; } .osd button, .osd button:hover, .osd button:checked, button.osd, button.osd:hover, button.osd:checked { background-color: transparent; } .osd button:disabled, button.osd:disabled { background-image: none; background-color: @osd_button_bg_insensitive; } .osd button:checked:disabled, button.osd:checked:disabled { background-image: none; background-color: @osd_button_bg_insensitive_active; } .osd button:hover, button.osd:hover { color: @osd_button_fg_hover; } .osd button:checked, button.osd:active:hover { color: @osd_button_fg_active; } .osd button:disabled, .osd button:disabled:checked, button.osd:disabled, button.osd:checked:disabled { color: @osd_button_fg_insensitive; } .osd button:hover, button.osd: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.popup:checked, /* GtkMenuButton */ .osd button:checked, button.osd:checked, .osd button:active:hover, button.osd:active:hover { background-image: linear-gradient(to bottom, @osd_button_bg_active_a, @osd_button_bg_active_b 68%, @osd_button_bg_active_c); } .osd button.popup:checked { background-color: transparent; border-color: @osd_button_border; color: @osd_button_fg_active; text-shadow: none; } toolbar.osd { color: @osd_fg; text-shadow: none; 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; } toolbar.osd button, toolbar.osd .linked button { background-color: transparent; border-color: @osd_button_border; padding: 6px; border-width: 1px 1px; border-radius: 5px; box-shadow: @osd_button_inset; } toolbar.osd button:hover { padding: 6px; } toolbar.osd button:first-child, toolbar.osd button:hover:active:first-child { border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; box-shadow: inset -1px 0 @osd_button_inset; } toolbar.osd button:last-child, toolbar.osd button:hover:active:last-child { box-shadow: none; border-radius: 0 5px 5px 0; border-width: 1px 1px 1px 0; } toolbar.osd button:only-child, toolbar.osd button:hover:active:only-child { box-shadow: none; border-radius: 5px; border-width: 1px; } toolbar.osd button:only-child, toolbar.osd toolbutton button, toolbar.osd toolbutton:only-child button, toolbar.osd toolbutton:last-child button, toolbar.osd toolbutton:first-child button { border-width: 1px; border-radius: 5px; border-style: solid; box-shadow: none; } toolbar.osd separator { color: shade(@osd_lowlight, 0.80); } /* used by gnome-settings-daemon's media-keys OSD and Epiphany */ .osd trough { background-color: @osd_trough_bg; } .osd .progressbar, .osd progressbar { background-color: @osd_fg; } .osd scale trough { border-color: @osd_button_border; background-image: none; background-color: transparent; border-style: solid; border-width: 1px; } .osd scale trough.highlight { background-image: none; background-color: @theme_selected_bg_color; } .osd scale trough:disabled, .osd scale trough.highlight:disabled { background-image: none; background-color: transparent; } .osd popover.background.scale-popup { /*volume button */ color: @osd_fg; text-shadow: none; border-color: shade (@theme_selected_bg_color, 0.5); border-radius: 5px; background-image: linear-gradient(to bottom, @osd_toolbar_bg_a, @osd_toolbar_bg_b 63%, @osd_toolbar_bg_c); background-color: transparent; } .osd popover.background.scale-popup button.flat.image-button { background-color: transparent; border-radius: 4px; border-width: 1px; border-color: @osd_button_border; box-shadow: none; padding: 2px; } .osd popover.background.scale-popup button.flat.image-button:disabled { border-color: alpha (@osd_button_border, 0.0); } /* ie. colorchooser */ .osd.popover { background-image: none; background-color: alpha(shade(#3D3E40, 0.85), 0.35); border: 1px solid black; border-radius: 2px; color: @theme_fg_color; } .osd.popover spinbutton entry, .osd.popover spinbutton entry:focus, .osd.popover spinbutton button, .osd.popover spinbutton button:focus { background-color: transparent; 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: none; -gtk-icon-shadow: 0 -1px @osd_button_shadow; } .osd.popover spinbutton 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.popover spinbutton button:active { background-image: linear-gradient(to bottom, @osd_button_bg_active_a, @osd_button_bg_active_b 68%, @osd_button_bg_active_c); } .osd .progressbar, .osd progressbar, progressbar .osd { padding: 0; -progressbar-xspacing: 0; -progressbar-yspacing: 3px; -progressbar-min-horizontal-bar-height: 3px; 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; } .osd .progressbar.horizontal, .osd progressbar.horizontal, progressbar.horizontal .osd { min-height: 3px; } .osd .progressbar trough, .osd progressbar 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 .view, .osd.view { background-color: @osd_view_bg; } .osd scrollbar trough { background-color: @osd_scrollbar_trough; } .osd scrollbar slider { background-color: @osd_scrollbar_slider; } .osd scrollbar slider:hover { background-color: @osd_scrollbar_slider_prelight; } .osd scrollbar slider:active { background-color: @osd_scrollbar_slider_active; } .osd iconview.cell:selected, .osd iconview.cell:selected:focus { background-color: transparent; border-style: solid; border-radius: 15px; border-width: 3px; border-color: @osd_button_fg; outline-color: transparent; } /* used by Documents */ .osd .page-thumbnail { border-style: solid; border-width: 1px; border-color: @osd_lowlight; /* when there's no pixbuf yet */ background-color: @osd_bg; } /* ie. parole-media-player control bar */ revealer.bottom > box.background.horizontal.osd button { margin: 0px 1px; padding: 0px 3px; } /************* * Popovers * *************/ popover { background-clip: initial; margin: 10px; padding: 2px; border-color: shade(@theme_bg_color, 0.8); border-width: 1px; border-style: solid; border-radius: 6px; background-color: shade(@theme_selected_bg_color, 0.8); background-image: linear-gradient(to bottom, @theme_selected_bg_color, shade(@theme_selected_bg_color, 0.5)); box-shadow: 0 1px 5px @wm_shadow; text-shadow: none; -gtk-icon-shadow: none; } popover > list, popover > .view, popover > view, popover > toolbar popoveosd > toolbar, popover > inline-toolbar popoverosd > toolbar, popover > search-bar popoverosd > toolbar, popover > location-bar popoverosd > toolbar, popover > toolbar popoverosd > inline-toolbar, popover > inline-toolbar popoverosd > inline-toolbar, popover > search-bar popoverosd > inline-toolbar, popover > location-bar popoverosd > inline-toolbar, popover > toolbar popoverosd > search-bar, popover > inline-toolbar popoverosd > search-bar, popover > search-bar popoverosd > search-bar, popover > location-bar popoverosd > search-bar, popover > toolbar popoverosd > location-bar, popover > inline-toolbar popoverosd > location-bar, popover > search-bar popoverosd > location-bar, popover > location-bar popoverosd > location-bar { border-style: none; background-color: transparent; } popover separator { font-size: 80%; font-weight: bold; color: alpha(@theme_fg_color,0.1); text-shadow: none; background-color: transparent; -gtk-icon-shadow: none; border: 0; } popoverosd { background-image: none; background-color: alpha(shade(#3D3E40, 0.85), 0.75); border: 1px solid black; box-shadow: none; color: @theme_selected_fg_color; } popoverosd toolbar { background-image: none; background-color: transparent; border: none; box-shadow: none; } popoverosd button { text-shadow: none; -gtk-icon-shadow: 0 -1px @osd_text_shadow; } popoverosd button:active, popoverosd button:checked { box-shadow: none; } popoverosd button:disabled { color: alpha(@theme_selected_fg_color, 0.4); } popover list { background-color: @theme_base_color; } modelbutton:checked, modelbutton:disabled, modelbutton:checked:disabled, modelbutton, modelbutton:focus, modelbutton:focus:active { background-image: none; background-color: transparent; border-color: transparent; border-image: none; border-style: none; box-shadow: none; border-radius: 3px; } modelbutton { color: @theme_fg_color; } modelbutton:hover:active, modelbutton:hover, modelbutton:checked { background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color, 1.2), shade(@theme_selected_bg_color, 0.3)); color: @theme_selected_fg_color; text-shadow: none; border-width: 0; border-color: transparent; border-radius: 3px; } popover .separator { font-size: 80%; font-weight: bold; color: alpha(@theme_text_color,0.4); text-shadow: none; background-color: transparent; -gtk-icon-shadow: none; border: 0; } /*************** * Header bars * ***************/ /******* * CSD * *******/ /*mostly taken from Adwaita except the border radius */ decoration { border-radius: 7px 7px 0px 0px; border-width: 1px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23); /* this is used for the resize cursor area */ margin: 10px; padding: 0px; } /*Limit CSD shadow extent to deal with any WM CSD/GtkFrameExtent issues */ .csd decoration { border-radius: 7px 7px 0px 0px; border-width: 1px; box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.23); /* this is used for the resize cursor area */ margin: 10px; padding: 0px; } headerbar, .titlebar { border-width: 0 0 1px; border-style: solid; padding: 0 1px; border-radius: 7px 7px 0 0; background-color: @theme_bg_color; border-color: shade(@theme_bg_color, 0.8); text-shadow: none; background-image: linear-gradient(to bottom, shade (@theme_bg_color, 1.50), shade (@theme_bg_color, 1.0)); } /* fix for gedit, .titlebar does not match headerbar selector */ .background.csd > paned.horizontal.titlebar, .background.ssd > paned.horizontal.titlebar, .background.solid-csd > paned.horizontal.titlebar { background-color: transparent; padding: 0px; margin: 0px; border-width: 0px; } .background.csd > paned.horizontal.titlebar > headerbar, .background.ssd > paned.horizontal.titlebar > headerbar, .background.solid-csd > paned.horizontal.titlebar > headerbar { padding: 0px 6px; } /* ie. meld */ dialog.background.csd > headerbar.titlebar, dialog.background.ssd > headerbar.titlebar, dialog.background.solid-csd > headerbar.titlebar { padding: 0px 6px; } .tiled .titlebar { border-radius: 0; } .maximized .titlebar { border-radius: 0; } /* this is the default titlebar that is added by GTK * when client-side decorations are in use and the application * did not set a custom titlebar. */ .titlebar.default-decoration { border: none; box-shadow: none; } .titlebar .title, headerbar .title { font-weight: bold; font-size: 120%; background: none; color: #D9D9D9; } /*This does not respond to .titlebar or headerbar */ /*So we are forced to rely on nothing else being called label.title */ box.vertical>label.title{ padding: 0px; } .titlebar separator, headerbar separator { background-color: transparent; background-image: none; } headerbar:backdrop, .titlebar:backdrop { color: #747473; text-shadow: none; background-image: none; background-color: #606060; } .titlebar .titlebutton, headerbar.titlebar button.image-button.titlebutton, button.text-button.titlebutton { border-radius: 3px; border-width: 1px; border-style: solid; text-shadow: none; color: #D9D9D9; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); } headerbar:backdrop button, .titlebar:backdrop button { background-image: linear-gradient(to bottom, alpha(@button_hover_gradient_color_a, 0.3), alpha(@button_hover_gradient_color_b, 0.3)); background-color:transparent; } headerbar button:not(.appmenu):not(.titlebutton){ padding: 4px; } /*Keep the size of decorations down in ssd apps on Metacity/Mutter/Gnome-shell etc*/ headerbar button.appmenu, .csd button.titlebutton{ padding: 0px 4px; margin: 0px; } .titlebar .titlebutton { /* fake request for hardcoded icons, to avoid usage of regular window-close button*/ -gtk-icon-style: requested; border-width: 0px; border-style: none; border-image-source: none; background-image: none; } .titlebar .titlebutton:hover, headerbar.titlebar button.image-button.titlebutton:hover, button.text-button.titlebutton:hover { border-image: none; border-style: solid; border-color: shade(@button_border, 1.1); background-image: -gtk-gradient (radial, 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), color-stop (0.42, shade(@button_gradient_color_a, 0.7)), color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } .titlebar .titlebutton:hover { background-image: none; background-color: transparent; } .titlebar .titlebutton:hover:active, headerbar.titlebar:hover:active, button.image-button.titlebutton:hover:active, button.text-button.titlebutton:hover:active, .titlebar .titlebutton:checked, headerbar.titlebar:checked, button.image-button.titlebutton:checked, button.text-button.titlebutton:checked { color: @theme_fg_color; border-style: solid; background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.7), @theme_bg_color 50%, shade(@button_gradient_color_a, 1.5)); } .titlebar .right .titlebutton:first-child { } .titlebar .right .titlebutton:last-child { } .titlebar .left .titlebutton:last-child { } .titlebar .left .titlebutton:first-child { } .titlebar .titlebutton:hover:backdrop, headerbar.titlebar button.image-button.titlebutton:hover:backdrop { color: #747473; } .titlebar .titlebutton:backdrop, .titlebar .titlebutton:hover:backdrop, headerbar.titlebar button.image-button.titlebutton:backdrop, headerbar.titlebar button.image-button.titlebutton:hover:backdrop { background: none; color: @theme_main_color; border-image: none; -gtk-icon-shadow: none; } .background.csd decoration { border-radius: 7px 7px 0px 0px; border-width: 0px; box-shadow: 0 0 0 2px @wm_csd_border_color, 0 2px 8px 3px @wm_shadow; /* this is used for the resize cursor area */ margin: 10px; } .background.csd decoration:backdrop { background: @theme_bg_color; border-style: solid; border-radius: 7px 7px 0px 0px; border-color: #595959; } .background.ssd decoration { box-shadow: 0 0 0 2px @wm_csd_border_color, 0 2px 8px 3px @wm_shadow; /* this is used for the resize cursor area */ margin: 2px; } /*fix for CSD apps w/o compositing */ .solid-csd decoration { border-style: solid; border-radius: 0px; border-width: 1px; border-color: #595959; box-shadow: none; background: @theme_bg_color; margin: 2px; padding: 0px; } .solid-csd headerbar{ border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: none; padding: 0px; } .csd.popup decoration { border-radius: 0; box-shadow: none; } .tiled decoration { border-radius: 0; background-color: @theme_bg_color; } messagedialog.csd decoration { border-radius: 7px; box-shadow: none; } /**************************** * Suggested action buttons * ****************************/ /* Not different from other buttons. */ /****************************** * Destructive action buttons * ******************************/ /* not different from other buttons */ /************************** * Selection Mode classes * **************************/ /* Not different from other toolbars. */ /**************** * GtkAssistant * ****************/ assistant sidebar .highlight { color: @theme_fg_color; background-image: linear-gradient(to bottom, shade(@less_dark_color, 0.8), shade(@less_dark_color, 1.2)); background-color: @less_dark_color; border-style: none; padding: 5px 8px; border-radius: 5px; box-shadow: inset 0 2px 1px alpha(black, 0.25), inset 1px 1px 1px alpha(black, 0.2), inset 0 -2px 1px alpha(@entry_shadow, 0.1), inset -1px -1px 1px alpha(@entry_shadow, 0.2); } assistant sidebar { padding: 12px; border-radius: 0px 3px 0px 0px; border-style: solid; border-width: 1px; border-color: @less_dark_color; /*alpha(@frame_color, 0.6) @inactive_frame_color*/ color: mix (@theme_fg_color, @theme_bg_color, 0.40); /*?*/ background-color: @less_dark_color; } /************* * GtkSwitch* *************/ switch, switch:backdrop { font-weight: bold; font-size: smaller; font-stretch: condensed; color: @internal_element_color; border-radius: 3px; border-width: 1px; border-image: none; border-style: solid; border-color: @frame_color; background-image: linear-gradient(to bottom, @trough_bg_color_a, @trough_bg_color_b); } switch:checked, switch:backdrop:checked { color: @theme_main_color; border-image: none; border-color: shade(@frame_color, 1.22); background-image: linear-gradient(to bottom, @active_switch_bg_color_a, @active_switch_bg_color_b); } switch:checked:hover { color: @theme_main_color; border-image: none; border-color: shade(@frame_color, 1.22); background-image: linear-gradient(to bottom, shade(@active_switch_bg_color_a, 1.1), shade(@active_switch_bg_color_b, 1.1)); } switch:disabled, switch:backdrop:disabled { background-image: none; background-color: shade(@theme_bg_color, 0.9); border-color: shade(@inactive_frame_color, 0.845); border-image: none; color: @insensitive_fg_color; } switch slider, switch slider:backdrop { border-width: 1px; border-radius: 2px; border-color: shade(@frame_color, 0.8); border-image: none; border-style: solid; padding: 2px; background-image: url("assets/switch-slider-grip.svg"), linear-gradient(to bottom, @switch_slider_color, shade(@switch_slider_color, 0.9) 60%, shade(@switch_slider_color, 0.7)); background-repeat: no-repeat; background-position: center; } switch slider:checked, switch slider:backdrop:checked { border-color: @switch_slider_border; } switch slider:disabled, switch slider:backdrop:disabled { border-style: none; background-image: none; background-color: shade(@switch_slider_color, 0.6); } switch slider:disabled > label, switch slider:backdrop:disabled > label { color: inherit; } list row switch, list row switch:backdrop, list row:selected switch, list row:selected switch:backdrop { box-shadow: none; border-color: shade(@button_border, 1.0); } list row switch:focus slider { outline-offset: 1px; outline-style: solid; outline-color: alpha(@focus_border, 0.6); } list row:selected switchslider:dir(rtl) { border-left-color: @borders; } list row:selected switchslider:dir(ltr) { border-right-color: @borders; } list row:selected switchslider, list row:selected switchslider:active { border-color: shade(@button_border, 1.0); } statusbar { padding: 0px; color: @theme_fg_color; -statusbar-shadow-type: none; font-size: smaller; } statusbar .frame { background-image: none; background-color: transparent; padding: 0px; border-width: 0; } image, image:hover, image:active, image:hover:active, image:disabled, label, label:hover, label:active, label:hover:active, label:disabled, box, box:disabled, grid, grid:disabled { background-image: none; background-color: transparent; } image, label { padding: 3px; } statusbar label { padding: 1px; } viewport, iconview { border-radius: 3px; padding: 0px; } viewport { background-color: @less_dark_color; } iconview.view.cell:selected, iconview.view.cell:selected:focus { background-color: transparent; border-style: solid; border-width: 3px; border-radius: 12px; border-color: shade(@theme_selected_bg_color, 1.5); color: @theme_text_color; 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_main_color; } /* make plain-text preview readable */ EMailDisplay expander label { color: @theme_main_color; } EMailDisplay expander:hover { color: @theme_fg_color; border-color: @theme_fg_color; } GtkHTML expander label { color: #000000; } GtkHTML:active { color: #ffffff; } EShellWindow *:active { background-color: #717175; } EShellWindow button *:active { background-color: transparent; } EShellWindow:disabled { /* removes the "flash" when quitting */ background-color: @theme_bg_color; } /***************** * Color Chooser * *****************/ colorswatch{ background-image: none; background-color: transparent; border-style: solid; border-color:transparent; border-width: 2px; } colorswatch overlay, colorswatch overlay:hover, colorswatch overlay:selected{ background-image: none; background-color: transparent; } colorswatch.dark:hover { background-image: linear-gradient(to bottom, alpha(white, 0) 40%, alpha(white, 0.3)); } colorswatch.light:hover { background-image: linear-gradient(to top, alpha(black, 0) 40%, alpha(black, 0.1)); } colorswatch:selected { border-color: alpha(black, 0.2); } colorswatch:selected:hover { border-color: alpha(black, 0.5); } colorswatch.light:selected:hover, colorswatch.dark:selected:hover { background-image: none; } /*************************** * Radio and Check Buttons * ***************************/ 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; min-height: 12px; min-width: 12px; } check:hover, check:selected:hover, radio:hover, radio:selected:hover { background-color: transparent; } /***************** * GtkCheckbutton * *****************/ checkbutton:hover { background-color: alpha(@theme_main_color, 0.09); } checkbutton:selected:hover { background-color: alpha(@theme_main_color, 0.15); } /***************** * GtkRadioButton * *****************/ radiobutton:hover { background-color: alpha(@theme_main_color, 0.09); } radiobutton:selected:hover { background-color: alpha(@theme_main_color, 0.15); } /************* * Expanders * *************/ expander title{ border-style: solid; border-width: 1px; border-radius: 2px; border-color: transparent; color: @internal_element_color; background-image: none; background-color: transparent; } expander title:active { border-color: @internal_element_color; color: @internal_element_color; background-color: transparent; } expander title:hover { border-color: @internal_element_prelight; color: @internal_element_prelight; } expander arrow { min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /**************** * 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 { background-image: url("assets/grid-selection-checked.svg"); background-color: transparent; } content-view.view.check, content-view.view.check:active { 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, .app-notification.frame { color: @theme_fg_color; padding: 10px; border: none; border-radius: 0 0 4px 4px; background-color: rgba(101, 101, 104, 0.7); 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; } .app-notification button, .app-notification headerbar button.titlebutton, headerbar .app-notification button.titlebutton, .app-notification .titlebar button.titlebutton, .titlebar .app-notification button.titlebutton, .app-notification calendar.header button.titlebutton, calendar.header .app-notification button.titlebutton, .app-notification.frame button { color: @theme_fg_color; border-color: rgba(75, 89, 112, 0.7); /*FIXME-this is deprecated background-image: linear-gradient(to bottom, rgba(101, 101, 104, 0.7));*/ background-color:rgba(101, 101, 104, 0.7); /*Use this for now*/ background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: none; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); border-radius: 3px; padding: 0 0px 2px 0px; } .app-notification button.flat, .app-notification headerbar .titlebutton button, headerbar .app-notification .titlebutton button, .app-notification .titlebar .titlebutton button, .titlebar .app-notification .titlebutton button, .app-notification calendar.header .titlebutton button, calendar.header .app-notification .titlebutton button, .app-notification.frame button.flat, .app-notification.frame headerbar .titlebutton button, headerbar .app-notification.frame .titlebutton button, .app-notification.frame .titlebar .titlebutton button, .titlebar .app-notification.frame .titlebutton button, .app-notification.frame calendar.header .titlebutton button, calendar.header .app-notification.frame .titlebutton button { -gtk-icon-shadow: 0 1px black; text-shadow: 0 1px black; } .app-notification button:hover, .app-notification.frame button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); /*FIXME-this is deprecated background-image: linear-gradient(to bottom, rgba(47, 47, 48, 0.7));*/ background-color: rgba(47, 47, 48, 0.7); /*Use this for now*/ background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: none; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); border-radius: 3px; padding: 0 0px 2px 0px; } .app-notification button:checked, .app-notification button:backdrop:checked, .app-notification.frame button:checked, .app-notification.frame button:backdrop:checked { color: white; border-color: rgba(0, 0, 0, 0.7); /*FIXME-this is deprecated background-image: linear-gradient(to bottom, rgba(65, 106, 175, 0.7));*/ background-color: rgba(65, 106, 175, 0.7); /*Use this for now*/ background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); border-radius: 3px; } .app-notification button:disabled, .app-notification button:backdrop:disabled, .app-notification.frame button:disabled, .app-notification.frame button:backdrop:disabled { color: #878989; border-color: rgba(0, 0, 0, 0.7); /*FIXME-this is deprecated background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));*/ background-color:rgba(52, 57, 57, 0.5); /*Use this for now*/ background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border-radius: 3px; padding: 0px; } .app-notification button:backdrop, .app-notification.frame button:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); /*FIXME-this is deprecated background-image: linear-gradient(to bottom, rgba(47, 51, 54, 0.7));*/ background-color: rgba(47, 51, 54, 0.7); /*Use this for now*/ background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border-radius: 3px; padding: 0px; } /************* * Calendars * *************/ calendar.view { border-radius: 3px; border-style: solid; border-width: 1px; border-color: @frame_color; padding: 2px; } calendar.header { border-radius: 0; background-image: linear-gradient(to bottom, shade(@theme_bg_color, 1.1), shade(@theme_bg_color, 0.86)); border-width: 0; } calendar button, calendar button:disabled { background-image: none; background-color: transparent; } calendar { color: @theme_fg_color; text-shadow: none; } calendar:indeterminate { color: alpha(@theme_fg_color, 0.4); } .highlight, calendar.highlight { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; border-radius: 0; padding: 0px; border-width: 0px; } /************** * GtkInfobar * **************/ infobar { border-width: 0; border-style: none; border-radius: 3px; } .info .entry, .info .entry:focus, .info button, .info button:disabled, .info button:checked, .info button:active, .warning .entry, .warning .entry:focus, .warning button, .warning button:disabled, .warning button:checked, .warning button:active, .error .entry, .error .entry:focus, .error button, .error button:disabled, .error button:checked, .error button:active { border-image: none; 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; } label { color: @theme_fg_color; } /************** * 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; } /*************************** * Gtk-file-chooser-dialog * ***************************/ filechooserdialog treeview.view { background-color: @less_dark_color; } filechooserwidget.vertical paned.horizontal { -paned-handle-size: 3px; border-color: transparent; } /*************************** * GtkPrintUnixDialog * ***************************/ printdialog paper{ border-style: solid; border-width: 0.9px; border-radius: 0px; border-color: #aaaaaa; background-color: #888888; background-image: linear-gradient(to top, @toolbar_gradient_top, @toolbar_gradient_bottom); } /************************ * 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(rgba(179, 165, 137, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(87, 70, 56, 0.17)), to(rgba(87, 70, 56, 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(145, 139, 131, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } .overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(@overshoot_bg_color), to(rgba(179, 165, 137, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(87, 70, 56, 0.17)), to(rgba(87, 70, 56, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: 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(145, 139, 131, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } .overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(@overshoot_bg_color), to(rgba(179, 165, 137, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(87, 70, 56, 0.07)), to(rgba(87, 70, 56, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: 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(145, 139, 131, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } .overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(@overshoot_bg_color), to(rgba(179, 165, 137, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(87, 70, 56, 0.07)), to(rgba(87, 70, 56, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: 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(145, 139, 131, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } /* result is disable undershoot */ .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%); background-size: 10px 0px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; } .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%); background-size: 10px 0px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; } .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%); background-size: 0px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; } .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%); background-size: 0px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; } /**************** * GtkActionBar * ****************/ actionbar .frame.action-bar { padding: 2px; } actionbar .frame.action-bar button.image-button { padding: 6px; } actionbar .frame.action-bar .horizontal stackswitcher.linked button.image-button { padding: 4px 2px; } /************ * GtkStack * ************/ stacksidebar scrolledwindow { background-image: linear-gradient(to bottom, @toolbar_gradient_base, @toolbar_gradient_bottom); border-width: 0px; border-radius: 3px 0px 0px 3px; padding: 0px; } /* using stack here styles also notebootk in gtk3-widget-factory, needs to be reviewed frame .horizontal stack { background-color: @less_dark_color; border-radius: 0px 3px 3px 0px; background-image: linear-gradient(to bottom, @toolbar_gradient_base, @toolbar_gradient_bottom); } */ stacksidebar viewport.frame { background-color:transparent; } stacksidebar viewport.frame list-row button { transition: none; }