Browse Source

major overhaul and simplifying stuff

master
Marc 3 years ago
parent
commit
68f0745ccc
13 changed files with 412 additions and 319 deletions
  1. 50
      .config/gtk-3.0/gtk-effects.css
  2. 362
      .config/gtk-3.0/gtk-widgets.css
  3. 112
      .config/gtk-3.0/shared.css
  4. 47
      .config/gtk-3.0/widgets/button.css
  5. 11
      .config/gtk-3.0/widgets/checkbox.css
  6. 5
      .config/gtk-3.0/widgets/headerbar.css
  7. 4
      .config/gtk-3.0/widgets/list.css
  8. 55
      .config/gtk-3.0/widgets/menu.css
  9. 19
      .config/gtk-3.0/widgets/notebook.css
  10. 17
      .config/gtk-3.0/widgets/popover.css
  11. 10
      .config/gtk-3.0/widgets/progressbar.css
  12. 5
      .config/gtk-3.0/widgets/tooltip.css
  13. 34
      .config/gtk-3.0/widgets/treeview.css

50
.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;
}

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

112
.config/gtk-3.0/shared.css

@ -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;
}

47
.config/gtk-3.0/widgets/button.css

@ -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;
}

11
.config/gtk-3.0/widgets/checkbox.css

@ -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;
}

5
.config/gtk-3.0/widgets/headerbar.css

@ -1,5 +0,0 @@
headerbar {
color: @fg_color;
background: @bg_color;
}

4
.config/gtk-3.0/widgets/list.css

@ -1,4 +0,0 @@
list {
background: @bg_color;
color: @fg_color;
}

55
.config/gtk-3.0/widgets/menu.css

@ -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;
}

19
.config/gtk-3.0/widgets/notebook.css

@ -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;
}

17
.config/gtk-3.0/widgets/popover.css

@ -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;
}

10
.config/gtk-3.0/widgets/progressbar.css

@ -1,10 +0,0 @@
treeview .trough,
treeview .trough:selected {
background: @bg_color;
}
treeview .progressbar,
treeview .progressbar:disabled {
background: @acc1_color;
}

5
.config/gtk-3.0/widgets/tooltip.css

@ -1,5 +0,0 @@
tooltip.background {
background-color: @bg_color;
color: @fg_color;
border-color: @fg_color;
}

34
.config/gtk-3.0/widgets/treeview.css

@ -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;
}
*/
Loading…
Cancel
Save