zavageandClaude Opus 5
d56294b00f
The GTK3 sheets targeted GTK 3.18 and broke at 3.20, when the CSS class model was replaced by element nodes. On 3.24 they parsed but matched almost nothing: buttons, entries, tabs, scales and scrollbars rendered as bare rectangles. Rewritten against the node model. gtk-3.0/ gtk.css colour definitions only - recolour the theme here widgets.css all widget rules, node-selector based mate.css MATE panel, applets, window list, Caja, terminal gtk-dark.css alias of gtk.css (the theme is already dark) legacy/ the original 3.18 sheets, moved aside for reference Palette retargeted to the WAR10CK window in Live Free or Die Hard: bg #23425E, accent #BA6A07. Supporting shades derived with the original theme's own ratios (raised x1.42, recessed x0.72). Text had to be lifted - the old #868A8E scores 3.0:1 on #23425E, so normal text is #B4C4D2 (5.85:1) and bright text #E8F0F7 (9.06:1). metacity-1/ pixmaps remapped by projecting each pixel onto the segment between its two nearest source anchors and re-blending against the new ones, so antialiased edges stay clean. Titlebar is ~7px taller, its text is centred and no longer a hardcoded #6d7379 for both focus states, and the idle window-button glyphs are white instead of a dim orange that turned to mud on the lighter bar. Scrollbars are deliberately not accent-coloured; @scrollbar_slider (#454F5A) keeps them quiet at rest and findable on hover. Fixes a transparent-body bug: GtkDialog and GtkAssistant do not use the `window` CSS node in 3.20+, so every dialog, About box and file chooser rendered as a hole through to the desktop. Attribution and the GPL-3.0 modification notice added to README.md, index.theme and metacity-theme-1.xml. Licence unchanged. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1435 lines
34 KiB
CSS
1435 lines
34 KiB
CSS
/* Diehard4 — widget rules for the GTK 3.20+ node model. */
|
|
|
|
/**********
|
|
* basics *
|
|
**********/
|
|
* {
|
|
outline-color: alpha(@selected_bg_color, 0.8);
|
|
outline-style: dashed;
|
|
outline-width: 1px;
|
|
outline-offset: -3px;
|
|
-gtk-outline-radius: 2px;
|
|
-GtkWidget-text-handle-width: 20;
|
|
-GtkWidget-text-handle-height: 20;
|
|
-GtkScrolledWindow-scrollbar-spacing: 0;
|
|
}
|
|
|
|
/* GtkDialog and GtkAssistant have their own CSS node names in 3.20+ — they
|
|
* are NOT `window`. Miss them and every dialog, About box and file chooser
|
|
* gets a fully transparent body. */
|
|
window,
|
|
window.background,
|
|
dialog,
|
|
dialog.background,
|
|
messagedialog,
|
|
assistant,
|
|
assistant.background {
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
window.background:backdrop,
|
|
dialog:backdrop,
|
|
assistant:backdrop { color: @menu_color; }
|
|
|
|
.dim-label,
|
|
label.separator { color: @menu_color; }
|
|
|
|
label:disabled,
|
|
label:backdrop:disabled { color: @insensitive_fg_color; }
|
|
|
|
image:disabled,
|
|
icon:disabled { -gtk-icon-effect: dim; }
|
|
|
|
*:link { color: @link_color; }
|
|
*:visited { color: @link_color; }
|
|
|
|
.view,
|
|
iconview,
|
|
textview text {
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
.view:selected,
|
|
iconview:selected,
|
|
textview text selection,
|
|
label selection,
|
|
flowbox flowboxchild:selected {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
separator {
|
|
background-color: @light_color;
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
border: none;
|
|
}
|
|
|
|
/***********
|
|
* buttons *
|
|
***********/
|
|
button {
|
|
min-height: 20px;
|
|
min-width: 16px;
|
|
padding: 5px 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
background-color: @light_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
color: @fg_color;
|
|
transition: background-color 120ms ease-out;
|
|
}
|
|
|
|
button:hover,
|
|
button:active,
|
|
button:checked {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
button:checked:hover,
|
|
button:active:hover { background-color: shade(@selected_bg_color, 1.12); }
|
|
|
|
button:disabled {
|
|
background-color: @light_color;
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
button:disabled label,
|
|
button:disabled image { color: @insensitive_fg_color; }
|
|
|
|
button:backdrop { background-color: @light_color; color: @menu_color; }
|
|
|
|
button.flat,
|
|
button.close,
|
|
button.titlebutton,
|
|
toolbar button,
|
|
toolbutton button {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button.flat:hover,
|
|
button.close:hover,
|
|
button.titlebutton:hover,
|
|
toolbar button:hover,
|
|
toolbutton button:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
button.flat:checked,
|
|
button.titlebutton:checked,
|
|
toolbar button:checked,
|
|
toolbutton button:checked {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
button.flat:disabled,
|
|
toolbar button:disabled {
|
|
background-color: transparent;
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
button.suggested-action,
|
|
button.default {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
font-weight: normal;
|
|
}
|
|
|
|
button.suggested-action:hover,
|
|
button.default:hover { background-color: shade(@selected_bg_color, 1.12); }
|
|
|
|
button.suggested-action:disabled,
|
|
button.default:disabled {
|
|
background-color: shade(@selected_bg_color, 0.55);
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
button.destructive-action {
|
|
background-color: @error_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
button.destructive-action:hover { background-color: shade(@error_color, 1.12); }
|
|
|
|
button.destructive-action:disabled {
|
|
background-color: shade(@error_color, 0.55);
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; }
|
|
|
|
button separator { background-color: transparent; }
|
|
|
|
buttonbox button { min-height: 22px; }
|
|
|
|
/* linked groups */
|
|
.linked > button,
|
|
.linked > entry,
|
|
.linked > combobox > box > button,
|
|
.linked > spinbutton { border-radius: 0; }
|
|
|
|
.linked > button:first-child,
|
|
.linked > entry:first-child,
|
|
.linked > spinbutton:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
.linked > button:last-child,
|
|
.linked > entry:last-child,
|
|
.linked > spinbutton:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.linked > button:only-child,
|
|
.linked > entry:only-child { border-radius: 3px; }
|
|
|
|
.linked > button:not(:first-child),
|
|
.linked > entry:not(:first-child) { border-left: 1px solid @bg_color; }
|
|
|
|
.linked.vertical > button,
|
|
.linked.vertical > entry { border-radius: 0; }
|
|
|
|
.linked.vertical > button:first-child,
|
|
.linked.vertical > entry:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.linked.vertical > button:last-child,
|
|
.linked.vertical > entry:last-child {
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.linked.vertical > button:not(:first-child),
|
|
.linked.vertical > entry:not(:first-child) { border-top: 1px solid @bg_color; }
|
|
|
|
/***********
|
|
* entries *
|
|
***********/
|
|
entry,
|
|
spinbutton:not(.vertical) {
|
|
min-height: 22px;
|
|
padding: 5px;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
color: @fg_color;
|
|
caret-color: @selected_bg_color;
|
|
transition: border-color 120ms ease-out;
|
|
}
|
|
|
|
entry:focus,
|
|
entry:focus-within,
|
|
spinbutton:not(.vertical):focus,
|
|
spinbutton:not(.vertical):focus-within {
|
|
border-color: @selected_bg_color;
|
|
outline: none;
|
|
}
|
|
|
|
entry:disabled,
|
|
spinbutton:disabled {
|
|
background-color: @bg_color;
|
|
border-color: @light_color;
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
entry:backdrop { background-color: @dark_color; color: @menu_color; }
|
|
|
|
entry selection,
|
|
entry selection:focus {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
entry image { color: @menu_color; }
|
|
entry image:hover { color: @fg_color; }
|
|
|
|
entry.flat,
|
|
entry.flat:focus {
|
|
padding: 2px;
|
|
border-width: 0;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
entry progress {
|
|
border: none;
|
|
border-radius: 0;
|
|
background-color: @selected_bg_color;
|
|
background-image: none;
|
|
}
|
|
|
|
entry.error { border-color: @error_color; }
|
|
entry.warning { border-color: @warning_color; }
|
|
|
|
entry.search { border-radius: 3px; }
|
|
|
|
/* the placeholder */
|
|
entry placeholder { color: @placeholder_text_color; }
|
|
|
|
/***************
|
|
* spinbuttons *
|
|
***************/
|
|
spinbutton:not(.vertical) button {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding: 2px 4px;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
color: @fg_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
spinbutton:not(.vertical) button:hover,
|
|
spinbutton:not(.vertical) button:active {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
spinbutton:not(.vertical) button:disabled { color: @insensitive_fg_color; }
|
|
|
|
spinbutton:not(.vertical) button.up { border-radius: 0 2px 2px 0; }
|
|
spinbutton:not(.vertical) button.down { border-radius: 0; }
|
|
|
|
spinbutton.vertical { border: none; background: none; }
|
|
|
|
spinbutton.vertical entry {
|
|
border-radius: 0;
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
spinbutton.vertical button {
|
|
min-width: 28px;
|
|
min-height: 20px;
|
|
padding: 2px;
|
|
border: 1px solid @light_color;
|
|
background-color: @light_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
spinbutton.vertical button:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
spinbutton.vertical button.up { border-radius: 3px 3px 0 0; border-bottom-width: 0; }
|
|
spinbutton.vertical button.down { border-radius: 0 0 3px 3px; border-top-width: 0; }
|
|
|
|
/**************
|
|
* comboboxes *
|
|
**************/
|
|
combobox arrow,
|
|
button arrow {
|
|
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
color: inherit;
|
|
}
|
|
|
|
combobox button.combo { padding: 4px 6px; }
|
|
|
|
combobox entry.combo {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
combobox button.combo:not(:only-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
combobox window.popup,
|
|
combobox window.popup .view { background-color: @dark_color; }
|
|
|
|
combobox > .linked > button:not(:first-child) { border-left-color: @bg_color; }
|
|
|
|
/*******************
|
|
* check and radio *
|
|
*******************/
|
|
check,
|
|
radio {
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
margin: 0 4px;
|
|
padding: 1px;
|
|
border: 1px solid @trough_border_color;
|
|
background-color: @light_color;
|
|
background-image: none;
|
|
color: @bright_fg_color;
|
|
box-shadow: none;
|
|
-gtk-icon-source: none;
|
|
}
|
|
|
|
check { border-radius: 2px; }
|
|
radio { border-radius: 9999px; -gtk-outline-radius: 9999px; }
|
|
|
|
check:hover,
|
|
radio:hover { background-color: shade(@light_color, 1.25); }
|
|
|
|
check:checked,
|
|
check:indeterminate,
|
|
radio:checked,
|
|
radio:indeterminate {
|
|
background-color: @light_color;
|
|
border-color: @selected_bg_color;
|
|
}
|
|
|
|
check:checked { -gtk-icon-source: -gtk-icontheme("object-select-symbolic"); }
|
|
check:indeterminate { -gtk-icon-source: -gtk-icontheme("list-remove-symbolic"); }
|
|
|
|
radio:checked {
|
|
background-image: -gtk-gradient(radial, center center, 0, center center, 0.26,
|
|
to(@bright_fg_color), to(transparent));
|
|
}
|
|
|
|
radio:indeterminate {
|
|
background-image: linear-gradient(to bottom, @bright_fg_color, @bright_fg_color);
|
|
background-size: 8px 2px;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
check:disabled,
|
|
radio:disabled {
|
|
background-color: @bg_color;
|
|
border-color: @light_color;
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
check:disabled { -gtk-icon-effect: dim; }
|
|
|
|
radio:checked:disabled {
|
|
background-image: -gtk-gradient(radial, center center, 0, center center, 0.26,
|
|
to(@insensitive_fg_color), to(transparent));
|
|
}
|
|
|
|
/* in menus and lists the indicator sits flush */
|
|
menuitem check,
|
|
menuitem radio {
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
margin: 0 6px 0 0;
|
|
}
|
|
|
|
menuitem:hover check,
|
|
menuitem:hover radio { border-color: @bright_fg_color; }
|
|
|
|
treeview.view check,
|
|
treeview.view radio { margin: 0; }
|
|
|
|
/***********
|
|
* switches *
|
|
***********/
|
|
switch {
|
|
min-width: 46px;
|
|
min-height: 20px;
|
|
padding: 2px;
|
|
border: 1px solid @trough_border_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
color: transparent;
|
|
box-shadow: none;
|
|
transition: background-color 150ms ease-out;
|
|
}
|
|
|
|
switch:checked {
|
|
background-color: @selected_bg_color;
|
|
border-color: shade(@selected_bg_color, 0.8);
|
|
}
|
|
|
|
switch:disabled { background-color: @bg_color; }
|
|
|
|
switch slider {
|
|
min-width: 20px;
|
|
min-height: 16px;
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @menu_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
switch:checked slider { background-color: @bright_fg_color; }
|
|
switch:disabled slider { background-color: @light_color; }
|
|
|
|
/* the on/off glyphs GTK draws inside the trough */
|
|
switch image { color: transparent; }
|
|
|
|
/**********
|
|
* scales *
|
|
**********/
|
|
scale { min-height: 16px; min-width: 16px; padding: 3px; }
|
|
|
|
scale trough {
|
|
border: 1px solid @trough_border_color;
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
scale.horizontal trough { min-height: 8px; }
|
|
scale.vertical trough { min-width: 8px; }
|
|
|
|
/* the original theme leaves the filled section unhighlighted */
|
|
scale highlight {
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
}
|
|
|
|
scale slider {
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @selected_bg_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
margin: -1px;
|
|
transition: background-color 120ms ease-out;
|
|
}
|
|
|
|
scale.horizontal slider { min-width: 19px; min-height: 10px; }
|
|
scale.vertical slider { min-height: 19px; min-width: 10px; }
|
|
|
|
scale slider:hover { background-color: shade(@selected_bg_color, 1.2); }
|
|
scale slider:disabled { background-color: @light_color; }
|
|
|
|
scale trough:disabled,
|
|
scale highlight:disabled { background-color: @dark_color; }
|
|
|
|
scale marks,
|
|
scale value { color: @menu_color; }
|
|
|
|
scale indicator {
|
|
background-color: @light_color;
|
|
min-width: 1px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
scale.horizontal marks.top indicator,
|
|
scale.horizontal marks.bottom indicator { min-height: 4px; min-width: 1px; }
|
|
scale.vertical marks.left indicator,
|
|
scale.vertical marks.right indicator { min-width: 4px; min-height: 1px; }
|
|
|
|
/**************
|
|
* scrollbars *
|
|
**************/
|
|
scrollbar {
|
|
border: none;
|
|
background-color: @bg_color;
|
|
background-image: none;
|
|
transition: background-color 150ms ease-out;
|
|
}
|
|
|
|
scrollbar trough {
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
margin: 0;
|
|
}
|
|
|
|
scrollbar slider {
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @scrollbar_slider;
|
|
background-image: none;
|
|
transition: background-color 120ms ease-out;
|
|
}
|
|
|
|
scrollbar.vertical slider { min-width: 8px; min-height: 42px; }
|
|
scrollbar.horizontal slider { min-height: 8px; min-width: 42px; }
|
|
|
|
scrollbar slider:hover { background-color: shade(@scrollbar_slider, 1.35); }
|
|
scrollbar slider:active { background-color: shade(@scrollbar_slider, 1.6); }
|
|
scrollbar slider:disabled { background-color: shade(@scrollbar_slider, 0.7); }
|
|
|
|
/* the original theme hides the stepper buttons */
|
|
scrollbar button {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
-gtk-icon-source: none;
|
|
}
|
|
|
|
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
|
|
background-color: transparent;
|
|
}
|
|
|
|
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { min-width: 4px; }
|
|
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { min-height: 4px; }
|
|
|
|
junction,
|
|
scrollbar junction { background-color: @dark_color; border: none; }
|
|
|
|
/*****************
|
|
* progress bars *
|
|
*****************/
|
|
progressbar {
|
|
color: @fg_color;
|
|
font-size: 90%;
|
|
}
|
|
|
|
progressbar trough {
|
|
border: 1px solid @trough_border_color;
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
}
|
|
|
|
progressbar progress {
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @selected_bg_color;
|
|
background-image: none;
|
|
}
|
|
|
|
progressbar.horizontal trough,
|
|
progressbar.horizontal progress { min-height: 10px; }
|
|
progressbar.vertical trough,
|
|
progressbar.vertical progress { min-width: 10px; }
|
|
|
|
progressbar trough:disabled { background-color: @dark_color; }
|
|
progressbar progress:disabled { background-color: @light_color; }
|
|
|
|
progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; }
|
|
progressbar.osd trough { background-color: transparent; }
|
|
|
|
/*************
|
|
* levelbars *
|
|
*************/
|
|
levelbar trough {
|
|
border: 1px solid @trough_border_color;
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
padding: 2px;
|
|
}
|
|
|
|
levelbar.horizontal block { min-height: 8px; }
|
|
levelbar.vertical block { min-width: 8px; }
|
|
|
|
levelbar.horizontal.discrete block { min-width: 28px; margin: 0 1px; }
|
|
levelbar.vertical.discrete block { min-height: 28px; margin: 1px 0; }
|
|
|
|
levelbar block {
|
|
border: none;
|
|
border-radius: 1px;
|
|
background-color: @selected_bg_color;
|
|
}
|
|
|
|
levelbar block.low { background-color: @warning_color; }
|
|
levelbar block.high { background-color: @selected_bg_color; }
|
|
levelbar block.full { background-color: @success_color; }
|
|
levelbar block.empty { background-color: transparent; }
|
|
|
|
/************
|
|
* spinners *
|
|
************/
|
|
@keyframes diehard-spin { to { -gtk-icon-transform: rotate(1turn); } }
|
|
|
|
spinner {
|
|
background: none;
|
|
opacity: 0;
|
|
color: @selected_bg_color;
|
|
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
|
}
|
|
|
|
spinner:checked {
|
|
opacity: 1;
|
|
animation: diehard-spin 1s linear infinite;
|
|
}
|
|
|
|
spinner:disabled { opacity: 0.4; }
|
|
|
|
/***********
|
|
* menubar *
|
|
***********/
|
|
menubar,
|
|
.menubar {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @menu_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
menubar > menuitem,
|
|
.menubar > menuitem {
|
|
padding: 5px 8px;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: @menu_color;
|
|
min-height: 16px;
|
|
transition: background-color 100ms ease-out;
|
|
}
|
|
|
|
menubar > menuitem:hover,
|
|
menubar > menuitem:selected,
|
|
menubar > menuitem:active,
|
|
.menubar > menuitem:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
menubar > menuitem:disabled { color: @insensitive_fg_color; }
|
|
|
|
/*********
|
|
* menus *
|
|
*********/
|
|
menu,
|
|
.menu,
|
|
popover.background.menu {
|
|
padding: 2px 0;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
menu menuitem,
|
|
.menu menuitem {
|
|
padding: 5px 8px;
|
|
min-height: 16px;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: @fg_color;
|
|
text-shadow: none;
|
|
transition: background-color 100ms ease-out;
|
|
}
|
|
|
|
menu menuitem:hover,
|
|
menu menuitem:selected,
|
|
.menu menuitem:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
menu menuitem:disabled,
|
|
.menu menuitem:disabled { color: @insensitive_fg_color; }
|
|
|
|
menu menuitem arrow {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
|
}
|
|
|
|
menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
|
|
|
|
menu separator,
|
|
.menu separator {
|
|
margin: 2px 0;
|
|
background-color: @light_color;
|
|
min-height: 1px;
|
|
}
|
|
|
|
menu > arrow {
|
|
min-height: 16px;
|
|
padding: 2px;
|
|
background-color: @dark_color;
|
|
border-radius: 0;
|
|
color: @fg_color;
|
|
}
|
|
|
|
menu > arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
|
|
menu > arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
|
menu > arrow:hover { background-color: @selected_bg_color; color: @selected_fg_color; }
|
|
menu > arrow:disabled { color: @insensitive_fg_color; }
|
|
|
|
menuitem accelerator { color: @menu_color; }
|
|
menuitem:hover accelerator { color: @selected_fg_color; }
|
|
|
|
/************
|
|
* notebook *
|
|
************/
|
|
notebook { background-color: @bg_color; }
|
|
|
|
notebook > stack {
|
|
background-color: @bg_color;
|
|
border: none;
|
|
}
|
|
|
|
notebook > header {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: @light_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
notebook > header.top { border-bottom: 1px solid @bg_color; }
|
|
notebook > header.bottom { border-top: 1px solid @bg_color; }
|
|
notebook > header.left { border-right: 1px solid @bg_color; }
|
|
notebook > header.right { border-left: 1px solid @bg_color; }
|
|
|
|
notebook > header > tabs { margin: 0; }
|
|
|
|
notebook > header > tabs > tab {
|
|
min-height: 22px;
|
|
min-width: 24px;
|
|
padding: 3px 10px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-color: @light_color;
|
|
color: @menu_color;
|
|
font-weight: normal;
|
|
transition: background-color 120ms ease-out, color 120ms ease-out;
|
|
}
|
|
|
|
notebook > header > tabs > tab:hover {
|
|
background-color: shade(@selected_bg_color, 0.75);
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
notebook > header > tabs > tab:checked {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
notebook > header > tabs > tab:disabled { color: @insensitive_fg_color; }
|
|
|
|
notebook > header.top > tabs > tab:first-child { border-top-left-radius: 3px; }
|
|
notebook > header.top > tabs > tab:last-child { border-top-right-radius: 3px; }
|
|
notebook > header.bottom > tabs > tab:first-child { border-bottom-left-radius: 3px; }
|
|
notebook > header.bottom > tabs > tab:last-child { border-bottom-right-radius: 3px; }
|
|
|
|
notebook > header > tabs > tab button.flat {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding: 0;
|
|
margin-left: 4px;
|
|
border-radius: 2px;
|
|
color: inherit;
|
|
}
|
|
|
|
notebook > header > tabs > tab button.flat:hover {
|
|
background-color: shade(@selected_bg_color, 1.3);
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
notebook > header > arrow {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
color: @menu_color;
|
|
border-radius: 0;
|
|
}
|
|
|
|
notebook > header > arrow:hover { color: @selected_bg_color; }
|
|
notebook > header > arrow:disabled { color: @insensitive_fg_color; }
|
|
|
|
/************
|
|
* toolbars *
|
|
************/
|
|
toolbar,
|
|
.toolbar {
|
|
padding: 2px;
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
toolbar.horizontal separator { margin: 2px 4px; }
|
|
toolbar.vertical separator { margin: 4px 2px; }
|
|
|
|
toolbar.osd,
|
|
.osd {
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
searchbar,
|
|
.search-bar,
|
|
actionbar > revealer > box,
|
|
.location-bar {
|
|
padding: 4px;
|
|
border-bottom: 1px solid @light_color;
|
|
background-color: @bg_color;
|
|
}
|
|
|
|
actionbar > revealer > box {
|
|
border-bottom: none;
|
|
border-top: 1px solid @light_color;
|
|
}
|
|
|
|
/**************
|
|
* headerbars *
|
|
**************/
|
|
headerbar,
|
|
.titlebar {
|
|
min-height: 40px;
|
|
padding: 5px;
|
|
border: none;
|
|
border-bottom: 1px solid @light_color;
|
|
border-radius: 3px 3px 0 0;
|
|
background-color: @bg_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
color: @fg_color;
|
|
}
|
|
|
|
headerbar:backdrop,
|
|
.titlebar:backdrop { color: @menu_color; }
|
|
|
|
.tiled headerbar,
|
|
.maximized headerbar,
|
|
.fullscreen headerbar,
|
|
.tiled .titlebar,
|
|
.maximized .titlebar { border-radius: 0; }
|
|
|
|
headerbar .title,
|
|
.titlebar .title {
|
|
padding: 0 6px;
|
|
font-weight: bold;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
headerbar .subtitle,
|
|
.titlebar .subtitle {
|
|
padding: 0 6px;
|
|
font-size: 80%;
|
|
color: @menu_color;
|
|
}
|
|
|
|
headerbar button.titlebutton {
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
padding: 2px;
|
|
border-radius: 2px;
|
|
color: @menu_color;
|
|
}
|
|
|
|
headerbar button.titlebutton:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
headerbar button.titlebutton.close:hover { background-color: @error_color; }
|
|
|
|
headerbar entry,
|
|
headerbar spinbutton { min-height: 24px; }
|
|
|
|
/***************
|
|
* tree views *
|
|
***************/
|
|
treeview.view {
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
-GtkTreeView-grid-line-width: 0;
|
|
-GtkTreeView-tree-line-width: 0;
|
|
}
|
|
|
|
treeview.view:hover { background-color: shade(@bg_color, 1.25); }
|
|
|
|
treeview.view:selected,
|
|
treeview.view:selected:focus {
|
|
border-radius: 0;
|
|
background-color: @light_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
treeview.view:selected:hover { background-color: shade(@light_color, 1.2); }
|
|
|
|
treeview.view:disabled { color: @insensitive_fg_color; }
|
|
|
|
treeview.view.separator { min-height: 2px; color: @light_color; }
|
|
|
|
treeview.view:drop(active) { border-color: @selected_bg_color; }
|
|
|
|
treeview.view.expander {
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
color: @menu_color;
|
|
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
|
}
|
|
|
|
treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
|
|
treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
|
treeview.view.expander:hover { color: @selected_bg_color; }
|
|
|
|
treeview.view header button {
|
|
min-height: 22px;
|
|
padding: 3px 6px;
|
|
border: none;
|
|
border-right: 1px solid @bg_color;
|
|
border-bottom: 1px solid @bg_color;
|
|
border-radius: 0;
|
|
background-color: @light_color;
|
|
color: @menu_color;
|
|
font-weight: normal;
|
|
text-shadow: none;
|
|
}
|
|
|
|
treeview.view header button:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
treeview.view header button:last-child { border-right: none; }
|
|
|
|
treeview.view header button:disabled { color: @insensitive_fg_color; }
|
|
|
|
/* CellRendererProgress puts .trough / .progressbar on the treeview's own
|
|
* node rather than creating child nodes, so these must be classes. */
|
|
treeview.view.progressbar,
|
|
treeview.view.progressbar:selected,
|
|
treeview.view progressbar progress {
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: @selected_bg_color;
|
|
background-image: none;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
treeview.view.trough,
|
|
treeview.view.trough:selected,
|
|
treeview.view progressbar trough {
|
|
border: 1px solid @trough_border_color;
|
|
border-radius: 2px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
}
|
|
|
|
treeview.view.dnd { border: 1px solid @selected_bg_color; }
|
|
|
|
/*********************
|
|
* lists and sidebars *
|
|
*********************/
|
|
list {
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
list row,
|
|
row.activatable {
|
|
padding: 2px;
|
|
border: none;
|
|
background-color: transparent;
|
|
transition: background-color 100ms ease-out;
|
|
}
|
|
|
|
list row:hover,
|
|
row.activatable:hover { background-color: @light_color; }
|
|
|
|
list row:selected,
|
|
row:selected {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
list row:selected:hover { background-color: shade(@selected_bg_color, 1.15); }
|
|
|
|
list row:disabled,
|
|
row:disabled { color: @insensitive_fg_color; }
|
|
|
|
list.horizontal row:not(:last-child) { border-right: 1px solid @light_color; }
|
|
list:not(.horizontal) row:not(:last-child) { border-bottom: 1px solid transparent; }
|
|
|
|
.sidebar,
|
|
placessidebar,
|
|
stacksidebar {
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
.sidebar list,
|
|
placessidebar list,
|
|
stacksidebar list { background-color: @bg_color; }
|
|
|
|
.sidebar row:hover,
|
|
placessidebar row:hover,
|
|
stacksidebar row:hover { background-color: @light_color; color: @fg_color; }
|
|
|
|
.sidebar row:selected,
|
|
.sidebar row:selected:focus,
|
|
placessidebar row:selected,
|
|
stacksidebar row:selected {
|
|
background-color: @light_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
.sidebar row:selected:hover { background-color: shade(@light_color, 1.25); }
|
|
|
|
placessidebar row image { color: @menu_color; }
|
|
placessidebar row:selected image { color: @selected_bg_color; }
|
|
placessidebar row.sidebar-new-bookmark-row { color: @selected_bg_color; }
|
|
|
|
/* separator between the sidebar and the content */
|
|
paned > separator,
|
|
.pane-separator {
|
|
min-width: 3px;
|
|
min-height: 3px;
|
|
padding: 0;
|
|
border: none;
|
|
background-color: @light_color;
|
|
background-image: url("assets/handle-vertical.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
paned.horizontal > separator {
|
|
background-image: url("assets/handle-vertical.png");
|
|
}
|
|
|
|
paned.vertical > separator {
|
|
background-image: url("assets/handle-horizontal.png");
|
|
}
|
|
|
|
paned > separator:hover,
|
|
paned > separator:selected { background-color: @selected_bg_color; }
|
|
|
|
paned > separator.wide {
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
background-color: @bg_color;
|
|
}
|
|
|
|
/***********************
|
|
* frames and viewports *
|
|
***********************/
|
|
frame > border,
|
|
.frame {
|
|
border: 1px solid @light_color;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
frame.flat > border,
|
|
.frame.flat { border: none; }
|
|
|
|
frame > label { color: @menu_color; padding: 0 4px; }
|
|
|
|
scrolledwindow viewport.frame { border: none; }
|
|
|
|
scrolledwindow overshoot.top {
|
|
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5,
|
|
to(alpha(@selected_bg_color, 0.25)), to(transparent));
|
|
background-size: 100% 60%;
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
}
|
|
|
|
scrolledwindow overshoot.bottom {
|
|
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5,
|
|
to(alpha(@selected_bg_color, 0.25)), to(transparent));
|
|
background-size: 100% 60%;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
scrolledwindow undershoot.top,
|
|
scrolledwindow undershoot.bottom,
|
|
scrolledwindow undershoot.left,
|
|
scrolledwindow undershoot.right { background-image: none; }
|
|
|
|
/*************
|
|
* expanders *
|
|
*************/
|
|
expander title > arrow,
|
|
expander arrow {
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
color: @menu_color;
|
|
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
|
}
|
|
|
|
expander title > arrow:dir(rtl),
|
|
expander arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
|
|
|
|
expander title > arrow:checked,
|
|
expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
|
|
|
expander title > arrow:hover,
|
|
expander arrow:hover { color: @selected_bg_color; }
|
|
|
|
/************
|
|
* tooltips *
|
|
************/
|
|
tooltip,
|
|
tooltip.background {
|
|
padding: 4px;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
color: @bright_fg_color;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
tooltip label,
|
|
tooltip * { background-color: transparent; color: @bright_fg_color; }
|
|
|
|
tooltip decoration { background-color: transparent; box-shadow: none; }
|
|
|
|
/************
|
|
* popovers *
|
|
************/
|
|
popover.background {
|
|
padding: 2px;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
background-image: none;
|
|
color: @fg_color;
|
|
box-shadow: 0 1px 4px alpha(black, 0.5);
|
|
}
|
|
|
|
popover.background > arrow {
|
|
border: 1px solid @light_color;
|
|
background-color: @dark_color;
|
|
}
|
|
|
|
popover.background separator { background-color: @light_color; }
|
|
|
|
popover.background list,
|
|
popover.background .view { background-color: @dark_color; }
|
|
|
|
modelbutton.flat,
|
|
popover.background button.flat {
|
|
min-height: 22px;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
background-color: transparent;
|
|
color: @fg_color;
|
|
}
|
|
|
|
modelbutton.flat:hover,
|
|
popover.background button.flat:hover {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
|
|
modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
|
|
|
/************
|
|
* infobars *
|
|
************/
|
|
infobar { border: none; background-color: transparent; }
|
|
|
|
infobar > revealer > box {
|
|
padding: 6px;
|
|
border-bottom: 1px solid @light_color;
|
|
background-color: @light_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
infobar.info > revealer > box { background-color: @light_color; }
|
|
infobar.question > revealer > box { background-color: @light_color; }
|
|
infobar.warning > revealer > box { background-color: @warning_color; color: #1A1206; }
|
|
infobar.error > revealer > box { background-color: @error_color; color: @bright_fg_color; }
|
|
|
|
infobar.warning button,
|
|
infobar.error button {
|
|
background-color: alpha(black, 0.22);
|
|
color: inherit;
|
|
}
|
|
|
|
infobar.warning button:hover,
|
|
infobar.error button:hover { background-color: alpha(black, 0.38); }
|
|
|
|
.app-notification {
|
|
padding: 6px;
|
|
border: 1px solid @light_color;
|
|
border-top-width: 0;
|
|
border-radius: 0 0 3px 3px;
|
|
background-color: @dark_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
/*************
|
|
* calendars *
|
|
*************/
|
|
calendar {
|
|
padding: 2px;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @dark_color;
|
|
color: @fg_color;
|
|
}
|
|
|
|
calendar:selected {
|
|
border-radius: 2px;
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
calendar.header {
|
|
border: none;
|
|
border-bottom: 1px solid @light_color;
|
|
border-radius: 0;
|
|
background-color: @dark_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
calendar.button {
|
|
padding: 2px;
|
|
background-color: transparent;
|
|
color: @menu_color;
|
|
}
|
|
|
|
calendar.button:hover { color: @selected_bg_color; background-color: transparent; }
|
|
|
|
calendar.highlight { color: @menu_color; font-weight: normal; }
|
|
calendar:indeterminate { color: @insensitive_fg_color; }
|
|
|
|
/**************
|
|
* statusbars *
|
|
**************/
|
|
statusbar {
|
|
padding: 4px 8px;
|
|
border: none;
|
|
background-color: @bg_color;
|
|
color: @menu_color;
|
|
}
|
|
|
|
statusbar frame > border { border: none; }
|
|
|
|
/***********
|
|
* dialogs *
|
|
***********/
|
|
messagedialog,
|
|
messagedialog.background {
|
|
background-color: @bg_color;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
messagedialog .titlebar {
|
|
border: none;
|
|
background-color: @bg_color;
|
|
min-height: 24px;
|
|
}
|
|
|
|
messagedialog .dialog-action-area button {
|
|
padding: 8px 12px;
|
|
border-radius: 0;
|
|
background-color: @bg_color;
|
|
border-top: 1px solid @light_color;
|
|
border-right: 1px solid @light_color;
|
|
}
|
|
|
|
messagedialog .dialog-action-area button:last-child { border-right: none; }
|
|
messagedialog .dialog-action-area button:hover { background-color: @selected_bg_color; }
|
|
|
|
.dialog-vbox { padding: 4px; }
|
|
|
|
assistant .sidebar { border: none; background-color: @dark_color; }
|
|
assistant .sidebar label { padding: 6px 12px; color: @menu_color; }
|
|
assistant .sidebar label.highlight { color: @bright_fg_color; font-weight: normal; }
|
|
|
|
filechooser .dialog-action-box { border-top: 1px solid @light_color; }
|
|
filechooser #pathbarbox { border-bottom: 1px solid @light_color; background-color: @bg_color; }
|
|
|
|
/***************
|
|
* decorations *
|
|
***************/
|
|
decoration {
|
|
border-radius: 3px 3px 0 0;
|
|
border: 1px solid @light_color;
|
|
box-shadow: 0 2px 6px 1px alpha(black, 0.6);
|
|
margin: 4px;
|
|
}
|
|
|
|
decoration:backdrop { box-shadow: 0 1px 3px 1px alpha(black, 0.4); }
|
|
|
|
.tiled decoration,
|
|
.maximized decoration,
|
|
.fullscreen decoration,
|
|
.solid-csd decoration {
|
|
border-radius: 0;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
decoration-overlay { background: none; }
|
|
|
|
/*********
|
|
* misc *
|
|
*********/
|
|
stackswitcher button {
|
|
border-radius: 0;
|
|
border-right: 1px solid @bg_color;
|
|
}
|
|
|
|
stackswitcher button:first-child { border-radius: 3px 0 0 3px; }
|
|
stackswitcher button:last-child { border-radius: 0 3px 3px 0; border-right: none; }
|
|
|
|
iconview.view:selected,
|
|
iconview.view:selected:focus,
|
|
.nautilus-canvas-item:selected,
|
|
.caja-canvas-item:selected {
|
|
border-radius: 2px;
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
flowbox flowboxchild { padding: 2px; border-radius: 2px; }
|
|
flowbox flowboxchild:selected { background-color: @selected_bg_color; color: @selected_fg_color; }
|
|
|
|
.rubberband,
|
|
rubberband {
|
|
border: 1px solid @selected_bg_color;
|
|
background-color: alpha(@selected_bg_color, 0.25);
|
|
}
|
|
|
|
.selection-mode headerbar,
|
|
.selection-mode .titlebar {
|
|
background-color: @selected_bg_color;
|
|
color: @selected_fg_color;
|
|
}
|
|
|
|
colorswatch { border-radius: 2px; }
|
|
colorswatch overlay { border: 1px solid @light_color; border-radius: 2px; }
|
|
colorswatch:selected overlay { border-color: @selected_bg_color; }
|
|
|
|
.monospace { font-family: monospace; }
|
|
|
|
.keycap {
|
|
padding: 2px 6px;
|
|
border: 1px solid @light_color;
|
|
border-radius: 3px;
|
|
background-color: @light_color;
|
|
color: @bright_fg_color;
|
|
}
|
|
|
|
.circular-button { border-radius: 9999px; }
|
|
|
|
.osd .scale slider { background-color: @selected_bg_color; }
|
|
|
|
.needs-attention > label,
|
|
.needs-attention > image { color: @selected_bg_color; }
|
|
|
|
/* drag-and-drop feedback */
|
|
*:drop(active) { border-color: @selected_bg_color; }
|