From e946d8bca378f596c7b2a5d84489c857280c4dda Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sun, 17 Apr 2016 00:50:09 +0200 Subject: GTK+-3.20 GreenLaguna: fine tune part-1...... - entry - progressbar - levelbar - treeview - scale - combobox - buttons - spinbutton - hederbar/CSD windows - switch - check and radio buttons - actionbar - window control buttons --- desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css | 6 + desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css | 848 +++++++++++---------- .../GreenLaguna/gtk-3.0/window-controls.css | 11 +- 3 files changed, 454 insertions(+), 411 deletions(-) diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css index 421629d0..2a1e0b43 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css @@ -51,6 +51,12 @@ @define-color scale_fill_a #A1AF9C; @define-color scale_fill_b #70816A; +@define-color scale_border_a @internal_element_color; +@define-color scale_border_b shade (@internal_element_color, 1.25); +@define-color osd_scale_border alpha (shade (@theme_bg_color, 1.25), 0.4); +@define-color scale_highlight_border @theme_selected_bg_color; +@define-color scale_highlight_bg @theme_selected_bg_color; +@define-color scale_highlight_shadow alpha(white, 0.50); /*@define-color menu_color #655b56;*/ @define-color menu_controls_color #ffffff; diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css index 551a517f..c5dcffd3 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css @@ -1,5 +1,5 @@ * { - padding: 1px; + padding: 0px; background-clip: padding-box; /* Style properties */ /* -GtkButton-child-displacement-x: 1; @@ -468,27 +468,21 @@ spinner:checked:disabled { /**************** * Text Entries * ****************/ -toolbar entry { - /*background-color: @theme_main_color;*/ - background-image: linear-gradient(to bottom, - shade(@internal_element_color, 1.45), - shade(@internal_element_color, 1.57) 20%, - shade(@internal_element_color, 1.7) 50%, - @theme_main_color); - border-width: 1px; - border-style: none; - border-radius: 3px; - padding: 4px; - color: @theme_text_color; -} entry { background-color: shade(@theme_bg_color, 1.09); border-width: 1px; border-style: none; border-radius: 3px; - padding: 4px 4px; + padding: 4px; color: @theme_text_color; + min-height: 22px; +} + +entry:focus { + box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1), + inset 1px 1px alpha(@theme_selected_bg_color, 0.1), + inset -1px -1px alpha(@theme_selected_bg_color, 0.2); } entry:selected { @@ -500,12 +494,6 @@ entry:selected:focus { background-color: shade(@theme_selected_bg_color, 0.8); } -entry:focus { - box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1), - inset 1px 1px alpha(@theme_selected_bg_color, 0.1), - inset -1px -1px alpha(@theme_selected_bg_color, 0.2); -} - entry:disabled { background-image: none; background-color: @insensitive_bg_color; @@ -515,6 +503,19 @@ entry:disabled { color: @insensitive_fg_color; } +entry:active { + background-color: shade(@theme_selected_bg_color, 1.23); + color: @theme_selected_fg_color; +} + +toolbar entry { + background-image: linear-gradient(to bottom, + shade(@internal_element_color, 1.45), + shade(@internal_element_color, 1.57) 20%, + shade(@internal_element_color, 1.7) 50%, + @theme_main_color); +} + entry progressbar, entry progressbar:focus { margin-left: 2px; @@ -543,11 +544,6 @@ entry progressbar.pulse:focus { transparent 5px); } -entry:active { - background-color: shade(@theme_selected_bg_color, 1.23); - color: @theme_selected_fg_color; -} - entry.cursor-handle, cursor-handle { background-color: transparent; @@ -578,13 +574,13 @@ cursor-handle.bottom { /******************* * Symbolic images * *******************/ + image, image:hover, image:selected, image:selected:hover, image:focus, image:selected:focus, - .view image, .view image:hover, .view image:selected, @@ -599,17 +595,54 @@ image:selected:focus, ****************/ progressbar { -/* -GtkProgressBar-min-horizontal-bar-height: 16; - -GtkProgressBar-min-vertical-bar-width: 16;*/ border-radius: 16px; padding: 0px; font-size: smaller; } +progressbar.horizontal { + min-height: 20px; +} + +progressbar.vertical { + min-width: 20px; +} + +/* progress component */ +progressbar.horizontal trough, +progressbar.horizontal progress { + min-height: 20px; + border-radius: 16px; +} + +progressbar.vertical trough, +progressbar.vertical progress { + min-width: 20px; + border-radius: 16px; +} + +progressbar progress.left { + border-top-left-radius: 16px; + border-bottom-left-radius: 16px; +} + +progressbar progress.right { + border-top-right-radius: 16px; + border-bottom-right-radius: 16px; +} + +progressbar progress.top { + border-top-right-radius: 16px; + border-top-left-radius: 16px; +} + +progressbar progress.bottom { + border-bottom-right-radius: 16px; + border-bottom-left-radius: 16px; +} + progressbar progress { - min-height: 16px; border-style: none; - border-radius: 2px; color: @theme_fg_color; background-image: linear-gradient(-45deg, alpha(@progressbar_pattern, 0.15), @@ -628,7 +661,6 @@ progressbar progress { } progressbar.vertical progress { - min-width: 16px; background-image: linear-gradient(-135deg, alpha(@progressbar_pattern, 0.15), alpha(@progressbar_pattern, 0.15) 25%, @@ -645,66 +677,23 @@ progressbar.vertical progress { shade(@progressbar_background_a, 0.98)); } -GtkProgressBar.progressbar { - background-image: linear-gradient(to bottom, - @progressbar_background_a, - shade(@progressbar_background_a, 0.83) 44%, - @progressbar_background_b 45%, - shade(@progressbar_background_a, 0.93)); -} - -GtkProgressBar.progressbar.vertical { - background-image: linear-gradient(to right, - @progressbar_background_a, - shade(@progressbar_background_a, 0.83) 44%, - @progressbar_background_b 45%, - shade(@progressbar_background_a, 0.93)); -} - -.trough row { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 0.9), - @theme_bg_color 60%, - @theme_main_color); - border-width: 1px; - border-style: solid; - border-radius: 2px; - border-color: shade(@theme_bg_color, 0.882); - padding: 1px; -} - -progressbar { - border-radius: 16px; - border-width: 1px; - border-style: solid; - border-color: shade(@theme_bg_color, 0.9); -} - progressbar trough { - min-height: 16px; background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.8), @theme_bg_color 70%, shade(@theme_bg_color, 1.8)); - - border-width: 0; + border-width: 1px; border-style: solid; - border-radius: 16px; + border-color: shade(@theme_bg_color, 0.9) } progressbar.vertical trough { - min-width: 16px; background-image: linear-gradient(to right, shade(@theme_bg_color, 0.8), @theme_bg_color 70%, shade(@theme_bg_color, 1.8)); } -progressbar trough:selected, -progressbar trough:selected:focus { - border-image: none; -} - /********** * Frames * **********/ @@ -755,32 +744,41 @@ scrolledwindow viewport.frame { levelbar { min-width: 34px; - min-height: 3px; - background-color: transparent; + min-height: 5px; } levelbar.vertical { - min-width: 3px; + min-width: 5px; min-height: 34px; } levelbar trough { - border-radius: 2px; - padding: 2px; -} - -levelbar block.filled { + background-color: transparent; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 0.7), + shade(@theme_bg_color, 1.2)); + border-radius: 3px; border-width: 1px; border-style: solid; border-color: @progressbar_border; + padding: 1px; + min-height: 4px; + +} + +levelbar block.filled { + min-height: 5px; + border-radius: 3px; + border-width: 0px; + border-style: none; background-image: linear-gradient(to bottom, shade(@link_color, 1.2), shade(@link_color, 0.6)); } levelbar.continuous block.filled { - padding: 2px; - border-radius: 2px; + padding: 0px; + border-radius: 3px; } levelbar.discrete.horizontal block.filled { @@ -791,16 +789,22 @@ levelbar.discrete.vertical block.filled { margin: 1px 0; } +levelbar block.low { + background-image: linear-gradient(to bottom, + shade(@warning_bg_color, 1.2), + shade(@warning_bg_color, 0.7)); +} + levelbar block.high { background-image: linear-gradient(to bottom, shade(@success_color, 1.2), shade(@success_color, 0.7)); } -levelbar block.low { +levelbar block.full { background-image: linear-gradient(to bottom, - shade(@warning_bg_color, 1.2), - shade(@warning_bg_color, 0.7)); + shade(@success_color, 1.2), + shade(@success_color, 0.7)); } levelbar block.empty { @@ -813,7 +817,7 @@ levelbar block.empty { /************* * Notebooks * *************/ -/* gtk-3.12 */ + notebook header { background-image: none; background-color: @base_color; @@ -831,12 +835,6 @@ notebook { border-style: solid; border-width: 1px; border-radius: 3px; - - /* With .notebook instead of GtkNotebook, - if commented out, this will make line - highlights invisible in text views */ - /*background-color: @theme_main_color;*/ - /* -GtkNotebook-tab-overlap: 1; -GtkNotebook-tab-curvature: 0; -GtkNotebook-initial-gap: 0; @@ -978,13 +976,7 @@ treeview:selected:disabled { color: @theme_selected_fg_color; } -treeview column:sorted row:nth-child(odd), -treeview column:sorted row:nth-child(odd):hover { - background-color: shade(@treeview_odd_row, 0.93); -} - -treeview column:sorted row:nth-child(even), -treeview column:sorted row:nth-child(even):hover { +treeview:hover { background-color: shade(@treeview_even_row, 0.93); } @@ -993,33 +985,26 @@ treeview header { } treeview header button { - background-image: linear-gradient(to bottom, + background-image: linear-gradient(to bottom, @button_gradient_color_a, shade(@button_gradient_color_b, 0.92)); - border-image: none; - border-width: 0px 0px 1px 1px; - border-radius: 0px; - border-style: solid; - border-color: @theme_bg_color; + border-image: none; + border-width: 0px 1px 1px 0px; + border-radius: 0px; + border-style: solid; + border-color: @button_border; + min-height: 18px; } treeview header button:hover { background-image: linear-gradient(to bottom, shade(@button_gradient_color_a, 0.95), shade(@button_gradient_color_b, 1.07)); - border-image: none; - border-width: 0px 0px 1px 1px; - border-radius: 0px; - border-style: solid; - border-color: @theme_bg_color; + border-image: none; } -treeview header button:active:hover { - border-width: 0px 0px 1px 1px; - border-radius: 0px; - border-image: none; - border-style: solid; - border-color: @theme_bg_color; +treeview header button label { + padding: 0px 4px 0px 4px; } row { @@ -1068,79 +1053,231 @@ list row.activatable:hover { * GtkScale * ************/ -scale { -/* -GtkScale-slider-length: 16; - -GtkRange-slider-width: 20; - -GtkRange-trough-border: 0;*/ +scale.vertical { + background-color: transparent; + min-width: 10px; + padding: 0px 4px; } -scale slider, -.scale.slider:hover { - border-width: 0px; - border-radius: 0px; - border-style: none; - color: transparent; - background-color: transparent; +scale.horizontal { + background-color: transparent; + min-height: 10px; + padding: 6px 0px; } -scale slider:disabled { - color: transparent; - background-color: transparent; +scale.horizontal trough { + min-height: 3px; } -scale slider.fine-tune:active, -scale slider.fine-tune:active:hover, -scale slider.horizontal.fine-tune:active, -scale slider.horizontal.fine-tune:active:hover { - background-size: 80%; - background-repeat: no-repeat; - background-position: center; +scale.vertical trough { + min-width: 3px; } scale trough { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 0.7), - shade(@theme_bg_color, 1.7)); - border-width: 0px; - border-radius: 2px; - margin: 8px 0; -} - + border-radius: 8px; + border-style: solid; + border-width: 1px; + background-image: -gtk-gradient (linear, + left top, + left bottom, + from (alpha (#000, 0.20)), + color-stop (0.20, alpha (#000, 0.16)), + to (alpha (#000, 0.06))); + box-shadow: inset 1px 1px alpha(#000, 0.08), + inset -1px -1px alpha(#000, 0.08); +} + +scale trough, +scale.horizontal trough, scale.vertical trough { - background-image: linear-gradient(to right, - shade(@theme_bg_color, 0.7), - shade(@theme_bg_color, 1.7)); - margin: 0 8px; + border-color: @scale_border_b; + } scale trough:disabled { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 0.85), - shade(@theme_bg_color, 1.4)); + background-image: -gtk-gradient (linear, + left top, + left bottom, + from (alpha (#000, 0.03)), + to (alpha (#000, 0.03))); + border-style: none; + box-shadow: inset 1px 1px alpha(#000, 0.15), + inset -1px -1px alpha(#000, 0.15); } -scale.vertical trough:disabled { - background-image: linear-gradient(to right, - shade(@theme_bg_color, 0.85), - shade(@theme_bg_color, 1.4)); +scale trough highlight, +scale.vertical trough highlight, +scale.horizontal trough highlight { + border-style: solid; + border-width: 1px; + border-color: @scale_highlight_border; + border-radius: 8px; + background-color: @success_color; } -scale progressbar { - background-image: linear-gradient(to bottom, - @scale_fill_a, - @scale_fill_b); +scale trough highlight:disabled, +scale.vertical trough highlight:disabled, +scale.horizontal trough highlight:disabled { + background-color: transparent; + border-color: transparent; +} - border-radius: 3px; +scale highlight.left { + background-image: -gtk-gradient (linear, + left top, left bottom, + from (shade (@scale_fill_a, 0.90)), + to (shade (@scale_fill_b, 1.31))); + border-style: none; + border-width: 0px; + border-radius: 8px; + box-shadow: inset 1px 1px alpha(#000, 0.08), + inset -1px -1px alpha(#000, 0.08); + color: @theme_selected_fg_color; + text-shadow: none; } -scale.vertical progressbar { - background-image: linear-gradient(to right, - @scale_fill_a, - @scale_fill_b); +scale highlight.bottom { + background-image: -gtk-gradient (linear, + left top, right top, + from (shade (@scale_fill_a, 0.90)), + to (shade (@scale_fill_b, 1.31))); + border-style: none; + border-width: 0px; + border-radius: 8px; + box-shadow: inset 1px 1px alpha(#000, 0.08), + inset -1px -1px alpha(#000, 0.08); + color: @theme_selected_fg_color; + text-shadow: none; +} + +scale highlight.left:disabled { + background-image: -gtk-gradient (linear, left top, left bottom, + from (shade (@theme_bg_color, 0.85)), + to (shade (@theme_bg_color, 0.85))); + box-shadow: inset 1px 1px alpha(#000, 0.02), + inset -1px -1px alpha(#000, 0.02); +} + +scale highlight.bottom:disabled { + background-image: -gtk-gradient (linear, left top, right top, + from (shade (@theme_bg_color, 0.85)), + to (shade (@theme_bg_color, 0.85))); + box-shadow: inset 1px 1px alpha(#000, 0.02), + inset -1px -1px alpha(#000, 0.02); } scale marks { - background-color: shade(@theme_bg_color, 0.56); + color: mix(@theme_bg_color, @theme_text_color, 0.56); + background-color: transparent; +} + +scale marks.top, +scale.fine-tune marks.top { + margin-bottom: 6px; +} + +scale marks.bottom, +scale.fine-tune marks.bottom { + margin-top: 6px; +} + +/* this makes marks visible */ +scale.horizontal indicator, +scale.horizontal.fine-tune indicator { + min-height: 8px; + min-width: 1px; +} + +scale.vertical indicator, +scale.vertical.fine-tune indicator { + min-height: 1px; + min-width: 8px; +} + +scale slider, +scale slider:hover, +scale slider:disabled { + border-radius: 8px; + border-style: none; +} + +scale.horizontal slider { + /* background-image in -assets variant */ + background-color: transparent; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + min-height: 18px; + min-width: 18px; + margin: -9px 0px -9px 0px; +} + +/* scale.horizontal.scale-has-marks-below */ +scale.horizontal contents:first-child:not(:only-child) slider{ + min-height: 22px +} + +scale.horizontal.fine-tune slider:active, +scale.horizontal.fine-tune slider:hover:active { + background-size: 90%; + background-repeat: no-repeat; + background-position: center; +} + +/* Why different values ? */ +scale.vertical slider { + /* background-image in -assets variant */ + background-size: 130%; + background-repeat: no-repeat; + background-position: center; + min-height: 18px; + min-width: 18px; + margin: 0px -9px 0px -9px; +} + +scale.vertical.fine-tune slider:active, +scale.vertical.fine-tune slider:hover:active { + background-size: 115%; + background-repeat: no-repeat; + background-position: center; +} + +scale.horizontal.scale-has-marks-above.color, +scale.vertical.scale-has-marks-below.color { + margin: 0px 0px 0px 0px; + padding: 0px; +} + +scale.scale-has-marks-above.color trough, +scale.scale-has-marks-below.color trough { + border-color: @notebook_border; + border-radius: 5px; + background-repeat: no-repeat; +} + +scale.vertical.scale-has-marks-below.color slider { + min-height: 20px; + min-width: 22px; + padding: 0px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + margin: 0px 0px 0px 0px; +} + +scale.horizontal.scale-has-marks-above.color slider { + min-height: 14px; + min-width: 20px; + margin: 0px 0px 0px 0px; + padding: 5px 0px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +scale.horizontal.scale-has-marks-above.color slider:hover, +scale.vertical.scale-has-marks-below.color slider:hover { + background-size: 105%; } /************** @@ -1150,8 +1287,6 @@ scale marks { combobox { /* align with side buttons */ padding: 0; -/* -GtkComboBox-arrow-scaling: 0.5; - -GtkComboBox-shadow-type: none;*/ color: @theme_fg_color; } @@ -1162,26 +1297,37 @@ combobox separator { } /* since gtk+-3.18, avoid flat text background */ - combobox button.combo GtkCellView { +combobox button.combo cellview { background-color: transparent; } -combobox button.combo { - padding: 0px; +#gtk-combobox-popup-menu menuitem { + color: @theme_selected_fg_color; + border-width: 1px; + border-style: solid; + border-color: transparent; +} + +combobox > box > button.combo > box > arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + color: @theme_fg_color; + min-height: 16px; + min-width: 16px; + padding: 0px 3px 0px 0px; } -/*GtkComboBox .menu *,*/ -GtkTreeMenu .menuitem * { - color :@theme_selected_fg_color; +combobox > box > button.combo > box > arrow:disabled { + color: @insensitive_fg_color; + background-color: transparent; } /*********** * Buttons * ***********/ + button { -gtk-icon-style: regular; padding: 0px; -/* -GtkWidget-focus-line-width: 0;*/ border-radius: 3px; border-width: 1px; border-style: solid; @@ -1190,12 +1336,14 @@ button { @button_gradient_color_a, @button_gradient_color_b); transition: all 400ms ease-out; + min-height: 22px; + min-width: 22px; } button.default { - transition: all 400ms ease-out; text-shadow: none; color: @theme_fg_color; + border-color: shade(@button_border, 1.1); } /* ie. mate-control-center */ @@ -1222,6 +1370,7 @@ button.scale.flat { padding: 4px; } +button.combo, button.text-button, button.font, button.file { @@ -1246,7 +1395,6 @@ button label:hover, button label:checked, button label:hover:active, button label:disabled { - background-image: none; background-color: transparent; } @@ -1265,8 +1413,7 @@ button image:disabled { color: @insensitive_fg_color; } -button:hover/*, -toolbar button:hover*/ { +button:hover { border-image: none; border-style: solid; border-color: shade(@button_border, 1.1); @@ -1317,6 +1464,14 @@ button.default:hover { border-image: none; } +button.color { + min-height: 27px; +} + +button.color > colorswatch.activatable { + padding: 5px; +} + /****************** * Linked Buttons * ******************/ @@ -1329,23 +1484,32 @@ button.default:hover { spinbutton, spinbutton.vertical { - padding: 5px 4px; + padding: 0px; + border-style: solid; + border-width: 1px; + background-color: transparent; + border-color: shade(@selected_bg_color, 1.7); + border-radius: 3px; } -spinbutton button { - color: @internal_element_color; - padding: 2px 6px; - background-color: transparent; - background-image: none; - border-width: 0; - border-radius: 0; - border-style: none; +spinbutton.vertical { + border-radius: 4px; +} + +spinbutton.horizontal entry { border-image: none; - box-shadow: inset 1px 0 @inset_dark_color; + border-width: 0px; + border-style: none; + border-radius: 3px 0px 0px 3px; + box-shadow: none; + padding: 3px 10px 3px 3px; } spinbutton button:disabled { color: @internal_element_insensitive; + background-image: none; + background-color: @insensitive_bg_color; + border-image: none; } spinbutton button:active, @@ -1353,59 +1517,34 @@ spinbutton button:hover { color: @internal_element_prelight; } -spinbutton button:first-child { - border-radius: 3px 0 0 3px; - box-shadow: none; +spinbutton.horizontal button { + border-radius: 0px; + border-image: none; + border-width: 0px 0px 0px 1px; + border-color: shade(@selected_bg_color, 1.7); + padding: 0px 2px; } -spinbutton button:last-child { +spinbutton.horizontal button:last-child { border-radius: 0 3px 3px 0; - box-shadow: none; -} - -spinbutton button:dir(rtl) { - box-shadow: inset -1px 0 @inset_dark_color; -} - -/* Add back the glowy effect from the entry covered by the pushed button background*/ -spinbutton button:active, -spinbutton button:active:focus { - box-shadow: inset 1px 0 @inset_dark_color, - inset 0 1px alpha(@theme_selected_bg_color, 0.2), - inset 0 -1px alpha(@theme_selected_bg_color, 0.2); -} - -spinbutton button:first-child:active, -spinbutton button:first-child:active:focus { - box-shadow: inset 1px 1px alpha(@theme_selected_bg_color, 0.2), - inset 0 -1px alpha(@theme_selected_bg_color, 0.2); } -spinbutton button:last-child:active, -spinbutton button:last-child:active:focus { - box-shadow: inset 1px 0 @inset_dark_color, - inset 0 1px alpha(@theme_selected_bg_color, 0.2), - inset -1px -1px alpha(@theme_selected_bg_color, 0.2); +spinbutton.vertical entry { + border-image: none; + border-width: 1px 0px 1px 0px; + border-color: shade(@selected_bg_color, 1.7); + border-style: solid; + border-radius: 0px; + box-shadow: none; } spinbutton.vertical button { + border-image: none; + box-shadow: none; padding: 4px; -gtk-icon-shadow: 0 1px @button_text_shadow; } -spinbutton.vertical button, -spinbutton.vertical button:hover { - padding: 4px; - color: @theme_fg_color; -} - -spinbutton.vertical button:hover, -spinbutton.horizontal button:hover { - background-image: linear-gradient(to bottom, - @button_hover_gradient_color_a, - @button_hover_gradient_color_b); -} - spinbutton.vertical button:active, spinbutton.horizontal button:active { background-image: linear-gradient(to bottom, @@ -1413,79 +1552,13 @@ spinbutton.horizontal button:active { @button_gradient_color_a); } -spinbutton.vertical button:disabled { - color: @insensitive_fg_color; -} - -spinbutton.vertical button:active { - color: @button_active_text; - -gtk-icon-shadow: 0 1px @button_active_text_shadow; -} - -/* :disabled:disabled to override the dark overriden style for - normal spinbutton buttons, yeah we lack !important */ -spinbutton.vertical button:disabled:disabled { - -gtk-icon-shadow: none; -} - -.spinbutton.vertical button, -/* :active:active to override the dark overriden style for - normal spinbutton buttons, yeah we lack !important */ -spinbutton.vertical button:active:active { - box-shadow: none; -} - -spinbutton.vertical button:first-child, -spinbutton.vertical button:hover:first-child, -spinbutton.vertical button:active:first-child { - border-color: transparent; - border-image-width: 3px 3px 0 3px; - border-width: 2px 1px 0 1px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding: 4px; -} - -spinbutton.vertical button:last-child, -spinbutton.vertical button:hover:last-child, -spinbutton.vertical button:active:last-child { - border-color: transparent; - border-image-width: 0 3px 4px 3px; - border-width: 0 1px 2px 1px; - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: 4px; -} - -spinbutton.vertical entry { - border-image: none; - border-color: alpha(@borders, 0.1); - border-width: 0 1px 0 1px; - border-style: solid; - border-radius: 0; - box-shadow: inset 1px 0 0 0 @borders, - inset -1px 0 0 0 @borders, - inset 0 1px 0 0 @borders, - inset 0 -1px 0 0 @borders; - - /* I'm using box-shadow as borders, so I need to compensate - with padding. Those two values need to be entry padding +1 */ - padding-top: 5px; - padding-bottom: 5px; -} - -spinbutton.vertical entry:disabled { - border-color: alpha(@borders, 0.1); - box-shadow: inset 0 1px alpha(@borders, 0.4), - inset 0 -1px alpha(@borders, 0.4); +spinbutton.vertical button { + border-width: 0px; + border-radius: 4px 4px 0px 0px; } -spinbutton.vertical entry:focus { - border-color: alpha(@borders, 0.1); - box-shadow: inset 1px 0 0 0 @theme_selected_bg_color, - inset -1px 0 0 0 @theme_selected_bg_color, - inset 0 1px 0 0 @theme_selected_bg_color, - inset 0 -1px 0 0 @theme_selected_bg_color; +spinbutton.vertical button:last-child { + border-radius: 0px 0px 4px 4px; } /************** @@ -2540,7 +2613,8 @@ popover button.default.suggested-action.text-button:hover { * CSD * *******/ -.titlebar { +.titlebar, +.titlebar:backdrop { text-shadow: none; background-image: linear-gradient(to bottom, shade (@theme_bg_color, 1.50), @@ -2571,71 +2645,26 @@ popover button.default.suggested-action.text-button:hover { color: @theme_fg_color; } - /* Colour when unfocused? does this work?*/ -.titlebar:backdrop { - color: #747473; - text-shadow: none; - background-image: none; - background-color: #747473; -} - -.titlebar button.titlebutton, +.titlebar button.image-button.popup, +.titlebar button.toggle.popup.titlebutton, headerbar.frame.titlebar button.image-button.titlebutton, button.text-button.titlebutton { - padding: 4px 4px 4px 4px; - border-radius: 3px; - border-width: 1px; - border-style: solid; - text-shadow: 0 -1px black; - color: #CCD9D0; - background-image: -gtk-gradient (radial, - 0.5 -2.0, 2.0, - 0.5 -2.0, 3.0, - from (shade(@button_gradient_color_a, 1.5)), - to (shade(@button_gradient_color_b, 1.1))); -} - -.titlebar button.titlebutton { - /* fake request for hardcoded icons, - to avoid usage of regular window-close button*/ - -gtk-icon-style: requested; - border-width: 0px; - border-style: none; - border-image-source: none; - background-image: none; - padding: 4px 0px 4px 0px; + padding: 4px; } -.titlebar button.titlebutton:hover, +.titlebar button.toggle.popup.titlebutton:hover, headerbar.frame.titlebar button.image-button.titlebutton:hover, button.text-button.titlebutton:hover { - border-image: none; - border-style: solid; - border-color: transparent; background-image: linear-gradient(to bottom, @button_hover_gradient_color_a, @button_hover_gradient_color_b); } -.titlebar button.titlebutton:hover { - border-width: 0px; - border-style: none; - border-image-source: none; - border-color: transparent; - background-image: none; - background-color: transparent; -} - -/* avoid double displaying of window controls */ -.titlebar button.titlebutton image { - color: transparent; -} - -.titlebar button.titlebutton:hover:active, +.titlebar button.toggle.popup.titlebutton:hover:active, headerbar.frame.titlebar:hover:active, button.image-button.titlebutton:hover:active, button.text-button.titlebutton:hover:active, -.titlebar button.titlebutton:checked, +.titlebar button.toggle.popup.titlebutton:checked, headerbar.frame.titlebar:checked, button.image-button.titlebutton:checked, button.text-button.titlebutton:checked { @@ -2646,36 +2675,11 @@ button.text-button.titlebutton:checked { @theme_bg_color 50%, shade(@button_gradient_color_a, 1.5)); } - -.titlebar .right button.titlebutton:first-child { - border-left: 1px solid @menu_separator; -} - -.titlebar .right button.titlebutton:last-child { - -} - -.titlebar .left button.titlebutton:last-child { - border-right: 1px solid @menu_separator; -} - -.titlebar .left button.titlebutton:first-child { - -} - -.titlebar button.titlebutton:backdrop, -.titlebar button.titlebutton:hover:backdrop, -headerbar.frame.titlebar button.image-button.titlebutton:backdrop, -headerbar.frame.titlebar button.image-button.titlebutton:hover:backdrop { - background: none; - color: @theme_main_color; - border-image: none; - -gtk-icon-shadow: none; -} -.titlebar button.titlebutton:hover:backdrop, -headerbar.frame.titlebar button.image-button.titlebutton:hover:backdrop { - color: #747473; +.titlebar separator.vertical.titlebutton { + background-image: linear-gradient(to right, + shade(@theme_bg_color, 0.85), + shade(@theme_bg_color, 0.85)); } /* workaround to avoid unwanted black frames if switching compositor on/off */ @@ -2781,14 +2785,9 @@ assistant .sidebar { switch, switch:backdrop { -/* -GtkSwitch-slider-width: 45px;*/ font-weight: bold; font-size: smaller; font: bold condensed; -} - -switch, -switch:backdrop { color: @internal_element_color; border-radius: 3px; border-width: 1px; @@ -2803,7 +2802,7 @@ switch:backdrop { switch:checked, switch:backdrop:checked { color: @theme_main_color; - border-style: none; + border-style: solid; /*border-image is defined in gtk-widgets-assets.css*/ background-image: linear-gradient(to bottom, @active_switch_bg_color_a, @@ -2820,6 +2819,7 @@ switch:backdrop:disabled { switch slider, switch slider:backdrop { + min-width: 45px; border-width: 1px; border-radius: 2px; border-color: shade(@frame_color, 1.31); @@ -2907,7 +2907,6 @@ box, box:disabled, grid, grid:disabled { - background-image: none; background-color: transparent; } @@ -3005,18 +3004,51 @@ check:selected:focus, border-style: none; } -/***************** - * GtkCheckButton * - *****************/ -checkbutton:selected:focus { +/******************************** + * GtkCheckButton GtkRadioButton* + ********************************/ +checkbutton:selected:focus, +radiobutton:selected:focus { background-color: shade(@theme_bg_color, 0.95); } -/***************** - * GtkRadioButton * - *****************/ -radiobutton:selected:focus { - background-color: shade(@theme_bg_color, 0.95); +/* move label to the right, min-height/width makes image visible in menus*/ +check, +radio, +window.background.popup menuitem check, +window.background.popup menuitem radio, +window.background.popup menu menuitem check, +window.background.popup menu menuitem radio { + padding: 0px 6px 0px 0px; + background-repeat: no-repeat; + background-position: center; + min-height: 12px; + min-width: 12px; + background-color: transparent; +} + +treeview check, +treeview radio, +treeview check:hover, +treeview radio:hover, +treeview check:checked, +treeview radio:checked, +treeview check:backdrop, +treeview radio:backdrop, +treeview check:backdrop:hover, +treeview radio:backdrop:hover, +treeview check:backdrop:checked, +treeview radio:backdrop:checked, +treeview check:focus, +treeview radio:focus, +treeview check:focus:hover, +treeview radio:focus:hover, +treeview check:focus:checked, +treeview radio:focus:checked, +treeview check:focus:checked:hover, +treeview radio:focus:checked:hover { + background-color: transparent; + background-image: none; } /************* @@ -3521,16 +3553,16 @@ stacksidebar.sidebar viewport.frame list row button { * GtkActionBar * ****************/ -actionbar .frame.action-bar { +actionbar { padding: 2px; } -actionbar .frame.action-bar button.image-button { - padding: 6px; +actionbar stackswitcher.horizontal.linked button.image-button.radio { + padding: 5px 2px; } -actionbar .frame.action-bar stackswitcher.horizontal.linked button.image-button { - padding: 4px 2px; +actionbar button.toggle.image-button.popup { + padding: 5px; } /* hyperlinks */ diff --git a/desktop-themes/GreenLaguna/gtk-3.0/window-controls.css b/desktop-themes/GreenLaguna/gtk-3.0/window-controls.css index efa62c59..6e836764 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/window-controls.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/window-controls.css @@ -49,7 +49,7 @@ headerbar.titlebar .right button.minimize.titlebutton:backdrop, headerbar.titlebar .right:dir(rtl) button.minimize.titlebutton:backdrop, headerbar.titlebar .left button.minimize.titlebutton:backdrop, headerbar.titlebar .left:dir(rtl) button.minimize.titlebutton:backdrop { - background-image: url('window-controls/unfocused.png'); + background-image: url('window-controls/unfocus.png'); } /* headerbar.titlebar .right button.minimize.titlebutton:backdrop:hover, @@ -153,9 +153,14 @@ headerbar.titlebar .button.menu-button.titlebutton:active { } */ -/* application adjustments */ +headerbar.titlebar button.close.titlebutton, +headerbar.titlebar button.minimize.titlebutton, +headerbar.titlebar button.maximize.titlebutton { + border-width: 0px; + border-image: none; + background-color: transparent; +} -/* gtk+-3.20 */ headerbar.titlebar button.close.titlebutton image, headerbar.titlebar button.minimize.titlebutton image, headerbar.titlebar button.maximize.titlebutton image { -- cgit v1.2.1