/** * AiA — vizuální jazyk "Pracovna" (zvoleno 2026-09-22, viz memory * aia-backlog-2026-09-15). Barva jen tam, kde něco znamená: neutrální * škála + oranžová (běží / hvězdy ředitele), zelená (shoda / hotovo), * červená (chyba). Shrnutí učitele = grafitový invertovaný blok * (tokeny --teacher-*), jediná velká invertovaná plocha na stránce. * * Motiv: světlý je výchozí (`:root`), tmavý se aplikuje buď podle systému * (`prefers-color-scheme`, pokud uživatel nezvolil), nebo explicitně přes * `data-theme` na (volba se pamatuje v localStorage, viz * state/theme.js + inline skript v index.html, který ji nastaví ještě * před načtením CSS, aby stránka neblikla). * * Každá barva jde přes token výše — žádné hex hodnoty v komponentách * (jinak by se tmavý motiv rozpadl). Pořadí souboru: tokeny → reset → * sdílené prvky → lišta → login → dashboard → modál → pracovní plocha. */ /* Písmo Onest je uložené lokálně (assets/fonts/, licence OFL) — appka je záměrně bez závislosti na internetu za běhu (viz memory aia-vanilla-rewrite-plan). Variabilní řez 400–700, latin + latin-ext (české znaky jsou v latin-ext). */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/onest-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --bg: #f6f7f8; --surface: #ffffff; --surface-2: #eff1f3; --line: #e4e7ea; --line-2: #d2d7dc; --ink: #111417; --ink-2: #545e69; --ink-3: #8a939e; --inv: #111417; --inv-ink: #f6f7f8; --inv-mute: #a9b1ba; --inv-line: rgba(255, 255, 255, 0.14); --amber: #b4771d; --amber-soft: #fbf3e3; --green: #1f7a4f; --green-soft: #e5f3eb; --red: #b3372d; --red-soft: #fbe9e6; --shadow: 0 1px 2px rgba(17, 20, 23, 0.05), 0 8px 24px -12px rgba(17, 20, 23, 0.18); --backdrop: rgba(17, 20, 23, 0.45); /* Blok shrnutí učitele — grafitová inverze (varianta A, 2026-09-22): výraznější než šedá plocha, měkčí než černá. Odstín se ladí tady. */ --teacher-bg: #2a3138; --teacher-ink: #f2f4f6; --teacher-mute: #aab3bc; --teacher-line: rgba(255, 255, 255, 0.16); --font: 'Onest', system-ui, -apple-system, sans-serif; --top: 52px; /* výška horní lišty — vše, co se k ní lepí, používá tenhle token */ --radius-sm: 6px; --radius-md: 8px; --radius-pill: 999px; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #0e1012; --surface: #151819; --surface-2: #1c2023; --line: #24292e; --line-2: #33393f; --ink: #eceef0; --ink-2: #a5adb5; --ink-3: #6c7580; --inv: #eceef0; --inv-ink: #0e1012; --inv-mute: #5b646e; --inv-line: rgba(0, 0, 0, 0.12); --amber: #e3aa4c; --amber-soft: rgba(227, 170, 76, 0.14); --green: #4ec28a; --green-soft: rgba(78, 194, 138, 0.14); --red: #e7695f; --red-soft: rgba(231, 105, 95, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); --teacher-bg: #cfd6db; --teacher-ink: #14181b; --teacher-mute: #4f5962; --teacher-line: rgba(0, 0, 0, 0.14); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #0e1012; --surface: #151819; --surface-2: #1c2023; --line: #24292e; --line-2: #33393f; --ink: #eceef0; --ink-2: #a5adb5; --ink-3: #6c7580; --inv: #eceef0; --inv-ink: #0e1012; --inv-mute: #5b646e; --inv-line: rgba(0, 0, 0, 0.12); --amber: #e3aa4c; --amber-soft: rgba(227, 170, 76, 0.14); --green: #4ec28a; --green-soft: rgba(78, 194, 138, 0.14); --red: #e7695f; --red-soft: rgba(231, 105, 95, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); --teacher-bg: #cfd6db; --teacher-ink: #14181b; --teacher-mute: #4f5962; --teacher-line: rgba(0, 0, 0, 0.14); } /* Minimální reset — bez Tailwind preflight to appka potřebuje sama. */ * { box-sizing: border-box; } button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; padding-top: var(--top); /* místo pro fixní .topbar, viz níže */ background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); } .field { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--ink); } .field:focus { outline: none; border-color: var(--ink); } .btn-accent, .btn-ghost { border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .btn-accent { background: var(--inv); color: var(--inv-ink); border: 1px solid var(--inv); } .btn-accent:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); } .btn-accent:disabled { opacity: 0.6; cursor: default; } .btn-ghost { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); } .btn-ghost:disabled { opacity: 0.6; cursor: default; } .badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; display: inline-block; } .badge-blue { background: var(--surface-2); color: var(--ink-2); } /* Stavové odznaky (ResponseCard.js: ok / pending / error+timeout) — do 2026-09-22 v CSS chyběly úplně, odznaky byly bez barvy. */ .badge-green { background: var(--green-soft); color: var(--green); } .badge-orange { background: var(--amber-soft); color: var(--amber); } .badge-red { background: var(--red-soft); color: var(--red); } /* --- topbar (main.js + components/TopBar.js, UserMenu.js) --- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--top); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-left { gap: 18px; } .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--inv); color: var(--inv-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; } .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .brand:hover .brand-name { color: var(--ink-2); } .topnav { display: flex; gap: 2px; } .topnav-item { padding: 6px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; } .topnav-item:hover { background: var(--surface-2); color: var(--ink); } .topnav-item.is-active { color: var(--ink); background: var(--surface-2); font-weight: 600; } /* Položky, které zatím nemají obsah (Uživatelé, Nastavení) — jen naznačené. */ .topnav-item.is-dim { color: var(--ink-3); cursor: default; } .topnav-item.is-dim:hover { background: none; color: var(--ink-3); } @media (max-width: 720px) { .topnav-item.is-dim { display: none; } } /* Stavový čip běžícího kola (TopBar.js setTopbarStatus) — persistentní element, mění se mu jen text/hidden. */ .status-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: var(--amber-soft); color: var(--amber); font-weight: 600; font-size: 12px; white-space: nowrap; } .status-chip[hidden] { display: none; } @media (max-width: 720px) { .status-chip-text { display: none; } } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; display: inline-block; } .dot-run { background: var(--amber); animation: pulse 1.6s ease-in-out infinite; } .dot-done { background: var(--green); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 50%, transparent); } 55% { box-shadow: 0 0 0 5px transparent; } } .theme-toggle { width: 32px; height: 32px; border-radius: var(--radius-md); font-size: 14px; padding: 0; } /* --- user menu (components/UserMenu.js) --- */ .user-menu-root { position: relative; } .user-menu-toggle { display: flex; align-items: center; gap: 9px; padding: 3px 6px 3px 0; margin-left: 4px; border-left: 1px solid var(--line); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .user-menu-toggle:hover { background: var(--surface-2); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--inv); color: var(--inv-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; margin-left: 10px; flex-shrink: 0; } .user-menu-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .user-menu-name { font-size: 12.5px; font-weight: 600; } .user-menu-role { font-size: 11px; color: var(--ink-3); } @media (max-width: 720px) { .user-menu-text { display: none; } } .user-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; z-index: 50; box-shadow: var(--shadow); } .user-menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--red); } .user-menu-item:hover { background: var(--surface-2); } /* --- login (views/LoginView.js) --- */ .login-page { min-height: calc(100vh - var(--top)); display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .login-card { max-width: 380px; width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 18px; border-radius: 14px; box-shadow: var(--shadow); } .login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; } .login-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; } .login-brand .brand-name { font-size: 18px; } .login-title { font-size: 15px; font-weight: 600; text-align: center; color: var(--ink-2); margin-top: -6px; } /* Sdílená chybová hláška formulářů (login, nový projekt, Pracovní stůl). */ .login-error { font-size: 13px; color: var(--red); background: var(--red-soft); padding: 8px 10px; border-radius: var(--radius-sm); } .field-group { display: flex; flex-direction: column; gap: 5px; } .field-label { font-size: 12px; font-weight: 500; color: var(--ink-2); } /* Sdílené pro každé textové/select pole appky (login i dashboard formulář) — ne jen login-specifické, přejmenováno z původního .login-input. */ .field-input { width: 100%; padding: 9px 11px; font-size: 13.5px; } .field-textarea { min-height: 72px; resize: vertical; } .login-submit { width: 100%; height: 38px; border-radius: 9px; font-size: 13.5px; } /* --- dashboard (views/DashboardView.js) --- */ .dashboard-page { max-width: 1120px; margin: 0 auto; padding: 28px 24px 80px; display: flex; flex-direction: column; gap: 20px; } .dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .dashboard-h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .dashboard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } /* Segmentový přepínač (filtry na dashboardu). */ .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); } .seg-btn { padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; border: 1px solid transparent; } .seg-btn:hover { color: var(--ink); } .seg-btn.is-on { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; } /* Mobil (2026-09-24): záložky se posouvají vodorovně místo roztažení stránky, hlavička se skládá pod sebe (název · záložky · tlačítko). */ @media (max-width: 720px) { .dashboard-header { flex-direction: column; align-items: stretch; } .dashboard-actions { flex-direction: column; align-items: stretch; } .dashboard-header, .dashboard-actions { width: 100%; min-width: 0; } .seg { display: flex; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .seg::-webkit-scrollbar { display: none; } .seg-btn { flex: 0 0 auto; } .dashboard-add-btn { width: 100%; } .admin-page .dashboard-header { align-items: stretch; } } .dashboard-add-btn { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; } .dashboard-form { display: flex; flex-direction: column; gap: 14px; } /* --- sdílený modál (views/DashboardView.js, components/SaveResponseModal.js) --- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-box { width: 100%; max-width: 440px; max-height: 85vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); } .modal-header { display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 600; } .modal-close { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .modal-close:hover { background: var(--surface-2); } .modal-box-sm { max-width: 360px; } .modal-box-md { max-width: 600px; } /* modál "vše od žáka / učitele" (ZakModal.js) */ .zak-modal { max-width: 720px; gap: 12px; } .zm-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); } .zm-list { display: flex; flex-direction: column; gap: 2px; } .zm-item { border-radius: 10px; } .zm-item:hover { background: var(--surface-2); } .zm-hd { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; font-size: 13px; } .zm-hd.is-static { cursor: default; } .zm-hd b { font-size: 11px; color: var(--ink-3); } .zm-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zm-m { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } .zm-m .is-err { color: var(--red); } .zm-hd[aria-expanded='true'] .caret { transform: rotate(90deg); } .zm-body { padding: 0 12px 12px 54px; } .zm-body[hidden] { display: none; } .zm-suggest { margin-top: 8px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; } /* Nastavení projektu — výběr žáků */ .radio-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; } .radio-item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px; margin-top: 8px; } .check-list[hidden] { display: none; } .check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; } .check-item:hover { border-color: var(--line-2); } .kv-wrap dd { text-align: right; white-space: normal; max-width: 60%; margin-left: auto; } .kv dd.is-plain { font-weight: 500; } .panel-settings-btn { width: 100%; margin-top: 4px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .dashboard-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .dashboard-form-grid { grid-template-columns: repeat(3, 1fr); } } .dashboard-empty { font-size: 13.5px; color: var(--ink-2); padding: 32px 0; text-align: center; } .dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } } .dashboard-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, box-shadow 0.15s; } .dashboard-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow); } .dashboard-card-title { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-card-desc { font-size: 12.5px; color: var(--ink-2); min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dashboard-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; } /* Neutrální štítek (typ, doména, bezpečnost) — bez významové barvy. */ .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); } /* --- dočasné placeholdery (main.js loading text) --- */ .placeholder-view { padding: 24px 16px; font-size: 13px; color: var(--ink-2); } /* --- hamburger (components/PanelToggleIcon.js) --- */ /* Skutečný morph mezi hamburgerem a křížkem — 3 persistentní elementy, jen se jim mění transform/opacity/top. Funguje, protože appka nikdy nemaže a znovu nevytváří DOM, který se nezměnil (viz memory aia-vanilla-rewrite-plan, podmínka č. 2) — přesně tohle bylo ve staré vanilla appce nemožné. */ .hamburger { position: relative; display: inline-block; width: 16px; height: 14px; } .hamburger-bar { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; } .hamburger-bar-top { top: 0; } .hamburger-bar-mid { top: 6px; } .hamburger-bar-bottom { top: 12px; } .hamburger-open .hamburger-bar-top { top: 6px; transform: rotate(45deg); } .hamburger-open .hamburger-bar-mid { opacity: 0; } .hamburger-open .hamburger-bar-bottom { top: 6px; transform: rotate(-45deg); } .hamburger-toggle { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } /* Na desktopu jsou oba panely vždy vidět (viz .side-panel níže) — hamburgery nejsou co přepínat. */ @media (min-width: 1024px) { .hamburger-toggle { display: none; } } /* ══════════════════════════════════════════════════════════════════════ Pracovní plocha projektu — půdorys seznam + detail (views/ProjectWorkspaceView.js, components/ListPane.js, RoundDetail.js…) ══════════════════════════════════════════════════════════════════════ */ .workspace { position: relative; } .workspace-backdrop { position: fixed; top: var(--top); left: 0; right: 0; bottom: 0; background: var(--backdrop); z-index: 30; } /* Boční panely: na mobilu fixed + translate (projekt zleva, seznam zprava), na desktopu buňky mřížky, každá roluje sama. */ .side-panel { position: fixed; top: var(--top); bottom: 0; z-index: 40; width: 320px; max-width: 88vw; overflow-y: auto; background: var(--surface); transform: translateX(0); transition: transform 0.2s ease; scrollbar-width: thin; } .side-panel-left { left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); } .side-panel-right { right: 0; border-left: 1px solid var(--line); transform: translateX(100%); } .side-panel-open { transform: translateX(0); } .ws-detail { min-width: 0; min-height: calc(100vh - var(--top)); } @media (min-width: 1024px) { .workspace { display: grid; grid-template-columns: 236px 332px minmax(0, 1fr); height: calc(100vh - var(--top)); } .workspace-backdrop { display: none; } .side-panel { position: static; top: auto; z-index: auto; width: auto; max-width: none; height: 100%; transform: none !important; } .ws-detail { height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; } } .ws-detail-in { max-width: 920px; margin-inline: auto; padding: 0 28px 120px; } @media (max-width: 720px) { .ws-detail-in { padding: 0 14px 80px; } } /* Správa (views/AdminView.js) */ .admin-page .dashboard-header { align-items: flex-end; } .admin-body { display: flex; flex-direction: column; gap: 14px; } .admin-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .admin-card .section-title { color: var(--ink-2); } .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; } .admin-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-acts .help { margin-right: auto; } .admin-note { font-size: 13px; padding: 8px 10px; border-radius: 8px; } .admin-note.is-ok { background: var(--green-soft); color: var(--green); } .admin-note.is-err { background: var(--red-soft); color: var(--red); } .admin-log { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; color: var(--ink-2); } .admin-log[hidden] { display: none; } .admin-table { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; } .admin-row { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(160px, 2fr) 90px 90px 130px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13px; min-width: 620px; } .admin-row:hover:not(.is-head) { background: var(--surface-2); } .admin-row.is-head { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .admin-row.is-off { opacity: 0.6; } .admin-badge { margin-left: 8px; } .admin-row.is-link { cursor: pointer; } .admin-row.is-link:focus-visible { outline: 2px solid var(--ink-3); } .admin-detail { display: flex; flex-direction: column; gap: 12px; } .admin-detail-hd { display: flex; align-items: center; gap: 12px; } .admin-detail-name { font-size: 15px; font-weight: 700; } /* Žáci (views/AdminZaci.js) */ .admin-row.zak-row { grid-template-columns: minmax(170px, 2fr) minmax(120px, 1.2fr) 90px 90px minmax(110px, 1fr) auto; min-width: 760px; } .admin-row.user-row { grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(120px, 1.2fr) 120px auto; min-width: 760px; } .admin-row.log-row { grid-template-columns: 110px 130px minmax(160px, 1fr) 90px; min-width: 0; } .admin-row.group-row { grid-template-columns: minmax(160px, 1.5fr) minmax(200px, 3fr) 110px auto; } .share-box { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; } .share-box[hidden] { display: none; } .owner-box .help { margin: 0; } .owner-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } .owner-acts .field-input { width: auto; min-width: 200px; } .btn-ghost.is-danger { color: var(--red); border-color: var(--red); } .btn-ghost.is-danger:hover:not(:disabled) { background: var(--red-soft); } .dashboard-card.is-stub { opacity: 0.75; border-style: dashed; cursor: default; } .dashboard-card-acts { margin-left: auto; display: inline-flex; gap: 4px; } .dashboard-owner { font-size: 11px; color: var(--ink-3); margin-left: 6px; } .panel-owner { margin: -4px 0 0; } .readonly-note { padding: 12px 16px; font-size: 13px; color: var(--ink-2); border: 1px dashed var(--line-2); } .stars.is-readonly .grade-star { cursor: default; } /* 2FA (TwoFactorPanel.js, LoginView krok 2) */ .twofa { display: flex; flex-direction: column; gap: 8px; } .twofa-state { margin: 0; font-size: 13.5px; } .twofa-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .twofa-options { display: flex; flex-direction: column; gap: 10px; } .twofa-option { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .twofa-option .help { margin: 0; } .twofa-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; } .twofa-qr { padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; line-height: 0; } .twofa-steps { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .twofa-steps p { margin: 0; } .twofa-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.06em; user-select: all; } .twofa-code { font-size: 20px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; max-width: 200px; } .login-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; } .login-card-wide { max-width: 640px; } @media (max-width: 560px) { .twofa-setup { grid-template-columns: 1fr; } } .modal-backdrop.is-session { z-index: 150; } .login-remember { margin: 2px 0 12px; font-size: 13px; } .admin-row.device-row { grid-template-columns: minmax(160px, 2fr) minmax(140px, 2fr) auto; min-width: 0; } .admin-row.zt-row { grid-template-columns: minmax(170px, 1.2fr) minmax(220px, 3fr) 90px 150px; } .zak-note { display: block; font-size: 11px; } .zak-caps-lg { margin-left: 0; font-size: 14px; gap: 5px; opacity: 1; } .zak-state { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; } .zak-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .zak-form .section-title { margin-top: 4px; } .check-list-inline { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; } .field-group[hidden] { display: none; } .admin-split { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; } .admin-subnav { display: flex; flex-direction: column; gap: 2px; } .admin-subbtn { text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); } .admin-subbtn:hover { background: var(--surface-2); } .admin-subbtn.is-on { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); } .admin-subbody { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .admin-test-to { width: 260px; max-width: 100%; } @media (max-width: 720px) { .admin-split { grid-template-columns: 1fr; } .admin-subnav { flex-direction: row; flex-wrap: wrap; } } /* --- levý panel — projekt (LeftPanel.js) --- */ .ws-side { padding: 20px 18px 40px; } .ws-side-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .panel-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); } .panel-back-link:hover { color: var(--ink); } .panel-project-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 14px 0 6px; text-wrap: balance; } .panel-project-desc { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .panel-project-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .help { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; } .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 12.5px; margin: 0; } .kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .kv dd.is-green { color: var(--green); } /* --- prostřední panel — záložky (ListPane.js) --- */ .ws-list { display: flex; flex-direction: column; } .tabs { display: flex; gap: 2px; padding: 12px 12px 0; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; } .tab { padding: 8px 10px 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; } .tab:hover { color: var(--ink); } .tab[aria-selected='true'] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } .tab-n { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; } .tabpanel { padding: 8px; } .tabpanel[hidden] { display: none; } .list-empty { padding: 28px 12px; font-size: 13px; color: var(--ink-3); text-align: center; } /* řádek kola (RoundRow.js) */ .rounds-list { display: flex; flex-direction: column; gap: 2px; } .round-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; width: 100%; padding: 12px; border-radius: 10px; text-align: left; } .round-row:hover { background: var(--surface-2); } .round-row[aria-selected='true'] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); } .round-row .dot { margin-top: 6px; } .round-row-body { display: block; min-width: 0; } .round-row-t { display: flex; align-items: baseline; gap: 8px; } .round-row-t b { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); } .round-row-t em { font-style: normal; font-size: 11px; color: var(--amber); font-weight: 600; } .round-row-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.4; margin-top: 3px; white-space: pre-line; } .round-row-m { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .round-row-m .is-green { color: var(--green); font-weight: 600; } .round-row-m .is-amber { color: var(--amber); font-weight: 600; } /* soubory v seznamu (FilesPanel.js) */ .files-list { display: flex; flex-direction: column; gap: 2px; } .file-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; } .file-row:hover { background: var(--surface-2); } .file-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; } .file-row-body { display: block; min-width: 0; } .file-row-name { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; } .file-row-acts { margin-left: auto; display: flex; gap: 2px; } .mini { width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--ink-3); font-size: 12px; padding: 0; flex-shrink: 0; } .mini:hover { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } .hidden-file-input { display: none; } .list-add { display: block; width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px; border: 1px dashed var(--line-2); text-align: center; font-weight: 500; font-size: 12.5px; color: var(--ink-3); cursor: pointer; } .list-add-link { font: inherit; cursor: pointer; background: none; text-align: center; } .list-add:hover { color: var(--ink); border-color: var(--ink-3); } @keyframes flash-highlight { 0% { background: var(--amber-soft); } 100% { background: transparent; } } .flash-highlight { animation: flash-highlight 1.5s ease; } /* nápady v seznamu (IdeaInbox.js, IdeaCard.js) */ .idea-inbox { display: flex; flex-direction: column; } .idea-list { display: flex; flex-direction: column; gap: 2px; } .idea-card { padding: 11px 12px; border-radius: 10px; border-left: 3px solid var(--amber); } .idea-card:hover { background: var(--surface-2); } .idea-text { font-size: 13px; line-height: 1.45; cursor: text; white-space: pre-wrap; } .idea-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); margin-top: 5px; } .idea-acts { margin-left: auto; display: flex; gap: 2px; } .idea-src { height: 20px; padding: 0 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11px; font-weight: 600; white-space: nowrap; } .idea-src:hover { box-shadow: inset 0 0 0 1px var(--amber); } .idea-cite { margin: 0 0 6px; padding: 5px 10px; border-left: 2px solid var(--amber); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; max-height: 3.9em; overflow: hidden; cursor: pointer; } .idea-cite.is-open { max-height: none; } .idea-note-empty { color: var(--ink-3); font-size: 12.5px; } .idea-note-empty:hover { color: var(--ink); } .idea-edit-textarea { min-height: 60px; font-size: 13px; } .idea-edit-actions { display: flex; gap: 6px; margin-top: 6px; } .idea-new-form { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 4px; } .idea-new-textarea { min-height: 48px; font-size: 13px; } .idea-add-submit-btn { align-self: flex-start; height: 28px; padding: 0 12px; border-radius: 7px; font-size: 12px; } /* --- sdílené: chip, drobný nadpis sekce, malé tlačítko --- */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip-row[hidden] { display: none; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .chip button { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); font-size: 11px; } .chip button:hover { color: var(--red); background: var(--red-soft); } .section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .compact-btn { height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12px; } .btn-quiet { border-color: transparent; background: none; color: var(--ink-2); } .btn-quiet:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--ink); } .btn-primary-lg { height: 34px; padding: 0 15px; border-radius: 9px; font-size: 13px; } .dot-err { background: var(--red); } /* --- Pracovní stůl (PracovniStul.js) — přilepený nahoře v detailu --- */ /* Lepicí pás přes celou šířku detailu (varianta A, 2026-09-22): plné pozadí + hrana dole, ať obsah pod ním neprosvítá; karta uvnitř drží šířku obsahového sloupce (.ws-detail-in: 920px − 2×28px). */ /* Sticky je na .ws-stul (přímé dítě rolujícího panelu) — obal s výškou přesně pásu by sticky "neměl kam jet". .pracovni-stul-wrap je jen vzhled. */ /* Lepí se jen na desktopu (detail roluje sám, lišta je mimo něj) — na mobilu by stůl sežral půlku obrazovky, tam roluje s obsahem. */ @media (min-width: 1024px) { .ws-stul { position: sticky; top: 0; z-index: 10; } } .pracovni-stul-wrap { padding: 20px 28px 14px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -12px rgba(17, 20, 23, 0.16); } @media (max-width: 720px) { .pracovni-stul-wrap { padding: 14px 14px 12px; } } .pracovni-stul { max-width: 864px; margin-inline: auto; border-radius: 14px; box-shadow: var(--shadow); } /* první blok obsahu pod pásem potřebuje vlastní odstup (dřív ho dával pás) */ .ws-detail-in > .round-detail, .ws-detail-in > .detail-empty { margin-top: 18px; } .ps-in { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; } .ps-head { display: flex; align-items: center; gap: 10px; } .ps-head .section-title { color: var(--ink-2); } .ps-count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); } /* vložené podklady (bloky) nad polem — co je od uživatele, je jen v poli */ .ps-blocks { display: flex; flex-direction: column; gap: 6px; } .ps-blocks[hidden] { display: none; } .ps-block { border-left: 3px solid var(--line-2); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 6px 8px 7px 10px; } .ps-block-hd { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .ps-block-acts { margin-left: auto; display: flex; gap: 2px; } .ps-block-acts .mini { width: 22px; height: 22px; } .ps-block-t { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; max-height: 4.4em; overflow: hidden; cursor: pointer; } .ps-block-t.is-open { max-height: none; } .ps-textarea { width: 100%; min-height: 72px; resize: vertical; display: block; border: none; background: none; padding: 0; font-size: 15px; line-height: 1.55; color: var(--ink); } .ps-textarea:focus { outline: none; } .ps-textarea::placeholder { color: var(--ink-3); } .ps-foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; } .ps-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ps-who .section-title { margin-right: 4px; } /* boxy žáků + Učitel (2026-09-22): ☑ = účast v dalším kole, klik na box = modál */ .zak-box { display: flex; align-items: stretch; min-width: 150px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; user-select: none; } .zak-box:hover { border-color: var(--ink-3); } .zak-box:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 1px; } .zak-chk { display: grid; place-items: center; padding: 0 6px 0 9px; border-right: 1px solid var(--line); cursor: pointer; } .zak-chk input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); cursor: pointer; } .zak-main { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 5px 11px 5px 9px; min-width: 0; } .zak-n { font-size: 12.5px; font-weight: 600; white-space: nowrap; } .zak-caps { display: inline-flex; gap: 3px; margin-left: 6px; font-size: 11px; opacity: 0.8; vertical-align: 1px; } .check-item .zak-caps { margin-left: auto; } .zm-sum .zak-caps { gap: 10px; font-size: 12px; } .zak-s { font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .zak-box.is-off { border-style: dashed; } .zak-box.is-off .zak-n { color: var(--ink-3); font-weight: 500; } .zak-box.is-busy .zak-s { color: var(--amber); font-weight: 600; } .zak-box.is-busy { border-color: var(--amber); animation: zak-pulse 1.6s ease-in-out infinite; } @keyframes zak-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 35%, transparent); } 55% { box-shadow: 0 0 0 5px transparent; } } .zak-box.is-ok .zak-s { color: var(--green); } .zak-box.is-err .zak-s { color: var(--red); } /* Učitel — stejný box jako žáci, jen grafitová levá linka (stejný jazyk jako bloky na stole / "Vloženo": žák zelená, učitel grafit, nápad amber). */ .zak-box.is-teacher { border-left: 3px solid var(--teacher-bg); } .zak-box.is-teacher .zak-main { padding-left: 11px; } /* proužek postupu pod boxy, jen dokud kolo běží */ .ps-progress { flex-basis: 100%; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); } .ps-progress[hidden] { display: none; } .ps-progress-k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber); padding: 2px 0; } .ps-progress-k:hover { text-decoration: underline; } .ps-bar { flex: 1 1 120px; max-width: 260px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .ps-bar i { display: block; height: 100%; background: var(--amber); transition: width 0.4s ease; } .ps-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; } .ps-hint { font-size: 11.5px; color: var(--ink-3); } .ps-hint.is-warn { color: var(--amber); } /* --- detail kola (RoundDetail.js, AnswerRow.js) --- */ .round-detail { display: flex; flex-direction: column; gap: 18px; } .detail-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; } .round-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .round-hd h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); } .state.is-run { background: var(--amber-soft); color: var(--amber); } .state.is-done { background: var(--green-soft); color: var(--green); } .round-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); display: flex; gap: 12px; flex-wrap: wrap; } .question { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; padding: 14px 16px; white-space: pre-wrap; } /* shrnutí učitele — varianta A (2026-09-22): grafitová inverze přes tokeny --teacher-* (černá byla "moc", světle šedá "málo"). */ .teacher { background: var(--teacher-bg); color: var(--teacher-ink); border-radius: 14px; padding: 18px 20px 16px; } .teacher-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .teacher-hd .section-title { color: var(--teacher-mute); } .teacher-state { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--teacher-line); color: var(--teacher-mute); } .agree { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .agree-bar { width: 80px; height: 4px; border-radius: 2px; background: var(--teacher-line); overflow: hidden; } .agree-bar i { display: block; height: 100%; background: var(--green); } .teacher-text { margin: 0; font-size: 14.5px; line-height: 1.6; text-wrap: pretty; white-space: pre-wrap; } .teacher-note { margin-top: 8px; font-size: 12px; color: var(--teacher-mute); } .teacher .btn-ghost { background: transparent; color: var(--teacher-ink); border-color: var(--teacher-line); } .teacher .btn-ghost:hover:not(:disabled) { background: var(--teacher-line); border-color: var(--teacher-mute); } /* Návrh dalšího zadání — samostatná světlá karta pod tmavým blokem (varianta B). */ .suggest { margin-top: 10px; padding: 14px 16px; border-left: 3px solid var(--teacher-bg); border-radius: 6px 12px 12px 6px; } .suggest .section-title { display: block; color: var(--ink-2); margin-bottom: 6px; } .suggest-t { font-size: 14px; line-height: 1.55; white-space: pre-wrap; text-wrap: pretty; } .suggest-ft { margin-top: 10px; } .teacher-ft { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .teacher.is-waiting { background: var(--surface); color: var(--ink); border: 1px dashed var(--line-2); } .teacher.is-waiting .section-title { color: var(--ink-3); } .teacher.is-waiting .teacher-text { color: var(--ink-3); font-size: 13.5px; } /* Učitel selhal — bílý blok s červenou linkou, důvod čitelně, výrazné "Vyhodnotit znovu". */ .teacher.is-failed { background: var(--surface); color: var(--ink); border: 1px solid var(--red); border-left-width: 3px; } .teacher.is-failed .section-title { color: var(--red); } .teacher.is-failed .teacher-text { font-size: 13.5px; color: var(--ink-2); } /* Nápady s kotvou (B2 v2, 2026-09-22): značka v řádku kola, podtržená citace po skoku "↩", plovoucí lišta nad označeným textem, modál kotvy. */ .round-row-anchor { color: var(--amber); font-size: 11px; font-weight: 600; } mark.anchor-hl { background: var(--amber-soft); color: inherit; border-bottom: 2px solid var(--amber); border-radius: 2px; box-shadow: 0 0 0 2px var(--amber-soft); } .teacher mark.anchor-hl { background: var(--teacher-line); border-bottom-color: currentColor; box-shadow: 0 0 0 2px var(--teacher-line); } .sel-toolbar { position: fixed; z-index: 200; /* nad modálem (100) — lišta funguje i v modálu žáka */ display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--inv); color: var(--inv-ink); box-shadow: var(--shadow); } .sel-toolbar[hidden] { display: none; } .sel-btn { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; color: inherit; white-space: nowrap; } .sel-btn:hover { background: var(--inv-line); } .anchor-cite { margin: 0; padding: 8px 10px; border-left: 3px solid var(--amber); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; max-height: 180px; overflow: auto; } .anchor-note { min-height: 64px; font-size: 13px; } /* Zdroj vloženého podkladu — barva levé linky (Pracovní stůl i zadání kola). */ .src-response, .src-excerpt { border-left-color: var(--green); } .src-teacher { border-left-color: var(--teacher-bg); } .src-idea { border-left-color: var(--amber); } /* Vložené podklady v zadání kola (RoundDetail.js) */ .question-t { white-space: pre-wrap; } .question-t.is-empty { color: var(--ink-3); font-weight: 400; font-size: 14px; } .inserted { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; font-weight: 400; font-size: 13px; } .inserted[hidden] { display: none; } .inserted-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .inserted-hd .section-title { margin-right: 4px; } .inserted-chip { padding: 3px 10px; cursor: pointer; } .inserted-chip:hover, .inserted-chip[aria-pressed='true'] { border-color: var(--ink-3); } .inserted-t { padding: 6px 10px; border-left: 3px solid var(--line-2); background: var(--surface-2); border-radius: 0 8px 8px 0; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; } .inserted-t[hidden] { display: none; } .inserted-t-hd { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } /* Dialog s Učitelem (B3) — vlákno pod shrnutím, otázky vpravo, odpovědi Učitele s grafitovou linkou (stejný jazyk jako bloky / Vloženo). */ .dialog { display: flex; flex-direction: column; gap: 8px; } .dialog[hidden] { display: none; } .dlg-list { display: flex; flex-direction: column; gap: 8px; } .dlg-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; } .dlg-msg.is-user { align-self: flex-end; background: var(--surface-2); border-bottom-right-radius: 4px; } .dlg-msg.is-teacher { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--teacher-bg); border-radius: 4px 12px 12px 4px; } .dlg-msg.is-pending { color: var(--ink-3); border-style: dashed; border-left-style: solid; } .dlg-msg.is-error { border-color: var(--red); border-left-color: var(--red); } .dlg-t { white-space: pre-wrap; text-wrap: pretty; } .dlg-meta { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 11px; color: var(--ink-3); } .dlg-meta .mini { margin-left: auto; } .dlg-form { display: flex; flex-direction: column; gap: 6px; } .dlg-form[hidden] { display: none; } .dlg-input { min-height: 56px; font-size: 13.5px; } .dlg-form-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .dlg-hint { font-size: 11.5px; color: var(--ink-3); } .round-row-dlg { color: var(--ink-3); font-size: 11px; font-weight: 600; } /* Větve (2026-09-22): strom v levém panelu, štítek v hlavičce kola, zděděná kola v seznamu. */ .branch-tree { display: flex; flex-direction: column; gap: 2px; } .br-item { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--depth, 0) * 14px); } .br-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border-radius: 8px; text-align: left; } .br-main:hover { background: var(--surface-2); } .br-item.is-active .br-main { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); } .br-n { font-size: 12.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .br-item.is-active .br-n { color: var(--ink); font-weight: 600; } .br-n b { color: var(--amber); font-size: 11px; font-weight: 700; } .br-m { font-size: 11px; color: var(--ink-3); } .br-item .mini { opacity: 0; } .br-item:hover .mini, .br-item .mini:focus-visible { opacity: 1; } .branch-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .round-hd-tools { display: flex; align-items: center; gap: 8px; flex-basis: 100%; } .round-row.is-inherited { opacity: 0.62; } .round-row.is-inherited[aria-selected='true'] { opacity: 0.85; } .round-row-inh { color: var(--ink-3); font-size: 10.5px; font-weight: 500; } /* Historie vyhodnocení (B1b) — záložky nad blokem učitele, platné = nejnovější. */ .eval-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -8px; } .eval-tabs[hidden] { display: none; } .eval-tab { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .eval-tab:hover { color: var(--ink); border-color: var(--ink-3); } .eval-tab.is-on { background: var(--teacher-bg); color: var(--teacher-ink); border-color: var(--teacher-bg); font-weight: 600; } /* Rozpor mezi odpověďmi (B1) — uvnitř bloku učitele, štítek oranžově. */ .conflict { margin-top: 12px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--teacher-line); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .conflict b { color: var(--amber); font-weight: 700; } .teacher.is-failed .conflict { border-color: var(--line); } /* "Vyhodnotit znovu" + ▾ (volba délky shrnutí) — split button s nabídkou. */ .split { position: relative; display: inline-flex; } .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; } .split-arrow { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 0 8px; } .split-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 250px; padding: 4px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); } .split.is-open .split-menu { display: block; } .split-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; } .split-item:hover { background: var(--surface-2); } .teacher-err { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--ink); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* odpovědi žáků — řádky, ne karty */ .answers-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: -10px; } .answers-hd .section-title { color: var(--ink-2); } .answers-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .answers { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; } .answers:empty { display: none; } .ans { border-bottom: 1px solid var(--line); } .ans:last-child { border-bottom: none; } .ans-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; cursor: pointer; } .ans-row.is-static { cursor: default; } .ans-row:hover { background: var(--surface-2); } .ans-n { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; min-width: 0; } .ans-n span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ans-p { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ans-p.is-busy { color: var(--amber); font-weight: 500; } .ans-p.is-err { color: var(--red); font-weight: 500; } .ans-row[aria-expanded='true'] .ans-p { visibility: hidden; } .stars { display: flex; gap: 1px; } .grade-star { color: var(--line-2); font-size: 13px; line-height: 1; padding: 0 1px; } .grade-star:hover { color: var(--amber); } .grade-star-active { color: var(--amber); } .caret { color: var(--ink-3); font-size: 10px; transition: transform 0.15s ease; justify-self: end; } .ans-row[aria-expanded='true'] .caret { transform: rotate(90deg); } .ans-body { padding: 0 16px 16px 150px; } .ans-body[hidden] { display: none; } .ans-body-text { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; text-wrap: pretty; } .ans-body-err { color: var(--red); font-size: 13px; } .ans-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } @media (max-width: 720px) { .ans-row { grid-template-columns: minmax(0, 1fr) auto 18px; } .ans-row .ans-p { display: none; } .ans-body { padding-left: 16px; } .round-hd h2 { font-size: 18px; } .question { font-size: 15px; } } /* --- náhled souboru (FilePreviewModal.js) --- */ .preview-modal-box { max-width: 700px; width: 100%; max-height: 85vh; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .preview-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .preview-modal-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-modal-image { max-width: 100%; border-radius: 6px; } .preview-modal-text { font-size: 12.5px; white-space: pre-wrap; margin: 0; } /* ══════════════════════════════════════════════════════════════════════ Fáze 4 — dotažení: modály, mobil, drobnosti detailu ══════════════════════════════════════════════════════════════════════ */ .modal-box { border-radius: 14px; padding: 22px; gap: 18px; } .modal-header { gap: 12px; } .modal-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .modal-close { width: 28px; height: 28px; border-radius: 7px; color: var(--ink-3); font-size: 12px; } .modal-close:hover { background: var(--surface-2); color: var(--ink); } .modal-actions { gap: 8px; } .preview-modal-box { padding: 18px 22px 22px; gap: 12px; } .preview-modal-title { font-size: 15px; font-weight: 700; } .preview-modal-text { font-size: 13.5px; line-height: 1.6; font-family: var(--font); } /* mobil: vysunutý panel má stín, lišta se vejde i na 400 px */ .side-panel-open { box-shadow: var(--shadow); } @media (min-width: 1024px) { .side-panel-open { box-shadow: none; } } @media (max-width: 560px) { .topbar { padding: 0 10px; gap: 8px; } .topbar-left { gap: 10px; } .topnav { display: none; /* jediná položka je Projekty = klik na značku */ } .ps-hint { display: none; } .ps-in { padding: 12px 12px 10px; } .teacher { padding: 14px 16px 14px; } .round-hd .round-meta { margin-left: 0; width: 100%; } .tabpanel { padding: 6px; } } @media (max-width: 1023px) { .ws-side { padding-top: 16px; } } /* detail: hvězdy reagují i na klávesnici, řádek bez těla nemá kurzor ruky */ .grade-star:focus-visible { outline-offset: 0; border-radius: 3px; } .ans-row.is-static .caret { visibility: hidden; } /* Mobil — hlavička Správy: základní pravidlo .admin-page .dashboard-header (align-items: flex-end) je později v souboru než blok pro 720px, proto přepis až tady na konci (2026-09-24). */ @media (max-width: 720px) { .admin-page .dashboard-header { align-items: stretch; } .admin-page .dashboard-header > div { text-align: left; } }