From 4fdd21d1b430b0bd3cfb35d7d750a754be44534e Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sat, 10 Jan 2015 00:26:08 +0100 Subject: Traditional themes GTK3: improve popovers support --- .../TraditionalGreen/gtk-3.0/gtk-widgets.css | 128 +++++++++++++++++++-- desktop-themes/TraditionalGreen/gtk-3.0/gtk.css | 4 + .../TraditionalOk/gtk-3.0/gtk-widgets.css | 128 +++++++++++++++++++-- desktop-themes/TraditionalOk/gtk-3.0/gtk.css | 4 + .../TraditionalOkTest/gtk-3.0/gtk-widgets.css | 128 +++++++++++++++++++-- desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css | 4 + 6 files changed, 372 insertions(+), 24 deletions(-) mode change 100755 => 100644 desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css index 5c1bb29b..e650306b 100644 --- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css @@ -1954,19 +1954,131 @@ GtkHeaderBar .header-bar { padding: 5px 4px 4px 4px; } -/************ +/************* * Popovers * - ************/ + *************/ -GtkPopover { - border: 1px solid; - border-radius: 0px; +.popover { + background-clip: initial; + margin: 10px; + padding: 2px; border-color: @border_color; + border: 1px solid; + border-radius: 2px; background-color: @theme_bg_color; - background-clip: border-box; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 1.0), + shade(@theme_bg_color, 0.85)); + box-shadow: 0 1px 5px @wm_shadow; + text-shadow: none; + icon-shadow: none; +} + +.popover > .list, +.popover > .view, +.popover > .toolbar .popover.osd > .toolbar, +.popover > .inline-toolbar .popover.osd > .toolbar, +.popover > .search-bar .popover.osd > .toolbar, +.popover > .location-bar .popover.osd > .toolbar, +.popover > .toolbar .popover.osd > .inline-toolbar, +.popover > .inline-toolbar .popover.osd > .inline-toolbar, +.popover > .search-bar .popover.osd > .inline-toolbar, +.popover > .location-bar .popover.osd > .inline-toolbar, +.popover > .toolbar .popover.osd > .search-bar, +.popover > .inline-toolbar .popover.osd > .search-bar, +.popover > .search-bar .popover.osd > .search-bar, +.popover > .location-bar .popover.osd > .search-bar, +.popover > .toolbar .popover.osd > .location-bar, +.popover > .inline-toolbar .popover.osd > .location-bar, +.popover > .search-bar .popover.osd > .location-bar, +.popover > .location-bar .popover.osd > .location-bar { + border-style: none; + background-color: transparent; +} + +.popover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_fg_color,0.1); + text-shadow: none; + background-color: transparent; + icon-shadow: none; + border: 0; +} + +.popover.osd { + background-image: none; + background-color: alpha(shade(#3E403D, 0.85), 0.75); + border: 1px solid black; + box-shadow: none; + color: @theme_selected_fg_color; +} +.popover.osd .toolbar { + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; +} +.popover.osd .button { + text-shadow: 0 -1px @osd_text_shadow; + icon-shadow: 0 -1px @osd_text_shadow; +} +.popover.osd .button:active, +.popover.osd .button:checked { + box-shadow: none; +} +.popover.osd .button:insensitive { + color: alpha(@theme_selected_fg_color, 0.4); +} + +.popover .list { + background-color: @theme_base_color; +} + +GtkModelButton.button { + color: @theme_fg_color; + border-radius: 3px; +} + +GtkModelButton.button:checked, +GtkModelButton.button:active, +GtkModelButton.button:insensitive, +GtkModelButton.button:active:insensitive, +GtkModelButton.button:checked:insensitive, +GtkModelButton.button, +GtkModelButton.button:focus, +GtkModelButton.button:active:focus, +GtkModelButton.button:checked:focus { + color: @theme_fg_color; + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; + border-radius: 3px; +} + +GtkModelButton.button:checked:hover, +GtkModelButton.button:active:hover, +GtkModelButton.button:hover, +GtkModelButton.button:selected { + color: @theme_selected_fg_color; + background-image: linear-gradient(to bottom, + shade(@theme_selected_bg_color, 1.1), + shade(@theme_selected_bg_color, 0.8)); + text-shadow: none; + border-width: 2px; + border-color: @border_color; + border-radius: 3px; } -GtkPopover > .toolbar, -GtkPopover.osd > .toolbar .button { +GtkPopover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_text_color,0.4); + text-shadow: none; background-color: transparent; + icon-shadow: none; + border: 0; } diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css index db7572be..34de43b1 100644 --- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css +++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css @@ -255,6 +255,7 @@ @define-color osd_bg_color @theme_tooltip_bg_color; @define-color osd_fg_color @theme_tooltip_fg_color; @define-color osd_border_color @theme_tooltip_border_color; +@define-color osd_text_shadow alpha(black, 0.75); /*************** * progressbar * @@ -427,6 +428,9 @@ @define-color trough_gradient_a shade(@core_color_b, 0.81); @define-color trough_gradient_b shade(@core_color_b, 0.90); + +@define-color wm_shadow alpha(black, 0.5); + /*********** * imports * ***********/ diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css index d47a19f0..7762b0b8 100644 --- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css @@ -1958,19 +1958,131 @@ GtkHeaderBar .header-bar { padding: 5px 4px 4px 4px; } -/************ +/************* * Popovers * - ************/ + *************/ -GtkPopover { - border: 1px solid; - border-radius: 0px; +.popover { + background-clip: initial; + margin: 10px; + padding: 2px; border-color: @border_color; + border: 1px solid; + border-radius: 2px; background-color: @theme_bg_color; - background-clip: border-box; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 1.0), + shade(@theme_bg_color, 0.85)); + box-shadow: 0 1px 5px @wm_shadow; + text-shadow: none; + icon-shadow: none; +} + +.popover > .list, +.popover > .view, +.popover > .toolbar .popover.osd > .toolbar, +.popover > .inline-toolbar .popover.osd > .toolbar, +.popover > .search-bar .popover.osd > .toolbar, +.popover > .location-bar .popover.osd > .toolbar, +.popover > .toolbar .popover.osd > .inline-toolbar, +.popover > .inline-toolbar .popover.osd > .inline-toolbar, +.popover > .search-bar .popover.osd > .inline-toolbar, +.popover > .location-bar .popover.osd > .inline-toolbar, +.popover > .toolbar .popover.osd > .search-bar, +.popover > .inline-toolbar .popover.osd > .search-bar, +.popover > .search-bar .popover.osd > .search-bar, +.popover > .location-bar .popover.osd > .search-bar, +.popover > .toolbar .popover.osd > .location-bar, +.popover > .inline-toolbar .popover.osd > .location-bar, +.popover > .search-bar .popover.osd > .location-bar, +.popover > .location-bar .popover.osd > .location-bar { + border-style: none; + background-color: transparent; +} + +.popover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_fg_color,0.1); + text-shadow: none; + background-color: transparent; + icon-shadow: none; + border: 0; +} + +.popover.osd { + background-image: none; + background-color: alpha(shade(#3E403D, 0.85), 0.75); + border: 1px solid black; + box-shadow: none; + color: @theme_selected_fg_color; +} +.popover.osd .toolbar { + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; +} +.popover.osd .button { + text-shadow: 0 -1px @osd_text_shadow; + icon-shadow: 0 -1px @osd_text_shadow; +} +.popover.osd .button:active, +.popover.osd .button:checked { + box-shadow: none; +} +.popover.osd .button:insensitive { + color: alpha(@theme_selected_fg_color, 0.4); +} + +.popover .list { + background-color: @theme_base_color; +} + +GtkModelButton.button { + color: @theme_fg_color; + border-radius: 3px; +} + +GtkModelButton.button:checked, +GtkModelButton.button:active, +GtkModelButton.button:insensitive, +GtkModelButton.button:active:insensitive, +GtkModelButton.button:checked:insensitive, +GtkModelButton.button, +GtkModelButton.button:focus, +GtkModelButton.button:active:focus, +GtkModelButton.button:checked:focus { + color: @theme_fg_color; + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; + border-radius: 3px; +} + +GtkModelButton.button:checked:hover, +GtkModelButton.button:active:hover, +GtkModelButton.button:hover, +GtkModelButton.button:selected { + color: @theme_selected_fg_color; + background-image: linear-gradient(to bottom, + shade(@theme_selected_bg_color, 1.1), + shade(@theme_selected_bg_color, 0.8)); + text-shadow: none; + border-color: @border_color; + border-width: 2px; + border-radius: 3px; } -GtkPopover > .toolbar, -GtkPopover.osd > .toolbar .button { +GtkPopover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_text_color,0.4); + text-shadow: none; background-color: transparent; + icon-shadow: none; + border: 0; } diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css index f7fcdcec..0304deb2 100644 --- a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css +++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css @@ -255,6 +255,7 @@ @define-color osd_bg_color @theme_tooltip_bg_color; @define-color osd_fg_color @theme_tooltip_fg_color; @define-color osd_border_color @theme_tooltip_border_color; +@define-color osd_text_shadow alpha(black, 0.75); /*************** * progressbar * @@ -427,6 +428,9 @@ @define-color trough_gradient_a shade(@core_color_b, 0.81); @define-color trough_gradient_b shade(@core_color_b, 0.90); + +@define-color wm_shadow alpha(black, 0.5); + /*********** * imports * ***********/ diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css index 26f76d85..66743229 100644 --- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css @@ -1953,19 +1953,131 @@ GtkHeaderBar .header-bar { padding: 5px 4px 4px 4px; } -/************ +/************* * Popovers * - ************/ + *************/ -GtkPopover { - border: 1px solid; - border-radius: 0px; +.popover { + background-clip: initial; + margin: 10px; + padding: 2px; border-color: @border_color; + border: 1px solid; + border-radius: 2px; background-color: @theme_bg_color; - background-clip: border-box; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 1.0), + shade(@theme_bg_color, 0.85)); + box-shadow: 0 1px 5px @wm_shadow; + text-shadow: none; + icon-shadow: none; +} + +.popover > .list, +.popover > .view, +.popover > .toolbar .popover.osd > .toolbar, +.popover > .inline-toolbar .popover.osd > .toolbar, +.popover > .search-bar .popover.osd > .toolbar, +.popover > .location-bar .popover.osd > .toolbar, +.popover > .toolbar .popover.osd > .inline-toolbar, +.popover > .inline-toolbar .popover.osd > .inline-toolbar, +.popover > .search-bar .popover.osd > .inline-toolbar, +.popover > .location-bar .popover.osd > .inline-toolbar, +.popover > .toolbar .popover.osd > .search-bar, +.popover > .inline-toolbar .popover.osd > .search-bar, +.popover > .search-bar .popover.osd > .search-bar, +.popover > .location-bar .popover.osd > .search-bar, +.popover > .toolbar .popover.osd > .location-bar, +.popover > .inline-toolbar .popover.osd > .location-bar, +.popover > .search-bar .popover.osd > .location-bar, +.popover > .location-bar .popover.osd > .location-bar { + border-style: none; + background-color: transparent; +} + +.popover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_fg_color,0.1); + text-shadow: none; + background-color: transparent; + icon-shadow: none; + border: 0; +} + +.popover.osd { + background-image: none; + background-color: alpha(shade(#3E403D, 0.85), 0.75); + border: 1px solid black; + box-shadow: none; + color: @theme_selected_fg_color; +} +.popover.osd .toolbar { + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; +} +.popover.osd .button { + text-shadow: 0 -1px @osd_text_shadow; + icon-shadow: 0 -1px @osd_text_shadow; +} +.popover.osd .button:active, +.popover.osd .button:checked { + box-shadow: none; +} +.popover.osd .button:insensitive { + color: alpha(@theme_selected_fg_color, 0.4); +} + +.popover .list { + background-color: @theme_base_color; +} + +GtkModelButton.button { + color: @theme_fg_color; + border-radius: 3px; +} + +GtkModelButton.button:checked, +GtkModelButton.button:active, +GtkModelButton.button:insensitive, +GtkModelButton.button:active:insensitive, +GtkModelButton.button:checked:insensitive, +GtkModelButton.button, +GtkModelButton.button:focus, +GtkModelButton.button:active:focus, +GtkModelButton.button:checked:focus { + color: @theme_fg_color; + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; + border-radius: 3px; +} + +GtkModelButton.button:checked:hover, +GtkModelButton.button:active:hover, +GtkModelButton.button:hover, +GtkModelButton.button:selected { + color: @theme_selected_fg_color; + background-image: linear-gradient(to bottom, + shade(@theme_selected_bg_color, 1.1), + shade(@theme_selected_bg_color, 0.8)); + text-shadow: none; + border-width: 2px; + border-color: @border_color; + border-radius: 3px; } -GtkPopover > .toolbar, -GtkPopover.osd > .toolbar .button { +GtkPopover .separator { + font-size: 80%; + font-weight: bold; + color: alpha(@theme_text_color,0.4); + text-shadow: none; background-color: transparent; + icon-shadow: none; + border: 0; } diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css old mode 100755 new mode 100644 index 466dcd12..71d42d77 --- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css +++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css @@ -255,6 +255,7 @@ @define-color osd_bg_color @theme_tooltip_bg_color; @define-color osd_fg_color @theme_tooltip_fg_color; @define-color osd_border_color @theme_tooltip_border_color; +@define-color osd_text_shadow alpha(black, 0.75); /*************** * progressbar * @@ -427,6 +428,9 @@ @define-color trough_gradient_a shade(@core_color_b, 0.81); @define-color trough_gradient_b shade(@core_color_b, 0.90); + +@define-color wm_shadow alpha(black, 0.5); + /*********** * imports * ***********/ -- cgit v1.2.1