Marc
3 years ago
13 changed files with 412 additions and 319 deletions
Split View
Diff Options
-
50.config/gtk-3.0/gtk-effects.css
-
362.config/gtk-3.0/gtk-widgets.css
-
112.config/gtk-3.0/shared.css
-
47.config/gtk-3.0/widgets/button.css
-
11.config/gtk-3.0/widgets/checkbox.css
-
5.config/gtk-3.0/widgets/headerbar.css
-
4.config/gtk-3.0/widgets/list.css
-
55.config/gtk-3.0/widgets/menu.css
-
19.config/gtk-3.0/widgets/notebook.css
-
17.config/gtk-3.0/widgets/popover.css
-
10.config/gtk-3.0/widgets/progressbar.css
-
5.config/gtk-3.0/widgets/tooltip.css
-
34.config/gtk-3.0/widgets/treeview.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; |
|||
} |
|||
|
|||
@ -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; |
|||
} |
|||
|
|||
*/ |
|||
|
|||
@ -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; |
|||
} |
|||
|
|||
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -1,5 +0,0 @@ |
|||
headerbar { |
|||
color: @fg_color; |
|||
background: @bg_color; |
|||
} |
|||
|
|||
@ -1,4 +0,0 @@ |
|||
list { |
|||
background: @bg_color; |
|||
color: @fg_color; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
|
|||
@ -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; |
|||
} |
|||
|
|||
@ -1,10 +0,0 @@ |
|||
treeview .trough, |
|||
treeview .trough:selected { |
|||
background: @bg_color; |
|||
} |
|||
|
|||
treeview .progressbar, |
|||
treeview .progressbar:disabled { |
|||
background: @acc1_color; |
|||
} |
|||
|
|||
@ -1,5 +0,0 @@ |
|||
tooltip.background { |
|||
background-color: @bg_color; |
|||
color: @fg_color; |
|||
border-color: @fg_color; |
|||
} |
|||
@ -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; |
|||
} |
|||
*/ |
|||