OrionOS/themes/SkyOS/gtk-3.0/gtk.css

/* SkyOS GTK3 Theme — BeOS/SkyOS tan palette */

/* ── variables ───────────────────────────────────────────────────────── */
@define-color bg_color       #D8CEAA;
@define-color bg_dark        #C8BE9A;
@define-color bg_darker      #B0A888;
@define-color bg_light       #E8DEC0;
@define-color border_light   #F0E8D0;
@define-color border_dark    #6B5F50;
@define-color text_color     #100800;
@define-color text_disabled  #7A7060;
@define-color selected_bg    #4A6888;
@define-color selected_fg    #FFFFFF;
@define-color accent         #4A6888;
@define-color button_bg      #C8BE9A;
@define-color button_hover   #D8D0B8;
@define-color button_active  #A89E88;
@define-color entry_bg       #F5F0E0;
@define-color tooltip_bg     #FFFCE0;
@define-color link_color     #2244AA;

/* ── window / base ───────────────────────────────────────────────────── */
* {
    font-family: "Sans";
    font-size: 10pt;
    color: @text_color;
    outline: none;
    -gtk-icon-style: regular;
}

window, .background {
    background-color: @bg_color;
    color: @text_color;
}

/* ── header bars ─────────────────────────────────────────────────────── */
headerbar, .titlebar {
    background: linear-gradient(to bottom, @bg_light, @bg_dark);
    border-bottom: 1px solid @border_dark;
    color: @text_color;
    padding: 4px 8px;
    min-height: 28px;
}
headerbar .title { font-weight: bold; }

/* ── buttons ─────────────────────────────────────────────────────────── */
button {
    background: linear-gradient(to bottom, @border_light, @button_bg);
    border: 1px solid @border_dark;
    border-radius: 2px;
    padding: 3px 10px;
    color: @text_color;
    box-shadow: inset 1px 1px 0 @border_light, inset -1px -1px 0 @border_dark;
}
button:hover {
    background: linear-gradient(to bottom, #F8F0D8, @button_hover);
}
button:active, button:checked {
    background: linear-gradient(to bottom, @button_active, @bg_darker);
    box-shadow: inset 1px 1px 0 @border_dark, inset -1px -1px 0 @border_light;
}
button:disabled {
    color: @text_disabled;
    background: @bg_color;
}
button.suggested-action {
    background: linear-gradient(to bottom, #5A7898, @accent);
    color: white;
    border-color: #3A5878;
}
button.destructive-action {
    background: linear-gradient(to bottom, #DD5555, #BB3333);
    color: white;
    border-color: #993333;
}

/* ── menus ───────────────────────────────────────────────────────────── */
menu, .menu, .context-menu {
    background-color: @bg_color;
    border: 1px solid @border_dark;
    padding: 2px 0;
}
menuitem {
    padding: 4px 12px;
    color: @text_color;
}
menuitem:hover, menuitem:selected {
    background-color: @selected_bg;
    color: @selected_fg;
}
menuitem:disabled { color: @text_disabled; }

separator, menuitem > separator {
    background-color: @border_dark;
    min-height: 1px;
    margin: 3px 6px;
}

/* ── entries (text input) ────────────────────────────────────────────── */
entry {
    background-color: @entry_bg;
    border: 1px solid @border_dark;
    border-radius: 1px;
    padding: 3px 6px;
    color: @text_color;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.12);
}
entry:focus {
    border-color: @accent;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.12), 0 0 0 2px rgba(74,104,136,0.25);
}
entry:disabled { background-color: @bg_color; color: @text_disabled; }

/* ── lists & trees ───────────────────────────────────────────────────── */
treeview, listview, .view {
    background-color: @entry_bg;
    color: @text_color;
}
treeview:selected, listview row:selected, .view:selected {
    background-color: @selected_bg;
    color: @selected_fg;
}
treeview header button {
    background: linear-gradient(to bottom, @bg_light, @bg_dark);
    border-right: 1px solid @border_dark;
    border-bottom: 1px solid @border_dark;
    border-radius: 0;
    box-shadow: none;
}

/* ── notebooks (tabs) ────────────────────────────────────────────────── */
notebook > header {
    background-color: @bg_darker;
    border-bottom: 1px solid @border_dark;
}
notebook > header tab {
    background-color: @bg_dark;
    border: 1px solid @border_dark;
    border-bottom: none;
    padding: 4px 12px;
    margin-right: 2px;
    border-radius: 2px 2px 0 0;
}
notebook > header tab:checked {
    background-color: @bg_color;
    border-bottom: 1px solid @bg_color;
    margin-bottom: -1px;
}
notebook > stack { background-color: @bg_color; }

/* ── scrollbars ──────────────────────────────────────────────────────── */
scrollbar {
    background-color: @bg_darker;
    border: 1px solid @border_dark;
}
scrollbar slider {
    background-color: @button_bg;
    border: 1px solid @border_dark;
    border-radius: 2px;
    min-width: 12px;
    min-height: 12px;
}
scrollbar slider:hover { background-color: @button_hover; }
scrollbar button { background-color: @bg_dark; }

/* ── toolbars ────────────────────────────────────────────────────────── */
toolbar, .toolbar {
    background: linear-gradient(to bottom, @bg_light, @bg_dark);
    border-bottom: 1px solid @border_dark;
    padding: 2px;
}

/* ── statusbar ───────────────────────────────────────────────────────── */
statusbar {
    background-color: @bg_darker;
    border-top: 1px solid @border_dark;
    padding: 2px 6px;
    font-size: 9pt;
}

/* ── tooltips ────────────────────────────────────────────────────────── */
tooltip {
    background-color: @tooltip_bg;
    border: 1px solid @border_dark;
    color: @text_color;
    padding: 4px 8px;
    border-radius: 0;
}

/* ── progress bars ───────────────────────────────────────────────────── */
progressbar trough {
    background-color: @bg_darker;
    border: 1px solid @border_dark;
    border-radius: 1px;
}
progressbar progress {
    background-color: @accent;
    border-radius: 1px;
}

/* ── checkboxes & radio buttons ──────────────────────────────────────── */
checkbutton check, radiobutton radio {
    background-color: @entry_bg;
    border: 1px solid @border_dark;
    min-width: 14px;
    min-height: 14px;
}
checkbutton check:checked {
    background-color: @accent;
    color: white;
}
radiobutton radio:checked { background-color: @accent; }

/* ── spin buttons ────────────────────────────────────────────────────── */
spinbutton { background-color: @entry_bg; border: 1px solid @border_dark; }
spinbutton button { border-radius: 0; padding: 0 4px; }

/* ── combo boxes ─────────────────────────────────────────────────────── */
combobox button {
    background: linear-gradient(to bottom, @border_light, @button_bg);
}

/* ── file chooser ────────────────────────────────────────────────────── */
.sidebar { background-color: @bg_darker; }
.sidebar row:selected { background-color: @selected_bg; color: @selected_fg; }

/* ── links ───────────────────────────────────────────────────────────── */
*:link { color: @link_color; }
*:visited { color: #6644AA; }