gitea
76fbdefeaa
Testy / Testy warstwy logicznej (silnik) (pull_request) Successful in 11m52s
Testy / Testy warstwy prezentacji (dostęp do baz) (pull_request) Successful in 9m57s
Testy / Build obrazu silnika B (swisseph) (pull_request) Successful in 46s
Testy / Kontrola składni wszystkich warstw (pull_request) Successful in 19s
build / build (push) Successful in 1m10s
Testy / Testy warstwy logicznej (silnik) (push) Successful in 10m59s
Testy / Testy warstwy prezentacji (dostęp do baz) (push) Successful in 9m50s
Testy / Build obrazu silnika B (swisseph) (push) Successful in 42s
Testy / Kontrola składni wszystkich warstw (push) Successful in 19s
Ósma wskazówka partnerów, jako małe QoL przed PRE-22. Koło rysujemy w kolumnie tekstu, więc na mniejszym ekranie glify i stopnie robią się nieczytelne. Kliknięcie rozciąga wykres na całe okno, ponowne wraca do strony. SVG skaluje się bez utraty jakości, więc nie potrzeba drugiej wersji rysunku ani biblioteki. Wyjście z powiększenia na trzy sposoby: klik w wykres, klik w tło, Esc. Dostępne też z klawiatury (Enter/Spacja, focus-visible), bo inaczej obejrzenie szczegółów wymagałoby myszy. Dwie decyzje warte odnotowania: 1. WARSTWA. z-index 1100 CELOWO pomiędzy: ponad kontrolkami Leafleta (1000), ale PONIŻEJ okna postępu (1200). Gdy trwa pisanie horoskopu, log operacji ma zostać na wierzchu. Test pilnuje tej nierówności, bo to jedyna liczba tutaj, którą łatwo zmienić bez zastanowienia i zepsuć coś niewidocznego na oko. 2. ROZMIAR. Koło jest kwadratowe, więc ograniczamy je KRÓTSZYM bokiem okna (min(96vw, 92vh)) — inaczej na szerokim ekranie wystawałoby w pionie. Skrypt podpięty globalnie w base.html i osłonięty sprawdzeniem, czy koło w ogóle jest na stronie — zadziała też na przyszłej zakładce „Skompiluj" bez zmian. Przy powiększeniu blokujemy przewijanie strony pod spodem. Weryfikacja na żywej aplikacji, pomiarami w DOM: po kliknięciu .wheel-fig ma position:fixed, display:flex, z-index:1100; SVG rośnie z 460×460 do 662×653 przy oknie 1280×720, visibility visible; body dostaje overflow:hidden. Ponowne kliknięcie wraca do 460×460 i zdejmuje klasę. Zrzutu ekranu stanu powiększonego NIE mam — panel przeglądarki zaciął się w trakcie (puste klatki, viewport raportowany jako 0×0), więc opieram się na pomiarach i testach. Testy: 10 nowych. Całość: prezentacja 87 passed, logika 265 / 1 skip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
155 lines
9.1 KiB
CSS
155 lines
9.1 KiB
CSS
:root {
|
|
--bg: #0f1020;
|
|
--panel: #1a1c33;
|
|
--ink: #e8e8f0;
|
|
--muted: #9aa0c0;
|
|
--accent: #8b7bf0;
|
|
--line: #2a2d4a;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
|
|
font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
display: flex; justify-content: center; padding: 3rem 1rem;
|
|
}
|
|
main { width: 100%; max-width: 880px; }
|
|
h1 { margin: 0; font-size: 2rem; letter-spacing: .5px; }
|
|
.sub { color: var(--muted); margin: .25rem 0 2rem; }
|
|
|
|
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem; }
|
|
.topbar nav { display: flex; gap: .25rem; }
|
|
.topbar nav a { color: var(--muted); text-decoration: none; padding: .4rem .8rem; border-radius: 8px; border: 1px solid transparent; }
|
|
.topbar nav a:hover { color: var(--ink); }
|
|
.topbar nav a.active { color: #fff; background: var(--panel); border-color: var(--line); }
|
|
.foot { color: var(--muted); font-size: .8rem; margin-top: 2.5rem; opacity: .7; }
|
|
|
|
.grid { display: flex; gap: .6rem; flex-wrap: wrap; }
|
|
.grid label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .85rem; flex: 1; min-width: 9rem; }
|
|
.grid input { width: 100%; }
|
|
.loc { margin-top: .8rem; }
|
|
.loc summary { color: var(--muted); cursor: pointer; font-size: .85rem; margin-bottom: .6rem; }
|
|
.actions { display: flex; gap: .5rem; margin-top: 1rem; }
|
|
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
|
|
td.retro { color: #ff9b6a; font-weight: 600; }
|
|
/* Glify astrologiczne (LOG-22). Trzy warstwy obrony przed prezentacją emoji
|
|
(DAN-18: kolorowe kwadraty są nieczytelne i niesterowalne kolorem):
|
|
1) selektor wariantu U+FE0E w samych danych (glyphs.py),
|
|
2) font-variant-emoji:text — nowsza własność CSS,
|
|
3) font-family celujący w MONOCHROMATYCZNE fonty symboli PRZED jakimkolwiek
|
|
fontem emoji. Bez tego macOS/Chromium i tak sięga po Apple Color Emoji dla
|
|
znaków zodiaku (♈–♓), mimo VS15 — potwierdzone wizualnie. „Apple Symbols",
|
|
„Segoe UI Symbol", „Noto Sans Symbols2" mają te glify w wersji tekstowej. */
|
|
.glyph { font-size: 1.15em; line-height: 1; font-variant-emoji: text;
|
|
font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols2",
|
|
"DejaVu Sans", sans-serif; }
|
|
td.glyph { color: var(--accent); white-space: nowrap; }
|
|
/* Kosmogram (PRE-12) — SVG skaluje się do szerokości, ale nie rośnie w nieskończoność. */
|
|
.wheel-fig { margin: 1.5rem 0 .5rem; text-align: center; }
|
|
.wheel-fig svg.wheel { width: 100%; max-width: 460px; height: auto; }
|
|
.wheel-fig figcaption { margin-top: .4rem; }
|
|
/* glify wewnątrz SVG dziedziczą monochromatyczny stack fontów (DAN-18) */
|
|
svg.wheel text.glyph { font-size: inherit; }
|
|
|
|
/* Powiększenie na pełne okno (PRE-25). Kliknięcie rozciąga wykres na cały ekran,
|
|
ponowne wraca. z-index 1100 CELOWO pomiędzy: ponad kontrolki Leafleta (1000),
|
|
ale PONIŻEJ okna postępu (1200) — gdy trwa pisanie horoskopu, log operacji ma
|
|
zostać na wierzchu. */
|
|
.wheel-fig svg.wheel { cursor: zoom-in; }
|
|
.wheel-fig svg.wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
|
|
.wheel-fig.zoomed {
|
|
position: fixed; inset: 0; z-index: 1100; margin: 0;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: .5rem; padding: 1rem; background: var(--bg);
|
|
}
|
|
/* min() po obu wymiarach: koło jest kwadratowe, więc ograniczamy je krótszym
|
|
bokiem okna — inaczej na szerokim ekranie wystawałoby w pionie. */
|
|
.wheel-fig.zoomed svg.wheel {
|
|
max-width: min(96vw, 92vh); width: min(96vw, 92vh); height: auto; cursor: zoom-out;
|
|
}
|
|
body.wheel-zoom-open { overflow: hidden; } /* nie przewijaj treści pod spodem */
|
|
form { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; }
|
|
.row { display: flex; gap: .5rem; }
|
|
.row input[type=text] { flex: 1; }
|
|
input, select, button {
|
|
font: inherit; padding: .6rem .75rem; border-radius: 8px;
|
|
border: 1px solid var(--line); background: #12132a; color: var(--ink);
|
|
}
|
|
button { background: var(--accent); color: #fff; border: none; cursor: pointer; padding-inline: 1.25rem; }
|
|
button:hover { filter: brightness(1.1); }
|
|
.opts { display: flex; gap: 1.5rem; margin-top: .75rem; color: var(--muted); align-items: center; }
|
|
.opts input[type=number] { width: 5rem; }
|
|
.meta { color: var(--muted); margin: 1.5rem 0 .5rem; font-size: .9rem; }
|
|
.error { background: #3a1320; border: 1px solid #6a2233; color: #ffb3c0; padding: .75rem 1rem; border-radius: 8px; margin-top: 1.5rem; }
|
|
.empty { color: var(--muted); }
|
|
table { width: 100%; border-collapse: collapse; margin-top: .5rem; background: var(--panel); border-radius: 12px; overflow: hidden; }
|
|
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
|
|
th { color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
|
|
tr:last-child td { border-bottom: none; }
|
|
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: .85rem; }
|
|
.nowrap { white-space: nowrap; }
|
|
.sig-item { margin-top: 1.25rem; }
|
|
.sig-head { padding: .5rem 0; }
|
|
.samples { margin-top: .3rem; }
|
|
.samples td { font-size: .92rem; vertical-align: top; }
|
|
.samples td.nowrap { color: var(--accent); padding-right: 1rem; }
|
|
.facet { margin: .4rem 0 .6rem 1rem; }
|
|
.facet-head { color: var(--ink); font-size: .9rem; }
|
|
.badge { display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: 6px;
|
|
background: #2a2d4a; color: var(--accent); margin-left: .3rem; }
|
|
.samples td.sig { color: var(--accent); padding-right: 1rem; cursor: help; }
|
|
|
|
/* Wyszukiwarka lokalizacji + mapa (OSM/Leaflet) */
|
|
.geo { margin-top: .9rem; }
|
|
.geo-search { display: flex; gap: .5rem; flex-wrap: wrap; }
|
|
.geo-search input[type=search] { flex: 1; min-width: 12rem; }
|
|
.geo-results { list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--line);
|
|
border-radius: 8px; overflow: hidden; background: #12132a; max-height: 14rem; overflow-y: auto; }
|
|
.geo-results li { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid var(--line); font-size: .9rem; }
|
|
.geo-results li:last-child { border-bottom: none; }
|
|
.geo-results li:hover { background: var(--panel); color: #fff; }
|
|
.geo-map { height: 320px; margin-top: .6rem; border: 1px solid var(--line); border-radius: 10px; }
|
|
.geo-map[hidden] { display: none; }
|
|
.geo-attrib { margin: .4rem 0 0; }
|
|
.geo-attrib a { color: var(--accent); }
|
|
.geo-pin { font-size: 20px; line-height: 24px; text-align: center; }
|
|
/* kafelki OSM są jasne — trzymamy kontrolki czytelne na ciemnym tle */
|
|
.leaflet-control-attribution { font-size: .68rem; }
|
|
|
|
/* Generator promptu do LLM (LOG-29/30) */
|
|
textarea.prompt { width: 100%; margin-top: .5rem; padding: .7rem .8rem; box-sizing: border-box;
|
|
background: #12132a; color: var(--ink); border: 1px solid var(--line);
|
|
border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: .82rem; line-height: 1.45; resize: vertical; white-space: pre; }
|
|
textarea.prompt:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
|
|
/* Okno postępu przy generowaniu horoskopu */
|
|
/* z-index ponad Leaflet: jego kontrolki (.leaflet-top/.leaflet-bottom — zoom,
|
|
atrybucja) siedzą na z-index:1000 i — bo .leaflet-container nie tworzy własnego
|
|
kontekstu stackowania — trafiają wprost do korzenia. Przy z-index:50 mapa
|
|
wychodziła NA WIERZCH modala. 1200 daje zapas nad 1000. */
|
|
.progress-overlay { position: fixed; inset: 0; background: rgba(8,9,20,.72);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 1200; padding: 1rem; }
|
|
.progress-overlay[hidden] { display: none; }
|
|
.progress-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
|
|
padding: 1rem 1.1rem; width: min(38rem, 100%); box-shadow: 0 18px 48px rgba(0,0,0,.45); }
|
|
.progress-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
|
|
.progress-clock { margin-left: auto; font-family: ui-monospace, Menlo, monospace;
|
|
color: var(--muted); font-size: .9rem; }
|
|
.progress-spinner { width: 14px; height: 14px; border-radius: 50%; flex: none;
|
|
border: 2px solid var(--line); border-top-color: var(--accent);
|
|
animation: spin .8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) { .progress-spinner { animation: none; } }
|
|
.progress-log { list-style: none; margin: 0 0 .6rem; padding: .6rem .7rem;
|
|
background: #12132a; border: 1px solid var(--line); border-radius: 10px;
|
|
max-height: 15rem; overflow-y: auto;
|
|
font-family: ui-monospace, Menlo, monospace; font-size: .78rem; line-height: 1.6; }
|
|
.progress-log li { color: var(--ink); white-space: pre-wrap; }
|
|
.progress-log li.log-ok { color: #7fd18b; }
|
|
.progress-log li.log-warn { color: #e0c060; }
|
|
.progress-log li.log-err { color: #ef6b6b; }
|