From 68f0745ccc664664770a3bf463aa6b06dda4ba1a Mon Sep 17 00:00:00 2001 From: Marc Date: Tue, 6 Apr 2021 10:36:58 +0200 Subject: [PATCH] major overhaul and simplifying stuff --- .config/gtk-3.0/gtk-effects.css | 50 ++++ .config/gtk-3.0/gtk-widgets.css | 362 ++++++++++++++++++++++++ .config/gtk-3.0/shared.css | 112 -------- .config/gtk-3.0/widgets/button.css | 47 --- .config/gtk-3.0/widgets/checkbox.css | 11 - .config/gtk-3.0/widgets/headerbar.css | 5 - .config/gtk-3.0/widgets/list.css | 4 - .config/gtk-3.0/widgets/menu.css | 55 ---- .config/gtk-3.0/widgets/notebook.css | 19 -- .config/gtk-3.0/widgets/popover.css | 17 -- .config/gtk-3.0/widgets/progressbar.css | 10 - .config/gtk-3.0/widgets/tooltip.css | 5 - .config/gtk-3.0/widgets/treeview.css | 34 --- 13 files changed, 412 insertions(+), 319 deletions(-) create mode 100644 .config/gtk-3.0/gtk-effects.css create mode 100644 .config/gtk-3.0/gtk-widgets.css delete mode 100644 .config/gtk-3.0/shared.css delete mode 100644 .config/gtk-3.0/widgets/button.css delete mode 100644 .config/gtk-3.0/widgets/checkbox.css delete mode 100644 .config/gtk-3.0/widgets/headerbar.css delete mode 100644 .config/gtk-3.0/widgets/list.css delete mode 100644 .config/gtk-3.0/widgets/menu.css delete mode 100644 .config/gtk-3.0/widgets/notebook.css delete mode 100644 .config/gtk-3.0/widgets/popover.css delete mode 100644 .config/gtk-3.0/widgets/progressbar.css delete mode 100644 .config/gtk-3.0/widgets/tooltip.css delete mode 100644 .config/gtk-3.0/widgets/treeview.css diff --git a/.config/gtk-3.0/gtk-effects.css b/.config/gtk-3.0/gtk-effects.css new file mode 100644 index 0000000..2bc156a --- /dev/null +++ b/.config/gtk-3.0/gtk-effects.css @@ -0,0 +1,50 @@ +/* + * disable ripple effects when overscrolling a list + * and dotted lines when end of list is not reached + */ + +/* -gtk-gradient(radial start_x, start_y, start_radius, end_x end_y, end_radius, color-stop (position, color), ...) */ +overshoot.top, +overshoot.bottom, +overshoot.left, +overshoot.right { + background: transparent; + background-repeat: no-repeat; + border: none; + box-shadow: none; +} + +overshoot.top { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent)); + background-size: 100% 60%; + background-position: center top; +} + +overshoot.bottom { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent)); + background-size: 100% 60%; + background-position: center bottom; +} + +overshoot.left { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent)); + background-size: 60% 100%; + background-position: left center; +} + +overshoot.right { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent)); + background-size: 60% 100%; + background-position: right center; +} + +undershoot.top, +undershoot.bottom, +undershoot.left, +undershoot.right { + background: transparent; + background-origin: content-box; + border: none; + box-shadow: none; +} + diff --git a/.config/gtk-3.0/gtk-widgets.css b/.config/gtk-3.0/gtk-widgets.css new file mode 100644 index 0000000..6bca11a --- /dev/null +++ b/.config/gtk-3.0/gtk-widgets.css @@ -0,0 +1,362 @@ +/* + * see here for theming tutorial + * https://ubuntu-mate.community/t/enabling-the-gtk-inspector-to-find-css-values-for-theme-styles/20150 +*/ + +/* CHEATSHEET + * + * MANIPULATE COLORS + * + * mix(color1, color2, number) + * mix(green, red, 0.5) + * lighter(color) + * darker(color) + * shade(color, number) + * alpha(color, number) + + * theme label that are descendants of window + * window label {} + + * theme entries that are DIRECT children of notebook + * notebook > entry {} + + * theme notebooks and anything within + * notebook {} + + * theme any widget within a box + * box * {} + + * theme any widget named main-entry + * #main-entry + + * theme label named title-label + * label#title-label {} + + * theme all widgets with the style class 'entry' + * .entry {} + + * theme entry of GtkSpinButton + * spinbutton entry {} + + * theme labels in the first notebook tab + * notebook tab:first-child label {} + + * theme pressed buttons + * button:active {} + + * theme buttons with mouse pointer over it + * button:hover {} + + * theme insensitive widgets + * *:disabled {} + + * theme checkbuttons that are checked + * checkbutton:checked {} + + * theme focused labels + * label:focus {} + + * theme inconsistent checkbuttons + * checkbutton:indeterminate {} + + * SELECTORS + * * any node + * E any node with name E + * E.class any E node with given style class + * E#id any E node with given ID + * E:nth-child({nth-child}) any E node which is the nth child of its parent node + * E:nth-last-child({nth-child}) any E node which is the nth child of its parent node, counting from the end + * E:first-child any E node which is the first child of its parent node + * E:last-child any E node which is the last child of its parent node + * E:only-child any E node which is the only child of its parent node + * E:link, E:visited any E node which represents a hyperlink, not yet visited / visited + * E:active, E:hover, E:focus any E node which is part of a widget with the corresponding state + * E:disabled any E node which is part of a widget which is disabled + * E:checked any E node which is part of a widget (e.g. radio of checkbutton) which is checked + * E:indeterminate any E node which is part of a widget (e.g. radio or checkbutton) which is in an indeterminate state + * E:backdrop, E:selected any E node which is part of a widget with the corresponding state + * E:not({selector}) any E node which does not match the simple selector + * E:dir(ltr), E:dir(rtl) any E node that has the corresponding text direction + * E:drop(active) any E node that is an active drop target for a current DND operation + * E F any F node which is a descendent of an E node + * E > F any F node which is a child of an E node + * E ~ F any F node which is preceded by an E node + * E + F any F node which is immediately preceded by an E node + + * APPS + * + * Thunar .thunar + * transmission-gtk .tr-workarea + */ + +/************* + * base states + *************/ + +* { + color: @fg_color; + background: @bg_color; +} + +*:selected:selected, +*:selected:focus { + background: @acc1_color; + color: @bg_color; +} + +*:hover { + color: @acc1_color; + background: @bg_color; +} + +*.progressbar { + background: darker(@acc1_color); +} + +treeview:hover { + color: @acc1_color; + background: @bg_color; +} + +/* transmission-gtk needs a different approach */ +.tr-workarea treeview:hover { + background: @acc1_color; + color: @bg_color; /* only working when hovering over a selected row */ +} + +.tr-workarea treeview.view:disabled { + color: mix(@fg_color, @bg_color, 0.5); +} + +treeview:selected { + color: @bg_color; + background: @acc1_color; +} + +treeview.progressbar:hover, +treeview.progressbar:selected { + background: darker(@acc1_color); +} + +/* trough is the empty area in the progress bar */ +progressbar trough, +treeview.view.trough { + background: @bg_color; +} + +menuitem:hover > label{ +color: @acc1_color; +} +menuitem:disabled > label { + color: mix(@fg_color, @bg_color, 0.5); +} + + +/* +menu { + background: @bg_color; + padding: 0.4em 0.4em; +} + +menu menuitem { + background: @bg_color; + color: @fg_color; + padding: 0.4em; + margin: 1px; +} + +menuitem:hover { + background: @acc1_color; + color: @bg_color; +} + +menuitem:hover > *, +combobox menuitem:hover * { + color: @bg_color; +} +*/ + +/* + * NEEDS TO BE INTEGRATED! + +*:backdrop:backdrop, +*:disabled:disabled { + color: mix(@fg_color, @bg_color, 0.4); + -gtk-icon-effect: dim; +} + +box { + background: @bg_color; + color: @fg_color; +} + +label { + color: @fg_color; +} + + + +entry { + padding: 3px; + border-width: 1px; + background-color: @bg_color; + color: @fg_color; +} + +entry:backdrop, +entry:disabled { + background: shade(@bg_color, 0.94); +} + +slider:focus, +switch:focus slider, +spinbutton:focus, +notebook:focus tab:checked, +radio:focus, +check:focus, +entry:focus, +button:focus { + border-color: @acc2_color; +} + + +switch:checked { + background: @acc1_color; + color: @bg_color; +} +switch { + background: @acc1_color; + color: @bg_color; +} + +button, +switch slider { + background: @bg_color; + color: @fg_color; + + border-radius: 0px; + padding: 1px; + border-width: 0px; + border-color: transparent; +} + +combobox { + border-color: #00ff00; + color: #ff0000; + box-shadow: #0000ff; +} +button.flat { + background: none; + border-color: transparent; +} + +button:hover, +button:focus, +switch:hover slider, +switch:focus slider { +} + +button:backdrop, +button:disabled, +switch:backdrop slider, +switch:disabled slider { + background: @bg_color; +} + + +radio, +check { + background-color: @bg_color; + border-color: @fg_color; +} + +radio:hover, +check:hover { + border-color: @fg_color; + color: @fg_color; +} + + +headerbar { + color: @fg_color; + background: @bg_color; +} + +list { + background: @bg_color; + color: @fg_color; +} +menubar, +actionbar, +toolbar, +placessidebar list { + background: @bg_color; + color: @fg_color; +} + +toolbar { + padding: 1px; +} + +actionbar { + padding: 0.5em; + border-top-width: 1px; +} + +.inline-toolbar { + padding: 0.5em; + border-width: 0 1px 1px; +} + +actionbar button, +toolbar button { + padding: 3px; +} + +menu separator { + background-color: @acc2_color; + margin: 0.2em; + min-width: 1px; + min-height: 1px; +} + +notebook, +notebook tab:checked { + background: @acc1_color; + color: @bg_color; +} + +notebook tab, +notebook header { + background: @bg_color; +} + +notebook tab:active { + background-color: #ff0000; +} + +popover.background, +toolbar.osd { + background: #ff0000; +} + +popover modelbutton { + background: #00ff00; +} + +popover modelbutton:hover { + background: #0000ff; +} + + + +* { + outline-color: #0000ff; + outline-style: solid; + outline-offset: 0px; + outline-width: 0px; + -gtk-outline-radius: 0px; +} + +*/ + diff --git a/.config/gtk-3.0/shared.css b/.config/gtk-3.0/shared.css deleted file mode 100644 index 342afb9..0000000 --- a/.config/gtk-3.0/shared.css +++ /dev/null @@ -1,112 +0,0 @@ -/* - * see here for theming tutorial - * https://ubuntu-mate.community/t/enabling-the-gtk-inspector-to-find-css-values-for-theme-styles/20150 -*/ - -/************* - * base states - *************/ - -.background { - color: @fg_color; - background: @bg_color; -} - - -/* inherit colors from parent */ -* { - background-color: inherit; - color: inherit; - border-color: shade(@bg_color, 0.8); -} - -*:hover { - color: @acc1_color; -} -/* -.frame { - border-color: shade(@bg_color, 0.8); -} - -.frame.flat { - border: none; -} -*/ - -.view, -.cell { - background: @bg_color; - color: @fg_color; -} - -.view:hover { - color: @acc1_color; -} - -.view:selected { - color: @bg_color; -} - -selection, -*:selected:selected, -*:selected:focus { - background-color: @acc1_color; - color: @bg_color; -} - - -/* -* { - border-color: @bg_color; - border-style: solid; - - -GtkTreeView-expander-size: 11; -} -*/ - -selection, -*:selected:selected, -*:selected:focus { - background-color: @acc1_color; - color: @bg_color; -} - -box { - background: @bg_color; - color: @fg_color; -} - -label { - color: @fg_color; -} - - -*:backdrop:backdrop, -*:disabled:disabled { - color: mix(@fg_color, @bg_color, 0.4); - -gtk-icon-effect: dim; -} - -entry { - padding: 3px; - border-width: 1px; - background-color: @bg_color; - color: @fg_color; -} - -entry:backdrop, -entry:disabled { - background: shade(@bg_color, 0.94); -} - -slider:focus, -switch:focus slider, -spinbutton:focus, -notebook:focus tab:checked, -radio:focus, -check:focus, -entry:focus, -button:focus { - border-color: @acc2_color; -} - diff --git a/.config/gtk-3.0/widgets/button.css b/.config/gtk-3.0/widgets/button.css deleted file mode 100644 index 3862dde..0000000 --- a/.config/gtk-3.0/widgets/button.css +++ /dev/null @@ -1,47 +0,0 @@ -/* buttons, also headings from table views like thunar - */ - -switch:checked { - background: @acc1_color; - color: @bg_color; -} -switch { - background: @acc1_color; - color: @bg_color; -} - -button, -switch slider { - background: @bg_color; - color: @fg_color; - - border-radius: 0px; - padding: 0.5em; - border-width: 0px; - border-color: transparent; -} - -combobox { - border-color: #00ff00; - color: #ff0000; - box-shadow: #0000ff; -} -button.flat { - background: none; - border-color: transparent; -} - -button:hover, -button:focus, -switch:hover slider, -switch:focus slider { - color: @bg_color; - background-color: @acc1_color; -} - -button:backdrop, -button:disabled, -switch:backdrop slider, -switch:disabled slider { - background: @bg_color; -} diff --git a/.config/gtk-3.0/widgets/checkbox.css b/.config/gtk-3.0/widgets/checkbox.css deleted file mode 100644 index f9fb7df..0000000 --- a/.config/gtk-3.0/widgets/checkbox.css +++ /dev/null @@ -1,11 +0,0 @@ -radio, -check { - background-color: @bg_color; - border-color: @fg_color; -} - -radio:hover, -check:hover { - border-color: @fg_color; - color: @fg_color; -} diff --git a/.config/gtk-3.0/widgets/headerbar.css b/.config/gtk-3.0/widgets/headerbar.css deleted file mode 100644 index c359527..0000000 --- a/.config/gtk-3.0/widgets/headerbar.css +++ /dev/null @@ -1,5 +0,0 @@ -headerbar { - color: @fg_color; - background: @bg_color; -} - diff --git a/.config/gtk-3.0/widgets/list.css b/.config/gtk-3.0/widgets/list.css deleted file mode 100644 index ee41c45..0000000 --- a/.config/gtk-3.0/widgets/list.css +++ /dev/null @@ -1,4 +0,0 @@ -list { - background: @bg_color; - color: @fg_color; -} diff --git a/.config/gtk-3.0/widgets/menu.css b/.config/gtk-3.0/widgets/menu.css deleted file mode 100644 index 03b48c3..0000000 --- a/.config/gtk-3.0/widgets/menu.css +++ /dev/null @@ -1,55 +0,0 @@ -menubar, -actionbar, -toolbar, -placessidebar list { - background: @bg_color; - color: @fg_color; -} - -toolbar { - padding: 1px; -} - -actionbar { - padding: 0.5em; - border-top-width: 1px; -} - -.inline-toolbar { - padding: 0.5em; - border-width: 0 1px 1px; -} - -menu { - background: @bg_color; - padding: 0.4em 0.4em; -} - -menu menuitem { - background: @bg_color; - color: @fg_color; - padding: 0.4em; - margin: 1px; -} - -menuitem:hover { - background: @acc1_color; - color: @bg_color; -} - -menuitem:hover > *, -combobox menuitem:hover * { - color: @bg_color; -} - -actionbar button, -toolbar button { - padding: 0.2em; -} - -menu separator { - background-color: @acc2_color; - margin: 0.2em; - min-width: 1px; - min-height: 1px; -} diff --git a/.config/gtk-3.0/widgets/notebook.css b/.config/gtk-3.0/widgets/notebook.css deleted file mode 100644 index 6a8e7b7..0000000 --- a/.config/gtk-3.0/widgets/notebook.css +++ /dev/null @@ -1,19 +0,0 @@ -/* - * for menu popups, at least the headers - */ - -notebook, -notebook tab:checked { - background: @acc1_color; - color: @bg_color; -} - -notebook tab, -notebook header { - background: @bg_color; -} - -notebook tab:active { - background-color: #ff0000; -} - diff --git a/.config/gtk-3.0/widgets/popover.css b/.config/gtk-3.0/widgets/popover.css deleted file mode 100644 index 724f2e5..0000000 --- a/.config/gtk-3.0/widgets/popover.css +++ /dev/null @@ -1,17 +0,0 @@ -/* - * not sure yet whats up here - */ - -popover.background, -toolbar.osd { - background: #ff0000; -} - -popover modelbutton { - background: #00ff00; -} - -popover modelbutton:hover { - background: #0000ff; -} - diff --git a/.config/gtk-3.0/widgets/progressbar.css b/.config/gtk-3.0/widgets/progressbar.css deleted file mode 100644 index a91b048..0000000 --- a/.config/gtk-3.0/widgets/progressbar.css +++ /dev/null @@ -1,10 +0,0 @@ -treeview .trough, -treeview .trough:selected { - background: @bg_color; -} - -treeview .progressbar, -treeview .progressbar:disabled { - background: @acc1_color; -} - diff --git a/.config/gtk-3.0/widgets/tooltip.css b/.config/gtk-3.0/widgets/tooltip.css deleted file mode 100644 index 7d50544..0000000 --- a/.config/gtk-3.0/widgets/tooltip.css +++ /dev/null @@ -1,5 +0,0 @@ -tooltip.background { - background-color: @bg_color; - color: @fg_color; - border-color: @fg_color; -} diff --git a/.config/gtk-3.0/widgets/treeview.css b/.config/gtk-3.0/widgets/treeview.css deleted file mode 100644 index 8ab1e01..0000000 --- a/.config/gtk-3.0/widgets/treeview.css +++ /dev/null @@ -1,34 +0,0 @@ -/* Beispiel aus -https://github.com/EliverLara/Ant/blob/master/gtk-3.0/gtk-widgets.css -*/ - -/* -GtkTreeView { - -GtkTreevew-vertical-separator: 6; - -GtkWidget-focus-line-width: 1; - -GtkWidget-focus-padding: 1; -} - -GtkTreeView { - border: 1px solid @bg_color; -} - -GtkTreeView.view:selected { - border: none; -} - -GtkTreeView.dnd { - padding: 6px 6px; - border-width: 1px; - border-style: solid; - border-color: shade(@selected_bg_color, 0.9); - border-radius: 0; -} - -GtkTreeView .entry { - padding: 6px 6px; - border-radius: 0; - background-color: @base_color; - background-image: none; -} -*/