/* =========================================================================== Účet — šablony /muj-ucet/ (woocommerce/myaccount/my-account.php, form-login.php, view-order.php) + sdílený sidebar parts/account-nav.php. Načítá se pro celý `is_account_page()` (inc/assets.php → `vlasimo_page_css_slug()` vrací 'ucet'), tedy i pro nepřihlášené přihlašovací stránky a pro všechny endpointy. Pořadí je za vlasimo.css → vlasimo-base.css → vlasimo-ui.css → parts/*.css, takže tabletová (769–1024) a mobilní (≤768) pravidla přesunutá sem z vlasimo-base.css nepotřebují `!important` — vyhrávají pořadím. Karty nástěnky (parts/account-*.php) jsou VE VLASTNÍM souboru assets/css/parts/account.css (vlna 24) a tenhle soubor na ně jen navazuje pojmenováním; dvě jeho třídy se rovnou přebírají, protože deklarace je znak po znaku stejná: `.vl-acct-ctitle` (nadpis karty 17/600/#16211c) a `.vl-acct-blk` (`display:block` na ikoně, aby nesedala na účaří). Hodnoty NEJSOU opsané z návrhu ani z kaskády, ale změřené na živém dev (computed styly všech prvků s inline stylem na /muj-ucet/, /vernostni-body/, /orders/, /edit-address/billing/ a /view-order/… ve třech šířkách). Dvě místa, kde by čtení CSS lhalo: 1. `.vl a { color:#16211c; text-decoration:none }` je (0,1,1), tedy SPECIFIČTĚJŠÍ než holá třída. Inline styl to přebíjel, třída ne — každý odkaz s vlastní barvou nebo podtržením je proto psaný `.vl a.trida` a zopakovaný pro `:hover` (jinak by ho `.vl a:hover { color:#0b7c3d }` na najetí přebarvil, což dnes kvůli inline stylu nedělá). 2. Nadpis h1 se na tabletu zmenšuje jen na nástěnce a endpointech (27 px), NE na přihlášení — tamní h1 má `letter-spacing:-.02em`, takže na pravidlo base.css psané pro `-.025em` nikdy nedosáhl. Rozdíl je ověřený měřením, ne odvozený. Migrace: tools/migrate/32-ucet.py =========================================================================== */ /* --- Hlavička stránky (nadpis + „Odhlásit se") ----------------------------- Stejný blok kreslí nástěnka i každý endpoint. `page-partner.php` má týž markup pořád inline, takže pravidla base.css na ty jehly ZŮSTÁVAJÍ. */ .vl-acct-head { max-width: 1440px; margin: 0 auto; padding: 28px 48px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .vl-acct-head__title { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.025em; color: #16211c; } .vl a.vl-acct-logout, .vl a.vl-acct-logout:hover { font-size: 13.5px; font-weight: 500; color: #8a887f; text-decoration: underline; text-underline-offset: 3px; } /* --- Mřížka stránky: sidebar + obsah --------------------------------------- */ .vl-acct-layout { max-width: 1440px; margin: 0 auto; padding: 20px 48px 64px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; } /* Pravý sloupec nástěnky a pravý sloupec endpointu se liší jen `min-width:0` (endpoint dostává obsah WooCommerce, který umí přetéct). */ .vl-acct-main { display: flex; flex-direction: column; gap: 18px; } .vl-acct-ep { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* --- Sidebar (parts/account-nav.php) --------------------------------------- Aktivní položka má RÁMEČEK, neaktivní ne — proto ho nese modifikátor a ne základní třída s průhledným okrajem: `border:1px solid transparent` by neaktivním položkám přidal 2 px výšky (48 → 50 px). */ .vl-acct-nav { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 16px; padding: 10px 0; position: sticky; top: 20px; } .vl-acct-nav__item { display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 12px 16px; border-radius: 11px; font-size: 15px; font-weight: 500; } .vl a.vl-acct-nav__item, .vl a.vl-acct-nav__item:hover { color: #3d443e; } .vl-acct-nav__item.is-active { background: #e4eee6; border: 1px solid #c6dbcb; font-weight: 600; } .vl a.vl-acct-nav__item.is-active, .vl a.vl-acct-nav__item.is-active:hover { color: #0b7c3d; } /* Žlutý štítek s počtem bodů. Barvu si nese sám — `.vl a` barví jen odkaz, span by ji zdědil. */ .vl-acct-nav__badge { background: #ffd21f; color: #16211c; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; } /* --- Bílé karty nástěnky (Poslední objednávka, Adresy, Detaily účtu) ------- */ .vl-acct-card { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 22px 26px; } .vl-acct-card__head { display: flex; align-items: baseline; justify-content: space-between; } .vl-acct-cbody { font-size: 13.5px; color: #3d443e; margin-top: 10px; line-height: 1.65; } /* Nadpis karty = `.vl-acct-ctitle` z parts/account.css (stejná deklarace). */ /* Zelený podtržený odkaz v hlavičce karty i „Zapomněli jste heslo" na přihlášení — jedna třída, `--sm` je jen o půl pixelu menší varianta u dvojice karet dole. */ .vl a.vl-acct-glink, .vl a.vl-acct-glink:hover { font-size: 13.5px; font-weight: 500; color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; } .vl a.vl-acct-glink--sm, .vl a.vl-acct-glink--sm:hover { font-size: 13px; } /* „Změna hesla" — tmavý odkaz uvnitř textu karty. */ .vl a.vl-acct-plink, .vl a.vl-acct-plink:hover { color: #3d443e; text-decoration: underline; text-underline-offset: 3px; } /* --- Řádek poslední objednávky (číslo | položky | stav | Objednat znovu) --- */ .vl-acct-order__row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0ede1; } .vl-acct-order__num { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #5d6b62; } .vl-acct-order__mid { min-width: 0; } .vl-acct-order__name { font-size: 14.5px; font-weight: 600; color: #16211c; } .vl-acct-order__meta { font-size: 12.5px; color: #8a887f; margin-top: 2px; } /* Štítek stavu sdílí `.h-acct-pill` (barvy podle `is-*`, `order:2` na tabletu). Inline styl mu přebíjel váhu 800 → 600 a přidával flex; opsané je to celé schválně, ať výsledek nezávisí na pořadí souborů. */ .vl-acct-order__pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600; } /* Menší varianta primárního CTA. Barvu i podtržení řeší `.vl-cta` (!important). */ .vl-cta.vl-acct-order__cta { height: 42px; padding: 0 18px; font-size: 13.5px; } /* --- Dvojice karet Adresy / Detaily účtu ----------------------------------- */ .vl-acct-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* --- Detail objednávky (view-order.php) ------------------------------------ Hlavička karty: štítek stavu + tlačítko sledování zásilky. `inline-flex` se jako položce flexboxu stejně zblokuje na `flex`, zapsané je proto, co bylo v markupu. */ .vl-acct-vo__head { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .vl a.vl-acct-vo__track, .vl a.vl-acct-vo__track:hover { font-weight: 600; color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; } /* Faktura pod souhrnem: linka nahoře navazuje na řádek Celkem, popisek vlevo a odkaz vpravo; `flex-wrap` je pro úzký mobil, kde se dvojice nevejde vedle sebe. Barvu odkazu je nutné psát jako `.vl a.` — samotná třída by prohrála s `.vl a { color:#16211c }` (specificita třída+element). */ .vl-acct-vo__inv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e3e0d4; font-size: 13.5px; color: #3d443e; } .vl a.vl-acct-vo__inv-link, .vl a.vl-acct-vo__inv-link:hover { font-weight: 600; color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; } /* =========================================================================== Přihlášení a registrace (form-login.php) — stav A návrhu. =========================================================================== */ .vl-acct-lhead { max-width: 1440px; margin: 0 auto; padding: 32px 48px 8px; } /* `-.02em`, ne `-.025em` jako nadpis nástěnky — proto se na tabletu nezmenšuje. */ .vl-acct-lhead__title { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: #16211c; } .vl-acct-lgrid { max-width: 1440px; margin: 0 auto; padding: 28px 48px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } /* Skutečný WC formulář obaluje kartu, ale nesmí být gridovou položkou. */ .vl-acct-lform { display: contents; } .vl-acct-lcard { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 30px 32px; } .vl-acct-lcard--reg { background: #f6f5ef; } .vl-acct-lcard__title { font-size: 21px; font-weight: 600; color: #16211c; } /* Sloupec polí; registrační má o 2 px menší odsazení shora. */ .vl-acct-lfields { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .vl-acct-lfields--reg { margin-top: 18px; } .vl-acct-label { display: block; font-size: 12.5px; font-weight: 600; color: #3d443e; margin-bottom: 6px; } /* Na dotyku vyhrává `input:…{font-size:16px!important}` z vlasimo.css — 14 px je tedy jen desktopová hodnota, stejně jako dosud. */ .vl-acct-input { width: 100%; border: 1px solid #d5d2c6; border-radius: 10px; padding: 13px 15px; font-size: 14px; color: #16211c; background: #fdfcf8; box-sizing: border-box; } .vl-acct-lrow { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; } .vl-acct-lremember { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #3d443e; cursor: pointer; } .vl-acct-check { width: 17px; height: 17px; accent-color: #0d8f46; } /* Souhlas u registrace stojí na prvním řádku odstavce, proto min-width a 1 px. */ .vl-acct-check--gdpr { min-width: 17px; margin-top: 1px; } .vl-acct-lsubmit { margin-top: 20px; height: 54px; width: 100%; background: #0d8f46; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; border-radius: 12px; border: 0; box-shadow: 0 4px 0 #075c2e; cursor: pointer; } .vl-acct-lnote { font-size: 13px; color: #8a887f; text-align: center; margin-top: 14px; } .vl-acct-rhead { display: flex; align-items: center; gap: 10px; } .vl-acct-rbadge { background: #ffd21f; color: #16211c; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; } .vl-acct-rbens { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .vl-acct-rben { display: flex; gap: 12px; align-items: flex-start; } .vl-acct-rben__ico { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: #e4eee6; border: 1px solid #c6dbcb; display: flex; align-items: center; justify-content: center; } .vl-acct-rben__text { font-size: 15px; color: #3d443e; line-height: 1.55; } /* Zvýraznění `*takto*` — tag se předává jako argument do `vlasimo_text()`. */ .vl-acct-b { font-weight: 600; color: #16211c; } .vl-acct-rgdpr { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13px; color: #3d443e; line-height: 1.5; } /* `color:inherit` musí být na `.vl a.…`, jinak odkaz zezelená z `.vl a`. */ .vl a.vl-acct-rgdpr__link, .vl a.vl-acct-rgdpr__link:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .vl-acct-rsubmit { margin-top: 14px; height: 54px; width: 100%; background: #16211c; color: #ffd21f; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; border-radius: 12px; border: 0; cursor: pointer; } /* Honeypot registrace (inc/register-guard.php). Odsunutí mimo plátno, ne `display:none` ani `hidden` — skryté pole část botů přeskakuje, a právě to, že ho vyplní, je celý smysl. Rozměr 1 px, ať neroztahuje kartu. */ .vl-reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Volba „u recenzí jen iniciála příjmení" v Údajích účtu (18. 9.). Poznámka pod ní je náhled výsledku, ne varování — proto neutrální šedá, ne žlutý rámeček .h-acct-comm__note, který v účtu hlásí důsledky souhlasu. */ .h-acct-name__priv { margin: 14px 0; } .h-acct-name__hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b7671; } .h-acct-name__hint b { font-weight: 700; color: #16211c; } /* ===== Tablet 769–1024 ===================================================== Přesun z vlasimo-base.css (blok „Tablet 769–1024 px pro všechny stránky"). Obal se stahuje na 1024 px a boční odsazení z 48 na 32 px; sidebar z 260 na 210 px. Nadpis přihlášení se schválně NEzmenšuje (viz hlavička souboru). =========================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { .vl-acct-head { max-width: 1024px; padding: 28px 32px 8px; } .vl-acct-head__title { font-size: 27px; } .vl-acct-layout { max-width: 1024px; padding: 20px 32px 64px; grid-template-columns: 210px minmax(0, 1fr); } .vl-acct-lhead { max-width: 1024px; padding: 32px 32px 8px; } .vl-acct-lgrid { max-width: 1024px; padding: 28px 32px 64px; } } /* ===== Mobil ≤768 ========================================================== Přesun z vlasimo-base.css (blok „MOBIL ≤768: obsah content stránek"). Boční odsazení kontejnerů se tu NEDOPISUJE: obecné `.woocommerce-account .vl-dcontent > div { padding-left/right:16px !important }` v base.css necílí na inline styl, takže platí dál a přebíjí i to, co je tady — proto je u `.vl-acct-head` a `.vl-acct-lgrid` napsané `20px 20px` (svislá hodnota je to jediné, co z toho projde), stejně jako to dělalo pravidlo `[style*="padding:28px 48px"]`. `.vl-acct-layout` si spodních 64 px drží — žádné pravidlo na jeho jehlu `padding:20px 48px 64px` v základu nemířilo. =========================================================================== */ @media (max-width: 768px) { .vl-acct-head { padding: 20px 20px; } .vl-acct-head__title { font-size: 25px; } /* Sidebar 260px + obsah vedle sebe se na telefon nevejde. `display:block` místo přepsání tracků: `minmax(0,1fr)` track stejně roztáhl obsah karet na jejich min-content a stránka přetékala. `grid-template-columns` se přesto přepisuje — je to vypočtená hodnota, kterou hlídá snímek. */ .vl-acct-layout { display: block; grid-template-columns: 1fr; } .vl-acct-layout > * + * { margin-top: 16px; } /* Menu účtu na mobilu: svislý seznam zabral půl obrazovky (David 8. 9., viz screenshot), takže se překlápí na vodorovný pás pilulek s posuvem — stejně jako `.h-acct-nav` na Herbasu. Hamburger by přidal klepnutí navíc a schoval, kde zákazník právě je; takhle je aktivní položka pořád vidět. */ .vl-acct-nav { position: static; display: flex; flex-direction: row; overflow-x: auto; border: 0; background: none; border-radius: 0; padding: 0 0 4px; gap: 8px; scrollbar-width: none; -ms-overflow-style: none; } .vl-acct-nav::-webkit-scrollbar { display: none; } .vl-acct-nav__item { flex: none; margin: 0; border: 1px solid #e3e0d4; background: #ffffff; border-radius: 999px; padding: 9px 16px; font-size: 13px; white-space: nowrap; } /* Čtyři sloupce řádku poslední objednávky se na 390 px nevejdou (štítek stavu vylézal ze stránky) — flex se zalomením a název položek na svůj vlastní první řádek. */ .vl-acct-order__row { display: flex; flex-wrap: wrap; gap: 10px 12px; } .vl-acct-order__mid { flex: 1 1 100%; order: -1; } /* `minmax(0,1fr)`, ne `1fr`: `1fr` má auto minimum, takže široký obsah (dlouhý e-mail) sloupec roztáhne místo aby se zmenšil. */ .vl-acct-duo { grid-template-columns: minmax(0, 1fr); } /* Přihlášení: nadpis stránky měl 22px/6px, na účtu se ještě stahuje na 14px/4px — obě pravidla base.css se skládala, tady je jen výsledek. */ .vl-acct-lhead { padding: 14px 20px 4px; } .vl-acct-lhead__title { font-size: 25px; } .vl-acct-lgrid { padding: 20px 20px; grid-template-columns: minmax(0, 1fr); } /* Návrh má uvnitř karet 30/32 px; na 390px telefonu z toho na obsah zbyde 286 px a nadpis stránky nad nimi visel o 28 px dál doprava než ony. */ .vl-acct-lcard { padding: 20px; } .vl-acct-lrow { flex-wrap: wrap; gap: 10px; } }