517 lines
12 KiB
CSS
517 lines
12 KiB
CSS
/***********
|
|
* Widgets *
|
|
**********/
|
|
|
|
/*
|
|
Contributor notes:
|
|
Please use two space indentions.
|
|
Stack all related and child selectors and selector states into a logical hierarchy to a readable degree.
|
|
*/
|
|
|
|
/* default */
|
|
* {
|
|
-GtkHTML-link-color: @link_color;
|
|
-GtkIMHtml-hyperlink-color: @link_color;
|
|
-GtkMenu-horizontal-offset: 0px;
|
|
-GtkScrollbar-has-backward-stepper: true;
|
|
-GtkScrollbar-has-forward-stepper: true;
|
|
-GtkScrolledWindow-scrollbar-spacing: 0;
|
|
-GtkTextView-error-underline-color: @error_color;
|
|
-GtkToolButton-icon-spacing: 6;
|
|
-GtkToolItemGroup-expander-size: 8;
|
|
-GtkTreeView-expander-size: 16;
|
|
-GtkWindow-resize-grip-default: true;
|
|
-GtkWindow-resize-grip-height: 16;
|
|
-GtkWindow-resize-grip-width: 16;
|
|
-WnckTasklist-fade-overlay-rect: 0;
|
|
-GtkTreeView-horizontal-separator: 1;
|
|
-GtkTreeView-grid-line-width: 1;
|
|
-GtkTreeView-grid-line-pattern: '';
|
|
-GtkTreeView-tree-line-width: 1;
|
|
-GtkTreeView-tree-line-pattern: '';
|
|
background-clip: padding-box;
|
|
outline-width: 1px;
|
|
outline-offset: 0px;
|
|
outline-color: @selected_inactive_bg_color;
|
|
outline-style: solid; }
|
|
|
|
.background {
|
|
background-color: @theme_bg_color;
|
|
color: @theme_fg_color; }
|
|
|
|
iconview:selected,
|
|
/*iconview in nautilus breaks without this, but with it radio and check buttons background break in lists... */
|
|
:not(check):not(radio).view:selected, :selected, selection {
|
|
background-color: @theme_selected_bg_color;
|
|
color: @theme_selected_fg_color; }
|
|
|
|
:disabled, :disabled:disabled {
|
|
color: @disabled_font;
|
|
text-shadow: 1px 1px 0 @disabled_font_shadow;
|
|
-gtk-icon-shadow: 1px 1px @border_bright;
|
|
-gtk-icon-effect: dim; }
|
|
|
|
/* There appears to be a bug(?) in gtk treeviews on :focus with outlines that will cause a momentary displacement of the UI. Keep the treeview exclusion! */
|
|
:focus:not(treeview):not(view):not(checkbutton):not(radiobutton) {
|
|
outline: 1px dotted @border_dark;
|
|
-gtk-outline-radius: 0px;
|
|
outline-offset: -4px; }
|
|
|
|
.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: @window_title_bg_color;
|
|
color: @window_title_text_color; }
|
|
|
|
image,
|
|
image:disabled,
|
|
label,
|
|
label:disabled,
|
|
box,
|
|
box:disabled {
|
|
background-color: transparent;
|
|
min-width: 0px;
|
|
min-height: 0px; }
|
|
|
|
/*Disabled below since it was setting a grey background on MATE desktops. (Affects Caja)*/
|
|
/*
|
|
grid,
|
|
grid:disabled {
|
|
background-color: @bg_color; }*/
|
|
|
|
stepper,
|
|
.stepper {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin: 0px; }
|
|
|
|
slider,
|
|
.slider {
|
|
min-width: 10px;
|
|
background-color: @bg_color;}
|
|
|
|
border.flat {
|
|
border-style: none;
|
|
box-shadow: none; }
|
|
|
|
/****************
|
|
* drawing area *
|
|
****************/
|
|
|
|
/* FINDME */
|
|
GtkDrawingArea {
|
|
background-color: @theme_base_color; }
|
|
|
|
GtkDrawingArea:disabled {
|
|
background-color: shade(@theme_base_color, 0.9); }
|
|
|
|
|
|
/***********
|
|
* gtkhtml *
|
|
***********/
|
|
|
|
/* FINDME */
|
|
GtkHTML {
|
|
background-color: @theme_base_color;
|
|
color: @theme_text_color; }
|
|
|
|
/************
|
|
* calendar *
|
|
************/
|
|
|
|
calendar {
|
|
padding: 2px; }
|
|
|
|
/*Calendar content*/
|
|
calendar.view {
|
|
padding: 2px;
|
|
background-color: @bg_bright;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-image: url("buttons/combobox_button_normal.png");
|
|
border-image-slice: 2 2 2 2; }
|
|
|
|
/* Month and year */
|
|
calendar.header {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: @border_color @border_dark @border_dark @border_color;
|
|
box-shadow: inset 1px 1px @border_bright, inset -1px -1px @border_shade;
|
|
border-radius: 0px;
|
|
background-color: @bg_color; }
|
|
|
|
/* Calendar week, day label */
|
|
calendar.highlight {
|
|
background-color: @bg_shade;
|
|
color: @bg_color;
|
|
font-weight: bold; }
|
|
|
|
/* day selected */
|
|
calendar:selected {
|
|
background-color: @selected_bg_color; }
|
|
|
|
|
|
/************
|
|
* expander *
|
|
************/
|
|
|
|
expander arrow {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 10px;
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
-gtk-icon-source: none; }
|
|
expander arrow {
|
|
background-image: url("assets/arrow-right.png"); }
|
|
expander arrow:hover {
|
|
background-image: url("assets/arrow-right-selected.png"); }
|
|
expander arrow:checked {
|
|
background-image: url("assets/arrow-down.png"); }
|
|
expander arrow:checked:hover {
|
|
background-image: url("assets/arrow-down-selected.png"); }
|
|
|
|
treeview.view.expander {
|
|
-gtk-icon-palette: default;
|
|
-gtk-icon-source: -gtk-icontheme('pane-show-symbolic'); }
|
|
treeview.view.expander:selected {
|
|
color: @selected_fg_color;
|
|
-gtk-icon-source: -gtk-icontheme('pane-show-symbolic'); }
|
|
treeview.view.expander:checked {
|
|
-gtk-icon-source: -gtk-icontheme('pane-hide-symbolic'); }
|
|
treeview.view.expander:checked:selected {
|
|
color: @selected_fg_color;
|
|
-gtk-icon-source: -gtk-icontheme('pane-hide-symbolic'); }
|
|
|
|
/************
|
|
* iconview *
|
|
************/
|
|
|
|
iconview.view.cell {
|
|
border: 0px solid @border_dark;
|
|
border-radius: 0px; }
|
|
|
|
/***********
|
|
* infobar *
|
|
***********/
|
|
|
|
infobar {
|
|
padding:2px;
|
|
border: 1px solid @border_dark;
|
|
border-radius: 1px; }
|
|
|
|
/* The Info bar uses the colors and button layout from clippy! */
|
|
|
|
.info {
|
|
background-color: @info_bg_color;
|
|
color: @info_fg_color; }
|
|
|
|
.warning {
|
|
background-color: @warning_bg_color;
|
|
color: @warning_fg_color; }
|
|
|
|
.question {
|
|
background-color: @question_bg_color;
|
|
color: @question_fg_color; }
|
|
|
|
.error {
|
|
background-color: @error_bg_color;
|
|
color: @error_fg_color; }
|
|
|
|
/*******************
|
|
* symbolic images *
|
|
*******************/
|
|
|
|
/* FINDME */
|
|
.image {
|
|
color: alpha(currentColor, 0.5); }
|
|
|
|
.image:hover {
|
|
color: alpha(currentColor, 0.9); }
|
|
|
|
.image:selected,
|
|
.image:selected:hover {
|
|
color: @theme_selected_fg_color; }
|
|
|
|
.view.image,
|
|
.view.image:hover {
|
|
color: alpha(currentColor, 0.9); }
|
|
|
|
.view.image:selected,
|
|
.view.image:selected:hover {
|
|
color: @theme_selected_fg_color; }
|
|
|
|
/*******************
|
|
* slider / switch *
|
|
*******************/
|
|
|
|
switch {
|
|
color: @text_color; }
|
|
|
|
media_playpause {
|
|
background-color: @bg_color; }
|
|
|
|
/****************
|
|
* stacksidebar *
|
|
****************/
|
|
|
|
stacksidebar separator {
|
|
padding: 0px;
|
|
margin: 0px; }
|
|
|
|
stacksidebar list {
|
|
margin: 0px;
|
|
background-color: @bg_color; }
|
|
|
|
stacksidebar.sidebar list{
|
|
margin: 0px; }
|
|
|
|
stacksidebar list row {
|
|
padding: 3px;
|
|
margin: 0px; }
|
|
|
|
stacksidebar list row label {
|
|
padding: 3px; }
|
|
|
|
stacksidebar list row:selected,
|
|
stacksidebar list row:selected:focus,
|
|
stacksidebar list row:selected:hover {
|
|
outline: 1px dotted @border_dark;
|
|
-gtk-outline-radius: 0px;
|
|
outline-offset: -6px; }
|
|
|
|
/***********
|
|
* stack *
|
|
***********/
|
|
|
|
/* Some applications will use stacks in non-conventional ways. This should prevent theming of .view in gtk-viewports.css from affecting stack views. */
|
|
stack.view {
|
|
background-color: @bg_color; }
|
|
|
|
stack overlay box box scrolledwindow viewport list row {
|
|
border-bottom: 1px solid @border_shade; }
|
|
|
|
/***********
|
|
* sidebar *
|
|
***********/
|
|
|
|
.sidebar {
|
|
background-color: @bg_color;
|
|
-gtk-icon-style: regular; }
|
|
.sidebar viewport.frame {
|
|
padding: 0px;
|
|
border: 2px solid @border_dark;
|
|
border-image: url("assets/frame_inset.png");
|
|
border-image-slice: 2 2 2 2;
|
|
border-radius: 0px;
|
|
background-color: @theme_bg_color;
|
|
box-shadow: none; }
|
|
.sidebar list {
|
|
color: @selected_fg_color;
|
|
padding: 1px;
|
|
background-color: @bg_shade; }
|
|
.sidebar viewport list row {
|
|
padding: 0px; }
|
|
.sidebar viewport list row:selected {
|
|
background-color: transparent;
|
|
outline: 1px dotted @border_bright;
|
|
outline-offset: -4px;
|
|
box-shadow: inset 1px 1px @border_shade_dark, inset -1px -1px @border_light; }
|
|
.sidebar.view,
|
|
.sidebar .view {
|
|
background-color: @bg_bright;
|
|
color: @text_color;
|
|
box-shadow: none;}
|
|
.sidebar {
|
|
background-color: @bg_color;
|
|
color: @text_color;}
|
|
|
|
.sidebar-item {
|
|
padding: 10px 4px; }
|
|
.sidebar-item > Gtklabel {
|
|
padding-left: 6px;
|
|
padding-right: 6px; }
|
|
.sidebar-item.needs-attention > Gtklabel {
|
|
background-size: 6px 6px, 0 0; }
|
|
|
|
.sidebar-button.button.image-button {
|
|
padding: 3px;
|
|
border-radius: 0;
|
|
box-shadow: 0px 0px 0px alpha(@dark_shadow,0); }
|
|
|
|
.sidebar-button.button:not(:hover):not(:active) > GtkImage {
|
|
opacity: 0.5; }
|
|
|
|
.sidebar-item {
|
|
padding: 5px; }
|
|
|
|
.sidebar-item.needs-attention > GtkLabel {
|
|
background-size: 6px 6px, 0 0; }
|
|
|
|
/**********
|
|
* switch *
|
|
**********/
|
|
|
|
switch {
|
|
background-color: @base_color; }
|
|
switch slider {
|
|
margin: 1px;
|
|
min-width: 18px;
|
|
min-height: 12px; }
|
|
|
|
/***************
|
|
* Colorswatch *
|
|
***************/
|
|
|
|
colorswatch {
|
|
background-color: transparent;
|
|
background-clip: border-box;
|
|
padding: 2px; }
|
|
|
|
colorswatch:selected overlay {
|
|
background-color: transparent; }
|
|
|
|
colorswatch:selected {
|
|
background-color: transparent; }
|
|
|
|
/************************
|
|
* overshoot undershoot *
|
|
************************/
|
|
|
|
/* get rid of these frekin overshoots, this isen't a phone! */
|
|
overshoot, undershoot {
|
|
background-color: transparent; }
|
|
|
|
/************
|
|
* Box Link *
|
|
************/
|
|
|
|
box label link {
|
|
color: @link_color;
|
|
text-shadow: 1px 1px @selected_inactive_bg_color; }
|
|
box label link:hover {
|
|
text-shadow: 1px 1px @link_color_shadow; }
|
|
|
|
/*******
|
|
* osd *
|
|
*******/
|
|
|
|
.background.osd {
|
|
color: @osd_fg;
|
|
background-color: @osd_bg; }
|
|
|
|
.osd .trough {
|
|
background-color: @osd_trough_bg;}
|
|
|
|
overlay.osd {
|
|
background-color: transparent; }
|
|
|
|
overlay toolbar.osd {
|
|
border-bottom: none;
|
|
box-shadow: none; }
|
|
|
|
overlay frame {
|
|
border: none;
|
|
box-shadow: none; }
|
|
|
|
/**************
|
|
* header-bar *
|
|
**************/
|
|
|
|
headerbar .title {
|
|
font-weight: bold; }
|
|
|
|
headerbar .subtitle {
|
|
font-size: smaller; }
|
|
|
|
/**************
|
|
* rubberband *
|
|
**************/
|
|
|
|
.rubberband,
|
|
rubberband,
|
|
.view .rubberband,
|
|
flowbox rubberband,
|
|
treeview.view rubberband,
|
|
.content-view rubberband {
|
|
border: 1px dotted @border_color;
|
|
background: rgba(0,0,50.2,0.5);
|
|
border-radius: 0px; }
|
|
|
|
/* Misc stuff */
|
|
|
|
flowboxchild {
|
|
border: 1px solid transparent;
|
|
box-shadow: none;
|
|
padding: 4px; }
|
|
flowbox checkbutton:checked {
|
|
background-color: @bg_shade; }
|
|
|
|
textview text,
|
|
grid viewport box box textview {
|
|
background-color: @bg_bright; }
|
|
|
|
/* dialog-vbox */
|
|
|
|
.dialog-vbox {
|
|
-gtk-icon-style: regular; }
|
|
.dialog-vbox flowbox flowboxchild:focus {
|
|
outline-color: @selected_fg_color; }
|
|
|
|
/*.dialog-vbox > grid {
|
|
border: 2px solid @border_dark;
|
|
border-image: url("assets/frame_inset.png");
|
|
border-image-slice: 2 2 2 2;
|
|
border-radius: 0px;
|
|
box-shadow: none; }*/
|
|
|
|
/* Spinner */
|
|
@keyframes spin {
|
|
0% { -gtk-icon-source: url("assets/hglass_f1.png"); }
|
|
5% { -gtk-icon-source: url("assets/hglass_f2.png"); }
|
|
10% { -gtk-icon-source: url("assets/hglass_f0.png"); }
|
|
15% { -gtk-icon-source: url("assets/hglass_f2.png"); }
|
|
20% { -gtk-icon-source: url("assets/hglass_f0.png"); }
|
|
25% { -gtk-icon-source: url("assets/hglass_f2.png"); }
|
|
30% { -gtk-icon-source: url("assets/hglass_f0.png"); }
|
|
35% { -gtk-icon-source: url("assets/hglass_f2.png"); }
|
|
40% { -gtk-icon-source: url("assets/hglass_f3.png"); }
|
|
45% { -gtk-icon-source: url("assets/hglass_f4.png"); }
|
|
50% { -gtk-icon-source: url("assets/hglass_f5.png"); }
|
|
55% { -gtk-icon-source: url("assets/hglass_f6.png"); }
|
|
60% { -gtk-icon-source: url("assets/hglass_f7.png"); }
|
|
65% { -gtk-icon-source: url("assets/hglass_f8.png"); }
|
|
70% { -gtk-icon-source: url("assets/hglass_f9.png"); }
|
|
75% { -gtk-icon-source: url("assets/hglass_f10.png"); }
|
|
80% { -gtk-icon-source: url("assets/hglass_f11.png"); }
|
|
85% { -gtk-icon-source: url("assets/hglass_f12.png"); }
|
|
90% { -gtk-icon-source: url("assets/hglass_f13.png"); }
|
|
95% { -gtk-icon-source: url("assets/hglass_f14.png"); }
|
|
100% { -gtk-icon-source: url("assets/hglass_f15.png"); }
|
|
}
|
|
|
|
spinner {
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
background: none;
|
|
opacity: 0;
|
|
-gtk-icon-source: url("assets/hglass_f1.png"); }
|
|
spinner:backdrop {
|
|
color: @bg_color; }
|
|
spinner:checked {
|
|
opacity: 1;
|
|
animation: spin 2s steps(20) infinite; }
|
|
spinner:checked:disabled {
|
|
opacity: 0.5;
|
|
-gtk-icon-shadow: none; }
|