:root {
color-scheme: dark;
--color-bg: #0a0a10;
--color-bg-subtle: #0e0e16;
--color-surface: #14141e;
--color-surface-hover: #1b1b28;
--color-surface-raised: #191927;
--color-border: #26262f;
--color-border-strong: #34343f;
--color-text: #f3f3f8;
--color-text-muted: #9a9aab;
--color-text-faint: #66667a;
--color-accent: #7c5cff;
--color-accent-hover: #9179ff;
--color-accent-active: #6a48f0;
--color-accent-muted: rgba(124, 92, 255, 0.16);
--color-accent-text: #ffffff;
--color-success: #2fd97f;
--color-success-muted: rgba(47, 217, 127, 0.14);
--color-warning: #ffb648;
--color-warning-muted: rgba(255, 182, 72, 0.14);
--color-danger: #ff5470;
--color-danger-muted: rgba(255, 84, 112, 0.14);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
--shadow-accent: 0 8px 24px rgba(124, 92, 255, 0.35);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
--gradient-accent: linear-gradient(135deg, #7c5cff 0%, #ff5c9e 100%);
}
:root[data-theme="light"] {
color-scheme: light;
--color-bg: #f4f4fa;
--color-bg-subtle: #ebebf4;
--color-surface: #ffffff;
--color-surface-hover: #f7f7fc;
--color-surface-raised: #ffffff;
--color-border: #e2e2ec;
--color-border-strong: #cfcfdd;
--color-text: #15151f;
--color-text-muted: #5c5c6e;
--color-text-faint: #8b8b9b;
--color-accent: #6d4fe0;
--color-accent-hover: #5c3fd0;
--color-accent-active: #4f34bd;
--color-accent-muted: rgba(109, 79, 224, 0.1);
--color-accent-text: #ffffff;
--color-success: #15803d;
--color-success-muted: rgba(21, 128, 61, 0.1);
--color-warning: #b45309;
--color-warning-muted: rgba(180, 83, 9, 0.1);
--color-danger: #dc2626;
--color-danger-muted: rgba(220, 38, 38, 0.1);
--shadow-sm: 0 1px 2px rgba(15, 15, 40, 0.06);
--shadow-md: 0 8px 24px rgba(15, 15, 40, 0.08);
--shadow-lg: 0 20px 60px rgba(15, 15, 40, 0.14);
--shadow-accent: 0 8px 24px rgba(109, 79, 224, 0.25);
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
background: var(--color-bg);
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--color-text);
background: var(--color-bg);
background-image:
radial-gradient(1200px 600px at 15% -10%, var(--color-accent-muted), transparent 60%),
radial-gradient(900px 500px at 110% 10%, rgba(255, 92, 158, 0.08), transparent 60%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
transition: background-color 0.2s ease, color 0.2s ease;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
color: var(--color-accent-hover);
}
h1, h2, h3 {
letter-spacing: -0.01em;
}
h1:focus {
outline: none;
}
p {
color: var(--color-text-muted);
line-height: 1.55;
}
/* ---------- Layout ---------- */
.page-content {
padding: 1.75rem 2rem 3rem;
max-width: 1800px;
margin: 0 auto;
}
/* ---------- Nav ---------- */
.main-nav {
display: flex;
gap: 0.25rem;
align-items: center;
padding: 0.9rem 1.5rem;
background: rgba(20, 20, 30, 0.7);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 50;
}
:root[data-theme="light"] .main-nav {
background: rgba(255, 255, 255, 0.75);
}
.main-nav::before {
content: "Mangaman";
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.02em;
margin-right: 1rem;
padding: 0.3rem 0.1rem;
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.main-nav a {
color: var(--color-text-muted);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-sm);
transition: color 0.15s ease, background-color 0.15s ease;
}
.main-nav a:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}
.main-nav a.active {
color: var(--color-text);
background: var(--color-accent-muted);
}
.nav-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.6rem;
}
.nav-home {
display: inline-flex;
align-items: center;
}
.nav-user {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
color: var(--color-text-muted);
max-width: 16rem;
}
.nav-user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--color-accent);
font-size: 0.72rem;
font-weight: 700;
flex: 0 0 auto;
}
.nav-user-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-right form {
margin: 0;
display: inline-flex;
}
.nav-logout {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 50%;
}
/* Einladungslink zum Kopieren, falls kein SMTP konfiguriert ist. */
.invite-link {
display: inline-block;
max-width: 100%;
padding: 0.4rem 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
font-size: 0.8rem;
word-break: break-all;
}
/* ---------- Auth: Login-Seite ---------- */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.auth-card {
width: 100%;
max-width: 22rem;
padding: 2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.auth-card h1 {
margin: 0 0 1.25rem;
font-size: 1.4rem;
}
.auth-brand {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 1rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
/* Groesser und weicher als ein Standard-Feld - lehnt sich an die Such-Pille auf Browse an
(.browse-search-field), damit der Login nicht wie ein Fremdkoerper wirkt.
[type] ist Absicht: ohne den Attribut-Selektor haette die Regel dieselbe Spezifitaet wie
input[type="email"] weiter unten und wuerde von ihr ueberschrieben. */
.auth-field input[type] {
width: 100%;
padding: 0.65rem 0.9rem;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: normal;
box-shadow: var(--shadow-sm);
}
.auth-field input[type]:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-muted);
}
/* Ungueltige Felder erst nach einem Absende-Versuch rot faerben, nicht schon beim Tippen. */
.auth-field .invalid {
border-color: var(--color-danger);
outline: none;
}
.auth-field .validation-message {
font-size: 0.75rem;
font-weight: 400;
}
.auth-remember {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 1.25rem;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.auth-submit {
width: 100%;
justify-content: center;
padding: 0.6rem 1rem;
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
font-size: 1.05rem;
line-height: 1;
}
.theme-toggle:hover {
border-color: var(--color-accent);
}
.theme-toggle-icon-moon {
display: none;
}
:root[data-theme="light"] .theme-toggle-icon-sun {
display: none;
}
:root[data-theme="light"] .theme-toggle-icon-moon {
display: inline;
}
/* ---------- Buttons ---------- */
button {
font: inherit;
font-weight: 600;
font-size: 0.85rem;
padding: 0.45rem 1rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover:not(:disabled) {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface-hover);
}
button:active:not(:disabled) {
transform: translateY(1px);
}
button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.btn-primary {
background: var(--gradient-accent);
border-color: transparent;
color: #ffffff;
box-shadow: var(--shadow-accent);
}
.btn-primary:hover:not(:disabled) {
color: #ffffff;
filter: brightness(1.08);
transform: translateY(-1px);
}
.icon-button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: 0.75rem;
vertical-align: middle;
font-size: 0.8rem;
}
/* Einheitlicher Loesch-/Entfernen-Button: quadratisch, nur Papierkorb-Icon, Hover in Rot.
Projektweit fuer destruktive Trigger-Aktionen verwenden. */
.btn-delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
flex: 0 0 auto;
}
.btn-delete:hover:not(:disabled) {
color: var(--color-danger);
border-color: var(--color-danger);
background: var(--color-danger-muted);
}
/* Abstand zwischen mehreren Aktionen in einer Tabellenzeile (z.B. Review + Loeschen). */
.row-actions {
display: inline-flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
/* ---------- Inputs ---------- */
/* email/password/search waren hier frueher NICHT gelistet - dadurch sahen z.B. die Login-Felder
unstyled aus (Browser-Default), waehrend alles andere im Theme lag. */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], select {
font: inherit;
padding: 0.4rem 0.65rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus, select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-muted);
}
input::placeholder {
color: var(--color-text-faint);
}
/* ---------- Zahlenfeld mit eigenem Stepper ---------- */
/* Die nativen Spinner lassen sich kaum stylen und wirken im Theme wie ein Fremdkoerper -
deshalb raus und durch die Buttons in .number-field ersetzt. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.number-field {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.number-field:focus-within {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.number-field input[type="number"] {
width: 3.5rem;
border: none;
border-radius: 0;
background: transparent;
text-align: center;
padding: 0.4rem 0.2rem;
}
.number-field input[type="number"]:focus {
outline: none;
box-shadow: none;
}
.number-field-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
padding: 0;
border: none;
border-radius: 0;
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: 0.9rem;
line-height: 1;
}
.number-field-step:hover:not(:disabled) {
background: var(--color-accent-muted);
color: var(--color-accent);
border: none;
}
/* ---------- Tables ---------- */
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
th, td {
border-bottom: 1px solid var(--color-border);
padding: 0.65rem 0.9rem;
text-align: left;
}
th {
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
tbody tr {
transition: background-color 0.12s ease;
}
tbody tr:hover {
background: var(--color-surface-hover);
}
tbody tr:last-child td {
border-bottom: none;
}
/* Dichtere Tabelle (z.B. History): schmalere Zeilen, damit lange Ergebnislisten nicht so viel
vertikalen Platz fressen. Die Ergebnis-Chips scrollen bei Bedarf horizontal statt zu stapeln. */
.table-compact th, .table-compact td {
padding: 0.4rem 0.75rem;
vertical-align: middle;
}
.history-chips {
display: flex;
flex-wrap: nowrap;
gap: 0.3rem;
max-width: 22rem;
overflow-x: auto;
padding-bottom: 0.15rem;
scrollbar-width: thin;
}
.history-chip {
flex: 0 0 auto;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--color-accent-muted);
color: var(--color-text-muted);
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
/* ---------- Tabs ---------- */
.tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.tab {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1rem;
border: none;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: transparent;
color: var(--color-text-muted);
margin-bottom: -1px;
}
.tab:hover:not(:disabled) {
color: var(--color-text);
background: var(--color-surface-hover);
border-color: transparent;
}
.tab--active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.tab--active:hover:not(:disabled) {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* ---------- Status text / badges ---------- */
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-danger {
color: var(--color-danger);
}
.text-muted {
color: var(--color-text-muted);
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}
.badge-success {
background: var(--color-success-muted);
color: var(--color-success);
}
.badge-warning {
background: var(--color-warning-muted);
color: var(--color-warning);
}
.badge-danger {
background: var(--color-danger-muted);
color: var(--color-danger);
}
/* ---------- Cards / breadcrumbs ---------- */
.breadcrumbs {
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--color-text-faint);
}
.breadcrumbs a {
color: var(--color-text-muted);
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--color-accent);
}
.breadcrumb-sep {
margin: 0 0.4rem;
opacity: 0.5;
}
.breadcrumb-current {
color: var(--color-text);
}
.series-cover-thumb {
width: 42px;
height: 60px;
object-fit: cover;
border-radius: var(--radius-sm);
display: block;
vertical-align: middle;
box-shadow: var(--shadow-sm);
}
.series-cover-large {
width: 170px;
height: 242px;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
flex-shrink: 0;
}
.external-link-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
margin-right: 0.4rem;
border-radius: 999px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
color: var(--color-text-muted);
transition: border-color 0.15s ease, color 0.15s ease;
}
.external-link-badge:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* ---------- Serien-Detail: AniList-Metadaten ---------- */
.series-meta-facts {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.series-fact {
padding: 0.15rem 0.6rem;
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
}
.series-genres {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.6rem;
}
.series-genre {
padding: 0.15rem 0.6rem;
border-radius: 999px;
background: var(--color-accent-muted);
color: var(--color-accent);
font-size: 0.72rem;
font-weight: 600;
}
.series-description {
margin: 0 0 0.75rem;
max-width: 70ch;
font-size: 0.85rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- Serien-Detail: laufende Downloads ---------- */
.pending-downloads {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}
.pending-download {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: 0.85rem;
}
.pending-download-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pending-download-link {
flex: 0 0 auto;
font-weight: 600;
}
/* Aktionszeile im Serien-Header: externe Links + Refresh + Loeschen nebeneinander. */
.detail-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.detail-actions .external-link-badge {
margin-right: 0;
}
/* ---------- Review: Titelbild pro Kapitel ---------- */
.cover-pick {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.cover-pick-thumb {
width: 2.4rem;
height: 3.4rem;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
display: block;
}
/* Das native ist nicht stylebar - deshalb versteckt im Label und das Label
sieht aus wie ein Button. */
.cover-pick-button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.8rem;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease;
}
.cover-pick-button:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.cover-pick-button input[type="file"] {
display: none;
}
/* ---------- Review page: page grid / zoom ---------- */
.page-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-tile {
position: relative;
width: 200px;
padding: 5px;
border: 3px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
cursor: pointer;
transition: transform 0.12s ease, border-color 0.12s ease;
}
.page-tile:hover {
transform: scale(1.03);
border-color: var(--color-border-strong);
}
.page-tile-deleted {
border-color: var(--color-danger) !important;
}
.page-tile-deleted .page-thumb {
opacity: 0.3;
}
.page-thumb {
width: 100%;
display: block;
border-radius: 3px;
}
.tile-action-button {
position: absolute;
top: 4px;
right: 4px;
z-index: 1;
min-width: 32px;
min-height: 32px;
padding: 0;
font-size: 1.05rem;
line-height: 1;
border-radius: 50%;
background: rgba(20, 20, 30, 0.85);
border-color: transparent;
color: #fff;
box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .tile-action-button {
background: rgba(255, 255, 255, 0.92);
color: var(--color-text);
}
.zoom-overlay {
position: fixed;
inset: 0;
background: rgba(5, 5, 10, 0.8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.zoom-dialog {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 0.9rem;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
gap: 0.6rem;
box-shadow: var(--shadow-lg);
}
.zoom-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.zoom-image {
max-width: 90vw;
max-height: 70vh;
object-fit: contain;
align-self: center;
border-radius: var(--radius-sm);
}
.anilist-match-dialog {
width: 32rem;
}
/* Ergebnis-Modal der gezielten Volume-/Kapitel-Suche: breit genug fuer die Release-Tabelle,
Inhalt scrollt bei vielen Treffern statt das Dialogfenster zu sprengen.
max-width hier nochmal setzen: .zoom-dialog deckelt sonst auf 90vw und macht die 92vw wirkungslos
(gleiche Spezifitaet, diese Regel steht nur spaeter in der Datei). */
.search-result-dialog {
width: min(80rem, 92vw);
max-width: 92vw;
}
.search-result-body {
overflow-y: auto;
max-height: 65vh;
}
/* Release-Namen sind lange Punkt-Ketten ohne Leerzeichen
("The.Promised.Neverland.Vol.01.Grace.Field.House.2017.Hybrid.Comic.eBook-Gruppe"). Ein Punkt
ist keine Umbruchgelegenheit, die min-content-Breite der Spalte war damit groesser als das
Modal - die Tabelle hat horizontal gescrollt und den Titel links abgeschnitten.
"anywhere" statt "break-word", weil nur ersteres die min-content-Breite senkt (siehe .log-message). */
.release-title {
overflow-wrap: anywhere;
min-width: 16rem;
}
/* Trenner + Inline-Label in der Aktionsleiste (freie Volume-Auswahl). */
.search-bar-sep {
width: 1px;
align-self: stretch;
background: var(--color-border);
margin: 0 0.35rem;
}
.search-bar-inline {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.anilist-match-results {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 50vh;
overflow-y: auto;
}
.anilist-match-result {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.anilist-match-result img {
width: 2.5rem;
height: 3.5rem;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.anilist-match-result-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.anilist-match-result-info span {
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* ---------- Discover / poster cards ---------- */
.discover-row {
margin-bottom: 2rem;
}
.discover-row-title {
margin: 0 0 0.75rem;
font-size: 1.1rem;
}
.discover-scroll {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 0.7rem;
scrollbar-width: thin;
}
.poster-card {
flex: 0 0 190px;
scroll-snap-align: start;
}
.poster-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 1.25rem 1rem;
}
.poster-grid .poster-card {
width: 100%;
}
.poster-card-wide {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.poster-card-wide .poster-card-image-wrap {
aspect-ratio: 2 / 3;
}
.poster-card-status {
margin: 0;
font-size: 0.8rem;
}
.poster-card-description {
margin: 0;
font-size: 0.8rem;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.poster-card-image-wrap {
position: relative;
aspect-ratio: 2 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-border);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.poster-card-image-wrap:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: var(--shadow-md);
}
.poster-card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.poster-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
text-align: center;
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-surface);
}
.poster-card-add-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(5, 5, 10, 0.6);
opacity: 0;
transition: opacity 0.15s ease;
}
.poster-card-image-wrap:hover .poster-card-add-overlay {
opacity: 1;
}
.poster-card-add-overlay button {
background: var(--gradient-accent);
color: white;
border-color: transparent;
}
/* Bildfuellender Link fuer bereits hinzugefuegte Karten: das ganze Cover wird klickbar und
fuehrt zur Serien-Detailseite (das ✓-Badge liegt per hoeherem z-index sichtbar darueber). */
.poster-card-image-link {
position: absolute;
inset: 0;
z-index: 1;
}
.poster-card-added-badge {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-success);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.poster-card-title {
margin-top: 0.5rem;
font-size: 0.8rem;
line-height: 1.3;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- Home: Weitermachen / Was ist neu ---------- */
.home-section {
margin-top: 2rem;
}
.home-section h2 {
font-size: 1.05rem;
margin-bottom: 0.75rem;
}
.home-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
}
.home-card {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
text-decoration: none;
transition: border-color 0.15s ease, transform 0.1s ease;
}
.home-card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
}
.home-card-eyebrow {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent);
}
.home-card-title {
font-weight: 600;
color: var(--color-text);
}
.home-card-sub {
font-size: 0.8rem;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-feed {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.home-feed li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--color-border);
}
.home-feed li:last-child {
border-bottom: none;
}
.home-feed-chapter {
font-weight: 600;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.home-feed-date {
margin-left: auto;
font-size: 0.78rem;
color: var(--color-text-faint);
}
/* ---------- Serien: Poster-Kartenraster (Sonarr-like) ---------- */
.series-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
color: inherit;
text-decoration: none;
}
.series-card .poster-card-image-wrap {
aspect-ratio: 2 / 3;
}
/* Einzeilig statt bisher bis zu zwei Zeilen: sonst sind Karten mit langem Titel hoeher als ihre
Nachbarn und die Meta-Zeile steht nicht mehr auf einer Linie. Der volle Titel bleibt per
Hover-Lauf (unten) und title-Attribut erreichbar. */
.series-card-title {
container-type: inline-size;
overflow: hidden;
white-space: nowrap;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
}
/* min-width:100% laesst kurze Titel exakt containerbreit werden - translateX(100cqw - 100%)
ergibt dann 0, sie bleiben also stehen. Nur ueberlaufende Titel wandern, und zwar genau um
ihren Ueberhang. */
.series-card-title > span {
display: inline-block;
min-width: 100%;
transition: transform 0.35s ease;
}
.series-card:hover .series-card-title > span {
transform: translateX(calc(100cqw - 100%));
transition: transform 4s linear;
}
.series-card-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 600;
}
/* Sprach-Badges als Overlay oben rechts auf dem Cover (Monitor-Auge sitzt oben links). */
.series-card-langs {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
display: flex;
gap: 0.25rem;
}
.series-card-lang {
padding: 0.1rem 0.4rem;
border-radius: var(--radius-sm);
background: rgba(10, 10, 16, 0.78);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.5;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: var(--shadow-sm);
}
.series-card-meta i {
opacity: 0.75;
margin-right: 0.15rem;
}
.series-card-monitor {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 0.72rem;
box-shadow: var(--shadow-sm);
}
/* ---------- Browse: search bar / filter panel ---------- */
.search-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
}
.search-bar input[type="text"] {
flex: 1 1 320px;
}
/* ---------- Browse: hero search bar ---------- */
.browse-search {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.6rem;
margin-bottom: 1.5rem;
}
/* Das Feld ist eine einzige Pille: Icon + randloses Input + eingebetteter Suchen-Button. */
.browse-search-field {
flex: 1 1 360px;
/* Ohne das greift die automatische Mindestbreite des Flex-Items (min-width: auto): das Feld
bleibt dann auf seiner Inhaltsbreite stehen, statt unter die 360px-Basis zu schrumpfen, und
schiebt auf schmalen Displays die ganze Seite auf. */
min-width: 0;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.35rem 0.35rem 0.35rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.browse-search-field:focus-within {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.browse-search-icon {
color: var(--color-text-faint);
font-size: 1rem;
flex: 0 0 auto;
}
.browse-search-input {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
color: var(--color-text);
font: inherit;
font-size: 1rem;
padding: 0.5rem 0.1rem;
}
.browse-search-input:focus {
outline: none;
}
.browse-search-input::placeholder {
color: var(--color-text-faint);
}
.browse-search-clear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.browse-search-clear:hover:not(:disabled) {
background: var(--color-surface-hover);
color: var(--color-text);
}
.browse-search-submit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.3rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
}
.browse-search-filter {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.15rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.browse-search-filter--active {
border-color: var(--color-accent);
color: var(--color-accent);
}
.browse-search-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--gradient-accent);
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
}
.filter-panel {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.25rem 1.4rem;
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.filter-group-title {
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-faint);
}
/* Umbrechende Reihe aus Toggle-Chips - loest die frueher einspaltige (und bei ~30 Genres
unbrauchbare) Liste ab. */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Chip = das Label; die native Checkbox ist versteckt, aber weiter fokussier-/schaltbar
(siehe .filter-chip input). Aktiv-Zustand ueber :has(:checked) - reines CSS, die Blazor-Logik
bleibt bei den Checkboxen. */
.filter-chip {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
border: 1px solid var(--color-border-strong);
border-radius: 999px;
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: 0.82rem;
line-height: 1;
cursor: pointer;
user-select: none;
transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.filter-chip:hover {
border-color: var(--color-accent);
color: var(--color-text);
}
/* Nur visuell verstecken - nicht display:none, damit Tab-Fokus und :focus-visible erhalten
bleiben. */
.filter-chip input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.filter-chip:has(input:checked) {
border-color: transparent;
background: var(--color-accent);
color: var(--color-accent-text);
font-weight: 600;
}
.filter-chip:has(input:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ---------- Skeleton loaders ---------- */
@keyframes skeleton-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.35;
}
100% {
opacity: 1;
}
}
.skeleton {
background: var(--color-border);
border-radius: var(--radius-sm);
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-text {
height: 0.9em;
margin: 0.25em 0;
}
.skeleton-cover {
width: 42px;
height: 60px;
border-radius: var(--radius-sm);
}
.skeleton-cover-large {
width: 170px;
height: 242px;
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.skeleton-row td {
padding: 0.7rem 0.9rem;
}
/* ---------- Misc / framework ---------- */
.valid.modified:not([type=checkbox]) {
outline: 1px solid var(--color-success);
}
.invalid {
outline: 1px solid var(--color-danger);
}
.validation-message {
color: var(--color-danger);
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ==========================================================================
Responsive
--------------------------------------------------------------------------
Drei Bereiche, hergeleitet aus dem, was die Geraete tatsaechlich melden:
bis 899px Handy, Fold-Aussendisplay (~320px) und Fold-Innendisplay im
Hochformat (~717-841px). Navigation als Schublade.
ab 900px Querformat-Tablets und Desktop: die Leiste selbst passt wieder
(sie braucht ~880px, bei sieben Links inkl. Admin).
ab 1120px breit genug, um zusaetzlich die E-Mail in der Leiste zu zeigen.
Der Flip klappt auf ~412px auf und faellt damit unter den Handy-Fall, das
Fold-Innendisplay hat kein Scharnier-Segment in der Mitte - beide brauchen
also keinen Sonderweg, nur belastbare Breakpoints.
========================================================================== */
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: 1rem;
cursor: pointer;
}
.nav-icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Desktop: Wrapper aus dem Layout nehmen, damit die Links direkte Flex-Kinder der Leiste
bleiben - so aendert die Schublade am Desktop-Layout exakt nichts. */
.nav-links {
display: contents;
}
.nav-home-label,
.nav-backdrop {
display: none;
}
/* Die E-Mail ist der laengste, aber auch entbehrlichste Teil der Leiste (Avatar und title-Tooltip
bleiben). Sie zuerst zu opfern verschafft der Leiste bis 1120px genug Luft. */
@media (max-width: 1119px) {
.nav-user-email {
display: none;
}
}
@media (max-width: 899px) {
/* Der Glaseffekt der Leiste muss hier weg, und zwar nicht aus Geschmacksgruenden: ein Element
mit backdrop-filter wird zum Containing Block fuer position:fixed-Nachfahren. Die Schublade
richtete sich damit an der Leiste aus statt am Viewport - sie war nur so hoch wie die Leiste,
und die Seite lag darueber. Deckend statt durchscheinend, weil ohne Blur der durchscrollende
Inhalt sonst durch die Leiste zu sehen waere. Der zweite Selektor ueberschreibt die
Light-Theme-Regel, die sonst spezifischer waere. */
.main-nav,
:root[data-theme="light"] .main-nav {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--color-surface);
}
.main-nav {
gap: 0.4rem;
padding: 0.7rem 0.9rem;
}
.main-nav::before {
margin-right: 0;
font-size: 1rem;
}
.nav-toggle {
display: inline-flex;
order: -1;
}
.nav-links {
display: flex;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 70;
width: min(78vw, 16rem);
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
padding: 1rem 0.75rem;
overflow-y: auto;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
transform: translateX(-100%);
transition: transform 0.22s ease;
}
:root.nav-open .nav-links {
transform: none;
}
.main-nav .nav-links a {
padding: 0.7rem 0.8rem;
font-size: 0.95rem;
}
/* Das Haus-Symbol allein traegt in einer senkrechten Liste keine Bedeutung mehr. */
.nav-home {
justify-content: flex-start;
gap: 0.6rem;
}
.nav-home-label {
display: inline;
}
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
:root.nav-open .nav-backdrop {
opacity: 1;
pointer-events: auto;
}
:root.nav-open body {
overflow: hidden;
}
.page-content {
padding: 1.25rem 1rem 2.5rem;
}
/* Die Tabellen (History, Protokolle, Downloads, Serien-Detail, Benutzer) haben kein
Wrapper-Element. display:block macht die Tabelle selbst zum Scroll-Container - sonst
muessten alle acht Vorkommen in sechs Seiten um ein ergaenzt werden, nur damit
eine Tabelle mit sechs Spalten auf 320px nicht die ganze Seite breittritt. */
table {
display: block;
overflow-x: auto;
}
/* 22rem sind auf einem 320px-Display breiter als der Viewport. */
.history-chips {
max-width: 100%;
}
}
/* Fold-Aussendisplay und andere sehr schmale Geraete: jeder Millimeter Innenabstand zaehlt. */
@media (max-width: 380px) {
.page-content {
padding: 1rem 0.75rem 2rem;
}
.main-nav {
gap: 0.3rem;
padding: 0.6rem 0.7rem;
}
.main-nav::before {
font-size: 0.95rem;
}
/* Avatar raus: Symbol, Theme-Umschalter und Abmelden sind funktional, der Avatar ist Zierde. */
.nav-user-avatar {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-links,
.nav-backdrop {
transition: none;
}
}
/* Protokoll-Nachrichten (/system). Stacktraces enthalten lange, umbruchlose Stuecke - Namespaces,
Windows-Pfade. Bei automatischem Tabellenlayout richtet sich die Spaltenbreite nach der
min-content-Breite, und die war damit groesser als das Fenster: die Tabelle wurde 3700px breit
und hat die ganze Seite aufgeschoben.
"anywhere" statt "break-word" ist hier der Punkt - nur "anywhere" senkt auch die
min-content-Breite, und genau die rechnet das Tabellenlayout aus. Mit "break-word" saehe die
Regel richtig aus, wuerde die Tabelle aber unveraendert breit lassen. */
.log-message {
overflow-wrap: anywhere;
}
.log-message pre {
margin: 0.4rem 0 0;
font-size: 0.8rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---------- Passkeys (Login-Alternative + Konto-Seite) ---------- */
.auth-alternative {
margin-top: 1.25rem;
}
/* Trennlinie mit "oder" in der Mitte: zwei Linien via Pseudo-Elemente, damit kein zusaetzliches
Markup noetig ist. */
.auth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--color-text-faint);
font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.auth-passkey {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 1rem;
}
.auth-passkey-status,
.passkey-status {
margin: 0.75rem 0 0;
font-size: 0.85rem;
}
.account-identity {
margin-bottom: 2rem;
}
.account-section {
max-width: 44rem;
}
.account-empty {
color: var(--color-text-faint);
}
.passkey-list {
list-style: none;
margin: 1.25rem 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.passkey-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.passkey-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--color-accent);
font-size: 0.8rem;
}
.passkey-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
/* Ohne das schiebt ein langer Geraetename den Loeschen-Button aus der Karte. */
min-width: 0;
flex: 1;
}
.passkey-name {
font-weight: 600;
font-size: 0.9rem;
overflow-wrap: anywhere;
}
.passkey-meta {
font-size: 0.78rem;
color: var(--color-text-muted);
}
.passkey-add {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.passkey-add-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
/* Basis statt fester Breite: auf dem Fold-Aussendisplay bricht das Feld dann in eine eigene
Zeile, statt den Button aus der Seite zu druecken. */
flex: 1 1 14rem;
min-width: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted);
}
.passkey-add .btn-primary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1rem;
}
/* Nur zeigen, wenn passkey.js den Browser als zu alt erkannt hat (Klasse am ). */
.passkey-unsupported {
display: none;
font-size: 0.85rem;
color: var(--color-warning);
}
:root.no-passkey .passkey-unsupported {
display: block;
}
:root.no-passkey .passkey-add,
:root.no-passkey .auth-alternative {
display: none;
}
/* ---------- Globale Ladeanzeige (Seitenwechsel) ---------- */
/* Sichtbar nur ueber die Klasse am , die loading.js setzt. Nicht per display:none/block,
damit das Einblenden weich ist - und pointer-events sperrt waehrenddessen Klicks, sonst laesst
sich waehrend eines langsamen Wechsels munter weiterklicken. */
.app-loading {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
background: color-mix(in srgb, var(--color-bg) 65%, transparent);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
:root.is-loading .app-loading {
opacity: 1;
pointer-events: auto;
}
.app-loading-spinner {
width: 2.4rem;
height: 2.4rem;
border: 3px solid var(--color-border-strong);
/* Nur eine Kante faerben - das erzeugt den rotierenden Bogen. */
border-top-color: var(--color-accent);
border-radius: 50%;
animation: app-loading-spin 0.7s linear infinite;
}
.app-loading-text {
font-size: 0.85rem;
color: var(--color-text-muted);
}
@keyframes app-loading-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.app-loading {
transition: none;
}
/* Der Spinner darf nicht ganz stehen, er ist die eigentliche Aussage - aber deutlich ruhiger. */
.app-loading-spinner {
animation-duration: 2s;
}
}
/* ---------- Namensformat-Einstellungen ---------- */
.naming-settings {
max-width: 44rem;
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.naming-template-input {
font-family: var(--font-mono, monospace);
font-size: 0.85rem;
}
.naming-placeholders {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.naming-placeholders code,
.naming-preview code {
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.15rem 0.4rem;
font-size: 0.8rem;
}
.naming-preview code {
overflow-wrap: anywhere;
}