/* Plain CSS, mobile-first. Dark/light via prefers-color-scheme + an optional manual override via `data-theme` attribute on . Token values mirror the WPF client's palette (Dokumenty/app-palette.{json,md}) so the SPA reads as the same product as the desktop app. Accents are unified across themes. Resolution order: 1) :root — light defaults 2) @media (prefers-color-scheme: dark) — system dark, UNLESS the user forced light via data-theme="light" (:not() guard) 3) :root[data-theme="dark"] — explicit dark override always wins */ :root { --bg: #F5F5FA; --surface: #FFFFFF; --surface-hover: #EDEDF4; --text: #2D2E33; --muted: #5C5E66; --accent: #8B5CF6; --accent-hover: #A78BFA; --accent-pressed: #7C3AED; --on-accent: #F5F5FA; --success: #059669; --warning: #D97706; --error: #DC2626; --border: #E0E0EA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1E1E2E; --surface: #2A2A3E; --surface-hover: #34344A; --text: #E8E8F0; --muted: #9090A8; --accent: #8B5CF6; --accent-hover: #A78BFA; --accent-pressed: #7C3AED; --on-accent: #F5F5FA; --success: #10B981; --warning: #F59E0B; --error: #EF4444; --border: #3F3F5A; } } :root[data-theme="dark"] { --bg: #1E1E2E; --surface: #2A2A3E; --surface-hover: #34344A; --text: #E8E8F0; --muted: #9090A8; --accent: #8B5CF6; --accent-hover: #A78BFA; --accent-pressed: #7C3AED; --on-accent: #F5F5FA; --success: #10B981; --warning: #F59E0B; --error: #EF4444; --border: #3F3F5A; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; } .app { display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem 2rem; } .card { width: 100%; max-width: 44rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; } .card--center { text-align: center; } .muted { color: var(--muted); } /* ===== Header layout ===== Two columns on desktop: identity (logo + brand name + URL) on the left, the trust card (verified-domain / unverified) on the right. Mobile stacks them vertically and centres each column. */ .branding { margin: 0 0 1.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } .branding__ident { display: flex; flex-direction: row; align-items: center; gap: 1rem; min-width: 0; } .branding__ident-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; } .branding__logo { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; display: block; margin: 0; border-radius: 8px; } /* Brand name stays in body text colour so it's always legible (some tenant primary colours — yellow, neon, very pale — would be unreadable on the surface). The accent shows up as a short brand-stroke under the title instead, so the brand identity still reads. */ .branding__name { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; } .branding__name::after { content: ''; display: block; width: 48px; height: 3px; margin: 0.45rem 0 0; background: var(--accent); border-radius: 2px; } .branding__link { margin: 0; font-size: 0.9rem; color: var(--muted); } .branding__link a { color: var(--text); text-decoration: none; } .branding__link a:hover { text-decoration: underline; } /* ===== Trust card (right column of the header) ===== The "should I upload here?" cue. Verified-domain links get a green card with the domain as the headline; personal/unverified links get the orange "Identita: Neověřena doménou" variant. Sized larger than a typical badge because for a first-time visitor this is the only meaningful signal of who they're sending files to. */ .trust-card { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.7rem 0.9rem; border: 1px solid; border-radius: 10px; min-width: 0; } .trust-card--verified { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: color-mix(in srgb, var(--success) 12%, var(--surface)); } .trust-card--unverified { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); } .trust-card__header { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .trust-card--verified .trust-card__icon { color: var(--success); } .trust-card--unverified .trust-card__icon { color: var(--warning); } .trust-card__icon { font-size: 1rem; line-height: 1; } .trust-card__value { font-size: 1rem; font-weight: 700; color: var(--text); } @media (max-width: 36rem) { .branding { flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .branding__ident { flex-direction: column; align-items: center; } .branding__ident-text { align-items: center; } .branding__name::after { margin-left: auto; margin-right: auto; } .trust-card { align-items: center; } } .picker { display: flex; flex-direction: column; gap: 1rem; } .picker__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.1s ease, border-color 0.1s ease; } .btn:hover { background: var(--surface-hover); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); } /* Full-width prominent variant of the primary button (final upload CTA in the with-files state). Bigger padding + slightly larger type so it reads as the dominant action even with the file list above it. */ .btn--hero { width: 100%; padding: 0.9rem 1rem; font-size: 1.05rem; } /* ===== Drop/click hero ===== */ /* Visible only in the empty file state. The whole zone is a label wrapping a hidden file input, so clicking anywhere opens the file picker; the same target receives dragover/drop. Dashed accent border + tinted surface make it the dominant element on the page. */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2.5rem 1.5rem; border: 2px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--text); cursor: pointer; text-align: center; transition: background 0.15s ease, border-color 0.15s ease; } .dropzone:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .dropzone--active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: var(--accent-pressed); } .dropzone__icon { font-size: 2.5rem; line-height: 1; color: var(--accent); } .dropzone__primary { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); } .dropzone__hint { margin: 0; font-size: 0.85rem; color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .picker__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); } .picker__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker__size { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; } .picker__remove { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 0.25rem; } .picker__remove:hover { color: var(--error); } .picker__total { margin: 0; color: var(--muted); font-size: 0.95rem; } .error-inline { margin: 0; color: var(--error); } /* Phase V: per-link instructions from the recipient. Soft accent-tinted panel sits between the branding header and the file picker so the sender notices it but it doesn't compete with the upload CTA. */ .callout { margin: 0 0 1.25rem; padding: 0.9rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); } .callout__label { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } .callout__body { margin: 0; font-family: inherit; font-size: 0.95rem; color: var(--text); white-space: pre-wrap; word-break: break-word; } .error { color: var(--error); margin: 1rem 0 0.5rem; } /* R5: sender-info form rendered between the recipient's instructions (if any) and the file picker. GDPR disclosure sits on top as a subtle muted band — quieter than the accent .callout used for recipient instructions so the latter still owns the louder voice. */ .sender-info { margin: 0 0 1.25rem; padding: 0.7rem 0.8rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%); } .sender-info__gdpr { margin: 0 0 0.6rem; padding: 0.45rem 0.65rem; font-size: 0.8rem; color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); border-radius: 6px; line-height: 1.4; } .sender-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; } @media (max-width: 30rem) { .sender-info__grid { grid-template-columns: 1fr; } } .sender-info__row { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .sender-info__label { font-size: 0.8rem; color: var(--muted); font-weight: 500; } .sender-info__required-mark { color: var(--error); font-weight: 700; } .sender-info__input { width: 100%; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; } .sender-info__input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); } /* Inline-error band specifically for sender-info validation; the generic .error-inline rule above zero-margins it, which clashes with the form's vertical rhythm. */ .sender-info .error-inline { margin: 0.75rem 0 0; font-size: 0.9rem; } .spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); margin: 1rem auto; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .progress { width: 100%; height: 8px; background: var(--border); border-radius: 4px; margin-top: 0.5rem; overflow: hidden; } .progress__fill { height: 100%; background: var(--accent); transition: width 0.15s ease; } .progress__label { margin: 0.5rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; } .check { width: 56px; height: 56px; margin: 0.5rem auto 1rem; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); display: grid; place-items: center; font-size: 2rem; font-weight: 700; } .check::before { content: "✓"; } .footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1rem; } .footer a { color: var(--text); text-decoration: none; font-weight: 600; } .footer a:hover { text-decoration: underline; } /* Page-level toolbar above the upload card. Holds the language switch on the left and the theme toggle on the right. Sized so a visitor notices both controls without having to scroll to the footer. */ .app-toolbar { max-width: 44rem; margin: 1rem auto 0; padding: 0 1rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } /* Two-segment language switch (CS | EN). The active segment fills with the accent; inactive is transparent with muted text. */ .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); } .lang-toggle__btn { background: transparent; border: 0; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; } .lang-toggle__btn:hover { background: var(--surface-hover); } .lang-toggle__btn--active { background: var(--accent); color: var(--on-accent); } .lang-toggle__btn--active:hover { background: var(--accent); } /* Single-icon theme toggle. The icon shows the state the click will move TO (sun when currently dark → click goes to light, etc.). SVG inherits currentColor so the icon is monochrome (--text), never coloured by an emoji font. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); line-height: 0; cursor: pointer; } .theme-toggle svg { width: 1rem; height: 1rem; display: block; } .theme-toggle:hover { background: var(--surface-hover); }