/* ═══════════════════════════════════════════════════════════════════ NÁHLEDY SKUTEČNÝCH OBRAZOVEK U MICROSOFTU — prefix msn- Příkaz č. 161. Vzniklo z tvrdého nálezu z předvádění (Jiří, 25. 8.): „ty tvé tlačítka co jsou v bílo-fialové STRAŠNĚ ZANIKAJÍ, a náhodní lidé, kterým jsem to ukazoval, jej ani nenašli." To není otázka vkusu. Řádek .prohlidka-tl je světlý text na světlém pozadí na DNĚ karty — má váhu patičky a čte se jako patička. Hlavní akce sekce se nedá nést typografií, která říká „drobná poznámka". DVA LÉKY, KAŽDÝ NA JINOU PŮLKU PROBLÉMU: 1) NAJÍT — náhled obrazovky. Obrázek obrazovky se sám nabízí ke zvětšení; nemusí se učit, že je klikací. Tlačítko se to učit musí. 2) POZNAT — tmavý pruh v barvě hera (#0B0616). Na světlé kartě je to jediná tmavá plocha, takže nemá s čím splynout. CELÁ DLAŽDICE JE JEDNO TLAČÍTKO. Dva cíle vedle sebe (obrázek zvlášť, tlačítko zvlášť) by soutěžily o tentýž klik a rozdělily pozornost přesně tam, kde ji potřebujeme celou. POZOR NA PRAVIDLO 6 Z PŘEHLEDU PŘÍKAZŮ: vlastní prefix vyřadí blok ze sousedských selektorů rytmu. Tenhle blok je uvnitř .duo, takže se ho to netýká — rytmus drží rodič. ═══════════════════════════════════════════════════════════════════ */ /* ── Dva sloupce místo jednoho přes celou šířku ──────────────────── .duo-siroke (1fr) je odsud pryč. Poměr 1,45 : 1 není libovolný: při kontejneru 1206 px a mezeře 44 px vychází pravý sloupec na ~470 px, což je 24,6 % šířky zdrojového snímku (1910 px) — tedy těch „cca 25 %" ze zadání. Levý zbytek 692 px unese baner. */ .duo-ms { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } @media (max-width: 1100px) { .duo-ms { grid-template-columns: 1fr; } } .msn { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .msn-nadradek { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ── Dlaždice ──────────────────────────────────────────────────── */ .msn-tl { display: block; width: 100%; padding: 0; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 10px -6px rgba(15, 23, 42, .22); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .msn-tl:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, .38); box-shadow: 0 16px 34px -14px rgba(124, 58, 237, .45); } .msn-tl:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } /* ── Rám obrazovky ──────────────────────────────────────────────── Lišta se třemi tečkami dělá ze zmenšeného snímku OBRAZOVKU. Bez ní je čtvrtinový snímek jen šedomodrá textura a čte se jako rozmazaný obrázek, ne jako okno aplikace. */ .msn-ramec { display: block; background: var(--bg); } .msn-lista { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #F1F5F9; border-bottom: 1px solid var(--line); } .msn-lista i { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; } .msn-lista i:first-child { background: #FCA5A5; } .msn-lista i:nth-child(2) { background: #FCD34D; } .msn-lista i:nth-child(3) { background: #86EFAC; } .msn-lista span { margin-left: 6px; font-size: 10.5px; font-weight: 650; color: var(--muted); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msn-plocha { position: relative; display: block; } .msn-plocha img { display: block; width: 100%; height: auto; } /* Závoj s lupou. V klidu neviditelný — snímek má být vidět celý. Po najetí řekne, co se stane, dřív než člověk klikne. */ .msn-zavoj { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 6, 22, .38); opacity: 0; transition: opacity .2s ease; } .msn-tl:hover .msn-zavoj, .msn-tl:focus-visible .msn-zavoj { opacity: 1; } .msn-lupa { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--text); box-shadow: 0 8px 22px -8px rgba(11, 6, 22, .6); } .msn-lupa svg { width: 22px; height: 22px; } /* ── Tmavý pruh — vlastní akce ──────────────────────────────────── Barva NENÍ zapsaná tady. Je v tokens.css jako --akce-tmava, protože týž pruh nese i tlačítko u WhatsAppu (.prohlidka-tl). Dvě kopie téže barvy ve dvou souborech se dřív nebo později rozejdou. Je to pozadí hera, tedy barva, kterou stránka už má — nová je jen role. Fialová se do ní vrací přes šipku; plný gradient CTA by z náhledu udělal reklamní tlačítko a přebil karty vedle. */ .msn-akce { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--akce-tmava); color: #fff; } .msn-text { display: block; min-width: 0; } .msn-text b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; line-height: 1.3; } .msn-text em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--akce-tlum); } .msn-sip { margin-left: auto; flex: none; /* violet-400: na #0B0616 dává 7,34 : 1 (viz tokens.css). Obě značkové fialové jsou laděné na bílou a tady by nesplnily AA. */ color: var(--violet-tmave-pozadi); transition: transform .2s ease, color .2s ease; } .msn-sip svg { display: block; width: 17px; height: 17px; } .msn-tl:hover .msn-sip { color: #fff; transform: translate(2px, -2px); } .msn-pod { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); } /* Na dotyku se nenajíždí — závoj by se nikdy neukázal a lupa by chyběla úplně. Proto je tam natrvalo, jen tlumeně. */ @media (hover: none) { .msn-zavoj { opacity: 1; background: rgba(11, 6, 22, .18); } .msn-lupa { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .msn-tl, .msn-zavoj, .msn-sip { transition: none; } .msn-tl:hover { transform: none; } } @media (max-width: 1100px) { .msn { margin-top: 26px; } } @media (max-width: 560px) { .msn-akce { padding: 12px 14px; } .msn-text b { font-size: 13px; } } /* ── DOROVNÁNÍ BANERU DO UŽŠÍHO SLOUPCE ──────────────────────────── Karta Microsoftu byla postavená na šířku ~1200 px. V sedmisetpixelovém sloupci se poměry rozešly: panel Teams je 284 px NEZÁVISLE na šířce karty, takže z okna Outlooku ukusoval 176 px z 533 — třetinu. Řádky pohovorů tím ztratily pravý okraj a přestaly být řádky. Původně panel překrýval okno z 18 %. Tohle je vrací zpátky: okno 82 % → 74 % scény Teams 284 → 260 px Překryv pak dělá ~19 % a plovoucí panel se zase čte jako plovoucí panel, ne jako ořez. Vše je schválně pod .duo-ms — mimo tenhle sloupec se karta chová dál přesně tak, jak byla navržená. */ .duo-ms .ms-banner .okno { width: 74%; } .duo-ms .ms-banner .rukopis { max-width: 300px; } .duo-ms .ms-banner .rukopis svg { width: 122px; height: 52px; } /* ── A JEDNA VADA, KTERÁ TU BYLA UŽ PŘEDTÍM ──────────────────────── Panel Teams měl width: 284px NATVRDO, bez jediného zlomu. Na telefonu (360 px) je okno Outlooku široké 215 px — panel je tedy ŠIRŠÍ NEŽ KALENDÁŘ, KTERÝ PŘEKRÝVÁ, a zakryje ho celý. Změřeno: při 360 px překryv 239 px na okno 215 px. Vodorovné přetečení nevzniklo, takže to hlídači nechytili — panel je uvnitř karty. Není to následek dvousloupcového rozvržení; bylo to tak i dřív. Řeší to min(): pevná hodnota platí, dokud se vejde, jinak ustoupí procentu. Panel tak nikdy nepřeroste okno, které má překrývat. */ .duo-ms .ms-banner .teams { width: min(260px, 48%); } @media (max-width: 1100px) { /* Pod zlomem je karta zase přes celou šířku — původní poměry platí. */ .duo-ms .ms-banner .okno { width: 82%; } .duo-ms .ms-banner .teams { width: min(284px, 48%); } .duo-ms .ms-banner .rukopis { max-width: 360px; } .duo-ms .ms-banner .rukopis svg { width: 146px; height: 62px; } } @media (max-width: 560px) { .duo-ms .ms-banner .rukopis { max-width: 62%; } .duo-ms .ms-banner .rukopis svg { width: 110px; height: 48px; } } /* ── POD 640 px SE PŘESTANE PŘEKRÝVAT ──────────────────────────────── Příkaz č. 188, výhrada V29. min() z předchozího kola srovnalo šířku panelu, ale ne to podstatné: panel pořád ležel na PÍSMENECH kalendáře. Změřeno po glyfech (Range.getClientRects), ne po schránkách prvků — .udalost b a .jina jsou bloky, takže jejich rámeček je široký jako řádek a text v něm končí dřív: 320 52,8 % 480 34,9 % 580 4,4 % 360 44,8 % 520 22,7 % 600 NIC 390 46,7 % 540 16,7 % 620 NIC 430 38,7 % 560 10,5 % 640 NIC Nad 600 px tedy panel leží nad prázdným místem uvnitř řádku a je všechno v pořádku. Problém je telefon a nejhorší není nejužší šířka, ale 480 px — dělá to zalomení textu, které se mezi šířkami mění. ⛔ POSUNOUT PANEL NEJDE. Při 360 px je okno kalendáře 215 px a panel 124 px na scéně široké 262 px; aby se minuly, musel by panel začít na 215 px a přetéct scénu o 77 px. Proto sesedne do toku pod kalendář. PROČ 640, KDYŽ PŘEKRYV KONČÍ NA 600: 600 je hodnota vytažená z měření a nikde jinde na webu není. 640 web už zná a nechává 40 px rezervy. Zlom má být takový, který někdo za rok pozná. */ @media (max-width: 640px) { /* .scena má padding-bottom 134px jako místo pro dva absolutně umístěné prvky. Když sesednou do toku, ta rezerva musí pryč, jinak po nich zůstane 134 px prázdna. */ .duo-ms .ms-banner .scena { padding-bottom: 0; } .duo-ms .ms-banner .teams { position: static; width: auto; margin-top: 14px; } .duo-ms .ms-banner .rukopis { position: static; max-width: none; margin-top: 10px; } }