dotfiles/gtk/gtk-widgets.css

/* NOTES to contributors:
 * use 4 spaces indents, and keep code ALIGNED and ORDERED */
/* default */

* {
    background-clip: padding-box;
    -GtkArrow-arrow-scaling: 0.55;
    -GtkHTML-link-color: @theme_selected_bg_color;
    -GtkIMHtml-hyperlink-color: @theme_selected_bg_color;
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
    -GtkScrolledWindow-scrollbar-spacing: 0;
    -GtkTextView-error-underline-color: @error_color;
    -GtkToolButton-icon-spacing: 6;
    -GtkToolItemGroup-expander-size: 10;
    -GtkTreeView-expander-size: 10;
    -GtkWindow-resize-grip-height: 0;
    -GtkWindow-resize-grip-width: 0;
    -WnckTasklist-fade-overlay-rect: 0;
    /*-GtkWidget-horizontal-separator: 0;*/
    
    -GtkWidget-vertical-separator: 0;
    outline-color: transparent;
    outline-style: none;
    outline-offset: 2px;
}
/***************
 * base states *
 ***************/

.background {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}
.background.client-decorated {
    background-color: transparent;
}
.background.window-content {
    background-color: @theme_bg_color;
}
GtkClutterOffscreen {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}
*:selected,
*:selected:focus {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}
*:active {
    background-color: shade(@theme_bg_color, 1.00);
}
*:disabled,
*:disabled:disabled {
    color: mix(@theme_fg_color, @theme_bg_color, 0.5);
}
/* apply effects to disabled and prelit images */

*:disabled {
    -gtk-icon-effect: dim;
}
*:hover {
    -gtk-icon-effect: highlight;
}
.gtkstyle-fallback {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}
.gtkstyle-fallback:hover {
    background-color: shade(@theme_bg_color, 1.1);
    color: @theme_fg_color;
}
.gtkstyle-fallback:active {
    background-color: shade(@theme_bg_color, 0.9);
    color: @theme_fg_color;
}
.gtkstyle-fallback:disabled {
    background-color: shade(shade(@theme_bg_color, 0.95), 1.05);
    color: mix(@theme_fg_color, @theme_bg_color, 0.5);
}
.gtkstyle-fallback:selected {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}
/*************
 * assistant *
 *************/

GtkAssistant .sidebar .highlight {
    background-color: @theme_selected_bg_color;
}
GtkAssistant .sidebar {
    padding: 0px;
    border-width: 0;
    border-style: none;
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}
/***********************
! Font and file choosers
************************/

GtkFontButton .separator,
GtkFileChooserButton .separator {
    /* always disable separators */
    
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;
}
placessidebar > viewport.frame {
    border-style: none;
}
placessidebar row {
    min-height: 2px;
    padding: 5px;
}
placessidebar row > revealer {
    padding: 0 5px;
}
placessidebar row:selected {
    color: @theme_selected_fg_color;
}
placessidebar row:disabled {
    color: shade(@theme_selected_bg_color, 0.32);
}
placessidebar row image.sidebar-icon {
    opacity: 0.6;
}
placessidebar row image.sidebar-icon:dir(ltr) {
    padding-right: 8px;
}
placessidebar row image.sidebar-icon:dir(rtl) {
    padding-left: 8px;
}
placessidebar row label.sidebar-label:dir(ltr) {
    padding-right: 2px;
}
placessidebar row label.sidebar-label:dir(rtl) {
    padding-left: 2px;
}
button.sidebar-button {
    min-height: 8px;
    min-width: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-radius: 0%;
    -gtk-outline-radius: 0%;
}
placessidebar row.sidebar-placeholder-row {
    min-height: 2px;
    padding: 0 2px;
    background-color: @theme_selected_bg_color;
    background-clip: content-box;
}
placessidebar row.sidebar-new-bookmark-row {
    color: @theme_selected_bg_color;
}
placessidebar row:drop(active):not(:disabled) {
    box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}
/****************
 * content view *
 ****************/

.content-view.view {
    background-color: @theme_base_color;
}
.content-view.view:hover {
    background-color: alpha(@theme_selected_bg_color, 0.3);
}
.content-view.view:selected,
.content-view.view:active {
    background-color: @theme_selected_bg_color;
}
.content-view.view:disabled {
    background-color: @entry_border_color;
}
GdMainIconView.content-view {
    -GdMainIconView-icon-size: 40;
}
GtkIconView.content-view.check {
    background-color: transparent;
}
GtkIconView.content-view.check:active {
    background-color: transparent;
}
.content-view.view.check,
.content-view.view.check:active {
    background-color: transparent;
}
GtkIconView.content-view.check:hover,
GtkIconView.content-view.check:disabled,
GtkIconView.content-view.check:selected {
    background-color: transparent;
}
/****************
 * drawing area *
 ****************/

GtkDrawingArea {
    background-color: transparent;
}
GtkDrawingArea:disabled {
    background-color: @entry_border_color;
}
/***********
 * gtkhtml *
 ***********/

GtkHTML {
    background-color: @theme_base_color;
    color: @theme_text_color;
}
/************
 * expander *
 ************/

.expander {
    color: alpha(@theme_fg_color, 0.7);
}
.expander:hover {
    color: alpha(@theme_fg_color, 0.9);
}
/*********
 * frame *
 *********/

frame {
    border-radius: 0;
}

frame.border-groove,
frame.border-ridge {
    border-radius: 0;
    border-width: 0px;
    border-style: none;
}

frame.border-groove border,
frame.border-ridge border {
    border-radius: 0;
    border-width: 3px;
    border-style: solid;
    border-color: shade(@theme_bg_color, 0.9);
}
/*******************
 * scrolled window *
 *******************/

scrolledwindow.frame {
    border-radius: 0;
    border-width: 0;
    border-style: none;
}
/* avoid double borders when a viewport is 
 * packed into a GtkScrolledWindow */

scrolledwindow.shortcuts-pane.sidebar treeview {
	background-color: @theme_bg_color;
}
scrolledwindow viewport.frame {
    border-style: none;
}
/************
 * iconview *
 ************/

GtkIconView.view.cell:selected,
GtkIconView.view.cell:selected:focus {
    border-width: 3px;
    border-style: solid;
    border-color: @theme_selected_bg_color;
    border-radius: 0;
    background-color: @theme_selected_bg_color;
    background-image: none;
    color: @theme_selected_fg_color;
}
.content-view.view.rubberband,
.view.rubberband,
.rubberband {
    border-width: 1px;
    border-style: solid;
    border-color: shade(@theme_selected_bg_color, 0.9);
    border-radius: 0;
    background-color: alpha(@theme_selected_bg_color, 0.3);
}
/*********
 * image *
 *********/

GtkImage,
GtkImage:active,
GtkImage:disabled {
    background-color: transparent;
}
/*********
 * label *
 *********/

GtkLabel,
GtkLabel:active,
GtkLabel:disabled {
    background-color: transparent;
}
/*******************
 * symbolic images *
 *******************/

.image,
.view.image {
    color: alpha(@theme_fg_color, 0.5);
}
.image:hover,
.view.image:hover {
    color: @theme_fg_color;
}
.image:selected,
.image:selected:hover,
.view.image:selected,
.view.image:selected:hover {
    color: @theme_selected_fg_color;
}
/*****************
 * miscellaneous *
 *****************/

.floating-bar {
    border-width: 3px;
    border-style: none;
    border-radius: 0px;
    background-color: @theme_bg_color;
    background-image: none;
    color: @theme_fg_color;
}
.floating-bar.top {} .floating-bar.right {} .floating-bar.bottom {} .floating-bar.left {} .floating-bar .button,
.floating-bar .button:focus {
    border-style: none;
    background-color: transparent;
    background-image: none;
}
.view.dim-label,
.dim-label {
    color: alpha(currentColor, 0.6);
}
.dnd {
    border-width: 1px;
    border-style: solid;
    border-color: shade(@theme_selected_bg_color, 0.9);
}
.grip {
    background-color: transparent;
}
.arrow {
    color: alpha(@theme_fg_color, 0.7);
}
.arrow:disabled {
    color: alpha(@theme_fg_color, 0.4);
}
/******************
 * pane separator *
 ******************/

.pane-separator {
    background-color: transparent;
    color: transparent;
}
/*************
 * statusbar *
 *************/

statusbar {
    color: @theme_fg_color;
	background-color: @theme_bg_color;
}
/*************
 * popover *
 *************/

popover.menu,
popover.background {
    background-color: @theme_bg_color;
	border: 4px solid @theme_selected_bg_color;
    background-clip: border-box;
    padding: 5px 5px;
}

popover label {
	padding: 0px 5px;
}

popover modelbutton {
	padding: 5px 5px;
}

popover modelbutton:hover {
	background-color: @theme_selected_bg_color;
	color: @theme_selected_fg_color;
}

popover modelbutton:active {
	background-color: shade(@theme_selected_bg_color, 0.9);
	color: @theme_selected_fg_color;
}

/************
 * textview *
 ************/

.view text,
iconview text,
textview text {
    background-color: @base_color;
    color: @theme_fg_color;
}
.view text:disabled,
iconview text:disabled,
textview text:disabled {
    color: rgba(0, 0, 0, 0.32);
}
textview text:selected {
    background-color: @theme_selected_bg_color;
}
textview border {
    background-color: @theme_selected_bg_color;
    background-image: image(rgba(0, 0, 0, 0.1));
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0.48);
}
textview border.bottom {
    background-size: 100% 1px;
    background-position: top;
}
textview border.top {
    background-size: 100% 1px;
    background-position: bottom;
}
textview border.left {
    background-size: 1px 100%;
    background-position: right;
}
textview border.right {
    background-size: 1px 100%;
    background-position: left;
}
/* this affects the text view that caused me so much trouble in the past*/

.view:selected,
iconview:selected,
.view text selection,
iconview text selection,
textview text selection,
flowbox flowboxchild:selected,
spinbutton:not(.vertical) selection,
/* notebook > stack:not(:only-child) revealer entry selection, */
/* notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, */
entry selection,
modelbutton.flat:selected,
popover.background checkbutton:selected,
popover.background radiobutton:selected,
.menuitem.button.flat:selected,
row:selected,
calendar:selected {
	background-color: @theme_selected_bg_color;
}
row:selected label,
label:selected,
.view:selected,
iconview:selected,
.view text selection,
iconview text selection,
textview text selection,
flowbox flowboxchild:selected,
spinbutton:not(.vertical) selection,
/* notebook > stack:not(:only-child) revealer entry selection, */
/* notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection, */
entry selection,
modelbutton.flat:selected,
popover.background checkbutton:selected,
popover.background radiobutton:selected,
.menuitem.button.flat:selected,
row:selected,
calendar:selected {
    color: @theme_selected_fg_color;
}
row:selected label:disabled,
label:disabled:selected,
.view:disabled:selected,
iconview:disabled:selected,
.view text selection:disabled,
iconview text selection:disabled,
textview text selection:disabled,
flowbox flowboxchild:disabled:selected,
label:disabled selection,
spinbutton:not(.vertical) selection:disabled,
/* notebook > stack:not(:only-child) revealer entry selection:disabled, */
/* notebook > stack:not(:only-child) revealer spinbutton:not(.vertical) selection:disabled, */
entry selection:disabled,
modelbutton.flat:disabled:selected,
popover.background checkbutton:disabled:selected,
popover.background radiobutton:disabled:selected,
.menuitem.button.flat:disabled:selected,
row:disabled:selected,
calendar:disabled:selected {
    color: shade(@theme_selected_fg_color, 0.4);
}
/************
 * Tooltips *
 ************/

tooltip {
    border-radius: 2px;
    box-shadow: none;
}
tooltip.background {
    background-color: @tooltip_bg_color;
}
tooltip decoration {
    background-color: transparent;
}
tooltip label {
    min-height: 20px;
    padding: 4px 6px;
}
tooltip * {
    padding: 0;
    background-color: transparent;
    color: inherit;
}
/**************
 * Tree Views *
 **************/

treeview.view {
    -GtkTreeView-grid-line-width: 1;
    -GtkTreeView-grid-line-pattern: '';
    -GtkTreeView-tree-line-width: 1;
    -GtkTreeView-tree-line-pattern: '';
    -GtkTreeView-expander-size: 16;
    border-left-color: alpha(currentColor, 0.3);
    border-top-color: rgba(0, 0, 0, 0.1);
}
treeview.view:hover,
treeview.view:active,
treeview.view:selected {
    border-radius: 0;
}
treeview.view.separator {
    min-height: 5px;
    color: rgba(0, 0, 0, 0.1);
}
treeview.view:drop(active) {
    border-style: solid none;
    border-width: 1px;
    border-color: @theme_selected_bg_color;
}
treeview.view:drop(active).after {
    border-top-style: none;
}
treeview.view:drop(active).before {
    border-bottom-style: none;
}
treeview.view.expander {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    -gtk-icon-transform: rotate(-90deg);
    color: @theme_fg_color;
}
treeview.view.expander:dir(rtl) {
    -gtk-icon-transform: rotate(90deg);
}
treeview.view.expander:checked {
    -gtk-icon-transform: unset;
}
treeview.view.expander:hover,
treeview.view.expander:active {
    color: shade( @theme_selected_bg_color, 0.8);
}
treeview.view.expander:disabled {
    color: shade( @theme_selected_bg_color, 0.24);
}
treeview.view.expander:selected {
    color: @theme_selected_fg_color;
}
treeview.view.expander:selected:hover,
treeview.view.expander:selected:active {
    color: @theme_selected_fg_color;
}
treeview.view.expander:selected:disabled {
    color: @theme_selected_fg_color;
}
treeview.view.progressbar {
    border-style: none none solid;
    border-width: 21px;
    border-color: @theme_selected_bg_color;
    background-color: transparent;
    background-image: none;
}
treeview.view.progressbar:selected {
    border-color: shade(@theme_selected_bg_color, 0.3);
}
treeview.view.trough {
    border-style: none none solid;
    border-width: 21px;
    border-color: shade( @theme_selected_bg_color, 0.3);
    background-color: transparent;
    background-image: none;
}
treeview.view.trough:selected {
    border-color: alpha(@theme_selected_bg_color, 0.3);
}
treeview.view header button {
    padding: 2px 6px;
    border-style: none solid solid none;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background-clip: border-box;
}
treeview.view header button,
treeview.view header button:hover,
treeview.view header button:active {
    box-shadow: none;
}
treeview.view header button,
treeview.view header button:disabled {
    background-color: shade(@theme_bg_color, 1.2);
}
treeview.view header button:last-child {
    border-right-style: none;
}
treeview.view button.dnd,
treeview.view header.button.dnd {
    padding: 2px 6px;
    border-style: none solid solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
    background-color: @theme_bg_color;
    background-clip: border-box;
    color: @theme_selected_bg_color;
}
/************
 * viewport *
 ************/

GtkViewport.frame {
    border-width: 0;
}
.view {
    background-color: @theme_base_color;
    color: @theme_text_color;
}
.view:disabled,
.view:disabled:disabled {
    background-color: shade(@theme_bg_color, 1.04);
    background-image: none;
    color: mix(@theme_text_color, @theme_base_color, 0.4);
}
.view:selected,
.view:selected:focus {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}
/*********************
 * app notifications *
 *********************/

.app-notification {
    border-style: none;
    border-width: 0 1px 1px 1px;
    border-radius: 0;
    padding: 8px;
    background-color: @theme_base_color;
    background-image: none;
    color: @theme_text_color;
}
/******************************
 * destructive action buttons *
 ******************************/

.destructive-action.button {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    background-color: @error_color;
    background-image: none;
    color: mix(@theme_selected_fg_color, @error_color, 0.1);
}
.destructive-action.button:hover {
    border-color: transparent;
    background-color: shade(@error_color, 1.12);
    background-image: none;
}
.destructive-action.button:active {
    border-color: transparent;
    background-color: shade(@error_color, 0.87);
    background-image: none;
}
.destructive-action.button:hover:active {
    border-color: transparent;
}
/**************
 * List boxes *
 **************/

EggListBox {
    background-color: @theme_base_color;
}
EggListBox:hover {
    background-color: mix(white, @theme_selected_bg_color, 0.05);
}
EggListBox:selected {
    background-color: @theme_selected_bg_color;
}
list {
    background-color: @theme_base_color;
}

list.row:hover {
    background-color: shade(@selected_bg_color, 0.9);
    color: @fg_color;
}
list.row:active,
list.row:active:hover,
list.row:checked {
    color: @fg_color;
    background-color: shade(@selected_bg_color, 0.83);
}
/*************************
 * touch text selections *
 *************************/

GtkBubbleWindow {
    background-color: @theme_tooltip_bg_color;
    border-radius: 0;
    background-clip: border-box;
	padding: 10px;
}
GtkBubbleWindow.osd.background {
    background-color: @theme_tooltip_bg_color;
}
GtkBubbleWindow .toolbar {
    background-color: @theme_tooltip_bg_color
}
/**********************
 * Window Decorations *
 *********************/

decoration {
    transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
    margin: 8px;
}
decoration:backdrop {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), 0 16px 16px transparent;
}
.fullscreen decoration,
.tiled decoration {
    border-radius: 0;
}
.popup decoration {
    box-shadow: none;
}
.ssd decoration {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}
.csd.popup decoration {
    border-radius: 2px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
}
tooltip.csd decoration {
    border-radius: 2px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
}
messagedialog.csd decoration {
    border-radius: 2px;
}
.solid-csd decoration {
    margin: 4px;
    border-radius: 0;
    box-shadow: none;
    background-color: @theme_tooltip_bg_color;
}