/* ========================================================================== Pasek narzędzi dostępności (OPZ: zmiana rozmiaru czcionki + wysoki kontrast) ========================================================================== */ .parlo-a11y { background: var(--wp--preset--color--surface, #F5F7FA); border-bottom: 1px solid var(--wp--preset--color--divider, #DDE2E8); font-size: 15px; } .parlo-a11y__inner { max-width: 1200px; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .parlo-a11y__group { display: flex; align-items: center; gap: 4px; } .parlo-a11y__label { color: var(--wp--preset--color--text-muted, #4B5563); margin-right: 4px; font-size: 14px; } /* 2.5.5 — cel dotykowy 44×44 px */ .parlo-a11y__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--wp--preset--color--contrast, #14181f); font-family: inherit; cursor: pointer; line-height: 1; } .parlo-a11y__btn:hover { background: var(--wp--preset--color--primary-tint, #E6F0FB); border-color: var(--wp--preset--color--primary, #0A6FE0); } /* 2.4.7 Focus Visible */ .parlo-a11y__btn:focus-visible { outline: 3px solid var(--wp--preset--color--primary, #0A6FE0); outline-offset: 2px; } /* Stan wybrany — NIE tylko kolorem (1.4.1): dochodzi obramowanie i pogrubienie */ .parlo-a11y__btn[aria-pressed="true"] { background: var(--wp--preset--color--primary-tint, #E6F0FB); border-color: var(--wp--preset--color--primary-dark, #0B4FA8); color: var(--wp--preset--color--primary-dark, #0B4FA8); font-weight: 700; } .parlo-a11y__a { font-weight: 700; line-height: 1; } .parlo-a11y__a--m { font-size: 14px; } .parlo-a11y__a--l { font-size: 17px; } .parlo-a11y__a--xl { font-size: 21px; } .parlo-a11y__btn--contrast svg { flex-shrink: 0; } .parlo-a11y__reset { font-size: 14px; color: var(--wp--preset--color--text-muted, #4B5563); text-decoration: underline; } @media (max-width: 640px) { .parlo-a11y__inner { justify-content: center; padding: 6px 12px; } .parlo-a11y__label, .parlo-a11y__btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ========================================================================== Skalowanie tekstu — przez font-size na . Motyw operuje jednostkami rem, więc skaluje się cały układ proporcjonalnie, bez nadpisywania pojedynczych reguł. ========================================================================== */ html[data-a11y-font="l"] { font-size: 125%; } html[data-a11y-font="xl"] { font-size: 150%; } /* Pasek zostaje w stałym rozmiarze — inaczej przy 150% zabiera pół ekranu */ html[data-a11y-font="l"] .parlo-a11y, html[data-a11y-font="xl"] .parlo-a11y { font-size: 15px; } /* Elementy o stałej szerokości nie nadążają za tekstem przy 125/150%. Znak graficzny „LOGO" i przycisk logowania dostają dopasowanie, żeby treść nie wychodziła poza obrys ani nie łamała się na dwie linie. */ html[data-a11y-font="l"] .imid-brand__mark, html[data-a11y-font="xl"] .imid-brand__mark { font-size: 0.6rem; letter-spacing: -0.02em; } html[data-a11y-font="l"] .imid-header__login, html[data-a11y-font="xl"] .imid-header__login { white-space: nowrap; padding: 0 0.875rem; } /* ========================================================================== Tryb wysokiego kontrastu — czarne tło, wszystkie pary ≥ 7:1 (biały 21.0, żółty 19.56, czerwony 7.57 — policzone, nie dobrane na oko) ========================================================================== */ html[data-a11y-contrast="1"] { --wp--preset--color--base: #000000; --wp--preset--color--contrast: #ffffff; --wp--preset--color--primary: #ffff00; --wp--preset--color--primary-dark: #ffff00; --wp--preset--color--primary-tint: #000000; --wp--preset--color--surface: #000000; --wp--preset--color--card: #000000; --wp--preset--color--border: #ffffff; --wp--preset--color--divider: #ffffff; --imid-band: #000000; --imid-band-border: #ffffff; --wp--preset--color--text-secondary: #ffffff; --wp--preset--color--text-muted: #ffffff; --wp--preset--color--success: #4ade80; --wp--preset--color--error: #ff6b6b; --wp--preset--color--footer-text: #ffffff; --wp--preset--color--footer-divider: #ffffff; } html[data-a11y-contrast="1"] body, html[data-a11y-contrast="1"] .wp-site-blocks, html[data-a11y-contrast="1"] .parlo-app, html[data-a11y-contrast="1"] .parlo-sidebar, html[data-a11y-contrast="1"] .parlo-topbar, html[data-a11y-contrast="1"] .imid-header, html[data-a11y-contrast="1"] .imid-footer, html[data-a11y-contrast="1"] .parlo-a11y { background: #000 !important; color: #fff !important; } html[data-a11y-contrast="1"] h1, html[data-a11y-contrast="1"] h2, html[data-a11y-contrast="1"] h3, html[data-a11y-contrast="1"] h4, html[data-a11y-contrast="1"] p, html[data-a11y-contrast="1"] li, html[data-a11y-contrast="1"] span, html[data-a11y-contrast="1"] label, html[data-a11y-contrast="1"] td, html[data-a11y-contrast="1"] th, html[data-a11y-contrast="1"] legend { color: #fff !important; } html[data-a11y-contrast="1"] a { color: #ffff00 !important; } /* Każdy element ma widoczną krawędź — bez cieni i subtelnych teł */ html[data-a11y-contrast="1"] .imid-tile, html[data-a11y-contrast="1"] .imid-step, html[data-a11y-contrast="1"] .parlo-card, html[data-a11y-contrast="1"] .parlo-course, html[data-a11y-contrast="1"] .pir-fieldset, html[data-a11y-contrast="1"] .parlo-a11y__btn, html[data-a11y-contrast="1"] input, html[data-a11y-contrast="1"] select, html[data-a11y-contrast="1"] textarea, html[data-a11y-contrast="1"] table { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } /* Przyciski akcji: odwrócone, żeby nie zlewały się z tłem */ html[data-a11y-contrast="1"] .parlo-btn--primary, html[data-a11y-contrast="1"] .imid-btn--primary, html[data-a11y-contrast="1"] input[type="submit"], html[data-a11y-contrast="1"] button[type="submit"] { background: #ffff00 !important; color: #000 !important; border: 2px solid #ffff00 !important; } html[data-a11y-contrast="1"] .parlo-btn--outline, html[data-a11y-contrast="1"] .imid-btn--outline { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } html[data-a11y-contrast="1"] .parlo-a11y__btn[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-a11y-contrast="1"] *:focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px; } /* Obrazy dekoracyjne przygaszone; logotypy UE MUSZĄ zachować barwy urzędowe */ html[data-a11y-contrast="1"] img:not([src*="fers-logotypy"]) { filter: grayscale(1) contrast(1.2); } html[data-a11y-contrast="1"] .imid-logos__inner, html[data-a11y-contrast="1"] .imid-footer__logos { background: #fff !important; padding: 1rem; } /* Elementy zastępcze (placeholdery) — bez nich jasne tło zjada tekst */ html[data-a11y-contrast="1"] .imid-placeholder, html[data-a11y-contrast="1"] .imid-hero__media, html[data-a11y-contrast="1"] .imid-brand__mark, html[data-a11y-contrast="1"] .parlo-sidebar__brand-mark { background: #000 !important; background-image: none !important; color: #fff !important; border: 2px dashed #fff !important; } @media (prefers-reduced-motion: reduce) { .parlo-a11y__btn { transition: none !important; } } /* ========================================================================== FORMULARZ I TABELE W TRYBIE WYSOKIEGO KONTRASTU -------------------------------------------------------------------------- Wcześniejsza reguła obejmowała `.pir-fieldset`, ale pomijała kontener `.pir-form` i odznakę `.pir-legend--badge` — karta formularza zostawała biała, a nagłówek sekcji ginął na jasnym tle. ========================================================================== */ html[data-a11y-contrast="1"] .pir-form, html[data-a11y-contrast="1"] .pir-fieldset, html[data-a11y-contrast="1"] .pir-grid, html[data-a11y-contrast="1"] .pir-foot, html[data-a11y-contrast="1"] .pir-consent, html[data-a11y-contrast="1"] .pir-upload, html[data-a11y-contrast="1"] .parlo-card { background: #000 !important; color: #fff !important; border-color: #fff !important; } /* Odznaka sekcji — odwrócona, żeby pozostała czytelna jako wyróżnik. Padding i odstęp muszą być jawne: w trybie kontrastu żółte tło obejmuje tekst ciasno i bez nich odznaka wyglądała na przyciętą. */ html[data-a11y-contrast="1"] .pir-legend, html[data-a11y-contrast="1"] .pir-legend--badge { background: #ffff00 !important; color: #000 !important; border: 2px solid #ffff00 !important; border-radius: 6px; padding: 0.35rem 0.75rem !important; margin-bottom: 0.5rem; line-height: 1.35 !important; display: inline-block; } html[data-a11y-contrast="1"] .pir-label, html[data-a11y-contrast="1"] .pir-hint, html[data-a11y-contrast="1"] .pir-choice__label { color: #fff !important; } html[data-a11y-contrast="1"] .pir-required { color: #ffff00 !important; } /* Komunikat błędu musi się odróżniać od zwykłego tekstu również tutaj */ html[data-a11y-contrast="1"] .pir-error { color: #ff6b6b !important; } html[data-a11y-contrast="1"] .pir-input, html[data-a11y-contrast="1"] .pir-textarea, html[data-a11y-contrast="1"] .pir-select { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="1"] .pir-submit, html[data-a11y-contrast="1"] .pir-upload__send { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } /* ========================================================================== PODMENU W TRYBIE KONTRASTU Nakładka podmenu dziedziczyła przezroczyste tło — pozycje menu głównego prześwitywały przez rozwiniętą listę. ========================================================================== */ html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container { background: #000 !important; border: 2px solid #ffff00 !important; box-shadow: none !important; } html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a { color: #ffff00 !important; } html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:hover, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:focus-visible { background: #ffff00 !important; color: #000 !important; } /* ========================================================================== ŻÓŁTE TŁO = CZARNY TEKST (bez wyjątków) -------------------------------------------------------------------------- 🚨 Biały tekst na żółtym #ffff00 daje kontrast **1,07** przy progu 4,5 — praktycznie nieczytelny. Czarny na tym samym tle to **19,56**. Problem pojawia się tam, gdzie żółte tło nakłada się na element, który kolor tekstu dziedziczy z reguły nadrzędnej (pozycje podmenu, przyciski w stanie aktywnym). Zamiast łatać każdy przypadek osobno, wymuszamy czarny tekst na wszystkim, co siedzi w żółtym elemencie. ========================================================================== */ html[data-a11y-contrast="1"] .pir-submit, html[data-a11y-contrast="1"] .pir-submit *, html[data-a11y-contrast="1"] .pir-upload__send, html[data-a11y-contrast="1"] .pir-upload__send *, html[data-a11y-contrast="1"] .pir-legend, html[data-a11y-contrast="1"] .pir-legend *, html[data-a11y-contrast="1"] .parlo-btn--primary, html[data-a11y-contrast="1"] .parlo-btn--primary *, html[data-a11y-contrast="1"] .imid-btn--primary, html[data-a11y-contrast="1"] .imid-btn--primary *, html[data-a11y-contrast="1"] .pih-reg-link, html[data-a11y-contrast="1"] .pih-reg-link *, html[data-a11y-contrast="1"] .parlo-a11y__btn[aria-pressed="true"], html[data-a11y-contrast="1"] .parlo-a11y__btn[aria-pressed="true"] *, html[data-a11y-contrast="1"] .pir-choice:has(input:checked), html[data-a11y-contrast="1"] .pir-choice:has(input:checked) *, html[data-a11y-contrast="1"] input[type="submit"], html[data-a11y-contrast="1"] button[type="submit"], /* Elementy dziedziczące żółty akcent z palety — numery kroków, znaczniki, odznaki. W trybie jasnym mają tło `primary`, które tutaj staje się żółte. */ html[data-a11y-contrast="1"] .imid-step__num, html[data-a11y-contrast="1"] .imid-step__num *, html[data-a11y-contrast="1"] .imid-tile__icon, html[data-a11y-contrast="1"] .imid-tile__icon *, html[data-a11y-contrast="1"] .parlo-badge, html[data-a11y-contrast="1"] .parlo-badge *, html[data-a11y-contrast="1"] .pir-badge, html[data-a11y-contrast="1"] .pir-badge * { color: #000 !important; } /* Podmenu: pozycja pod kursorem i w fokusie ma żółte tło — tekst czarny. Selektor obejmuje też element wewnętrzny, bo WP zawija etykietę w . */ html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:hover, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:hover *, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:focus-visible, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container a:focus-visible *, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container li:hover > a, html[data-a11y-contrast="1"] .imid-header .wp-block-navigation__submenu-container li:hover > a * { background: #ffff00 !important; color: #000 !important; } /* Zabezpieczenie ogólne: element, którego tło pochodzi ze zmiennej `primary` (w tym trybie żółtej), musi mieć czarny tekst — niezależnie od klasy. Bez tego każdy nowy komponent z akcentem wymagałby osobnej reguły. */ html[data-a11y-contrast="1"] [class*="__num"], html[data-a11y-contrast="1"] [class*="__num"] *, html[data-a11y-contrast="1"] [class*="badge"], html[data-a11y-contrast="1"] [class*="badge"] * { color: #000 !important; } /* ========================================================================== LINK POMIJANIA NAWIGACJI Pierwszy element osiągalny klawiszem Tab (2.4.1 Bypass Blocks). Ukryty do czasu fokusu, ale po ujawnieniu miał żółte tło i biały tekst — kontrast 1,07. Dla osoby nawigującej klawiaturą to jedyny element, który widzi na starcie strony. ========================================================================== */ html[data-a11y-contrast="1"] .parlo-skip-link, html[data-a11y-contrast="1"] .parlo-skip-link:focus, html[data-a11y-contrast="1"] .parlo-skip-link:focus-visible { background: #ffff00 !important; color: #000 !important; border: 2px solid #000 !important; outline: 3px solid #fff !important; outline-offset: 2px; } /* ========================================================================== LEARNDASH I PANEL KURSANTA W TRYBIE KONTRASTU -------------------------------------------------------------------------- LearnDash wnosi własne komponenty z jasnym tłem i kolorami zapisanymi w jego arkuszach. Bez tych reguł w trybie kontrastu wychodziło: biały tekst na żółtych przyciskach (1,00), żółty na jasnym pasku nawigacji (1,11) i biały na zielonym „Oznacz jako ukończone" (1,74). ========================================================================== */ /* Pasek nawigacji i status lekcji — jasne tło z rdzenia LD */ html[data-a11y-contrast="1"] .learndash-wrapper .ld-breadcrumbs, html[data-a11y-contrast="1"] .learndash-wrapper .ld-lesson-status, html[data-a11y-contrast="1"] .learndash-wrapper .ld-breadcrumbs *, html[data-a11y-contrast="1"] .learndash-wrapper .ld-lesson-status * { background: #000 !important; color: #fff !important; } html[data-a11y-contrast="1"] .learndash-wrapper .ld-breadcrumbs a, html[data-a11y-contrast="1"] .learndash-wrapper .ld-breadcrumbs a * { color: #ffff00 !important; } /* Przyciski nawigacji modułów — żółte tło wymaga czarnego tekstu */ html[data-a11y-contrast="1"] .learndash-wrapper .ld-button, html[data-a11y-contrast="1"] .learndash-wrapper .ld-button *, html[data-a11y-contrast="1"] .learndash-wrapper .ld-button:hover, html[data-a11y-contrast="1"] .learndash-wrapper .ld-button:hover * { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } /* „Oznacz jako ukończone" — zielony zachowany jako rozróżnienie funkcji, ale z czarnym tekstem (12,05 zamiast 1,74). */ html[data-a11y-contrast="1"] .learndash-wrapper .ld-button.ld-button-transparent, html[data-a11y-contrast="1"] .learndash-wrapper #sfwd-mark-complete input[type="submit"], html[data-a11y-contrast="1"] .learndash-wrapper .learndash_mark_complete_button, html[data-a11y-contrast="1"] .learndash-wrapper .learndash_mark_complete_button * { background: #4ade80 !important; color: #000 !important; border-color: #4ade80 !important; } /* Status „W TRAKCIE" i podobne znaczniki */ html[data-a11y-contrast="1"] .learndash-wrapper .ld-status, html[data-a11y-contrast="1"] .learndash-wrapper .ld-status * { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-a11y-contrast="1"] .learndash-wrapper .ld-status-complete, html[data-a11y-contrast="1"] .learndash-wrapper .ld-status-complete * { background: #4ade80 !important; color: #000 !important; } /* Lista modułów w panelu bocznym — znacznik bieżącego modułu */ html[data-a11y-contrast="1"] .parlo-step__mark, html[data-a11y-contrast="1"] .parlo-step__mark * { color: #000 !important; } html[data-a11y-contrast="1"] .parlo-step__mark--current { background: #ffff00 !important; color: #000 !important; } html[data-a11y-contrast="1"] .parlo-step__mark--done { background: #4ade80 !important; color: #000 !important; } /* Pasek postępu kursu */ html[data-a11y-contrast="1"] .learndash-wrapper .ld-progress-bar, html[data-a11y-contrast="1"] .parlo-progress { background: #000 !important; border: 2px solid #fff !important; } html[data-a11y-contrast="1"] .learndash-wrapper .ld-progress-bar-percentage, html[data-a11y-contrast="1"] .parlo-progress__fill { background: #ffff00 !important; } /* ========================================================================== ODZNAKI STANU NA LIŚCIE KURSÓW Reguła ogólna dla `[class*="badge"]` ustawiała tekst na czarny, ale tło zostawało z palety jasnej — stąd kontrast 1,00. Tło trzeba nadpisać razem z kolorem, w podziale na znaczenie odznaki. ========================================================================== */ html[data-a11y-contrast="1"] .parlo-badge { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; } html[data-a11y-contrast="1"] .parlo-badge--progress { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-a11y-contrast="1"] .parlo-badge--done { background: #4ade80 !important; color: #000 !important; border-color: #4ade80 !important; } html[data-a11y-contrast="1"] .parlo-badge--new { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } /* ========================================================================== STATUSY I LICZNIKI W PANELU ZGŁOSZEŃ Odznaki statusu mają w trybie jasnym pastelowe tła z `pir_status_styles()`. W kontraście trzeba je sprowadzić do palety czarno-żółto-zielonej, zachowując rozróżnienie znaczeń. ========================================================================== */ html[data-a11y-contrast="1"] .pir-status, html[data-a11y-contrast="1"] .pir-pill, html[data-a11y-contrast="1"] .pir-status *, html[data-a11y-contrast="1"] .pir-pill * { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Status wymagający działania — wyróżniony żółtym, jak w reszcie trybu */ html[data-a11y-contrast="1"] .pir-status--wymaga-uzupelnienia, html[data-a11y-contrast="1"] .pir-pill--pending { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-a11y-contrast="1"] .pir-status--zakwalifikowane { background: #4ade80 !important; color: #000 !important; border-color: #4ade80 !important; } html[data-a11y-contrast="1"] .pir-status--odrzucone { background: #000 !important; color: #ff6b6b !important; border-color: #ff6b6b !important; } /* ========================================================================== KOMUNIKATY I STRONICOWANIE W PANELU ========================================================================== */ /* Informacja „Dziennik nie podlega modyfikacji" — jasne tło ostrzeżenia */ html[data-a11y-contrast="1"] .pir-notice, html[data-a11y-contrast="1"] .pir-notice * { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="1"] .pir-notice--lock { border-left: 4px solid #ffff00 !important; } html[data-a11y-contrast="1"] .pir-notice * { border: 0 !important; } /* Bieżąca strona w stronicowaniu — wyróżniona tłem, więc tekst czarny */ html[data-a11y-contrast="1"] .is-current, html[data-a11y-contrast="1"] .pir-pagination .is-current, html[data-a11y-contrast="1"] .pir-pagination [aria-current="page"] { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-a11y-contrast="1"] .pir-pagination a { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } /* ========================================================================== PASEK DOSTĘPNOŚCI PRZYKLEJONY DO GÓRY -------------------------------------------------------------------------- Przy powiększeniu 300% pasek uciekał poza ekran razem z przewijaniem, więc żeby zmienić rozmiar tekstu lub kontrast trzeba było wracać na samą górę. To właśnie ten użytkownik korzysta z paska najczęściej. Zabezpieczenie na niskie okna: przyklejony pasek zabiera stałą część wysokości, a WCAG 1.4.10 wymaga, by treść pozostała użyteczna. Poniżej 400 px wysokości pasek wraca do normalnego przewijania. ========================================================================== */ @media (min-height: 400px) { .parlo-a11y { position: sticky; top: 0; z-index: 100; } /* Pasek administracyjny WordPressa sam jest przyklejony na szerokich ekranach i zasłoniłby pasek dostępności. */ .admin-bar .parlo-a11y { top: 32px; } } @media (min-height: 400px) and (max-width: 782px) { .admin-bar .parlo-a11y { top: 46px; } } /* Górny pasek panelu też jest przyklejony (style.css: position:sticky; top:0), więc po przyklejeniu paska dostępności oba trafiały na tę samą krawędź i nazwa użytkownika wchodziła pod paski A/kontrast. Pasek panelu musi kleić się PONIŻEJ paska dostępności, którego wysokość zmienia się wraz z rozmiarem tekstu, więc liczona jest zmienną ustawianą skryptem. Wartość domyślna odpowiada paskowi w rozmiarze podstawowym. */ @media (min-height: 400px) { .parlo-topbar { top: var(--parlo-a11y-h, 57px); } .admin-bar .parlo-topbar { top: calc( var(--parlo-a11y-h, 57px) + 32px ); } } @media (min-height: 400px) and (max-width: 782px) { .admin-bar .parlo-topbar { top: calc( var(--parlo-a11y-h, 57px) + 46px ); } } /* Do 600 px szerokości WordPress NIE przykleja swojego paska administracyjnego (#wpadminbar ma wtedy position:absolute) i pasek odjeżdża razem z treścią. Odstęp 46 px zostawał pusty, a w szczelinie nad paskiem dostępności przewijała się treść strony. Dotyczy tylko kont z paskiem administracyjnym (kadra); kursanci go nie mają. */ @media (min-height: 400px) and (max-width: 600px) { .admin-bar .parlo-a11y { top: 0; } .admin-bar .parlo-topbar { top: var(--parlo-a11y-h, 57px); } } /* ========================================================================== NAGŁÓWEK IMiD PRZYKLEJONY POD PASKIEM DOSTĘPNOŚCI (widok mobilny) -------------------------------------------------------------------------- Na telefonie po przewinięciu znikało menu, a z nim dostęp do nawigacji i konta. Przyklejony jest cały
, ale przesunięty w górę o wysokość paska logotypów UE (--imid-logos-h, mierzona skryptem w inc/a11y.php): logotypy odjeżdżają, zostaje linia z logo IMiD, menu i kontem. Warunek min-height jak przy pasku dostępności (WCAG 1.4.10). ========================================================================== */ @media (min-height: 400px) and (max-width: 1024px) { .imid-header { position: sticky; top: calc( var(--parlo-a11y-h, 57px) - var(--imid-logos-h, 0px) ); z-index: 99; } /* Otwarta nakładka menu jest wewnątrz nagłówka, więc dziedziczy jego poziom. Bez podniesienia przycisk zamykania trafiał pod pasek dostępności (z-index 100). */ html.has-modal-open .imid-header { z-index: 101; } } @media (min-height: 400px) and (min-width: 601px) and (max-width: 782px) { .admin-bar .imid-header { top: calc( var(--parlo-a11y-h, 57px) - var(--imid-logos-h, 0px) + 46px ); } } @media (min-height: 400px) and (min-width: 783px) and (max-width: 1024px) { .admin-bar .imid-header { top: calc( var(--parlo-a11y-h, 57px) - var(--imid-logos-h, 0px) + 32px ); } } /* ========================================================================== TESTY LEARNDASH W TRYBIE WYSOKIEGO KONTRASTU -------------------------------------------------------------------------- Kolory LearnDash (zielone i czerwone tła odpowiedzi, niebieskie przyciski) nie miały reguł dla tego trybu. Stan odpowiedzi rozróżnia styl obramowania i tekstowy znacznik, nie kolor. ========================================================================== */ html[data-a11y-contrast="1"] .wpProQuiz_content, html[data-a11y-contrast="1"] .wpProQuiz_content fieldset, html[data-a11y-contrast="1"] .wpProQuiz_content legend, html[data-a11y-contrast="1"] .wpProQuiz_questionListItem, html[data-a11y-contrast="1"] .wpProQuiz_questionListItem label, html[data-a11y-contrast="1"] .wpProQuiz_response, html[data-a11y-contrast="1"] .wpProQuiz_results, html[data-a11y-contrast="1"] .wpProQuiz_reviewQuestion { background: #000 !important; color: #ffff00 !important; } html[data-a11y-contrast="1"] .wpProQuiz_questionListItem { border: 2px solid #ffff00 !important; } html[data-a11y-contrast="1"] .wpProQuiz_questionListItem.wpProQuiz_answerCorrect { border: 4px solid #ffffff !important; } html[data-a11y-contrast="1"] .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect { border: 4px dashed #ffffff !important; } html[data-a11y-contrast="1"] .parlo-quiz-znacznik { color: #ffffff !important; } html[data-a11y-contrast="1"] .wpProQuiz_content input[type="button"], html[data-a11y-contrast="1"] .wpProQuiz_content .learndash-quiz-review__button { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } html[data-a11y-contrast="1"] .wpProQuiz_content input[type="button"]:hover, html[data-a11y-contrast="1"] .wpProQuiz_content input[type="button"]:focus-visible { background: #ffff00 !important; color: #000 !important; } html[data-a11y-contrast="1"] .wpProQuiz_question_text:focus-visible, html[data-a11y-contrast="1"] .wpProQuiz_results .wpProQuiz_header:focus-visible, html[data-a11y-contrast="1"] .wpProQuiz_questionListItem label:has(input:focus-visible) { outline: 3px solid #ffffff !important; } /* Pole wyniku („Uzyskałeś X z Y punktów”) i lista przeglądu pytań: LearnDash daje im jasne tło (#f0f3f6), przy którym tekst trybu kontrastu był nieczytelny. */ html[data-a11y-contrast="1"] .learndash-wrapper .wpProQuiz_points, html[data-a11y-contrast="1"] .learndash-wrapper .wpProQuiz_graded_points, html[data-a11y-contrast="1"] .learndash-wrapper .wpProQuiz_points--message, html[data-a11y-contrast="1"] .learndash-wrapper .wpProQuiz_content .wpProQuiz_box, html[data-a11y-contrast="1"] .learndash-wrapper .wpProQuiz_content .wpProQuiz_box li { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; }