* { -GtkScrollbar-has-backward-stepper: true; -GtkScrollbar-has-forward-stepper: true; -GtkScrolledwindow-scrollbar-spacing: 0; -GtkScrolledwindow-scrollbars-within-bevel: 1; -textview-error-underline-color: @error_color; -GtkToolbutton-icon-spacing: 6; -GtkTreeview-expander-size: 8; background-clip: padding-box; outline-color: alpha(@theme_selected_bg_color, 0.5); outline-style: solid; outline-offset: 0; outline-width: 0; } /*************** * base states * ***************/ .background { background-color: @theme_bg_color; color: @theme_fg_color; } /* inherit colors from parent */ /* * { color: inherit; background-color: inherit; }*/ *:selected, *:selected:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } *:disabled, *:disabled:disabled { color: mix(@theme_fg_color, @theme_bg_color, 0.5); } /* apply effects to disabled and prelit images */ *:disabled { -gtk-icon-effect: dim; } *:hover { -gtk-icon-effect: highlight; } .gtkstyle-fallback { background-color: @theme_bg_color; color: @theme_fg_color; } .gtkstyle-fallback:hover { background-color: shade(@theme_bg_color, 1.1); color: @theme_fg_color; } .gtkstyle-fallback:active { background-color: shade(@theme_bg_color, 0.9); color: @theme_fg_color; } .gtkstyle-fallback:disabled { background-color: shade(shade(@theme_bg_color, 0.95), 1.05); color: mix(@theme_fg_color, @theme_bg_color, 0.5); } .gtkstyle-fallback:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } image, image:disabled, label, label:disabled, box, box:disabled, grid, grid:disabled { background-color: transparent; } /****************** * visual effects * ******************/ /* transitions */ button { transition: border 100ms ease-in-out; } entry { transition: border 100ms ease-out; } entry selection:focus { transition: border 100ms ease-in; } entry image.left { padding-right: 4px; } notebook tab label, notebook .hover-page, notebook .hover-page label, notebook .active-page, notebook .active-page label { transition: all 200ms ease-in; } /* inset shadows */ button:active, toolbar.primary-toolbar button:active, combobox button.combo:checked, /*headerbar button:active, */ notebook > header { box-shadow: inset 1px 0 alpha(@dark_shadow, 0.07), inset 0 1px alpha(@dark_shadow, 0.08), inset -1px 0 alpha(@dark_shadow, 0.07), inset 0 -1px alpha(@dark_shadow, 0.05); } entry { box-shadow: none; /* inset 1px 0 alpha(@dark_shadow, 0.10), inset 0 1px alpha(@dark_shadow, 0.12), inset -1px 0 alpha(@dark_shadow, 0.10), inset 0 -1px alpha(@dark_shadow, 0.05); */ } /* disable inset shadow */ button:active *:disabled, toolbar.primary-toolbar button:active *:disabled, combobox button.combo:checked *:disabled, headerbar button:active *:disabled, entry:disabled { box-shadow: none; } /************* * assistant * *************/ assistant .sidebar highlight { font-weight: bold; } assistant .sidebar { padding: 4px; border-width: 0 1px 0 0; border-style: solid; border-right-color: shade(@theme_bg_color, 0.8); border-radius: 0; background-color: @theme_bg_color; color: mix(@theme_fg_color, @theme_bg_color, 0.1); } /********** * button * **********/ button { padding: 6px 9px; border-width: 1px; border-radius: 2px; border-style: solid; border-color: shade(@theme_bg_color, 0.45); background-color: shade(@theme_bg_color, 1.08); color: @theme_fg_color; box-shadow: inset 3px 3px @theme_base_color, inset 1px 1px @theme_bg_color, inset -2px -2px shade(@theme_bg_color, 0.85), inset -1px -1px shade(@theme_bg_color, 0.65); } button:focus, button:active:focus { box-shadow: inset 7px 7px @theme_base_color, inset 5px 5px @theme_bg_color, inset -6px -6px shade(@theme_bg_color, 0.85), inset -5px -5px shade(@theme_bg_color, 0.65), inset 0 0 0 4px shade(@theme_bg_color, 0.65), inset 0 0 0 3px shade(@theme_bg_color, 0.85), inset 0 0 0 2px shade(@theme_bg_color, 1.08); } button:active, button:checked { background-color: shade(@theme_bg_color, 0.9); box-shadow: inset -3px -3px shade(@theme_base_color, 0.9), inset -1px -1px shade(@theme_bg_color, 0.9), inset 2px 2px shade(@theme_bg_color, 0.85), inset 1px 1px shade(@theme_bg_color, 0.65); } button:checked:focus { background-color: shade(@theme_bg_color, 0.9); box-shadow: inset -3px -3px shade(@theme_base_color, 0.9), inset -1px -1px shade(@theme_bg_color, 0.9), inset 2px 2px shade(@theme_bg_color, 0.85), inset 1px 1px shade(@theme_bg_color, 0.65), 0 0 0 3px shade(@theme_bg_color, 0.65), 0 0 0 2px shade(@theme_bg_color, 0.85), 0 0 0 1px @theme_bg_color; } button:disabled { color: alpha(@theme_fg_color, 0.5); box-shadow: inset 3px 3px @theme_base_color, inset 1px 1px @theme_bg_color, inset -2px -2px shade(@theme_bg_color, 0.95); } /**************** * cell and row * ****************/ .cell { border-width: 0; border-radius: 0; } .cell:selected, .cell:selected:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } row { padding: 4px; } row:selected, row:selected:hover, row:selected:focus { border: none; background-color: @theme_selected_bg_color; background-image: none; color: @theme_selected_fg_color; } /******************* * check and radio * *******************/ check, radio, check:disabled, radio:disabled { border-style: none; background-color: transparent; } checkbutton:hover, checkbutton:active:hover, checkbutton:selected, checkbutton:selected:focus { background-color: transparent; } checkbutton:disabled, radiobutton:disabled { text-shadow: 1px 1px shade(@theme_base_color, 0.95); } /**************** * link buttons * ****************/ *:link, button:link, button:visited { color: @link_color; } *:link:visited, button:visited { color: mix(@link_color, @theme_fg_color, 0.2); } *:selected *:link:visited, *:selected button:visited:link, *:selected button:visited { color: mix(@link_color, @theme_selected_fg_color, 0.65); } *:link:hover, button:hover:link, button:hover:visited { color: shade(mix(@link_color, @theme_fg_color, 0.2), 1.15); } *:selected *:link:hover, *:selected button:hover:link, *:selected button:hover:visited { color: mix(@link_color, @theme_selected_fg_color, 0.75); } *:link:active, button:active:link, button:active:visited { color: shade(@link_color, 0.85); } *:selected *:link:active, *:selected button:active:link, *:selected button:active:visited { color: mix(@link_color, @theme_selected_fg_color, 0.5); } infobar.info *:link, infobar.info button:link, infobar.info button:visited, infobar.question *:link, infobar.question button:link, infobar.question button:visited, infobar.warning *:link, infobar.warning button:link, infobar.warning button:visited, infobar.error *:link, infobar.error button:link, infobar.error button:visited, *:link:selected, button:selected:link, button:selected:visited, headerbar.selection-mode .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link, *:selected *:link, *:selected button:link, *:selected button:visited { color: mix(@link_color, @theme_selected_fg_color, 0.5); } button:link > label, button:visited > label { text-decoration-line: underline; } /***************** * column-header * *****************/ treeview header button, treeview header button:active { border-width: 0 1px 1px 0; border-radius: 0; } treeview header:last-child button { border-width: 0 0 1px 0; } /**************** * content view * ****************/ .content-view.view { background-color: @theme_base_color; } .content-view.view:hover { background-color: alpha(@theme_selected_bg_color, 0.6); } .content-view.view:selected, .content-view.view:active { background-color: @theme_selected_bg_color; } .content-view.view:disabled { background-color: shade(@theme_base_color, 0.9); } .content-view { } view.content-view check { background-color: transparent; } view.content-view check:active { background-color: transparent; } .content-view.view check, .content-view.view check:active { background-color: transparent; } view.content-view check:hover, view.content-view check:disabled, view.content-view check:selected { background-color: transparent; } /**************** * drawing area * ****************/ drawingarea { background-color: @theme_base_color; } drawingarea:disabled { background-color: shade(@theme_base_color, 0.9); } /*********** * calendar * ************/ calendar { padding: 4px; } calendar:indeterminate { color: mix(@theme_fg_color, @theme_bg_color, 0.5); } calendar.view, calendar.header, calendar button, calendar button:hover, calendar button:disabled { border-width: 0; background-color: transparent; background-image: none; } calendar highlight, calendar.highlight { border-width: 0; background-color: transparent; color: @theme_selected_bg_color; } calendar:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /****************** * combobox entry * ******************/ combobox entry, combobox entry:active, combobox entry selection:focus, combobox entry:disabled { border-width: 1px 0 1px 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } button.combo:not(:only-child) { padding: 4px 3px; } /********* * entry * *********/ entry { padding: 4px 3px; border-width: 1px; border-radius: 0px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-bottom-color: shade(@theme_base_color, 0.95); background-color: @theme_base_color; color: @theme_fg_color; box-shadow: inset 0 0 0 1px shade(@theme_bg_color, 0.65), inset 0 -1px shade(@theme_bg_color, 1.02); } entry:focus { border-right-color: shade(@theme_base_color, 0.95); box-shadow: inset 0 0 0 1px #0000dd; } entry:selected, entry:selected:focus, entry selection:focus, entry selection { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } entry:disabled { background-color: shade(@theme_bg_color, 0.95); background-image: none; color: mix(@theme_text_color, @theme_base_color, 0.5); } entry progressbar { border-width: 0; border-radius: 0px; background-color: @theme_bg_color; background-image: none; color: @theme_fg_color; } entry entry { border: none; box-shadow: none; background-color: transparent; background-image: none; } /************ * expander * ************/ expander arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } expander { color: alpha(currentColor, 0.7); } expander:hover { color: alpha(currentColor, 0.8); } expander:checked { color: alpha(currentColor, 0.9); } /************** * list boxes * **************/ list { background-color: shade(@theme_bg_color, 0.97); color: @theme_fg_color; } list-row { background-color: shade(@theme_bg_color, 0.95); color: @theme_fg_color; } list-row:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /********* * frame * *********/ frame > border { border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-radius: 0; box-shadow: none; } frame.flat > border, frame > border.flat, statusbar frame > border { border: none; } .frame { background: none; } /******************* * scrolled window * *******************/ scrolledwindow .frame { /*border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.8);*/ border: none; border-radius: 0; } /* file chooser white bg color on iconview */ .nautilus-window scrolledwindow { background: @theme_base_color; } /* avoid double borders when a viewport is * packed into a GtkScrolledWindow */ scrolledwindow viewport frame { border-style: none; } /************ * iconview * ************/ view.view.cell:selected, view.view.cell:selected:focus { border-width: 1px; border-style: solid; border-color: shade(@theme_selected_bg_color, 0.9); border-radius: 2px; background-color: @theme_selected_bg_color; background-image: none; color: @theme_selected_fg_color; } rubberband, .rubberband, view rubberband, .view.rubberband, .content-view.view.rubberband { border-width: 1px; border-style: solid; border-color: shade(@theme_selected_bg_color, 0.9); border-radius: 0; background-color: alpha(@theme_selected_bg_color, 0.3); } iconview:selected, iconview text:selected:focus, iconview text:selected, iconview text selection, iconview text selection:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /*********** * infobar * ***********/ infobar { border-width: 0; border-style: none; } .info { border-width: 1px; border-style: solid; border-color: shade(@info_bg_color, 0.8); background-color: @info_bg_color; background-image: none; color: @info_fg_color; } .info button { border-top-color: shade(@info_bg_color, 0.8); border-right-color: shade(@info_bg_color, 0.72); border-left-color: shade(@info_bg_color, 0.72); border-bottom-color: shade(@info_bg_color, 0.7); background-color: shade(@info_bg_color, 1.08); color: /*@info_fg_color;*/ @theme_fg_color; } .info button:hover { border-top-color: shade(@info_bg_color, 0.85); border-right-color: shade(@info_bg_color, 0.78); border-left-color: shade(@info_bg_color, 0.78); border-bottom-color: shade(@info_bg_color, 0.7); background-color: shade(@info_bg_color, 1.10); } .info button:active { border-color: shade(@info_bg_color, 0.6); background-color: shade(@info_bg_color, 0.95); } .info button:active:hover { border-top-color: shade(@info_bg_color, 0.85); border-right-color: shade(@info_bg_color, 0.78); border-left-color: shade(@info_bg_color, 0.78); border-bottom-color: shade(@info_bg_color, 0.7); } .info button.close { color: @info_fg_color; } .info button.close:hover { background-color: alpha(white, 0.2); } .info button.close:active { color: @info_fg_color; background-color: alpha(black, 0.1); } .warning { border-width: 1px; border-style: solid; border-color: shade(@warning_bg_color, 0.8); background-color: @warning_bg_color; background-image: none; color: @warning_fg_color; } .warning button { border-top-color: shade(@warning_bg_color, 0.8); border-right-color: shade(@warning_bg_color, 0.72); border-left-color: shade(@warning_bg_color, 0.72); border-bottom-color: shade(@warning_bg_color, 0.7); background-color: shade(@warning_bg_color, 1.08); color: /*@warning_fg_color;*/ @theme_fg_color; } .warning button:hover { border-top-color: shade(@warning_bg_color, 0.85); border-right-color: shade(@warning_bg_color, 0.78); border-left-color: shade(@warning_bg_color, 0.78); border-bottom-color: shade(@warning_bg_color, 0.7); background-color: shade(@warning_bg_color, 1.10); } .warning button:active { border-color: shade(@warning_bg_color, 0.6); background-color: shade(@warning_bg_color, 0.95); } .warning button:active:hover { border-top-color: shade(@warning_bg_color, 0.85); border-right-color: shade(@warning_bg_color, 0.78); border-left-color: shade(@warning_bg_color, 0.78); border-bottom-color: shade(@warning_bg_color, 0.7); } .warning button.close { color: @warning_fg_color; } .warning button.close:hover { background-color: alpha(white, 0.2); } .warning button.close:active { color: @warning_fg_color; background-color: alpha(black, 0.1); } .question { border-width: 1px; border-style: solid; border-color: shade(@question_bg_color, 0.8); background-color: @question_bg_color; background-image: none; color: @question_fg_color; } .question button { border-top-color: shade(@question_bg_color, 0.8); border-right-color: shade(@question_bg_color, 0.72); border-left-color: shade(@question_bg_color, 0.72); border-bottom-color: shade(@question_bg_color, 0.7); background-color: shade(@question_bg_color, 1.08); color: /*@question_fg_color;*/ @theme_fg_color; } .question button:hover { border-top-color: shade(@question_bg_color, 0.85); border-right-color: shade(@question_bg_color, 0.78); border-left-color: shade(@question_bg_color, 0.78); border-bottom-color: shade(@question_bg_color, 0.7); background-color: shade(@question_bg_color, 1.10); } .question button:active { border-color: shade(@question_bg_color, 0.6); background-color: shade(@question_bg_color, 0.95); } .question button:active:hover { border-top-color: shade(@question_bg_color, 0.85); border-right-color: shade(@question_bg_color, 0.78); border-left-color: shade(@question_bg_color, 0.78); border-bottom-color: shade(@question_bg_color, 0.7); } .question button.close { color: @question_fg_color; } .question button.close:hover { background-color: alpha(white, 0.2); } .question button.close:active { color: @question_fg_color; background-color: alpha(black, 0.1); } .error { border-width: 1px; border-style: solid; border-color: shade(@error_bg_color, 0.8); background-color: @error_bg_color; background-image: none; color: @error_fg_color; } .error button { border-top-color: shade(@error_bg_color, 0.8); border-right-color: shade(@error_bg_color, 0.72); border-left-color: shade(@error_bg_color, 0.72); border-bottom-color: shade(@error_bg_color, 0.7); background-color: shade(@error_bg_color, 1.08); color: /*@error_fg_color;*/ @theme_fg_color; } .error button:hover { border-top-color: shade(@error_bg_color, 0.85); border-right-color: shade(@error_bg_color, 0.78); border-left-color: shade(@error_bg_color, 0.78); border-bottom-color: shade(@error_bg_color, 0.7); background-color: shade(@error_bg_color, 1.10); } .error button:active { border-color: shade(@error_bg_color, 0.6); background-color: shade(@error_bg_color, 0.95); } .error button:active:hover { border-top-color: shade(@error_bg_color, 0.85); border-right-color: shade(@error_bg_color, 0.78); border-left-color: shade(@error_bg_color, 0.78); border-bottom-color: shade(@error_bg_color, 0.7); } .error button.close { color: @error_fg_color; } .error button.close:hover { background-color: alpha(white, 0.2); } .error button.close:active { color: @error_fg_color; background-color: alpha(black, 0.1); } /******************* * symbolic images * *******************/ image { color: alpha(currentColor, 0.5); } image:hover { color: alpha(currentColor, 0.9); } image:selected, image:selected:hover { color: @theme_selected_fg_color; } /* test */ image:disabled { color: alpha(currentColor, 0.3); } .view image, .view image:hover { color: alpha(currentColor, 0.9); } .view image:selected, .view image:selected:hover { color: @theme_selected_fg_color; } /***************** * miscellaneous * *****************/ .floating-bar { border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-radius: 2px; background-color: @theme_bg_color; background-image: none; color: @theme_fg_color; } .floating-bar top { border-top-width: 0; border-top-right-radius: 0; border-top-left-radius: 0; } .floating-bar right { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .floating-bar bottom { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .floating-bar left { border-left-width: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } .floating-bar button { border-style: none; background-color: transparent; background-image: none; } .view label:disabled, label:disabled { color: alpha(currentColor, 0.5); } label.separator { color: @theme_fg_color; } label.separator:backdrop { color: shade(@theme_fg_color, 1.3); } label selection { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /*label:backdrop { color: alpha(@theme_fg_color, 0.5); } */ .dnd { border-width: 1px; border-style: solid; border-color: shade(@theme_selected_bg_color, 0.9); } grip { background-color: transparent; } arrow, combobox arrow { color: alpha(currentColor, 0.7); -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox:drop(active) { box-shadow: none; } /******** * menu * ********/ menu, treemenu menu, toolbutton menu, combobox menu, toolbar menu, headerbar menu, .primary-toolbar menu, .primary-toolbar button menu, toolbar .primary-toolbar menu, headerbar .primary-toolbar menu { margin: 4px; /* avoid minify of menu */ padding: 3px; border-width: 1px; border-radius: 0px; border-style: solid; border-color: @menu_fg_color; background-color: @menu_bg_color; color: @menu_fg_color; box-shadow: inset -1px 0 shade(@menu_bg_color, 0.65), inset 0 -1px shade(@menu_bg_color, 0.65), inset 1px 0 #f1f1f1, inset 0 1px #f1f1f1; } /* Hover-effect on play-button in ubuntu soundmenu */ menu:selected { background-color: @selected_bg_color; } menu button:hover, menu button:active, menu button:active *:disabled, menu button:disabled, menu button { border-width: 0; background-color: @menu_bg_color; background-image: none; } .context-menu { font: initial; } menu > arrow.top, .menu > arrow.top { margin-top: -3px; border-bottom: 1px solid shade(@theme_bg_color, 0.9); -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } menu > arrow.bottom, .menu > arrow.bottom { margin-bottom: -3px; border-top: 1px solid shade(@theme_bg_color, 0.9); -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /*********** * menubar * ***********/ menubar { -GtkWidget-window-dragging: true; border: 0 solid shade(@menubar_bg_color, 0.7); border-bottom-width: 1px; background-color: @menubar_bg_color; background-image: none; color: @menubar_fg_color; box-shadow: inset 0 -1px shade(@menubar_bg_color, 0.9), inset 1px 1px alpha(@theme_base_color, 0.5); } /*************** * menubaritem * ***************/ menubar menuitem, menubar > menuitem { padding: 3px 5px; border-width: 0; border-style: solid; border-color: transparent; background-color: transparent; background-image: none; color: @menubar_fg_color; } menubar menuitem:hover, menubar > menuitem:hover { border-color: mix(@menubar_bg_color, @menubar_fg_color, 0.21); background-color: mix(@menubar_bg_color, @menubar_fg_color, 0.21); background-image: none; color: shade(@menubar_fg_color, 1.08); } menubar menuitem *:hover, menubar > menuitem *:hover { color: shade(@menubar_fg_color, 1.08); } /************ * menuitem * ************/ treemenu menuitem { padding: 0; border-width: 0; } menu menuitem, menu > menuitem { padding: 3px 3px; border-width: 0; border-style: solid; border-color: transparent; border-radius: 0; background-color: @menu_bg_color; background-image: none; color: @menu_fg_color; } menu menuitem:hover, menu menuitem:active { border-color: shade(@theme_selected_bg_color, 0.9); background-color: @theme_selected_bg_color; background-image: none; } menu menuitem:hover, menu menuitem:active, menu menuitem *:hover, menu menuitem *:active { color: @theme_selected_fg_color; } menu menuitem:disabled, menu menuitem *:disabled { color: mix(@menu_fg_color, @menu_bg_color, 0.5); } /* menu arrow */ menu menuitem arrow, .menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 10px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 10px; } menuitem check, menuitem check:hover, menuitem check:disabled, menuitem radio, menuitem radio:hover, menuitem radio:disabled { border-style: none; min-width: 16px; min-height: 16px; background-color: transparent; background-image: none; } menuitem check:checked, menuitem radio:checked { border-style: none; background-color: transparent; } menuitem calendar:indeterminate { color: mix(@menu_fg_color, @menu_bg_color, 0.5); } menuitem calendar button { border-style: none; background-color: transparent; background-image: none; } menuitem entry { border-color: shade(@menu_bg_color, 0.7); background-color: @menu_bg_color; background-image: none; color: @menu_fg_color; } menuitem entry:active, menuitem entry selection:focus { border-color: shade(@menu_bg_color, 0.7); } menuitem accelerator { color: alpha(@menu_fg_color, 0.6); } menuitem accelerator:hover { color: alpha(@theme_selected_fg_color, 0.8); } menuitem accelerator:disabled { color: alpha(mix(@menu_fg_color, @menu_bg_color, 0.5), 0.6); } model menuitem box image { padding-right: 4px; } /************ * popovers * ************/ popover { margin: 10px; padding: 2px; border-radius: 2px; border-color: shade(@theme_bg_color, 0.8); border-width: 1px; border-style: solid; background-clip: border-box; background-color: @theme_bg_color; color: @theme_fg_color; box-shadow: 0 2px 3px alpha(black, 0.5); } popover.background, .csd popover.background { box-shadow: 0 0 2px 0px gray; border: 1px solid @borders; } popover.background:backdrop { background-color: @theme_bg_color; box-shadow: none; } popover.osd { box-shadow: 0 2px 7px 3px alpha(black, 0.5); } popover > list, popover > .view, popover > toolbar { background-color: transparent; } popover.osd > toolbar button { border-radius: 0; border-width: 0; background-image: none; background-color: transparent; } popover separator, popover.separator { border: 0; background-color: transparent; color: alpha(currentColor, 0.5); font-size: 80%; font-weight: bold; } modelbutton, modelbutton:active, modelbutton:disabled, modelbutton:checked:disabled { padding: 3px 8px; background-color: transparent; background-image: none; border-color: transparent; border-style: none; box-shadow: none; color: @theme_fg_color; } modelbutton:active:hover, modelbutton:hover, modelbutton:selected { border-width: 0; border-color: transparent; background-color: @theme_selected_bg_color; background-image: none; color: @theme_selected_fg_color; } modelbutton.flat:selected, .menuitem.button.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /************ * notebook * ************/ notebook { background-color: @theme_bg_color; background-image: none; border-radius: 0; padding: 0; background-clip: border-box; border-color: shade(@theme_bg_color, 0.82); border-width: 0; border-style: solid; } notebook > stack:not(:only-child) { background-color: @theme_bg_color; background-image: none; border-radius: 0; padding: 0; background-clip: border-box; border-color: shade(@theme_bg_color, 0.82); border-width: 1px; border-style: solid; border-image: url('assets/notebook/notebook.png') 2 2 2 2 stretch; } notebook > frame { border-width: 1px; } notebook > header { border-width: 0; background-color: @theme_bg_color; } notebook > header > frame { border-color: @theme_bg_color; box-shadow: none; } notebook tab { border-width: 4px; border-radius: 0px; border-style: solid; border-color: transparent; background-color: shade(@theme_bg_color, 0.92); color: @theme_fg_color; } notebook tab:checked { outline-color: transparent; background-color: @theme_bg_color; } notebook tab label { /*padding: 1px;*/ padding: 4px 8px 4px 8px; } notebook header.top tab:checked { border-image: url('assets/notebook/tab-top-active.png') 6 6 6 6 stretch; box-shadow: 0 1px @theme_bg_color; } notebook header.top tab { border-image: url('assets/notebook/tab-top.png') 6 6 6 6 stretch; } notebook header.right tab:checked { border-image: url('assets/notebook/tab-right-active.png') 6 6 6 6 stretch; box-shadow: -1px 0 @theme_bg_color; } notebook header.right tab { border-image: url('assets/notebook/tab-right.png') 6 6 6 6 stretch; } notebook header.bottom tab:checked { border-image: url('assets/notebook/tab-bottom-active.png') 6 6 6 6 stretch; box-shadow: 0 -1px @theme_bg_color; } notebook header.bottom tab { border-image: url('assets/notebook/tab-bottom.png') 6 6 6 6 stretch; } notebook header.left tab:checked { border-image: url('assets/notebook/tab-left-active.png') 6 6 6 6 stretch; box-shadow: 1px 0 @theme_bg_color; } notebook header.left tab { border-image: url('assets/notebook/tab-left.png') 6 6 6 6 stretch; } notebook tab button { padding: 0; } notebook GtkDrawingArea { background-color: @theme_base_color; } notebook frame { border-width: 1px; } /* close button styling */ notebook tab button, notebook tab button:hover, notebook tab button:active { padding: 1px; border-width: 0px; border-radius: 2px; border-style: solid; border-color: transparent; background-image: none; background-color: transparent; box-shadow: none; color: mix(@theme_text_color, @theme_base_color, 0.5); } /* COMMON */ notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } notebook > header > tabs > arrow { color: @theme_fg_color; } notebook > header > tabs > arrow:hover { color: shade(@theme_fg_color, 1.2); } notebook > header > tabs > arrow:active { color: shade(@theme_fg_color, 0.8); } notebook > header > tabs > arrow:disabled { color: shade(@theme_bg_color, 0.6); } /****************** * pane separator * ******************/ paned > separator { background-color: @theme_bg_color; color: transparent; } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } /*************** * progressbar * ***************/ progressbar { padding: 0; border-width: 1px; border-radius: 0px; } progressbar progress { border: 1px solid #255584; background-color: #3196ff; box-shadow: inset 1px 1px alpha(@theme_base_color, 0.5); } progressbar trough, progressbar progress { min-height: 18px; } progressbar trough { padding: 2px 0; } progressbar.vertical trough, progressbar.vertical progress { min-height: 0; min-width: 18px; } progressbar.vertical trough { padding: 0 2px; } progressbar trough, progressbar trough.vertical { border-width: 1px; border-radius: 0px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-bottom-color: shade(@theme_base_color, 0.9); border-right-color: shade(@theme_base_color, 0.9); background-color: @theme_base_color; color: @theme_fg_color; box-shadow: inset 1px 1px shade(@theme_bg_color, 0.65), inset -1px -1px shade(@theme_bg_color, 1.02); } /* levelbar */ levelbar trough { padding: 1px; border-radius: 0px; background-color: shade(@theme_bg_color, 0.85); border: 1px solid shade(@theme_bg_color, 0.5); } levelbar block { border-width: 1px; border-style: solid; padding: 1px; border-radius: 0px; border-color: shade(@theme_selected_bg_color, 0.9); background-color: @theme_selected_bg_color; } levelbar. block.horizontal { margin: 0 1px; } levelbar. block.vertical { margin: 1px 0; } levelbar block.high { border-color: shade(@success_color, 0.85); background-image: linear-gradient(to bottom, shade(@success_color, 1.2), @success_color 75%, shade(@success_color, 0.95) ); } 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.9) ); } levelbar block.empty { border-color: alpha(@theme_fg_color, 0.1); background-color: transparent; background-image: none; } /********* * scale * *********/ scale { min-height: 10px; min-width: 10px; padding: 12px; border-width: 1px; border-radius: 0px; } scale slider { border-radius: 0px; min-height: 21px; min-width: 15px; margin: -9px; background-color: transparent; background-repeat: no-repeat; background-image: url('assets/slider-horiz.png'); background-position: center center; } scale.vertical slider { min-height: 15px; min-width: 21px; } scale slider:disabled { border-radius: 0px; background-image: url('assets/slider-horiz.png'); } /* vertical sliders */ scale.vertical slider { border-radius: 0px; background-image: url('assets/slider-vert.png'); } scale.vertical slider:disabled { border-radius: 0px; background-image: url('assets/slider-vert.png'); } scale.fine-tune slider:active, scale.fine-tune slider:active:hover, scale.fine-tune slider.horizontal:active, scale.fine-tune slider.horizontal:active:hover { background-size: 70%; background-repeat: no-repeat; background-position: center; } scale marks { color: alpha(currentColor,0.55); } scale marks.top, scale.fine-tune marks.top { margin-bottom: 6px; margin-top: -12px; } scale marks.bottom, scale.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -12px; } scale marks.top, scale.fine-tune marks.top { margin-right: 6px; margin-left: -12px; } scale marks.bottom, scale.fine-tune marks.bottom { margin-left: 6px; margin-right: -12px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } scale trough { padding: 0; border-width: 1px; border-radius: 2px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-bottom-color: @theme_base_color; border-right-color: @theme_base_color; background-color: shade(@theme_bg_color, 0.6); color: @theme_fg_color; box-shadow: inset 1px 1px @theme_fg_color; margin: 9px 6px; outline-width: 0; } scale trough.vertical { margin: 6px 9px; } scale highlight { background-color: transparent; } scale trough:disabled{ border-color: shade(@theme_bg_color, 0.95); background-color: shade(@theme_bg_color, 0.9); background-image: none; } /************* * scrollbar * *************/ scrollbar { border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.7); padding: 0; background-color: shade(@theme_bg_color, 0.95); background-image: none; border-image: none; } scrollbar trough { border: none; background: transparent; box-shadow: inset 0 2px shade(@theme_bg_color, 0.85), inset 0 -1px shade(@theme_base_color, 0.82); } scrollbar.vertical trough { box-shadow: inset 2px 0 shade(@theme_bg_color, 0.85), inset -1px 0 shade(@theme_base_color, 0.82); } scrollbar button, scrollbar button:active, scrollbar button:disabled { margin: -1px; padding: 4px; border-radius: 0; border-color: shade(@theme_bg_color, 0.8); color: alpha(@theme_fg_color, 0.5); box-shadow: inset 1px 1px alpha(@theme_base_color, 0.7), inset -1px -1px alpha(@theme_fg_color, 0.2); } scrollbar button:active { background-color: shade(@theme_bg_color, 0.9); } scrollbar.vertical button { min-height: 12px; } scrollbar.horizontal button { min-width: 12px; } scrollbar slider { min-height: 45px; min-width: 15px; border-width: 1px; border-radius: 0px; border-style: solid; border-color: shade(@theme_bg_color, 0.65); border-top-color: shade(@theme_bg_color, 0.75); border-left-color: shade(@theme_bg_color, 0.75); background-color: @theme_bg_color; color: @theme_fg_color; box-shadow: inset -1px -1px shade(@theme_bg_color, 0.85), inset 1px 1px @theme_base_color; border-left-width: 0; border-right-width: 0; background-image: url('assets/thumb-v.png'); background-position: center center; background-repeat: no-repeat; } scrollbar.horizontal slider { min-width: 45px; min-height: 12px; border-top-width: 0; border-bottom-width: 0; border-left-width: 1px; border-right-width: 1px; background-image: url('assets/thumb-h.png'); } scrollbar slider.fine-tune:hover:active { border-width: 1px; border-color: transparent; } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { /* -gtk-icon-source: -gtk-icontheme("pan-right-symbolic");*/ -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } scrollbar.horizontal button.up { /* -gtk-icon-source: -gtk-icontheme("pan-left-symbolic");*/ -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } treeview ~ scrollbar.vertical { border-top: 1px solid @borders; margin-top: -1px; } /************* * separator * *************/ separator, .separator, .view.separator, .view separator, .sidebar.view separator, .sidebar.view.separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(shade(@theme_bg_color, 0.9)); background-size: 1px 1px; } /* button separator */ button separator, button.separator { min-width: 1px; min-height: 1px; background-image: image(shade(@theme_bg_color, 0.95)); } button separator:disabled, button.separator:disabled { background-image: image(shade(@theme_bg_color, 0.85)); } /* x-bar separator */ toolbar.separator, toolbar separator, toolbar.separator:disabled, toolbar separator:disabled, .primary-toolbar.separator, .primary-toolbar separator, .primary-toolbar.separator:disabled, .primary-toolbar separator:disabled { background-image: image(shade(@toolbar_bg_color, 0.95)); } headerbar separator, headerbar.separator, headerbar.titlebar separator, headerbar.titlebar.separator { background-image: image(shade(@titlebar_bg_color, 0.35)); } /* x-bar button separator */ toolbar button separator, toolbar button.separator, toolbar.primary-toolbar button separator, toolbar.primary-toolbar button.separator { background-image: image(shade(@toolbar_bg_color, 0.95)); } headerbar button separator, headerbar button.separator, headerbar.titlebar button separator, headerbar.titlebar button.separator { background-image: image(shade(@titlebar_bg_color, 0.95)); } /* titlebutton separator */ .titlebar separator.titlebutton { padding: 0px; background-image: image(shade(@titlebar_bg_color, 0.9)); } .titlebar separator.titlebutton:backdrop { padding: 0px; background-image: image(shade(@theme_bg_color, 0.9)); } /* x-bar button separator disabled */ toolbar button separator:disabled, toolbar button.separator:disabled, toolbar.primary-toolbar button separator:disabled, toolbar.primary-toolbar button.separator:disabled { background-image: image(shade(@toolbar_bg_color, 0.85)); } headerbar button separator:disabled, headerbar button.separator:disabled, headerbar.titlebar button separator:disabled, headerbar.titlebar button.separator:disabled { background-image: image(shade(@titlebar_bg_color, 0.85)); } menuitem separator, menuitem.separator { background-image: image(shade(@menu_bg_color, 0.9)); } combobox separator, combobox.separator { background-image: none; background-color: transparent; } /*********** * sidebar * ***********/ .sidebar, .sidebar.view, .sidebar .view, placessidebar .view, .sidebar scrolledwindow { background-color: @sidebar_bg_color; color: @sidebar_fg_color; } .sidebar row:selected, .sidebar row:selected:hover, .sidebar row:selected:focus, .sidebar .view, .sidebar .view:selected, .sidebar .view:selected:hover, placessidebar .view row:selected, placessidebar .view row:selected:hover, placessidebar .view row:selected:focus { border-color: shade(@theme_selected_bg_color, 0.9); background-color: @theme_selected_bg_color; background-image: none; color: @sidebar_fg_color; } .sidebar row:hover, .sidebar .view:hover, placessidebar .view row:hover { border-color: shade(@theme_selected_bg_color, 1.05); background-color: shade(@theme_selected_bg_color, 1.05); background-image: none; color: @sidebar_fg_color; } .sidebar row:selected:hover, .sidebar .view:selected:hover, placessidebar .view row:selected:hover { border-color: shade(@theme_selected_bg_color, 1.05); background-color: shade(@theme_selected_bg_color, 1.05); background-image: none; color: @theme_selected_fg_color; } .sidebar frame { border-width: 0; } placessidebar > viewport.frame { border-style: none; } placessidebar row { min-height: 36px; padding: 0px; } placessidebar row > revealer { padding: 0 14px; } placessidebar row image.sidebar-icon { opacity: 0.7; } placessidebar row image.sidebar-icon:dir(ltr) { padding-right: 8px; } placessidebar row image.sidebar-icon:dir(rtl) { padding-left: 8px; } placessidebar row label.sidebar-label:dir(ltr) { padding-right: 2px; } placessidebar row label.sidebar-label:dir(rtl) { padding-left: 2px; } button.sidebar-button { min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; -gtk-outline-radius: 100%; } /************** * spinbutton * **************/ spinbutton button { border-radius: 0; border-right-width: 0; } spinbutton button.up { border-right-width: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } spinbutton button.down { border-right-width: 0; } spinbutton.horizontal entry { border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 7px 15px; } spinbutton.vertical entry { border-radius: 0; box-shadow: none; } spinbutton.vertical button { border-radius: 0; border-bottom-width: 0; border-right-width: 1px; } spinbutton.vertical button.up { border-bottom-width: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; } spinbutton.vertical button.down { border-bottom-width: 1px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } spinbutton:not(.vertical) selection, spinbutton:not(.vertical) selection:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /*********** * spinner * ***********/ @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; } /************* * statusbar * *************/ statusbar { padding: 4px; color: @theme_fg_color; } statusbar frame { border: none; } /********** * switch * **********/ switch { padding: 0; margin: 0; border-radius: 2px; border-width: 1px; border-color: shade(@theme_bg_color, 0.8); background-color: shade(@theme_bg_color, 0.95); background-image: none; color: @theme_fg_color; box-shadow: inset 0 0 0 1px shade(@theme_bg_color, 0.8); } switch:checked { border-color: shade(@theme_selected_bg_color, 0.9); background-color: @theme_selected_bg_color; background-image: none; color: @theme_selected_fg_color; } switch:disabled { border-color: shade(@theme_bg_color, 0.85); background-color: shade(@theme_bg_color, 0.9); background-image: none; color: mix(@theme_fg_color, @theme_bg_color, 0.5); } switch slider { min-width: 20px; min-height: 20px; border-width: 1px; border-radius: 2px; border-style: solid; border-color: shade(@theme_bg_color, 0.45); background-color: @theme_bg_color; color: @theme_fg_color; box-shadow: inset 3px 3px @theme_base_color, inset 1px 1px @theme_bg_color, inset -2px -2px shade(@theme_bg_color, 0.85), inset -1px -1px shade(@theme_bg_color, 0.65); } switch slider:disabled { border-color: shade(@theme_bg_color, 0.85); background-color: shade(@theme_bg_color, 0.9); background-image: none; } /************ * textview * ************/ textview { background-color: @theme_base_color; color: @theme_text_color; } .view:selected:focus, iconview:selected:focus, .view:selected, .view text:selected:focus, textview text:selected:focus, .view text:selected, textview text:selected, .view text selection:focus, .view text selection, textview text selection:focus, textview text selection { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /* flowbox */ flowbox flowboxchild:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /***************** * color chooser * *****************/ colorswatch, colorswatch:selected { border-width: 1px; border-style: solid; border-color: alpha(black, 0.1); border-radius: 1px; background-color: transparent; background-clip: border-box; } colorswatch:hover, colorswatch:selected:hover { border-color: alpha(black, 0.3); } colorswatch.color-dark:hover { } colorswatch.color-light:hover { } colorswatch.color-light:selected:hover, colorswatch.color-dark:selected:hover { background-image: none; } colorswatch.left, colorswatch:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } colorswatch.right, colorswatch:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } colorswatch:only-child { border-radius: 2px; } colorswatch.top { border-top-left-radius: 2px; border-top-right-radius: 2px; } colorswatch.bottom { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } colorchooser #add-color-button { background-clip: padding-box; border-color: alpha(black, 0.1); background-color: shade(@theme_bg_color, 0.95); color: @theme_fg_color; } colorchooser #add-color-button:hover { border-color: alpha(black, 0.3); background-color: shade(@theme_bg_color, 0.90); color: @theme_fg_color; } .color-active-badge, .color-active-badge:selected { border-width: 1px; border-style: solid; border-width: 1px; background-color: transparent; } .color-active-badge.color-light, .color-active-badge.color-light:hover { border-color: alpha(black, 0.3); color: alpha(black, 0.3); } .color-active-badge.color-dark, .color-active-badge.color-dark:hover { border-color: alpha(white, 0.3); color: alpha(white, 0.3); } GtkColorEditor colorswatch { border-radius: 2px; } GtkColorEditor colorswatch.color-dark:hover, GtkColorEditor colorswatch.color-light:hover { background-image: none; border-color: alpha(black, 0.3); } GtkColorEditor button.color { padding: 2px; } /************** * header-bar * **************/ headerbar { background-color: transparent; } headerbar:not(.titlebar) { padding: 4px; border-width: 0; border-style: solid; border-color: shade(@theme_bg_color, 0.8); background-color: @theme_bg_color; background-image: none; color: @theme_fg_color; } headerbar .title { font-weight: bold; padding: 0 12px; } headerbar .subtitle { font-size: smaller; padding: 0 12px; } headerbar button { padding: 6px 9px; } headerbar entry:active, headerbar entry selection:focus { border-width: 1px; border-color: shade(@selected_bg_color, 0.6); } /*********** * toolbar * ***********/ toolbar { padding: 4px; border-style: none; background-color: @toolbar_bg_color; background-image: none; color: @toolbar_fg_color; } toolbar button { padding: 2px; } toolbar button.text-button { padding: 2px 4px; } toolbar button image-button { padding: 4px 3px 3px 4px; } toolbar:disabled { background-color: shade(@toolbar_bg_color, 0.9); color: mix(@toolbar_fg_color, @toolbar_bg_color, 0.5); } /* menubar toolbars */ toolbar menubar { -GtkToolbar-button-relief: normal; } /******************* * primary-toolbar * *******************/ .primary-toolbar, .primary-toolbar toolbar, .primary-toolbartoolbar { -GtkWidget-window-dragging: true; padding: 4px; border-width: 0; border-style: solid; border-color: shade(@toolbar_bg_color, 0.8); background-color: @toolbar_bg_color; background-image: none; color: @toolbar_fg_color; } .primary-toolbar combobox, toolbar.primary-toolbar button { padding: 6px 8px; color: @toolbar_fg_color; } /* unnecessary code (for now?) toolbar.primary-toolbar button.raised, .primary-toolbar .raisedbutton, toolbar combobox, toolbar button { padding: 10px; border-color: transparent; background-color: shade(@toolbar_bg_color, 1.08); background-image: none; color: @toolbar_fg_color; } toolbar.primary-toolbar button:hover, combobox button.combo:hover { border-color: transparent; background-color: shade(@toolbar_bg_color, 1.10); background-image: none; } toolbar.primary-toolbar button:checked, toolbar.primary-toolbar button:active, combobox button.combo:checked { border-color: transparent; background-color: shade(@theme_selected_bg_color, 0.95); background-image: none; } toolbar.primary-toolbar button:active:hover, combobox button.combo:checked:hover { border-color: transparent; } toolbar.primary-toolbar button:focus, toolbar.primary-toolbar button:hover:focus, toolbar.primary-toolbar button:active:focus, toolbar.primary-toolbar button:active:hover:focus, toolbar button:focus, combobox button.combo:hover:focus, combobox button.combo:checked:focus, combobox button.combo:checked:hover:focus { border-color: transparent; } toolbar.primary-toolbar button:disabled, toolbar button:disabled { border-color: transparent; background-color: @toolbar_bg_color; background-image: none; } toolbar.primary-toolbar button:active *:disabled, combobox button.combo:checked *:disabled { border-color: transparent; background-color: shade(@toolbar_bg_color, 0.80); background-image: none; } */ .primary-toolbar entry, toolbar entry { border-width: 1px; border-color: shade(@theme_bg_color, 0.6); } .primary-toolbar entry:active, .primary-toolbar entry selection:focus, toolbar entry:active, toolbar entry selection:focus { border-width: 1px; border-color: shade(@selected_bg_color, 0.6); } /* inline-toolbar */ .inline-toolbartoolbar { -GtkToolbar-button-relief: normal; padding: 1px; border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-radius: 0; background-color: @theme_bg_color; background-image: none; } .inline-toolbartoolbar:last-child { border-width: 1px; border-color: shade(@theme_bg_color, 0.8); border-radius: 0; } toolbar.inline-toolbar button { padding: 1px; border-width: 1px; border-style: solid; border-color: shade(@theme_bg_color, 0.8); border-radius: 0; background-color: shade(@theme_bg_color, 1.08); background-image: none; color: @theme_fg_color; } toolbar.inline-toolbar button:hover { border-color: shade(@theme_bg_color, 0.7); background-color: shade(@theme_bg_color, 1.10); background-image: none; } toolbar.inline-toolbar button:active { border-color: shade(@theme_bg_color, 0.8); background-color: shade(@theme_bg_color, 0.95); background-image: none; } toolbar.inline-toolbar button:active:hover { border-color: shade(@theme_bg_color, 0.7); } toolbar.inline-toolbar button:focus, toolbar.inline-toolbar button:hover:focus, toolbar.inline-toolbar button:active:focus, toolbar.inline-toolbar button:active:hover:focus { border-color: shade(@theme_bg_color, 0.7); } toolbar.inline-toolbar button:disabled, .inline-toolbartoolbar toolbutton button:disabled { border-color: shade(@theme_bg_color, 0.85); background-color: shade(@theme_bg_color, 0.9); background-image: none; } toolbar.inline-toolbar button:active *:disabled .inline-toolbartoolbar toolbutton button:active *:disabled { border-color: shade(@theme_bg_color, 0.75); background-color: shade(@theme_bg_color, 0.80); background-image: none; } /****************** * Linked Widgets * *****************/ .linked entry, .linked button, .linked combobox box.linked button { border-radius: 0; border-right-width: 0; } .linked entry:first-child { border-right-width: 0; } .linked button:first-child, .linked combobox:first-child box.linked button { border-right-width: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .linked entry:last-child { border-right-width: 1px; } .linked button:last-child, .linked combobox:last-child box.linked button { border-right-width: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .linked button:not(.combo):only-child { border-radius: 2px; } .vertical.linked entry { border-right-width: 1px; border-bottom-width: 0; } .vertical.linked button, .vertical.linked combobox box.linked button { border-right-width: 1px; border-bottom-width: 0; border-radius: 0; } .vertical.linked entry:first-child { border-bottom-width: 0; } .vertical.linked button:first-child, .vertical.linked combobox:first-child box.linked button { border-bottom-width: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 0; } .vertical.linked entry:last-child { border-bottom-width: 1px; } .vertical.linked button:last-child, .vertical.linked combobox:last-child box.linked button { border-bottom-width: 1px; border-top-right-radius: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .vertical.linked entry:only-child { border-bottom-width: 1px; } .vertical.linked button:only-child, .vertical.linked combobox .linked:only-child button { border-bottom-width: 1px; } .vertical.linked spinbutton button:first-child { border-width: 1px; border-right-width: 0; } .vertical.linked spinbutton button:last-child { border-width: 0; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Stack switcher */ stackswitcher button.text-button { min-width: 80px; } /*********** * tooltip * ***********/ tooltip { border-radius: 0; box-shadow: none; } tooltip.background { border: 1px solid shade(@tooltip_fg_color, 0.8); background-color: @tooltip_bg_color; background-clip: padding-box; } tooltip.background label { padding: 1px; } tooltip decoration { background-color: transparent; } tooltip * { background-color: transparent; color: @tooltip_fg_color; } /************ * treeview * ************/ treeview { } treeview.dnd { border-width: 1px; border-style: solid; border-color: @theme_selected_bg_color; border-radius: 0; } treeview entry { border-radius: 0; background-color: @theme_base_color; background-image: none; } /* treeview */ treeview.view:selected:focus, treeview.view:selected, row:selected { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /************ * viewport * ************/ viewport frame { border-width: 0; } .view { background-color: @theme_base_color; color: @theme_text_color; } .view:disabled, .view:disabled:disabled { background-color: shade(@theme_base_color, 0.9); color: mix(@theme_fg_color, @theme_bg_color, 0.5); } .view:selected, .view:selected:focus { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } /************** * action-bar * **************/ actionbar { padding: 4px; border-width: 1px 0 0 0; border-style: solid; border-color: shade(@theme_bg_color, 0.8); background-color: @theme_bg_color; background-image: none; color: @theme_fg_color; } actionbar button.text-button { padding: 4px; } actionbar button.image-button { padding: 6px; } actionbar .title { font-weight: bold; padding: 0 12px; } actionbar .subtitle { font-size: smaller; padding: 0 12px; } /*************** * search bars * ***************/ searchbar { border-width: 0 0 1px 0; border-style: solid; border-color: shade(@theme_bg_color, 0.8); background-color: shade(@theme_bg_color, 0.98); } searchbar button.close-button { padding: 4px; } /******************** * various choosers * ********************/ button.font separator, button.font.separator, button.file separator, button.file.separator { background-color: transparent } button.font label:last-child { color: alpha(currentColor, 0.7); } button.file image:last-child { color: alpha(currentColor, 0.7); } /********************* * app notifications * *********************/ .app-notification { border-style: solid; border-color: shade(@theme_base_color, 0.8); border-width: 0 1px 1px 1px; border-radius: 0 0 2px 2px; padding: 8px; background-color: @theme_base_color; background-image: none; color: @theme_text_color; } .app-notification border { border: none; } /******* * osd * *******/ .background.osd { color: @osd_fg; background-color: @osd_bg; } overlay.osd { background-color: transparent; } .osd frame { background-clip: border-box; background-origin: border-box; } .osd button { padding: 4px; border-width: 1px; border-style: solid; border-color: shade(@osd_bg, 0.8); border-radius: 2px; background-color: shade(@osd_bg, 1.08); background-image: none; color: @osd_fg; } .osd button:hover { border-color: shade(@osd_bg, 0.7); background-color: shade(@osd_bg, 1.10); background-image: none; } .osd button:active, .osd menu button:active { border-color: shade(@osd_bg, 0.8); background-color: shade(@osd_bg, 0.95); background-image: none; } .osd button:active:hover, .osd menu button:active:hover { border-color: shade(@osd_bg, 0.7); } .osd button:disabled { border-color: shade(@osd_bg, 0.85); background-color: shade(@osd_bg, 0.9); background-image: none; } .osd button:active *:disabled { background-color: shade(@osd_bg, 0.80); background-image: none; } .osd toolbar { -GtkToolbar-button-relief: normal; padding: 4px; border-width: 1px; border-style: solid; border-radius: 2px; border-color: shade(@osd_bg, 0.8); background-color: @osd_bg; background-image: none; color: @osd_fg; } .osd toolbar button { padding: 4px; border-width: 1px; border-style: solid; border-color: shade(@osd_bg, 0.8); border-radius: 2px; background-color: shade(@osd_bg, 1.08); background-image: none; color: @osd_fg; } .osd combobox button.combo:hover { border-color: shade(@osd_bg, 0.7); background-color: shade(@osd_bg, 1.10); background-image: none; } .osd combobox button.combo:checked { border-color: shade(@osd_bg, 0.8); background-color: shade(@osd_bg, 0.95); background-image: none; } .osd combobox button.combo:checked:hover { border-color: shade(@osd_bg, 0.7); } .osd toolbar button:focus, .osd combobox button.combo:hover:focus, .osd combobox button.combo:checked:focus, .osd combobox button.combo:checked:hover:focus { border-color: shade(@osd_bg, 0.7); } .osd toolbar button:disabled { border-color: shade(@osd_bg, 0.85); background-color: shade(@osd_bg, 0.9); background-image: none; } .osd combobox button.combo:checked *:disabled { border-color: shade(@osd_bg, 0.75); background-color: shade(@osd_bg, 0.80); background-image: none; } .osd toolbar button:first-child { border-radius: 2px 0 0 2px; border-width: 1px 0 1px 1px; box-shadow: inset -1px 0 shade(@osd_bg, 0.9); } .osd toolbar button:last-child { box-shadow: none; border-radius: 0 2px 2px 0; border-width: 1px 1px 1px 0; } .osd toolbar button:only-child, .osd toolbar toolbutton, .osd toolbar toolbutton:only-child, .osd toolbar toolbutton:last-child, .osd toolbar toolbutton:first-child { border-width: 1px; border-radius: 2px; border-style: solid; } .osd toolbar separator, .osd toolbar.separator { color: shade(@osd_bg, 0.9); } .osd scale slider { background-color: shade(@osd_bg, 1.08); background-image: none; /* we will draw the border using box shadow for now */ box-shadow: inset 1px 0 shade(@osd_bg, 0.8), inset 0 1px shade(@osd_bg, 0.8), inset -1px 0 shade(@osd_bg, 0.8), inset 0 -1px shade(@osd_bg, 0.8); } .osd scale slider:hover { box-shadow: inset 1px 0 shade(@osd_bg, 0.7), inset 0 1px shade(@osd_bg, 0.7), inset -1px 0 shade(@osd_bg, 0.7), inset 0 -1px shade(@osd_bg, 0.7); } .osd scale slider:disabled { background-color: shade(@osd_bg, 0.9); background-image: none; box-shadow: inset 1px 0 shade(@osd_bg, 0.85), inset 0 1px shade(@osd_bg, 0.85), inset -1px 0 shade(@osd_bg, 0.85), inset 0 -1px shade(@osd_bg, 0.85); } .osd scale trough { border-color: shade(@osd_bg, 0.8); background-color: shade(@osd_bg, 1.08); background-image: none; } .osd scale trough.highlight { border-color: @theme_selected_bg_color; background-color: @theme_selected_bg_color; background-image: none; } .osd scale trough:disabled, .osd scale trough.highlight:disabled { border-color: shade(@osd_bg, 0.85); background-color: shade(@osd_bg, 0.9); background-image: none; } /* used by gnome-settings-daemon's media-keys OSD */ .osd trough { background-color: shade(@osd_bg, 0.8); } .osd progressbar, progressbar.osd { min-width: 1px; min-height: 2px; padding: 0; } .osd progressbar progress { min-width: 1px; min-height: 2px; background-color: @osd_fg; } .osd progressbar trough, progressbar.osd trough { min-width: 1px; min-height: 2px; padding: 0; border-style: none; border-radius: 0; background-image: none; background-color: transparent; } .osd progressbar progress, progressbar.osd progress { border-style: none; border-radius: 0; background-color: @theme_selected_bg_color; background-image: none; } .osd view, .osd.view { background-color: @osd_base; } .osd scrollbar trough { background-color: @osd_bg; } .osd scrollbar slider { min-width: 4px; min-height: 4px; border-width: 1px; border-color: mix(shade(@osd_base, 0.87), @osd_fg, 0.21); border-radius: 0; background-color: mix(@osd_base, @osd_fg, 0.21); } .osd scrollbar slider:hover { border-color: mix(shade(@osd_base, 0.87), @osd_fg, 0.31); background-color: mix(@osd_base, @osd_fg, 0.31); } .osd scrollbar slider:active { border-color: shade(@theme_selected_bg_color, 0.9); background-color: @theme_selected_bg_color; } .osd iconview.cell:selected, .osd iconview.cell:selected:focus { background-color: transparent; border-style: solid; border-radius: 2px; border-width: 3px; border-color: @osd_fg; outline-color: transparent; } /* used by Documents */ .osd .page-thumbnail { border-style: solid; border-width: 1px; border-color: shade(@osd_bg, 0.9); /* when there's no pixbuf yet */ background-color: @osd_bg; } /****************************** * destructive action buttons * ******************************/ .destructive-action button { border-width: 1px; border-style: solid; border-color: shade(@error_color, 0.8); border-radius: 2px; background-color: @error_color; background-image: none; color: mix(@theme_selected_fg_color, @error_color, 0.1); } .destructive-action button:hover { border-color: shade(@error_color, 0.7); background-color: shade(@error_color, 1.12); background-image: none; } .destructive-action button:active { border-color: shade(@error_color, 0.8); background-color: shade(@error_color, 0.87); background-image: none; } .destructive-action button:hover:active { border-color: shade(@error_color, 0.7); } /****************************** * suggested action buttons * ******************************/ .suggested-action button { border-width: 1px; border-style: solid; border-color: shade(@theme_selected_bg_color, 0.9); border-radius: 2px; background-color: shade(@theme_selected_bg_color, 1.18); background-image: none; color: mix(@theme_selected_fg_color, @theme_selected_bg_color, 0.1); } .suggested-action button:hover { border-color: shade(@theme_selected_bg_color, 0.8); background-color: shade(@theme_selected_bg_color, 1.20); background-image: none; } .suggested-action button:active { border-color: shade(@theme_selected_bg_color, 0.9); background-color: shade(@theme_selected_bg_color, 1.05); background-image: none; } .suggested-action button:hover:active { border-color: shade(@theme_selected_bg_color, 0.8); } /****************** * selection mode * ******************/ .selection-mode headerbar, .selection-mode toolbar { border-style: solid; border-color: @theme_selected_bg_color; background-color: shade(@theme_selected_bg_color, 1.6); background-image: none; color: @theme_selected_bg_color; } .selection-mode headerbar { border-top-color: shade(@theme_selected_bg_color, 1.6); border-bottom-color: @theme_selected_bg_color; } .selection-mode toolbar { padding: 4px; } /* regular button */ .selection-mode headerbar button, .selection-mode toolbar button, .selection-mode toolbar toolbutton { border-width: 1px; border-style: solid; border-color: @theme_selected_bg_color; border-radius: 2px; background-color: shade(@theme_selected_bg_color, 1.68); background-image: none; color: shade(@theme_selected_bg_color, 0.8); } .selection-mode headerbar button:hover, .selection-mode combobox button.combo:hover, .selection-mode toolbar toolbutton:hover { border-color: shade(@theme_selected_bg_color, 0.9); background-color: shade(@theme_selected_bg_color, 1.70); background-image: none; } .selection-mode headerbar button:active, .selection-mode combobox button.combo:checked, .selection-mode toolbar toolbutton:active { border-color: shade(@theme_selected_bg_color, 0.9); background-color: shade(@theme_selected_bg_color, 1.55); background-image: none; } .selection-mode headerbar button:hover:active, .selection-mode combobox button.combo:hover:active, .selection-mode toolbar toolbutton:hover:active { border-color: shade(@theme_selected_bg_color, 0.8); } /* suggested button */ .selection-mode headerbar .suggested-action button, .selection-mode toolbar .suggested-action button, .selection-mode toolbar toolbutton.suggested-action button { border-width: 1px; border-style: solid; border-color: shade(@theme_selected_bg_color, 0.9); border-radius: 2px; background-color: shade(@theme_selected_bg_color, 1.18); background-image: none; color: mix(@theme_selected_fg_color, @theme_selected_bg_color, 0.1); } .selection-mode headerbar .suggested-action button:hover, .selection-mode toolbar .suggested-action button:hover, .selection-mode toolbar toolbutton.suggested-action button:hover { border-color: shade(@theme_selected_bg_color, 0.8); background-color: shade(@theme_selected_bg_color, 1.20); background-image: none; } .selection-mode headerbar .suggested-action button:active, .selection-mode toolbar .suggested-action button:active, .selection-mode toolbar toolbutton.suggested-action:active { border-color: shade(@theme_selected_bg_color, 0.9); background-color: shade(@theme_selected_bg_color, 1.05); background-image: none; } .selection-mode headerbar .suggested-action button:hover:active, .selection-mode toolbar .suggested-action button:hover:active, .selection-mode toolbar toolbutton.suggested-action button:hover:active { border-color: shade(@theme_selected_bg_color, 0.8); } /* menu button */ .selection-mode headerbar .selection-menu button, .selection-mode toolbar .selection-menu button { border-style: none; background-color: transparent; background-image: none; color: shade(@theme_selected_bg_color, 0.8); } .selection-mode toolbar label:disabled, .selection-mode toolbar .selection-menu button label { color: shade(@theme_selected_bg_color, 0.7); } .selection-mode headerbar .selection-menu button:hover, .selection-mode toolbar label:hover, .selection-mode toolbar .selection-menu button:hover, .selection-mode toolbar .selection-menu button label:hover { color: shade(@theme_selected_bg_color, 0.7); } .selection-mode headerbar .selection-menu button:active, .selection-mode toolbar .selection-menu button:active { color: shade(@theme_selected_bg_color, 0.8); box-shadow: none; } /************************* * touch text selections * ************************* GtkBubbleWindow { border-radius: 2px; background-clip: border-box; } GtkBubbleWindow.osd.background { background-color: @osd_bg; } GtkBubbleWindow toolbar { background-color: transparent; }*/ /******* * CSD * *******/ .titlebar, headerbar.titlebar, .titlebar headerbar { border-radius: 0; padding: 2px; background-color: @titlebar_bg_color; background-position: right; background-size: 200px 100%; background-repeat: no-repeat; color: @titlebar_fg_color; box-shadow: inset 1px 1px mix(@titlebar_bg_color, @theme_base_color, 0.4), inset -1px -1px mix(@titlebar_bg_color, @titlebar_bg_color, 0.3); } .titlebar:backdrop, headerbar.titlebar:backdrop { background-color: shade(@theme_bg_color, 1.08); color: alpha(@titlebar_fg_color, 0.84); text-shadow: none; box-shadow: inset 1px 1px shade(@theme_base_color, 0.95), inset -1px -1px shade(@theme_bg_color, 0.85); } .titlebar headerbar, .titlebar headerbar:backdrop { background: none; box-shadow: none; } .titlebar .titlebutton:not(separator) { padding: 3px; border-radius: 0; border: 1px solid shade(@titlebar_bg_color, 0.8); border-right-color: shade(@titlebar_bg_color, 1.25); border-bottom-color: shade(@titlebar_bg_color, 1.25); background-image: linear-gradient(to bottom right, @titlebar_bg_color, shade(@titlebar_bg_color, 0.85)); box-shadow: inset -1px -1px shade(@titlebar_bg_color, 0.8), inset 1px 1px shade(@titlebar_bg_color, 1.1); } .titlebar .titlebutton:hover { background-image: linear-gradient(to top left, @titlebar_bg_color, shade(@titlebar_bg_color, 0.85)); } .titlebar .titlebutton:backdrop { border-color: shade(@theme_bg_color, 0.8); border-right-color: shade(@theme_bg_color, 1.02); border-bottom-color: shade(@theme_bg_color, 1.02); background-image: linear-gradient(to bottom right, shade(@theme_bg_color, 1.08), shade(@theme_bg_color, 0.95)); box-shadow: inset -1px -1px shade(@theme_bg_color, 0.8), inset 1px 1px shade(@theme_bg_color, 1.02); } .titlebar .titlebutton:backdrop:hover { background-image: linear-gradient(to top left, shade(@theme_bg_color, 1.08), shade(@theme_bg_color, 0.95)); } .titlebar.default-decoration { border: none; box-shadow: none; } .tiled .titlebar { border-radius: 0; } .maximized .titlebar { border-radius: 0; } .titlebar.default-decoration { border: none; box-shadow: none; } .titlebar .title { font-weight: bold } decoration { border-style: none; border-radius: 0; box-shadow: 0 3px 7px 1px alpha(black, 0.7); /* this is used for the resize cursor area */ margin: 10px; } .tiled decoration { border-radius: 0; } decoration:backdrop { box-shadow: 0 6px 6px 1px alpha(black, 0.5); } /* Server-side decoration (SSD) */ .ssd decoration { border-radius: 0 0 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); } .ssd decoration, .ssd decoration:backdrop { background-color: @titlebar_bg_color; } /* Client-side Decorations (CSD)*/ decoration.csdtooltip, tooltip { border-radius: 0; box-shadow: none; } messagedialog.csd decoration { border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } .solid-csd decoration { border: solid 1px shade(@theme_bg_color, 0.8); border-radius: 0; margin: 2px; background-color: @titlebar_bg_color; box-shadow: none; } decoration { border-width: 0px; box-shadow: 0 3px 9px 1px @dark_shadow, 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 10px; } decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; } .tiled decoration, .maximized decoration, .fullscreen decoration, .ssd decoration.maximized { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } .csd.popup decoration { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } tooltip.csd decoration { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1); } messagedialog.csd decoration { background-color: @theme_bg_color; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } /* non-transparent CSD */ .solid-csd decoration { margin: 0; padding: 4px; background-color: @theme_bg_color; border: solid 1px shade(@theme_bg_color, 0.8); box-shadow: inset 0 0 0 3px @dark_shadow, inset 0 1px rgba(20, 20, 20, 0.8); } .solid-csd decoration:backdrop { box-shadow: inset 0 0 0 3px @dark_shadow, inset 0 1px rgba(20, 20, 20, 0.8); } /************** * over under * **************/ overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(64, 128, 251, 0.2)), to(rgba(64, 128, 251, 0))); background-size: 100% 60%; 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.6, from(rgba(64, 128, 251, 0.2)), to(rgba(64, 128, 251, 0))); background-size: 100% 60%; 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.6, from(rgba(64, 128, 251, 0.2)), to(rgba(64, 128, 251, 0))); background-size: 60% 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.6, from(rgba(64, 128, 251, 0.2)), to(rgba(64, 128, 251, 0))); background-size: 60% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } undershoot.top { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; } undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; } undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; } undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; } .overlay-bar { background-color: rgba(0, 0, 0, 0.8); border-radius: 0; padding: 3px 6px; margin: 3px; } .overlay-bar label { color: @tooltip_fg_color; }