532c91c605
- app.css: Komplett neues Farbschema basierend auf AWL Dark / KDE Breeze Dark - tauri.conf.json: Shell-Plugin scope entfernt (Tauri 2 inkompatibel) - capabilities/default.json: Tauri 2 Berechtigungen für Shell-Plugin - StopButton + Layout: Hardcoded Farben durch CSS-Variablen ersetzt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
165 lines
3.4 KiB
CSS
165 lines
3.4 KiB
CSS
/* Claude Desktop — Basis-Styles (AWL Dark Theme) */
|
|
|
|
:root {
|
|
/* AWL Dark Farbschema — basierend auf KDE Breeze Dark */
|
|
--bg-primary: #202326; /* Body/Window BG */
|
|
--bg-secondary: #272c31; /* Top-Menü / Header BG */
|
|
--bg-tertiary: #292c30; /* Button/Tabellen-Header BG */
|
|
--bg-input: #141618; /* Input-Felder / ungerade Zeilen */
|
|
--bg-hover: #2a2e33; /* Hover-State */
|
|
--bg-selected: #1e5774; /* Ausgewählte Elemente */
|
|
|
|
--text-primary: #cccccc; /* Haupttext (VSCode Dark+ Niveau) */
|
|
--text-secondary: #a1a9b1; /* Sekundärtext (ForegroundInactive) */
|
|
--text-heading: #d4d4d4; /* Titel/Überschriften */
|
|
|
|
--accent: #3daee9; /* DecorationFocus (Breeze Blau) */
|
|
--accent-hover: #4dbdf9; /* Heller beim Hover */
|
|
--link: #1d99f3; /* ForegroundLink */
|
|
|
|
--success: #27ae60; /* Grün (KDE Breeze) */
|
|
--warning: #f67400; /* Orange (KDE Breeze) */
|
|
--error: #da4453; /* Rot (KDE Breeze) */
|
|
|
|
/* Rahmen */
|
|
--border: #3b3f44; /* Dezente Trennlinien */
|
|
--border-active: #3daee9; /* Aktive Elemente */
|
|
|
|
/* Abstände */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
|
|
/* Border-Radius */
|
|
--radius-sm: 3px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
|
|
/* Schatten */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Font */
|
|
--font-mono: 'Hack', 'JetBrains Mono', 'Fira Code', monospace;
|
|
--font-sans: 'Noto Sans', 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: var(--font-sans);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Scrollbar — KDE-Style, dezent */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* Button-Reset */
|
|
button {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Input-Reset */
|
|
input, textarea, select {
|
|
font-family: inherit;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Code-Blöcke */
|
|
code, pre {
|
|
font-family: var(--font-mono);
|
|
background: var(--bg-input);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
code {
|
|
padding: 0.1em 0.3em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
pre {
|
|
padding: var(--spacing-md);
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* Überschriften */
|
|
h1, h2, h3, h4 {
|
|
color: var(--text-heading);
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Animationen */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--bg-selected);
|
|
color: var(--text-primary);
|
|
}
|