dotfiles/.config/gtk-3.0/gtk-widgets.css

/*
 * 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;
    border-color:@bg_color;
}

selection,
*: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;
}

/* accelerator is the hotkey, e.g. ctrl+q */
menuitem:disabled > label,
menuitem:disabled accelerator {
    color: mix(@fg_color, @bg_color, 0.5);
}

radio:checked {
    color: @acc1_color;
    background: @acc1_color;
}

radio {
    border-color: @acc1_color;
}

radio:hover:not(:checked) {
    background: @acc1_color;
}

check {
    border-color: @acc1_color;
}

button {
    border-radius: 0px;
    box-shadow: none;
    text-shadow: none;
}

scale {
    background: @bg_color;
}

scale trough highlight,
scale:hover trough highlight {
    background: @acc1_color;
}

slider,
slider:hover {
    background: @acc1_color;
    border-radius: 8px;
    margin-bottom: -10px;
    margin-top: -10px;
}

scale trough,
scale:hover trough {
    background: @bg_color;
}

button:hover label,
button:focus label,
switch:hover slider,
switch:focus slider {
    color: @acc1_color;
}

combobox menuitem:hover * {
    color: @acc1_color;
}

combobox button:hover arrow {
    color: @acc1_color;
}

/*
combobox button  {
    color: @fg_color;
    text-shadow: none;
}

*/

/*
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;
}

*/