/* ------------------------------------------------------------------ Paleta - JEDYNE miejsce z kolorami calej strony. Wczytuja to WSZYSTKIE strony: spis lekcji, 404, cztery cwiczenia i strony bramki (PHP). Wczesniej te same wartosci byly wpisane w czterech miejscach i przy kazdej zmianie trzeba bylo pamietac o wszystkich - z ciemnym motywem byloby ich osiem. Motyw wybiera atrybut `data-motyw` na , ustawiany przez maly skrypt w jeszcze przed pierwszym malowaniem (patrz app-wspolne/motyw.js i src/components/SkryptMotywu.astro). Bez JavaScriptu zostaje motyw jasny - strona dziala tak jak dotad. Zasada nazw: `--granat` to kolor AKCENTU (odnosniki, naglowki, tla przyciskow), a `--na-kolorze` to tekst, ktory na tym akcencie lezy. W jasnym motywie akcent jest ciemny, a tekst na nim bialy; w ciemnym odwrotnie - akcent jest jasnoniebieski, a tekst na nim ciemny. Dlatego nigdzie nie wolno wpisac `color: #fff` na kolorowym tle. ------------------------------------------------------------------ */ :root { color-scheme: light; /* Marka. Granat jest ten sam, ktorego uzywa logo i strona iamfluent.pl */ --granat: #3b5998; --granat-ciemny: #2d4373; --granat-jasny: #eaeff7; --na-kolorze: #fff; /* Powierzchnie */ --tlo: #f1f3f4; --karta: #fff; --obwodka: #dfe3e8; /* Tekst */ --tekst: #2f2f2f; --tekst-drugi: #5a6472; /* Stany cwiczen - te same trzy kolory we wszystkich aplikacjach */ --zielen: #1e7e34; --czerwien: #d93025; /* Pierscien wokol pola z kursorem */ --pierscien: rgba(59, 89, 152, 0.25); --pierscien-zielen: rgba(30, 126, 52, 0.25); --pierscien-czerwien: rgba(217, 48, 37, 0.25); --cien: 0 1px 3px rgba(0, 0, 0, 0.08); --zaokraglenie: 8px; --szerokosc: 1400px; } /* ------------------------------------------------------------------ Motyw ciemny. Tlo jest granatowoszare, a nie czarne - czysta czern przy bialym tekscie daje smugi przy przewijaniu i meczy przy dluzszym czytaniu. Akcent musi byc na tyle jasny, zeby dalo sie nim pisac po ciemnym tle (odnosniki, naglowki), wiec przyciski robia sie jasnoniebieskie z ciemnym napisem - stad `--na-kolorze`. ------------------------------------------------------------------ */ :root[data-motyw="ciemny"] { color-scheme: dark; --granat: #8fb0ea; --granat-ciemny: #b7cbf3; --granat-jasny: #222c3e; --na-kolorze: #10151f; --tlo: #12161d; --karta: #1a202b; --obwodka: #2e3846; --tekst: #e7eaf0; --tekst-drugi: #a6b0c0; --zielen: #3fa45c; --czerwien: #e5645b; --pierscien: rgba(143, 176, 234, 0.35); --pierscien-zielen: rgba(63, 164, 92, 0.35); --pierscien-czerwien: rgba(229, 100, 91, 0.35); /* Na ciemnym tle cien nie jest widoczny jako cien, tylko jako zaciemnienie krawedzi - musi byc mocniejszy niz w jasnym motywie. */ --cien: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ------------------------------------------------------------------ Logo + przelacznik motywu. `.marka` to lewa strona paska naglowka - na wszystkich stronach ta sama, wiec styl jest tutaj, a nie w czterech arkuszach. ------------------------------------------------------------------ */ .marka { display: flex; align-items: center; gap: 12px; } /* Logo ma dwie wersje - jasna (ciemnogranatowa kreska) i ciemna (jasna kreska), przelaczane razem z motywem. Domyslnie widoczna jest jasna, ciemna czeka ukryta - `data-motyw` na jest ustawiany synchronicznie przed pierwszym malowaniem (patrz motyw.js), wiec nie ma mrugniecia. Selektor idzie przez `.marka`, a nie samo `.logo-ciemny` - strona glowna ma wlasny styl `.logo img { display: block }` o takiej samej specyficznosci (klasa + typ), ktory bez tego dodatkowego poziomu wygralby kolejnoscia w arkuszu i pokazywal oba loga naraz. */ .marka .logo-ciemny { display: none; } :root[data-motyw="ciemny"] .marka .logo-jasny { display: none; } :root[data-motyw="ciemny"] .marka .logo-ciemny { display: block; } /* ------------------------------------------------------------------ Pytanie o wznowienie przerwanego cwiczenia (app-wspolne/wznow.js). Okno buduje JavaScript, wiec w HTML-u nie ma po nim sladu - a styl stoi tutaj, bo pojawia sie na wszystkich czterech cwiczeniach, w tym na app4, ktora nie wczytuje motyw.css. ------------------------------------------------------------------ */ .wznow-tlo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); } .wznow-okno { box-sizing: border-box; width: min(44rem, 100%); background: var(--karta); color: var(--tekst); border: 1px solid var(--obwodka); border-radius: 1rem; padding: 2.4rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); font-family: "Roboto Condensed", "Roboto", sans-serif; text-align: left; } .wznow-okno h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.8rem; color: var(--tekst); } .wznow-okno p { font-size: 1.6rem; line-height: 1.45; color: var(--tekst-drugi); margin: 0 0 2rem; } .wznow-okno b { color: var(--granat); } .wznow-przyciski { display: flex; flex-wrap: wrap; gap: 1rem; } .wznow-przyciski button { flex: 1 1 16rem; font-family: inherit; font-size: 1.6rem; font-weight: 700; cursor: pointer; padding: 1.2rem 1.6rem; border-radius: 0.6rem; border: 1px solid var(--granat); } .wznow-glowny { background: var(--granat); color: var(--na-kolorze); } .wznow-glowny:hover { background: var(--granat-ciemny); border-color: var(--granat-ciemny); } .wznow-drugi { background: var(--karta); color: var(--granat); } .wznow-drugi:hover { background: var(--granat-jasny); } .wznow-przyciski button:focus-visible { outline: 3px solid var(--granat-ciemny); outline-offset: 2px; } /* ------------------------------------------------------------------ Przycisk konta - "Zaloguj kodem" albo "Wyloguj się". Stoi w pasku obok suwaka motywu i jest UKRYTY atrybutem `hidden`, dopoki app-wspolne/postep.js nie ustali, ktory z dwoch odnosnikow ma sens. Wlasna regula na [hidden] jest konieczna, bo `display` z tego arkusza bilby domyslne ukrycie przegladarki. Na waskim ekranie zostaje sama etykieta krotka: w gornym rzedzie stoi juz logo, suwak i licznik "Zadanie N z M", a kazdy dodatkowy znak spycha licznik do drugiego rzedu. ------------------------------------------------------------------ */ .konto { display: inline-block; padding: 5px 12px; border: 1px solid var(--obwodka); border-radius: 999px; background: var(--karta); color: var(--granat); font-family: "Roboto Condensed", "Roboto", sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; } .konto[hidden] { display: none; } .konto:hover, .konto:focus-visible { background: var(--granat-jasny); border-color: var(--granat); text-decoration: none; } .konto:focus-visible { outline: 3px solid var(--granat-ciemny); outline-offset: 2px; } .konto-krotkie { display: none; } @media (max-width: 639px) { .konto { font-size: 1.3rem; padding: 4px 10px; } .konto-pelne { display: none; } .konto-krotkie { display: inline; } } /* Ponizej 400 px zostaje sama ikona. Na ekranie 360 px w pasku stoi jeszcze logo i suwak (a w cwiczeniach licznik zadan), a samo "Zaloguj" zabieralo tam okolo 66 px - tyle, ze na spisie lekcji pasek konczyl sie dokladnie na krawedzi ekranu. Napis NIE znika z drzewa dostepnosci - jest tylko schowany przed okiem, wiec czytnik ekranu nadal czyta "Zaloguj" albo "Wyloguj", a przycisk ma normalna nazwe bez dodatkowego aria-label w trzech szablonach. Ikona to maska SVG malowana kolorem tekstu (`currentColor`), a nie plik graficzny ani emoji - tak samo jak slonce i ksiezyc na suwaku czy klodka na spisie lekcji. Dzieki `currentColor` sama zmienia kolor razem z motywem i z najechaniem myszka. */ @media (max-width: 399px) { .konto { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 36px; height: 36px; padding: 0; } .konto-krotkie { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .konto::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: center / contain no-repeat var(--ikona-konta); mask: center / contain no-repeat var(--ikona-konta); } /* Klucz - "wpisz kod z ksiazki". Celowo NIE klodka: klodka na spisie lekcji znaczy juz "lekcja zamknieta" i ten sam ksztalt w dwoch znaczeniach mylilby. Wartosc stoi na `.konto`, a nie na `.konto-wejdz`, zeby przycisk bez klasy stanu (np. ze starszej wersji brama/szablon.php w cache przegladarki) mial ikone, a nie pusty prostokat. */ .konto { --ikona-konta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='3.6'/%3E%3Cpath d='M10.6 12H20.5M17.5 12v3M20.5 12v2.5'/%3E%3C/svg%3E"); } /* Wyjscie: drzwi i strzalka na zewnatrz */ .konto-wyjdz { --ikona-konta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7'/%3E%3Cpath d='M17 8.5l3.5 3.5-3.5 3.5M20.5 12H9.5'/%3E%3C/svg%3E"); } } /* ------------------------------------------------------------------ Przelacznik motywu. Suwak: tor z galka, ktora w jasnym motywie jest sloncem (tarcza z osmioma promieniami), a w ciemnym sierpem ksiezyca. Jedno i drugie jest rysowane CSS-em - bez pliku graficznego i bez emoji, ktore na czesci systemow wyglada jak kolorowa naklejka (tak samo jak klodka na spisie lekcji). Sama `.galka` jest tylko pudelkiem 20x20, ktore przesuwa sie po torze; tarcze i promienie rysuja jej pseudoelementy, a sierp - `box-shadow` wpuszczony do srodka. Dzieki temu przesuwanie (`transform`) zostaje jedna, nieprzerwana animacja niezaleznie od tego, co akurat widac. Przycisk ma 44 px wysokosci razem z dopelnieniem - to najmniejszy sensowny cel dotyku. ------------------------------------------------------------------ */ .przelacznik-motywu { /* Domyslnie UKRYTY: odslania go dopiero motyw.js, dopisujac `.gotowy`. Bez JavaScriptu motywu i tak nie da sie przelaczyc, wiec martwy suwak tylko obiecywalby cos, czego nie ma. */ display: none; flex-shrink: 0; align-items: center; padding: 9px 4px; border: 0; background: none; cursor: pointer; } .przelacznik-motywu.gotowy { display: inline-flex; } /* Suwak jest