Launcher: Paper-Theme (warmes Weiss + schwarze Schrift + Petrol-Akzent)
Vom Dark-Theme komplett auf hellen Paper-Look umgestellt — fuehlt sich weniger nach IDE und mehr nach Notizbuch an, weniger ermuedend. - --bg #f4f0e6 warmes Papier · --surface #fff Cards · --dark #ebe5d4 cream - --text #1a1a1a fast-schwarz · sekundaere Greys in warmen Toenen - --border in Sandsteinfarben (#d8d0bc) statt anthrazit - Schatten warm-braeunlich rgba(70,55,30) statt schwarz - button.primary: weisse Schrift auf Petrol (statt dunkel) - Dialog-Backdrop dunner + warmer (rgba(40,30,15,0.35)) - Petrol-Akzent (#5fa896) bleibt — wirkt auf Papier sogar praesenter Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+26
-24
@@ -1,32 +1,33 @@
|
|||||||
:root {
|
:root {
|
||||||
/* Dark base — gleichgezogen mit dossier.kgva.ch */
|
/* Paper-Theme — warm-weisser Hintergrund, schwarze Schrift, Petrol-Akzent */
|
||||||
--bg: #0e1413;
|
--bg: #f4f0e6; /* warmes Papier */
|
||||||
--surface: #161d1c;
|
--surface: #ffffff; /* Cards */
|
||||||
--surface2: #1b2422;
|
--surface2: #faf6ec; /* leichter Hover / zweite Ebene */
|
||||||
--dark: #0a100f;
|
--dark: #ebe5d4; /* "vertieft" — Inputs, Code, dropdowns */
|
||||||
|
|
||||||
--accent: #5fa896;
|
--accent: #5fa896;
|
||||||
--accent-soft: #4a8a7c;
|
--accent-soft: #4a8a7c;
|
||||||
--accent-deep: #2f5d54;
|
--accent-deep: #2f5d54;
|
||||||
|
|
||||||
--text: #e6e8e6;
|
--text: #1a1a1a; /* fast schwarz, Lesefluss */
|
||||||
--text2: #b4bcb8;
|
--text2: #404040; /* sekundaer */
|
||||||
--text3: #828a86;
|
--text3: #6e6a62; /* tertiaer / meta */
|
||||||
--text4: #5a625e;
|
--text4: #a09a8e; /* Hint / Placeholder */
|
||||||
|
|
||||||
--border: #232b29;
|
--border: #d8d0bc; /* warme Papier-Linie */
|
||||||
--border2: #2e3633;
|
--border2: #b9b09a; /* staerker fuer Hover */
|
||||||
|
|
||||||
--danger: #c87050;
|
--danger: #b54e30;
|
||||||
|
|
||||||
--font-display: Krungthep, 'Archivo Black', sans-serif;
|
--font-display: Krungthep, 'Archivo Black', sans-serif;
|
||||||
--font-serif: 'Playfair Display', Georgia, serif;
|
--font-serif: 'Playfair Display', Georgia, serif;
|
||||||
--font-mono: 'DM Mono', 'Menlo', monospace;
|
--font-mono: 'DM Mono', 'Menlo', monospace;
|
||||||
--font-ui: 'DM Mono', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
--font-ui: 'DM Mono', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
||||||
|
|
||||||
--sh-sm: 0 2px 8px rgba(0,0,0,0.32), 0 1px 3px rgba(0,0,0,0.22);
|
/* Sanftere Schatten auf hellem Grund — warm-braeunlicher Ton statt schwarz */
|
||||||
--sh-md: 0 10px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28);
|
--sh-sm: 0 1px 3px rgba(70,55,30,0.08), 0 1px 2px rgba(70,55,30,0.04);
|
||||||
--sh-lg: 0 24px 64px rgba(0,0,0,0.50), 0 8px 24px rgba(0,0,0,0.32);
|
--sh-md: 0 6px 16px rgba(70,55,30,0.10), 0 2px 4px rgba(70,55,30,0.06);
|
||||||
|
--sh-lg: 0 16px 40px rgba(70,55,30,0.14), 0 4px 12px rgba(70,55,30,0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
@@ -69,18 +70,18 @@ button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|||||||
button.primary {
|
button.primary {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
color: #0a1715;
|
color: #ffffff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
box-shadow: 0 4px 14px rgba(95,168,150,0.18);
|
box-shadow: 0 2px 8px rgba(47,93,84,0.18);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 7px;
|
gap: 7px;
|
||||||
}
|
}
|
||||||
button.primary:hover:not(:disabled) {
|
button.primary:hover:not(:disabled) {
|
||||||
background: #6db5a4;
|
background: var(--accent-soft);
|
||||||
border-color: #6db5a4;
|
border-color: var(--accent-soft);
|
||||||
color: #0a1715;
|
color: #ffffff;
|
||||||
box-shadow: 0 6px 20px rgba(95,168,150,0.26);
|
box-shadow: 0 4px 12px rgba(47,93,84,0.26);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pill-Variante — voll abgerundet, etwas mehr Padding fuer Hierarchie */
|
/* Pill-Variante — voll abgerundet, etwas mehr Padding fuer Hierarchie */
|
||||||
@@ -128,8 +129,9 @@ input::placeholder { color: var(--text4); }
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
/* Subtiler Petrol-Schein oben — Papier mit leichtem Sonnen-Touch */
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at top, rgba(95,168,150,0.05) 0%, transparent 50%),
|
radial-gradient(ellipse at top, rgba(95,168,150,0.08) 0%, transparent 55%),
|
||||||
var(--bg);
|
var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -943,8 +945,8 @@ input::placeholder { color: var(--text4); }
|
|||||||
/* --- Dialog ---------------------------------------------------------- */
|
/* --- Dialog ---------------------------------------------------------- */
|
||||||
.dialog-bg {
|
.dialog-bg {
|
||||||
position: fixed; inset: 0;
|
position: fixed; inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(40, 30, 15, 0.35);
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(4px);
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|||||||
Reference in New Issue
Block a user