/* === wwwroot/css/a11y.css === Əlçatanlıq ayarlarının interfeysə TƏTBİQ olunan hissəsi. ══════════════════════════════════════════════════════════════════════════ 🔴 BU FAYL BİR DƏFƏ SƏHV YAZILDI — SƏBƏBİNİ OXU, TƏKRARLAMA (2026-08-05) ══════════════════════════════════════════════════════════════════════════ İlk versiya belə yazılmışdı: html { line-height: var(--a11y-line-height); } html { letter-spacing: var(--a11y-letter-spacing); } html.a11y-contrast-high { --mud-palette-text-primary: #000; } HEÇ BİRİ İŞLƏMİRDİ. Səbəb: MudBlazor mətnin bütün ölçülərini ÖZ CSS dəyişənləri ilə idarə edir və onları hər elementə BİRBAŞA yazır: body { line-height: var(--mud-typography-default-lineheight); ... } .mud-typography-body1 { letter-spacing: var(--mud-typography-body1-letterspacing); ... } Yəni `html`-ə yazılan `line-height` irsiyyətlə gəlir, amma `body`-dəki birbaşa təyinat onu ƏVƏZ EDİR. Nəticə: ayar dəyişir, ekranda heç nə olmur. DOĞRU YOL: MudBlazor-un ÖZ dəyişənlərini əvəz etmək. `MudThemeProvider` onları runtime-da `:root`-a yazır; `html.sinif` selektoru (0,1,1) `:root`-dan (0,1,0) daha spesifikdir → bizim qalib gəlir. ⚠️ Dəyişən adlarını `MudBlazor.min.css`-dən yoxlamadan dəyişməyin. MudBlazor 9-da 14 tipoqrafiya şkalası var — hamısı aşağıda sadalanıb. Biri unudulsa həmin mətn növü ayara REAKSİYA VERMİR (məsələn düymələr böyüyür, cədvəl başlıqları böyümür). ⚠️ Bu fayl QLOBALDIR, scoped CSS deyil — və olmamalıdır: MudBlazor dialoq/menyu/snackbar-ı `` altında AYRI qatda render edir, scoped CSS onlara çatmır. ══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 1. MƏTN ÖLÇÜSÜ ═══════════════════════════════════════════════════════════ `html`-in `font-size`-ı dəyişdirilir. MudBlazor bütün ölçüləri `rem`-lə verir, ona görə mətn, boşluq və komponent hündürlükləri BİRLİKDƏ böyüyür — yəni düzüm dağılmır, sadəcə miqyaslanır. (`app.css` `html`-ə `font-size` yazmır — yoxlanılıb.) */ html.a11y-scale-1 { font-size: 112.5%; } /* 16 → 18px */ html.a11y-scale-2 { font-size: 125%; } /* 16 → 20px */ html.a11y-scale-3 { font-size: 140%; } /* 16 → 22.4px */ /* ═══════════════════════════════════════════════════════════ 2. SƏTİR ARALIĞI ═══════════════════════════════════════════════════════════ Mütləq dəyər verilir, `calc(var(--eyni-deyisen) * 1.25)` YOX — dəyişənin özünə istinad dairəvi olur və CSS qaydanı tamamilə atır. */ html.a11y-line-wide { --mud-typography-default-lineheight: 1.9; --mud-typography-body1-lineheight: 1.9; --mud-typography-body2-lineheight: 1.9; --mud-typography-subtitle1-lineheight: 1.85; --mud-typography-subtitle2-lineheight: 1.85; --mud-typography-caption-lineheight: 1.8; --mud-typography-overline-lineheight: 1.8; --mud-typography-button-lineheight: 1.75; /* Başlıqlarda 1.9 çox boş görünür — böyük mətnə az aralıq bəs edir. */ --mud-typography-h1-lineheight: 1.35; --mud-typography-h2-lineheight: 1.35; --mud-typography-h3-lineheight: 1.4; --mud-typography-h4-lineheight: 1.4; --mud-typography-h5-lineheight: 1.45; --mud-typography-h6-lineheight: 1.45; } /* ═══════════════════════════════════════════════════════════ 3. HƏRF ARALIĞI ═══════════════════════════════════════════════════════════ */ html.a11y-letter-wide { --mud-typography-default-letterspacing: .055em; --mud-typography-body1-letterspacing: .055em; --mud-typography-body2-letterspacing: .055em; --mud-typography-subtitle1-letterspacing: .05em; --mud-typography-subtitle2-letterspacing: .05em; --mud-typography-caption-letterspacing: .06em; --mud-typography-overline-letterspacing: .12em; --mud-typography-button-letterspacing: .06em; /* Böyük başlıqda geniş aralıq sözü parçalayır — az verilir. */ --mud-typography-h1-letterspacing: .01em; --mud-typography-h2-letterspacing: .01em; --mud-typography-h3-letterspacing: .015em; --mud-typography-h4-letterspacing: .02em; --mud-typography-h5-letterspacing: .025em; --mud-typography-h6-letterspacing: .025em; } /* Rəqəm sahələrində hərf aralığı ZƏRƏRLİDİR — telefon nömrəsi və məbləğ oxunmur, resepsiyonist səhv diktə edir. */ html.a11y-letter-wide input, html.a11y-letter-wide .mud-input-slot, html.a11y-letter-wide [class*="tabular"] { letter-spacing: normal !important; } /* ═══════════════════════════════════════════════════════════ 4. YÜKSƏK KONTRAST ═══════════════════════════════════════════════════════════ Material dizaynın iki əsas şikayəti: soluq ikinci dərəcəli mətn və çətin görünən ayırıcı xətlər. İkisi də düzəldilir. 🔴 RƏNGLƏR SABİT YAZILMIR — `text-primary`-ə istinad edilir. Səbəb: qaranlıq temada sabit qara mətn qara fonda GÖRÜNMÜR. Bu yolla qayda hər iki temada özünü düzəldir. */ html.a11y-contrast-high { --mud-palette-text-secondary: var(--mud-palette-text-primary); --mud-palette-text-disabled: var(--mud-palette-text-primary); --mud-palette-lines-default: var(--mud-palette-text-primary); --mud-palette-lines-inputs: var(--mud-palette-text-primary); --mud-palette-divider: var(--mud-palette-text-primary); --mud-palette-divider-light: var(--mud-palette-text-primary); } /* `text-primary`-nin özünü tam kontrasta çəkirik. Tema istiqamətini `a11y.js` müəyyən edir (fonun parlaqlığına baxır) — MudBlazor qaranlıq rejimi qlobal sinif ilə bildirmir, ona görə özümüz hesablayırıq. */ html.a11y-contrast-high:not(.a11y-dark) { --mud-palette-text-primary: #000000; } html.a11y-contrast-high.a11y-dark { --mud-palette-text-primary: #ffffff; } /* Kartların sərhədi görünsün — kontrast rejimində "üzən" kart pis oxunur. */ html.a11y-contrast-high .mud-paper, html.a11y-contrast-high .mud-card { border: 1px solid var(--mud-palette-divider); } /* ═══════════════════════════════════════════════════════════ 5. RƏNGDƏN ASILILIĞI AZALT ═══════════════════════════════════════════════════════════ ⚠️ Rəng korluğunu CSS filtri ilə "düzəltmək" MÜMKÜN DEYİL. Bu rejimin gördüyü iş: məlumatın YALNIZ rənglə çatdırılmasını dayandırmaq — forma və qalınlıq da fərq yaratsın. */ html.a11y-color-safe .mud-chip { border: 2px solid currentColor !important; font-weight: 600 !important; } html.a11y-color-safe .mud-alert { border-left: 6px solid currentColor !important; } /* Status nöqtələri (badge) tək başına rəngdir — sərhəd forma qazandırır. */ html.a11y-color-safe .mud-badge { outline: 2px solid var(--mud-palette-surface); outline-offset: 0; } /* Cədvəldə seçili sətir yalnız fon rəngi ilə seçilirdi. */ html.a11y-color-safe .mud-table-row.mud-selected-row, html.a11y-color-safe .mud-selected-item { box-shadow: inset 4px 0 0 0 currentColor; } /* ═══════════════════════════════════════════════════════════ 6. HƏRƏKƏTİ AZALT ═══════════════════════════════════════════════════════════ */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* İstifadəçi OS səviyyəsində istəyibsə ayar olmadan da hörmət edirik. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ═══════════════════════════════════════════════════════════ 7. LİNKLƏRİ ALTDAN XƏTLƏ ═══════════════════════════════════════════════════════════ Link mətndən YALNIZ rənglə fərqlənməməlidir (WCAG 1.4.1). */ html.a11y-underline-links a:not(.mud-button-root):not(.mud-nav-link), html.a11y-underline-links .mud-link { text-decoration: underline !important; text-underline-offset: .2em; } /* ═══════════════════════════════════════════════════════════ 8. KLAVİATURA FOKUSU ═══════════════════════════════════════════════════════════ `:focus-visible` seçilib, `:focus` YOX — əks halda siçanla hər klikdə çərçivə çıxır və istifadəçi onu "qırıq dizayn" kimi qəbul edir. */ html.a11y-focus-visible :focus-visible { outline: 3px solid var(--mud-palette-primary) !important; outline-offset: 2px !important; border-radius: 3px; } /* ═══════════════════════════════════════════════════════════ 9. ÜZƏN DÜYMƏ ═══════════════════════════════════════════════════════════ z-index QƏSDƏN 1300-dür: MudBlazor dialoqundan (1400) və snackbar-dan (1500) AŞAĞI — dialoq açıqkən düymə onun üstünə çıxmamalıdır. */ .a11y-launcher { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1300; } @media print { .a11y-launcher { display: none !important; } }