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,32 @@
|
||||
# Maintainer: Karim <karim@gabrielevarano.ch>
|
||||
#
|
||||
# taninux-gtk3-theme — eigenständiges GTK3-Theme für die TANINUX Apple-Optik.
|
||||
# Kein adw-gtk3 als Basis nötig: Adwaita (mit GTK3 geliefert) liefert die
|
||||
# Struktur, dieses Theme überschreibt alle Farben, Formen und Abstände.
|
||||
#
|
||||
# Liefert zwei Varianten:
|
||||
# /usr/share/themes/TANINUX/gtk-3.0/gtk.css Light
|
||||
# /usr/share/themes/TANINUX-dark/gtk-3.0/gtk.css Dark
|
||||
#
|
||||
# TANINUX wählt die passende Variante via gtk-theme gsetting und schreibt
|
||||
# bei Akzentänderungen ~/.themes/TANINUX{,-dark}/gtk-3.0/gtk.css als
|
||||
# User-Override (gleicher Mechanismus wie bei tanin-icons).
|
||||
#
|
||||
# CSS neu generieren nach Stil-Änderungen in gui/style.py:
|
||||
# cd packaging/taninux-gtk3-theme
|
||||
# PYTHONPATH=../../src python generate.py
|
||||
pkgname=taninux-gtk3-theme
|
||||
pkgver=0.1.0
|
||||
pkgrel=1
|
||||
pkgdesc="TANINUX GTK3 Apple-Optik theme — eigenständig, kein adw-gtk3 nötig"
|
||||
arch=('any')
|
||||
url="https://taninux.kgva.ch"
|
||||
license=('GPL-3.0-or-later')
|
||||
depends=('gtk3')
|
||||
|
||||
package() {
|
||||
install -Dm644 "$startdir/TANINUX/gtk-3.0/gtk.css" \
|
||||
"$pkgdir/usr/share/themes/TANINUX/gtk-3.0/gtk.css"
|
||||
install -Dm644 "$startdir/TANINUX-dark/gtk-3.0/gtk.css" \
|
||||
"$pkgdir/usr/share/themes/TANINUX-dark/gtk-3.0/gtk.css"
|
||||
}
|
||||
@@ -0,0 +1,368 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Regeneriert die statischen CSS-Dateien aus gui/style.py.
|
||||
|
||||
cd packaging/taninux-gtk3-theme
|
||||
PYTHONPATH=../../src python generate.py
|
||||
"""
|
||||
from pathlib import Path
|
||||
from taninux.gui.style import _gtk3_full
|
||||
from taninux.gui.accents import by_key
|
||||
|
||||
acc = by_key("ume")
|
||||
here = Path(__file__).parent
|
||||
|
||||
for dark, name in ((False, "TANINUX"), (True, "TANINUX-dark")):
|
||||
dst = here / name / "gtk-3.0" / "gtk.css"
|
||||
dst.parent.mkdir(parents=True, exist_ok=True)
|
||||
dst.write_text(_gtk3_full(acc, dark))
|
||||
print(f" {dst.relative_to(here.parent.parent)}")
|
||||
Reference in New Issue
Block a user