gui: native libadwaita-free UI backend + dark shell; packaging/iso updates
- 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)
This commit is contained in:
@@ -0,0 +1,368 @@
|
||||
/* TANINUX GTK3 Apple-Optik — eigenständig, kein adw-gtk3 nötig.
|
||||
Basis: Adwaita (strukturell). Alle Farben/Formen kommen von hier.
|
||||
light · 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 #f0f0f0;
|
||||
@define-color theme_fg_color #0f0f0f;
|
||||
@define-color theme_base_color #fafafa;
|
||||
@define-color theme_text_color #0f0f0f;
|
||||
@define-color theme_selected_bg_color #8f8aac;
|
||||
@define-color theme_selected_fg_color #ffffff;
|
||||
@define-color borders rgba(15,15,15,0.12);
|
||||
|
||||
/* ==================================================================== FONT */
|
||||
* {
|
||||
font-family: -apple-system, "SF Pro Text", "Inter", "Cantarell", sans-serif;
|
||||
-gtk-icon-style: regular;
|
||||
}
|
||||
|
||||
/* ================================================================= SURFACES */
|
||||
window, .background {
|
||||
background-color: #f0f0f0;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
.csd window > decoration {
|
||||
background: transparent;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
/* ================================================================ HEADERBAR */
|
||||
headerbar {
|
||||
background-color: #e8e8e8;
|
||||
color: #0f0f0f;
|
||||
border-bottom: 1px solid rgba(15,15,15,0.12);
|
||||
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(60,60,67,0.6); }
|
||||
headerbar button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 999px;
|
||||
padding: 4px 8px;
|
||||
color: #0f0f0f;
|
||||
min-height: 0;
|
||||
}
|
||||
headerbar button:hover { background-color: rgba(0,0,0,0.05); }
|
||||
headerbar button.close {
|
||||
background-color: #ff5f57;
|
||||
border-radius: 50%;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ================================================================== TOOLBAR */
|
||||
toolbar {
|
||||
background-color: #e4e4e4;
|
||||
border-bottom: 1px solid rgba(15,15,15,0.12);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
toolbar button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 8px;
|
||||
padding: 4px 6px;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
toolbar button:hover { background-color: rgba(0,0,0,0.05); }
|
||||
toolbar separator {
|
||||
background-color: rgba(15,15,15,0.12);
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
/* ================================================================== SIDEBAR */
|
||||
.sidebar,
|
||||
placessidebar,
|
||||
.sidebar > viewport,
|
||||
placessidebar > viewport,
|
||||
.sidebar > viewport > contents,
|
||||
placessidebar > viewport > contents {
|
||||
background-color: #e4e4e4;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
.sidebar,
|
||||
placessidebar {
|
||||
border-right: 1px solid rgba(15,15,15,0.12);
|
||||
}
|
||||
placessidebar row,
|
||||
.sidebar row {
|
||||
padding: 5px 8px;
|
||||
border-radius: 8px;
|
||||
margin: 1px 8px;
|
||||
color: #0f0f0f;
|
||||
background: transparent;
|
||||
}
|
||||
placessidebar row:hover,
|
||||
.sidebar row:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
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(60,60,67,0.6); }
|
||||
placessidebar row:selected image { color: #ffffff; }
|
||||
|
||||
/* ================================================================= TREEVIEW */
|
||||
treeview,
|
||||
treeview.view {
|
||||
background-color: #fafafa;
|
||||
color: #0f0f0f;
|
||||
border: none;
|
||||
}
|
||||
treeview.view:nth-child(even) { background-color: #fafafa; }
|
||||
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(15,15,15,0.12);
|
||||
border-radius: 0;
|
||||
padding: 4px 8px;
|
||||
color: rgba(60,60,67,0.6);
|
||||
font-size: 0.83em;
|
||||
font-weight: 600;
|
||||
}
|
||||
treeview header button:hover { background-color: rgba(0,0,0,0.05); }
|
||||
|
||||
/* =================================================================== FRAME */
|
||||
frame > border { border: 1px solid rgba(15,15,15,0.12); border-radius: 12px; }
|
||||
|
||||
/* ================================================================== BUTTON */
|
||||
button {
|
||||
background-color: rgba(0,0,0,0.08);
|
||||
color: #0f0f0f;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 5px 14px;
|
||||
box-shadow: none;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
button:hover { background-color: rgba(0,0,0,0.12); }
|
||||
button:active { background-color: rgba(0,0,0,0.12); }
|
||||
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: #ff3b30;
|
||||
color: #ffffff;
|
||||
}
|
||||
button.flat, button.flat:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #8f8aac;
|
||||
}
|
||||
button.flat:hover { background-color: rgba(0,0,0,0.05); }
|
||||
combobox button, combobox {
|
||||
border-radius: 999px;
|
||||
background-color: rgba(0,0,0,0.08);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* =================================================================== ENTRY */
|
||||
entry {
|
||||
background-color: #ffffff;
|
||||
color: #0f0f0f;
|
||||
border: 1px solid rgba(15,15,15,0.12);
|
||||
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(60,60,67,0.6); }
|
||||
spinbutton {
|
||||
background-color: #ffffff;
|
||||
color: #0f0f0f;
|
||||
border: 1px solid rgba(15,15,15,0.12);
|
||||
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(120,120,128,0.36);
|
||||
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(0,0,0,0.20);
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
margin: 2px;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
scrollbar slider:hover { background-color: rgba(0,0,0,0.30); }
|
||||
scrollbar.overlay-indicator { opacity: 0; transition: opacity 200ms; }
|
||||
scrollbar.overlay-indicator.dragging,
|
||||
scrollbar.overlay-indicator:hover { opacity: 1; }
|
||||
|
||||
/* =============================================================== SEPARATOR */
|
||||
separator {
|
||||
background-color: rgba(15,15,15,0.12);
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
/* ================================================================ NOTEBOOK */
|
||||
notebook > header {
|
||||
background-color: #e4e4e4;
|
||||
border-bottom: 1px solid rgba(15,15,15,0.12);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
notebook > header > tabs > tab {
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin: 2px;
|
||||
color: rgba(60,60,67,0.6);
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
notebook > header > tabs > tab:checked {
|
||||
background-color: #8f8aac;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ==================================================================== MENU */
|
||||
menu {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid rgba(15,15,15,0.12);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
menuitem {
|
||||
border-radius: 8px;
|
||||
padding: 5px 10px;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
menuitem:hover {
|
||||
background-color: #8f8aac;
|
||||
color: #ffffff;
|
||||
}
|
||||
menuitem accelerator { color: rgba(60,60,67,0.6); }
|
||||
menu separator {
|
||||
background-color: rgba(15,15,15,0.12);
|
||||
margin: 4px 8px;
|
||||
min-height: 1px;
|
||||
}
|
||||
menubar {
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1px solid rgba(15,15,15,0.12);
|
||||
padding: 0 4px;
|
||||
}
|
||||
menubar > menuitem {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
menubar > menuitem:hover {
|
||||
background-color: #8f8aac;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ================================================================= POPOVER */
|
||||
popover {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid rgba(15,15,15,0.12);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
popover > contents { background-color: transparent; border-radius: 12px; }
|
||||
|
||||
/* ================================================================ ICONVIEW */
|
||||
iconview {
|
||||
background-color: #fafafa;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
iconview item:selected {
|
||||
background-color: #8f8aac;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* =============================================================== SELECTION */
|
||||
selection { background-color: #8f8aac; color: #ffffff; }
|
||||
textview { background-color: #fafafa; color: #0f0f0f; }
|
||||
textview text { background-color: #fafafa; color: #0f0f0f; }
|
||||
textview text selection { background-color: #8f8aac; color: #ffffff; }
|
||||
|
||||
/* ============================================================= PROGRESSBAR */
|
||||
progressbar trough {
|
||||
background-color: rgba(15,15,15,0.12);
|
||||
border-radius: 999px;
|
||||
min-height: 4px;
|
||||
}
|
||||
progressbar progress {
|
||||
background-color: #8f8aac;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ================================================================== DIALOG */
|
||||
dialog {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
dialog .dialog-action-area button {
|
||||
min-width: 80px;
|
||||
}
|
||||
Reference in New Issue
Block a user