/* ==================================================================== Design system planovace rozvrhu ZS. Tokeny podle doc/gui_redesign_navrh.html. Zadny build, cisty CSS. ==================================================================== */ :root { --primar: #4f6df5; /* indigo - akce, aktivni prvky */ --primar-tmavy: #3b55d9; --primar-jemny: #eef1fe; --uspech: #10b981; --uspech-jemny: #ecfdf5; --varovani: #f59e0b; --varovani-jemny: #fef3c7; --chyba: #ef4444; --chyba-jemna: #fef2f2; --ink-900: #0f172a; /* texty */ --ink-600: #475569; --ink-400: #94a3b8; --plocha: #ffffff; /* karty */ --pozadi: #f6f7fb; /* stranka */ --okraj: #e2e8f0; --radius: 12px; --radius-s: 8px; --stin: 0 1px 2px rgb(15 23 42 / .06), 0 4px 12px rgb(15 23 42 / .05); --stin-hover: 0 4px 16px rgb(15 23 42 / .12); /* barevne kodovani predmetu (viz app.js KATEGORIE_PREDMETU) */ --predmet-mat: #6366f1; --predmet-jaz: #10b981; --predmet-tv: #f59e0b; --predmet-vych: #ec4899; --predmet-ostatni: var(--primar); } /* Tmavy rezim: aktivuje se tridou .tmavy na (viz app.js). Vychozi volba je odvozena z prefers-color-scheme, dal drzi localStorage. */ :root.tmavy { --plocha: #1e293b; --pozadi: #0f172a; --okraj: #334155; --ink-900: #f1f5f9; --ink-600: #cbd5e1; --ink-400: #64748b; --primar-jemny: #1e2a5e; --uspech-jemny: #06281f; --varovani-jemny: #3a2c07; --chyba-jemna: #3a1414; --stin: 0 1px 2px rgb(0 0 0 / .35), 0 4px 12px rgb(0 0 0 / .30); --stin-hover: 0 4px 16px rgb(0 0 0 / .50); } * { box-sizing: border-box; margin: 0; } body { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; background: var(--pozadi); color: var(--ink-900); line-height: 1.45; padding: clamp(.5rem, 2vw, 1.5rem); } h3 { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); margin: 1rem 0 .45rem; } h3:first-child { margin-top: 0; } /* ====== Aplikacni okno + horni lista ====== */ .okno { background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--radius); box-shadow: var(--stin); max-width: 1400px; margin: 0 auto; overflow: hidden; } .lista { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; padding: .6rem .9rem; border-bottom: 1px solid var(--okraj); background: var(--plocha); color: var(--ink-900); font-size: .9rem; } .lista .app { font-weight: 700; font-size: .95rem; margin-right: 1rem; display: flex; align-items: center; gap: .45rem; } .lista .app::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--primar), #8b5cf6); display: block; flex: none; } .tab { padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; color: var(--ink-600); cursor: pointer; border: none; background: none; } .tab:hover:not(.akt) { background: var(--pozadi); } .tab.akt { background: var(--primar-jemny); color: var(--primar); font-weight: 600; } .stav-hlavicka { font-size: .8rem; color: var(--ink-600); } /* Uzivatel + prepinac rezimu + odhlaseni na pravem kraji */ .uzivatel-blok { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .uzivatel { font-size: .8rem; color: var(--ink-600); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primar); color: #fff; display: none; place-items: center; font-size: .7rem; font-weight: 700; flex: none; } .prepinac-rezim { border: 1px solid var(--okraj); background: none; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink-600); } .prepinac-rezim:hover { background: var(--pozadi); } .btn-odhlasit { border: 1px solid var(--okraj); background: none; border-radius: var(--radius-s); padding: .3rem .7rem; font-size: .78rem; color: var(--ink-600); cursor: pointer; } .btn-odhlasit:hover { background: var(--pozadi); } /* ====== Rozlozeni (panel + obsah) ====== */ .telo { display: grid; grid-template-columns: 250px 1fr; min-height: 460px; } .telo.skryto { display: none; } .skryto { display: none !important; } .bocni { border-right: 1px solid var(--okraj); padding: .9rem; font-size: .85rem; background: color-mix(in srgb, var(--pozadi) 55%, var(--plocha)); } .hlavni { padding: 1rem; overflow-x: auto; } /* Rozbalovaci prepinac panelu (jen na uzkych obrazovkach) */ .panel-prepinac { display: none; } /* ====== Verze / seznam polozek ====== */ .verze { padding: .5rem .65rem; border: 1px solid transparent; border-radius: var(--radius-s); margin-bottom: .3rem; background: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .verze:hover { background: var(--plocha); } .verze.akt { background: var(--plocha); border-color: var(--primar); box-shadow: var(--stin); font-weight: 600; } .verze small { color: var(--ink-400); font-weight: 400; } /* ====== Tlacitka ====== */ .btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; background: var(--primar); color: #fff; border-radius: var(--radius-s); font-size: .82rem; font-weight: 500; margin: .15rem 0; border: none; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; } .btn:hover { transform: translateY(-1px); box-shadow: var(--stin-hover); } .btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; } .btn.sedy { background: none; color: var(--ink-600); border: 1px solid var(--okraj); } .btn.sedy:hover { background: var(--pozadi); box-shadow: none; } .btn.zeleny { background: var(--uspech); } label.mala { font-size: .75rem; display: inline-block; margin: .15rem .4rem .15rem 0; color: var(--ink-600); } select, input[type=text] { padding: .4rem .6rem; border: 1px solid var(--okraj); border-radius: var(--radius-s); font-size: .84rem; background: var(--plocha); color: var(--ink-900); } select:focus, input[type=text]:focus { outline: 2px solid var(--primar-jemny); border-color: var(--primar); } .radek-nastroju { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; font-size: .85rem; color: var(--ink-600); } /* ====== Mrizka rozvrhu ====== */ /* Obal umoznuje vodorovne rolovani uvnitr karty na uzkych obrazovkach. */ .mrizka-obal { overflow-x: auto; } table { border-collapse: separate; border-spacing: 3px; font-size: .78rem; width: 100%; } th { color: var(--ink-400); font-weight: 500; font-size: .72rem; padding: .2rem; text-align: center; } td { background: var(--pozadi); border-radius: var(--radius-s); padding: .2rem; vertical-align: top; min-width: 76px; height: 44px; } td.den { background: none; color: var(--ink-600); font-weight: 600; font-size: .76rem; min-width: 40px; text-align: center; vertical-align: middle; position: sticky; left: 0; z-index: 1; } /* Lekce jako mini-karta s levym barevnym prouzkem podle kategorie. */ .hodina { border-radius: 6px; padding: .28rem .4rem; margin: .1rem 0; background: var(--plocha); box-shadow: var(--stin); border-left: 3px solid var(--predmet-ostatni); font-size: .74rem; color: var(--ink-900); transition: transform .1s, box-shadow .1s; } .hodina.tahatelna { cursor: grab; } .hodina:hover { transform: translateY(-1px); box-shadow: var(--stin-hover); } /* Barevne kodovani kategorii predmetu (tridy nastavuje app.js). */ .hodina.kat-mat { border-left-color: var(--predmet-mat); } .hodina.kat-jaz { border-left-color: var(--predmet-jaz); } .hodina.kat-tv { border-left-color: var(--predmet-tv); } .hodina.kat-vych { border-left-color: var(--predmet-vych); } /* Zvyrazneni musi zustat citelne nad barevnym kodovanim. */ .hodina.zvyraz { background: var(--varovani-jemny); outline: 2px solid var(--varovani); } .hodina.tazena { opacity: .45; } td.cil-ok { outline: 2px dashed var(--uspech); outline-offset: -2px; background: var(--uspech-jemny); } td.cil-ne { background: var(--chyba-jemna); } td.cil-ne .duvod { color: var(--chyba); font-size: .68rem; } .legenda-wf { font-size: .75rem; color: var(--ink-600); margin-top: .7rem; } .legenda-wf span { display: inline-block; margin-right: 1rem; } /* ====== Hlasky a stav ====== */ .stav-box, .hlaska { font-size: .8rem; margin-top: .4rem; } .chyba { background: var(--chyba-jemna); border: 1px solid color-mix(in srgb, var(--chyba) 40%, transparent); color: var(--chyba); font-size: .8rem; padding: .35rem .6rem; border-radius: var(--radius-s); margin: .3rem 0; } .ok { background: var(--uspech-jemny); border: 1px solid color-mix(in srgb, var(--uspech) 40%, transparent); color: var(--uspech); font-size: .8rem; padding: .35rem .6rem; border-radius: var(--radius-s); margin: .3rem 0; } .info { color: var(--ink-600); } /* ====== Formulare pravidel ====== */ .formular { max-width: 640px; border: 1px solid var(--okraj); border-radius: var(--radius); padding: .8rem; margin-bottom: .8rem; background: var(--plocha); box-shadow: var(--stin); } .formular .fr { display: flex; gap: .5rem; margin-bottom: .45rem; align-items: center; } .formular label { width: 150px; font-size: .82rem; color: var(--ink-600); } .formular input, .formular select { flex: 1; } .soucet-ok { color: var(--uspech); font-weight: 700; } .soucet-spatne { color: var(--chyba); font-weight: 700; background: var(--chyba-jemna); border-radius: 4px; padding: 0 .25rem; } /* ====== Matice uvazku ====== */ td.bunka-matice { cursor: pointer; min-width: 90px; } td.bunka-matice:hover { background: var(--primar-jemny); } td.krizek { text-align: center; color: var(--ink-400); } /* ====== Dialogy ====== */ .dialog-vrstva { position: fixed; inset: 0; background: rgb(15 23 42 / .45); display: flex; align-items: center; justify-content: center; z-index: 10; } .dialog { max-width: 460px; width: 90%; border: 1px solid var(--okraj); border-radius: var(--radius); background: var(--plocha); color: var(--ink-900); padding: 1rem; box-shadow: var(--stin-hover); } .dialog h4 { font-size: .95rem; margin-bottom: .5rem; } .dialog label { display: block; font-size: .85rem; margin: .25rem 0; } .dialog-akce { margin-top: .6rem; display: flex; gap: .5rem; } .dialog-radek { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; } .dialog-radek input { width: 70px; } .dialog-radek input.jmeno { width: 130px; } .tyden-nadpis, .tyden-nadpis.tyden-nadpis { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); margin: .9rem 0 .4rem; } /* ====== AI chat ====== */ .chat-historie { min-height: 300px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--okraj); border-radius: var(--radius); padding: .7rem; background: var(--plocha); box-shadow: var(--stin); margin-bottom: .6rem; } .chat-zprava { margin-bottom: .6rem; } .chat-zprava .role { font-size: .72rem; text-transform: uppercase; color: var(--ink-400); font-weight: 700; margin-bottom: .15rem; } .chat-zprava.uzivatel .bublina { background: var(--primar-jemny); border: 1px solid color-mix(in srgb, var(--primar) 30%, transparent); } .chat-zprava.asistent .bublina { background: var(--pozadi); border: 1px solid var(--okraj); } .chat-zprava .bublina { border-radius: var(--radius-s); padding: .45rem .6rem; white-space: pre-wrap; word-wrap: break-word; font-size: .85rem; font-family: inherit; color: var(--ink-900); } .chat-zprava .bublina code { font-family: "Consolas", monospace; background: color-mix(in srgb, var(--ink-400) 25%, transparent); padding: 0 .2rem; border-radius: 3px; } .chat-premysli { color: var(--ink-600); font-style: italic; font-size: .85rem; } .chat-vstup { display: flex; gap: .5rem; align-items: flex-end; } .chat-vstup textarea { flex: 1; padding: .5rem; border: 1px solid var(--okraj); border-radius: var(--radius-s); font-size: .85rem; font-family: inherit; resize: vertical; background: var(--plocha); color: var(--ink-900); } .chat-vstup textarea:focus { outline: 2px solid var(--primar-jemny); border-color: var(--primar); } /* ====== Prihlaseni ====== */ .login-okno { background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--radius); box-shadow: var(--stin); max-width: 360px; margin: 8vh auto; padding: 1.5rem; } .login-okno h2 { font-size: clamp(1.1rem, 3vw, 1.3rem); color: var(--ink-900); margin-bottom: .2rem; } .login-podtitul { font-size: .85rem; color: var(--ink-600); margin-bottom: 1rem; } .login-okno form label { display: block; font-size: .82rem; color: var(--ink-600); margin-bottom: .7rem; } .login-okno form input { display: block; width: 100%; margin-top: .2rem; padding: .5rem; border: 1px solid var(--okraj); border-radius: var(--radius-s); font-size: .9rem; background: var(--plocha); color: var(--ink-900); } .login-okno form input:focus { outline: 2px solid var(--primar-jemny); border-color: var(--primar); } .login-okno .btn { width: 100%; justify-content: center; padding: .55rem; font-size: .9rem; margin-top: .3rem; } /* ==================================================================== Responzivita ==================================================================== */ /* < 860 px: panel se sbali do rozbalovaci sekce nad obsahem, zalozky se zhustí, e-mail se schova do avataru. */ @media (max-width: 860px) { .telo { grid-template-columns: 1fr; } .bocni { border-right: none; border-bottom: 1px solid var(--okraj); } .bocni .sekce { display: none; } .bocni.otevreny .sekce { display: block; } .panel-prepinac { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: none; font: inherit; font-weight: 600; color: var(--ink-600); cursor: pointer; padding: .2rem 0; } .lista { gap: .15rem; } .tab { padding: .4rem .6rem; font-size: .78rem; } .uzivatel { display: none; } /* jen avatar */ .avatar { display: grid; } .hlavni { padding: .7rem; } } /* < 560 px: mrizka roluje vodorovne uvnitr karty, sticky prvni sloupec, filtry na vice radku, dotykove terce >= 40 px. */ @media (max-width: 560px) { .radek-nastroju select, .radek-nastroju input[type=text], .filtry select, .filtry input { flex: 1 1 40%; } table { font-size: .7rem; } td { min-width: 64px; } /* Dotykove terce */ .btn { padding: .55rem .9rem; min-height: 40px; } .tab { min-height: 40px; } .btn-odhlasit { min-height: 40px; } .prepinac-rezim { width: 40px; height: 40px; } .verze { min-height: 40px; } }