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.
379 lines
7.2 KiB
379 lines
7.2 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);
|
|
}
|
|
|
|
|
|
button {
|
|
border-radius: 0px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:hover label,
|
|
button:focus label,
|
|
switch:hover slider,
|
|
switch:focus slider {
|
|
color: @acc1_color;
|
|
}
|
|
|
|
/*
|
|
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;
|
|
}
|
|
|
|
*/
|
|
|