/* === Design-Tokens (ManyCrypto-inspired) ============================== */ :root { /* Backgrounds */ --bg-base: #0F141C; --bg-base-soft: #14182A; --bg-elevated: #1A2030; --bg-card: #1A2030; --bg-card-soft: rgba(255,255,255,0.03); --bg-hover: rgba(255,255,255,0.06); --bg-overlay: rgba(0,0,0,0.55); /* Text */ --text-primary: #FFFFFF; --text-secondary: #C8CDD8; --text-muted: #8B96A8; --text-dim: #64738A; /* Accents — dual */ --accent-primary: #3B82F6; --accent-primary-soft: #60A5FA; --accent-primary-tint: rgba(59,130,246,0.10); --accent-secondary: #2DD4BF; --accent-secondary-soft: #5EEAD4; --accent-secondary-tint: rgba(45,212,191,0.10); /* Status */ --status-success: #4ADE80; --status-error: #F87171; --status-warning: #FBBF24; /* Borders */ --border-soft: rgba(255,255,255,0.05); --border-default: rgba(255,255,255,0.08); --border-accent: rgba(59,130,246,0.30); /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; /* Elevation */ --shadow-card: 0 4px 16px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.18); --shadow-elevated: 0 12px 32px rgba(0,0,0,0.35); --font-family-default: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --font-family-mono-default: ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-default: 14px; /* User-Overrides (werden vom Inline-Script in view.php auf gesetzt) */ --font-family: var(--font-family-default); --font-family-mono: var(--font-family-mono-default); --font-size-base: var(--font-size-default); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-base); background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-base-soft) 100%) fixed; color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* === Sidebar-Layout =================================================== */ body.has-sidebar { --sidebar-w: 240px; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 1fr; } body.has-sidebar.sidebar-collapsed { --sidebar-w: 68px; } /* Initial-Class vom Inline-Script (Flash-Vermeidung) */ html.sidebar-collapsed-init body.has-sidebar { --sidebar-w: 68px; } .sidebar { background: rgba(0,0,0,0.30); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 16px 12px 12px; position: sticky; top: 0; height: 100vh; transition: width 0.18s ease; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 12px; min-height: 36px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; font-size: 16px; overflow: hidden; } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand .dot { width: 9px; height: 9px; background: var(--accent-secondary); border-radius: 50%; box-shadow: 0 0 12px rgba(34,197,94,0.6); flex-shrink: 0; } .sidebar-brand-text { white-space: nowrap; overflow: hidden; } .sidebar-toggle { width: 30px; height: 30px; padding: 0; background: transparent; color: var(--text-muted); border: 1px solid transparent; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); border-color: rgba(255,255,255,0.06); } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px 0 12px; } .sidebar-section { margin-bottom: 14px; } .sidebar-section-label { margin: 0 0 6px; padding: 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-dim); font-weight: 600; } .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; line-height: 1.2; } .sidebar-item:hover { background: rgba(255,255,255,0.04); color: #fff; text-decoration: none; } .sidebar-item.is-active { background: rgba(255,255,255,0.07); color: #fff; box-shadow: inset 2px 0 0 var(--accent-primary); } .sidebar-item-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); } .sidebar-item.is-active .sidebar-item-icon { color: var(--accent-primary); } .sidebar-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-placeholder { margin: 0; padding: 4px 10px; font-size: 12px; color: #5f5f6e; font-style: italic; } .sidebar-foot { padding: 12px 10px 4px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .sidebar-user-name { font-size: 13px; color: var(--text-primary); font-weight: 500; } .sidebar-user-email { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Eingeklappt: Labels weg, Items zentriert */ body.has-sidebar.sidebar-collapsed .sidebar-brand-text, body.has-sidebar.sidebar-collapsed .sidebar-item-label, body.has-sidebar.sidebar-collapsed .sidebar-section-label, body.has-sidebar.sidebar-collapsed .sidebar-placeholder, body.has-sidebar.sidebar-collapsed .sidebar-foot { display: none; } body.has-sidebar.sidebar-collapsed .sidebar-item { justify-content: center; padding: 9px 0; } body.has-sidebar.sidebar-collapsed .sidebar-section { margin-bottom: 6px; } /* Eingeklappt: Brand komplett weg, Toggle wird zum Expand-Button */ body.has-sidebar.sidebar-collapsed .sidebar-brand { display: none; } body.has-sidebar.sidebar-collapsed .sidebar-head { justify-content: center; padding: 4px 0 14px; } body.has-sidebar.sidebar-collapsed .sidebar-toggle { width: 36px; height: 36px; } /* === Workspaces (Sidebar-Gruppen) ====================== */ .ws-section .sidebar-section-label { margin-bottom: 4px; } .ws-groups { display: flex; flex-direction: column; gap: 1px; } .ws-group-head { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--text-primary); font-size: 13.5px; font-weight: 500; user-select: none; transition: background 0.12s, color 0.12s; line-height: 1.2; background: transparent; border: none; } .ws-group-head:hover { background: rgba(255,255,255,0.035); } .ws-group-head:focus-visible { outline: none; background: rgba(255,255,255,0.05); } .ws-group.is-expanded > .ws-group-head { background: rgba(255,255,255,0.03); } .ws-group-head.is-drop-target { background: rgba(147, 197, 253, 0.15); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(147, 197, 253, 0.55); } .ws-group-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-primary); flex-shrink: 0; } .ws-group-icon svg { width: 16px; height: 16px; } .ws-group-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-group-count { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500; } .ws-group-chevron { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); transition: transform 0.18s; transform: rotate(-90deg); } .ws-group-chevron svg { width: 12px; height: 12px; } .ws-group.is-expanded .ws-group-chevron { transform: rotate(0); } .ws-items { list-style: none; margin: 0; padding: 1px 0 4px; display: none; flex-direction: column; gap: 0; } .ws-group.is-expanded .ws-items { display: flex; } .ws-item-link { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 32px; border-radius: 6px; color: #b0b0bc; text-decoration: none; font-size: 12.5px; line-height: 1.3; transition: background 0.12s, color 0.12s; } .ws-item-link:hover { background: rgba(255,255,255,0.035); color: #fff; text-decoration: none; } .ws-item-favicon { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; object-fit: contain; } .ws-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Inline "URL hinzufuegen" Form pro Gruppe */ .ws-item-add-form { display: none; margin: 0; padding: 2px 0 6px 32px; } .ws-group.is-expanded .ws-item-add-form { display: block; } .ws-item-add-input { width: calc(100% - 8px); padding: 5px 10px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: 6px; color: #b0b0bc; font-size: 12.5px; font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; } .ws-item-add-input::placeholder { color: var(--text-dim); } .ws-item-add-input:hover:not(:disabled) { border-color: rgba(255,255,255,0.14); } .ws-item-add-input:focus { outline: none; border-style: solid; border-color: rgba(147, 197, 253, 0.4); background: rgba(255,255,255,0.04); color: var(--text-primary); } .ws-item-add-input:disabled { opacity: 0.5; } .ws-add-group { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 4px; padding: 7px 10px; background: transparent; color: var(--text-dim); border: none; border-radius: 7px; font-size: 13px; font-weight: 500; transition: background 0.12s, color 0.12s; text-align: left; } .ws-add-group:hover { background: rgba(255,255,255,0.035); color: var(--text-primary); } .ws-add-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); } .ws-add-icon svg { width: 14px; height: 14px; } /* Collapsed-Mode: nur Group-Icons sichtbar */ body.has-sidebar.sidebar-collapsed .ws-group-name, body.has-sidebar.sidebar-collapsed .ws-group-count, body.has-sidebar.sidebar-collapsed .ws-group-chevron, body.has-sidebar.sidebar-collapsed .ws-items, body.has-sidebar.sidebar-collapsed .ws-add-label { display: none; } body.has-sidebar.sidebar-collapsed .ws-group-head { grid-template-columns: 1fr; justify-items: center; padding: 8px 0; } body.has-sidebar.sidebar-collapsed .ws-add-group { justify-content: center; padding: 8px 0; } /* === Workspace Modal ================================================== */ .ws-modal[hidden] { display: none; } .ws-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .ws-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .ws-modal-card { position: relative; width: min(440px, 100%); background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); } .ws-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .ws-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .ws-modal-close { width: 32px; height: 32px; padding: 0; background: transparent; color: var(--text-muted); border: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .ws-modal-close:hover { background: rgba(255,255,255,0.06); color: #fff; } .ws-modal-close svg { width: 18px; height: 18px; } .ws-modal-label { display: block; margin-bottom: 18px; } .ws-modal-label > span { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; } .ws-modal-label input[type="text"] { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: inherit; } .ws-modal-label input[type="text"]:focus { outline: none; border-color: rgba(147, 197, 253, 0.5); background: rgba(255,255,255,0.06); } .ws-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; } .ws-icon-pick { width: 100%; aspect-ratio: 1; padding: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s; } .ws-icon-pick svg { width: 18px; height: 18px; } .ws-icon-pick:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; } .ws-icon-pick.is-selected { background: rgba(147, 197, 253, 0.15); border-color: rgba(147, 197, 253, 0.55); color: var(--accent-primary); } .ws-modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 24px; } .ws-modal-delete { display: inline-flex; align-items: center; background: rgba(239, 68, 68, 0.10); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.25); padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; } .ws-modal-delete:hover { background: rgba(239, 68, 68, 0.20); color: #fff; } #ws-modal-save { padding: 9px 18px; font-size: 14px; border-radius: 8px; } #ws-modal-cancel { padding: 9px 14px; font-size: 13px; border-radius: 8px; } /* === Embed-View (iframe rechts) ====================================== */ .embed-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .embed-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.25); backdrop-filter: blur(10px); flex-shrink: 0; } .embed-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-muted); border: none; border-radius: 8px; text-decoration: none; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .embed-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; } .embed-icon-btn svg { width: 18px; height: 18px; } .embed-url-form { flex: 1; min-width: 0; } .embed-url-input { width: 100%; padding: 8px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: var(--text-primary); font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .embed-url-input:focus { outline: none; border-color: rgba(147, 197, 253, 0.5); background: rgba(255,255,255,0.06); } .embed-save-wrap { position: relative; flex-shrink: 0; } .embed-save-btn { padding: 7px 12px; font-size: 13px; border-radius: 8px; } .embed-save-btn svg { width: 14px; height: 14px; } .embed-save-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 320px; background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .embed-save-pop[hidden] { display: none; } .embed-save-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; } .embed-save-title { width: 100%; padding: 8px 10px; margin-bottom: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; color: var(--text-primary); font-size: 13px; font-family: inherit; } .embed-save-title:focus { outline: none; border-color: rgba(147, 197, 253, 0.5); background: rgba(255,255,255,0.06); } .embed-save-list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; } .embed-save-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: transparent; color: var(--text-primary); border: none; border-radius: 6px; font-size: 13px; text-align: left; width: 100%; transition: background 0.12s; } .embed-save-item:hover:not(:disabled) { background: rgba(255,255,255,0.06); } .embed-save-item:disabled { opacity: 0.5; } .embed-save-item .ws-group-icon { width: 18px; height: 18px; color: var(--accent-primary); } .embed-save-item .ws-group-icon svg { width: 16px; height: 16px; } .embed-save-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 14px 10px; margin: 0; line-height: 1.5; } .embed-frame-wrap { flex: 1; position: relative; background: #fff; overflow: hidden; } .embed-frame { width: 100%; height: 100%; border: none; background: #fff; display: block; } /* Blocked-Page (server-rendered fuer bekannte X-Frame-Options Hosts) */ .embed-blocked-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .embed-blocked-content { width: min(460px, 100%); text-align: center; } .embed-blocked-favicon { width: 64px; height: 64px; border-radius: 14px; margin: 0 auto 20px; background: rgba(255,255,255,0.05); object-fit: contain; padding: 8px; display: block; } .embed-blocked-content h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); } .embed-blocked-content p { line-height: 1.55; margin: 0 0 24px; font-size: 14px; } .embed-blocked-cta { padding: 14px 22px; font-size: 15px; border-radius: 10px; gap: 10px; } .embed-blocked-cta svg { width: 18px; height: 18px; } .embed-blocked-back { margin-top: 20px; } .embed-blocked-back a { font-size: 13px; } .embed-blocked-hint { position: absolute; top: 16px; right: 16px; z-index: 5; pointer-events: none; } .embed-blocked-hint[hidden] { display: none; } .embed-blocked-card { pointer-events: auto; width: min(360px, 90vw); padding: 16px 18px; background: rgba(11,11,15,0.95); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); color: var(--text-primary); } .embed-blocked-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; } .embed-blocked-card p { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0 0 12px; } .embed-blocked-card code { font-size: 11px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; } .embed-blocked-card .btn { padding: 8px 14px; font-size: 13px; border-radius: 7px; width: 100%; } @media (max-width: 768px) { .embed-main { padding-top: 0; } /* override .dashboard-body padding */ .embed-toolbar { padding-left: 64px; } /* room for hamburger */ } /* === Context Menu ===================================================== */ .ws-ctx[hidden] { display: none; } .ws-ctx { position: fixed; z-index: 90; min-width: 180px; padding: 4px; background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .ws-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; color: var(--text-primary); border: none; border-radius: 6px; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; } .ws-ctx-item:hover { background: rgba(255,255,255,0.06); } .ws-ctx-item svg { width: 16px; height: 16px; color: var(--text-muted); } .ws-ctx-item[data-action="delete"]:hover { background: rgba(239, 68, 68, 0.15); color: #fca5a5; } .ws-ctx-item[data-action="delete"]:hover svg { color: #fca5a5; } /* Mobile-Toggle (Hamburger) - nur auf schmalen Viewports sichtbar */ .sidebar-mobile-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 60; width: 40px; height: 40px; padding: 0; background: rgba(11,11,15,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; } .sidebar-mobile-toggle:hover { background: rgba(255,255,255,0.06); } @media (max-width: 768px) { body.has-sidebar { grid-template-columns: 1fr; --sidebar-w: 240px; } body.has-sidebar.sidebar-collapsed { --sidebar-w: 240px; } html.sidebar-collapsed-init body.has-sidebar { --sidebar-w: 240px; } body.has-sidebar .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; transform: translateX(-100%); transition: transform 0.22s ease; z-index: 70; background: var(--bg-base); } body.has-sidebar.sidebar-open .sidebar { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,0.5); } /* Eingeklappt-State auf Mobile ignorieren */ body.has-sidebar.sidebar-collapsed .sidebar-brand-text, body.has-sidebar.sidebar-collapsed .sidebar-item-label, body.has-sidebar.sidebar-collapsed .sidebar-section-label, body.has-sidebar.sidebar-collapsed .sidebar-placeholder, body.has-sidebar.sidebar-collapsed .sidebar-foot { display: revert; } body.has-sidebar.sidebar-collapsed .sidebar-item { justify-content: flex-start; padding: 9px 10px; } .sidebar-mobile-toggle { display: inline-flex; } body.has-sidebar.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65; } .dashboard-body, .editor-body { padding-top: 70px; } } /* Auth shell (login, register) */ .shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .card { width: min(440px, 100%); padding: 40px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; backdrop-filter: blur(20px); } .card.wide { width: min(900px, 100%); } .eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } h1 { margin: 0 0 24px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } /* Forms */ .field { display: grid; gap: 6px; margin-bottom: 16px; } label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: #fff; font-size: 15px; font-family: inherit; transition: border 0.15s, background 0.15s; } input:focus { outline: none; border-color: rgba(147, 197, 253, 0.5); background: rgba(255,255,255,0.06); } /* Button-Reset: kein default-Browser-Look. Spezifische Klassen styllen */ button { font-family: inherit; cursor: pointer; } /* Primary-Button (Royal-Blue) - explizit per .btn-Klasse */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(59,130,246,0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .btn:hover { background: var(--accent-primary-soft); box-shadow: 0 6px 16px rgba(59,130,246,0.35); text-decoration: none; } .btn:active { transform: translateY(1px); } /* Teal-Variante fuer prominent-sekundaere Aktionen */ .btn-teal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--accent-secondary); color: #0B0F1A; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(45,212,191,0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .btn-teal:hover { background: var(--accent-secondary-soft); box-shadow: 0 6px 16px rgba(45,212,191,0.35); text-decoration: none; } .btn-teal:active { transform: translateY(1px); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s; } .btn-secondary:hover { background: rgba(255,255,255,0.14); text-decoration: none; } .btn-block { width: 100%; } .error { margin: 0 0 16px; padding: 12px 14px; background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 10px; color: #fca5a5; font-size: 14px; } .error ul { margin: 0; padding-left: 20px; } .error ul li + li { margin-top: 4px; } .muted { color: var(--text-muted); font-size: 14px; } .row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 14px; } /* Dashboard */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(11, 11, 15, 0.6); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .brand .dot { display: inline-block; width: 8px; height: 8px; background: var(--accent-secondary); border-radius: 50%; box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); } .user-menu { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-secondary); } .user-menu a { color: var(--text-muted); } .user-menu a:hover { color: #fff; } .dashboard-body { max-width: 1200px; margin: 0 auto; padding: 40px 28px; } .dashboard-body.wide { max-width: none; padding: 40px 36px; } /* Solo-Topbar: minimal Header oben rechts, wenn keine Sidebar */ .solo-topbar { position: absolute; top: 16px; right: 24px; display: flex; align-items: center; gap: 8px; font-size: 12px; z-index: 5; } .solo-name { color: var(--text-secondary); } .solo-sep { color: #4a4a55; } .solo-link { color: var(--text-muted); text-decoration: none; transition: color 0.12s; } .solo-link:hover { color: var(--text-primary); text-decoration: none; } .greeting { margin: 0 0 8px; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; } .greeting-date { margin: 0 0 32px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .placeholder { padding: 24px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.10); border-radius: 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; } .placeholder strong { display: block; color: var(--text-primary); font-size: 16px; margin-bottom: 6px; font-weight: 600; } .placeholder.live { border-style: solid; background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.25); color: var(--text-secondary); } .placeholder.live a { color: var(--status-success); font-weight: 500; } /* === Notes ============================================================ */ .page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 16px; } .empty-state { padding: 60px 24px; text-align: center; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: 16px; } .empty-state p { margin: 0 0 4px; } .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .note-card { position: relative; display: flex; flex-direction: column; padding: 18px; background: var(--bg-card-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: inherit; text-decoration: none; min-height: 180px; transition: background 0.15s, border 0.15s, transform 0.15s, box-shadow 0.15s; } .note-card-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; font-size: 16px; line-height: 1; backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; } .note-card:hover .note-card-del { opacity: 1; } .note-card-del:hover { background: rgba(239, 68, 68, 0.85); } .note-card:hover { background: var(--bg-hover); border-color: var(--border-default); transform: translateY(-1px); box-shadow: var(--shadow-card); text-decoration: none; } .note-category { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 8px; } .note-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; } .note-body { flex: 1; margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .note-meta { color: #8a8a99; font-size: 11px; letter-spacing: 0.05em; } /* === Note Editor ====================================================== */ .editor-body { max-width: 900px; margin: 0 auto; padding: 32px 28px 60px; } .editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; } .editor-actions { display: flex; align-items: center; gap: 12px; } .save-status { font-size: 13px; color: var(--text-muted); transition: color 0.2s; } .save-status[data-kind="dirty"] { color: var(--status-warning); } .save-status[data-kind="saving"] { color: var(--accent-primary); } .save-status[data-kind="saved"] { color: var(--status-success); } .save-status[data-kind="error"] { color: #fca5a5; } .editor-title, .editor-category { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.06); color: #fff; padding: 12px 0; font-family: inherit; border-radius: 0; } .editor-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; } .editor-title::placeholder { color: #4a4a55; } .editor-category { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 24px; } .editor-category::placeholder { color: #4a4a55; text-transform: none; letter-spacing: 0; } .editor-title:focus, .editor-category:focus { outline: none; border-bottom-color: rgba(147, 197, 253, 0.5); background: transparent; } .editor-body-text { width: 100%; min-height: 320px; padding: 16px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 15px; line-height: 1.6; resize: vertical; } .editor-body-text:focus { outline: none; border-color: rgba(147, 197, 253, 0.4); background: rgba(255,255,255,0.04); } .attachments { margin-top: 24px; } .attachments-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .thumb { position: relative; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; } .thumb a { display: block; height: 100%; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px); } .thumb-delete:hover { background: rgba(239, 68, 68, 0.85); opacity: 1; } /* === Flash / Banners ================================================== */ .flash { margin-bottom: 16px; padding: 12px 16px; background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 10px; color: var(--status-success); font-size: 14px; } .connect-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; padding: 18px 22px; background: var(--accent-primary-tint); border: 1px solid var(--border-accent); border-radius: var(--radius-md); } .connect-banner strong { display: block; color: var(--text-primary); font-size: 15px; } /* === Dashboard Grid =================================================== */ .dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } .panel { padding: 24px 26px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-height: 280px; } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .panel-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .panel-empty { padding: 30px 0; color: #8a8a99; font-size: 14px; text-align: center; } .panel-empty.small { padding: 16px 0; text-align: left; } /* === Tabs ============================================================= */ .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border 0.15s; } .tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); } .tab.is-active { color: #ffffff; background: rgba(255,255,255,0.08); } .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; background: var(--accent-primary); color: #fff; border-radius: 11px; font-size: 11px; font-weight: 600; line-height: 1; } .tab-panel { display: none; } .tab-panel.is-active { display: block; } /* === Tasks ============================================================ */ .task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 0; border-left: 3px solid #4ADE80; /* default = gruen (ok / kein Stress) */ color: var(--text-primary); font-size: 14px; } .task-bullet { width: 18px; height: 18px; padding: 0; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 50%; background: transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .task-bullet:hover:not(:disabled) { border-color: rgba(34, 197, 94, 0.7); background: rgba(34, 197, 94, 0.18); transform: scale(1.1); } .task-bullet:focus-visible { outline: 2px solid rgba(147, 197, 253, 0.55); outline-offset: 2px; } .task-bullet:disabled { cursor: default; opacity: 0.5; } .task.is-completing .task-bullet { background: var(--accent-secondary); border-color: var(--accent-secondary); background-image: linear-gradient(white, white); background-size: 8px 2px; background-repeat: no-repeat; background-position: center; } .task.is-leaving { opacity: 0; transform: translateX(40px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .task.is-new { opacity: 0; transform: translateY(-8px); } .task { transition: opacity 0.25s, transform 0.25s; } /* Neue-Aufgabe-Eingabefeld */ .task-create-form { position: relative; margin-bottom: 8px; } .task-create-input { width: 100%; padding: 12px 44px 12px 14px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.10); border-radius: 0; color: var(--text-primary); font-size: 14px; font-family: inherit; } .task-create-options { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .task-create-options:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } .task-create-input::placeholder { color: var(--text-dim); } .task-create-input:focus { outline: none; border-style: solid; border-color: rgba(147, 197, 253, 0.45); background: rgba(255,255,255,0.04); } .task-create-input:disabled { opacity: 0.6; } .task.is-editable .task-title, .task.is-editable .task-due { cursor: pointer; } .task-title { line-height: 1.4; word-break: break-word; } .task-due { padding: 3px 8px; background: #4ADE80; color: #052e1a; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } /* Due-Date-Color-Coding (Border + Datum-Pill): * Default (auch ohne Datum): gruen * 1-3 Tage ueberfaellig: orange * 4+ Tage ueberfaellig: rot */ .task[data-due-status="overdue-soft"] { border-left-color: #FB923C; } .task[data-due-status="overdue-hard"] { border-left-color: #F87171; } .task[data-due-status="overdue-soft"] .task-due { background: #FB923C; color: #2d1604; } .task[data-due-status="overdue-hard"] .task-due { background: #F87171; color: #2c0506; } /* === Events =========================================================== */ .event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .event { display: grid; grid-template-columns: 60px 1fr; align-items: baseline; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.02); border-radius: 8px; } .event-time { color: var(--accent-primary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .event-title { color: var(--text-primary); font-size: 14px; line-height: 1.4; } .event-location { grid-column: 2; color: #8a8a99; font-size: 12px; margin-top: 2px; } /* === Notes-Section auf Dashboard ====================================== */ .notes-section { margin-top: 12px; } .notes-grid.compact .note-card { min-height: 140px; padding: 14px 16px; } .notes-grid.compact .note-title { font-size: 14px; } .notes-grid.compact .note-body { font-size: 12px; -webkit-line-clamp: 4; } /* === Note-Add-Tile (Quick-Create) ===================================== */ .note-card-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 18px; background: transparent; border: 2px dashed var(--border-default); border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: inherit; } .note-card-add:hover { background: var(--bg-hover); border-color: var(--accent-primary); color: var(--accent-primary); } .note-card-add-plus { font-size: 28px; font-weight: 300; line-height: 1; } .note-card-add-label { font-size: 13px; font-weight: 500; } .notes-grid.compact .note-card-add { min-height: 140px; } .notes-grid.compact .note-card-add-plus { font-size: 24px; } /* === Note Quick-Create Modal ========================================= */ .note-modal[hidden] { display: none; } .note-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; animation: lightbox-fade 0.18s ease-out; } .note-modal-backdrop { position: absolute; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(6px); } .note-modal-card { position: relative; width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); overflow: hidden; } .note-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); } .note-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .note-modal-close { width: 32px; height: 32px; background: transparent; color: var(--text-muted); border: none; border-radius: var(--radius-sm); font-size: 22px; line-height: 1; cursor: pointer; } .note-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .note-modal-body { flex: 1; padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .note-modal-title { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-md); color: var(--text-primary); font-size: 18px; font-weight: 600; font-family: inherit; letter-spacing: -0.01em; } .note-modal-title:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.06); } .note-modal-title::placeholder { color: var(--text-dim); font-weight: 500; } .note-modal-text { width: 100%; min-height: 200px; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 15px; line-height: 1.55; font-family: inherit; resize: vertical; } .note-modal-text:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.06); } .note-modal-text::placeholder { color: var(--text-dim); } .note-modal-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .note-modal-images:empty { display: none; } .note-modal-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-card-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; transition: transform 0.12s ease, border-color 0.12s ease; } .note-modal-thumb:hover { border-color: var(--border-default); transform: translateY(-1px); } .note-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .note-modal-thumb-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; font-size: 15px; line-height: 1; backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; } .note-modal-thumb:hover .note-modal-thumb-del { opacity: 1; } .note-modal-thumb-del:hover { background: rgba(239, 68, 68, 0.85); } .note-modal-add-image { align-self: flex-start; padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.18); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .note-modal-add-image:hover { background: rgba(255,255,255,0.07); border-color: var(--accent-primary); color: var(--text-primary); } /* Mini-Thumbs in der Notiz-Karte (Dashboard) */ .note-card-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; } .note-card-thumb { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--bg-card-soft); border: 1px solid var(--border-soft); } .note-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .note-card-thumb--more { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.04); } .note-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border-soft); } /* Task-Modal */ .task-modal[hidden] { display: none; } .task-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 32px 20px; } .task-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); } .task-modal-card { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); overflow: hidden; } .task-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); } .task-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); } .task-modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .task-modal-close:hover { color: var(--text-primary); } .task-modal-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; } .task-modal-title-input { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-md); color: var(--text-primary); font-size: 15px; font-family: inherit; } .task-modal-title-input:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.06); } .task-modal-row { display: flex; align-items: flex-end; gap: 10px; } .task-modal-field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); } .task-modal-field input { padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; font-family: inherit; color-scheme: dark; } .task-modal-field input:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.06); } .task-modal-clear-due { flex-shrink: 0; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .task-modal-clear-due:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); border-color: rgba(255,255,255,0.18); } .task-modal-actions { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border-soft); } .task-modal-delete:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.40); color: #f87171; } .note-modal-actions .btn, .note-modal-actions .btn-secondary { padding: 9px 18px; font-size: 14px; } /* === Screenshots-Sektion ============================================== */ .screenshots-section { margin-top: 12px; } .screenshots-add-btn { padding: 7px 14px; font-size: 13px; border-radius: 8px; } .screenshots-empty { padding: 30px 20px; text-align: center; color: var(--text-dim); background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: 12px; font-size: 13px; } .screenshots-strip { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 14px; scroll-behavior: smooth; } .screenshots-strip::-webkit-scrollbar { height: 8px; } .screenshots-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 4px; } .screenshots-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; } .screenshots-strip::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); } .screenshot-tile { position: relative; flex-shrink: 0; width: 220px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; transition: border-color 0.15s, transform 0.15s; } .screenshot-tile:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-1px); } .screenshot-img { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0a0a0d; overflow: hidden; text-decoration: none; } .screenshot-img:hover { text-decoration: none; } .screenshot-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .screenshot-meta { padding: 8px 12px; color: #8a8a99; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .screenshot-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; font-size: 16px; line-height: 1; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.15s, background 0.15s; } .screenshot-tile:hover .screenshot-del { opacity: 1; } .screenshot-del:hover { background: rgba(239, 68, 68, 0.85); } /* === Lightbox ========================================================= */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); padding: 60px 80px; animation: lightbox-fade 0.18s ease-out; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); user-select: none; -webkit-user-drag: none; } .lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; padding: 0; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.05); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; padding: 0; background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 50%; font-size: 32px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; } .lightbox-nav:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-50%) scale(1.05); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-meta { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.78); font-size: 12px; background: rgba(0, 0, 0, 0.4); padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } body.lightbox-open { overflow: hidden; } @media (max-width: 768px) { .lightbox { padding: 56px 16px; } .lightbox-nav { width: 42px; height: 42px; font-size: 26px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } /* ==================== Tagesplan ==================== */ .dayplan-panel { margin-bottom: 24px; } /* Collapsible Panel — generisch fuer Tagesplan, Aufgaben, Termine */ .panel.is-collapsible .panel-head { cursor: pointer; user-select: none; align-items: center; } .panel.is-collapsible .panel-head:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 4px; } .panel-toggle, .panel-action { flex-shrink: 0; width: 28px; height: 28px; padding: 0; background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: transform 0.18s ease, background 0.12s ease, color 0.12s ease; } .panel-toggle { margin-left: auto; } .panel-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } .panel-action:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; } .panel.is-collapsed .panel-toggle { transform: rotate(-90deg); } .panel.is-collapsed > :not(.panel-head) { display: none !important; } .panel.is-collapsed { min-height: 0; padding-top: 14px; padding-bottom: 14px; } .panel.is-collapsed .panel-head { margin-bottom: 0; } .dayplan-date { margin-left: 14px; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .dayplan-grid { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .dayplan-row { display: grid; grid-template-columns: 64px 1fr 26px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.10); } .dayplan-time-btn { width: 100%; padding: 4px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: var(--text-muted); font-family: var(--font-family-mono); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-align: center; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .dayplan-time-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: var(--text-primary); } .dayplan-time-btn[aria-expanded="true"] { background: rgba(255,255,255,0.07); border-color: var(--accent-primary); color: var(--text-primary); } .dayplan-time-popup { position: fixed; z-index: 200; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; box-shadow: var(--shadow-elevated); min-width: 160px; } .dayplan-time-popup[hidden] { display: none; } .dayplan-time-opt { padding: 6px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; color: var(--text-primary); font-family: var(--font-family-mono); font-size: 13px; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .dayplan-time-opt:hover { background: rgba(59,130,246,0.16); border-color: var(--accent-primary); color: #BFDBFE; } .dayplan-time-opt.is-active { background: var(--accent-primary); border-color: var(--accent-primary); color: #0F141C; } .dayplan-row-del { width: 22px; height: 22px; padding: 0; margin-right: 4px; background: transparent; border: none; color: var(--text-muted); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; } .dayplan-row:hover .dayplan-row-del, .dayplan-row.has-text:hover .dayplan-row-del, .dayplan-row-del:focus-visible { opacity: 1; } .dayplan-row-del:hover { background: rgba(248,113,113,0.15); color: #FCA5A5; } .dayplan-row:not(.has-text) .dayplan-row-del { pointer-events: none; } .dayplan-row:last-child { border-bottom: none; } .dayplan-hour { font-family: var(--font-family-mono); font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .dayplan-input { width: 100%; padding: 6px 4px; background: transparent; border: none; color: var(--accent-primary); font-size: 14px; font-family: var(--font-family-mono); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; } .dayplan-input::placeholder { color: var(--text-dim); } .dayplan-input:focus { outline: none; background: rgba(255,255,255,0.03); border-radius: 4px; } .dayplan-input:not(:placeholder-shown) { color: var(--accent-primary); } .dayplan-row.is-saving { opacity: 0.7; } .dayplan-row.is-saved .dayplan-hour { color: var(--accent-primary); } /* ==================== Quick Notes (innerhalb Tagesplan) ==================== */ .dayplan-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 8px; align-items: stretch; } .dayplan-aside { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-height: 0; } .dayplan-aside-title { margin: 0 0 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .vorgaenge-section, .quicknotes-section { display: flex; flex-direction: column; min-height: 0; } .vorgaenge-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .vorgaenge-head .dayplan-aside-title { margin: 0; flex: 1; min-width: 0; } .vorgaenge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1.4; } .vorgaenge-db-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--text-muted); text-decoration: none; transition: background 120ms ease, color 120ms ease; } .vorgaenge-db-link:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } .vorgaenge-list { flex: 1; margin: 0; padding: 0; list-style: none; overflow-y: auto; background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.18); border-radius: var(--radius-md); box-sizing: border-box; min-height: 0; } .vorgaenge-list .vorgang { margin: 0; padding: 0; border-bottom: 1px solid rgba(248,113,113,0.18); } .vorgaenge-list .vorgang:last-child { border-bottom: none; } .vorgang-link { display: block; padding: 10px 12px 10px 14px; border-left: 3px solid #F87171; color: var(--text-primary); font-size: 13px; line-height: 1.45; text-decoration: none; transition: background 120ms ease, color 120ms ease, border-left-color 120ms ease; } .vorgang-link:hover { background: rgba(248,113,113,0.12); color: #FCA5A5; border-left-color: #FCA5A5; } .vorgang-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vorgaenge-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: var(--radius-md); color: var(--text-muted); font-size: 12px; text-align: center; box-sizing: border-box; min-height: 0; } .quicknote-input { flex: 1; width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: inherit; line-height: 1.55; resize: none; box-sizing: border-box; min-height: 0; } .quicknote-input::placeholder { color: var(--text-dim); } .quicknote-input:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.04); } #quicknote-panel.is-saving .quicknote-input { border-color: var(--accent-primary-soft); } #quicknote-panel.is-saved .quicknote-input { border-color: var(--status-success); } @media (max-width: 900px) { .dayplan-body { grid-template-columns: 1fr; } .dayplan-aside { grid-template-rows: auto auto; } .vorgaenge-list { max-height: 240px; } .quicknote-input { min-height: 200px; } } /* ==================== Aufgaben + Termine (kombiniert) ==================== */ .tasks-events-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 8px; align-items: stretch; } .tasks-col { display: flex; flex-direction: column; min-width: 0; } .events-col { display: flex; flex-direction: column; min-width: 0; } .events-aside-title { margin: 0 0 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 900px) { .tasks-events-body { grid-template-columns: 1fr; } } /* ==================== Videos ==================== */ .video-create-form { display: flex; gap: 10px; margin: 16px 0 24px; align-items: stretch; } .video-url-input { flex: 1; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .video-url-input:focus { outline: none; border-color: var(--accent-primary); background: rgba(255,255,255,0.06); } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; } .video-card { position: relative; background: var(--bg-card-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; } .video-player { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; } .video-status { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: rgba(255,255,255,0.02); } .video-status--error { background: rgba(239, 68, 68, 0.06); } .video-status-text { font-size: 14px; font-weight: 600; color: var(--text-primary); } .video-status-sub { font-size: 12px; color: var(--text-muted); text-align: center; max-width: 90%; word-break: break-word; } .video-status-icon { font-size: 32px; color: #f87171; line-height: 1; } .video-spinner { width: 28px; height: 28px; border: 2.5px solid rgba(255,255,255,0.10); border-top-color: var(--accent-primary); border-radius: 50%; animation: video-spin 0.9s linear infinite; } @keyframes video-spin { to { transform: rotate(360deg); } } .video-retry-btn { margin-top: 6px; } .video-meta { position: relative; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .video-title { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .video-meta-row { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-muted); } .video-duration, .video-size { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .video-source-link { color: var(--text-muted); text-decoration: none; } .video-source-link:hover { color: var(--text-primary); } .video-card-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.15s, background 0.15s; } .video-card:hover .video-card-del { opacity: 1; } .video-card-del:hover { background: rgba(239, 68, 68, 0.85); } /* ==================== Settings / Darstellung ==================== */ .appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .appearance-field { display: flex; flex-direction: column; gap: 6px; } .appearance-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .appearance-select { padding: 9px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 14px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .appearance-select:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); } .appearance-select:focus { outline: none; border-color: var(--accent-primary); } .appearance-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); } .appearance-preview-app, .appearance-preview-mono { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .appearance-preview-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .appearance-preview-sample { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; } .appearance-preview-mono-sample { font-family: var(--font-family-mono); color: var(--accent-primary); font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 700px) { .appearance-preview { grid-template-columns: 1fr; } } /* ==================== Tagesplan: Datums-Navigation ==================== */ .dayplan-panel .panel-head { flex-wrap: wrap; gap: 12px; } .dayplan-nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; cursor: default; } .dayplan-arrow { width: 26px; height: 26px; padding: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .dayplan-arrow:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); } .dayplan-week { display: flex; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; } .dayplan-week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 36px; padding: 4px 7px 5px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; color: var(--text-muted); text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .dayplan-week-day:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); text-decoration: none; } .dayplan-week-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .dayplan-week-num { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-primary); } .dayplan-week-day.is-today .dayplan-week-num { color: var(--accent-primary); } .dayplan-week-day.is-active { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.42); color: #FCA5A5; } .dayplan-week-day.is-active .dayplan-week-num { color: #FCA5A5; } .dayplan-date-picker { padding: 5px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; color-scheme: dark; } .dayplan-date-picker:focus { outline: none; border-color: var(--accent-primary); } .dayplan-today-link { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 11px; text-decoration: none; transition: background 120ms ease, color 120ms ease; } .dayplan-today-link:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); text-decoration: none; } .dayplan-sync-warning { margin: -6px 0 14px; padding: 8px 12px; background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.25); border-radius: 8px; color: var(--status-warning); font-size: 12px; } .dayplan-sync-warning a { color: var(--status-warning); text-decoration: underline; } .dayplan-row.is-calendar-warning .dayplan-input { border-radius: 4px; box-shadow: 0 0 0 1px var(--status-warning); } @media (max-width: 640px) { .dayplan-week-day { min-width: 30px; padding: 3px 5px 4px; } .dayplan-week-label { font-size: 9px; } .dayplan-week-num { font-size: 12px; } } /* ==================== Settings / Toggle-Row ==================== */ .toggle-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px 0; } .toggle-row input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-primary); cursor: pointer; } .toggle-label { display: flex; flex-direction: column; gap: 3px; } .toggle-title { font-size: 14px; color: var(--text-primary); line-height: 1.4; } .toggle-desc { font-size: 12px; line-height: 1.45; }