/* ============================================================================
* EgAccessibilityButton / EgAccessibilityPanel - panel προσβασιμότητας (τύπου UserWay)
* ----------------------------------------------------------------------------
* Κάθε επιλογή είναι class eg-a11y-{key}-{επίπεδο} στο (τη βάζει το
* egritosA11y στο js/egritos-blazor.js, και πριν ξεκινήσει το Blazor). Εδώ
* ζουν όλα τα εφέ ως καθαρό CSS, και η εμφάνιση του κουμπιού/panel.
*
* Σύνδεση από το index.html της εφαρμογής:
*
*
* Η εφαρμογή σημαδεύει το περιεχόμενο της σελίδας με class="eg-a11y-content"
* (το στοιχείο γύρω από το @Body, ΟΧΙ το sidebar/header). Εκεί εφαρμόζονται το
* «Μεγαλύτερο κείμενο» (zoom) και η «Υψηλή αντίθεση».
*
* Χρώματα/διαστάσεις: --ega-* tokens, που η εφαρμογή ξαναγράφει στο δικό της CSS:
* .eg-a11y-trigger, .eg-a11y-panel { --ega-primary: #0b5; --ega-radius: 4px; }
*
* Γιατί zoom και όχι font-size: οι περισσότερες εφαρμογές έχουν font-size σε px,
* οπότε ένα font-size στο root δεν έχει επίδραση. Το zoom μπαίνει στο περιεχόμενο
* και όχι στο , γιατί στο θα φούσκωνε τα 100vh του layout και θα
* μετακινούσε τα popups. Όποιος θέλει να μεγεθύνει κι άλλο στοιχείο, γράφει
* .my-el { zoom: var(--eg-a11y-zoom, 1); }
* ========================================================================== */
.eg-a11y-trigger,
.eg-a11y-panel {
--ega-primary: #1e3548;
--ega-primary-hover: #2b4a63;
--ega-accent: #f0a13a;
--ega-bg: #f4f6f9;
--ega-surface: #ffffff;
--ega-text: #1b2433;
--ega-muted: #5b6778;
--ega-border: #d9dee6;
--ega-tile-on: #e8eef5;
--ega-radius: 12px;
--ega-width: 400px;
--ega-z: 100050;
--ega-sans: "Public Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.eg-a11y-trigger svg,
.eg-a11y-panel svg {
display: block;
width: 1em;
height: 1em;
}
/* ── Κουμπί ─────────────────────────────────────────────────────────────── */
.eg-a11y-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--ega-border);
border-radius: 9px;
background: var(--ega-surface);
color: var(--ega-primary);
font-size: 20px;
cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.eg-a11y-trigger:hover {
border-color: var(--ega-primary);
background: var(--ega-bg);
}
.eg-a11y-trigger:focus-visible {
outline: 3px solid var(--ega-accent);
outline-offset: 2px;
}
/* Υπάρχει ενεργή ρύθμιση → γεμάτο κουμπί, ώστε να φαίνεται ότι κάτι είναι αναμμένο. */
.eg-a11y-trigger.is-active {
border-color: var(--ega-primary);
background: var(--ega-primary);
color: #fff;
}
/* ── Panel ──────────────────────────────────────────────────────────────── */
.eg-a11y-backdrop {
position: fixed;
inset: 0;
z-index: 100040;
background: rgba(15, 23, 42, .18);
}
.eg-a11y-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: var(--ega-z);
display: flex;
flex-direction: column;
width: var(--ega-width);
max-width: 100vw;
background: var(--ega-bg);
box-shadow: -12px 0 32px rgba(15, 23, 42, .22);
color: var(--ega-text);
font-family: var(--ega-sans);
animation: eg-a11y-slide-in .18s ease-out;
}
@keyframes eg-a11y-slide-in {
from { transform: translateX(24px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.eg-a11y-sentinel {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.eg-a11y-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: var(--ega-primary);
color: #fff;
}
.eg-a11y-head-icon {
font-size: 26px;
color: var(--ega-accent);
}
.eg-a11y-head h2 {
flex: 1;
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: #fff;
}
.eg-a11y-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 18px;
cursor: pointer;
}
.eg-a11y-close:hover { background: rgba(255, 255, 255, .22); }
.eg-a11y-close:focus-visible { outline: 3px solid var(--ega-accent); outline-offset: 2px; }
.eg-a11y-body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.eg-a11y-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.eg-a11y-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 118px;
padding: 16px 10px 14px;
border: 2px solid transparent;
border-radius: var(--ega-radius);
background: var(--ega-surface);
box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
color: var(--ega-text);
font-family: inherit;
text-align: center;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.eg-a11y-tile:hover { border-color: #b9c6d6; }
.eg-a11y-tile:focus-visible { outline: 3px solid var(--ega-accent); outline-offset: 2px; }
.eg-a11y-tile.is-on {
border-color: var(--ega-primary);
background: var(--ega-tile-on);
}
.eg-a11y-tile-icon {
font-size: 28px;
color: #3d5068;
}
.eg-a11y-tile.is-on .eg-a11y-tile-icon { color: var(--ega-primary); }
/* σημάδι «ενεργό» πάνω δεξιά, όπως στο UserWay */
.eg-a11y-tile-check {
position: absolute;
top: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ega-primary);
color: #fff;
font-size: 12px;
}
.eg-a11y-tile-title {
font-size: 13.5px;
font-weight: 600;
line-height: 1.25;
}
.eg-a11y-tile-state {
font-size: 12px;
color: var(--ega-muted);
}
.eg-a11y-tile.is-on .eg-a11y-tile-state {
color: var(--ega-primary);
font-weight: 700;
}
.eg-a11y-dots {
display: flex;
gap: 4px;
}
.eg-a11y-dots span {
width: 18px;
height: 4px;
border-radius: 2px;
background: #d3dae3;
}
.eg-a11y-dots span.on { background: var(--ega-primary); }
.eg-a11y-foot {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 14px 16px 18px;
border-top: 1px solid #e1e5e8;
background: var(--ega-surface);
}
.eg-a11y-reset {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
border: 0;
border-radius: 9px;
background: var(--ega-primary);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.eg-a11y-reset:hover:not(:disabled) { background: var(--ega-primary-hover); }
.eg-a11y-reset:focus-visible { outline: 3px solid var(--ega-accent); outline-offset: 2px; }
.eg-a11y-reset:disabled { opacity: .45; cursor: default; }
.eg-a11y-note {
font-size: 12px;
color: var(--ega-muted);
text-align: center;
}
@media (max-width: 640px) {
.eg-a11y-trigger { width: 40px; height: 40px; }
.eg-a11y-panel { width: 100vw; }
}
/* ============================================================================
* Εφέ
* Οι κανόνες font/spacing εξαιρούν τα εικονίδια (, [class*="fa-"], .k-icon,
* svg) και τον κώδικα, αλλιώς τα icon fonts γίνονται τετραγωνάκια.
* ========================================================================== */
/* ── Αντίθεση 1: υψηλή αντίθεση ─────────────────────────────────────────── */
/* Σκουραίνει τα «αχνά» κείμενα και τα περιγράμματα (Telerik μέσω --kendo-color-*,
Bootstrap κλάσεις). Δεν αγγίζει φόντα, ώστε σκούρες κεφαλίδες να μένουν αναγνώσιμες. */
html.eg-a11y-contrast-1 {
--kendo-color-subtle: #000;
--kendo-color-on-app-surface: #000;
--kendo-color-on-base: #000;
--kendo-color-border: #000;
--kendo-color-border-alt: #000;
--bs-body-color: #000;
--bs-secondary-color: #000;
--bs-border-color: #000;
}
html.eg-a11y-contrast-1 body { color: #000; }
html.eg-a11y-contrast-1 :is(.eg-a11y-content, .k-window, .k-popup, .modal-content)
:is(.text-muted, .text-secondary, small, .small, label, .form-label, .k-label,
.k-column-title, p, td, th, li, dt, dd) {
color: #000 !important;
}
html.eg-a11y-contrast-1 :is(.eg-a11y-content, .k-window, .k-popup, .modal-content)
:is(input, select, textarea, .form-control, .k-input, .k-picker, .k-grid, .k-grid td, .k-grid th, .card) {
border-color: #000 !important;
}
html.eg-a11y-contrast-1 :is(.eg-a11y-content, .k-window, .k-popup, .modal-content) ::placeholder {
color: #333 !important;
opacity: 1;
}
html.eg-a11y-contrast-1 :is(.eg-a11y-content, .k-window, .k-popup, .modal-content) a[href]:not(.btn):not(.k-button) {
color: #0645ad !important;
}
/* ── Αντίθεση 2 (αντιστροφή) και κορεσμός ───────────────────────────────── */
/* Ένα filter στο με δύο «θέσεις», ώστε να συνδυάζονται και να πιάνουν και τα
popups. Αν μια εφαρμογή θέλει τρίτο filter, να το προσθέσει ως variable εδώ, όχι ως
νέο filter:, γιατί θα πανωγράψει τα άλλα. */
html.eg-a11y-contrast-2 { --eg-a11y-filter-invert: invert(1) hue-rotate(180deg); }
html.eg-a11y-saturation-1 { --eg-a11y-filter-saturate: saturate(.35); }
html.eg-a11y-saturation-2 { --eg-a11y-filter-saturate: grayscale(1); }
html.eg-a11y-contrast-2,
html.eg-a11y-saturation-1,
html.eg-a11y-saturation-2 {
filter: var(--eg-a11y-filter-invert, ) var(--eg-a11y-filter-saturate, );
background: #fff;
}
/* Οι φωτογραφίες ξαναντιστρέφονται, για να μη φαίνονται σαν αρνητικό. */
html.eg-a11y-contrast-2 :is(img, video, picture, .leaflet-tile-pane) {
filter: invert(1) hue-rotate(180deg);
}
/* ── Μεγαλύτερο κείμενο (zoom περιεχομένου) ─────────────────────────────── */
html.eg-a11y-zoom-1 { --eg-a11y-zoom: 1.1; }
html.eg-a11y-zoom-2 { --eg-a11y-zoom: 1.25; }
html.eg-a11y-zoom-3 { --eg-a11y-zoom: 1.4; }
/* Τα windows/modals παίρνουν zoom μόνο όταν ΔΕΝ είναι ήδη μέσα στο περιεχόμενο:
τα zoom πολλαπλασιάζονται, και ένα modal μέσα στη σελίδα θα γινόταν 1.4 × 1.4. */
html[class*="eg-a11y-zoom-"] .eg-a11y-content,
html[class*="eg-a11y-zoom-"] :is(.k-window-content, .modal-body):not(.eg-a11y-content *) {
zoom: var(--eg-a11y-zoom, 1);
}
/* ── Απόσταση κειμένου (WCAG 1.4.12: έως .12em / .16em) ──────────────────── */
html.eg-a11y-spacing-1 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
letter-spacing: .04em !important;
word-spacing: .08em !important;
}
html.eg-a11y-spacing-2 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
letter-spacing: .08em !important;
word-spacing: .16em !important;
}
html.eg-a11y-spacing-3 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
letter-spacing: .12em !important;
word-spacing: .24em !important;
}
/* ── Ύψος γραμμής ───────────────────────────────────────────────────────── */
html.eg-a11y-lineheight-1 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
line-height: 1.5 !important;
}
html.eg-a11y-lineheight-2 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
line-height: 1.75 !important;
}
html.eg-a11y-lineheight-3 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
line-height: 2 !important;
}
/* ── Ευανάγνωστη γραμματοσειρά ──────────────────────────────────────────── */
/* Verdana/Tahoma: ανοιχτά, διακριτά γράμματα, με ελληνικά, στο λειτουργικό
(κανένα αρχείο γραμματοσειράς να κατέβει). */
html.eg-a11y-font-1 body *:not(i, [class*="fa-"], .k-icon, .k-svg-icon, svg, svg *, code, pre, .monaco-editor *) {
font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}
/* ── Επισήμανση συνδέσμων ───────────────────────────────────────────────── */
html.eg-a11y-links-1 :is(a[href], [role="link"], .btn-link, .k-link) {
text-decoration: underline !important;
text-underline-offset: 3px;
outline: 2px solid #f0a13a !important;
outline-offset: 2px;
}
/* ── Παύση κινήσεων ─────────────────────────────────────────────────────── */
html.eg-a11y-motion-1 *,
html.eg-a11y-motion-1 *::before,
html.eg-a11y-motion-1 *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
/* ── Απόκρυψη εικόνων ───────────────────────────────────────────────────── */
/* visibility και όχι display: η διάταξη της σελίδας δεν μετακινείται. */
html.eg-a11y-images-1 :is(img, video, picture) {
visibility: hidden !important;
}
/* ── Μεγάλος κέρσορας ───────────────────────────────────────────────────── */
/* Μαύρο βέλος με λευκό περίγραμμα· σε ό,τι πατιέται γίνεται πορτοκαλί. */
html.eg-a11y-cursor-1,
html.eg-a11y-cursor-1 * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M5 3v33l8.5-8 6 13.5 6-2.6-6-13.4H31z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;
}
html.eg-a11y-cursor-1 :is(a[href], button:not(:disabled), [role="button"], label, select, summary,
.k-button, .k-link, .k-grid tr, input[type="checkbox"], input[type="radio"]) {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M5 3v33l8.5-8 6 13.5 6-2.6-6-13.4H31z' fill='%23f0a13a' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer !important;
}
/* ── Έντονη εστίαση (πληκτρολόγιο) ──────────────────────────────────────── */
/* .k-focus: τα Telerik components δείχνουν την εστίαση με class, όχι με :focus. */
html.eg-a11y-focus-1 :is(:focus-visible, .k-focus) {
outline: 3px solid #f0a13a !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 6px #1e3548 !important;
}