/* ============================================================ MyCloud — Theme: Neutral Dark (dark-mode primary) Design tokens from provided theme spec ============================================================ */ /* r58 (Befund 28): Der @import der Google-Schriften stand hier und blockierte den Seitenaufbau. Die Schriften kommen jetzt als aus font_links() (auth.php) direkt in den . */ /* ── Dark mode (default) ── */ :root { --bg: #1a1a1a; --surface: #202020; --surface-2: #2a2a2a; --surface-3: #303030; --border: #353535; --border-2: #404040; --accent: #a0a0a0; --accent-dim: rgba(160,160,160,.1); --accent-glow: rgba(160,160,160,.18); --green: #7e9ca0; --green-dim: rgba(126,156,160,.14); --red: #e06666; --red-dim: rgba(224,102,102,.13); --amber: #a8a8a8; --amber-dim: rgba(168,168,168,.1); --text: #d9d9d9; --text-2: #808080; --text-3: #585858; /* Feste Marken-/Statusfarben (themenunabhängig). --wedding-accent ist zentrale Quelle für das Hochzeits-Lila (Hex bleibt als Fallback inline). */ --wedding-accent: #9c27b0; --success: #2e7d32; /* ── r74 · Glas der Rechtsseiten — EINE Quelle für ZWEI Umgebungen ── Impressum/Datenschutz/AGB/Kontakt erscheinen als Sektion der Startseite (assets/css/landing.css, `.lp-sec.lp-page`) UND als Modal im Dashboard (dashboard.php, `#legal-modal .modal-box` — dort gibt es landing.css nicht). Beide Umgebungen laden aber style.css, deshalb steht der Wert hier und NUR hier; beide Stellen lesen ihn über var(). Die Deckkraft ist kein Geschmack, sondern gerechnet: hinter BEIDEN läuft der Swirl (das Modal mountet sich seinen eigenen). Fließtext --text-2 auf dieser Fläche über der hellsten Swirl-Zone: .86 → 5,5:1 .78 → 4,5:1 .55 → 2,4:1 Norm sind 4,5:1. `.55` stand bis r73 im Modal — dort war der Anfang des Textes über der orangen Zone praktisch nicht zu lesen. WER DIESEN WERT SENKT, macht die Rechtstexte unlesbar. */ --mc-glass-fill: rgba(15,17,20,.86); --mc-glass-blur: blur(24px) saturate(160%); --mc-glass-edge: rgba(255,255,255,.12); --mc-glass-rim: rgba(255,255,255,.08); --mc-glass-shadow: 0 20px 60px rgba(0,0,0,.45); /* Lichtreflex für die Karten AUF dem Glas (Datenschutz-Abschnitte, Kontaktformular, Hinweiskästen). Echte Durchsicht wäre dort sinnlos — darunter liegt nur das Glas selbst, nicht der Swirl. */ --mc-glass-sheen: linear-gradient(160deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 42%); --radius-sm: 0.35rem; --radius: 0.35rem; --radius-lg: 0.35rem; --font: 'Inter', system-ui, sans-serif; --font-mono: 'Fira Code', monospace; --shadow: 0 1px 0 rgba(0,0,0,.3); --ease: .15s ease; } /* Light-Modus entfernt – einziges Theme: "Patrick" (siehe assets/js/theme.js). */ /* ── Theme toggle button ── */ .theme-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-3); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--ease), color var(--ease); } .theme-btn:hover { background: var(--border); color: var(--text); } .theme-btn svg { width: 14px; height: 14px; } /* Dark mode: show sun (→ switch to light) */ .theme-btn .icon-sun { display: block; } .theme-btn .icon-moon { display: none; } /* Light mode: show moon (→ switch to dark) */ html.light .theme-btn .icon-sun { display: none; } html.light .theme-btn .icon-moon { display: block; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; } /* ============================================================ Topbar ============================================================ */ .topbar { position: sticky; top: 0; z-index: 50; height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem; } /* 3-column topbar for dashboard */ .topbar-3col { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; } .topbar-3col .topbar-left { display: flex; align-items: center; gap: .6rem; } .topbar-3col .topbar-center { display: flex; align-items: center; gap: .55rem; justify-content: center; min-width: 0; overflow: hidden; } .topbar-3col .topbar-right { display: flex; align-items: center; gap: .55rem; justify-content: flex-end; } .topbar-spacer { flex: 1; } .topbar-user { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--text-2); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--text-2); flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Share info in topbar center */ .topbar-share { display: flex; align-items: center; gap: .45rem; overflow: hidden; } .topbar-share-url { font-size: .75rem; color: var(--text-2); font-family: var(--font-mono); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } html.light .topbar-share-url { color: var(--text-2); } .topbar-share-url:hover { color: var(--text); } .topbar-share-badge { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .45rem; border-radius: var(--radius-sm); white-space: nowrap; } .topbar-share-badge.on { background: var(--green-dim); color: var(--green); } .topbar-share-badge.off { background: var(--surface-3); color: var(--text-3); } /* ============================================================ Layout ============================================================ */ .page-main { max-width: 100%; margin: 0 auto; padding: 2rem 2rem 4rem; display: flex; flex-direction: column; gap: 1.25rem; } /* ============================================================ Hamburger-Knopf (Startseite) r76: Die Drawer-Regeln, die hier standen, sind entfallen — der Konto-Bereich ist seit r75 ein Modal. Der KNOPF bleibt: index.php nutzt ihn fuer das Menue der Startseite und laedt diese Datei. ============================================================ */ .hamburger-btn { background: none; border: none; cursor: pointer; padding: .3rem .4rem; display: flex; align-items: center; color: var(--text-2); border-radius: var(--radius-sm); flex-shrink: 0; } .hamburger-btn:hover { background: var(--surface-2); } .hamburger-btn svg { width: 20px; height: 20px; } /* ============================================================ Share-Preview-Overlay ============================================================ */ .share-preview-overlay { position: fixed; inset: 0; z-index: 400; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; } .share-preview-overlay.open { visibility: visible; opacity: 1; transition: opacity .3s ease, visibility 0s linear 0s; } .share-preview-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .share-preview-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 90vw; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 1; overflow: hidden; } .share-preview-overlay.open .share-preview-panel { transform: translateX(0); } .share-preview-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .share-preview-iframe { flex: 1; border: none; width: 100%; } .share-action-btns { display: flex; align-items: center; gap: .5rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 600px) { .share-preview-panel { width: 95vw; } .share-action-btns { gap: .35rem; } } /* ============================================================ Cards ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); gap: 1rem; } .card-title { font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: .55rem; color: var(--text); } .card-title svg { width: 15px; height: 15px; color: var(--text-2); } .card-body { padding: 1.25rem; } .card-body-flush { padding: 0; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .9rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: .8rem; font-family: var(--font); font-weight: 600; text-decoration: none; transition: background var(--ease), color var(--ease), border-color var(--ease), transform .08s; white-space: nowrap; letter-spacing: .01em; } .btn:active { transform: scale(.97); } .btn svg { width: 13px; height: 13px; flex-shrink: 0; } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-primary:hover { filter: brightness(.88); } .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); } .btn-danger { background: var(--red-dim); color: var(--red); border-color: rgba(224,102,102,.25); } .btn-danger:hover { background: rgba(224,102,102,.2); } .btn-amber { background: var(--amber-dim); color: var(--amber); border-color: rgba(168,168,168,.2); } .btn-green { background: var(--green-dim); color: var(--green); border-color: rgba(126,156,160,.25); } .btn-sm { padding: .3rem .65rem; font-size: .75rem; } .btn-full { width: 100%; } .inline-form { display: inline-flex; } /* ============================================================ Badges ============================================================ */ .badge { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: var(--radius-sm); font-size: .68rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; } .badge-count { background: var(--surface-3); color: var(--text-2); } .badge-active { background: var(--green-dim); color: var(--green); } .badge-blocked { background: var(--red-dim); color: var(--red); } .badge-type { background: var(--surface-3); color: var(--text-3); font-family: var(--font-mono); font-size: .65rem; } /* ============================================================ Alerts ============================================================ */ .alert { padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .82rem; display: flex; align-items: flex-start; gap: .6rem; border: 1px solid transparent; position: relative; padding-right: 2.2rem; } .alert-close { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; color: currentColor; opacity: .45; padding: .1rem .3rem; border-radius: 3px; transition: opacity .15s; font-family: var(--font); } .alert-close:hover { opacity: .85; } .alert-success { background: var(--green-dim); border-color: rgba(126,156,160,.2); color: var(--green); } .alert-error { background: var(--red-dim); border-color: rgba(224,102,102,.2); color: var(--red); } /* ============================================================ Forms ============================================================ */ .form-group { margin-bottom: .9rem; } .form-group label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: .35rem; } /* r76: `.input` steht mit dabei. Die Klasse wird im Markup zweimal benutzt (die beiden Visitenkarten-Textfelder im Konto), war aber in KEINER Stylesheet-Datei definiert — die Felder standen deshalb weiss auf schwarzem Grund, seit es sie gibt (r25). Sie sollen aussehen wie jedes andere Feld, also bekommen sie hier dieselbe Regel statt einer eigenen. */ .form-group input, .form-group textarea, .form-group select, textarea.input, input.input, select.input { width: 100%; padding: .55rem .75rem; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); font-size: .85rem; font-family: var(--font); transition: border var(--ease), background var(--ease); outline: none; } .form-group input::placeholder, .form-group textarea::placeholder, textarea.input::placeholder, input.input::placeholder { color: var(--text-3); } .form-group input:focus, .form-group textarea:focus, textarea.input:focus, input.input:focus { border-color: var(--accent); background: var(--surface-2); } .form-group small { display: block; margin-top: .3rem; font-size: .72rem; color: var(--text-3); } /* ============================================================ Upload area ============================================================ */ .upload-area { border: 1px dashed var(--border-2); border-radius: var(--radius); padding: 2rem 1rem; text-align: center; transition: border-color var(--ease), background var(--ease); cursor: pointer; } .upload-area:hover, .upload-area.drag-over { border-color: var(--accent); background: var(--accent-dim); } .upload-icon { width: 32px; height: 32px; color: var(--text-3); margin-bottom: .65rem; } .upload-area p { color: var(--text-2); font-size: .85rem; margin-bottom: .5rem; } .upload-hint { font-size: .72rem; color: var(--text-3); margin-top: .4rem !important; font-family: var(--font-mono); } .progress-wrap { margin-top: .9rem; display: flex; align-items: center; gap: .75rem; } .progress-bar { flex: 1; height: 2px; background: var(--border); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width .2s; } /* ============================================================ File table ============================================================ */ .file-table-wrap { overflow-x: auto; } .file-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .file-table thead tr { background: var(--surface-2); } .file-table th { padding: .55rem 1rem; text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; border-bottom: 1px solid var(--border); } .file-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .file-table tbody tr:last-child td { border-bottom: none; } .file-table tbody tr:hover td { background: var(--surface-2); } .file-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; } .file-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; } /* ============================================================ Share section (dashboard) ============================================================ */ .share-url-row { display: flex; align-items: center; gap: .65rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .85rem; margin-bottom: 1rem; } .share-url-text { flex: 1; font-size: .8rem; color: var(--text-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); } .share-url-text:hover { color: var(--text); } .share-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .share-status-dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); } .share-status-dot.off { background: var(--red); box-shadow: 0 0 0 3px var(--red-dim); } /* ============================================================ Modals ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); /* über dem fixen Dashboard-Footer (z-index 250) & der Topbar (260), damit die Aktions-Buttons (Erstellen / Endgültig löschen) mobil nicht verdeckt werden */ z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .modal-backdrop.open { opacity: 1; pointer-events: all; } .modal-box { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); width: 100%; max-width: 460px; box-shadow: 0 16px 48px rgba(0,0,0,.5); transform: translateY(8px) scale(.99); transition: transform .18s ease; } .modal-backdrop.open .modal-box { transform: none; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; } .modal-header h3 svg { width: 14px; height: 14px; color: var(--text-2); } .modal-close { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-3); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .82rem; transition: background var(--ease); } .modal-close:hover { background: var(--border); color: var(--text); } .modal-body { padding: 1.25rem; } .modal-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; } .divider { height: 1px; background: var(--border); margin: 1rem 0; } /* ============================================================ Empty state ============================================================ */ .empty-state { padding: 2.5rem; text-align: center; color: var(--text-3); font-size: .85rem; } .empty-state svg { width: 32px; height: 32px; color: var(--border-2); margin-bottom: .65rem; display: block; margin-left: auto; margin-right: auto; } /* ============================================================ Gallery (share page) ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Round 25 (P2): Desktop 4 Spalten */ gap: 1px; /* Round 25 (P2): 1px-Mosaik */ } .gallery-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color var(--ease), transform .2s ease; position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .gallery-item:hover { border-color: var(--accent); transform: translateY(-1px); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-item.file-card { aspect-ratio: 1; flex-direction: column; gap: .5rem; padding: 1rem; text-align: center; cursor: default; } .gallery-item.file-card:hover { border-color: var(--border); transform: none; } .gallery-zoom-btn { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; border-radius: var(--radius-sm); background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.1); color: var(--text); font-size: .72rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--ease); z-index: 2; } .gallery-item:hover .gallery-zoom-btn { opacity: 1; } .file-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; } .file-icon-wrap svg { width: 20px; height: 20px; color: var(--text-2); } .file-card-name { font-size: .72rem; font-weight: 600; color: var(--text); word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .file-card-size { font-size: .68rem; color: var(--text-3); font-family: var(--font-mono); } .file-card-dl { margin-top: auto; font-size: .7rem; font-weight: 600; color: var(--text-2); text-decoration: none; display: flex; align-items: center; gap: .25rem; } .file-card-dl:hover { color: var(--text); } /* ── Lightbox ── */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 2rem 2rem 88px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .lightbox.open { opacity: 1; pointer-events: all; } /* Round 28 (P3): Stage = Fit-Box mit Overflow-Clipping; das Bild wird per Transform gezoomt/geschwenkt */ #lb-stage { position: relative; overflow: hidden; line-height: 0; border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.7); transform: scale(.96); transition: transform .2s ease; } .lightbox.open #lb-stage { transform: scale(1); } .lightbox img { display: block; max-width: calc(100vw - 4rem); max-height: calc(100vh - 2rem - 88px); transform-origin: 0 0; cursor: zoom-in; } #lb-stage.zoomed img { cursor: crosshair; } /* Zoom-Steuerung oben links */ #lb-zoom-ctrl { position: fixed; top: 1rem; left: 1rem; z-index: 504; display: flex; align-items: center; gap: .15rem; background: rgba(20,20,20,.75); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: .2rem .3rem; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #lb-zoom-ctrl button { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: none; color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; } #lb-zoom-ctrl button:hover { background: rgba(255,255,255,.15); } #lb-zoom-val { font-size: .78rem; min-width: 46px; text-align: center; user-select: none; } /* Round 29 (P2): dezenter Zoom-Hinweis (links unter der Zoom-Steuerung) */ #lb-zoom-hint { position: fixed; top: 3.15rem; left: 1rem; z-index: 504; display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: rgba(255,255,255,.72); background: rgba(20,20,20,.7); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: .2rem .6rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; white-space: nowrap; } /* Minimap oben rechts (Gesamtbild + roter Positions-Kasten) */ #lb-minimap { position: fixed; top: 3.6rem; right: 1rem; z-index: 504; width: 132px; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #lb-minimap img { display: block; width: 100%; height: auto; opacity: .85; } #lb-minimap-box { position: absolute; border: 2px solid #e2554b; box-sizing: border-box; pointer-events: none; } .lightbox-close { position: fixed; top: 1.1rem; right: 1.1rem; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ease); z-index: 501; } .lightbox-close:hover { background: var(--surface-3); } .lightbox-caption { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .35rem 1rem; font-size: .78rem; color: var(--text-2); white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; z-index: 501; font-family: var(--font-mono); } /* ── Share page header ── */ .share-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; padding: 0 1.5rem; height: 52px; display: flex; align-items: center; gap: 1rem; } .share-header-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .share-owner { font-size: .82rem; color: var(--text-2); display: flex; align-items: center; gap: .4rem; font-family: var(--font-mono); } /* ============================================================ Install wizard ============================================================ */ .install-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 4rem; background: var(--bg); } .install-wizard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 50%; } @media (max-width: 768px) { .install-wizard { width: 100%; } } .install-progress { display: flex; border-bottom: 1px solid var(--border); } .install-step { flex: 1; padding: .65rem .4rem; text-align: center; font-size: .7rem; font-weight: 600; color: var(--text-3); border-bottom: 2px solid transparent; transition: all .2s; } .install-step.done { color: var(--accent); border-color: var(--accent); } .install-step.active { color: var(--text); border-color: var(--accent); background: var(--accent-dim); } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--border); color: var(--text-3); font-size: .62rem; font-weight: 700; margin-right: .3rem; transition: all .2s; } .install-step.done .step-num, .install-step.active .step-num { background: var(--accent); color: var(--bg); } .install-body { padding: 1.75rem; } .install-body h2 { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; } .install-body .subtitle { font-size: .82rem; color: var(--text-2); margin-bottom: 1.4rem; } .req-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.4rem; } .req-item { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .85rem; border-radius: var(--radius-sm); font-size: .82rem; } .req-item.ok { background: var(--green-dim); border: 1px solid rgba(126,156,160,.2); } .req-item.warning { background: var(--amber-dim); border: 1px solid rgba(168,168,168,.2); } .req-item.error { background: var(--red-dim); border: 1px solid rgba(224,102,102,.2); } .req-icon { font-size: .9rem; flex-shrink: 0; margin-top: .05rem; } .req-label { font-weight: 600; flex: 1; } .req-value { font-size: .75rem; color: var(--text-2); font-family: var(--font-mono); } .req-hint { font-size: .72rem; color: var(--red); margin-top: .15rem; } .summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem; margin-bottom: 1.1rem; } .summary-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .82rem; border-bottom: 1px solid var(--border); } .summary-row:last-child { border-bottom: none; } .summary-key { color: var(--text-2); } .summary-val { font-weight: 600; max-width: 60%; text-align: right; word-break: break-all; font-family: var(--font-mono); font-size: .78rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .pw-strength { height: 2px; border-radius: 99px; background: var(--border); margin-top: .4rem; overflow: hidden; } .pw-fill { height: 100%; width: 0; transition: width .3s, background .3s; border-radius: 99px; } .done-box { text-align: center; padding: .5rem 0 1rem; } .done-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--green-dim); border: 1px solid rgba(126,156,160,.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.4rem; } .done-box h2 { font-size: 1.1rem; margin-bottom: .4rem; } .done-box p { color: var(--text-2); font-size: .85rem; margin-bottom: 1.1rem; } .done-links { display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; } .done-warning { background: var(--red-dim); border: 1px solid rgba(224,102,102,.2); color: #fca5a5; border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .8rem; margin-top: 1.4rem; text-align: left; } .done-warning strong { display: block; margin-bottom: .25rem; color: var(--red); } .done-warning code { display: inline-block; background: var(--surface-3); border-radius: var(--radius-sm); padding: .2rem .45rem; font-family: var(--font-mono); font-size: .78rem; color: var(--text); } /* ── Install: DB test button ── */ .btn-test-db { flex: 1; padding: .45rem .9rem; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: .8rem; font-family: var(--font); font-weight: 600; cursor: pointer; transition: background var(--ease), color var(--ease); } .btn-test-db:hover { background: var(--border); color: var(--text); } #db-test-result { font-size: .8rem; margin-top: .5rem; font-family: var(--font-mono); } /* ============================================================ Responsive ============================================================ */ /* ── Tablet (≤ 768px) ── */ @media (max-width: 768px) { .topbar-3col { grid-template-columns: auto 1fr auto; gap: .35rem; } .topbar-share-url { max-width: 160px; font-size: .7rem; } .topbar-share-badge { display: none; } .install-body { padding: 1.25rem; } .form-row { grid-template-columns: 1fr; } } /* ── Mobile (≤ 600px) ── */ @media (max-width: 600px) { html { font-size: 13px; } /* Topbar */ .topbar { padding: 0 .85rem; height: 48px; } .topbar-3col { grid-template-columns: auto 1fr auto; gap: .25rem; } .topbar-share { display: none; } /* Share-Info im Topbar ausblenden */ /* Layout */ .page-main { padding: .85rem .65rem 3rem; gap: .85rem; max-width: 100%; } /* Cards */ .card-header { padding: .75rem .85rem; flex-wrap: wrap; gap: .5rem; } .card-body { padding: .85rem; } /* Tables → scroll */ .file-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .file-table th, .file-table td { padding: .5rem .6rem; white-space: nowrap; } .file-name { max-width: 100px; } .file-actions { flex-wrap: nowrap; } /* Gallery */ .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; } /* Round 25 (P2): Mobile 3 Spalten */ .img-gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; } /* Forms */ .form-row { grid-template-columns: 1fr; gap: .65rem; } /* Modals — Bottom-Sheet; Höhe begrenzen + Body scrollen, damit die Aktions-Buttons (Erstellen / Endgültig löschen) immer sichtbar bleiben und nicht vom Footer/Rand verdeckt werden. Safe-Area-Polster für die Gesten-Leiste. */ .modal-box { max-width: 100%; margin: 0; border-radius: var(--radius) var(--radius) 0 0; max-height: 90vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); } .modal-backdrop { align-items: flex-end; padding: 0; } .modal-body { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-footer { padding: .75rem 1rem; } /* Share header */ .share-header { padding: 0 .85rem; height: 48px; } .share-header-right { gap: .4rem; } .share-header-right .btn { padding: .3rem .55rem; font-size: .72rem; } /* Install wizard */ .install-body { padding: 1rem; } .install-step { font-size: .62rem; padding: .55rem .2rem; } .install-step .step-num { display: none; } /* Upload hint */ .upload-hint { font-size: .65rem; } /* Btn text shorten on small screens */ .topbar-user span { display: none; } .avatar { width: 26px; height: 26px; font-size: .65rem; } /* Auth page */ .auth-card { padding: 1.5rem 1.1rem 1.75rem; } } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: .75rem 1.5rem; font-size: .72rem; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; font-family: var(--font-mono); text-align: center; margin-top: auto; width: 100%; } .footer-sep { color: var(--border-2); } .footer-text { color: var(--text-3); } .footer-impressum { color: var(--text-3); text-decoration: none; font-size: inherit; } .footer-impressum:hover { color: var(--text-2); text-decoration: underline; } /* ── Feedback-Toggle (Dashboard) ── */ .fb-toggle { display: inline-block; position: relative; width: 50px; height: 26px; cursor: pointer; vertical-align: middle; } .fb-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .fb-toggle-track { position: absolute; inset: 0; background: #eab308; border-radius: 99px; transition: background .2s; display: block; } .fb-toggle-knob { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: transform .2s, background .2s; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .fb-toggle input:checked + .fb-toggle-track { background: var(--green); } .fb-toggle input:checked + .fb-toggle-track .fb-toggle-knob { transform: translateX(24px); background: #fff; } /* Modernes Email-Feld */ .fb-email-wrap { margin-top: 1.1rem; } .fb-email-field { display: flex; align-items: center; gap: .65rem; max-width: 420px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .25rem .9rem; transition: border-color .15s, background .15s, box-shadow .15s; } .fb-email-field:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-dim); } .fb-email-field svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; } .fb-email-field input { flex: 1; border: 0; outline: 0; background: transparent; padding: .75rem 0; font-size: .9rem; color: var(--text); font-family: inherit; } .fb-email-field input::placeholder { color: var(--text-3); } /* ── Feedback-Sterne auf Share-Seite ── */ .fb-stars { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px 8px; background: rgba(0,0,0,.45); border-radius: 99px; z-index: 5; } .fb-star { width: 18px; height: 18px; cursor: pointer; color: rgba(255,255,255,.35); transition: color .12s, transform .12s; } .fb-star:hover { transform: scale(1.15); } .fb-star.active { color: #fbbf24; } .fb-stars[data-readonly="1"] .fb-star { cursor: default; pointer-events: none; } /* Lightbox-Sterne: fix oben, direkt unter dem Markieren-Button */ .fb-stars-top-lb { position: fixed !important; top: 3.6rem; left: 50%; bottom: auto !important; /* Override der Basis-.fb-stars-Regel */ transform: translateX(-50%); padding: 6px 12px; gap: 6px; background: rgba(0,0,0,.55); border-radius: 99px; z-index: 502; width: max-content; /* schrumpft auf Sterne-Breite */ height: auto; } .fb-stars-top-lb .fb-star { width: 24px; height: 24px; } /* Feedback-Senden — Erfolgsmeldung statt Button */ .fb-send-success { display: inline-flex; align-items: center; gap: .65rem; background: #22c55e; color: #fff; padding: .85rem 1.25rem; border-radius: 16px; font-size: .82rem; font-weight: 500; line-height: 1.45; max-width: 420px; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: fb-success-in .35s cubic-bezier(.16,1,.3,1); } .fb-send-success strong { font-weight: 700; } @keyframes fb-success-in { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } } /* Feedback-Senden — in-flow, zentriert, 40px Abstand zum Footer */ .fb-send-wrap { display: flex; flex-direction: column; align-items: center; margin: 2rem auto 40px; text-align: center; } .fb-send-wrap .btn { box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: .7rem 1.3rem; } .fb-send-hint { font-size: .82rem; color: var(--text-2); margin: 0 0 1rem; max-width: 480px; line-height: 1.5; } .fb-send-hint strong { color: var(--text); font-weight: 700; } .fb-send-hint-below { margin: 1rem 0 0; } /* Read-only Sterne auf img-item im Dashboard */ .img-item { position: relative; } .img-inner { position: relative; aspect-ratio: 1; overflow: hidden; } .img-inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Round 30b: Veraltete read-only .img-rating-Regeln ENTFERNT. Sie hatten pointer-events:none (Sterne unklickbar) + transform:translateX(-50%) (Sterne nach links verschoben/abgeschnitten) und überschrieben dashboard.css. Die interaktive Version steht jetzt ausschließlich in dashboard.css. */ .img-note { margin: 0; padding: .28rem .45rem; font-size: .68rem; line-height: 1.35; color: var(--text-3); white-space: normal; word-break: break-word; text-align: center; max-width: 100%; } /* Sort-by-Rating Toggle-Button */ .sort-by-rating-btn { display: inline-flex; align-items: center; gap: .4rem; } .sort-by-rating-btn.active { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; } .sort-by-rating-btn:disabled { opacity: .6; cursor: wait; } /* Wenn nach Sternen sortiert → Drag-Drop visuell + funktional sperren */ .sec-images[data-sort-locked="1"] .img-item { cursor: default !important; } .sec-images[data-sort-locked="1"] .img-drag-handle { display: none !important; } /* ── Dashboard Lightbox ── */ #dash-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 1.5rem 1.5rem 6.5rem; } #dash-lightbox.open { display: flex; } .dash-lb-img-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; } /* Round 33 P2: Stage = Fit-Box mit Overflow-Clipping; Bild wird per Transform gezoomt/geschwenkt (wie Freigabeseite) */ #dash-lb-stage { position: relative; overflow: hidden; line-height: 0; border-radius: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.6); } #dash-lightbox img { max-width: calc(100vw - 4rem); max-height: calc(100vh - 12rem); display: block; transform-origin: 0 0; cursor: zoom-in; } #dash-lb-stage.zoomed img { cursor: crosshair; } /* Zoom-Steuerung oben links */ #dash-lb-zoom-ctrl { position: fixed; top: 1rem; left: 1rem; z-index: 5003; display: flex; align-items: center; gap: .15rem; background: rgba(20,20,20,.75); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: .2rem .3rem; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #dash-lb-zoom-ctrl button { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: none; color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; } #dash-lb-zoom-ctrl button:hover { background: rgba(255,255,255,.15); } #dash-lb-zoom-val { font-size: .78rem; min-width: 46px; text-align: center; user-select: none; } #dash-lb-zoom-hint { position: fixed; top: 3.15rem; left: 1rem; z-index: 5003; display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: rgba(255,255,255,.72); background: rgba(20,20,20,.7); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: .2rem .6rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; white-space: nowrap; } #dash-lb-minimap { position: fixed; top: 3.6rem; right: 1rem; z-index: 5003; width: 132px; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #dash-lb-minimap img { display: block; width: 100%; height: auto; opacity: .85; } #dash-lb-minimap-box { position: absolute; border: 2px solid #e2554b; box-sizing: border-box; pointer-events: none; } .dash-lb-close, .dash-lb-prev, .dash-lb-next { position: fixed; background: rgba(40,40,40,.85); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5002; } .dash-lb-close { top: 1rem; right: 1rem; } .dash-lb-prev { top: 50%; left: 1rem; transform: translateY(-50%); } .dash-lb-next { top: 50%; right: 1rem; transform: translateY(-50%); } .dash-lb-close:hover, .dash-lb-prev:hover, .dash-lb-next:hover { background: rgba(60,60,60,.95); } .dash-lb-counter { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; padding: .35rem .8rem; border-radius: 99px; font-size: .8rem; z-index: 5001; } .dash-lb-caption { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; padding: .4rem 1rem; border-radius: 99px; font-size: .82rem; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 5001; } .dash-lb-note { color: rgba(255,255,255,.8); font-size: .82rem; max-width: calc(100vw - 4rem); text-align: center; line-height: 1.45; pointer-events: none; } .dash-lb-stars { position: fixed; top: 4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 12px; background: rgba(0,0,0,.55); border-radius: 99px; z-index: 5001; } .dash-lb-stars svg[data-value] { width: 22px; height: 22px; color: rgba(255,255,255,.4); cursor: pointer; transition: color .12s, transform .12s; } .dash-lb-stars svg[data-value]:hover { color: #fffbe7; transform: scale(1.12); } .dash-lb-stars svg.active { color: #fbbf24; } .dash-lb-stars.is-locked svg[data-value] { pointer-events: none; } /* Round 25 (P4): Schloss in der Lightbox-Sternleiste */ .dash-lb-lock { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 5px; background: rgba(255,255,255,.12); border: none; border-radius: 50%; color: rgba(255,255,255,.75); cursor: pointer; transition: background .12s, color .12s; } .dash-lb-lock:hover { background: rgba(255,255,255,.22); color: #fff; } .dash-lb-lock.is-hidden { display: none; } .dash-lb-lock svg { width: 15px; height: 15px; } .dash-lb-stars.is-locked .dash-lb-lock { color: #fbbf24; background: rgba(251,191,36,.2); } /* Round 25 (P1): Download- & Zoom-Button in der Dashboard-Lightbox */ .dash-lb-download, .dash-lb-zoom { position: fixed; top: 1rem; background: rgba(40,40,40,.85); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5002; } .dash-lb-download { right: 4rem; } .dash-lb-zoom { right: 7rem; width: 44px; height: 44px; } .dash-lb-download:hover, .dash-lb-zoom:hover { background: rgba(60,60,60,.95); } .dash-lb-download svg, .dash-lb-zoom svg { width: 19px; height: 19px; } /* Round 25 (P1): Filmstreifen in der Dashboard-Lightbox */ .dash-lb-film { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5001; background: rgba(0,0,0,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .5rem .75rem; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } .dash-lb-film-item { flex-shrink: 0; width: 60px; height: 60px; border-radius: 4px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .5; transition: border-color .15s, opacity .15s; } .dash-lb-film-item.active { border-color: var(--accent); opacity: 1; } .dash-lb-film-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Subsection labels (within merged Sektion card) ── */ .subsection-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: .75rem; } .subsection-divider { height: 1px; background: var(--border); margin: 1.25rem 0; } /* ── Section card (multi-section) ── */ .section-card { overflow: visible; } .section-card-header { transition: background var(--ease); } .section-card-header:hover { background: var(--surface-2); } .section-add-btn-wrap { display:flex; justify-content:flex-end; margin-bottom:.75rem; } /* Erstellen-Buttons (Wedding-Way / Gäste-Galerie / Galerie): Desktop nebeneinander zentriert, Mobile untereinander (zentriert) */ .section-add-btn-row { display:flex; justify-content:center; align-items:center; gap:.5rem; flex-wrap:wrap; } .section-add-btn-row .section-add-btn-wrap { justify-content:center; margin-bottom:.75rem; } /* Lesbarkeit bei hellem Swirl: dunkler Hinterleger hinter den Erstellen-Buttons. Inset-Shadow statt background → Ghost-Look + Hover bleiben bei normaler Helligkeit unberührt. */ .section-add-btn-row .btn { box-shadow: inset 0 0 0 100px rgba(10,10,10, calc(var(--mc-scrim,0) * 0.92)); } @media (max-width:600px) { .section-add-btn-row { flex-direction:column; gap:0; } .section-add-btn-row .section-add-btn-wrap { margin-bottom:.5rem; } } /* ══ Swirl-Hintergrund site-weit (Theme "startseite") ══ */ .lp-bg.site-bg { position: fixed; inset: 0; z-index: -1; background: #000; background-image: radial-gradient(ellipse 120% 90% at 50% 30%, #06202b 0%, #000 70%); overflow: hidden; pointer-events: none; } .lp-bg.site-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Body transparent, damit der Swirl durchscheint */ html.theme-swirl body { background: transparent !important; } /* Dezentes Glas für gemeinsame Panels (Topbar & Karten) */ html.theme-swirl .topbar, html.theme-swirl .card { background: rgba(20, 22, 26, .62); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-color: rgba(255, 255, 255, .10); } /* ══ r82 · Rechtstexte nicht markierbar ═════════════════════════════════════ Impressum, Datenschutz und AGB sollen sich nicht markieren und kopieren lassen. Die Regel steht bewusst HIER und nicht in den drei Seiten selbst: style.css ist die einzige Datei, die Startseite UND Dashboard laden — die Seiten laufen aber in genau diesen zwei Umgebungen (als Sektion der Startseite und als Modal im Dashboard, ?frag=1). Eine Kopie je Seite waere dreimal dasselbe und koennte auseinanderlaufen. `-webkit-touch-callout` ist kein Beiwerk: ohne die Zeile oeffnet der lange Fingerdruck auf iOS weiterhin das Menue mit „Kopieren". Kontakt (.kt-wrap) bleibt bewusst aussen vor — dort steht ein Formular. Die `mailto:`-Links in Impressum und Datenschutz bleiben klickbar, Drucken und Vorlesen bleiben moeglich; unterbunden ist nur das Markieren. ═════════════════════════════════════════════════════════════════════════ */ .imp-page, .ds-page, .agb-page { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }