From 50742126652a0424483d223f7d348f31da65a209 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Thu, 17 Sep 2015 22:40:01 +0200 Subject: Gtk3 Contrast High themes: support real OSD --- .../ContrastHighInverse/gtk-3.0/gtk-widgets.css | 386 +++++++++++++++++++-- desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css | 42 ++- 2 files changed, 395 insertions(+), 33 deletions(-) (limited to 'desktop-themes/ContrastHighInverse') diff --git a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css index 82f2c083..ef3b6142 100644 --- a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css @@ -1892,60 +1892,398 @@ GtkIconView.view.cell { /******* * OSD * *******/ -.osd { - color: @theme_selected_fg_color; - background-color: @theme_selected_bg_color; + +.background.osd { + color: @osd_fg; + background-color: @osd_bg; } -.osd.toolbar { - padding: 20px; +GtkOverlay.osd { + background-color: transparent; +} +.osd.frame { + background-clip: border-box; + background-origin: border-box; +} + +.osd.button, +.osd.button:active, +.osd.button:checked, +.osd .button, +.osd .button:active, +.osd .button:checked { + border-width: 1px; border-style: solid; - border-color: @theme_internal_bg; - border-width: 2px; + border-image: none; + border-radius: 5px; +} - -GtkToolbar-button-relief: normal; +.osd .button { + border-color: shade (@theme_bg_color, 0.4); +} +.osd .button:insensitive { + border-color: alpha(@osd_button_border,0.5); } +.osd .button:hover, +.osd .button:active, +.osd .button:checked { + border-color: shade (@theme_selected_bg_color, 0.5); +} + +.osd.button, .osd .button { - padding: 4px; - color: @theme_fg_color; - background-color: @theme_internal_bg; + padding: 6px; + background-image: linear-gradient(to bottom, + @osd_button_bg_a, + @osd_button_bg_b 68%, + @osd_button_bg_c); + color: @osd_button_fg; + text-shadow: 0 -1px @osd_button_shadow; + icon-shadow: 0 -1px @osd_button_shadow; } -.osd GtkToolButton .button, -.osd .button:only-child { - border-width: 2px; +.osd.button { + padding: 8px; +} + +.osd.button, +.osd.button:active, +.osd.button:checked { + border-color: transparent; +} + +.osd.button, +.osd.button:prelight, +.osd.button:active, +.osd.button:checked { + background-color: shade(@osd_bg, 1.10); +} + +.osd .button, +.osd .button:prelight, +.osd .button:active, +.osd .button:checked { + background-color: transparent; +} + +.osd.button:insensitive, +.osd .button:insensitive { + background-image: none; + background-color: @osd_button_bg_insensitive; +} + +.osd.button:active:insensitive, +.osd .button:active:insensitive, +.osd.button:checked:insensitive, +.osd .button:checked:insensitive { + background-image: none; + background-color: @osd_button_bg_insensitive_active; +} + +.osd.button:hover, +.osd .button:hover { + color: @osd_button_fg_hover; +} + +.osd.button:active, +.osd.button:hover:active, +.osd .button:active, +.osd .button:hover:active, +.osd.button:checked, +.osd.button:hover:checked, +.osd .button:checked, +.osd .button:hover:checked { + color: @osd_button_fg_active; +} + +.osd.button:insensitive, +.osd.button:active *:insensitive, +.osd.button:checked *:insensitive, +.osd .button:insensitive, +.osd .button:active *:insensitive, +.osd .button:checked *:insensitive { + color: @osd_button_fg_insensitive; + text-shadow: none; + icon-shadow: none; +} + +.osd.button:hover, +.osd .button:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_hover_a, + @osd_button_bg_hover_b 68%, + @osd_button_bg_hover_c); +} + +.osd.button:active, +.osd.button:active:hover, +.osd .button:active, +.osd .button:active:hover, +.osd GtkMenuButton.menu-button:active, +.osd.button:checked, +.osd.button:checked:hover, +.osd .button:checked, +.osd .button:checked:hover, +.osd GtkMenuButton.menu-button:checked { + background-image: linear-gradient(to bottom, + @osd_button_bg_active_a, + @osd_button_bg_active_b 20%, + @osd_button_bg_active_c); +} + +.osd .linked .button:active:first-child { + border-left-width: 1px; +} + +.osd .linked .button:active:last-child { + border-right-width: 1px; +} + +.osd GtkMenuButton.menu-button:active { + background-color: transparent; + border-color: @osd_button_border; +} + +.osd GtkMenuButton.menu-button:active { + color: @osd_button_fg_active; + text-shadow: 0 -1px @osd_button_shadow; +} + + +.osd.toolbar { + color: @osd_fg; + text-shadow: 0 1px @osd_text_shadow; + padding: 12px 8px; + border-style: solid; + border-width: 1px; + border-color: shade (@theme_fg_color, 1.0); + border-radius: 2px; + background-image: linear-gradient(to bottom, + @osd_toolbar_bg_a, + @osd_toolbar_bg_b 63%, + @osd_toolbar_bg_c); + background-color: transparent; + -GtkToolbar-button-relief: normal; +} + +.osd.toolbar .flat.button.image-button { + box-shadow: none; +} + +.osd.toolbar .button, +.osd.toolbar .button:hover, +.osd.toolbar .button:active, +.osd.toolbar .button:checked, +.osd.toolbar .button:active:hover, +.osd.toolbar .button:insensitive, +.osd.toolbar .linked .button, +.osd.toolbar .linked .button:hover, +.osd.toolbar .linked .button:active, +.osd.toolbar .linked .button:checked, +.osd.toolbar .linked .button:active:hover, +.osd.toolbar .linked .button:insensitive { + border-color: shade (@theme_fg_color, 1.0); + border-style: solid; + border-image: none; + padding: 12px; + border-radius: 0px; +} + +.osd.toolbar .button:active, +.osd.toolbar .button:active:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_active_a, + @osd_button_bg_active_b 20%, + @osd_button_bg_active_c); +} + +.osd.toolbar .button:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_hover_a, + @osd_button_bg_hover_b 68%, + @osd_button_bg_hover_c); +} + +.osd.toolbar .button:first-child, +.osd.toolbar .button:hover:first-child, +.osd.toolbar .button:active:first-child, +.osd.toolbar .button:active:hover:first-child { + border-radius: 3px 0 0 3px; + border-width: 1px 0 1px 1px; + box-shadow: inset -1px 0 @osd_button_inset; +} + +.osd.toolbar .button:last-child, +.osd.toolbar .button:hover:last-child, +.osd.toolbar .button:active:last-child, +.osd.toolbar .button:active:hover:last-child { + box-shadow: none; + border-radius: 0 3px 3px 0; + border-width: 1px 1px 1px 0; +} + +.osd.toolbar .button:only-child, +.osd.toolbar .button:hover:only-child, +.osd.toolbar .button:active:only-child, +.osd.toolbar .button:active:hover: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: 3px; border-style: solid; + box-shadow: none; } -.osd .button:hover { - color: @theme_selected_fg_color; +.osd.toolbar .separator { + color: shade(@osd_lowlight, 0.80); } -.osd .button:active { - color: @theme_fg_color; - background-color: @theme_base_color; +/* used by gnome-settings-daemon's media-keys OSD */ +.osd.trough { + background-color: @osd_trough_bg; + border-width: 0; +} + +.osd.progressbar { + background-color: @osd_fg; +} + +.osd .scale.trough { + border-color: shade (@theme_fg_color, 1.0); + border-image: none; + /* this defines the bg color of the played segment */ + background-color: @osd_scale_trough_bg_color; +} + +.osd .scale.trough.highlight { + background-image: none; + background-color: @theme_highlight_color; +} + +.osd .scale.trough:insensitive, +.osd .scale.trough.highlight:insensitive { + background-image: none; + background-color: transparent; +} + +.osd .scale.slider { + margin: 0px; +} + +.osd .scale.fine-tune.slider { + margin: 2px; +} + +.osd .scale-popup.popover.background { + color: @osd_fg; + border-style: solid; + border-width: 1px; + border-color: shade (@theme_fg_color, 1.0); + border-radius: 2px; + background-image: linear-gradient(to bottom, + @osd_toolbar_bg_a, + @osd_toolbar_bg_b 63%, + @osd_toolbar_bg_c); + background-color: transparent; + padding: 2px 0px; } +.osd .scale-popup.popover.background .button.flat.image-button { + background-image: linear-gradient(to bottom, + @osd_button_bg_a, + @osd_button_bg_b 68%, + @osd_button_bg_c); + border-radius: 3px; + border-width: 1px; + padding: 6px; +} + +.osd .scale-popup.popover.background .button.flat.image-button:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_hover_a, + @osd_button_bg_hover_b 78%, + @osd_button_bg_hover_c); + box-shadow: none; +} + +.osd .scale-popup.popover.background .button.flat.image-button:insensitive { + border-color: alpha (shade(@theme_bg_color, 0.4), 0.0); + background-image: none; + background-color: transparent; +} + +.osd GtkProgressBar, GtkProgressBar.osd { - -GtkProgressBar-min-horizontal-bar-height: 12px; + padding: 0; + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 3px; + -GtkProgressBar-min-horizontal-bar-height: 3px; } +.osd GtkProgressBar.trough, GtkProgressBar.osd.trough { padding: 0; - border-radius: 0; - background-color: transparent; + border-image: none; border-style: none; + border-width: 0; + background-image: none; + background-color: transparent; + border-radius: 0; } +.osd GtkProgressBar.progressbar, GtkProgressBar.osd.progressbar { - background-color: @theme_highlight_color; - border-radius: 0; border-style: none; + background-color: @theme_selected_bg_color; + background-image: none; + border-radius: 0; +} + +.osd .view, +.osd.view { + background-color: @osd_view_bg; } +.osd .scrollbar.trough { + background-color: @osd_scrollbar_trough; +} + +.osd .scrollbar.slider { + background-color: @osd_scrollbar_slider; +} + +.osd .scrollbar.slider:hover { + background-color: @osd_scrollbar_slider_prelight; +} + +.osd .scrollbar.slider:active { + background-color: @osd_scrollbar_slider_active; +} + +.osd GtkIconView.cell:selected, +.osd GtkIconView.cell:selected:focus { + background-color: transparent; + border-style: solid; + border-radius: 15px; + border-width: 3px; + border-color: @osd_button_fg; + outline-color: transparent; +} + +/* used by Documents */ +.osd .page-thumbnail { + border-style: solid; + border-width: 1px; + border-color: @osd_lowlight; + /* when there's no pixbuf yet */ + background-color: @osd_bg; +} + + /************** * Calendar * **************/ diff --git a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css index f2ab569c..174bab53 100644 --- a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css +++ b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css @@ -97,35 +97,46 @@ @define-color wm_csd_solid_border_color shade (@theme_fg_color, 1.0); /******* - * OSD * + * osd * *******/ + @define-color osd_highlight #ffffff; @define-color osd_lowlight #525252; @define-color osd_base #212526; +@define-color osd_base_backdrop shade(@osd_base, 1.40); @define-color osd_fg #ededed; @define-color osd_bg alpha(@osd_base, 0.80); +@define-color osd_bg_backdrop alpha(@osd_base_backdrop, 0.90); @define-color osd_text_shadow alpha(black, 0.75); -@define-color osd_toolbar_bg_a alpha(@osd_base, 0.80); -@define-color osd_toolbar_bg_b alpha(#101010, 0.80); -@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.80); +@define-color osd_toolbar_bg_a alpha(@osd_base, 0.50); +@define-color osd_toolbar_bg_b alpha(#101010, 0.50); +@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.50); @define-color osd_button_bg_a alpha(@osd_highlight, 0.16); @define-color osd_button_bg_b alpha(@osd_lowlight, 0.05); @define-color osd_button_bg_c alpha(@osd_highlight, 0.12); -@define-color osd_button_bg_insensitive alpha(@osd_highlight, 0.25); -@define-color osd_button_bg_insensitive_active alpha(@osd_highlight, 0.16); +@define-color osd_button_bg_insensitive alpha(@osd_bg, 0.25); +@define-color osd_button_bg_insensitive_active alpha(@osd_bg, 0.16); @define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28); @define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14); @define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14); -@define-color osd_button_bg_active_a alpha(@osd_lowlight, 0.18); -@define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23); -@define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17); +@define-color osd_button_bg_active_a alpha(black, .9); +@define-color osd_button_bg_active_b alpha(black, 0.4); +@define-color osd_button_bg_active_c alpha(black, 0); + +@define-color osd_button_bg_backdrop alpha(@osd_bg, 0.18); +@define-color osd_button_bg_backdrop_hover alpha(@osd_bg, 0.25); +@define-color osd_button_bg_backdrop_active alpha(@osd_bg, 0.35); +@define-color osd_button_bg_backdrop_insensitive alpha(@osd_bg, 0.08); + +@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70); +@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95); @define-color osd_button_fg shade(@osd_fg, 0.80); @define-color osd_button_fg_hover shade(@osd_fg, 0.96); @@ -133,10 +144,23 @@ @define-color osd_button_fg_insensitive shade(@osd_fg, 0.70); @define-color osd_button_border alpha(@osd_highlight, 0.40); +@define-color osd_button_border_active alpha(@osd_highlight, 0.8); @define-color osd_button_inset shade(@osd_fg, 0.67); @define-color osd_button_shadow alpha(black, 0.35); @define-color osd_trough_bg alpha(@osd_button_fg, 0.10); +@define-color osd_scale_trough_bg_color alpha(shade(#a4c2e8, 0.35), 0.4); + +@define-color osd_view_bg alpha(@osd_bg, 0.60); +@define-color osd_view_bg_backdrop alpha(@osd_bg_backdrop, 0.60); + +@define-color osd_scrollbar_trough shade(@osd_base, 1.70); +@define-color osd_scrollbar_trough_backdrop shade(@osd_base_backdrop, 1.40); + +@define-color osd_scrollbar_slider shade(@osd_scrollbar_trough, 1.50); +@define-color osd_scrollbar_slider_prelight shade(@osd_scrollbar_trough, 1.80); +@define-color osd_scrollbar_slider_active shade(@osd_scrollbar_trough, 2.10); +@define-color osd_scrollbar_slider_backdrop shade(@osd_scrollbar_trough_backdrop, 1.50); /************************ * Info, Warnings, etc. * -- cgit v1.2.1