karim
e8d93e6b1d
- gui/ui: native GTK4 widget vocabulary (.tn-*) behind the ui.* seam, default backend now native; style_apple.css design language - shell: sidebar/topbar/content all #0f0f0f in dark (matches eww panels) - new pages: wine, online_accounts - packaging: tanin-icons (accent folder theme), tanin-calendar, gtklock, taninux-gtk3-theme, flatpak install handler - iso/distro: profile + manifest tweaks (ISO binary not included)
369 lines
9.4 KiB
CSS
369 lines
9.4 KiB
CSS
/* TANINUX GTK3 Apple-Optik — eigenständig, kein adw-gtk3 nötig.
|
|
Basis: Adwaita (strukturell). Alle Farben/Formen kommen von hier.
|
|
dark · accent Ume · violet (#8f8aac) */
|
|
|
|
@define-color accent_color #8f8aac;
|
|
@define-color accent_bg_color #8f8aac;
|
|
@define-color accent_fg_color #ffffff;
|
|
@define-color theme_bg_color #0f0f0f;
|
|
@define-color theme_fg_color #f0f0f0;
|
|
@define-color theme_base_color #141414;
|
|
@define-color theme_text_color #f0f0f0;
|
|
@define-color theme_selected_bg_color #8f8aac;
|
|
@define-color theme_selected_fg_color #ffffff;
|
|
@define-color borders rgba(240,240,240,0.10);
|
|
|
|
/* ==================================================================== FONT */
|
|
* {
|
|
font-family: -apple-system, "SF Pro Text", "Inter", "Cantarell", sans-serif;
|
|
-gtk-icon-style: regular;
|
|
}
|
|
|
|
/* ================================================================= SURFACES */
|
|
window, .background {
|
|
background-color: #0f0f0f;
|
|
color: #f0f0f0;
|
|
}
|
|
.csd window > decoration {
|
|
background: transparent;
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
|
|
}
|
|
|
|
/* ================================================================ HEADERBAR */
|
|
headerbar {
|
|
background-color: #0f0f0f;
|
|
color: #f0f0f0;
|
|
border-bottom: 1px solid rgba(240,240,240,0.10);
|
|
padding: 4px 8px;
|
|
min-height: 46px;
|
|
box-shadow: none;
|
|
}
|
|
headerbar .title { font-weight: 600; font-size: 0.95em; }
|
|
headerbar .subtitle { font-size: 0.8em; color: rgba(235,235,245,0.6); }
|
|
headerbar button {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 999px;
|
|
padding: 4px 8px;
|
|
color: #f0f0f0;
|
|
min-height: 0;
|
|
}
|
|
headerbar button:hover { background-color: rgba(255,255,255,0.07); }
|
|
headerbar button.close {
|
|
background-color: #ff5f57;
|
|
border-radius: 50%;
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ================================================================== TOOLBAR */
|
|
toolbar {
|
|
background-color: #191919;
|
|
border-bottom: 1px solid rgba(240,240,240,0.10);
|
|
padding: 2px 4px;
|
|
}
|
|
toolbar button {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 8px;
|
|
padding: 4px 6px;
|
|
color: #f0f0f0;
|
|
}
|
|
toolbar button:hover { background-color: rgba(255,255,255,0.07); }
|
|
toolbar separator {
|
|
background-color: rgba(240,240,240,0.10);
|
|
margin: 4px 2px;
|
|
}
|
|
|
|
/* ================================================================== SIDEBAR */
|
|
.sidebar,
|
|
placessidebar,
|
|
.sidebar > viewport,
|
|
placessidebar > viewport,
|
|
.sidebar > viewport > contents,
|
|
placessidebar > viewport > contents {
|
|
background-color: #191919;
|
|
color: #f0f0f0;
|
|
}
|
|
.sidebar,
|
|
placessidebar {
|
|
border-right: 1px solid rgba(240,240,240,0.10);
|
|
}
|
|
placessidebar row,
|
|
.sidebar row {
|
|
padding: 5px 8px;
|
|
border-radius: 8px;
|
|
margin: 1px 8px;
|
|
color: #f0f0f0;
|
|
background: transparent;
|
|
}
|
|
placessidebar row:hover,
|
|
.sidebar row:hover {
|
|
background-color: rgba(255,255,255,0.07);
|
|
}
|
|
placessidebar row:selected,
|
|
placessidebar row:selected:focus,
|
|
.sidebar row:selected,
|
|
.sidebar row:selected:focus {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
border-radius: 8px;
|
|
}
|
|
placessidebar row image { color: rgba(235,235,245,0.6); }
|
|
placessidebar row:selected image { color: #ffffff; }
|
|
|
|
/* ================================================================= TREEVIEW */
|
|
treeview,
|
|
treeview.view {
|
|
background-color: #141414;
|
|
color: #f0f0f0;
|
|
border: none;
|
|
}
|
|
treeview.view:nth-child(even) { background-color: #141414; }
|
|
treeview.view:selected,
|
|
treeview.view:selected:focus {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
}
|
|
treeview header button,
|
|
columnview header button {
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-bottom: 1px solid rgba(240,240,240,0.10);
|
|
border-radius: 0;
|
|
padding: 4px 8px;
|
|
color: rgba(235,235,245,0.6);
|
|
font-size: 0.83em;
|
|
font-weight: 600;
|
|
}
|
|
treeview header button:hover { background-color: rgba(255,255,255,0.07); }
|
|
|
|
/* =================================================================== FRAME */
|
|
frame > border { border: 1px solid rgba(240,240,240,0.10); border-radius: 12px; }
|
|
|
|
/* ================================================================== BUTTON */
|
|
button {
|
|
background-color: rgba(255,255,255,0.10);
|
|
color: #f0f0f0;
|
|
border: none;
|
|
border-radius: 999px;
|
|
padding: 5px 14px;
|
|
box-shadow: none;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
button:hover { background-color: rgba(255,255,255,0.16); }
|
|
button:active { background-color: rgba(255,255,255,0.16); }
|
|
button:disabled { opacity: 0.45; }
|
|
button.suggested-action {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
}
|
|
button.suggested-action:hover { opacity: 0.92; }
|
|
button.destructive-action {
|
|
background-color: #ff453a;
|
|
color: #ffffff;
|
|
}
|
|
button.flat, button.flat:hover {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: #8f8aac;
|
|
}
|
|
button.flat:hover { background-color: rgba(255,255,255,0.07); }
|
|
combobox button, combobox {
|
|
border-radius: 999px;
|
|
background-color: rgba(255,255,255,0.10);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =================================================================== ENTRY */
|
|
entry {
|
|
background-color: #191919;
|
|
color: #f0f0f0;
|
|
border: 1px solid rgba(240,240,240,0.10);
|
|
border-radius: 999px;
|
|
padding: 5px 12px;
|
|
box-shadow: none;
|
|
caret-color: #8f8aac;
|
|
}
|
|
entry:focus {
|
|
border-color: #8f8aac;
|
|
box-shadow: 0 0 0 2px #8f8aac40;
|
|
}
|
|
entry image { color: rgba(235,235,245,0.6); }
|
|
spinbutton {
|
|
background-color: #191919;
|
|
color: #f0f0f0;
|
|
border: 1px solid rgba(240,240,240,0.10);
|
|
border-radius: 999px;
|
|
padding: 4px 8px;
|
|
box-shadow: none;
|
|
}
|
|
spinbutton button {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 999px;
|
|
padding: 2px 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ================================================================== SWITCH */
|
|
switch {
|
|
background-color: rgba(255,255,255,0.15);
|
|
border: none;
|
|
border-radius: 999px;
|
|
box-shadow: none;
|
|
min-width: 40px;
|
|
min-height: 24px;
|
|
transition: background-color 180ms ease;
|
|
}
|
|
switch:checked { background-color: #8f8aac; }
|
|
switch slider {
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
margin: 2px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
/* =============================================================== SCROLLBAR */
|
|
scrollbar {
|
|
background-color: transparent;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
border: none;
|
|
}
|
|
scrollbar trough {
|
|
background-color: transparent;
|
|
border-radius: 999px;
|
|
}
|
|
scrollbar slider {
|
|
border-radius: 999px;
|
|
background-color: rgba(255,255,255,0.25);
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
margin: 2px;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
scrollbar slider:hover { background-color: rgba(255,255,255,0.35); }
|
|
scrollbar.overlay-indicator { opacity: 0; transition: opacity 200ms; }
|
|
scrollbar.overlay-indicator.dragging,
|
|
scrollbar.overlay-indicator:hover { opacity: 1; }
|
|
|
|
/* =============================================================== SEPARATOR */
|
|
separator {
|
|
background-color: rgba(240,240,240,0.10);
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
}
|
|
|
|
/* ================================================================ NOTEBOOK */
|
|
notebook > header {
|
|
background-color: #191919;
|
|
border-bottom: 1px solid rgba(240,240,240,0.10);
|
|
padding: 4px 8px;
|
|
}
|
|
notebook > header > tabs > tab {
|
|
border-radius: 999px;
|
|
padding: 4px 14px;
|
|
margin: 2px;
|
|
color: rgba(235,235,245,0.6);
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
notebook > header > tabs > tab:checked {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ==================================================================== MENU */
|
|
menu {
|
|
background-color: #191919;
|
|
border: 1px solid rgba(240,240,240,0.10);
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.40);
|
|
}
|
|
menuitem {
|
|
border-radius: 8px;
|
|
padding: 5px 10px;
|
|
color: #f0f0f0;
|
|
}
|
|
menuitem:hover {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
}
|
|
menuitem accelerator { color: rgba(235,235,245,0.6); }
|
|
menu separator {
|
|
background-color: rgba(240,240,240,0.10);
|
|
margin: 4px 8px;
|
|
min-height: 1px;
|
|
}
|
|
menubar {
|
|
background-color: #0f0f0f;
|
|
border-bottom: 1px solid rgba(240,240,240,0.10);
|
|
padding: 0 4px;
|
|
}
|
|
menubar > menuitem {
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
color: #f0f0f0;
|
|
}
|
|
menubar > menuitem:hover {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ================================================================= POPOVER */
|
|
popover {
|
|
background-color: #191919;
|
|
border: 1px solid rgba(240,240,240,0.10);
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.40);
|
|
}
|
|
popover > contents { background-color: transparent; border-radius: 12px; }
|
|
|
|
/* ================================================================ ICONVIEW */
|
|
iconview {
|
|
background-color: #141414;
|
|
color: #f0f0f0;
|
|
}
|
|
iconview item:selected {
|
|
background-color: #8f8aac;
|
|
color: #ffffff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* =============================================================== SELECTION */
|
|
selection { background-color: #8f8aac; color: #ffffff; }
|
|
textview { background-color: #141414; color: #f0f0f0; }
|
|
textview text { background-color: #141414; color: #f0f0f0; }
|
|
textview text selection { background-color: #8f8aac; color: #ffffff; }
|
|
|
|
/* ============================================================= PROGRESSBAR */
|
|
progressbar trough {
|
|
background-color: rgba(240,240,240,0.10);
|
|
border-radius: 999px;
|
|
min-height: 4px;
|
|
}
|
|
progressbar progress {
|
|
background-color: #8f8aac;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* ================================================================== DIALOG */
|
|
dialog {
|
|
background-color: #0f0f0f;
|
|
}
|
|
dialog .dialog-action-area button {
|
|
min-width: 80px;
|
|
}
|