From a3fb37a2b73e58602ab41560c8a8de6b2877caac Mon Sep 17 00:00:00 2001 From: Ruben Rodriguez <ruben@trisquel.info> Date: Mon, 6 Dec 2021 11:41:36 -0500 Subject: [PATCH] greybird-gtk-theme: added osd themeing --- helpers/DATA/greybird-gtk-theme/osd.css | 485 ++++++++++++++++++++++++ helpers/make-greybird-gtk-theme | 7 +- 2 files changed, 488 insertions(+), 4 deletions(-) create mode 100644 helpers/DATA/greybird-gtk-theme/osd.css diff --git a/helpers/DATA/greybird-gtk-theme/osd.css b/helpers/DATA/greybird-gtk-theme/osd.css new file mode 100644 index 00000000..c547ec3f --- /dev/null +++ b/helpers/DATA/greybird-gtk-theme/osd.css @@ -0,0 +1,485 @@ + +/******* + * OSD * + *******/ + +@define-color osd_highlight #ffffff; +@define-color osd_lowlight #525252; +@define-color osd_base #0a1201; +@define-color osd_fg #ededed; +@define-color osd_bg alpha(@osd_base, 0.80); +@define-color osd_bg_backdrop alpha(shade(@osd_base, 1.40), 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_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_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_backdrop alpha(@osd_highlight, 0.18); +@define-color osd_button_bg_backdrop_hover alpha(@osd_highlight, 0.25); +@define-color osd_button_bg_backdrop_active alpha(@osd_highlight, 0.35); +@define-color osd_button_bg_backdrop_insensitive alpha(@osd_highlight, 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.85); +@define-color osd_button_fg_hover shade(@osd_fg, 0.96); +@define-color osd_button_fg_active shade(@osd_fg, 1.10); +@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70); +@define-color osd_button_border shade (#6699CC, 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_progressbar_background_a #6699CC; +@define-color osd_progressbar_background_b #6699CC; + + +.osd, +.background.osd { + color: @osd_fg; + background-image: none; + background-color: @osd_bg; + border-radius:20px; +} + +overlay.osd { + background-color: transparent; +} + +.osd.frame { + background-clip: border-box; + background-origin: border-box; +} + +.osd button, +.osd button:focus, +.osd button:checked, +.osd button:hover:active, +.osd button:focus:hover:active, +button.osd, +button.osd:focus, +button.osd:checked, +button.osd:hover:active, +button.osd:focus:hover:active { + border-width: 1px; + border-style: solid; + border-image: none; + border-color: @osd_button_border; + border-radius: 5px; + box-shadow: none; +} + +.osd button, +.osd button:hover, +.osd button:checked, +button.osd, +button.osd:hover, +button.osd:checked { + background-color: shade(@osd_bg, 1.10); + border-radius: 5px; + border-color: @osd_button_border; +} + +.osd button:hover, +.osd button:checked, +button.osd:hover, +button.osd:checked { + background-color: transparent; + box-shadow: none; +} + +.osd button:disabled, +button.osd:disabled { + background-image: none; + border-color: @osd_button_bg_insensitive; + background-color: transparent; + box-shadow: none; + color: @osd_button_fg_insensitive; +} + +.osd button:checked:disabled, +button.osd:checked:disabled { + background-image: none; + background-color: @osd_button_bg_insensitive_active; + color: @osd_button_fg_insensitive; +} + +.osd button, +.osd button:focus, +button.osd, +button.osd:focus { + padding: 4px; + 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: none; + -gtk-icon-shadow: 0 -1px @osd_button_shadow; +} + +.osd button:hover, +button.osd:hover, +.osd .linked button:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_hover_a, + @osd_button_bg_hover_b 68%, + @osd_button_bg_hover_c); + color: @osd_button_fg_hover; +} + +.osd button:checked, +.osd button:checked:hover, +.osd button:checked:hover:active, +.osd button:hover:active, +.osd button:focus:hover:active, +.osd button.popup:checked, /* GtkMenuButton */ +button.osd:checked, +button.osd:checked:hover, +button.osd:checked:hover:active, +button.osd:hover:active, +button.osd:focus:hover:active, +button.osd.menu-button:checked { + background-image: linear-gradient(to bottom, + @osd_button_bg_active_a, + @osd_button_bg_active_b 68%, + @osd_button_bg_active_c); + color: @osd_button_fg_active; + text-shadow: none; +} + +.osd button.popup:checked { + background-color: transparent; + border-color: @osd_button_border; +} + +/* ie. gnome-weather */ +.linked.stack-switcher.osd button { + border-width: 1px 0 1px 0px; + color: @osd_button_fg_hover; + text-shadow: none; +} + +.linked.stack-switcher.osd button:checked { + color: shade(@theme_fg_color, 1.00); +} + +.linked.stack-switcher.osd button:first-child { + border-width: 1px 1px 1px 1px; +} + +.linked.stack-switcher.osd button:last-child { + border-width: 1px 1px 1px 0px; +} + +.linked.stack-switcher.osd button:only-child { + border-width: 1px; +} + +/* ie. parole media-player */ +/* previous/play/next */ +.osd .horizontal .horizontal button { + padding: 5px 8px; +} + +.osd .horizontal .horizontal button:disabled { + border-color: @osd_button_bg_disabled; +} + +.osd .horizontal .horizontal label { + padding: 5px 5px; + background-color: transparent; + background-image: linear-gradient(to bottom, + @osd_button_bg_a, + @osd_button_bg_b 68%, + @osd_button_bg_c); + border-color: @osd_button_bg_insensitive; + border-style: solid; + border-width: 1px; + border-radius: 5px; +} + +toolbar.osd { + color: @osd_fg; + text-shadow: none; + padding: 10px; + border-style: solid; + border-width: 1px; + border-color: shade (@theme_selected_bg_color, 0.8); + border-radius: 7px; + background-image: linear-gradient(to left, + alpha(shade(@theme_selected_bg_color, 1.2), 0.7), + alpha(shade(@theme_selected_bg_color, 0.95), 0.7)); + background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4); + -GtkToolbar-button-relief: normal; +} + +toolbar.osd button, +toolbar.osd button:hover, +toolbar.osd button:focus, +toolbar.osd button:focus:hover, +toolbar.osd button:focus:hover:active, +toolbar.osd button:hover:active, +toolbar.osd .linked button +toolbar.osd .linked button:hover, +toolbar.osd .linked button:hover:active, +toolbar.osd .linked button:focus, +toolbar.osd .linked button:focus:hover, +toolbar.osd .linked button:focus:hover:active, +toolbar.osd button.scale.flat.image-button { + padding: 8px; + border-width: 1px; + border-radius: 5px; +} + +toolbar.osd button:first-child, +toolbar.osd .linked button:first-child, +toolbar.osd .linked button:focus:hover:first-child, +toolbar.osd .linked button:focus:hover:active:first-child { + border-radius: 5px 0 0 5px; + border-width: 1px 0 1px 1px; + box-shadow: inset -1px 0 @osd_button_inset; +} + +toolbar.osd button:last-child, +toolbar.osd .linked button:last-child, +toolbar.osd .linked button:focus:hover:last-child, +toolbar.osd .linked button:focus:hover:active:last-child { + box-shadow: none; + border-radius: 0 5px 5px 0; + border-width: 1px 1px 1px 0; +} + +toolbar.osd button:only-child, +toolbar.osd .linked button:only-child, +toolbar.osd toolitem button, +toolbar.osd toolitem button:only-child, +toolbar.osd toolitem button:last-child, +toolbar.osd toolitem button:first-child { + border-width: 1px; + border-radius: 5px; + border-style: solid; + box-shadow: none; +} + +toolbar.osd separator { + color: shade(@osd_lowlight, 0.80); +} + +/* used by gnome-settings-daemon's media-keys OSD + and Epiphany */ +.osd trough { + background-color: @osd_trough_bg; + border-width: 0; +} + +.osd .progressbar, +.osd progressbar { + background-color: @osd_fg; +} + +.osd scale trough:disabled, +.osd scale trough.highlight:disabled { + background-image: none; + background-color: transparent; +} + +.osd popover.background.scale-popup { + color: @osd_fg; + border-style: solid; + border-width: 1px; + border-color: shade (@theme_selected_bg_color, 0.8); + border-radius: 4px; + background-image: linear-gradient(to bottom, + alpha(shade(@theme_selected_bg_color, 1.2), 0.7), + alpha(shade(@theme_selected_bg_color, 0.95), 0.7)); + background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4); +} + +.osd popover.background.scale-popup 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: 4px; + border-width: 1px; + border-color: @osd_button_border; + box-shadow: none; + padding: 2px; +} + +.osd popover.background.scale-popup button.flat.image-button:hover { + background-image: linear-gradient(to bottom, + @osd_button_bg_hover_a, + @osd_button_bg_hover_b 68%, + @osd_button_bg_hover_c); + border-color: alpha(shade(@theme_selected_bg_color, 2.2), 0.8); +/* -gtk-image-effect: highlight; */ +} + +.osd popover.background.scale-popup button.flat.image-button:disabled { + background-image: none; + background-color: transparent; + border-image: none; + border-color: transparent; + box-shadow: none; +} + +.osd progressbar, +progressbar .osd { + padding: 0; +} + +.osd progressbar.horizontal, +progressbar.horizontal .osd { + min-height: 3px; +} + +.osd .trough, +.osd progressbar trough, +progressbar .osd trough { + padding: 0; + border-image: none; + border-style: none; + border-width: 0; + background-image: none; + background-color: shade (@theme_fg_color, 0.6); + border-radius: 2px; +} + +.osd .progressbar, +.osd progressbar, +progressbar .osd { + padding: 0; + -progressbar-xspacing: 0; + -progressbar-yspacing: 3px; + -progressbar-min-horizontal-bar-height: 3px; + border-style: none; + background-color: shade(@osd_progressbar_background_b, 1.3); + background-image: linear-gradient(to bottom, + @osd_progressbar_background_a, + @osd_progressbar_background_b); + border-radius: 2px; +} + +.osd view { + background-color: @osd_view_bg; +} + +.osd scrollbar trough.trough { + background-color: @osd_scrollbar_trough; +} + +.osd scrollbar trough.slider { + background-color: @osd_scrollbar_slider; +} + +.osd scrollbar trough.slider:hover { + background-color: @osd_scrollbar_slider_prelight; +} + +.osd scrollbar trough.slider:active { + background-color: @osd_scrollbar_slider_active; +} + +.osd iconview.cell:selected, +.osd iconview.cell:selected:focus { + background-color: transparent; + border-style: solid; + border-radius: 15px; + border-width: 3px; + border-color: @osd_button_fg; + outline-color: transparent; +} + +/* ie. colorchooser */ +.osd.popover { + background-image: none; + background-color: alpha(shade(#3D3E40, 0.85), 0.35); + border: 1px solid black; + box-shadow: none; + color: @theme_selected_fg_color; +} + +.osd.popover > grid { + text-shadow: 1px 1px alpha (#000000, 0.8); +} + +.osd.popover > grid > spinbutton { + color: @theme_selected_fg_color; + text-shadow: 1px 1px alpha (#000000, 0.8); +} + +.osd.popover spinbutton > button:hover, +.osd.popover spinbutton > button:active { + background-image: linear-gradient(to bottom, + alpha(shade(@theme_selected_bg_color, 1.2), 0.4), + alpha(shade(@theme_selected_bg_color, 0.95), 0.4)); + background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4); +} + +.osd.popover spinbutton.horizontal { + border: 1px solid black; + border-radius: 7px; +} + +.osd.popover spinbutton.horizontal > entry { + border-radius: 7px 0px 0px 7px; + background-color: transparent; + background-image: none; +} + +.osd.popover spinbutton.horizontal > button { + border-radius: 0px; + border-image: none; + border-style: none; +} + +.osd.popover spinbutton.horizontal > button:first-child { + border-radius: 0px; + border-image: none; +} + +.osd.popover spinbutton.horizontal > button:last-child { + border-radius: 0px 7px 7px 0px; + border-image: none; +} + +.osd.popover toolbar { + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; +} + +.osd.popover button { + text-shadow: none; + -gtk-icon-shadow: 0 -1px @osd_text_shadow; + background-color: transparent; +} + +.osd.popover button:checked { + box-shadow: none; +} + +.osd.popover button:disabled { + color: alpha(@theme_selected_fg_color, 0.4); +} + +/* 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; +} + diff --git a/helpers/make-greybird-gtk-theme b/helpers/make-greybird-gtk-theme index b14f3960..518bf1a0 100644 --- a/helpers/make-greybird-gtk-theme +++ b/helpers/make-greybird-gtk-theme @@ -16,8 +16,7 @@ # along with this program; if not, write to the Free Software # Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA - -VERSION=4 +VERSION=5 EXTERNAL='deb-src http://archive.ubuntu.com/ubuntu impish main universe' . ./config @@ -28,8 +27,8 @@ sed '/debhelper-compat/s/13/12/' -i debian/control sed 's/#398ee7/#6699CC/g' -i light/gtk-3.0/_colors.scss light/gtk-2.0/gtkrc dark/gtk-2.0/gtkrc #custom mate-panel and other mate enhancements -cat $DATA/mate.scss >> light/gtk-3.0/_others.scss -cat $DATA/mate.scss >> dark/gtk-3.0/_others.scss +cat $DATA/*.scss >> light/gtk-3.0/_others.scss +cat $DATA/*.scss >> dark/gtk-3.0/_others.scss echo '$panelgradient_color: #555555;' >> light/gtk-3.0/_colors.scss echo '@define-color content_view_bg #{"" + $panelgradient_color};' >> light/gtk-3.0/_colors_public.scss echo '@define-color content_view_bg #{"" + $panelgradient_color};' >> dark/gtk-3.0/_colors_public.scss -- GitLab