gtk-widgets.css

/**
 * Copyright (c) 2017 Vlasta Vesely <vlastavesely@protonmail.ch>
 *
 * This file is part of Raleigh Reloaded GTK theme.
 *
 * This is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 2
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/***********
 * general *
 ***********/
* {
	-gtk-icon-style: regular; /* disable symbolic icons */
}
.background {
	background-color: @theme_bg_color;
	color: @theme_fg_color;
}
*:disabled {
	color: #6f6f6f;
	text-shadow: 1px 1px @theme_base_color;
	-gtk-icon-effect: dim;
}
.flat:not(button):not(modelbutton):not(:hover):not(:checked) {
	border: 0;
}

/*************
 * selection *
 *************/
selection,
*:selected,
.view:selected {
	background: #526f88;
	color: white;
}
selection:focus,
*:selected:focus,
.view:selected:focus,
*:focus *:selected {
	background: #526f88;
	color: white;
}
.rubberband,
.view.rubberband,
rubberband {
	background-color: alpha(@theme_selected_bg_color, 0.3);
	border: 1px solid @theme_selected_bg_color;
}

/***********
 * buttons *
 ***********/
button.flat {
	background-color: transparent;
	border: 1px solid transparent;
	padding: .35em;
}
button:not(.flat),
.button {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: .35em;
}
button:not(.flat):hover, .button:not(.flat):hover {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
button:active, .button:active,
button:active:hover, .button:active:hover,
button.toggle:checked,
button.toggle:active:hover,
stackswitcher button:checked {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
button:focus, .button:focus {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
button:disabled, .button:disabled {
	background-image: linear-gradient(to bottom, white 80%, #e9e8e9);
	border: 1px solid #A4A7A4;
}
button.link {
	color: @link_color;
}
button.link > label {
	text-decoration-line: underline;
}
button.color * {
	border-image: url("assets/frame-etched-out.png") 2 / 2px stretch;
	margin: 0 .3em;
	min-height: 1.2em;
}
button.toggle:checked:disabled  {
	border: 1px solid #A4A7A4;
}

/**************
 * scrollbars *
 **************/
scrollbar button {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: .35em;
}
scrollbar button:hover,
scrollbar button:active,
scrollbar button:active:hover {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
scrollbar button:disabled {
	background-image: linear-gradient(to bottom, white 80%, #e9e8e9);
	border: 1px solid #A4A7A4;
}
scrollbar slider {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
	border-radius: 3px;
}
scrollbar.vertical slider {
	min-height: .5rem;
	min-width: .8rem;
}
scrollbar.horizontal slider {
	min-height: .8rem;
	min-width: .5rem;
}
scrollbar.vertical button.up {
	min-height: 0.25rem;
	-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}
scrollbar.vertical button.down {
	min-height: 0.25rem;
	-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}
scrollbar.horizontal button.up {
	min-width: 0.25rem;
	-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}
scrollbar.horizontal button.down {
	min-width: 0.25rem;
	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

/**************
 * checkboxes *
 **************/
check, radio {
	margin: .3em .4em .2em .3em;
	min-height: 1em;
	min-width: 1em;
}
checkbutton:hover, radiobutton:hover {
	background-color: @theme_selected_bg_color;
}
checkbutton label, radiobutton label {
	padding-right: .5em;
}
check {
	-gtk-icon-source: url("assets/checkbox-unchecked.png");
}
check:checked {
	-gtk-icon-source: url("assets/checkbox-checked.png");
}
check:checked:disabled {
	-gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-disabled.png"));
}
check:disabled {
	-gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-disabled.png"));
}
check:indeterminated {
	-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"));
}
check:indeterminated:disabled {
	-gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-disabled.png"));
}

/******************
 * radion buttons *
 ******************/
radio,
.view.cellradio {
	-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"));
	margin: .3em .4em .2em .3em;
	min-height: 1em;
	min-width: 1em;
}
radio:checked {
	-gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"));
}
radio:disabled {
	-gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-disabled.png"));
}
radio:checked:disabled {
	-gtk-icon-source: -gtk-scaled(url("assets/radio-checked-disabled.png"));
}

/****************
 * text entries *
 ****************/
entry {
	background: @theme_base_color;
	border-image: url("assets/entry.png") 2 / 2px stretch;
	padding: .25em;
}
entry:disabled {
	background-color: #eeebe7;
}

/****************
 * spin buttons *
 ****************/
spinbutton {
	background: @theme_bg_color;
	border-image: url("assets/entry.png") 2 / 2px stretch;
}
spinbutton * {
	background: @theme_base_color;
}
spinbutton button {
	background-color: #D2D4D2;
}

/**************
 * comboboxes *
 **************/
combobox arrow {
	-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
	color: @theme_fg_color;
	margin: -.1em;
	min-height: 1em;
	min-width: 1em;
}
combobox button:first-child arrow {
	border-image: url("assets/combobox-arrow-separator.png") 2 / 2px stretch;
	padding-left: .5em;
}

/*********
 * menus *
 *********/

menubar {
	border-image: url("assets/button.png") 2 / 2px stretch;
	-GtkWidget-window-dragging: true;
	padding-left: 0.3em;
}
menubar decoration,
.popup decoration {
	border: 0;
}
menu {
	background: @theme_bg_color;
	border: solid 2px;
	border-image: url("assets/menu.png") 3 / 3px stretch;
	padding: 1px;
}
menubar > menuitem {
	margin-top: 2px;
	padding: .2em .4em;
	border: 1px solid transparent;
	border-radius: 3px;
}
menubar > menuitem:hover {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
}
menuitem {
	margin: 2px;
	padding: 1px 3px;
	border: 1px solid transparent;
	border-radius: 3px;
}
menuitem:hover {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
}
menu separator {
	border-image: url("assets/separator-horizontal.png") 1 / 1px stretch;
	min-height: 1px;
	margin: .2em .4em;
}
menuitem > check,
menuitem > radio,
menuitem > arrow,
menuitem > image {
	min-height: 1em;
	min-width: 1em;
}
menuitem > arrow {
	font-size: 1.4em;
	margin: -.2em 0 -.2em 1em;
	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

/*************
 * notebooks *
 *************/
notebook {
	padding: 0;
}
notebook.frame {
	border-image: url("assets/notebook.png") 3 / 3px stretch;
}
notebook header {
	background: @theme_bg_color;
}
notebook header.top {
	border-image: url("assets/notebook-header-top.png") 2 / 2px stretch;
	padding-bottom: 2px;
}
notebook header.bottom {
	border-image: url("assets/notebook-header-bottom.png") 2 / 2px stretch;
	padding-top: 2px;
}
notebook header.left {
	border-image: url("assets/notebook-header-left.png") 2 / 2px stretch;
	padding-right: 2px;
}
notebook header.right {
	border-image: url("assets/notebook-header-right.png") 2 / 2px stretch;
	padding-left: 2px;
}
notebook header.top tabs {
	margin-top: 2px;
}
notebook header.bottom tabs {
	margin-bottom: 2px;
}
notebook header.left tabs {
	margin-left: 2px;
}
notebook header.right tabs {
	margin-right: 2px;
}
notebook tab,
notebook.frame > .frame {
	background: shade(@theme_bg_color, .9);
	padding: .3em .4em;
}
notebook header.top tab,
notebook.frame > .frame.top {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: 5px;
}
notebook header.bottom tab,
notebook.frame > .frame.bottom {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: 5px;
}
notebook header.left tab,
notebook.frame > .frame.left {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: 5px;
}
notebook header.right tab,
notebook.frame > .frame.right {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	padding: 5px;
}
notebook header tab:checked,
notebook.frame > .frame:active {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
notebook header.top tab:checked {
	margin-top: -2px;
}
notebook header.bottom tab:checked {
	margin-bottom: -2px;
	margin-top: -2px;
}
notebook header.left tab:checked {
	margin-left: -2px;
	margin-right: -1px;
}
notebook header.right tab:checked {
	margin-left: -2px;
	margin-right: -2px;
}
notebook tab button {
	background-color: transparent;
	border: 1px solid transparent;
}
notebook.frame > .frame {
	padding: .15rem;
}

/************
 * expander *
 ************/
expander arrow {
	min-width: 16px;
	min-height: 16px;
	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}
expander arrow:checked {
	-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

/********************************
 * CSD header and window border *
 ********************************/
headerbar {
	background-color: #e2e2de;
	padding: 7px;
}
decoration {
	background-color: #D2D4D2;
	border: 1px solid black;
}

/****************************
 * application notification *
 ****************************/
.app-notification {
	background-color: @theme_info_bg_color;
	border-image: url("assets/frame-etched-out.png") 3 / 3px stretch;
	padding: 7px;
}
.app-notification border {
	border: 0;
}

/************
 * popovers *
 ************/
popover {
	border: 1px solid #989B98;
}
popover .flat {
	padding: 5px;
}

modelbutton.flat {
	border: 1px solid transparent;
	border-radius: 3px;
}

modelbutton.flat:hover {
	border: 1px solid black;
	background-color: @theme_selected_bg_color;
}

/***********
 * toolbar *
 ***********/
toolbar {
	border-image: url("assets/button.png") 2 / 2px stretch;
	padding: 1px;
}
toolbar separator {
	border-image: url("assets/separator-vertical.png") 1 / 1px stretch;
	margin: 5px;
	padding: 1px;
}
toolbar button {
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	padding: .35em;
}
toolbar button:hover {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
toolbar button:disabled {
	background: none;
	border: 1px solid transparent;
}
/*************
 * statusbar *
 *************/
statusbar button {
	padding: 2px;
}
statusbar button:active:hover,
statusbar button.toggle:checked,
statusbar button.toggle:active:hover {
	padding: 3px 1px 1px 3px;
}
statusbar frame,
statusbar > label {
	border-image: url("assets/statusbar-frame.png") 2 / 2px stretch;
}
statusbar frame {
	padding: 0;
}
statusbar frame > border {
	border: 0;
}
statusbar {
	margin: 0 -9px;
}

/*************
 * listboxes *
 *************/
list row {
	padding: 5px;
	border: 1px solid transparent;
}
list row:hover {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
	border-radius: 3px;
}

/**************
 * separators *
 **************/
separator.horizontal {
	border-image: url("assets/separator-horizontal.png") 1 / 1px stretch;
	padding: 1px;
}
separator.vertical {
	border-image: url("assets/separator-vertical.png") 1 / 1px stretch;
	padding: 1px;
}

/*********
 * paned *
 *********/
paned > separator {
	background: url("assets/paned-separator-vertical.png") no-repeat center;
	-gtk-icon-source: none;
	padding: 1px;
}
paned > separator:hover {
	background-color: @theme_selected_bg_color;
}
paned.vertical > separator {
	background-image: url("assets/paned-separator-horizontal.png");
}

/**********
 * frames *
 **********/
frame > border {
	border-image: url("assets/frame-etched-out.png") 2 / 2px stretch;
	padding: 2px;
}
frame { /* LibreOffice combobox's dropdown */
	border-image: url("assets/menu.png") 3 / 3px stretch;
	padding: 3px;
}
box > frame {
	border: 0;
	padding: 0;
}

/**************
 * button box *
 **************/
buttonbox.horizontal button {
	margin: .2em .4em;
}
buttonbox.horizontal button:first-child {
	margin-left: 0;
}
buttonbox.horizontal button:last-child {
	margin-right: 0;
}
progressbar trough,
levelbar trough,
scale trough,
treeview.view.trough,
treeview.view.trough:selected,
scrollbar {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
}

/*********
 * scale *
 *********/
scale {
	margin: 1px;
}
scale slider {
	background-color: @theme_selected_bg_color;
	border-radius: 3px;
	border: 1px solid black;
}
scale slider:disabled,
scale trough:disabled {
	background-image: linear-gradient(to bottom, white 80%, #e9e8e9);
	border: 1px solid #A4A7A4;
}
scale.horizontal trough {
	padding: 0 1.2em;
}
scale.vertical trough {
	padding: 1.2em 0;
}
scale.horizontal slider {
	min-height: 0.8em;
	min-width: 2.4em;
}
scale.vertical slider {
	min-height: 2.4em;
	min-width: 0.8em;
}
scale.horizontal mark indicator {
	background-color: @theme_selected_bg_color;
	min-height: 8px;
	min-width: 1px;
}
scale.vertical mark indicator {
	background-color: @theme_selected_bg_color;
	min-height: 1px;
	min-width: 8px;
}

/***************
 * color scale *
 ***************/
scale.color trough {
	padding: 0;
}
scale.color slider {
	background-color: transparent;
	border: 0;
}
scale.color.horizontal slider {
	background-image: url("assets/color-scale-slider-horizontal.png");
	min-height: 14px;
	min-width: 16px;
}
scale.color.vertical slider {
	background-image: url("assets/color-scale-slider-vertical.png");
	min-height: 16px;
	min-width: 14px;
}

/***************
 * progressbar *
 ***************/
progressbar {
	font-size: .8em;
}
progressbar trough {
	padding: 2px;
}
progressbar progress,
treeview.view.progressbar {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
	border-radius: 3px;
	margin-top: 1px;
	margin-bottom: 1px;
}
progressbar.horizontal,
progressbar.horizontal progress,
progressbar.horizontal trough {
	min-height: 1.3em;
}
progressbar.vertical,
progressbar.vertical progress,
progressbar.vertical trough {
	min-width: 1.3em;
}
treeview.view.trough {
	padding: 2px;
}

/************
 * levelbar *
 ************/
levelbar block {
	margin: 1px;
	padding: 3px;
}
levelbar block.filled {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
	border-radius: 3px;
	margin: 1px;
}

/**********
 * switch *
 **********/
switch {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	min-height: 2em;
}
switch slider {
	background-color: #D2D4D2;
	border: 1px solid #989B98;
	border-radius: 3px;
	margin: 2px;
	padding: .3em;
}
switch:hover, switch:hover slider {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}
switch:checked slider {
	background-color: @theme_selected_bg_color;
	border: 1px solid black;
}

/************
 * treeview *
 ************/
.view {
	background: @theme_base_color;
}
.sidebar,
scrolledwindow,
scrolledwindow.frame {
	border-image: url("assets/frame-etched-out.png") 3 / 3px stretch;
	padding: 2px;
}

/************
 * tooltips *
 ************/
tooltip,
tooltip.background  {
	background-color: white;
	border: solid 1px black;
	color: black;
}
tooltip *, .tooltip * {
	background-color: transparent;
}
tooltip decoration {
	border: 0;
}

/*************
 * calendars *
 *************/
calendar {
	padding: 2px;
}
calendar.header {
	background: @theme_bg_color;
}
calendar.view {
	border-image: url("assets/frame-etched-out.png") 2 / 2px stretch;
}
calendar:indeterminate {
	color: alpha(@theme_fg_color, 0.4);
}
calendar.highlight {
	background-color: @theme_selected_bg_color;
	color: @theme_selected_fg_color;
}

/************
 * infobars *
 ************/
.info {
	background-color: @theme_info_bg_color;
}
.warning {
	background-color: @theme_warning_bg_color;
}
.error {
	background-color: @theme_error_bg_color;
}
.info, .warning, .error {
	border-image: url("assets/frame-etched-out.png") 3 / 3px stretch;
}

/***********************
 * file chooser dialog *
 ***********************/
dialog filechooser placessidebar.sidebar.frame .sidebar-row {
	padding: .3em 1em;
}
dialog filechooser .frame.sidebar .sidebar-row label {
	padding-left: .8em;
}
dialog filechooser placessidebar button {
	background: transparent;
	border: 0;
	padding: 0;
}
dialog filechooser placessidebar *:hover button {
	background-color: transparent;
}
dialog filechooser stack {
	background: @theme_bg_color;
}
dialog filechooser .path-bar .slider-button,
dialog filechooser .path-bar .slider-button:active {
	padding: 5px 0;
}
dialog filechooser .path-bar image {
	margin-right: 5px;
}
dialog filechooser .frame.sidebar separator {
	border-image: url("assets/separator-horizontal.png") 1 / 1px stretch;
	margin: 3px 5px;
	padding: 1px;
}
dialog filechooser actionbar {
	border: solid 1px shade(@theme_bg_color, .6);
	margin-top: 5px;
	padding: 7px;
}
dialog filechooser frame {
	padding: 0;
}
dialog filechooser frame border {
	border: 0;
}

/*****************
 * color chooser *
 *****************/
dialog colorchooser colorswatch {
	border-image: url("assets/frame-etched-out.png") 2 / 2px stretch;
	padding: 2px;
}
dialog colorchooser colorswatch.dark * {
	color: white;
}
dialog colorchooser colorswatch.light * {
	color: black;
}
dialog colorchooser #add-color-button {
	border-image: url("assets/button.png") 3 / 3px stretch;
}
dialog colorchooser colorswatch:selected * {
	background: transparent;
}
colorchooser .popover {
	background: @theme_bg_color;
	border-image: url("assets/button.png") 3 / 3px stretch;
}

/****************
 * print dialog *
 ****************/
printdialog > box > box {
	padding: 5px;
	background: @theme_bg_color;
}
printdialog notebook stack {
	border-image: url("assets/notebook.png") 3 / 3px stretch;
	padding: 2px;
}
printdialog paper {
	background-color: @theme_base_color;
	border: solid 1px shade(@theme_bg_color, .6);
}

/*********************
 * Spinner Animation *
 *********************/
@keyframes spin {
	to { -gtk-icon-transform: rotate(1turn); }
}
spinner {
	background-color: transparent;
	opacity: 0;
}
spinner:checked {
	opacity: 1;
	animation: spin 1s linear infinite;
}