/* ========================================================================== Gemeinsame Design-Tokens und Komponenten. Die Token-Namen sind bewusst identisch zu denen in management_zones.html, damit das bestehende Formular unveraendert weiterlaeuft und trotzdem am Theme-Wechsel teilnimmt. Themes haengen an : earth (Standard) · light · midnight ========================================================================== */ :root, :root[data-theme="earth"] { --bg-primary: #0d1208; --bg-secondary: #141f0f; --bg-card: rgba(26, 42, 20, 0.6); --bg-card-hover: rgba(26, 42, 20, 0.85); --primary: #84cc16; --primary-dark: #65a30d; --primary-light: #a3e635; --primary-glow: rgba(132, 204, 22, 0.4); --accent-gold: #facc15; --accent-amber: #f59e0b; --accent-blue: #38bdf8; --accent-purple: #a78bfa; --text-primary: #f0fdf4; --text-secondary: #a7f3d0; --text-muted: #6b8e6b; --border-color: rgba(132, 204, 22, 0.2); --border-color-light: rgba(132, 204, 22, 0.1); --success: #22c55e; --warning: #eab308; --error: #ef4444; --info: #06b6d4; --font-main: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --spacing-xs: .25rem; --spacing-sm: .5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --shadow-card: 0 4px 24px rgba(0, 0, 0, .35); --radius-2xl: 1.5rem; --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* Aliase: management_zones.html referenziert diese Namen, deklariert sie aber nirgends - im Original loesten sie deshalb ins Leere auf. Als var()-Verweis folgen sie automatisch dem aktiven Theme. */ --border: var(--border-color); --primary-color: var(--primary); color-scheme: dark; } :root[data-theme="light"] { --bg-primary: #f7faf5; --bg-secondary: #ffffff; --bg-card: rgba(255, 255, 255, .9); --bg-card-hover: #ffffff; --primary: #4d7c0f; --primary-dark: #3f6212; --primary-light: #65a30d; --primary-glow: rgba(77, 124, 15, .25); --text-primary: #1a2e05; --text-secondary: #3f6212; --text-muted: #6b7280; --border-color: rgba(77, 124, 15, .25); --border-color-light: rgba(77, 124, 15, .12); --shadow-card: 0 2px 12px rgba(26, 46, 5, .08); color-scheme: light; } :root[data-theme="midnight"] { --bg-primary: #0b1120; --bg-secondary: #111a2e; --bg-card: rgba(30, 41, 59, .6); --bg-card-hover: rgba(30, 41, 59, .85); --primary: #38bdf8; --primary-dark: #0284c7; --primary-light: #7dd3fc; --primary-glow: rgba(56, 189, 248, .35); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: rgba(56, 189, 248, .2); --border-color-light: rgba(56, 189, 248, .1); color-scheme: dark; } /* -------------------------------------------------------------- Basis --- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } a { color: var(--primary-light); } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--spacing-md); } h1 { font-size: 1.75rem; font-weight: 600; } h2 { font-size: 1.25rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } .muted { color: var(--text-muted); } .mono { font-family: var(--font-mono); font-size: .85em; } /* ------------------------------------------------------------ Navbar ---- */ .nav { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-xl); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 500; } .nav-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; } .nav-links { display: flex; gap: var(--spacing-md); flex: 1; flex-wrap: wrap; } .nav-links a { color: var(--text-secondary); text-decoration: none; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: .95rem; } .nav-links a:hover { color: var(--text-primary); background: var(--bg-card); } .nav-links a[aria-current="page"] { color: var(--primary-light); font-weight: 500; } .nav-user { display: flex; align-items: center; gap: var(--spacing-sm); font-size: .9rem; } /* -------------------------------------------------------------- Layout - */ .container { max-width: 1200px; margin: 0 auto; padding: var(--spacing-xl); } .grid { display: grid; gap: var(--spacing-lg); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-card); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } /* ------------------------------------------------------------ Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: .55rem 1.1rem; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 500; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; text-decoration: none; transition: filter .15s, transform .15s; } .btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-ghost { background: transparent; border-color: var(--border-color); color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-card-hover); color: var(--text-primary); } .btn-danger { background: linear-gradient(135deg, var(--error), #b91c1c); } .btn-sm { padding: .3rem .7rem; font-size: .85rem; } /* ------------------------------------------------------- Formularteile - */ label { display: block; margin-bottom: var(--spacing-xs); font-size: .9rem; color: var(--text-secondary); } input[type=text], input[type=email], input[type=password], select { width: 100%; padding: .6rem .8rem; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } /* -------------------------------------------------------------- Status -- */ .badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 500; border: 1px solid currentColor; } .badge-finished { color: var(--success); } .badge-running, .badge-queued { color: var(--info); } .badge-failed { color: var(--error); } .badge-created, .badge-configured { color: var(--text-muted); } .notice { padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card); margin-bottom: var(--spacing-md); } .notice-error { border-color: var(--error); color: var(--error); } .notice-success { border-color: var(--success); color: var(--success); } /* -------------------------------------------------------------- Tabelle - */ table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--border-color-light); } th { color: var(--text-secondary); font-weight: 500; } tbody tr:hover { background: var(--bg-card-hover); } /* ---------------------------------------------------------------- Karte - */ .map { height: 420px; border-radius: var(--radius-md); border: 1px solid var(--border-color); } .leaflet-container { background: var(--bg-secondary); } /* -------------------------------------------------------------- Diverse - */ .stat { text-align: center; } .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--primary-light); font-family: var(--font-mono); } .stat-label { font-size: .85rem; color: var(--text-muted); } .empty { text-align: center; padding: var(--spacing-2xl) var(--spacing-md); color: var(--text-muted); } .spinner { width: 1rem; height: 1rem; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .container { padding: var(--spacing-md); } .nav { padding: var(--spacing-md); gap: var(--spacing-md); } }