From 36ceea5cf9a4db383d5c9d5734dd2f13346fb001 Mon Sep 17 00:00:00 2001 From: Dustin Falgout Date: Fri, 8 Apr 2016 23:30:09 -0500 Subject: [PATCH] Add support (beta) for gtk 3.20. --- Makefile | 7 + gtk-3.20/assets | 1 + gtk-3.20/gtk-dark.css | 1 + gtk-3.20/gtk-widgets-assets-dark.css | 67 + gtk-3.20/gtk-widgets-assets.css | 154 + gtk-3.20/gtk-widgets.css | 4021 +++++++++++++++++++++++ gtk-3.20/gtk.css | 1 + gtk-3.20/gtk.gresource.xml | 44 + gtk-3.20/scss/_colors.scss | 73 + gtk-3.20/scss/_functions.scss | 79 + gtk-3.20/scss/_global.scss | 111 + gtk-3.20/scss/_widgets.scss | 37 + gtk-3.20/scss/apps/_gedit.scss | 132 + gtk-3.20/scss/apps/_gnome-terminal.scss | 57 + gtk-3.20/scss/apps/_lightdm.scss | 193 ++ gtk-3.20/scss/apps/_nautilus.scss | 70 + gtk-3.20/scss/apps/_nemo.scss | 153 + gtk-3.20/scss/apps/_panel.scss | 80 + gtk-3.20/scss/apps/_synaptic.scss | 15 + gtk-3.20/scss/apps/_unity-greeter.scss | 116 + gtk-3.20/scss/apps/_unity.scss | 70 + gtk-3.20/scss/apps/_xfce.scss | 26 + gtk-3.20/scss/gtk-dark.scss | 3 + gtk-3.20/scss/gtk.scss | 3 + gtk-3.20/scss/widgets/_actionbar.scss | 113 + gtk-3.20/scss/widgets/_base.scss | 137 + gtk-3.20/scss/widgets/_button.scss | 320 ++ gtk-3.20/scss/widgets/_calendar.scss | 29 + gtk-3.20/scss/widgets/_choosers.scss | 124 + gtk-3.20/scss/widgets/_entry.scss | 84 + gtk-3.20/scss/widgets/_grid.scss | 48 + gtk-3.20/scss/widgets/_infobar.scss | 38 + gtk-3.20/scss/widgets/_menu.scss | 273 ++ gtk-3.20/scss/widgets/_misc.scss | 253 ++ gtk-3.20/scss/widgets/_notebook.scss | 125 + gtk-3.20/scss/widgets/_osd.scss | 131 + gtk-3.20/scss/widgets/_overshoot.scss | 119 + gtk-3.20/scss/widgets/_progress.scss | 322 ++ gtk-3.20/scss/widgets/_scrollbar.scss | 164 + gtk-3.20/scss/widgets/_sidebar.scss | 117 + gtk-3.20/scss/widgets/_spinner.scss | 24 + gtk-3.20/scss/widgets/_toggle.scss | 116 + gtk-3.20/scss/widgets/_toolbar.scss | 123 + gtk-3.20/scss/widgets/_view.scss | 332 ++ gtk-3.20/scss/widgets/_window.scss | 55 + gtk-3.20/thumbnail.png | 1 + 46 files changed, 8562 insertions(+) create mode 120000 gtk-3.20/assets create mode 100755 gtk-3.20/gtk-dark.css create mode 100644 gtk-3.20/gtk-widgets-assets-dark.css create mode 100644 gtk-3.20/gtk-widgets-assets.css create mode 100644 gtk-3.20/gtk-widgets.css create mode 100755 gtk-3.20/gtk.css create mode 100644 gtk-3.20/gtk.gresource.xml create mode 100755 gtk-3.20/scss/_colors.scss create mode 100755 gtk-3.20/scss/_functions.scss create mode 100755 gtk-3.20/scss/_global.scss create mode 100755 gtk-3.20/scss/_widgets.scss create mode 100644 gtk-3.20/scss/apps/_gedit.scss create mode 100644 gtk-3.20/scss/apps/_gnome-terminal.scss create mode 100644 gtk-3.20/scss/apps/_lightdm.scss create mode 100644 gtk-3.20/scss/apps/_nautilus.scss create mode 100644 gtk-3.20/scss/apps/_nemo.scss create mode 100644 gtk-3.20/scss/apps/_panel.scss create mode 100644 gtk-3.20/scss/apps/_synaptic.scss create mode 100644 gtk-3.20/scss/apps/_unity-greeter.scss create mode 100644 gtk-3.20/scss/apps/_unity.scss create mode 100644 gtk-3.20/scss/apps/_xfce.scss create mode 100644 gtk-3.20/scss/gtk-dark.scss create mode 100644 gtk-3.20/scss/gtk.scss create mode 100644 gtk-3.20/scss/widgets/_actionbar.scss create mode 100755 gtk-3.20/scss/widgets/_base.scss create mode 100755 gtk-3.20/scss/widgets/_button.scss create mode 100644 gtk-3.20/scss/widgets/_calendar.scss create mode 100644 gtk-3.20/scss/widgets/_choosers.scss create mode 100755 gtk-3.20/scss/widgets/_entry.scss create mode 100644 gtk-3.20/scss/widgets/_grid.scss create mode 100644 gtk-3.20/scss/widgets/_infobar.scss create mode 100755 gtk-3.20/scss/widgets/_menu.scss create mode 100644 gtk-3.20/scss/widgets/_misc.scss create mode 100644 gtk-3.20/scss/widgets/_notebook.scss create mode 100644 gtk-3.20/scss/widgets/_osd.scss create mode 100644 gtk-3.20/scss/widgets/_overshoot.scss create mode 100644 gtk-3.20/scss/widgets/_progress.scss create mode 100644 gtk-3.20/scss/widgets/_scrollbar.scss create mode 100755 gtk-3.20/scss/widgets/_sidebar.scss create mode 100644 gtk-3.20/scss/widgets/_spinner.scss create mode 100755 gtk-3.20/scss/widgets/_toggle.scss create mode 100755 gtk-3.20/scss/widgets/_toolbar.scss create mode 100644 gtk-3.20/scss/widgets/_view.scss create mode 100755 gtk-3.20/scss/widgets/_window.scss create mode 120000 gtk-3.20/thumbnail.png diff --git a/Makefile b/Makefile index 4f666d9..ff44382 100755 --- a/Makefile +++ b/Makefile @@ -4,15 +4,20 @@ GLIB_COMPILE_RESOURCES=glib-compile-resources RES_DIR=gtk-3.0 SCSS_DIR=$(RES_DIR)/scss DIST_DIR=$(RES_DIR)/dist +RES_DIR320=gtk-3.20 +SCSS_DIR320=$(RES_DIR320)/scss +DIST_DIR320=$(RES_DIR320)/dist INSTALL_DIR=$(DESTDIR)/usr/share/themes/Numix all: clean gresource css: $(SASS) --update $(SASSFLAGS) $(SCSS_DIR):$(DIST_DIR) + $(SASS) --update $(SASSFLAGS) $(SCSS_DIR320):$(DIST_DIR320) gresource: css $(GLIB_COMPILE_RESOURCES) --sourcedir=$(RES_DIR) $(RES_DIR)/gtk.gresource.xml + $(GLIB_COMPILE_RESOURCES) --sourcedir=$(RES_DIR320) $(RES_DIR320)/gtk.gresource.xml watch: clean while true; do \ @@ -23,6 +28,8 @@ watch: clean clean: rm -rf $(DIST_DIR) rm -f $(RES_DIR)/gtk.gresource + rm -rf $(DIST_DIR320) + rm -f $(RES_DIR320)/gtk.gresource install: all install -d -m755 $(INSTALL_DIR) diff --git a/gtk-3.20/assets b/gtk-3.20/assets new file mode 120000 index 0000000..fb2256c --- /dev/null +++ b/gtk-3.20/assets @@ -0,0 +1 @@ +../gtk-3.0/assets \ No newline at end of file diff --git a/gtk-3.20/gtk-dark.css b/gtk-3.20/gtk-dark.css new file mode 100755 index 0000000..198bb85 --- /dev/null +++ b/gtk-3.20/gtk-dark.css @@ -0,0 +1 @@ +@import url("resource:///org/numixproject/gtk-3.20/dist/gtk-dark.css"); diff --git a/gtk-3.20/gtk-widgets-assets-dark.css b/gtk-3.20/gtk-widgets-assets-dark.css new file mode 100644 index 0000000..64cecb7 --- /dev/null +++ b/gtk-3.20/gtk-widgets-assets-dark.css @@ -0,0 +1,67 @@ +/******************* +* check and radio * +*******************/ +/* draw regular check and radio items using our assets */ +.check { + -gtk-icon-source: url("assets/checkbox-unchecked-dark.svg"); +} + +.check:insensitive { + -gtk-icon-source: url("assets/checkbox-unchecked-insensitive-dark.svg"); +} + +.check:checked { + -gtk-icon-source: url("assets/checkbox-checked-dark.svg"); +} + +.check:checked:insensitive { + -gtk-icon-source: url("assets/checkbox-checked-insensitive-dark.svg"); +} + +.check:inconsistent { + -gtk-icon-source: url("assets/checkbox-mixed-dark.svg"); +} + +.check:inconsistent:insensitive { + -gtk-icon-source: url("assets/checkbox-mixed-insensitive-dark.svg"); +} + +.radio { + -gtk-icon-source: url("assets/radio-unselected-dark.svg"); +} + +.radio:insensitive { + -gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg"); +} + +.radio:checked { + -gtk-icon-source: url("assets/radio-selected-dark.svg"); +} + +.radio:checked:insensitive { + -gtk-icon-source: url("assets/radio-selected-insensitive-dark.svg"); +} + +.radio:inconsistent { + -gtk-icon-source: url("assets/radio-mixed-dark.svg"); +} + +.radio:inconsistent:insensitive { + -gtk-icon-source: url("assets/radio-mixed-insensitive-dark.svg"); +} + +.menuitem.check { + -gtk-icon-source: none; +} + +.menuitem.radio { + -gtk-icon-source: none; +} + +GtkIconView.content-view.cell.check { + -gtk-icon-source: url("assets/grid-selection-unchecked-dark.svg"); +} + +GtkIconView.content-view.cell.check:active { + -gtk-icon-source: url("assets/grid-selection-checked-dark.svg"); +} diff --git a/gtk-3.20/gtk-widgets-assets.css b/gtk-3.20/gtk-widgets-assets.css new file mode 100644 index 0000000..6d7a67e --- /dev/null +++ b/gtk-3.20/gtk-widgets-assets.css @@ -0,0 +1,154 @@ +/******************* + * check and radio * + *******************/ +/* draw regular check and radio items using our assets */ +.check { + -gtk-icon-source: url("assets/checkbox-unchecked.svg"); +} + +.check:insensitive { + -gtk-icon-source: url("assets/checkbox-unchecked-insensitive.svg"); +} + +.check:checked { + -gtk-icon-source: url("assets/checkbox-checked.svg"); +} + +.check:checked:insensitive { + -gtk-icon-source: url("assets/checkbox-checked-insensitive.svg"); +} + +.check:inconsistent { + -gtk-icon-source: url("assets/checkbox-mixed.svg"); +} + +.check:inconsistent:insensitive { + -gtk-icon-source: url("assets/checkbox-mixed-insensitive.svg"); +} + +.radio { + -gtk-icon-source: url("assets/radio-unselected.svg"); +} + +.radio:insensitive { + -gtk-icon-source: url("assets/radio-unselected-insensitive.svg"); +} + +.radio:checked { + -gtk-icon-source: url("assets/radio-selected.svg"); +} + +.radio:checked:insensitive { + -gtk-icon-source: url("assets/radio-selected-insensitive.svg"); +} + +.radio:inconsistent { + -gtk-icon-source: url("assets/radio-mixed.svg"); +} + +.radio:inconsistent:insensitive { + -gtk-icon-source: url("assets/radio-mixed-insensitive.svg"); +} + +.menuitem.check { + -gtk-icon-source: none; +} + +.menuitem.check:active, +.menuitem.check:checked { + -gtk-icon-source: url("assets/menuitem-checkbox-checked.svg"); +} + +.menuitem.check:active:hover, +.menuitem.check:checked:hover { + -gtk-icon-source: url("assets/menuitem-checkbox-checked-hover.svg"); +} + +.menuitem.check:active:insensitive, +.menuitem.check:checked:insensitive { + -gtk-icon-source: url("assets/menuitem-checkbox-checked-insensitive.svg"); +} + +.menuitem.check:inconsistent:hover, +.menuitem.radio:inconsistent:hover { + -gtk-icon-source: url("assets/menuitem-checkbox-mixed-hover.svg"); +} + +.menuitem.check:inconsistent, +.menuitem.radio:inconsistent { + -gtk-icon-source: url("assets/menuitem-checkbox-mixed.svg"); +} + +.menuitem.check:inconsistent:insensitive, +.menuitem.radio:inconsistent:insensitive { + -gtk-icon-source: url("assets/menuitem-checkbox-mixed-insensitive.svg"); +} + +.menuitem.radio { + -gtk-icon-source: none; +} + +.menuitem.radio:active, +.menuitem.radio:checked { + -gtk-icon-source: url("assets/menuitem-radio-checked.svg"); +} + +.menuitem.radio:active:hover, +.menuitem.radio:checked:hover { + -gtk-icon-source: url("assets/menuitem-radio-checked-hover.svg"); +} + +.menuitem.radio:active:insensitive, +.menuitem.radio:checked:insensitive { + -gtk-icon-source: url("assets/menuitem-radio-checked-insensitive.svg"); +} + +GtkIconView.content-view.cell.check { + -gtk-icon-source: url("assets/grid-selection-unchecked.svg"); +} + +GtkIconView.content-view.cell.check:active { + -gtk-icon-source: url("assets/grid-selection-checked.svg"); +} + +/****************** + * pane separator * + ******************/ +.pane-separator, +.pane-separator.horizontal { + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 0.8) 0%, + shade(@theme_bg_color, 0.8) 20%, + transparent 20%, + transparent 45%, + shade(@theme_bg_color, 0.8) 45%, + shade(@theme_bg_color, 0.8) 55%, + transparent 55%, + transparent 80%, + shade(@theme_bg_color, 0.8) 80%, + shade(@theme_bg_color, 0.8) + ); + + background-size: 4px 10px; + background-repeat: no-repeat; + background-position: center center; +} + +.pane-separator.vertical { + background-image: linear-gradient(to right, + shade(@theme_bg_color, 0.8) 0%, + shade(@theme_bg_color, 0.8) 20%, + transparent 20%, + transparent 45%, + shade(@theme_bg_color, 0.8) 45%, + shade(@theme_bg_color, 0.8) 55%, + transparent 55%, + transparent 80%, + shade(@theme_bg_color, 0.8) 80%, + shade(@theme_bg_color, 0.8) + ); + + background-size: 10px 4px; + background-repeat: no-repeat; + background-position: center center; +} diff --git a/gtk-3.20/gtk-widgets.css b/gtk-3.20/gtk-widgets.css new file mode 100644 index 0000000..634421c --- /dev/null +++ b/gtk-3.20/gtk-widgets.css @@ -0,0 +1,4021 @@ +/* NOTES to contributors: + * use 4 spaces indents, and keep code ALIGNED and ORDERED */ + +/* default */ +* { + -GtkArrow-arrow-scaling: 0.5; + -GtkButton-child-displacement-x: 0; + -GtkButton-child-displacement-y: 0; + -GtkButton-default-border: 0; + -GtkButton-image-spacing: 0; + -GtkButton-inner-border: 1; + -GtkButton-interior-focus: true; + -GtkButtonBox-child-min-height: 24; + -GtkButtonBox-child-internal-pad-y: 1; + -GtkCheckButton-indicator-size: 16; + -GtkCheckMenuItem-indicator-size: 14; + -GtkExpander-expander-size: 8; + -GtkMenu-horizontal-padding: 0; + -GtkMenu-vertical-padding: 0; + -GtkPaned-handle-size: 4; + -GtkProgressBar-min-horizontal-bar-height: 12; + -GtkProgressBar-min-vertical-bar-width: 12; + -GtkRange-slider-width: 12; + -GtkRange-stepper-spacing: 0; + -GtkRange-trough-border: 0; + -GtkRange-trough-under-steppers: 1; + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + -GtkScrollbar-min-slider-length: 80; + -GtkScrolledWindow-scrollbar-spacing: 0; + -GtkScrolledWindow-scrollbars-within-bevel: 1; + -GtkStatusbar-shadow-type: none; + -GtkTextView-error-underline-color: @error_color; + -GtkToolButton-icon-spacing: 6; + -GtkToolItemGroup-expander-size: 8; + -GtkTreeView-expander-size: 8; + -GtkWindow-resize-grip-height: 0; + -GtkWindow-resize-grip-width: 0; + -WnckTasklist-fade-overlay-rect: 0; + + /* legacy only */ + -GtkWidget-focus-line-width: 1; + -GtkWidget-focus-padding: 0; + + background-clip: padding-box; + + /* + outline-color: alpha(@theme_selected_bg_color, 0.5); + outline-style: dashed; + outline-width: 1px; + outline-offset: -2px; + outline-radius: 2px; + */ +} + +/*************** + * base states * + ***************/ +.background { + background-color: @theme_bg_color; + color: @theme_fg_color; +} + +.background:backdrop { + text-shadow: none; + icon-shadow: none; +} + +*:selected, +*:selected:focus { + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; +} + +*:insensitive, +*:insensitive:insensitive { + color: mix(@theme_fg_color, @theme_bg_color, 0.5); +} + +/* apply effects to insensitive and prelit images */ +*:insensitive { + -gtk-image-effect: dim; +} + +*:hover { + -gtk-image-effect: highlight; +} + +.gtkstyle-fallback { + background-color: @theme_bg_color; + color: @theme_fg_color; +} + +.gtkstyle-fallback:prelight { + 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:insensitive { + 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; +} + +GtkImage, +GtkImage:insensitive, +GtkLabel, +GtkLabel:insensitive, +GtkBox, +GtkBox:insensitive, +GtkGrid, +GtkGrid:insensitive { + background-color: transparent; +} + +/************** + * hyperlinks * + **************/ +* { + -GtkHTML-link-color: @link_color; + -GtkIMHtml-hyperlink-color: @link_color; + -GtkWidget-link-color: @link_color; + -GtkWidget-visited-link-color: @link_color; +} + +*:link, +*:visited { + color: @link_color; +} + +/****************** + * visual effects * + ******************/ +/* transitions */ +.button { + transition: border 100ms ease-in-out; +} + +.entry { + transition: border 100ms ease-out; +} + +.entry:focus { + transition: border 100ms ease-in; +} + +.entry.image.left { + padding-right: 4px; +} + +.notebook tab GtkLabel, +.notebook .prelight-page, +.notebook .prelight-page GtkLabel, +.notebook .active-page, +.notebook .active-page GtkLabel { + transition: all 200ms ease-in; +} + +/* inset shadows */ +.button:active, +.primary-toolbar .button:active, +.toolbar .button:active, +.header-bar .button:active, +.button:checked, +.primary-toolbar .button:checked, +.toolbar .button:checked, +.header-bar .button:checked, +.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: 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:insensitive, +.primary-toolbar .button:active:insensitive, +.toolbar .button:active:insensitive, +.header-bar .button:active:insensitive, +.button:checked:insensitive, +.primary-toolbar .button:checked:insensitive, +.toolbar .button:checked:insensitive, +.header-bar .button:checked:insensitive, +.entry:insensitive { + box-shadow: none; +} + +/************* + * assistant * + *************/ +GtkAssistant .sidebar .highlight { + font: bold; +} + +GtkAssistant .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 { + -GtkWidget-focus-padding: 1; + -GtkWidget-focus-line-width: 0; + + padding: 3px; + border-width: 1px; + border-radius: 2px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 1.08); + background-image: none; + color: @theme_fg_color; +} + +.button:hover { + border-color: shade(@theme_bg_color, 0.7); + background-color: shade(@theme_bg_color, 1.10); + background-image: none; +} + +.button:active, +.button:checked { + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 0.95); + background-image: none; +} + +.button:active:hover, +.button:checked:hover { + border-color: shade(@theme_bg_color, 0.7); +} + +.button:focus, +.button:hover:focus, +.button:active:focus, +.button:active:hover:focus, +.button:checked:focus, +.button:checked:hover:focus { + border-color: shade(@theme_bg_color, 0.7); +} + +.button:insensitive { + border-color: shade(@theme_bg_color, 0.85); + background-color: shade(@theme_bg_color, 0.9); + background-image: none; +} + +.button:active:insensitive, +.button:checked:insensitive { + border-color: shade(@theme_bg_color, 0.75); + background-color: shade(@theme_bg_color, 0.80); + background-image: none; +} + +/* default button */ +.button.default { + border-color: shade(@theme_selected_bg_color, 0.8); + background-color: shade(@theme_selected_bg_color, 1.08); + color: @theme_selected_fg_color; +} + +.button.default:hover { + border-color: shade(@theme_selected_bg_color, 0.7); + background-color: @theme_selected_bg_color; +} + +.button.default:active, +.button.default:checked { + border-color: shade(@theme_selected_bg_color, 0.8); + background-color: shade(@theme_selected_bg_color, 0.95); +} + +.button.default:active:hover, +.button.default:checked:hover { + border-color: shade(@theme_selected_bg_color, 0.7); + background-color: shade(@theme_selected_bg_color, 0.97); +} + +.button.flat, +.button.flat:insensitive { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; +} + +/**************** + * 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:selected, +row:selected:hover, +row:selected:focus { + -GtkWidget-focus-padding: 1; + -GtkWidget-focus-line-width: 0; + + border-width: 1px 0; + border-style: solid; + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; + background-image: none; + color: @theme_selected_fg_color; +} + +/***************** + * column-header * + *****************/ +column-header .button, +column-header .button:active, +column-header .button:checked { + border-width: 0 1px 1px 0; + border-radius: 0; +} + +column-header .button, +column-header .button:active, +column-header .button:checked, +column-header .button:focus, +column-header .button:active:focus, +column-header .button:checked:focus { + border-color: shade(@theme_base_color, 0.9); + border-bottom-color: shade(@theme_base_color, 0.8); + background-color: shade(@theme_base_color, 0.97); + background-image: none; +} + +column-header .button:hover, +column-header .button:active:hover, +column-header .button:checked:hover, +column-header .button:hover:focus, +column-header .button:active:hover:focus, +column-header .button:checked:hover:focus { + border-color: shade(@theme_base_color, 0.9); + border-bottom-color: shade(@theme_base_color, 0.8); + background-color: shade(@theme_base_color, 0.99); + background-image: none; +} + +column-header:last-child .button { + border-width: 0 0 1px 0; +} + +/**************** + * content view * + ****************/ +.content-view.subtitle { + font: smaller; + padding: 0 12px; +} + +.content-view.view { + background-color: @theme_base_color; +} + +.content-view.view:prelight { + 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:insensitive { + background-color: shade(@theme_base_color, 0.9); +} + +GdMainIconView.content-view { + -GdMainIconView-icon-size: 40; +} + +GtkIconView.content-view.check { + background-color: transparent; +} + +GtkIconView.content-view.check:active { + background-color: transparent; +} + +.content-view.view.check, +.content-view.view.check:active { + background-color: transparent; +} + +GtkIconView.content-view.check:prelight, +GtkIconView.content-view.check:insensitive, +GtkIconView.content-view.check:selected { + background-color: transparent; +} + +/**************** + * drawing area * + ****************/ +GtkDrawingArea { + background-color: transparent; +} + +GtkDrawingArea:insensitive { + background-color: shade(@theme_base_color, 0.9); +} + +/*********** + * gtkhtml * + ***********/ +GtkHTML { + background-color: @theme_base_color; + color: @theme_text_color; +} + +/*********** +* calendar * +************/ +GtkCalendar { + padding: 4px; + outline-offset: -1px; +} + +GtkCalendar:inconsistent { + color: mix(@theme_fg_color, @theme_bg_color, 0.5); +} + +GtkCalendar.view, +GtkCalendar.header, +GtkCalendar.button, +GtkCalendar.button:hover, +GtkCalendar.button:insensitive { + border-width: 0; + background-color: transparent; + background-image: none; +} + +.highlight, +GtkCalendar.highlight { + border-width: 0; + background-color: transparent; + color: @theme_selected_bg_color; +} + +/****************** + * combobox entry * + ******************/ +.primary-toolbar GtkComboBox.combobox-entry .entry, +.primary-toolbar GtkComboBox.combobox-entry .entry:active, +.primary-toolbar GtkComboBox.combobox-entry .entry:focus, +.primary-toolbar GtkComboBox.combobox-entry .entry:insensitive, +GtkComboBox.combobox-entry .entry, +GtkComboBox.combobox-entry .entry:active, +GtkComboBox.combobox-entry .entry:focus, +GtkComboBox.combobox-entry .entry:insensitive { + border-width: 1px 0 1px 1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.primary-toolbar GtkComboBox.combobox-entry .button, +.primary-toolbar GtkComboBox.combobox-entry .button:hover, +.primary-toolbar GtkComboBox.combobox-entry .button:active, +.primary-toolbar GtkComboBox.combobox-entry .button:checked, +.primary-toolbar GtkComboBox.combobox-entry .button:insensitive, +GtkComboBox.combobox-entry .button, +GtkComboBox.combobox-entry .button:hover, +GtkComboBox.combobox-entry .button:active, +GtkComboBox.combobox-entry .button:checked, +GtkComboBox.combobox-entry .button:insensitive { + border-width: 1px 1px 1px 1px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/********* + * entry * + *********/ +.entry { + padding: 4px 3px; + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + border-radius: 2px; + background-color: @theme_base_color; + background-image: none; + color: @theme_text_color; +} + +.entry:active, +.entry:focus { + border-color: shade(@theme_bg_color, 0.7); +} + +.entry:selected, +.entry:selected:focus { + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; +} + +.entry:insensitive { + 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: 2px; + background-color: @theme_selected_bg_color; + background-image: none; + color: @theme_selected_fg_color; +} + +/************ + * expander * +************/ +GtkExpander { + padding: 3px; + outline-offset: 1px; +} + +.expander { + color: alpha(currentColor, 0.7); + border: alpha(currentColor, 0.7); +} + +.expander:hover { + color: alpha(currentColor, 0.8); + border-color: alpha(currentColor, 0.8); +} + +.expander:active { + color: alpha(currentColor, 0.9); + border-color: alpha(currentColor, 0.9); +} + +/************** + * list boxes * + **************/ +.list { + background-image: none; + background-color: transparent; +} + +.list-row { + border: none; + border-radius: 0; + padding: 3px; + background-image: none; + background-color: transparent; +} + +.list-row:hover { + background-image: none; + background-color: shade(@theme_bg_color, 1.02); +} + +.list-row:selected { + background-image: none; + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; +} + +/************** +* flow boxes * +**************/ + +.grid-child { + padding: 3px; +} + +/********* + * frame * + *********/ +.frame { + border: 1px solid shade(@theme_bg_color, 0.8); + border-radius: 0; +} + +.frame.flat { + border: none; + box-shadow: none; +} + +/******************* + * scrolled window * + *******************/ +GtkScrolledWindow.frame { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + border-radius: 0; +} + +/* avoid double borders when a viewport is + * packed into a GtkScrolledWindow */ +GtkScrolledWindow GtkViewport.frame { + border-style: none; +} + +/************ + * iconview * + ************/ +GtkIconView.view.cell:selected, +GtkIconView.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; +} + +.content-view.view.rubberband, +.view.rubberband, +.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); +} + +/*********** + * infobar * + ***********/ +GtkInfoBar { + 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; +} + +.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, +.info .button:checked { + border-color: shade(@info_bg_color, 0.6); + background-color: shade(@info_bg_color, 0.95); +} + +.info .button:active:hover, +.info .button:active:checked { + 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; +} + +.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, +.warning .button:checked { + border-color: shade(@warning_bg_color, 0.6); + background-color: shade(@warning_bg_color, 0.95); +} + +.warning .button:active:hover, +.warning .button:checked: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; +} + +.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, +.question .button:checked { + border-color: shade(@question_bg_color, 0.6); + background-color: shade(@question_bg_color, 0.95); +} + +.question .button:active:hover, +.question .button:checked: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; +} + +.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, +.error .button:checked { + border-color: shade(@error_bg_color, 0.6); + background-color: shade(@error_bg_color, 0.95); +} + +.error .button:active:hover, +.error .button:checked: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; +} + +.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 { + -GtkButton-image-spacing: 0; + -GtkButton-inner-border: 0; + + border-style: none; + background-color: transparent; + background-image: none; +} + +.view.dim-label, +.dim-label { + color: alpha(currentColor, 0.5); +} + +.dnd { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_selected_bg_color, 0.9); +} + +.grip { + background-color: transparent; +} + +.arrow { + color: alpha(currentColor, 0.7); +} + +/******** + * menu * + ********/ +GtkTreeMenu.menu, +GtkMenuToolButton.menu, +GtkComboBox .menu { + background-color: @menu_bg_color; + margin: 3px; +} + +.primary-toolbar .menu, +.primary-toolbar .button .menu, +.toolbar .menu, +.toolbar .primary-toolbar .menu, +.header-bar .menu, +.header-bar .primary-toolbar .menu, +.menu { + padding: 0; + border-radius: 0; + border-style: none; + background-color: @menu_bg_color; + color: @menu_fg_color; +} + +/* Hover-effect on play-button in ubuntu soundmenu */ +.menu:selected { + background-color: @selected_bg_color; +} + +.menu.button:hover, +.menu.button:active, +.menu.button:checked, +.menu.button:active:insensitive, +.menu.button:checked:insensitive, +.menu.button:insensitive, +.menu.button { + border-width: 0; + background-color: @menu_bg_color; + background-image: none; +} + +.context-menu { + font: initial; +} + +/* ubuntu software center menu */ +#toolbar-popup { + background-color: @menu_bg_color; + color: @menu_fg_color; +} + +/*********** + * menubar * + ***********/ +.menubar { + -GtkWidget-window-dragging: true; + + border-style: none; + background-color: @menubar_bg_color; + background-image: none; + color: @menubar_fg_color; +} + +/*************** + * menubaritem * + ***************/ +.menubar.menuitem, +.menubar .menuitem { + padding: 3px 5px; + border-width: 1px; + 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 { + color: shade(@menubar_fg_color, 1.08); +} + +/************ + * menuitem * + ************/ +GtkTreeMenu .menuitem { + padding: 0; + border-width: 0; +} + +.menuitem, +.menu .menuitem { + -GtkMenuItem-arrow-scaling: 0.5; + + padding: 3px; + border-width: 1px; + border-style: solid; + border-color: transparent; + border-radius: 0; + background-color: transparent; + background-image: none; + color: @menu_fg_color; +} + +.menu .menuitem:active, +.menu .menuitem:hover { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; + background-image: none; +} + +.menu .menuitem:active, +.menu .menuitem *:active, +.menu .menuitem:hover, +.menu .menuitem *:hover { + color: @theme_selected_fg_color; +} + +.menu .menuitem:insensitive, +.menu .menuitem *:insensitive { + color: mix(@menu_fg_color, @menu_bg_color, 0.5); +} + +.menuitem.check, +.menuitem.radio, +.menuitem.check:hover, +.menuitem.radio:hover, +.menuitem.check:insensitive, +.menuitem.radio:insensitive { + border-style: none; + background-color: transparent; + background-image: none; +} + +.menuitem.check:active, +.menuitem.radio:active { + border-style: none; + background-color: transparent; +} + +.menuitem GtkCalendar:inconsistent { + color: mix(@menu_fg_color, @menu_bg_color, 0.5); +} + +.menuitem GtkCalendar.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: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:insensitive { + color: alpha(mix(@menu_fg_color, @menu_bg_color, 0.5), 0.6); +} + +GtkModelMenuItem GtkBox GtkImage { + padding-right: 4px; +} + +/************ + * popovers * + ************/ +GtkPopover { + margin: 10px; + padding: 2px; + border-radius: 2px; + border-color: shade(@menu_bg_color, 0.8); + border-width: 1px; + border-style: solid; + background-clip: border-box; + background-image: none; + background-color: @menu_bg_color; + color: @menu_fg_color; + box-shadow: 0 2px 3px alpha(black, 0.5); +} + +GtkPopover.background { + background-image: none; + background-color: @menu_bg_color; +} + +GtkPopover:backdrop { + box-shadow: none; +} + +GtkPopover.osd { + box-shadow: 0 2px 7px 3px alpha(black, 0.5); +} + +GtkPopover > .list, +GtkPopover > .view, +GtkPopover > .toolbar { + background-image: none; + background-color: transparent; +} + +GtkPopover .list-row { + color: @menu_fg_color; +} + +GtkPopover .list-row:hover { + background-image: none; + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; +} + +GtkPopover .frame { + border: 1px solid mix(@menu_bg_color, @menu_fg_color, 0.12); + border-radius: 2px; +} + +GtkPopover .entry { + border-color: mix(@menu_bg_color, @menu_fg_color, 0.12); + background-color: @menu_bg_color; + background-image: none; + color: @menu_fg_color; +} + +GtkPopover .entry:hover, +GtkPopover .entry:focus, +GtkPopover .entry:active { + border-color: mix(@menu_bg_color, @menu_fg_color, 0.21); +} + +GtkPopover.osd > .toolbar .button { + border-radius: 0; + border-width: 0; + background-image: none; + background-color: transparent; +} + +GtkPopover .separator { + border: 0; + background-color: transparent; + color: alpha(currentColor, 0.1); + font-size: 80%; + font-weight: bold; +} + +.menuitem.button { + color: @menu_fg_color; +} + +.menuitem.button, +.menuitem.button:active, +.menuitem.button:checked, +.menuitem.button:insensitive, +.menuitem.button:active:insensitive, +.menuitem.button:checked:insensitive { + background-color: transparent; + background-image: none; + border: none; + box-shadow: none; + color: @menu_fg_color; +} + +.menuitem.button:active:hover, +.menuitem.button:checked:hover, +.menuitem.button:hover, +.menuitem.button:selected { + border: none; + background-color: @theme_selected_bg_color; + background-image: none; + color: @theme_selected_fg_color; +} + +GtkModelButton.button { + color: @menu_fg_color; +} + + +GtkModelButton.button:focus, +GtkModelButton.button:active:focus, +GtkModelButton.button:checked:focus, +GtkModelButton.button:active, +GtkModelButton.button:checked, +GtkModelButton.button:insensitive:insensitive, +GtkModelButton.button:active:insensitive, +GtkModelButton.button:checked:insensitive, +GtkModelButton.button { + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; +} + +GtkModelButton.button:backdrop, +GtkModelButton.button:hover:backdrop, +GtkModelButton.button:insensitive:backdrop, +GtkModelButton.button:active:insensitive:backdrop, +GtkModelButton.button:active:backdrop, +GtkModelButton.button:active:hover:backdrop, +GtkModelButton.button:active:selected:backdrop, +GtkModelButton.button:checked:insensitive:backdrop, +GtkModelButton.button:checked:backdrop, +GtkModelButton.button:checked:hover:backdrop, +GtkModelButton.button:checked:selected:backdrop { + text-shadow: none; + icon-shadow: none; + color: @theme_selected_fg_color; + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; +} + +GtkModelButton.button:active:hover, +GtkModelButton.button:checked:hover, +GtkModelButton.button:hover, +GtkModelButton.button:selected { + background-image: none; + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; + text-shadow: none; + border-width: 0; + border-color: transparent; + border-radius: 2px; +} + +/************ + * notebook * + ************/ +.notebook { + padding: 0; + border-width: 1px 0 0 0; + border-style: solid; + border-color: shade(@theme_base_color, 0.7); + border-radius: 0; + background-color: @theme_base_color; + background-image: none; + background-clip: border-box; + + -GtkNotebook-initial-gap: 0; + -GtkNotebook-arrow-spacing: 5; + -GtkNotebook-tab-curvature: 0; + -GtkNotebook-tab-overlap: 1; + -GtkNotebook-has-tab-gap: false; +} + +.notebook.frame { + border-width: 1px; +} + +.notebook.header { + border-width: 0; + background-color: shade(@theme_base_color, 0.85); +} + +.notebook.header.frame { + border-color: shade(@theme_base_color, 0.75); +} + +.notebook.header.frame.top { + border-width: 1px 1px 0 1px; +} + +.notebook.header.frame.right { + border-width: 1px 1px 1px 0; +} + +.notebook.header.frame.bottom { + border-width: 0 1px 1px 1px; +} + +.notebook.header.frame.left { + border-width: 1px 0 1px 1px; +} + +.notebook GtkViewport { + border-width: 0; + background-color: @theme_base_color; + color: @theme_text_color; +} + +.notebook tab { + padding: 4px 6px; + border-style: solid; + border-width: 1px; + border-color: transparent; + background-color: transparent; + background-image: none; +} + +.notebook tab:active { + background-color: transparent; + background-image: none; +} + +.notebook tab.top { + border-bottom-width: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.notebook tab.top:hover { + border-bottom-color: alpha(@theme_selected_bg_color, 0.3); +} + +.notebook tab.top:active { + border-bottom-color: @theme_selected_bg_color; +} + +.notebook tab.right { + border-left-width: 2px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.notebook tab.right:hover { + border-left-color: alpha(@theme_selected_bg_color, 0.3); +} + +.notebook tab.right:active { + border-left-color: @theme_selected_bg_color; +} + +.notebook tab.bottom { + border-top-width: 2px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.notebook tab.bottom:hover { + border-top-color: alpha(@theme_selected_bg_color, 0.3); +} + +.notebook tab.bottom:active { + border-top-color: @theme_selected_bg_color; +} + +.notebook tab.left { + border-right-width: 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.notebook tab.left:hover { + border-right-color: alpha(@theme_selected_bg_color, 0.3); +} + +.notebook tab.left:active { + border-right-color: @theme_selected_bg_color; +} + +.notebook tab GtkLabel { + color: mix(@theme_text_color, @theme_base_color, 0.3); +} + +.notebook .prelight-page, +.notebook .prelight-page GtkLabel { + color: mix (@theme_text_color, @theme_base_color, 0.15); +} + +.notebook .active-page, +.notebook .active-page GtkLabel { + color: @theme_text_color; +} + +.notebook tab.reorderable-page:hover { + background-color: shade(@theme_base_color, 0.85); + border-left: 0; + border-right: 0; + /* using box shadows instead of borders due to slanted edges */ + box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), + inset 1px 0 shade(@theme_base_color, 0.7), inset -1px 0 shade(@theme_base_color, 0.7); +} + +.notebook tab.reorderable-page:active { + background-color: shade(@theme_base_color, 0.90); + border-left: 0; + border-right: 0; + box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), + inset 1px 0 shade(@theme_base_color, 0.75), inset -1px 0 shade(@theme_base_color, 0.75); +} + +/* close button styling */ +.notebook tab .button, +.notebook tab .button:active, +.notebook tab .button:checked, +.notebook tab .button:hover { + padding: 1px; + border-width: 1px; + border-radius: 2px; + border-style: solid; + border-color: transparent; + background-image: none; + background-color: transparent; + color: mix(@theme_text_color, @theme_base_color, 0.5); +} + +.notebook tab .button:hover { + color: @theme_text_color; + border-color: shade(@theme_base_color, 0.8); +} + +.notebook tab .button:active, +.notebook tab .button:checked, +.notebook tab .button:active:hover, +.notebook tab .button:checked:hover { + border-color: shade(@theme_base_color, 0.7); + background-color: shade(@theme_base_color, 0.95); +} + +/************* + * overshoot * + *************/ +.overshoot.top { + background: -gtk-gradient(radial, center top, 0, center top, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); +} + +.overshoot.right { + background: -gtk-gradient(radial, right center, 0, right center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); +} + +.overshoot.bottom { + background: -gtk-gradient(radial, center bottom, 0, center bottom, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); +} + +.overshoot.left { + background: -gtk-gradient(radial, left center, 0, left center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0))); +} + +/************** + * undershoot * + **************/ +.undershoot { + background: none; +} + +/****************** + * pane separator * + ******************/ +.pane-separator { + background-color: @theme_bg_color; + color: transparent; +} + +/************************* + * progressbar and scale * + *************************/ +GtkProgressBar { + padding: 0; + border-width: 1px; + border-radius: 2px; + font-size: smaller; + color: alpha(@theme_fg_color, 0.6); +} + +.progressbar, +.progressbar row, +.progressbar row:hover, +.progressbar row:selected, +.progressbar row:selected:focus { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; + background-image: linear-gradient(to bottom, + @theme_selected_bg_color, + @theme_selected_bg_color + ); +} + +.progressbar.vertical { + background-color: @theme_selected_bg_color; + background-image: linear-gradient(to right, + @theme_selected_bg_color, + @theme_selected_bg_color + ); +} + +.trough, +.trough row, +.trough row:hover, +.trough row:selected, +.trough row:selected:focus { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 1.08); + background-image: none; +} + +.trough.vertical { + background-color: shade(@theme_bg_color, 1.08); + background-image: none; +} + +/* level bars as used for password quality or remaining power */ +GtkLevelBar { + -GtkLevelBar-min-block-width: 34; + -GtkLevelBar-min-block-height: 2; +} + +GtkLevelBar.vertical { + -GtkLevelBar-min-block-width: 2; + -GtkLevelBar-min-block-height: 34; +} + +.level-bar.trough { + padding: 1px; + border-radius: 2px; +} + +.level-bar.fill-block { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; +} + +.level-bar.indicator-continuous.fill-block { + padding: 1px; + border-radius: 2px; +} + +.level-bar.indicator-discrete.fill-block.horizontal { + margin: 0 1px; +} + +.level-bar.indicator-discrete.fill-block.vertical { + margin: 1px 0; +} + +/* discrete indicator border rounding, + uncomment when :nth-child will be working + on the widget + +.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; +} +*/ + +.level-bar.fill-block.level-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) + ); +} + +.level-bar.fill-block.level-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) + ); +} + +.level-bar.fill-block.empty-fill-block { + border-color: alpha(@theme_fg_color, 0.1); + background-color: transparent; + background-image: none; +} + +.scale { + -GtkRange-slider-width: 16; + -GtkRange-trough-border: 1; + -GtkScale-slider-length: 16; + + padding: 0; + border-width: 1px; + border-radius: 2px; + outline-offset: -1px; +} + +.scale.slider { + border-radius: 8px; + background-color: shade(@theme_bg_color, 1.08); + background-image: none; + /* we will draw the border using box shadow for now */ + box-shadow: inset 1px 0 shade(@theme_bg_color, 0.8), + inset 0 1px shade(@theme_bg_color, 0.8), + inset -1px 0 shade(@theme_bg_color, 0.8), + inset 0 -1px shade(@theme_bg_color, 0.8); +} + +.scale.slider:hover { + box-shadow: inset 1px 0 shade(@theme_bg_color, 0.7), + inset 0 1px shade(@theme_bg_color, 0.7), + inset -1px 0 shade(@theme_bg_color, 0.7), + inset 0 -1px shade(@theme_bg_color, 0.7); +} + +.scale.slider:insensitive { + background-color: shade(@theme_bg_color, 0.9); + background-image: none; + box-shadow: inset 1px 0 shade(@theme_bg_color, 0.85), + inset 0 1px shade(@theme_bg_color, 0.85), + inset -1px 0 shade(@theme_bg_color, 0.85), + inset 0 -1px shade(@theme_bg_color, 0.85); +} + +.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: 50%; + background-repeat: no-repeat; + background-position: center; +} + +.scale.mark { + border-color: shade(@theme_bg_color, 0.8); +} + +.scale.trough { + margin: 7px 0; + border-color: shade(@theme_bg_color, 0.8); + border-radius: 2px; + background-color: shade(@theme_bg_color, 1.08); + background-image: none; +} + +.scale.trough.vertical { + margin: 0 7px; +} + +.menuitem .scale.highlight.left, +.scale.highlight.left { + border-color: @theme_selected_bg_color; + background-color: @theme_selected_bg_color; + background-image: none; +} + +.menuitem .scale.highlight.left:hover { + border-color: shade(@theme_selected_bg_color, 0.8); + background-color: shade(@theme_selected_bg_color, 0.8); +} + +.scale.highlight.bottom { + border-color: @theme_selected_bg_color; + background-color: @theme_selected_bg_color; + background-image: none; +} + +.scale.trough:insensitive, +.scale.highlight.left:insensitive { + border-color: shade(@theme_bg_color, 0.85); + background-color: shade(@theme_bg_color, 0.9); + background-image: none; +} + +/************* + * scrollbar * + *************/ +.scrollbar { + border-width: 1px; + border-style: solid; + padding: 0; +} + +.scrollbars-junction, +.scrollbar.trough { + border-width: 0; + border-radius: 0; + background-color: @theme_bg_color; + background-image: none; +} + +.scrollbar.button, +.scrollbar.button:active, +.scrollbar.button:checked, +.scrollbar.button:active:hover, +.scrollbar.button:checked:hover { + border-width: 0; + border-radius: 0; + background-color: transparent; + background-image: none; + color: shade(@theme_bg_color, 0.6); +} + +.scrollbar.slider { + border-width: 1px; + border-color: mix(shade(@theme_bg_color, 0.87), @theme_fg_color, 0.21); + border-radius: 0; + background-color: mix(@theme_bg_color, @theme_fg_color, 0.21); +} + +.scrollbar.slider:hover, +.scrollbar.slider.vertical:hover { + border-color: mix(shade(@theme_bg_color, 0.87), @theme_fg_color, 0.31); + background-color: mix(@theme_bg_color, @theme_fg_color, 0.31); +} + +.scrollbar.slider:active, +.scrollbar.slider.vertical:active { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; +} + +.scrollbar.slider.fine-tune:prelight:active { + border-width: 2px; + border-color: transparent; +} + +/* overlay scrollbar */ +OsThumb { + color: shade(@theme_bg_color, 0.7); +} + +OsThumb:selected, +OsScrollbar:selected { + background-color: @theme_selected_bg_color; +} + +OsThumb:active, +OsScrollbar:active { + background-color: @theme_selected_bg_color; +} + +OsThumb:insensitive, +OsScrollbar:insensitive { + background-color: shade(@theme_bg_color, 0.9); +} + +/************* + * separator * + *************/ +.sidebar.separator, +.sidebar.view.separator, +.sidebar .view.separator, +.view.separator, +.separator { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.9); + color: shade(@theme_bg_color, 0.9); +} + +.button .separator, +.button.separator { + border-color: shade(@theme_bg_color, 0.95); +} + +.button .separator:insensitive, +.button.separator:insensitive { + border-color: shade(@theme_bg_color, 0.85); +} + +.primary-toolbar GtkSeparatorToolItem, +.primary-toolbar .separator, +.primary-toolbar .separator:insensitive, +.toolbar GtkSeparatorToolItem, +.toolbar .separator, +.toolbar .separator:insensitive { + -GtkWidget-window-dragging: true; + + border-color: shade(@toolbar_bg_color, 0.95); + color: shade(@toolbar_bg_color, 0.95); +} + +.header-bar GtkSeparatorToolItem, +.header-bar .separator, +.header-bar .separator:insensitive, +.titlebar GtkSeparatorToolItem, +.titlebar .separator, +.titlebar .separator:insensitive { + -GtkWidget-window-dragging: true; + + border-color: shade(@titlebar_bg_color, 0.95); + color: shade(@titlebar_bg_color, 0.95); +} + +.primary-toolbar .button .separator, +.primary-toolbar .button.separator, +.toolbar .button .separator, +.toolbar .button.separator { + border-color: shade(@toolbar_bg_color, 0.95); +} + +.header-bar .button .separator, +.header-bar .button.separator, +.titlebar .button .separator, +.titlebar .button.separator { + border-color: shade(@titlebar_bg_color, 0.95); +} + +.primary-toolbar .button .separator:insensitive, +.primary-toolbar .button.separator:insensitive, +.toolbar .button .separator:insensitive, +.toolbar .button.separator:insensitive { + border-color: shade(@toolbar_bg_color, 0.85); +} + +.header-bar .button .separator:insensitive, +.header-bar .button.separator:insensitive, +.titlebar .button .separator:insensitive, +.titlebar .button.separator:insensitive { + border-color: shade(@titlebar_bg_color, 0.85); +} + +.menuitem.separator { + -GtkMenuItem-horizontal-padding: 0; + -GtkWidget-separator-height: 1; + + border-style: none; + color: shade(@menu_bg_color, 0.9); +} + +GtkComboBox .separator { + /* always disable separators */ + -GtkWidget-wide-separators: true; + -GtkWidget-horizontal-separator: 0; + -GtkWidget-vertical-separator: 0; + + border-style: none; +} + +/*********** + * sidebar * + ***********/ +.sidebar, +.sidebar.view, +.sidebar .view, +.sidebar GtkScrolledWindow { + background-color: @theme_bg_color; + color: mix(@theme_fg_color, @theme_bg_color, 0.1); +} + +.sidebar row:selected, +.sidebar row:selected:hover, +.sidebar row:selected:focus, +.sidebar .view row:selected, +.sidebar .view row:selected:hover, +.sidebar .view row:selected:focus { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; + background-image: none; + color: @theme_selected_fg_color; +} + +.sidebar row:prelight, +.sidebar .view row:prelight { + border-color: shade(@theme_bg_color, 1.05); + background-color: shade(@theme_bg_color, 1.05); + background-image: none; + color: @theme_fg_color; +} + +.sidebar row:selected:prelight, +.sidebar .view row:selected:prelight { + 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; +} + +/************** + * spinbutton * + **************/ +.spinbutton .button { + color: mix(@theme_text_color, @theme_base_color, 0.4); + padding: 2px 4px; + border-width: 0; + border-radius: 0; + border-style: none; + background-color: transparent; + background-image: none; + box-shadow: inset 1px 0 shade(@theme_base_color, 0.9); +} + +.spinbutton .button:insensitive { + color: mix(@theme_text_color, @theme_base_color, 0.7); + box-shadow: inset 1px 0 shade(@theme_bg_color, 0.95); +} + +.spinbutton .button:active, +.spinbutton .button:checked, +.spinbutton .button:hover { + color: @theme_fg_color; +} + +.spinbutton .button:first-child { + border-radius: 2px 0 0 2px; + box-shadow: none; +} + +.spinbutton .button:last-child { + border-radius: 0 2px 2px 0; +} + +.spinbutton .button:dir(rtl) { + box-shadow: inset -1px 0 shade(@theme_base_color, 0.9); +} + +.spinbutton.vertical .button { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + border-radius: 2px; + background-color: shade(@theme_bg_color, 1.08); + background-image: none; + color: @theme_fg_color; + box-shadow: none; +} + +.spinbutton.vertical .button:hover { + border-color: shade(@theme_bg_color, 0.7); + background-color: shade(@theme_bg_color, 1.10); + background-image: none; +} + +.spinbutton.vertical .button:active, +.spinbutton.vertical .button:checked { + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 0.95); + background-image: none; +} + +.spinbutton.vertical .button:active:hover, +.spinbutton.vertical .button:checked:hover { + border-color: shade(@theme_bg_color, 0.7); +} + +.spinbutton.vertical .button:focus, +.spinbutton.vertical .button:hover:focus, +.spinbutton.vertical .button:active:focus, +.spinbutton.vertical .button:active:hover:focus, +.spinbutton.vertical .button:checked:focus, +.spinbutton.vertical .button:checked:hover:focus { + border-color: shade(@theme_bg_color, 0.7); +} + +.spinbutton.vertical .button:insensitive { + border-color: shade(@theme_bg_color, 0.85); + background-color: shade(@theme_bg_color, 0.9); + background-image: none; +} + +.spinbutton.vertical .button:first-child { + border-width: 1px; + border-bottom-width: 0; + border-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.spinbutton.vertical .button:last-child { + border-width: 1px; + border-top-width: 0; + border-radius: 2px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.spinbutton.vertical.entry { + border-width: 1px; + border-style: solid; + border-radius: 0; +} + +/*********** + * spinner * + ***********/ +@keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } +} + +.spinner { + background-image: none; + background-color: blue; + opacity: 0; + + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); +} + +.spinner:active { + opacity: 1; + animation: spin 1s linear infinite; +} + +.spinner:active:insensitive { opacity: 0.5; } + +.menu.spinner, +.menu .spinner, +.menu .spinner:hover, +.primary-toolbar .spinner { + color: @theme_selected_bg_color; + border: none; + box-shadow: none; +} + +/************* + * statusbar * + *************/ +GtkStatusbar { + padding: 4px; + color: @theme_fg_color; +} + +/********** + * switch * + **********/ +GtkSwitch { + padding: 0; + border-radius: 2px; + font: bold condensed; + outline-offset: -4px; +} + +GtkSwitch.slider { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 1.08); + background-image: none; +} + +GtkSwitch.slider:insensitive { + border-color: shade(@theme_bg_color, 0.85); + background-color: shade(@theme_bg_color, 0.9); + background-image: none; +} + +GtkSwitch.trough { + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 0.95); + background-image: none; + color: @theme_fg_color; +} + +GtkSwitch.trough:active { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: @theme_selected_bg_color; + background-image: none; + color: @theme_selected_fg_color; +} + +GtkSwitch.trough:insensitive { + 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); +} + +/************ + * textview * + ************/ +GtkTextView { + background-color: @theme_base_color; + color: @theme_text_color; +} + +/***************** + * color chooser * + *****************/ +GtkColorSwatch, +GtkColorSwatch:selected { + border-width: 1px; + border-style: solid; + border-color: alpha(black, 0.1); + border-radius: 1px; + background-color: transparent; + background-clip: border-box; +} + +GtkColorSwatch:hover, +GtkColorSwatch:selected:hover { + border-color: alpha(black, 0.3); +} + +GtkColorSwatch.color-dark:hover { +} + +GtkColorSwatch.color-light:hover { +} + +GtkColorSwatch.color-light:selected:hover, +GtkColorSwatch.color-dark:selected:hover { + background-image: none; +} + +GtkColorSwatch.left, +GtkColorSwatch:first-child { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +GtkColorSwatch.right, +GtkColorSwatch:last-child { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +GtkColorSwatch:only-child { + border-radius: 2px; +} + +GtkColorSwatch.top { + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +GtkColorSwatch.bottom { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} + +GtkColorChooserWidget #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; +} + +GtkColorChooserWidget #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: 2px; + 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 GtkColorSwatch { + border-radius: 2px; +} + +GtkColorEditor GtkColorSwatch.color-dark:hover, +GtkColorEditor GtkColorSwatch.color-light:hover { + background-image: none; + border-color: alpha(black, 0.3); +} + +GtkColorButton.button { + padding: 2px; +} + +/************** + * header-bar * + **************/ +.header-bar { + padding: 4px; + border-width: 0 0 1px 0; + border-style: solid; + border-color: shade(@titlebar_bg_color, 0.8); + background-color: @titlebar_bg_color; + background-image: none; + color: @titlebar_fg_color; +} + +.header-bar .button.text-button { + padding: 4px; +} + +.header-bar .button.image-button { + padding: 6px; +} + +.header-bar .title { + font: bold; + padding: 0 12px; +} + +.header-bar .subtitle { + font: smaller; + padding: 0 12px; +} + +.header-bar GtkComboBox, +.header-bar .button { + border-color: shade(@titlebar_bg_color, 0.8); + background-color: shade(@titlebar_bg_color, 1.08); + background-image: none; + color: @titlebar_fg_color; +} + +.header-bar .button:hover { + border-color: shade(@titlebar_bg_color, 0.7); + background-color: shade(@titlebar_bg_color, 1.10); + background-image: none; +} + +.header-bar .button:active, +.header-bar .button:checked { + border-color: shade(@titlebar_bg_color, 0.8); + background-color: shade(@titlebar_bg_color, 0.95); + background-image: none; +} + +.header-bar .button:active:hover, +.header-bar .button:checked:hover { + border-color: shade(@titlebar_bg_color, 0.7); +} + +.header-bar .button:focus, +.header-bar .button:hover:focus, +.header-bar .button:active:focus, +.header-bar .button:checked:focus, +.header-bar .button:active:hover:focus +.header-bar .button:checked:hover:focus { + border-color: shade(@titlebar_bg_color, 0.7); +} + +.header-bar .button:insensitive { + border-color: shade(@titlebar_bg_color, 0.85); + background-color: shade(@titlebar_bg_color, 0.9); + background-image: none; +} + +.header-bar .button:active:insensitive, +.header-bar .button:checked:insensitive { + border-color: shade(@titlebar_bg_color, 0.75); + background-color: shade(@titlebar_bg_color, 0.80); + background-image: none; +} + +.header-bar .entry { + border-color: shade(@titlebar_bg_color, 0.8); +} + +.header-bar .entry:active, +.header-bar .entry:focus { + border-color: shade(@titlebar_bg_color, 0.7); +} + +/*********** + * 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:insensitive { + 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-toolbar.toolbar { + -GtkWidget-window-dragging: true; + + padding: 4px; + border-width: 0 0 1px 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 GtkComboBox, +.primary-toolbar .button { + padding: 2px; + border-width: 1px; + border-color: transparent; + border-radius: 2px; + background-color: transparent; + background-image: none; + color: @toolbar_fg_color; +} + +.primary-toolbar GtkComboBox.flat, +.primary-toolbar .button.flat, +.primary-toolbar GtkComboBox.flat, +.primary-toolbar .button.flat, +.toolbar GtkComboBox.flat, +.toolbar .button.flat, +.primary-toolbar GtkComboBox.flat:insensitive, +.primary-toolbar .button.flat:insensitive, +.primary-toolbar GtkComboBox.flat:insensitive, +.primary-toolbar .button.flat:insensitive, +.toolbar GtkComboBox.flat:insensitive, +.toolbar .button.flat:insensitive { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; +} + +.primary-toolbar .raised .button, +.primary-toolbar .raised.button, +.toolbar GtkComboBox, +.toolbar .button { + border-color: shade(@toolbar_bg_color, 0.8); + background-color: shade(@toolbar_bg_color, 1.08); + background-image: none; + color: @toolbar_fg_color; +} + +.primary-toolbar .button:hover, +.toolbar .button:hover { + border-color: shade(@toolbar_bg_color, 0.7); + background-color: shade(@toolbar_bg_color, 1.10); + background-image: none; +} + +.primary-toolbar .button:active, +.toolbar .button:active, +.primary-toolbar .button:checked, +.toolbar .button:checked { + border-color: shade(@toolbar_bg_color, 0.8); + background-color: shade(@toolbar_bg_color, 0.95); + background-image: none; +} + +.primary-toolbar .button:active:hover, +.toolbar .button:active:hover, +.primary-toolbar .button:checked:hover, +.toolbar .button:checked:hover { + border-color: shade(@toolbar_bg_color, 0.7); +} + +.primary-toolbar .button:focus, +.primary-toolbar .button:hover:focus, +.primary-toolbar .button:active:focus, +.primary-toolbar .button:active:hover:focus, +.primary-toolbar .button:checked:focus, +.primary-toolbar .button:checked:hover:focus, +.toolbar .button:focus, +.toolbar .button:hover:focus, +.toolbar .button:active:focus, +.toolbar .button:active:hover:focus, +.toolbar .button:checked:focus, +.toolbar .button:checked:hover:focus { + border-color: shade(@toolbar_bg_color, 0.7); +} + +.primary-toolbar .button:insensitive, +.toolbar .button:insensitive { + border-color: shade(@toolbar_bg_color, 0.85); + background-color: shade(@toolbar_bg_color, 0.9); + background-image: none; +} + +.primary-toolbar .button:active:insensitive, +.toolbar .button:active:insensitive, +.primary-toolbar .button:checked:insensitive, +.toolbar .button:checked:insensitive { + border-color: shade(@toolbar_bg_color, 0.75); + background-color: shade(@toolbar_bg_color, 0.80); + background-image: none; +} + +.primary-toolbar .entry, +.toolbar .entry { + border-color: shade(@toolbar_bg_color, 0.8); +} + +.primary-toolbar .entry:active, +.primary-toolbar .entry:focus, +.toolbar .entry:active, +.toolbar .entry:focus { + border-color: shade(@toolbar_bg_color, 0.7); +} + +/* inline-toolbar */ +.inline-toolbar.toolbar { + -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-toolbar.toolbar:last-child { + border-width: 0 1px 1px 1px; + border-color: shade(@theme_bg_color, 0.8); + border-radius: 0; +} + +.inline-toolbar.toolbar .button { + padding: 1px; + border-width: 1px 0 1px 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; +} + +.inline-toolbar.toolbar .button:hover { + border-color: shade(@theme_bg_color, 0.7); + background-color: shade(@theme_bg_color, 1.10); + background-image: none; +} + +.inline-toolbar.toolbar .button:active, +.inline-toolbar.toolbar .button:checked { + border-color: shade(@theme_bg_color, 0.8); + background-color: shade(@theme_bg_color, 0.95); + background-image: none; +} + +.inline-toolbar.toolbar .button:active:hover, +.inline-toolbar.toolbar .button:checked:hover { + border-color: shade(@theme_bg_color, 0.7); +} + +.inline-toolbar.toolbar .button:focus, +.inline-toolbar.toolbar .button:hover:focus, +.inline-toolbar.toolbar .button:active:focus, +.inline-toolbar.toolbar .button:active:hover:focus, +.inline-toolbar.toolbar .button:checked:focus, +.inline-toolbar.toolbar .button:checked:hover:focus { + border-color: shade(@theme_bg_color, 0.7); +} + +.inline-toolbar.toolbar .button:insensitive, +.inline-toolbar.toolbar GtkToolButton .button:insensitive { + border-color: shade(@theme_bg_color, 0.85); + background-color: shade(@theme_bg_color, 0.9); + background-image: none; +} + +.inline-toolbar.toolbar .button:active:insensitive +.inline-toolbar.toolbar GtkToolButton .button:active:insensitive, +.inline-toolbar.toolbar .button:checked:insensitive +.inline-toolbar.toolbar GtkToolButton .button:checked:insensitive { + border-color: shade(@theme_bg_color, 0.75); + background-color: shade(@theme_bg_color, 0.80); + background-image: none; +} + +/****************** + * linked buttons * + *****************/ +/* set up shadows for visual separation */ +.linked .button, +.inline-toolbar.toolbar .button, +.inline-toolbar.toolbar GtkToolButton .button, +.inline-toolbar.toolbar GtkToolButton > .button { + box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9); +} + +.linked .button:active, +.inline-toolbar.toolbar .button:active, +.inline-toolbar.toolbar GtkToolButton .button:active, +.inline-toolbar.toolbar GtkToolButton > .button:active, +.linked .button:checked, +.inline-toolbar.toolbar .button:checked, +.inline-toolbar.toolbar GtkToolButton .button:checked, +.inline-toolbar.toolbar GtkToolButton > .button:checked { + box-shadow: inset -1px 0 shade(@theme_bg_color, 0.9), + inset 1px 0 alpha(@dark_shadow, 0.07), + inset 0 1px alpha(@dark_shadow, 0.08), + inset 0 -1px alpha(@dark_shadow, 0.05); +} + +.linked .button:insensitive, +.inline-toolbar.toolbar .button:insensitive, +.inline-toolbar.toolbar GtkToolButton .button:insensitive, +.inline-toolbar.toolbar GtkToolButton > .button:insensitive { + box-shadow: inset -1px 0 shade(@theme_bg_color, 0.85); +} + +/* remove box shadow from last-child and only-child */ +.linked .button:last-child, +.linked .button:only-child, +.linked .button:insensitive:last-child, +.linked .button:insensitive:only-child, +.linked .button:active:insensitive:last-child, +.linked .button:active:insensitive:only-child, +.linked .button:checked:insensitive:last-child, +.linked .button:checked:insensitive:only-child, +.inline-toolbar.toolbar .button:last-child, +.inline-toolbar.toolbar .button:only-child, +.inline-toolbar.toolbar .button:insensitive:last-child, +.inline-toolbar.toolbar .button:insensitive:only-child, +.inline-toolbar.toolbar .button:active:insensitive:last-child, +.inline-toolbar.toolbar .button:active:insensitive:only-child, +.inline-toolbar.toolbar .button:checked:insensitive:last-child, +.inline-toolbar.toolbar .button:checked:insensitive:only-child, +.inline-toolbar.toolbar GtkToolButton:last-child > .button, +.inline-toolbar.toolbar GtkToolButton:only-child > .button, +.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive, +.inline-toolbar.toolbar GtkToolButton:only-child > .button:insensitive, +.inline-toolbar.toolbar GtkToolButton:last-child > .button:active:insensitive, +.inline-toolbar.toolbar GtkToolButton:only-child > .button:active:insensitive, +.inline-toolbar.toolbar GtkToolButton:last-child > .button:checked:insensitive, +.inline-toolbar.toolbar GtkToolButton:only-child > .button:checked:insensitive { + box-shadow: none; +} + +/* add back the inset shadow effect */ +.linked .button:active:last-child, +.linked .button:active:only-child, +.inline-toolbar.toolbar .button:active:last-child, +.inline-toolbar.toolbar .button:active:only-child, +.inline-toolbar.toolbar GtkToolButton:last-child > .button:active, +.inline-toolbar.toolbar GtkToolButton:only-child > .button:active, +.linked .button:checked:last-child, +.linked .button:checked:only-child, +.inline-toolbar.toolbar .button:checked:last-child, +.inline-toolbar.toolbar .button:checked:only-child, +.inline-toolbar.toolbar GtkToolButton:last-child > .button:checked, +.inline-toolbar.toolbar GtkToolButton:only-child > .button:checked { + 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); +} + +/* middle button */ +.linked .entry, +.linked .button, +.linked .button:active, +.linked .button:active:hover, +.linked .button:checked, +.linked .button:checked:hover, +.linked .button:insensitive, +.inline-toolbar.toolbar .button, +.inline-toolbar.toolbar .button:active, +.inline-toolbar.toolbar .button:checked, +.inline-toolbar.toolbar .button:insensitive, +.inline-toolbar.toolbar GtkToolButton .button, +.inline-toolbar.toolbar GtkToolButton .button:active, +.inline-toolbar.toolbar GtkToolButton .button:checked, +.inline-toolbar.toolbar GtkToolButton .button:insensitive { + border-width: 1px; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; +} + +/*leftmost button */ +.linked .entry:first-child, +.linked .button:first-child, +.linked .button:active:first-child, +.linked .button:active:hover:first-child, +.linked .button:checked:first-child, +.linked .button:checked:hover:first-child, +.linked .button:insensitive:first-child, +.inline-toolbar.toolbar .button:first-child, +.inline-toolbar.toolbar .button:active:first-child, +.inline-toolbar.toolbar .button:checked:first-child, +.inline-toolbar.toolbar .button:insensitive:first-child, +.inline-toolbar.toolbar GtkToolButton:first-child .button, +.inline-toolbar.toolbar GtkToolButton:first-child .button:active, +.inline-toolbar.toolbar GtkToolButton:first-child .button:checked, +.inline-toolbar.toolbar GtkToolButton:first-child .button:insensitive { + border-width: 1px; + border-radius: 2px; + border-right-width: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +/* rightmost button */ +.linked .entry:last-child, +.linked .button:last-child, +.linked .button:active:last-child, +.linked .button:active:hover:last-child, +.linked .button:checked:last-child, +.linked .button:checked:hover:last-child, +.linked .button:insensitive:last-child, +.inline-toolbar.toolbar .button:last-child, +.inline-toolbar.toolbar .button:active:last-child, +.inline-toolbar.toolbar .button:checked:last-child, +.inline-toolbar.toolbar .button:insensitive:last-child, +.inline-toolbar.toolbar GtkToolButton:last-child .button, +.inline-toolbar.toolbar GtkToolButton:last-child .button:active, +.inline-toolbar.toolbar GtkToolButton:last-child .button:checked, +.inline-toolbar.toolbar GtkToolButton:last-child .button:insensitive { + border-width: 1px; + border-radius: 2px; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/* linked single button */ +.linked .entry:only-child, +.linked .button:only-child, +.linked .button:active:only-child, +.linked .button:active:hover:only-child, +.linked .button:checked:only-child, +.linked .button:checked:hover:only-child, +.linked .button:insensitive:only-child, +.inline-toolbar.toolbar .button:only-child, +.inline-toolbar.toolbar .button:active:only-child, +.inline-toolbar.toolbar .button:checked:only-child, +.inline-toolbar.toolbar .button:insensitive:only-child, +.inline-toolbar.toolbar GtkToolButton:only-child .button, +.inline-toolbar.toolbar GtkToolButton:only-child .button:active, +.inline-toolbar.toolbar GtkToolButton:only-child .button:checked, +.inline-toolbar.toolbar GtkToolButton:only-child .button:insensitive { + border-width: 1px; + border-radius: 2px; +} + +/* linked button shadows (vertical) */ +.linked.vertical .button, +.inline-toolbar.toolbar.vertical .button, +.inline-toolbar.toolbar.vertical GtkToolButton > .button { + box-shadow: inset 0 -1px shade(@theme_bg_color, 0.9); +} + +.linked.vertical .button:active, +.inline-toolbar.toolbar.vertical .button:active, +.inline-toolbar.toolbar.vertical GtkToolButton > .button:activeactive, +.linked.vertical .button:checked, +.inline-toolbar.toolbar.vertical .button:checked, +.inline-toolbar.toolbar.vertical GtkToolButton > .button:checked { + box-shadow: inset 0 -1px shade(@theme_bg_color, 0.9), + inset 1px 0 alpha(@dark_shadow, 0.07), + inset 0 1px alpha(@dark_shadow, 0.08), + inset -1px 0 alpha(@dark_shadow, 0.07); +} + +.linked.vertical .button:insensitive, +.inline-toolbar.toolbar.vertical .button:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive { + box-shadow: inset 0 -1px shade(@theme_bg_color, 0.85); +} + +/* remove box shadow from last-child and only-child */ +.linked.vertical .button:last-child, +.linked.vertical .button:only-child, +.linked.vertical .button:insensitive:last-child, +.linked.vertical .button:insensitive:only-child, +.linked.vertical .button:active:insensitive:last-child, +.linked.vertical .button:active:insensitive:only-child, +.linked.vertical .button:checked:insensitive:last-child, +.linked.vertical .button:checked:insensitive:only-child, +.inline-toolbar.toolbar.vertical .button:last-child, +.inline-toolbar.toolbar.vertical .button:only-child, +.inline-toolbar.toolbar.vertical .button:insensitive:last-child, +.inline-toolbar.toolbar.vertical .button:insensitive:only-child, +.inline-toolbar.toolbar.vertical .button:active:insensitive:last-child, +.inline-toolbar.toolbar.vertical .button:active:insensitive:only-child, +.inline-toolbar.toolbar.vertical .button:checked:insensitive:last-child, +.inline-toolbar.toolbar.vertical .button:checked:insensitive:only-child, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:checked:insensitive, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:checked:insensitive { + box-shadow: none; +} + +/* add back the inset shadow effect */ +.linked.vertical .button:active:last-child, +.linked.vertical .button:active:only-child, +.inline-toolbar.toolbar.vertical .button:active:last-child, +.inline-toolbar.toolbar.vertical .button:active:only-child, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active, +.linked.vertical .button:active:last-child, +.linked.vertical .button:active:only-child, +.inline-toolbar.toolbar.vertical .button:active:last-child, +.inline-toolbar.toolbar.vertical .button:active:only-child, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active, +.linked.vertical .button:checked:last-child, +.linked.vertical .button:checked:only-child, +.inline-toolbar.toolbar.vertical .button:checked:last-child, +.inline-toolbar.toolbar.vertical .button:checked:only-child, +.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:checked, +.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:checked { + 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); +} + +/* middle button (vertical) */ +.linked.vertical .entry, +.linked.vertical .button, +.linked.vertical .button:active, +.linked.vertical .button:active:hover, +.linked.vertical .button:checked, +.linked.vertical .button:checked:hover, +.linked.vertical .button:insensitive { + border-width: 1px; + border-radius: 0; + border-top-width: 0; + border-bottom-width: 0; +} + +/* top button (vertical) */ +.linked.vertical .entry:first-child, +.linked.vertical .button:first-child, +.linked.vertical .button:active:first-child, +.linked.vertical .button:active:hover:first-child, +.linked.vertical .button:checked:first-child, +.linked.vertical .button:checked:hover:first-child, +.linked.vertical .button:insensitive:first-child { + border-width: 1px; + border-radius: 2px; + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* bottom button (vertical) */ +.linked.vertical .entry:last-child, +.linked.vertical .button:last-child, +.linked.vertical .button:active:last-child, +.linked.vertical .button:active:hover:last-child, +.linked.vertical .button:checked:last-child, +.linked.vertical .button:checked:hover:last-child, +.linked.vertical .button:insensitive:last-child { + border-width: 1px; + border-radius: 2px; + border-top-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +/* linked single button (vertical) */ +.linked.vertical .entry:only-child, +.linked.vertical .button:only-child, +.linked.vertical .button:active:only-child, +.linked.vertical .button:active:hover:only-child, +.linked.vertical .button:checked:only-child, +.linked.vertical .button:checked:hover:only-child, +.linked.vertical .button:insensitive:only-child { + border-width: 1px; + border-radius: 2px; +} + +/* linked toolbar buttons */ +.primary-toolbar .button.raised.linked, +.primary-toolbar .raised.linked .button, +.toolbar .button.raised.linked, +.toolbar .raised.linked .button, +.toolbar .linked .button { + box-shadow: inset -1px 0 shade(@toolbar_bg_color, 0.9); +} + +.primary-toolbar .button.raised.linked:active, +.primary-toolbar .raised.linked .button:active, +.toolbar .button.raised.linked:active, +.toolbar .raised.linked .button:active, +.toolbar .linked .button:active, +.primary-toolbar .raised.linked .button:checked, +.toolbar .button.raised.linked:checked, +.toolbar .raised.linked .button:checked, +.toolbar .linked .button:checked { + box-shadow: inset -1px 0 shade(@toolbar_bg_color, 0.9), + inset 1px 0 alpha(@dark_shadow, 0.07), + inset 0 1px alpha(@dark_shadow, 0.08), + inset 0 -1px alpha(@dark_shadow, 0.05); +} + +.primary-toolbar .button.raised.linked:insensitive, +.primary-toolbar .raised.linked .button:insensitive, +.toolbar .button.raised.linked:insensitive, +.toolbar .raised.linked .button:insensitive, +.toolbar .linked .button:insensitive { + box-shadow: inset -1px 0 shade(@toolbar_bg_color, 0.85); +} + +/* remove box shadow from last-child and only-child */ +.primary-toolbar .button.raised.linked:last-child, +.primary-toolbar .button.raised.linked:only-child, +.primary-toolbar .button:insensitive.raised.linked:last-child, +.primary-toolbar .button:insensitive.raised.linked:only-child, +.primary-toolbar .button:active:insensitive.raised.linked:last-child, +.primary-toolbar .button:active:insensitive.raised.linked:only-child, +.primary-toolbar .button:checked:insensitive.raised.linked:last-child, +.primary-toolbar .button:checked:insensitive.raised.linked:only-child, +.primary-toolbar .raised.linked .button:last-child, +.primary-toolbar .raised.linked .button:only-child, +.primary-toolbar .raised.linked .button:insensitive:last-child, +.primary-toolbar .raised.linked .button:insensitive:only-child, +.primary-toolbar .raised.linked .button:active:insensitive:last-child, +.primary-toolbar .raised.linked .button:active:insensitive:only-child, +.primary-toolbar .raised.linked .button:checked:insensitive:last-child, +.primary-toolbar .raised.linked .button:checked:insensitive:only-child, +.toolbar .button.raised.linked:last-child, +.toolbar .button.raised.linked:only-child, +.toolbar .button:insensitive.raised.linked:last-child, +.toolbar .button:insensitive.raised.linked:only-child, +.toolbar .button:active:insensitive.raised.linked:last-child, +.toolbar .button:active:insensitive.raised.linked:only-child, +.toolbar .button:checked:insensitive.raised.linked:last-child, +.toolbar .button:checked:insensitive.raised.linked:only-child, +.toolbar .raised.linked .button:last-child, +.toolbar .raised.linked .button:only-child, +.toolbar .raised.linked .button:insensitive:last-child, +.toolbar .raised.linked .button:insensitive:only-child, +.toolbar .raised.linked .button:active:insensitive:last-child, +.toolbar .raised.linked .button:active:insensitive:only-child, +.toolbar .raised.linked .button:checked:insensitive:last-child, +.toolbar .raised.linked .button:checked:insensitive:only-child, +.toolbar .linked .button:last-child, +.toolbar .linked .button:only-child, +.toolbar .linked .button:insensitive:last-child, +.toolbar .linked .button:insensitive:only-child, +.toolbar .linked .button:active:insensitive:last-child, +.toolbar .linked .button:active:insensitive:only-child +.toolbar .linked .button:checked:insensitive:last-child, +.toolbar .linked .button:checked:insensitive:only-child { + box-shadow: none; +} + +/* add back the inset shadow effect */ +.primary-toolbar .button:active.raised.linked:last-child, +.primary-toolbar .button:active.raised.linked:only-child, +.primary-toolbar .raised.linked .button:active:last-child, +.primary-toolbar .raised.linked .button:active:only-child, +.toolbar .button:active.raised.linked:last-child, +.toolbar .button:active.raised.linked:only-child, +.toolbar .raised.linked .button:active:last-child, +.toolbar .raised.linked .button:active:only-child, +.toolbar .linked .button:active:last-child, +.toolbar .linked .button:active:only-child, +.primary-toolbar .button:checked.raised.linked:last-child, +.primary-toolbar .button:checked.raised.linked:only-child, +.primary-toolbar .raised.linked .button:checked:last-child, +.primary-toolbar .raised.linked .button:checked:only-child, +.toolbar .button:checked.raised.linked:last-child, +.toolbar .button:checked.raised.linked:only-child, +.toolbar .raised.linked .button:checked:last-child, +.toolbar .raised.linked .button:checked:only-child, +.toolbar .linked .button:checked:last-child, +.toolbar .linked .button:checked:only-child { + 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); +} + +/* middle button */ +.primary-toolbar .button.raised.linked, +.primary-toolbar .button.raised.linked:active, +.primary-toolbar .button.raised.linked:checked, +.primary-toolbar .button.raised.linked:insensitive, +.primary-toolbar .raised.linked .button, +.primary-toolbar .raised.linked .button:active, +.primary-toolbar .raised.linked .button:checked, +.primary-toolbar .raised.linked .button:insensitive, +.toolbar .button.raised.linked, +.toolbar .button.raised.linked:active, +.toolbar .button.raised.linked:checked, +.toolbar .button.raised.linked:insensitive, +.toolbar .raised.linked .button, +.toolbar .raised.linked .button:active, +.toolbar .raised.linked .button:checked, +.toolbar .raised.linked .button:insensitive, +.toolbar .linked .button, +.toolbar .linked .button:active, +.toolbar .linked .button:checked, +.toolbar .linked .button:insensitive { + border-width: 1px; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; +} + +/* leftmost button */ +.primary-toolbar .button.raised.linked:first-child, +.primary-toolbar .button.raised.linked:active:first-child, +.primary-toolbar .button.raised.linked:checked:first-child, +.primary-toolbar .button.raised.linked:insensitive:first-child, +.primary-toolbar .raised.linked .button:first-child, +.primary-toolbar .raised.linked .button:active:first-child, +.primary-toolbar .raised.linked .button:checked:first-child, +.primary-toolbar .raised.linked .button:insensitive:first-child, +.toolbar .button.raised.linked:first-child, +.toolbar .button.raised.linked:active:first-child, +.toolbar .button.raised.linked:checked:first-child, +.toolbar .button.raised.linked:insensitive:first-child, +.toolbar .raised.linked .button:first-child, +.toolbar .raised.linked .button:active:first-child, +.toolbar .raised.linked .button:checked:first-child, +.toolbar .raised.linked .button:insensitive:first-child, +.toolbar .linked .button:first-child, +.toolbar .linked .button:active:first-child, +.toolbar .linked .button:checked:first-child { + border-width: 1px; + border-radius: 2px; + border-right-width: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +/* rightmost button */ +.primary-toolbar .button.raised.linked:last-child, +.primary-toolbar .button.raised.linked:active:last-child, +.primary-toolbar .button.raised.linked:checked:last-child, +.primary-toolbar .button.raised.linked:insensitive:last-child, +.primary-toolbar .raised.linked .button:last-child, +.primary-toolbar .raised.linked .button:active:last-child, +.primary-toolbar .raised.linked .button:checked:last-child, +.primary-toolbar .raised.linked .button:insensitive:last-child, +.toolbar .button.raised.linked:last-child, +.toolbar .button.raised.linked:active:last-child, +.toolbar .button.raised.linked:checked:last-child, +.toolbar .button.raised.linked:insensitive:last-child, +.toolbar .raised.linked .button:last-child, +.toolbar .raised.linked .button:active:last-child, +.toolbar .raised.linked .button:checked:last-child, +.toolbar .raised.linked .button:insensitive:last-child, +.toolbar .linked .button:last-child, +.toolbar .linked .button:active:last-child, +.toolbar .linked .button:checked:last-child, +.toolbar .linked .button:insensitive:last-child { + border-width: 1px; + border-radius: 2px; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/* linked single button */ +.primary-toolbar .button.raised.linked:only-child, +.primary-toolbar .button.raised.linked:active:only-child, +.primary-toolbar .button.raised.linked:checked:only-child, +.primary-toolbar .button.raised.linked:insensitive:only-child, +.primary-toolbar .raised.linked .button:only-child, +.primary-toolbar .raised.linked .button:active:only-child, +.primary-toolbar .raised.linked .button:checked:only-child, +.primary-toolbar .raised.linked .button:insensitive:only-child, +.toolbar .button.raised.linked:only-child, +.toolbar .button.raised.linked:active:only-child, +.toolbar .button.raised.linked:checked:only-child, +.toolbar .button.raised.linked:insensitive:only-child, +.toolbar .raised.linked .button:only-child, +.toolbar .raised.linked .button:active:only-child, +.toolbar .raised.linked .button:checked:only-child, +.toolbar .raised.linked .button:insensitive:only-child, +.toolbar .linked .button:only-child, +.toolbar .linked .button:active:only-child, +.toolbar .linked .button:checked:only-child, +.toolbar .linked .button:insensitive:only-child { + border-width: 1px; + border-radius: 2px; +} + +/* linked titlebar buttons */ +.header-bar .button.raised.linked, +.header-bar .raised.linked .button, +.header-bar .linked .button { + box-shadow: inset -1px 0 shade(@titlebar_bg_color, 0.9); +} + +.header-bar .button.raised.linked:active, +.header-bar .raised.linked .button:active, +.header-bar .button.raised.linked:checked, +.header-bar .raised.linked .button:checked, +.header-bar .linked .button:active, +.header-bar .linked .button:checked { + box-shadow: inset -1px 0 shade(@titlebar_bg_color, 0.9), + inset 1px 0 alpha(@dark_shadow, 0.07), + inset 0 1px alpha(@dark_shadow, 0.08), + inset 0 -1px alpha(@dark_shadow, 0.05); +} + +.header-bar .button.raised.linked:insensitive, +.header-bar .raised.linked .button:insensitive, +.header-bar .linked .button:insensitive { + box-shadow: inset -1px 0 shade(@titlebar_bg_color, 0.85); +} + +/* remove box shadow from last-child and only-child */ +.header-bar .button.raised.linked:last-child, +.header-bar .button.raised.linked:only-child, +.header-bar .button:insensitive.raised.linked:last-child, +.header-bar .button:insensitive.raised.linked:only-child, +.header-bar .button:active:insensitive.raised.linked:last-child, +.header-bar .button:active:insensitive.raised.linked:only-child, +.header-bar .button:checked:insensitive.raised.linked:last-child, +.header-bar .button:checked:insensitive.raised.linked:only-child, +.header-bar .raised.linked .button:last-child, +.header-bar .raised.linked .button:only-child, +.header-bar .raised.linked .button:insensitive:last-child, +.header-bar .raised.linked .button:insensitive:only-child, +.header-bar .raised.linked .button:active:insensitive:last-child, +.header-bar .raised.linked .button:active:insensitive:only-child, +.header-bar .raised.linked .button:checked:insensitive:last-child, +.header-bar .raised.linked .button:checked:insensitive:only-child, +.header-bar .linked .button:last-child, +.header-bar .linked .button:only-child, +.header-bar .linked .button:insensitive:last-child, +.header-bar .linked .button:insensitive:only-child, +.header-bar .linked .button:active:insensitive:last-child, +.header-bar .linked .button:active:insensitive:only-child, +.header-bar .linked .button:checked:insensitive:last-child, +.header-bar .linked .button:checked:insensitive:only-child { + box-shadow: none; +} + +/* add back the inset shadow effect */ +.header-bar .button:active.raised.linked:last-child, +.header-bar .button:active.raised.linked:only-child, +.header-bar .raised.linked .button:active:last-child, +.header-bar .raised.linked .button:active:only-child, +.header-bar .linked .button:active:last-child, +.header-bar .linked .button:active:only-child, +.header-bar .button:checked.raised.linked:last-child, +.header-bar .button:checked.raised.linked:only-child, +.header-bar .raised.linked .button:checked:last-child, +.header-bar .raised.linked .button:checked:only-child, +.header-bar .linked .button:checked:last-child, +.header-bar .linked .button:checked:only-child { + 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); +} + +/* middle button */ +.header-bar .button.raised.linked, +.header-bar .button.raised.linked:active, +.header-bar .button.raised.linked:checked, +.header-bar .button.raised.linked:insensitive, +.header-bar .raised.linked .button, +.header-bar .raised.linked .button:active, +.header-bar .raised.linked .button:checked, +.header-bar .raised.linked .button:insensitive, +.header-bar .linked .button, +.header-bar .linked .button:active, +.header-bar .linked .button:checked, +.header-bar .linked .button:insensitive { + border-width: 1px; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; +} + +/* leftmost button */ +.header-bar .button.raised.linked:first-child, +.header-bar .button.raised.linked:active:first-child, +.header-bar .button.raised.linked:insensitive:first-child, +.header-bar .raised.linked .button:first-child, +.header-bar .raised.linked .button:active:first-child, +.header-bar .raised.linked .button:insensitive:first-child, +.header-bar .linked .button:first-child, +.header-bar .linked .button:active:first-child, +.header-bar .linked .button:insensitive:first-child { + border-width: 1px; + border-radius: 2px; + border-right-width: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +/* rightmost button */ +.header-bar .button.raised.linked:last-child, +.header-bar .button.raised.linked:active:last-child, +.header-bar .button.raised.linked:checked:last-child, +.header-bar .button.raised.linked:insensitive:last-child, +.header-bar .raised.linked .button:last-child, +.header-bar .raised.linked .button:active:last-child, +.header-bar .raised.linked .button:checked:last-child, +.header-bar .raised.linked .button:insensitive:last-child, +.header-bar .linked .button:last-child, +.header-bar .linked .button:active:last-child, +.header-bar .linked .button:checked:last-child, +.header-bar .linked .button:insensitive:last-child { + border-width: 1px; + border-radius: 2px; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/* linked single button */ +.header-bar .button.raised.linked:only-child, +.header-bar .button.raised.linked:active:only-child, +.header-bar .button.raised.linked:checked:only-child, +.header-bar .button.raised.linked:insensitive:only-child, +.header-bar .raised.linked .button:only-child, +.header-bar .raised.linked .button:active:only-child, +.header-bar .raised.linked .button:checked:only-child, +.header-bar .raised.linked .button:insensitive:only-child, +.header-bar .linked .button:only-child, +.header-bar .linked .button:active:only-child, +.header-bar .linked .button:checked:only-child, +.header-bar .linked .button:insensitive:only-child { + border-width: 1px; + border-radius: 2px; +} + +/*********** + * tooltip * + ***********/ +.tooltip { + border-width: 1px; + border-style: solid; + border-color: shade(@theme_tooltip_bg_color, 0.8); + border-radius: 2px; + background-color: @theme_tooltip_bg_color; + background-image: none; + color: @theme_tooltip_fg_color; +} + +.tooltip.background { + background-color: @theme_tooltip_bg_color; + background-clip: padding-box; +} + +.tooltip.window-frame.csd { + background-color: transparent; +} + +.tooltip * { + background-color: transparent; + color: inherit; +} + +/************ + * treeview * + ************/ +GtkTreeView { + -GtkTreeView-vertical-separator: 0; + + outline-offset: -1px; +} + +GtkTreeView.dnd { + border-width: 1px; + border-style: solid; + border-color: @theme_selected_bg_color; + border-radius: 0; +} + +GtkTreeView .entry { + border-radius: 0; + background-color: @theme_base_color; + background-image: none; +} + +/************ + * viewport * + ************/ +GtkViewport.frame { + border-width: 0; +} + +.view { + background-color: @theme_base_color; + color: @theme_text_color; +} + +.view:insensitive, +.view:insensitive:insensitive { + 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 * + **************/ +.action-bar { + 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; +} + +.action-bar .button.text-button { + padding: 4px; +} + +.action-bar .button.image-button { + padding: 6px; +} + +.action-bar .title { + font: bold; + padding: 0 12px; +} + +.action-bar .subtitle { + font: smaller; + padding: 0 12px; +} + +/*************** + * search bars * + ***************/ +.search-bar { + 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); +} + +.search-bar .button.close-button { + padding: 4px; +} + +/*********** + * dialogs * + ***********/ +GtkMessageDialog, +.prompt { + -GtkDialog-content-area-border: 0; + -GtkDialog-action-area-border: 0; + -GtkDialog-button-spacing: 0; + + margin: 0; + padding: 0; +} + +/******************** + * various choosers * + ********************/ +GtkFontButton .separator, +GtkFileChooserButton .separator { + /* always disable separators */ + -GtkWidget-wide-separators: true; + -GtkWidget-horizontal-separator: 0; + -GtkWidget-vertical-separator: 0; +} + +GtkFontButton GtkLabel:last-child { + color: alpha(currentColor, 0.7); +} + +GtkFileChooserButton GtkImage:last-child { + color: alpha(currentColor, 0.7); +} + +GtkFileChooser .pane-separator, +GtkFileChooser .pane-separator:hover { + border-width: 0 1px 0 0; + border-style: solid; + border-color: shade(@theme_bg_color, 0.8); + background-color: @theme_bg_color; + color: shade(@theme_bg_color, 0.9); +} + +/* for fallback when header bar not used */ +GtkFileChooser .dialog-action-box { + border-width: 1px 0 0; + border-style: solid; + border-color: shade(@theme_bg_color, 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; +} + +/******* + * osd * + *******/ +.background.osd { + color: @osd_fg; + background-color: @osd_bg; +} + +GtkOverlay.osd { + background-color: transparent; +} + +.osd.frame { + background-clip: border-box; + background-origin: border-box; +} + +.osd.button, +.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:prelight, +.osd.button:hover, +.osd .button:hover { + border-color: shade(@osd_bg, 0.7); + background-color: shade(@osd_bg, 1.10); + background-image: none; +} + +.osd.button:active, +.osd .button:active, +.osd GtkMenuButton.button:active, +.osd.button:checked, +.osd .button:checked, +.osd GtkMenuButton.button:checked { + border-color: shade(@osd_bg, 0.8); + background-color: shade(@osd_bg, 0.95); + background-image: none; +} + +.osd.button:active:hover, +.osd .button:active:hover, +.osd GtkMenuButton.button:active:hover, +.osd.button:checked:hover, +.osd .button:checked:hover, +.osd GtkMenuButton.button:checked:hover { + border-color: shade(@osd_bg, 0.7); +} + +.osd.button:insensitive, +.osd .button:insensitive { + border-color: shade(@osd_bg, 0.85); + background-color: shade(@osd_bg, 0.9); + background-image: none; +} + +.osd.button:active:insensitive, +.osd .button:active:insensitive, +.osd.button:checked:insensitive, +.osd .button:checked:insensitive { + 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.toolbar .button:hover { + border-color: shade(@osd_bg, 0.7); + background-color: shade(@osd_bg, 1.10); + background-image: none; +} + +.osd.toolbar .button:active, +.osd.toolbar .button:checked { + border-color: shade(@osd_bg, 0.8); + background-color: shade(@osd_bg, 0.95); + background-image: none; +} + +.osd.toolbar .button:active:hover, +.osd.toolbar .button:checked:hover { + border-color: shade(@osd_bg, 0.7); +} + +.osd.toolbar .button:focus, +.osd.toolbar .button:hover:focus, +.osd.toolbar .button:active:focus, +.osd.toolbar .button:active:hover:focus, +.osd.toolbar .button:checked:focus, +.osd.toolbar .button:checked:hover:focus { + border-color: shade(@osd_bg, 0.7); +} + +.osd.toolbar .button:insensitive { + border-color: shade(@osd_bg, 0.85); + background-color: shade(@osd_bg, 0.9); + background-image: none; +} + +.osd.toolbar .button:active:insensitive, +.osd.toolbar .button:checked:insensitive { + 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 GtkToolButton .button, +.osd.toolbar GtkToolButton:only-child .button, +.osd.toolbar GtkToolButton:last-child .button, +.osd.toolbar GtkToolButton:first-child .button { + border-width: 1px; + border-radius: 2px; + border-style: solid; +} + +.osd.toolbar .separator { + color: shade(@osd_bg, 0.9); +} + +/* used by gnome-settings-daemon's media-keys OSD */ +.osd.trough { + background-color: shade(@osd_bg, 0.8); +} + +.osd.progressbar { + background-color: @osd_fg; +} + +.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:insensitive { + 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:insensitive, +.osd .scale.trough.highlight:insensitive { + border-color: shade(@osd_bg, 0.85); + background-color: shade(@osd_bg, 0.9); + background-image: none; +} + +.osd GtkProgressBar, +GtkProgressBar.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 2px; + -GtkProgressBar-min-horizontal-bar-height: 2px; + + padding: 0; +} + +.osd GtkProgressBar.trough, +GtkProgressBar.osd.trough { + padding: 0; + border-style: none; + border-radius: 0; + background-image: none; + background-color: transparent; +} + +.osd GtkProgressBar.progressbar, +GtkProgressBar.osd.progressbar { + 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 { + 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 GtkIconView.cell:selected, +.osd GtkIconView.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, +.destructive-action.button:checked { + 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, +.suggested-action.button:checked { + 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, +.suggested-action.button:hover:checked { + border-color: shade(@theme_selected_bg_color, 0.8); +} + +/****************** + * selection mode * + ******************/ +.selection-mode.header-bar, +.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.header-bar { + 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.header-bar .button, +.selection-mode.toolbar .button, +.selection-mode.toolbar GtkToolButton .button { + 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.header-bar .button:hover, +.selection-mode.toolbar .button:hover, +.selection-mode.toolbar GtkToolButton .button:hover { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: shade(@theme_selected_bg_color, 1.70); + background-image: none; +} + +.selection-mode.header-bar .button:active, +.selection-mode.toolbar .button:active, +.selection-mode.toolbar GtkToolButton .button:active, +.selection-mode.header-bar .button:checked, +.selection-mode.toolbar .button:checked, +.selection-mode.toolbar GtkToolButton .button:checked { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: shade(@theme_selected_bg_color, 1.55); + background-image: none; +} + +.selection-mode.header-bar .button:hover:active, +.selection-mode.toolbar .button:hover:active, +.selection-mode.toolbar GtkToolButton .button:hover:active { + border-color: shade(@theme_selected_bg_color, 0.8); +} + +/* suggested button */ +.selection-mode.header-bar .suggested-action.button, +.selection-mode.toolbar .suggested-action.button, +.selection-mode.toolbar GtkToolButton.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.header-bar .suggested-action.button:hover, +.selection-mode.toolbar .suggested-action.button:hover, +.selection-mode.toolbar GtkToolButton.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.header-bar .suggested-action.button:active, +.selection-mode.toolbar .suggested-action.button:active, +.selection-mode.toolbar GtkToolButton.suggested-action:active, +.selection-mode.header-bar .suggested-action.button:checked, +.selection-mode.toolbar .suggested-action.button:checked, +.selection-mode.toolbar GtkToolButton.suggested-action:checked { + border-color: shade(@theme_selected_bg_color, 0.9); + background-color: shade(@theme_selected_bg_color, 1.05); + background-image: none; +} + +.selection-mode.header-bar .suggested-action.button:hover:active, +.selection-mode.toolbar .suggested-action.button:hover:active, +.selection-mode.toolbar GtkToolButton.suggested-action .button:hover:active, +.selection-mode.header-bar .suggested-action.button:hover:checked, +.selection-mode.toolbar .suggested-action.button:hover:checked, +.selection-mode.toolbar GtkToolButton.suggested-action .button:hover:checked { + border-color: shade(@theme_selected_bg_color, 0.8); +} + +/* menu button */ +.selection-mode.header-bar .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 .dim-label, +.selection-mode.toolbar .selection-menu.button .dim-label { + color: shade(@theme_selected_bg_color, 0.7); +} + +.selection-mode.header-bar .selection-menu.button:hover, +.selection-mode.toolbar .dim-label:hover, +.selection-mode.toolbar .selection-menu.button:hover, +.selection-mode.toolbar .selection-menu.button .dim-label:hover { + color: shade(@theme_selected_bg_color, 0.7); +} + +.selection-mode.header-bar .selection-menu.button:active, +.selection-mode.toolbar .selection-menu.button:active, +.selection-mode.header-bar .selection-menu.button:checked, +.selection-mode.toolbar .selection-menu.button:checked { + 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 { + border-radius: 2px 2px 0 0; + background-image: none; + background-color: @titlebar_bg_color; + color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.1); + text-shadow: none; +} + +.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 { + font: bold; +} + +.titlebar:backdrop { + background-image: none; + background-color: @titlebar_bg_color; + color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.4); + text-shadow: none; +} + +.titlebar .titlebutton { + padding: 4px; + border-style: none; + background: none; + color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.1); + icon-shadow: none; +} + +.titlebar .titlebutton:hover, +.titlebar .titlebutton:hover:focus { + background: none; + color: @theme_selected_bg_color; +} + +.titlebar .titlebutton:active, +.titlebar .titlebutton:active:hover, +.titlebar .titlebutton:checked, +.titlebar .titlebutton:checked:hover { + background: none; + color: shade(@theme_selected_bg_color, 0.9); + box-shadow: none; +} + +/* +.titlebar .right .titlebutton:first-child { + border-left: 1px solid shade(@titlebar_bg_color, 0.9); +} + +.titlebar .right .titlebutton:last-child { +} + +.titlebar .left .titlebutton:last-child { + border-right: 1px solid shade(@titlebar_bg_color, 0.9); +} + +.titlebar .left .titlebutton:first-child { +} +*/ + +.titlebar .titlebutton:backdrop { + background-image: none; + color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.4); + icon-shadow: none; +} + +.window-frame { + border: none; + border-radius: 2px 2px 0 0; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), + 0 6px 6px rgba(0, 0, 0, 0.23), + 0 0 0 1px mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21); + + /* this is used for the resize cursor area */ + margin: 15px; +} + +.window-frame:backdrop { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), + 0 1px 2px rgba(0, 0, 0, 0.24), + 0 0 0 1px mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.12); +} + +.window-frame.tiled { + border-radius: 0; +} + +.window-frame.csd.popup { + border-radius: 0; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23), + 0 0 0 1px mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21); + } + +.window-frame.csd.tooltip { + border-radius: 2px; + box-shadow: none; +} + +.window-frame.csd.message-dialog { + border-radius: 2px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23), + 0 0 0 1px mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21); +} diff --git a/gtk-3.20/gtk.css b/gtk-3.20/gtk.css new file mode 100755 index 0000000..19b01e6 --- /dev/null +++ b/gtk-3.20/gtk.css @@ -0,0 +1 @@ +@import url("resource:///org/numixproject/gtk-3.20/dist/gtk.css"); diff --git a/gtk-3.20/gtk.gresource.xml b/gtk-3.20/gtk.gresource.xml new file mode 100644 index 0000000..bd53b53 --- /dev/null +++ b/gtk-3.20/gtk.gresource.xml @@ -0,0 +1,44 @@ + + + + assets/checkbox-checked-dark.png + assets/checkbox-checked-insensitive-dark.png + assets/checkbox-checked-insensitive.png + assets/checkbox-checked.png + assets/checkbox-mixed-dark.png + assets/checkbox-mixed-insensitive-dark.png + assets/checkbox-mixed-insensitive.png + assets/checkbox-mixed.png + assets/checkbox-unchecked-dark.png + assets/checkbox-unchecked-insensitive-dark.png + assets/checkbox-unchecked-insensitive.png + assets/checkbox-unchecked.png + assets/grid-selection-checked-dark.png + assets/grid-selection-checked.png + assets/grid-selection-unchecked-dark.png + assets/grid-selection-unchecked.png + assets/menuitem-checkbox-checked-hover.png + assets/menuitem-checkbox-checked-insensitive.png + assets/menuitem-checkbox-checked.png + assets/menuitem-checkbox-mixed-hover.png + assets/menuitem-checkbox-mixed-insensitive.png + assets/menuitem-checkbox-mixed.png + assets/menuitem-radio-checked-hover.png + assets/menuitem-radio-checked-insensitive.png + assets/menuitem-radio-checked.png + assets/radio-checked-dark.png + assets/radio-checked-insensitive-dark.png + assets/radio-checked-insensitive.png + assets/radio-checked.png + assets/radio-mixed-dark.png + assets/radio-mixed-insensitive-dark.png + assets/radio-mixed-insensitive.png + assets/radio-mixed.png + assets/radio-unchecked-dark.png + assets/radio-unchecked-insensitive-dark.png + assets/radio-unchecked-insensitive.png + assets/radio-unchecked.png + dist/gtk.css + dist/gtk-dark.css + + diff --git a/gtk-3.20/scss/_colors.scss b/gtk-3.20/scss/_colors.scss new file mode 100755 index 0000000..cd3bb55 --- /dev/null +++ b/gtk-3.20/scss/_colors.scss @@ -0,0 +1,73 @@ +@import "global"; + +/* dark color scheme */ +@define-color dark_bg_color #{"" + $dark_bg_color}; +@define-color dark_fg_color #{"" + $dark_fg_color}; + +/* colormap actually used by the theme, to be overridden in other css files */ +@define-color theme_bg_color #{"" + $bg_color}; +@define-color theme_fg_color #{"" + $fg_color}; +@define-color theme_base_color #{"" + $base_color}; +@define-color theme_text_color #{"" + $text_color}; +@define-color theme_selected_bg_color #{"" + $selected_bg_color}; +@define-color theme_selected_fg_color #{"" + $selected_fg_color}; +@define-color theme_tooltip_bg_color #{"" + $tooltip_bg_color}; +@define-color theme_tooltip_fg_color #{"" + $tooltip_fg_color}; + +/* shadow effects */ +@define-color light_shadow #{"" + $light_shadow}; +@define-color dark_shadow #{"" + $dark_shadow}; + +/* misc colors used by gtk+ */ +@define-color info_fg_color #{"" + $info_fg_color}; +@define-color info_bg_color #{"" + $info_bg_color}; +@define-color warning_fg_color #{"" + $warning_fg_color}; +@define-color warning_bg_color #{"" + $warning_bg_color}; +@define-color question_fg_color #{"" + $question_fg_color}; +@define-color question_bg_color #{"" + $question_bg_color}; +@define-color error_fg_color #{"" + $error_fg_color}; +@define-color error_bg_color #{"" + $error_bg_color}; +@define-color link_color #{"" + $link_color}; +@define-color success_color #{"" + $success_color}; +@define-color warning_color #{"" + $warning_color}; +@define-color error_color #{"" + $error_color}; + +/* widget colors */ +@define-color titlebar_bg_color @dark_bg_color; +@define-color titlebar_fg_color @dark_fg_color; +@define-color menubar_bg_color @dark_bg_color; +@define-color menubar_fg_color @dark_fg_color; +@define-color toolbar_bg_color @theme_bg_color; +@define-color toolbar_fg_color @theme_fg_color; +@define-color menu_bg_color @dark_bg_color; +@define-color menu_fg_color @dark_fg_color; +@define-color panel_bg_color @dark_bg_color; +@define-color panel_fg_color @dark_fg_color; +@define-color borders #{"" + $borders_color}; +@define-color unfocused_borders #{"" + $backdrop_borders_color}; + + +@define-color insensitive_bg_color #{"" + $insensitive_bg_color}; +@define-color insensitive_fg_color #{"" + $insensitive_fg_color}; + +/* osd */ +@define-color osd_base #{"" + $osd_base}; +@define-color osd_bg #{"" + $osd_bg}; +@define-color osd_fg #{"" + $osd_fg}; + +/* lightdm greeter colors */ +@define-color lightdm_bg_color #{"" + $lightdm_bg_color}; +@define-color lightdm_fg_color #{"" + $lightdm_fg_color}; + +/* window manager colors */ +@define-color wm_bg #{"" + $wm_bg}; +@define-color wm_border_focused #{"" + $wm_border_focused}; +@define-color wm_border_unfocused #{"" + $wm_border_unfocused}; +@define-color wm_title_focused #{"" + $wm_title_focused}; +@define-color wm_title_unfocused #{"" + $wm_title_unfocused}; +@define-color wm_icons_focused #{"" + $wm_icons_focused}; +@define-color wm_icons_focused_prelight #{"" + $wm_icons_focused_prelight}; +@define-color wm_icons_focused_pressed #{"" + $wm_icons_unfocused_pressed}; +@define-color wm_icons_unfocused #{"" + $wm_icons_unfocused}; +@define-color wm_icons_unfocused_prelight #{"" + $wm_icons_unfocused_prelight}; +@define-color wm_icons_unfocused_pressed #{"" + $wm_icons_unfocused_pressed}; diff --git a/gtk-3.20/scss/_functions.scss b/gtk-3.20/scss/_functions.scss new file mode 100755 index 0000000..d0ea685 --- /dev/null +++ b/gtk-3.20/scss/_functions.scss @@ -0,0 +1,79 @@ +$modules: () !default; + +@mixin exports($name) { + @if (not index($modules, $name)) { + $modules: append($modules, $name) !global; + + @content; + } +} + +@function alpha($color, $amount) { + @if type-of($color) == "color" { + @return fade-out($color, (1 - $amount)); + } @else { + @return unquote("alpha(#{$color},#{$amount})"); + } +} + +@function shade($color, $amount) { + @if type-of($color) == "color" { + @if ($amount > 1) { + @return lighten($color, ($amount - 1) * lightness($color)) + } @else { + @return darken($color, (1 - $amount) * lightness($color)) + } + } @else { + @return unquote("shade(#{$color},#{$amount})"); + } +} + +@function mix($color1, $color2, $amount) { + @return unquote("mix(#{$color1},#{$color2},#{$amount})"); +} + +@function border_normal($color) { + @return shade($color, $contrast); +} + +@function border_focus($color) { + @return shade($color, ($contrast - .05)); +} + +@function border_active($color) { + @return shade($color, ($contrast - .1)); +} + +@function border_insensitive($color) { + @return shade($color, ($contrast + .05)); +} + +@mixin linear-gradient($color, $direction: to bottom) { + @if $gradient == 0 { + background-color: $color; + background-image: none; + } @else { + $amount: $gradient / 2; + + background-color: $color; + background-image: linear-gradient($direction, + shade($color, (1 + $amount)), + shade($color, (1 - $amount)) + ); + } +} + +@mixin border($color) { + border-color: border_normal($color); + + &:focus, &:hover { border-color: border_focus($color); } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { border-color: border_active($color); } + + &:disabled { border-color: border_insensitive($color); } + + &:active:disabled, &:checked:disabled { border-color: border_normal($color); } +} diff --git a/gtk-3.20/scss/_global.scss b/gtk-3.20/scss/_global.scss new file mode 100755 index 0000000..d69bc51 --- /dev/null +++ b/gtk-3.20/scss/_global.scss @@ -0,0 +1,111 @@ + +@import "functions"; + +// default color scheme +$bg_color: if($variant == "dark", #444, #eee); +$fg_color: if($variant == "dark", #ddd, #555); +$base_color: if($variant == "dark", #333, #fff); +$text_color: if($variant == "dark", #eee, #333); +$selected_bg_color: #f0544c; +$selected_fg_color: #fff; +$tooltip_bg_color: #444; +$tooltip_fg_color: #eee; + +$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%)); +$borders_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 12%)); +$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); + +// dark colors +$dark_bg_color: #444; +$dark_fg_color: #eee; + +// shadows +$dark_shadow: #000; +$light_shadow: #fff; + +// white and black +$black: #000; +$white: #fff; + +$button_border: shade($base_color, .9); +$entry_border: alpha($dark_shadow, .06); + +$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4)); +$scrollbar_slider_color: shade($bg_color, .5); +$scrollbar_slider_hover_color: shade($bg_color, .3); +$scrollbar_slider_active_color: if($variant == 'light', darken($selected_bg_color, 5%), lighten($selected_bg_color, 10%)); + +// misc colors used by gtk+ +$info_fg_color: #fff; +$info_bg_color: #03a9f4; +$warning_fg_color: #fff; +$warning_bg_color: #ef6c00; +$question_fg_color: #fff; +$question_bg_color: #673ab7; +$error_fg_color: #fff; +$error_bg_color: #f44336; +$link_color: #3f51b5; +$success_color: #4caf50; +$warning_color: #ef6c00; +$error_color: #f44336; + +$toolbar_bg_color: $bg_color; +$toolbar_fg_color: $fg_color; + +$titlebar_bg_color: $dark_bg_color; +$titlebar_fg_color: $dark_fg_color; + +$menu_bg_color: $dark_bg_color; +$menu_fg_color: $dark_fg_color; + +$menubar_bg_color: $dark_bg_color; +$menubar_fg_color: $dark_fg_color; + +$panel_bg_color: $dark_bg_color; +$panel_fg_color: $dark_fg_color; + +$osd_base: $dark_bg_color; +$osd_fg: $dark_fg_color; +$osd_bg: alpha($osd_base, 0.8); + +$lightdm_bg_color: $dark_bg_color; +$lightdm_fg_color: $dark_fg_color; + +$wm_bg: $titlebar_bg_color; +$wm_border_focused: transparent; +$wm_border_unfocused: transparent; +$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1); +$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4); +$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1); +$wm_icons_focused_prelight: $selected_bg_color; +$wm_icons_focused_pressed: shade($selected_bg_color, .8); +$wm_icons_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4); +$wm_icons_unfocused_prelight: $selected_bg_color; +$wm_icons_unfocused_pressed: shade($selected_bg_color, .8); + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: $borders_color; + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color); +$backdrop_borders_color: mix($borders_color, $bg_color, 90%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); +$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); + +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); + +$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); + +// widget styles +$roundness: 2px; +$spacing: 5px; +$gradient: 0; +$contrast: .8; diff --git a/gtk-3.20/scss/_widgets.scss b/gtk-3.20/scss/_widgets.scss new file mode 100755 index 0000000..db51b05 --- /dev/null +++ b/gtk-3.20/scss/_widgets.scss @@ -0,0 +1,37 @@ +@import "functions"; +@import "global"; +@import "colors"; + + +@import "widgets/base"; +@import "widgets/button"; +@import "widgets/entry"; +@import "widgets/actionbar"; +@import "widgets/calendar"; +@import "widgets/choosers"; +@import "widgets/grid"; +@import "widgets/infobar"; +@import "widgets/menu"; +@import "widgets/misc"; +@import "widgets/notebook"; +@import "widgets/osd"; +@import "widgets/overshoot"; +@import "widgets/progress"; +@import "widgets/scrollbar"; +@import "widgets/sidebar"; +@import "widgets/spinner"; +@import "widgets/toggle"; +@import "widgets/toolbar"; +@import "widgets/view"; +@import "widgets/window"; + +@import "apps/unity-greeter"; +@import "apps/gedit"; +@import "apps/nautilus"; +@import "apps/nemo"; +@import "apps/panel"; +@import "apps/synaptic"; +@import "apps/xfce"; +@import "apps/unity"; +@import "apps/lightdm"; +@import "apps/gnome-terminal"; diff --git a/gtk-3.20/scss/apps/_gedit.scss b/gtk-3.20/scss/apps/_gedit.scss new file mode 100644 index 0000000..d56f999 --- /dev/null +++ b/gtk-3.20/scss/apps/_gedit.scss @@ -0,0 +1,132 @@ +/********* + ! Gedit * +**********/ + +@include exports("gedit") { + GeditWindow .pane-separator { + border-width: 0 1px 0 0; + border-style: solid; + + &, &:hover { + border-color: shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + .gedit-document-panel { + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + list row { + padding: $spacing; + + button { + padding: 1px; + border-radius: $roundness; + border-style: solid; + border-color: transparent; + border-width: 1px; + background-color: transparent; + background-image: none; + color: transparent; + -gtk-icon-shadow: none; + } + } + + .prelight-row button { + border-color: alpha($black, .1); + color: alpha($white, .8); + + &:active { + border-color: alpha($black, .2); + background-color: alpha($black, .08); + color: $white; + } + } + + list row, .prelight-row { + button:hover { + border-color: alpha($black, .1); + color: $white; + } + } + } + + .gedit-document-panel-group-row { + &, &:hover { + border-top: 1px solid shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + .gedit-document-panel-document-row { + &:hover { background-color: shade($bg_color, 1.05); } + + &:selected { + &, &:hover { @extend %selected; } + } + } + + .gedit-document-panel-dragged-row { + border: 1px solid alpha($black, .1); + background-color: alpha($black, .5); + color: $white; + } + + .gedit-document-panel-placeholder-row { + border: 0; + background-color: alpha($black, .08); + transition: all 200ms ease-in; + } + + statusbar { border-top: 1px solid border_normal($bg_color); } + + statusbar GeditSmallButton, GeditStatusMenuButton { + text-shadow: none; + + button { + border-style: solid; + border-width: 0 1px; + border-color: transparent; + border-radius: 0; + padding: 1px 6px 2px 4px; + + &:hover, &:active, &:active:hover { border-color: border_normal($bg_color); } + + &:active { + background-color: shade($bg_color, .95); + color: $fg_color; + } + } + } + + GeditViewFrame .gedit-search-slider { + padding: $spacing; + border-radius: 0 0 $roundness $roundness; + border-width: 0 1px 1px; + border-style: solid; + border-color: border_normal($base_color); + background-color: $base_color; + + .not-found { + background-color: $error_bg_color; + background-image: none; + color: $error_fg_color; + + &:selected { @extend %selected; } + } + } + + GeditFileBrowserWidget .toolbar { + padding: $spacing / 2; + border-top: 0; + background-color: $bg_color; + background-image: none; + } + + .gedit-search-entry-occurrences-tag { + margin: $spacing / 2; + padding: $spacing / 2; + color: mix($text_color, $base_color, .5); + } +} diff --git a/gtk-3.20/scss/apps/_gnome-terminal.scss b/gtk-3.20/scss/apps/_gnome-terminal.scss new file mode 100644 index 0000000..92c11be --- /dev/null +++ b/gtk-3.20/scss/apps/_gnome-terminal.scss @@ -0,0 +1,57 @@ +/********************** + ! Genome Terminal * +***********************/ + +@include exports("gnome-terminal") { + //noinspection ScssLintInspection,ScssLintInspection + VteTerminal { + background-color: $osd_base; + color: $osd_fg; + } + TerminalWindow { + .scrollbars-junction { + background-color: $osd_base; + } + scrollbar { + trough { + background-color: $osd_base; + } + button { + color: shade($osd_base, 0.6); + &:active { + color: shade($osd_base, 0.6); + &:hover { + color: shade($osd_base, 0.6); + } + } + } + & slider { + border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21); + background-color: mix($osd_base, $osd_fg, 0.21); + &:hover { + border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31); + background-color: mix($osd_base, $osd_fg, 0.31); + } + &.vertical { + &:hover { + border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31); + background-color: mix($osd_base, $osd_fg, 0.31); + } + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + } + } + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + } + } + } + GtkNotebook.notebook { + border-right-width: 0; + border-bottom-width: 0; + border-left-width: 0; + } + } +} diff --git a/gtk-3.20/scss/apps/_lightdm.scss b/gtk-3.20/scss/apps/_lightdm.scss new file mode 100644 index 0000000..3db7dff --- /dev/null +++ b/gtk-3.20/scss/apps/_lightdm.scss @@ -0,0 +1,193 @@ +/*********************** + ! LightDM GTK Greeter * + ***********************/ + +@include exports("lightdm") { + #panel_window { + background-color: transparent; + background-image: none; + color: $white; + font: bold; + text-shadow: 0 1px alpha($black, .5); + -gtk-icon-shadow: 0 1px alpha($black, .5); + + .menubar { + &, > .menuitem { + background-color: transparent; + background-image: none; + color: $white; + font: bold; + text-shadow: 0 1px alpha($black, .5); + -gtk-icon-shadow: 0 1px alpha($black, .5); + + *:hover { color: $white; } + + &:hover { + border-style: none; + background-color: alpha($white, .2); + background-image: none; + color: $white; + } + + &:disabled { color: alpha($white, .7); } + + .menu { + border-radius: 1px; + + .menuitem { + font: normal; + text-shadow: none; + } + } + } + } + } + + #content_frame { padding-bottom: 14px; } + + #login_window, #shutdown_dialog, #restart_dialog { + border-style: none; + border-radius: $roundness; + background-color: $lightdm_bg_color; + color: $lightdm_fg_color; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset -1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset 0 1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset 0 -1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21); + + .button { + padding: 3px 15px; + border-width: 1px; + border-radius: $roundness; + border-style: solid; + border-color: shade($lightdm_bg_color, .8); + background-color: shade($lightdm_bg_color, 1.08); + background-image: none; + color: $lightdm_fg_color; + transition: all 150ms ease-out; + + &.default, &:focus, &:active:focus { + border-color: shade($selected_bg_color, .8); + background-color: shade($selected_bg_color, 1.08); + background-image: none; + color: $selected_fg_color; + + &:hover { + border-color: shade($selected_bg_color, .7); + background-color: $selected_bg_color; + } + } + } + } + + + #login_window { + .menu { border-radius: 1px; } + + GtkComboBox .button { + &, &:hover, &:active, &:active:hover, + &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { + padding: 0; + background: none; + border-style: none; + box-shadow: none; + } + } + + .entry { + padding: 3px 5px; + border-width: 1px; + border-style: solid; + border-color: shade($lightdm_bg_color, .8); + border-radius: $roundness; + background-color: shade($lightdm_bg_color, .9); + background-image: none; + color: $lightdm_fg_color; + box-shadow: none; + transition: all 150ms ease-out; + + &:focus, &:hover { + border-color: shade($lightdm_bg_color, .7); + + box-shadow: inset 1px 0 alpha($dark_shadow, .1), + inset 0 1px alpha($dark_shadow, .12), + inset -1px 0 alpha($dark_shadow, .1), + inset 0 -1px alpha($dark_shadow, .05); + } + } + } + + #user_combobox { + color: $lightdm_fg_color; + font: 18px; + + .menu { font: normal; } + + .arrow { color: mix($lightdm_fg_color, $lightdm_bg_color, .5); } + } + + #user_image { + padding: 3px; + border-radius: $roundness; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 shade($lightdm_bg_color, .7), + inset -1px 0 shade($lightdm_bg_color, .7), + inset 0 1px shade($lightdm_bg_color, .7), + inset 0 -1px shade($lightdm_bg_color, .7); + } + + #user_image_border { + border-radius: $roundness; + background-color: shade($lightdm_bg_color, .9); + background-image: none; + box-shadow: inset 1px 0 alpha($dark_shadow, .07), + inset 0 1px alpha($dark_shadow, .08), + inset -1px 0 alpha($dark_shadow, .07), + inset 0 -1px alpha($dark_shadow, .05); + } + + #buttonbox_frame { + padding-top: 10px; + padding-bottom: 0; + border-style: none; + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + background-color: transparent; + background-image: none; + box-shadow: none; + } + + + + /* shutdown button */ + #shutdown_button { + border-color: shade($error_bg_color, .8); + background-color: shade($error_bg_color, 1.08); + background-image: none; + color: $error_fg_color; + + &:hover, &:active, &:active:hover { + border-color: shade($error_bg_color, .7); + background-color: $error_bg_color; + } + } + + /* restart button */ + #restart_button { + border-color: shade($warning_bg_color, .8); + background-color: shade($warning_bg_color, 1.08); + background-image: none; + color: $warning_fg_color; + + &:hover, &:active, &:active:hover { + border-color: shade($warning_bg_color, .7); + background-color: $warning_bg_color; + } + } + + /* password warning */ + #greeter_infobar { font: bold; } +} diff --git a/gtk-3.20/scss/apps/_nautilus.scss b/gtk-3.20/scss/apps/_nautilus.scss new file mode 100644 index 0000000..469cca1 --- /dev/null +++ b/gtk-3.20/scss/apps/_nautilus.scss @@ -0,0 +1,70 @@ +/************ + ! Nautilus * +*************/ + +@include exports("nautilus") { + .nautilus-desktop * { + color: $white; + text-shadow: 1px 1px $black; + + &:active { color: $fg_color; } + + &:selected { color: $selected_fg_color; } + + &:active, &:hover, &:selected { text-shadow: none; } + } + + .nautilus-window { + toolbar { + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($toolbar_bg_color); + } + + .sidebar { + border: none; + frame { border: 0; } + } + + paned { + border-width: 0 1px 0 0; + border-style: solid; + + &, &:hover { + border-color: shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + notebook { + border: none; + frame { border: 0; } + } + } + + NautilusQueryEditor { + toolbar { + padding-top: $spacing - 1px; + padding-bottom: $spacing - 2px; + border-width: 1px 0 0; + border-style: solid; + border-color: $toolbar_bg_color; + background-color: shade($toolbar_bg_color, .9); + + &:nth-child(2) { border-color: border_normal($toolbar_bg_color); } + + &.search-bar { + border-top-width: 0; + border-bottom-width: 0; + } + + &, &.search-bar { + &:last-child, &:only-child { + border-bottom-width: 1px; + border-bottom-color: border_normal($toolbar_bg_color); + } + } + + } + } +} diff --git a/gtk-3.20/scss/apps/_nemo.scss b/gtk-3.20/scss/apps/_nemo.scss new file mode 100644 index 0000000..302f0ce --- /dev/null +++ b/gtk-3.20/scss/apps/_nemo.scss @@ -0,0 +1,153 @@ +/******** + ! Nemo * +*********/ + +@include exports("nemo") { + .nemo-desktop, .nemo-desktop * { + color: $white; + text-shadow: 1px 1px $black; + background: transparent; + border: none; + + &:active { + color: $fg_color; + } + + &:selected { + color: $selected_fg_color; + } + + &:active, &:hover, &:selected { + text-shadow: none; + } + } + + .nemo-pathbar { + @include button($toolbar_bg_color, $toolbar_fg_color); + -NemoPathbarButton-border-radius: $roundness; + } + + .nemo-window { + toolbar { + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($toolbar_bg_color); + } + + > grid widget:last-child { + border-top-style: solid; + border-top-color: border_normal($toolbar_bg_color); + border-top-width: 1px; + } + + menubar menuitem { + margin: 0px; + } + + .sidebar .view { + -NemoPlacesTreeView-disk-full-bg-color: shade($toolbar_bg_color, .8); + -NemoPlacesTreeView-disk-full-fg-color: $selected_bg_color; + -NemoPlacesTreeView-disk-full-bar-width: 2px; + -NemoPlacesTreeView-disk-full-bar-radius: 1px; + -NemoPlacesTreeView-disk-full-bottom-padding: 0px; + -NemoPlacesTreeView-disk-full-max-length: 75px; + + &:selected { + -NemoPlacesTreeView-disk-full-bg-color: $selected_fg_color; + -NemoPlacesTreeView-disk-full-fg-color: shade($selected_bg_color, 1.2); + } + } + + .sidebar frame { + border: 0; + } + + statusbar { + border: none; + } + + .sidebar image { + padding-left: $spacing; + padding-right: $spacing; + } + + paned { + border-width: 0 1px 0 0; + border-style: solid; + + &, &:hover { + border-color: shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + notebook { + border-width: 0; + + tabs { + border: 0; + } + } + + toolbar { + button { + @include button($bg_color, $fg_color); + } + + button.linked, .linked .button { + @include linked_button($bg_color); + } + + combobox button { + padding: $spacing - 1px; + + &.text-button { + padding: $spacing; + } + + &.image-button { + padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; + } + } + + separator, separator:disabled { + color: shade($bg_color, ($contrast + .1)); + border-color: currentColor; + -GtkWidget-window-dragging: true; + } + + &.primary-toolbar button { + padding: 5px 8px; + } + } + } + + NemoQueryEditor { + toolbar { + padding-top: $spacing - 3px; + padding-bottom: $spacing - 4px; + border-width: 1px 0 0; + border-style: solid; + border-color: $toolbar_bg_color; + background-color: shade($toolbar_bg_color, .9); + + &:nth-child(2) { + border-color: border_normal($toolbar_bg_color); + } + + &.search-bar { + border-top-width: 0; + border-bottom-width: 0; + } + + &, &.search-bar { + &:last-child, &:only-child { + border-bottom-width: 1px; + border-bottom-color: border_normal($toolbar_bg_color); + } + } + + } + } + +} diff --git a/gtk-3.20/scss/apps/_panel.scss b/gtk-3.20/scss/apps/_panel.scss new file mode 100644 index 0000000..56a8774 --- /dev/null +++ b/gtk-3.20/scss/apps/_panel.scss @@ -0,0 +1,80 @@ +/*********************** + ! Fallback mode panel * +************************/ + +@include exports("panel") { + %panel { + @include linear-gradient($panel_bg_color); + + color: $panel_fg_color; + } + + %panelbutton { + border-width: 0 1px; + border-radius: 0; + border-color: transparent; + background-color: transparent; + background-image: none; + color: $panel_fg_color; + + &:hover, &:hover { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .11)); + + border-color: mix($panel_bg_color, $panel_fg_color, .11); + color: shade($panel_fg_color, 1.08); + } + + &:active, &:checked { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .21), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, .21); + color: shade($panel_fg_color, 1.08); + + &:hover { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .31), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, .31); + } + } + } + + PanelWidget, PanelApplet, PanelToplevel { + @extend %panel; + + padding: 0; + } + + PanelApplet { + border: 0; + + .button { + @extend %panelbutton; + + -GtkButton-inner-border: 2; + } + } + + PanelSeparator { + @extend %panel; + + border: 0; + } + + PanelApplet > GtkMenuBar.menubar, PanelMenuBar.menubar, .gnome-panel-menu-bar { + &.menuitem { + @extend %panel; + + border: 0; + + -PanelMenuBar-icon-visible: true; + } + } + + PanelAppletFrame { + @extend %panel; + + border: 0; + } + + WnckPager, WnckTasklist { @extend %panel; } +} diff --git a/gtk-3.20/scss/apps/_synaptic.scss b/gtk-3.20/scss/apps/_synaptic.scss new file mode 100644 index 0000000..c19b78e --- /dev/null +++ b/gtk-3.20/scss/apps/_synaptic.scss @@ -0,0 +1,15 @@ +/************ + ! Synaptic * +*************/ + +@include exports("synaptic") { + GtkWindow > GtkVBox > .dock { + &, > GtkHBox > GtkToolbar { + @include linear-gradient($toolbar-bg-color); + + padding: $spacing; + border: 0; + color: $toolbar_fg_color; + } + } +} diff --git a/gtk-3.20/scss/apps/_unity-greeter.scss b/gtk-3.20/scss/apps/_unity-greeter.scss new file mode 100644 index 0000000..e7b07f3 --- /dev/null +++ b/gtk-3.20/scss/apps/_unity-greeter.scss @@ -0,0 +1,116 @@ +/*********************** + ! Unity Greeter * + ***********************/ + +@include exports("unity-greeter") { + + + .lightdm.menu { + background-image: none; + background-color: fade-out($black, .4); + border-color: fade-out($white, .8); + border-radius: 4px; + padding: 1px; + + color: $white; + } + + .lightdm-combo .menu { + background-color: shade($dark_bg_color, 1.08); + border-radius: 0; + padding: 0; + color: $white; + } + + .lightdm.menu .menuitem *, + .lightdm.menu .menuitem.check:active, + .lightdm.menu .menuitem.radio:active { + color: $white; + } + + .lightdm.menubar *, + .lightdm.menubar .menuitem { + padding: 2px; + } + + .lightdm-combo.combobox-entry .button, + .lightdm-combo .cell, + .lightdm-combo .button, + .lightdm-combo .entry, + + .lightdm.button{ + background-image: none; + background-color: fade-out($black, .7); + border-color: fade-out($white, .1); + border-radius: 5px; + padding: 5px; + color: $white; + } + .lightdm.button:hover { + background-image: none; + background-color: fade-out($white, .7); + border-color: fade-out($white, .4); + border-radius: 5px; + padding: 5px; + color: $white; + text-shadow: none; + } + .lightdm.button:active, + .lightdm.button:active:focus, + .lightdm.button:focus, + + .lightdm.entry { + background-image: none; + background-color: fade-out($black, .7); + border-color: fade-out($white, .4); + border-radius: 5px; + padding: 7px; + color: $white; + text-shadow: none; + } + .lightdm.entry:hover, + .lightdm.entry:active, + .lightdm.entry:active:focus { + background-image: none; + border-image: none; + } + .lightdm.entry:focus { + border-color: fade-out($white, .4); + border-width: 1px; + border-style: solid; + color: $white; + } + .lightdm.entry:selected { + background-color: fade-out($white, .8); + } + + @keyframes dashentry_spinner { + to { -gtk-icon-transform: rotate(1turn); } + } + + .lightdm.entry:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: dashentry_spinner 1s infinite linear; + } + + .lightdm.option-button { + padding: 5px; + background: none; + border: 0; + } + + .lightdm.toggle-button { + background: none; + border-width: 0; + } + .lightdm.toggle-button.selected:hover { + background-color: fade-out($white, .7); + border-color: fade-out($white, .7); + border-width: 1px; + } + .lightdm.toggle-button.selected { + background-color: fade-out($black, .7); + border-color: fade-out($white, .7); + border-width: 1px; + } +} diff --git a/gtk-3.20/scss/apps/_unity.scss b/gtk-3.20/scss/apps/_unity.scss new file mode 100644 index 0000000..e463223 --- /dev/null +++ b/gtk-3.20/scss/apps/_unity.scss @@ -0,0 +1,70 @@ +@import "panel"; + +/**************** + ! Unity styles * +*****************/ + +@include exports("unity") { + UnityDecoration { + -UnityDecoration-extents: 28px 1px 1px 1px; + -UnityDecoration-input-extents: 10px; + + -UnityDecoration-shadow-offset-x: 1px; + -UnityDecoration-shadow-offset-y: 1px; + -UnityDecoration-active-shadow-color: rgba(0, 0, 0, .7); + -UnityDecoration-active-shadow-radius: 8px; + -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, .5); + -UnityDecoration-inactive-shadow-radius: 5px; + + -UnityDecoration-glow-size: 10px; + -UnityDecoration-glow-color: $selected_bg_color; + + -UnityDecoration-title-indent: 10px; + -UnityDecoration-title-fade: 35px; + -UnityDecoration-title-alignment: 0; + + + &.top { + border: 1px solid $wm_border_focused; + border-bottom: 0; + border-radius: 2px 2px 0 0; + padding: 1px ($spacing * 2) 0; + background-color: $titlebar_bg_color; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + text-shadow: none; + + &:backdrop { + border: 1px solid $wm_border_unfocused; + color: mix($titlebar_fg_color, $titlebar_bg_color, .4); + } + } + + &.left, &.right, &.bottom { + background-color: $wm_border_focused; + + &:backdrop { background-color: $wm_border_unfocused; } + } + } + + UnityPanelWidget, .unity-panel { + @extend %panel; + + border: 0; + } + + .unity-panel { + &.menuitem, .menuitem { + border-width: 0 1px; + color: $panel_fg_color; + + &:hover, *:hover { + border-color: mix($panel_bg_color, $panel_fg_color, .21); + background-color: mix($panel_bg_color, $panel_fg_color, .21); + background-image: none; + color: shade($panel_fg_color, 1.08); + } + } + } + + SheetStyleDialog.unity-force-quit { background-color: $bg_color; } +} diff --git a/gtk-3.20/scss/apps/_xfce.scss b/gtk-3.20/scss/apps/_xfce.scss new file mode 100644 index 0000000..c78be0a --- /dev/null +++ b/gtk-3.20/scss/apps/_xfce.scss @@ -0,0 +1,26 @@ +@import "panel"; + +/*************** + ! Xfce styles * +****************/ + +@include exports("xfce") { + XfceHeading { + margin: 0; + padding: 0; + border: 0; + background-image: none; + background-color: $base_color; + color: $text_color; + } + + .xfce4-panel { + @extend %panel; + + font: normal; + + .button { @extend %panelbutton; } + + .menu { -gtk-icon-effect: none; } + } +} diff --git a/gtk-3.20/scss/gtk-dark.scss b/gtk-3.20/scss/gtk-dark.scss new file mode 100644 index 0000000..fd46aa1 --- /dev/null +++ b/gtk-3.20/scss/gtk-dark.scss @@ -0,0 +1,3 @@ +$variant: "dark"; + +@import "widgets"; diff --git a/gtk-3.20/scss/gtk.scss b/gtk-3.20/scss/gtk.scss new file mode 100644 index 0000000..4455669 --- /dev/null +++ b/gtk-3.20/scss/gtk.scss @@ -0,0 +1,3 @@ +$variant: "light"; + +@import "widgets"; diff --git a/gtk-3.20/scss/widgets/_actionbar.scss b/gtk-3.20/scss/widgets/_actionbar.scss new file mode 100644 index 0000000..1e27f91 --- /dev/null +++ b/gtk-3.20/scss/widgets/_actionbar.scss @@ -0,0 +1,113 @@ +@import "button"; +@import "toolbar"; + +/************** + ! Action-bar * +***************/ + +@include exports("actionbar") { + actionbar { + @include linear-gradient($bg_color); + + padding: $spacing; + border-width: 1px 0 0; + border-style: solid; + border-color: border_normal($bg_color); + color: $fg_color; + + .button { + &.text-button { padding: $spacing - 1px; } + + &.image-button { padding: $spacing + 1px; } + } + + .title { + font: bold; + padding: 0 ($spacing * 2); + } + + .subtitle { + font: smaller; + padding: 0 ($spacing * 2); + } + + > revealer > box { + padding: 6px; + border-top: 1px solid $borders_color; + + &:backdrop { border-color: $backdrop_borders_color; } + } + } +} + + +/*************** + ! Search bars * +****************/ + +@include exports("searchbar") { + .search-bar { + @include linear-gradient(shade($bg_color, .98)); + + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($bg_color); + color: $fg_color; + + .button.close-button { padding: $spacing; } + } +} + + +/****************** + ! Action buttons * +*******************/ + +@include exports("actionbuttons") { + $types: ( + suggested: $success_color, + destructive: $error-color + ); + + @each $type, $color in $types { + .#{$type}-action.button { + @include button($color, $selected_fg_color); + } + } +} + + +/****************** +* selection mode * +******************/ + +@include exports("selectionmode") { + .selection-mode { + &.header-bar, &.toolbar { + @include toolbar($selected_bg_color, $selected_fg_color); + + .button { + @include button($selected_bg_color, $selected_fg_color); + + &.suggested-action { @extend .suggested-action.button; } + } + + .selection-menu.button { + border: 0; + background-color: transparent; + background-image: none; + color: shade($selected_bg_color, $contrast); + + &:hover { color: shade($selected_bg_color, ($contrast - .1)); } + + &:active { color: shade($selected_bg_color, ($contrast - .05)); } + } + + .dim-label { + &, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); } + } + } + + &.toolbar { padding: $spacing; } + } +} diff --git a/gtk-3.20/scss/widgets/_base.scss b/gtk-3.20/scss/widgets/_base.scss new file mode 100755 index 0000000..bdb96f8 --- /dev/null +++ b/gtk-3.20/scss/widgets/_base.scss @@ -0,0 +1,137 @@ +/************** + ! GTK settings +***************/ + +* { + -GtkStatusbar-shadow-type: none; + -GtkWindow-resize-grip-height: 0; + -GtkWindow-resize-grip-width: 0; + -WnckTasklist-fade-overlay-rect: 0; + + outline-color: alpha($selected_bg_color, .5); + outline-style: dashed; + outline-width: 1px; + outline-offset: -1px; + -gtk-outline-radius: $roundness; +} + + +/************* + ! Base states + *************/ + +%selected { + &, &:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +* { + /* hyperlinks */ + -GtkIMHtml-hyperlink-color: $link_color; + + &:selected { @extend %selected; } + + &:disabled, + &:disabled:disabled { color: mix($fg_color, $bg_color, .5); } + + &:disabled, &:disabled { -gtk-icon-effect: dim; } + + &:hover { -gtk-icon-effect: highlight; } + + &:link, &:visited { color: $link_color; } +} + +.background { + background-color: $bg_color; + color: $fg_color; + + &:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; + } + + &.csd { background-color: $bg_color; } +} + +.gtkstyle-fallback { + background-color: alpha($bg_color, .5); + color: $fg_color; + + &:hover { + background-color: shade($bg_color, 1.1); + color: $fg_color; + } + + &:active { + background-color: shade($bg_color, .9); + color: $fg_color; + } + + &:disabled { + background-color: shade(shade($bg_color, .95), 1.05); + color: mix($fg_color, $bg_color, .5); + } + + &:selected { @extend %selected; } +} + +image, label, box, grid { + &, &:disabled { background-color: transparent; } +} + +label { + &.separator { + @extend .dim-label; + + color: $fg_color; + + &:backdrop { color: $backdrop_fg_color; } + } + + row:selected &, + &:selected { @extend %nobg_selected_items; } + + selection { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + + selection { @extend %selected_items:disabled; } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &:backdrop { + color: $backdrop_fg_color; + + selection { @extend %selected_items:backdrop; } + } +} + +.dim-label { + opacity: 0.55; + text-shadow: none; +} + +assistant { + .sidebar { + background-color: $base_color; + border-top: 1px solid $borders_color; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + } + + &.csd .sidebar { border-top-style: none; } + + .sidebar label { padding: 6px 12px; } + + .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } +} diff --git a/gtk-3.20/scss/widgets/_button.scss b/gtk-3.20/scss/widgets/_button.scss new file mode 100755 index 0000000..73efcd4 --- /dev/null +++ b/gtk-3.20/scss/widgets/_button.scss @@ -0,0 +1,320 @@ +/********* + ! Buttons +**********/ + +@include exports("button_extends") { + %button { + padding: $spacing ($spacing + 2px); + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: 150ms ease; + outline-color: transparent; + } + + %linked_middle { + border-radius: 0; + border-left-style: none; + border-right-style: solid; + + &:dir(rtl) { + border-radius: 0; // needed when including %linked_middle:dir(rtl) + border-right-style: none; + border-left-style: solid; + } + } + + %linked_button { + border-width: 1px; + border-style: solid; + border-radius: 0; + border-right-style: none; + border-left-style: none; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: solid; + border-right-style: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-left-style: none; + border-right-style: solid; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: none; + border-right-style: solid; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:dir(rtl) { + border-left-style: solid; + border-right-style: none; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + border-style: solid; + border-radius: $roundness; + } + } +} + +@mixin linked_button($bg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + @extend %linked_button; + box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &:focus, &:hover { + box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { + box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)), + inset 0 1px alpha($dark_shadow, .07), + inset 0 -1px alpha($dark_shadow, .05); + } + + &:disabled { box-shadow: inset -1px 0 shade($bg, .8); } + + &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } + + &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } + + &:disabled:last-child, &:disabled:only-child, + &:active:disabled:last-child, &:active:disabled:only-child, + &:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; } + + &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, + &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus { + box-shadow: inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } + + &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, + &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } +} + +@mixin button($bg, $fg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + $button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg); + @extend %button; + @include linear-gradient($button_bg); + @include border(rgba(0, 0, 0, .12 + $border_strength)); + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &.flat { + border-color: alpha($button_bg, 0); + background-color: alpha($button_bg, 0); + background-image: none; + box-shadow: none; + } + + &, &.flat { + &:focus, &:hover { + @include linear-gradient(shade($button_bg, 1.2)); + @include border(rgba(0, 0, 0, .2 + $border_strength)); + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:checked { + @include linear-gradient(shade($button_bg, .7), to top); + color: $white; + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06), + inset 0 -1px alpha($dark_shadow, .05); + + &:focus, &:hover { + @include linear-gradient(shade($button_bg, .65), to top); + color: $white; + } + } + + &:focus, &:hover { color: $fg; } + + &:active:disabled, &:checked:disabled { + @include linear-gradient(shade($button_bg, .9)); + color: $fg; + box-shadow: none; + } + + &:disabled:disabled { + @if (lightness($button_bg) > 50) { + @include linear-gradient(shade($button_bg, .95)); + } @else { + @include linear-gradient(alpha($button_bg, .3)); + } + + color: mix($bg, $fg, .5); + box-shadow: none; + } + } + + &.separator, .separator { + border: 1px solid currentColor; + color: shade($bg, ($contrast + .1)); + + &:disabled { color: shade($button_bg, .85); } + } +} + +@include exports("button") { + + %close_button { + border: 1px solid transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + + &:focus, &:hover { + border: 1px solid alpha($black, .3); + background-color: alpha($white, .2); + background-image: none; + box-shadow: none; + } + + &:active, &:checked, &:active:hover, &:checked:hover { + border: 1px solid alpha($black, .3); + background-color: alpha($black, .1); + background-image: none; + box-shadow: none; + } + } + + button { + min-height: 22px; + min-width: 24px; + @include button(shade($bg_color, 1.2), $fg_color); + + &.link, .link & { @include linked_button(shade($bg_color, 1.2)); } + + spinbutton & { + color: mix($text_color, $base_color, .4); + padding: $spacing ($spacing * 2); + border: 0; + border-radius: 0; + border-style: none; + background-color: transparent; + background-image: none; + box-shadow: inset 1px 0 shade($base_color, .9); + + &:disabled { + color: mix($text_color, $base_color, .7); + box-shadow: inset 1px 0 shade($base_color, .85); + } + + &:active, &:checked, &:hover { color: $text_color; } + + &:first-child { + border-radius: $roundness 0 0 $roundness; + box-shadow: none; + } + + &:last-child { border-radius: 0 $roundness $roundness 0; } + + &:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); } + } + + spinbutton.vertical & { + border: 1px solid shade($bg_color, .8); + border-radius: $roundness; + background-color: shade($bg_color, 1.08); + background-image: none; + color: $fg_color; + box-shadow: none; + + &:hover { + border-color: shade($bg_color, .7); + background-color: shade($bg_color, 1.1); + background-image: none; + } + + &:active, &:checked { + border-color: shade($bg_color, .8); + background-color: shade($bg_color, .95); + background-image: none; + } + + &:active:hover, &:checked:hover { + border-color: shade($bg_color, .7); + } + + &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); } + + &:disabled { + border-color: shade($bg_color, .85); + background-color: shade($bg_color, .9); + background-image: none; + } + + &:first-child { + border-width: 1px; + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &:last-child { + border-width: 1px; + border-top-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + spinbutton.vertical entry { + border-width: 1px; + border-style: solid; + border-radius: 0; + } + + } +} + +/****************** +! ComboBoxes * +*******************/ + +@include exports("combobox") { + combobox { + box button, box entry { + @extend %linked_button; + padding: ($spacing - 2px) ($spacing + 1px); + } + + box > button { + // the combo is a composite widget so the way we do button linked doesn't + // work, special case needed. See + // https://bugzilla.gnome.org/show_bug.cgi?id=733979 + &:dir(ltr) { @extend %linked_middle; } + // specificity bump + &:dir(rtl) { @extend %linked_middle:dir(rtl); } + } + + &:first-child > button { @extend %linked_button:first-child; } + + &:last-child > button { @extend %linked_button:last-child; } + + &:only-child > button { @extend %linked_button:only-child; } + } +} diff --git a/gtk-3.20/scss/widgets/_calendar.scss b/gtk-3.20/scss/widgets/_calendar.scss new file mode 100644 index 0000000..5e5f990 --- /dev/null +++ b/gtk-3.20/scss/widgets/_calendar.scss @@ -0,0 +1,29 @@ +/********** + ! Calendar +***********/ + +@include exports("calendar") { + calendar { + padding: $spacing; + outline-offset: -1px; + + &:indeterminate { color: mix($fg_color, $bg_color, .5); } + + &.view, &.highlight, &.header, &.button { + &, &:focus, &:hover, &:disabled { + border: 0; + background-color: transparent; + background-image: none; + } + } + + &.highlight { color: $selected_bg_color; } + } + + /* gnome-calendar */ + .calendar-view { + background-color: $base_color; + color: $text_color; + } +} + diff --git a/gtk-3.20/scss/widgets/_choosers.scss b/gtk-3.20/scss/widgets/_choosers.scss new file mode 100644 index 0000000..13d1856 --- /dev/null +++ b/gtk-3.20/scss/widgets/_choosers.scss @@ -0,0 +1,124 @@ +/*************** + ! Color chooser +****************/ + +@include exports("colorchooser") { + colorswatch { + &, &:selected { + border: 1px solid alpha($black, .1); + border-radius: $roundness - 1px; + background-color: transparent; + background-clip: border-box; + + &:hover { border-color: alpha($black, .3); } + } + + &.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; } + + &.left, &:first-child { + border-top-left-radius: $roundness; + border-bottom-left-radius: $roundness; + } + + &.right, &:last-child { + border-top-right-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &:only-child { border-radius: $roundness; } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + coloreditor & { + border-radius: $roundness; + + &.color-dark:hover, &.color-light:hover { + background-image: none; + border-color: alpha($black, .3); + } + } + } + + GtkColorChooserWidget #add-color-button { + background-clip: padding-box; + border-color: alpha($black, .1); + background-color: shade($bg_color, .95); + color: $fg_color; + + &:hover { + border-color: alpha($black, .3); + background-color: shade($bg_color, .9); + color: $fg_color; + } + } + + .color-active-badge { + &, &:selected { + border-width: 2px; + border-style: solid; + background-color: transparent; + } + + &.color-light { + &, &:hover { + border-color: alpha($black, .3); + color: alpha($black, .3); + } + } + + &.color-dark { + &, &:hover { + border-color: alpha($white, .3); + color: alpha($white, .3); + } + } + } + + GtkColorButton.button { padding: $spacing; } +} + + +/*********************** +! Font and file choosers +************************/ + +@include exports("miscchoosers") { + GtkFontButton, filechooserbutton { + .separator { + /* always disable separators */ + -GtkWidget-horizontal-separator: 0; + -GtkWidget-vertical-separator: 0; + } + + label:last-child { color: alpha(currentColor, .7); } + + image:last-child { color: alpha(currentColor, .7); } + } + + filechooser { + .pane-separator { + &, &:hover { + border-width: 0 1px 0 0; + border-style: solid; + border-color: currentColor; + background-color: $bg_color; + color: shade($bg_color, ($contrast + .1)); + } + } + + /* for fallback when header bar not used */ + .dialog-action-box { + border-width: 1px 0 0; + border-style: solid; + border-color: shade($bg_color, .7); + } + } +} diff --git a/gtk-3.20/scss/widgets/_entry.scss b/gtk-3.20/scss/widgets/_entry.scss new file mode 100755 index 0000000..af42fed --- /dev/null +++ b/gtk-3.20/scss/widgets/_entry.scss @@ -0,0 +1,84 @@ +/********* + ! Entry * +**********/ + +%linked_entry { + border-width: 1px; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-right-width: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &:only-child { + border-width: 1px; + border-radius: $roundness; + } +} + +%entry { + padding: ($spacing - 1px) $spacing; + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: border 150ms ease; + box-shadow: inset 1px 1px alpha($dark_shadow, .06), + inset -1px 0 alpha($dark_shadow, .06); + + &:focus, &:hover, &:active { transition: none; } + + &:selected, &:selected:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:disabled { box-shadow: none; } + + & progressbar { + @include linear-gradient($selected_bg_color); + + border-width: 0; + border-radius: $roundness; + color: $selected_fg_color; + } + + &.image.left { padding-right: $spacing; } +} + +@mixin entry($bg, $fg) { + @extend %entry; + @include linear-gradient($bg, to top); + @include border($bg); + + color: $fg; + + &:focus, &:active { border-color: $selected_bg_color; } + + &:disabled { + @include linear-gradient(shade($bg, .9), to top); + + color: mix($bg, $fg, .5); + } +} + +@include exports("entry") { + entry { + @include entry($base_color, $text_color); + + &.linked, .linked & { @extend %linked_entry; } + } +} diff --git a/gtk-3.20/scss/widgets/_grid.scss b/gtk-3.20/scss/widgets/_grid.scss new file mode 100644 index 0000000..3b84110 --- /dev/null +++ b/gtk-3.20/scss/widgets/_grid.scss @@ -0,0 +1,48 @@ +/****************** + ! Grid and flowbox +*******************/ + +@include exports("grid") { + list { + background-color: shade($bg_color, .97); + color: $fg_color; + + row { + &, &.button { + border: 0; + border-radius: 0; + padding: $spacing; + background-image: none; + background-color: alpha($bg_color, 0); + box-shadow: none; + + &:hover { + background-image: none; + background-color: shade($bg_color, 1.02); + } + + &:selected { + &, &:hover, &:focus { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + } + } + + .grid-child { + &, flowBox & { + padding: $spacing; + border-radius: $roundness; + + &:selected { + @extend %selected; + + outline-offset: -2px; + } + } + } +} + diff --git a/gtk-3.20/scss/widgets/_infobar.scss b/gtk-3.20/scss/widgets/_infobar.scss new file mode 100644 index 0000000..9ba0df2 --- /dev/null +++ b/gtk-3.20/scss/widgets/_infobar.scss @@ -0,0 +1,38 @@ +@import "button"; + + +/********* + ! Infobar +**********/ + +@include exports("infobar") { + infobar { + border: 0; + + $types: ( + info: ($info_fg_color, $info_bg_color), + warning: ($warning_fg_color, $warning_bg_color), + question: ($question_fg_color, $question_bg_color), + error: ($error_fg_color, $error_bg_color), + ); + + + @each $type, $colors in $types { + $fg_color: nth($colors, 1); + $bg_color: nth($colors, 2); + + &.#{$type} { + @include linear-gradient($bg_color); + + border: 1px solid shade($bg_color, .8); + color: $fg_color; + + button { + @include button($bg_color, $fg_color); + + &.close { @extend %close_button; } + } + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_menu.scss b/gtk-3.20/scss/widgets/_menu.scss new file mode 100755 index 0000000..5c58439 --- /dev/null +++ b/gtk-3.20/scss/widgets/_menu.scss @@ -0,0 +1,273 @@ +@import "entry"; + + +/********* + ! Menubar +**********/ + +@include exports("menubar") { + .menubar, menubar { + -GtkWidget-window-dragging: true; + + border: 0; + background-color: $menubar_bg_color; + background-image: none; + color: $menubar_fg_color; + + + &.menuitem, .menuitem, menuitem { + padding: $spacing ($spacing * 2); + border: 1px solid transparent; + background-color: transparent; + background-image: none; + color: $menu_fg_color; + + &:hover { + border-color: mix($menu_bg_color, $menu_fg_color, .21); + background-color: mix($menu_bg_color, $menu_fg_color, .21); + background-image: none; + color: shade($menu_fg_color, 1.08); + } + + *:hover { color: shade($menu_fg_color, 1.08); } + } + } +} + + +/****** + ! Menu +*******/ + +@include exports("menu") { + * { + padding: 0; + } + + combobox { + &.menu, .menu, menu { + background-color: $menu_bg_color; + margin: $spacing; + } + } + + #toolbar-popup, menu { + padding: 0; + border-radius: 0; + border: 0; + background-color: $menu_bg_color; + color: $menu_fg_color; + + &:checked { background-color: $selected_bg_color; } + + button { + &, &:hover, &:active, &:active *:disabled, &:disabled { + border-width: 0; + background-color: transparent; + background-image: none; + } + } + } + + menuitem window decoration { + box-shadow: 0 2px 3px rgba(0,0,0,.2); + } + + .context-menu { font: initial; } + + .menuitem, menuitem { + &, menu & { + margin: $spacing; + padding: $spacing 8px; + border: 0; + border-radius: 0; + background-color: transparent; + background-image: none; + + -GtkMenuItem-arrow-scaling: .5; + + menu &:last-child { + padding-bottom: 8px; + } + menu &:first-child { + padding-top: 8px; + } + + &:active, &:hover { + border: 0; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + + *:active, *:hover { color: $selected_fg_color; } + + &:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); } + } + + &.check, &.radio { + &, &:focus, &:hover, &:disabled { background-image: none; } + + &, &:focus, &:hover, &:active, &:disabled { + border-style: none; + background-color: transparent; + } + } + + &.separator { + padding: 0; + + border-style: none; + color: shade($menu_bg_color, ($contrast + .1)); + } + + &.button, &.button.flat { + &, &:focus, &:active, &:disabled, &:active:disabled { + background-color: transparent; + background-image: none; + border: 0; + box-shadow: none; + color: currentColor; + } + + &:hover, &:focus:hover, &:active:hover, &:selected { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + calendar { + &:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); } + + .button { + border-style: none; + background-color: transparent; + background-image: none; + } + } + + .accelerator { + color: alpha($menu_fg_color, .6); + + &:hover { color: alpha($selected_fg_color, .8); } + + &:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); } + } + + entry { @include entry($menu_bg_color, $menu_fg_color); } + } +} + +%undecorated_button { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; +} + + +/********* + ! Popover +**********/ + +@include exports("popover") { + popover { + @include border($menu_bg_color); + margin: 10px; + padding: $spacing; + border-radius: $roundness; + border-width: 1px; + border-style: solid; + background-clip: border-box; + background-color: $menu_bg_color; + background-image: none; + color: $menu_fg_color; + box-shadow: 0 3px 6px alpha($black, .16); + + &.background { + background-image: none; + background-color: $menu_bg_color; + color: $menu_fg_color; + } + + &:backdrop { box-shadow: none; } + + .osd & { + box-shadow: 0 2px 7px 3px alpha($black, .5); + + > toolbar button { + border-radius: 0; + border-width: 0; + background-color: transparent; + background-image: none; + } + } + + view, .view, list { + background-color: transparent; + background-image: none; + color: $menu_fg_color; + } + + .list-row, list row { + &, & .button { + background-color: transparent; + background-image: none; + color: $menu_fg_color; + + &:focus, &:hover, &:active { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + + frame { + border-color: border_normal($menu_bg_color); + border-radius: $roundness; + } + + entry { @include entry($menu_bg_color, $menu_fg_color); } + + button { @include button($menu_bg_color, $menu_fg_color); } + + > list, > view, > toolbar { background-color: transparent; } + + separator { + border: 0; + background-color: transparent; + color: alpha($menu_bg_color, .5); + font-size: 80%; + font-weight: bold; + } + } + + modelbutton { + padding: $spacing ($spacing + 2px); + border: none; + transition: 150ms ease; + outline-color: transparent; + + &, &:backdrop, &.flat, &.flat:backdrop { + //@extend %undecorated_button; + + &:hover { background-color: $selected_bg_color; color: $selected_fg_color } + &:active, &:selected { &, arrow { @extend %selected_items; } } + &:checked { color: $fg_color; } + + // FIXME: temporary workaround + check:last-child, + radio:last-child { margin-left: 8px; } + + check:first-child, + radio:first-child { margin-right: 8px; } + + &.flat arrow { + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_misc.scss b/gtk-3.20/scss/widgets/_misc.scss new file mode 100644 index 0000000..19f74cd --- /dev/null +++ b/gtk-3.20/scss/widgets/_misc.scss @@ -0,0 +1,253 @@ +/*************** +! Dimmed label * +****************/ + +@include exports("dimlabel") { + .dim-label { + opacity: .5; + text-shadow: none; + } +} + + +/*********** + ! Tooltip * +************/ + +@include exports("tooltip") { + .tooltip { + &.background { + @include linear-gradient($tooltip_bg_color); + + border: 0; + border-radius: $roundness; + color: $tooltip_fg_color; + } + + * { + background-color: transparent; + color: inherit; + } + } +} + + +/*********** + ! Dialogs * +************/ + +@include exports("dialogs") { + messagedialog, .message-dialog, .prompt { + -GtkDialog-content-area-border: 0; + -GtkDialog-action-area-border: $spacing; + -GtkDialog-button-spacing: 0; + + margin: 0; + padding: 0; + } +} + + +/********************* + ! App notifications * +**********************/ + +@include exports("notifications") { + .app-notification { + &, &.frame { + border-style: solid; + border-color: border_normal($osd_bg); + border-width: 0 1px 1px; + border-radius: 0 0 $roundness $roundness; + padding: $spacing * 2; + background-color: $osd_bg; + background-image: none; + color: $osd_fg; + + .button { @include button($osd_bg, $osd_fg); } + } + } +} + + +/************* + ! Expanders * +**************/ + +@include exports("expander") { + expander { + padding: $spacing; + outline-offset: 1px; + min-width: 8px; + } + + .expander { + color: alpha(currentColor, .7); + border: alpha(currentColor, .7); + + &:hover { + color: alpha(currentColor, .8); + border-color: alpha(currentColor, .8); + } + + &:active { + color: alpha(currentColor, .9); + border-color: alpha(currentColor, .9); + } + } +} + + +/******************* + ! Symbolic images * +********************/ + +@include exports("symbolicimage") { + .image { + color: alpha(currentColor, .5); + + &:hover { color: alpha(currentColor, .9); } + + &:selected, &:selected:hover { color: $selected_fg_color; } + } +} + + +/**************** + ! Floating bar * +*****************/ + +@include exports("floatingbar") { + .floating-bar { + @include linear-gradient($bg_color); + + border: 1px solid border_normal($bg_color); + border-radius: $roundness; + color: $fg_color; + + &.top { + border-top-width: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + &.right { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.bottom { + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &.left { + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + .button { + + -GtkButton-inner-border: 0; + + border: 0; + background-color: transparent; + background-image: none; + } + } +} + + +/************************* + ! Touch text selections * +**************************/ + +@include exports("touchbubble") { + GtkBubbleWindow { + border-radius: $roundness; + background-clip: border-box; + + &.osd.background { background-color: $osd_bg; } + + .toolbar { background-color: transparent; } + } +} + +/*************** + ! Font-viewer * +****************/ + +@include exports("fontviewer") { + SushiFontWidget { + padding: $spacing ($spacing * 2); + } +} + + +/************* + ! Gucharmap * +**************/ + +@include exports("charmap") { + GucharmapChartable { + background-color: $base_color; + color: $text_color; + + &:focus, &:hover, &:active, &:selected { @extend %selected; } + } +} + + +/************* + ! Evolution * +**************/ + +@include exports("evolution") { + EPreviewPane .entry { + background-color: $base_color; + color: $text_color; + } +} + + +/******************* + ! Gnome Bluetooth * +********************/ + +@include exports("gnome-bluetooth") { + entry.entry.pin-entry { + font: regular 50; + padding-left: 25px; + padding-right: 25px; + } + + label.pin-label { font: regular 50; } +} + + +/******************* + ! Selected Items * +********************/ + +@include exports("selected_items") { + %selected_items { + background-color: $selected_bg_color; + + @at-root %nobg_selected_items, & { + color: $selected_fg_color; + + @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } + + &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } + + &:backdrop { + color: $backdrop_selected_fg_color; + + &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_notebook.scss b/gtk-3.20/scss/widgets/_notebook.scss new file mode 100644 index 0000000..9efb3b1 --- /dev/null +++ b/gtk-3.20/scss/widgets/_notebook.scss @@ -0,0 +1,125 @@ +@import "button"; + + +/********** + ! Notebook +***********/ + +@include exports("notebook") { + notebook { + padding: 0; + border-width: 1px 0 0; + border-style: solid; + border-color: border_normal($base_color); + border-radius: 0; + background-color: $base_color; + background-image: none; + background-clip: border-box; + color: $text_color; + + &.frame { border-width: 1px; } + + > header { + margin: 0; + border-width: 0; + background-color: shade($base_color, .9); + + &.frame { + border-color: border_normal($base_color); + + &.top { border-width: 1px 1px 0; } + + &.right { border-width: 1px 1px 1px 0; } + + &.bottom { border-width: 0 1px 1px; } + + &.left { border-width: 1px 0 1px 1px; } + } + + tabs arrow { + margin: 5px; + } + } + + viewport { + border-width: 0; + background-color: $base_color; + color: $text_color; + } + + tab { + padding: ($spacing + 1px) ($spacing * 2); + border: 1px solid transparent; + background-color: transparent; + background-image: none; + + &:hover { + background-color: shade($base_color, .95); + border-color: shade($base_color, .8); + } + + &:active { + background-color: $base_color; + background-image: none; + border-color: shade($base_color, .85); + } + + &.top { + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &.right { + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + + &.bottom { + border-top-width: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + &.left { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + label { color: mix($text_color, $base_color, .3); } + + /* close button styling */ + button { @extend %close_button; } + } + + .prelight-page { + &, label { color: mix($text_color, $base_color, .15); } + } + + .active-page { + &, label { color: $text_color; } + } + + .reorderable-page { + &:hover { + background-color: shade($base_color, .85); + border-left: 0; + border-right: 0; + /* using box shadows instead of borders due to slanted edges */ + box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03), + inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7); + } + + &:active { + background-color: shade($base_color, .9); + border-left: 0; + border-right: 0; + box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03), + inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75); + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_osd.scss b/gtk-3.20/scss/widgets/_osd.scss new file mode 100644 index 0000000..b4f4b4a --- /dev/null +++ b/gtk-3.20/scss/widgets/_osd.scss @@ -0,0 +1,131 @@ +@import "button"; + + +/******* + ! OSD * +********/ + +@include exports("osd") { + overlay.osd { background-color: transparent; } + + osd { + &.background { + background-color: alpha($osd_bg, .8); + color: $osd_fg; + } + + frame { + background-clip: border-box; + background-origin: border-box; + } + + button { @include button($osd_bg, $osd_fg); } + + + toolbar { + -GtkToolbar-button-relief: normal; + + padding: $spacing; + border: 1px solid border_normal($osd_bg); + border-radius: $roundness; + background-color: $osd_bg; + background-image: none; + color: $osd_fg; + + separator { color: shade($osd_bg, ($contrast + .1)); } + } + + /* used by gnome-settings-daemon's media-keys OSD */ + trough { background-color: shade($osd_bg, .8); } + + progressbar { background-color: $osd_fg; } + + scale { + slider { + @include linear-gradient(shade($osd_bg, 1.08)); + @include border($osd_bg); + + &:disabled { @include linear-gradient(shade($osd_bg, .9)); } + } + + trough { + border-color: shade($osd_bg, .8); + background-color: shade($osd_bg, 1.08); + background-image: none; + + &.highlight { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + background-image: none; + } + + &:disabled, &.highlight:disabled { + border-color: shade($osd_bg, .85); + background-color: shade($osd_bg, .9); + background-image: none; + } + } + } + + &.view, .view, view { background-color: $osd_bg; } + + scrollbar { + trough { background-color: $osd_bg; } + + slider { + border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .21); + border-radius: 0; + background-color: mix($osd_bg, $osd_fg, .21); + + &:hover { + border-color: mix(shade($osd_bg, .87), $osd_fg, .31); + background-color: mix($osd_bg, $osd_fg, .31); + } + + &:active { + border-color: shade($selected_bg_color, .9); + background-color: $selected_bg_color; + } + } + } + + iconview.cell { + &:selected, &:selected:focus { + background-color: transparent; + border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .21); + border-radius: $roundness; + outline-color: transparent; + } + } + + /* used by Documents */ + .page-thumbnail { + border: 1px solid shade($osd_bg, .9); + /* when there's no pixbuf yet */ + background-color: $osd_bg; + } + } + + .osd progressBar, progressBar.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 2px; + -GtkProgressBar-min-horizontal-bar-height: 2px; + + padding: 0; + + &.trough { + padding: 0; + border-style: none; + border-radius: 0; + background-image: none; + background-color: transparent; + } + + &.progressbar { + border-style: none; + border-radius: 0; + background-color: $selected_bg_color; + background-image: none; + } + } +} diff --git a/gtk-3.20/scss/widgets/_overshoot.scss b/gtk-3.20/scss/widgets/_overshoot.scss new file mode 100644 index 0000000..bc3d1fd --- /dev/null +++ b/gtk-3.20/scss/widgets/_overshoot.scss @@ -0,0 +1,119 @@ +@mixin overshoot($position, $type: normal, $color: $selected_bg_color) { + $_small_gradient_length: 5%; + $_big_gradient_length: 100%; + + $_position: center top; + $_small_gradient_size: 100% $_small_gradient_length; + $_big_gradient_size: 100% $_big_gradient_length; + + @if $position == bottom { + $_position: center bottom; + $_linear_gradient_direction: to top; + } @else if $position == right { + $_position: right center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } @else if $position == left { + $_position: left center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } + + $_small_gradient_color: $color; + $_big_gradient_color: $color; + + $_small_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .5, + to(alpha($_small_gradient_color, .35)), + to(alpha($_small_gradient_color, .25))); + + $_big_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .6, + from(alpha($_big_gradient_color, .2)), + to(alpha($_big_gradient_color, 0))); + + @if $type == normal { + background-image: $_small_gradient, $_big_gradient; + background-size: $_small_gradient_size, $_big_gradient_size; + } @else if $type == backdrop { + background-image: $_small_gradient; + background-size: $_small_gradient_size; + } + + background-repeat: no-repeat; + background-position: $_position; + + background-color: transparent; // reset some properties to be sure to not inherit them somehow + border: 0; + box-shadow: none; +} + +@mixin undershoot($position) { + $_undershoot_color_dark: alpha($black, .2); + $_undershoot_color_light: alpha($white, .2); + + $_gradient_dir: left; + $_dash_bg_size: 10px 1px; + $_gradient_repeat: repeat-x; + $_bg_pos: center $position; + + background-color: transparent; // shouldn't be needed, but better to be sure; + + @if ($position == left) or ($position == right) { + $_gradient_dir: top; + $_dash_bg_size: 1px 10px; + $_gradient_repeat: repeat-y; + $_bg_pos: $position center; + } + + background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%); + + padding-#{$position}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; +} + +// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. +// This draws a box on top of the content, the size changes programmatically. +.overshoot { + &.top { + @include overshoot(top); + + &:backdrop { @include overshoot(top, backdrop); } + } + + &.bottom { + @include overshoot(bottom); + + &:backdrop { @include overshoot(bottom, backdrop); } + } + + &.left { + @include overshoot(left); + + &:backdrop { @include overshoot(left, backdrop); } + } + + &.right { + @include overshoot(right); + + &:backdrop { @include overshoot(right, backdrop); } + } +} + +// Overflow indication, works similarly to the overshoot, the size if fixed tho. +.undershoot { + &.top { @include undershoot(top); } + + &.bottom { @include undershoot(bottom); } + + &.left { @include undershoot(left); } + + &.right { @include undershoot(right); } +} diff --git a/gtk-3.20/scss/widgets/_progress.scss b/gtk-3.20/scss/widgets/_progress.scss new file mode 100644 index 0000000..f3b4b8c --- /dev/null +++ b/gtk-3.20/scss/widgets/_progress.scss @@ -0,0 +1,322 @@ +/***************** + ! Progress bars * +******************/ + +@include exports("progressbar") { + progressbar { + padding: 0; + border-radius: $roundness; + font-size: smaller; + color: alpha($fg_color, .6); + min-width: 6px; + min-height: 6px; + + &.osd { + min-height: 4px; + } + + trough { + border: 1px solid alpha(border_normal($bg_color), .5); + background-color: shade($bg_color, 1.08); + background-image: none; + } + } + + progressbar progress { + @include linear-gradient($selected_bg_color); + + border-radius: 0; + box-shadow: none; + + &.left { + border-top-left-radius: $roundness; + border-bottom-left-radius: $roundness; + } + + &.right { + border-top-right-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.left.right { box-shadow: none; } + + &.vertical { + @include linear-gradient($selected_bg_color, to right); + + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + } + } + + levelbar { + min-width: 34px; + min-height: 3px; + + &.vertical { + min-width: 3px; + min-height: 34px; + } + } + + levelbar { + trough { + @include linear-gradient(shade($bg_color, 1.08), to top); + + border: 1px solid alpha(border_normal($bg_color), .5); + border-radius: $roundness; + } + + &.discrete { + &.horizontal { margin-right: 1px; } + + &.vertical { margin-bottom: 1px; } + } + + block.filled { + @include linear-gradient($selected_bg_color); + + // FIXME: it would be nice to set make fill blocks bigger, but we'd need + // :nth-child working on discrete indicators + border-color: transparent; + border-radius: 0; + + &.level-high { + background-color: $success_color; + border-color: transparent; + } + + &.level-low { + background-color: $warning_color; + border-color: transparent; + } + + &.empty-fill-block { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + } + + scale { + $_marks_length: 3px; + $_marks_distance: 1px; + $button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color); + $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + $button_transition: all 200ms $ease-out-quad; + + min-height: 10px; + min-width: 10px; + + &.horizontal { + padding: 6px 0; + + trough { padding: 0 7px; } + highlight, fill { margin: 0 -7px; } + } + &.vertical { + padding: 0 6px; + + trough { padding: 7px 0; } + highlight, fill { margin: -7px 0; } + } + + // The slider is inside the trough, negative margin to make it bigger + slider { + min-height: 15px; + min-width: 15px; + margin: -6px; + } + + // Click-and-hold the slider to activate + &.fine-tune { + &.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; + } + + &.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; + } + + // Make the trough grow in fine-tune mode + slider { margin: -4px; } + + fill, + highlight, + trough { + border-radius: 5px; + -gtk-outline-radius: 7px; + } + } + + // Trough + trough { + $_scale_trough_bg: if($variant == 'light', shade($toolbar_bg_color, .8), darken($bg_color, 5%)); + + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + + border-radius: 2.5px; + background-color: $_scale_trough_bg; + + &:disabled { background-color: transparentize($_scale_trough_bg, 0.45); } + + //OSD troughs + .osd & { + background-color: lighten($osd_bg, 7%); + + highlight { + background-color: $selected_bg_color; + } + } + + // Troughs in selected list-rows and infobars + row:selected &, + infobar & { + background-color: transparentize(black, 0.8); + + highlight { + background-color: $selected_fg_color; + + &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); } + } + + &:disabled { background-color: transparentize(black, 0.9); } + } + } + + // The colored part of trough + highlight { + border-radius: 2.5px; + background-color: $selected_bg_color; + + &:disabled { background-color: transparentize($selected_bg_color, 0.45); } + } + + // this is another differently styled part of the trough, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + fill { + border-radius: 2.5px; + background-color: transparentize($selected_bg_color, 0.5); + + &:disabled { background-color: transparent; } + } + + slider { + $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); + + background-color: $button_bg; + border: 1px solid $_slider_border; + border-radius: 100%; + + transition: $button_transition; + transition-property: background, border; + + &:hover { background-color: lighten($button_bg, 5%); } + + &:active { + background-clip: border-box; + background-color: $selected_bg_color; + border-color: $selected_bg_color; + } + + &:disabled { + background-color: mix($fg_color, $bg_color, 55%); + border-color: transparentize($_slider_border, 0.2); + } + + // Selected list-row and infobar sliders + row:selected &, + infobar & { + background-clip: border-box; + background-color: $selected_fg_color; + border-color: $selected_fg_color; + + &:hover { + background-color: mix($selected_fg_color, $selected_bg_color, 85%); + border-color: mix($selected_fg_color, $selected_bg_color, 85%); + } + &:active { + background-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-color: mix($selected_fg_color, $selected_bg_color, 50%); + } + &:disabled{ + background-color: mix($selected_fg_color, $selected_bg_color, 55%); + border-color: mix($selected_fg_color, $selected_bg_color, 55%); + } + } + + // OSD sliders + .osd & { + background-clip: border-box; + background-color: $selected_bg_color; + border-color: $selected_bg_color; + + &:hover { + background-color: lighten($selected_bg_color, 10%); + border-color: lighten($selected_bg_color, 10%) + } + + &:active { + background-color: darken($selected_bg_color, 10%); + border-color: darken($selected_bg_color, 10%); + } + } + } + + value { color: alpha(currentColor, 0.4); } + + marks { + color: alpha(currentColor, 0.4); + + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_length); + } + } + } + + &.fine-tune marks { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: ($_marks_distance - 1px); + margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px); + } + } + } + &.horizontal { + indicator { + min-height: $_marks_length; + min-width: 1px; + } + + &.fine-tune indicator { min-height: ($_marks_length - 1px); } + } + &.vertical { + indicator { + min-height: 1px; + min-width: $_marks_length; + } + + &.fine-tune indicator { min-width: ($_marks_length - 1px); } + } + } +} diff --git a/gtk-3.20/scss/widgets/_scrollbar.scss b/gtk-3.20/scss/widgets/_scrollbar.scss new file mode 100644 index 0000000..8ddd5c0 --- /dev/null +++ b/gtk-3.20/scss/widgets/_scrollbar.scss @@ -0,0 +1,164 @@ +/*********** + ! Scrollbar +************/ + +@include exports("scrollbar") { + scrollbar { + $_slider_min_length: 20px; + + // disable steppers + @at-root * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + } + + background-color: $scrollbar_bg_color; + transition: 300ms ease-out; + + // scrollbar border + &.top { border-bottom: 1px solid $borders_color; } + &.bottom { border-top: 1px solid $borders_color; } + &.left { border-right: 1px solid $borders_color; } + &.right { border-left: 1px solid $borders_color; } + + &:backdrop { + background-color: $backdrop_scrollbar_bg_color; + border-color: $backdrop_borders_color; + transition: 400ms ease-in; + } + + // slider + slider { + min-width: 7px; + min-height: 7px; + margin: -1px; + border: 4px solid transparent; + border-radius: 2px; + background-clip: padding-box; + background-color: $scrollbar_slider_color; + + &:hover { background-color: $scrollbar_slider_hover_color; } + + &:hover:active { background-color: $scrollbar_slider_active_color; } + + &:backdrop { background-color: $backdrop_scrollbar_slider_color; } + + &:disabled { background-color: transparent; } + } + + &.fine-tune { + slider { + min-width: 7px; + min-height: 7px; + } + + &.horizontal slider { border-width: 1px; } + &.vertical slider { border-width: 1px; } + } + + &.overlay-indicator { + &:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; + + slider { + margin: 0; + min-width: 5px; + min-height: 5px; + background-color: $fg_color; + border: 1px solid if($variant == 'light', white, black); + } + + button { + min-width: 5px; + min-height: 5px; + background-color: $fg_color; + background-clip: padding-box; + border-radius: 2px; + border: 1px solid if($variant == 'light', white, black); + -gtk-icon-source: none; + } + + &.horizontal { + slider { + margin: 0 2px; + min-width: $_slider_min_length; + } + + button { + margin: 1px 2px; + min-width: 5px; + } + } + + &.vertical { + slider { + margin: 2px 0; + min-height: $_slider_min_length; + } + + button { + margin: 2px 1px; + min-height: 5px; + } + } + } + + &.dragging, + &.hovering { opacity: 0.8; } + } + + &.horizontal slider { min-width: $_slider_min_length; } + + &.vertical slider { min-height: $_slider_min_length; } + // button styling + button { + padding: 0; + min-width: 7px; + min-height: 7px; + border-style: none; + border-radius: 2px; + transition-property: min-height, min-width, color; + + color: $scrollbar_slider_color; + + &:hover { + + color: $scrollbar_slider_hover_color; + } + + &:active, &:checked { + + color: $scrollbar_slider_active_color; + } + + &:backdrop { + + color: $backdrop_scrollbar_slider_color; + } + } + + // button icons + &.vertical { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + } + } + + &.horizontal { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } + } + } + } + + treeview ~ scrollbar.vertical { + border-top: 1px solid $borders_color; + margin-top: -1px; + } +} diff --git a/gtk-3.20/scss/widgets/_sidebar.scss b/gtk-3.20/scss/widgets/_sidebar.scss new file mode 100755 index 0000000..61b7a0a --- /dev/null +++ b/gtk-3.20/scss/widgets/_sidebar.scss @@ -0,0 +1,117 @@ +/********* + ! Sidebar +**********/ + +@include exports("sidebar") { + .sidebar { + &, &.view, .view, view, scrolledwindow { + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + &.separator, separator { + &, &:hover, &:focus { + border-width: 1px; + border-style: solid; + border-color: shade($bg_color, .9); + color: shade($bg_color, .9); + } + } + } + + row, .view row, view row { + &:selected { + &, &:hover, &:focus { + border: 0; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:hover { + border: 0; + background-image: none; + background-color: shade($selected_bg_color, 1.05); + color: $selected_fg_color; + } + } + + &:hover { + border: 0; + background-image: none; + background-color: shade($bg_color, 1.05); + } + } + + .sidebar-label { + padding-left: $spacing; + padding-right: $spacing; + } + + .frame, frame { border-width: 0; } + .sidebar-icon { + padding-left: $spacing * 2; + padding-right: $spacing * 2; + } + + assistant & { + padding: $spacing; + border-width: 0 1px 0 0; + border-style: solid; + border-right-color: border_normal($bg_color); + border-radius: 0; + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + &:dir(ltr) { border-width: 0 1px 0 0; } + + &:dir(rtl) { border-width: 0 0 0 1px; } + + label { + padding: $spacing ($spacing * 2); + + &.highlight { background-color: mix($bg_color, $fg_color, .8); } + } + + &.csd .sidebar { border-top-style: none; } + + .highlight { font: bold; } + } + } +} + + +/****** +! Paned +*******/ + +@include exports("paned") { + paned { + -GtkPaned-handle-size: 1; + -gtk-icon-source: none; + + margin: 0 $spacing; + } + + + paned:dir(rtl) { + margin-right: 0; + margin-left: $spacing; + } + + paned .pane-separator { background-color: shade($bg_color, .9); } + + paned.wide { + -GtkPaned-handle-size: 4; + + margin: 0; + } + + paned.wide .pane-separator { + background-color: transparent; + border-style: none solid; + border-color: shade($bg_color, .9); + border-width: 1px; + } + + paned.wide.vertical .pane-separator { border-style: solid none; } +} diff --git a/gtk-3.20/scss/widgets/_spinner.scss b/gtk-3.20/scss/widgets/_spinner.scss new file mode 100644 index 0000000..f2f101d --- /dev/null +++ b/gtk-3.20/scss/widgets/_spinner.scss @@ -0,0 +1,24 @@ +/******************* + ! Spinner animation +********************/ + +@include exports("spinner") { + @keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } + } + + .spinner { + background-image: none; + background-color: $selected_bg_color; + opacity: 0; // non spinning spinner makes no sense + + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + + &:active { + opacity: 1; + animation: spin 1s linear infinite; + + &:disabled { opacity: .5; } + } + } +} diff --git a/gtk-3.20/scss/widgets/_toggle.scss b/gtk-3.20/scss/widgets/_toggle.scss new file mode 100755 index 0000000..0957d4b --- /dev/null +++ b/gtk-3.20/scss/widgets/_toggle.scss @@ -0,0 +1,116 @@ +/*********************** + ! Check and Radio items +************************/ + +$suffix: if($variant == "dark", "-dark", ""); + +@mixin toggle($type) { + background-image: none; + + -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); } + + &:checked, &:active { + -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); } + } + + &:indeterminate { + -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); } + } + + &.menuitem { + -gtk-icon-source: none; + + &:disabled { -gtk-icon-source: none; } + + &:checked, &:active { + -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); } + + &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); } + } + + &:indeterminate { + -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); } + + &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); } + } + } +} + +@include exports("checkradio") { + radio { + @include toggle("radio"); + min-width: 16px; + min-height: 16px; + } + + check { + @include toggle("checkbox"); + min-width: 16px; + min-height: 16px; + } + + iconview.content-view.cell.check { + -gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png"); + + &:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); } + } +} + + +/******** + ! Switch +*********/ + +@include exports("switch") { + switch { + border-radius: 3px; + padding: 5px; + border: none; + outline: none; + transition: all 0.4s linear; + transition: background-colot 0.4s linear; + min-width: 93px; + min-height: 25px; + background-color: #e8eaec; + color: #8e969e; + + slider { + background-color: #fbfbfb; + transition: all 0.3s linear; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + border-radius: 2px; + } + + &:checked { + background-color: $selected_bg_color; + background-image: none; + border-color: $selected_bg_color; + color: $base_color; + + slider { + background-color: $white; + } + } + + &:disabled { + background-color: #d8d8d8; + background-image: none; + border-color: #ccc; + color: mix(#444, #f0f0f0, 0.5); + + slider { + background-color: #e8eaec; + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_toolbar.scss b/gtk-3.20/scss/widgets/_toolbar.scss new file mode 100755 index 0000000..f93040e --- /dev/null +++ b/gtk-3.20/scss/widgets/_toolbar.scss @@ -0,0 +1,123 @@ +@import "button"; + + +/********* + ! Toolbar +**********/ + +@mixin toolbar($bg, $fg) { + @include linear-gradient($bg); + @include border($bg); + + padding: $spacing * 2; + color: $fg; + + &:disabled { + @include linear-gradient(shade($bg, .9)); + + color: mix($fg, $bg, .5); + } + + .title { + font: bold; + padding: 0 ($spacing * 2); + } + + .subtitle { + font: smaller; + padding: 0 ($spacing * 2); + } + + button { @include button($bg, $fg); } + + button.linked, .linked button { @include linked_button($bg); } + + combobox, button { + padding: $spacing - 1px; + + &.text-button { padding: $spacing; } + + &.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; } + } + + separator, separator:disabled { + color: shade($bg, ($contrast + .1)); + border-color: currentColor; + + -GtkWidget-window-dragging: true; + } + + .menubar, menubar { -GtkToolbar-button-relief: normal; } +} + +@include exports("toolbar") { + toolbar { + @include toolbar($bg_color, $fg_color); + + border-style: none; + + &.inline-toolbar { + background-image: none; + background-color: transparent; + } + } + + headerbar { + @include toolbar($titlebar_bg_color, $titlebar_fg_color); + + border-width: 0 0 1px; + border-style: solid; + } + + .titlebar { + @include linear-gradient($titlebar_bg_color); + + border-radius: $roundness $roundness 0 0; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + + &:backdrop { + @include linear-gradient($titlebar_bg_color); + + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + text-shadow: none; + } + + &.default-decoration { + border: 0; + box-shadow: none; + } + + .tiled &, .maximized & { border-radius: 0; } + + .title { font: bold; } + + .titlebutton { + padding: $spacing; + border: 0; + background-image: none; + background-color: transparent; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + box-shadow: none; + + &:hover, &:hover:focus { + background-image: none; + background-color: transparent; + color: $selected_bg_color; + box-shadow: none; + } + + &:active, &:active:hover { + background-image: none; + background-color: transparent; + color: shade($selected_bg_color, .9); + box-shadow: none; + } + + &:backdrop { + background: none; + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + -gtk-icon-shadow: none; + } + } + } +} diff --git a/gtk-3.20/scss/widgets/_view.scss b/gtk-3.20/scss/widgets/_view.scss new file mode 100644 index 0000000..6c863b1 --- /dev/null +++ b/gtk-3.20/scss/widgets/_view.scss @@ -0,0 +1,332 @@ +/*************** + ! Generic views +****************/ + +@include exports("view") { + .view, + %view { + color: $text_color; + background-color: $base_color; + + &:backdrop { + color: $backdrop_text_color; + background-color: $backdrop_base_color; + } + + &:selected { + &:focus, & { + @extend %selected_items; + + border-radius: 3px; + } + } + } + + .view, + textview { + text { + @extend %view; + + selection { &:focus, & { @extend %selected_items; }} + } + } + + iconview { @extend .view; } + +} + + + +/************ +! Treeview +*************/ + +@include exports("treeview") { + .rubberband, + rubberband { + border: 1px solid darken($selected_bg_color, 10%); + background-color: transparentize(darken($selected_bg_color, 10%), 0.8); + } + treeview entry { + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus { border-color: $selected_bg_color; } + } + } + %column_header_button { + padding: 0 6px; + border-radius: 0; + background-image: none; + text-shadow: none; + border-style: none solid solid none; + border-color: $bg_color; + + &:disabled { + border-color: $bg_color; + background-image: none; + } + + &:backdrop { + border-color: $backdrop_bg_color; + border-style: none solid solid none; + color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); + background-image: none; + background-color: $backdrop_base_color; + + &:disabled { + border-color: $backdrop_bg_color; + background-image: none; + } + } + } + treeview.view { + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + + border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, + border-top-color: $bg_color; // while this is the grid lines color, better then nothing + + rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { + &:focus, & { + @extend %selected_items; + border-radius: 0; + } + + &:backdrop, & { + border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly + } + } + + &:disabled { + color: $insensitive_fg_color; + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } + } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &.separator { + min-height: 2px; + color: $bg_color; + + &:backdrop { color: transparentize($bg_color, 0.9); } + } + + &:backdrop { + border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); + border-top: $backdrop_bg_color; + } + &:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: $selected_borders_color; + + &.after { border-top-style: none; } + + &.before { border-bottom-style: none; } + } + + &.expander { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + color: mix($fg_color, $base_color, 70%); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + + &:hover { color: $fg_color; } + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 70%); + + &:hover { color: $selected_fg_color; } + + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); } + } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } + } + + &.progressbar { // progress bar in treeviews + @if $variant == light { color: $base_color; } + + border: 1px solid $selected_borders_color; + border-radius: 4px; + background-color: $selected_bg_color; + background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%)); + box-shadow: inset 0 1px if($variant == 'light', transparentize(white,0.7), transparentize(white,0.85)), + 0 1px if($variant == 'light', transparentize(black, 0.8), transparentize(black,0.9)); + + &:selected { + &:focus, & { + border-radius: 4px; + + @if $variant == 'light' { + color: $selected_bg_color; + box-shadow: none; + } @else { box-shadow: inset 0 1px transparentize(white, 0.95); } + + background-image: linear-gradient(to bottom, + $base_color, + darken($base_color,10%)); + + &:backdrop { + @if $variant == 'light' { + color: $selected_bg_color; + border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) + } @else { border-color: $backdrop_base_color; } + + background-color: $backdrop_base_color; + } + } + } + + &:backdrop { + @if $variant == 'light' { color: $backdrop_base_color; + } @else { border-color: $backdrop_base_color; } + + background-image: none; + box-shadow: none; + } + } + + &.trough { // progress bar trough in treeviews + background-color: transparentize($fg_color,0.9); + border-radius: 4px; + + &:selected { + &:focus, & { + background-color: if($variant == 'light', + transparentize($selected_fg_color, 0.7), + darken($selected_bg_color, 10%)); + border-radius: 4px; + + @if $variant == 'light' { + border-width: 1px 0; + border-style: solid; + border-color: $selected_bg_color; + } + } + } + } + + header { + button { + $_column_header_color: mix($fg_color, $base_color, 50%); + + @extend %column_header_button; + + color: $_column_header_color; + background-color: $base_color; + font-weight: bold; + text-shadow: none; + box-shadow: none; + + &:hover { + @extend %column_header_button; + + color: mix($_column_header_color, $fg_color, 50%); + box-shadow: none; + transition: none; //I shouldn't need this + } + + &:active { + @extend %column_header_button; + + color: $fg_color; + transition: none; //I shouldn't need this + } + } + + button:last-child { &:backdrop, & { border-right-style: none; }} + } + + button.dnd, + header.button.dnd { // for treeview-like derive widgets + &:active, &:selected, &:hover, & { + padding: 0 6px; + transition: none; + background-image: none; + background-color: $selected_bg_color; + color: $base_color; + border-radius: 0; + border-style: none; + box-shadow: inset 0 0 0 1px $base_color; + text-shadow: none; + } + } + } +} + + +/*********** + ! Separator +************/ + +@include exports("separator") { + .view.separator, .separator { + color: shade($bg_color, ($contrast + .1)); + border: 1px solid currentColor; + } +} + + +/********************* + ! Column view headers +**********************/ + +@include exports("columnheader") { + column-header { + .button { + &, &:active { + border-width: 0 1px 1px 0; + border-radius: 0; + } + + &, &:active, &:focus, &:active:focus { + border-color: shade($base_color, .9); + border-bottom-color: shade($base_color, .8); + background-color: shade($base_color, .97); + background-image: none; + } + + &:hover, &:active:hover, &:hover:focus, &:active:hover:focus { + border-color: shade($base_color, .9); + border-bottom-color: shade($base_color, .8); + background-color: shade($base_color, .99); + background-image: none; + } + + &:last-child .button { border-width: 0 0 1px; } + } + } +} + + +/********** + ! Frames * +***********/ + +@include exports("frame") { + .frame { + border: 1px solid border_normal($bg_color); + + &.flat { border: 0; } + } + + /* avoid double borders when a viewport is packed into a GtkScrolledWindow */ + scrolledwindow viewport.frame { border: 0; } +} + diff --git a/gtk-3.20/scss/widgets/_window.scss b/gtk-3.20/scss/widgets/_window.scss new file mode 100755 index 0000000..e6926c3 --- /dev/null +++ b/gtk-3.20/scss/widgets/_window.scss @@ -0,0 +1,55 @@ +/************** + ! Window frame +***************/ + +@include exports("window") { + %window { + box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22), 0 0 0 1px $wm_border_focused; + + &:backdrop { + box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23), 0 0 0 1px $wm_border_unfocused; + } + } + + .window-frame { + @extend %window; + + border: 0; + border-radius: $roundness $roundness 0 0; + + /* this is used for the resize cursor area */ + margin: $spacing * 3; + + &.tiled { border-radius: 0; } + + &.solid-csd { + border-radius: 0; + margin: 1px; + background-color: $bg_color; + box-shadow: none; + } + + &.csd { + &.popup { + @extend %window; + + border-radius: 0; + } + + &.tooltip { + border-radius: $roundness; + box-shadow: none; + } + + &.message-dialog { + @extend %window; + + border-radius: $roundness; + } + } + + &.ssd { + &.maximized { border-radius: 0; } + } + } +} diff --git a/gtk-3.20/thumbnail.png b/gtk-3.20/thumbnail.png new file mode 120000 index 0000000..01495bc --- /dev/null +++ b/gtk-3.20/thumbnail.png @@ -0,0 +1 @@ +../gtk-3.0/thumbnail.png \ No newline at end of file