You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

434 lines
7.9 KiB

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