/** * Accessibility Panel Styles * Based on Readabler design with light theme by default * * @package Everyone_Accessibility_Suite * @version 1.0.0 */ /* CSS Variables - Light Theme by Default */ :root { --evas-bg: #ffffff; --evas-text: #2c3e50; --evas-color: #2271b1; --evas-color-hover: #135e96; --evas-color-transparent: rgba(34, 113, 177, 0.1); --evas-border-color: rgba(44, 62, 80, 0.1); /* Surfaces for the panel's own chrome (section headings, spinner track, -/+ buttons). The Customizer module recomputes these from the active colour scheme; these static values are the fallback for when that module is switched off. Kept as tints of the text colour rather than fixed greys so both sets behave the same way. */ --evas-surface: rgba(44, 62, 80, 0.06); --evas-surface-strong: rgba(44, 62, 80, 0.1); --evas-surface-raised: #ffffff; --evas-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); --evas-border-radius: 16px; --evas-animate: 0.3s; } /* Panel Container */ #evas-panel { position: fixed; /* z-index scale (highest to lowest): .evas-af-hint 1000000 > toggle/ modals/toasts/#evas-useful-links 999999 > this panel 999998 > ambient helper overlays 999993-999997 (reading guide/mask, text magnifier, voice indicator - see features.css/voice-navigation.css). Useful Links sits at the toggle's tier rather than with the other helper overlays because it's an interactive flyout opened FROM inside the panel that the user needs to read immediately - unlike the ambient overlays (which are ok sitting behind an open panel), hiding it behind the panel makes the feature look broken. */ z-index: 999998; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; filter: none !important; pointer-events: none; /* No margin from html */ margin: 0 !important; /* Isolate the panel's own layout from typography/scaling features (Content Scaling, Font Sizing, Line Height, Letter Spacing) applied to - those are meant to resize page content, not the control panel used to turn them off again. Global overlays like Reading Guide/Mask are separate fixed elements and are unaffected either way. */ font-size: 16px !important; line-height: normal !important; letter-spacing: normal !important; zoom: 1 !important; } /* box-sizing safeguard against themes: most themes reset `* { box-sizing: border-box }` globally, but a theme that doesn't (content-box is the CSS default) would make every padded panel element compute wider/taller than designed. Set it explicitly instead of relying on the theme's own reset. */ #evas-panel, #evas-panel *, #evas-panel *::before, #evas-panel *::after, .evas-toggle-wrapper, .evas-toggle-wrapper *, .evas-toggle-wrapper *::before, .evas-toggle-wrapper *::after { box-sizing: border-box !important; } /* Inheritance barrier for `color`, in the same spirit as the font-size / line-height / zoom isolation on #evas-panel above. Text Colors sets `color: !important` on itself. The selectors it generates already exclude the plugin's own UI, but an exclusion only stops those selectors *matching* panel elements - it cannot stop the colour cascading down from by inheritance, and every panel element without a colour of its own inherited it (picking red turned the panel's own labels red). Declaring a colour on these roots ends the chain: a value declared on an element always beats an inherited one, no matter how important the ancestor's declaration was. Deeper panel rules are more specific and keep overriding this, so the panel's own palette is unaffected. */ #evas-panel, .evas-toggle-wrapper { color: var(--evas-text, #2c3e50); } /* Position variations for panel */ #evas-panel.evas-position-bottom-right { right: var(--evas-panel-offset, 20px); bottom: var(--evas-panel-offset, 20px); } #evas-panel.evas-position-bottom-left { left: var(--evas-panel-offset, 20px); bottom: var(--evas-panel-offset, 20px); } #evas-panel.evas-position-top-right { right: var(--evas-panel-offset, 20px); top: calc(var(--evas-panel-offset, 20px) + 60px); } #evas-panel.evas-position-top-left { left: var(--evas-panel-offset, 20px); top: calc(var(--evas-panel-offset, 20px) + 60px); } #evas-panel.evas-position-left, #evas-panel.evas-position-left-center { left: var(--evas-panel-offset, 20px); top: 50%; transform: translateY(-50%); } #evas-panel.evas-position-right, #evas-panel.evas-position-right-center { right: var(--evas-panel-offset, 20px); top: 50%; transform: translateY(-50%); } /* Toggle button wrapper positions */ .evas-toggle-wrapper.evas-position-bottom-right { right: var(--evas-panel-offset, 20px) !important; bottom: var(--evas-panel-offset, 20px) !important; } .evas-toggle-wrapper.evas-position-bottom-left { left: var(--evas-panel-offset, 20px) !important; bottom: var(--evas-panel-offset, 20px) !important; } .evas-toggle-wrapper.evas-position-top-right { right: var(--evas-panel-offset, 20px) !important; top: calc(var(--evas-panel-offset, 20px) + 60px) !important; } .evas-toggle-wrapper.evas-position-top-left { left: var(--evas-panel-offset, 20px) !important; top: calc(var(--evas-panel-offset, 20px) + 60px) !important; } .evas-toggle-wrapper.evas-position-left, .evas-toggle-wrapper.evas-position-left-center { left: var(--evas-panel-offset, 20px) !important; top: 50% !important; transform: translateY(-50%) !important; } .evas-toggle-wrapper.evas-position-right, .evas-toggle-wrapper.evas-position-right-center { right: var(--evas-panel-offset, 20px) !important; top: 50% !important; transform: translateY(-50%) !important; } /* bottom-center: offered by the Customizer's position control but never styled, so choosing it left the button pinned wherever the previous rule put it. */ #evas-panel.evas-position-bottom-center { left: 50%; bottom: var(--evas-panel-offset, 20px); transform: translateX(-50%); } .evas-toggle-wrapper.evas-position-bottom-center { left: 50% !important; bottom: var(--evas-panel-offset, 20px) !important; transform: translateX(-50%) !important; } /* Toggle Button Wrapper - positioned in to avoid body filter issues */ .evas-toggle-wrapper { position: fixed !important; z-index: 999999 !important; filter: none !important; pointer-events: auto !important; margin: 0 !important; font-size: 16px !important; line-height: normal !important; letter-spacing: normal !important; zoom: 1 !important; } /* Toggle Button Sized by min-width/min-height rather than a fixed box so a caption can widen it and the padding control has something to act on. The --evas-button-* variables are supplied by the Customizer module; the fallbacks are the original hardcoded values, so the button is unchanged without it. */ .evas-panel-toggle { min-width: 56px; min-height: 56px; padding: var(--evas-button-padding, 14px); gap: 8px; border-radius: var(--evas-button-radius, 50%); background: var(--evas-button-bg, linear-gradient(135deg, var(--evas-color) 0%, var(--evas-color-hover) 100%)); color: var(--evas-button-color, #fff); border: none; cursor: pointer; font-size: 26px; line-height: 1; box-shadow: var(--evas-button-shadow, 0 4px 15px rgba(34, 113, 177, 0.3)); transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; } /* Themes style bare `button` state selectors, and `button:focus` (0,1,1) outranks the class-only rule above (0,1,0) - Astra sets its own background-color there, which repainted this button with the theme's blue for as long as it kept focus, i.e. the whole time the panel was open. Restating the colours at id + class specificity (1,1,0) wins without `!important`, which the base rule used to carry and which had the side effect of pinning the icon colour so the hover colour could never apply - producing a white icon on a white hover background. */ /* `:focus` is listed with the resting state on purpose. Clicking the button leaves it focused for as long as the panel is open, so treating focus as hover would latch the hover colours the entire time - it only needs to hold the button's own colours against the theme. The visible focus affordance is the outline below. */ #evas-panel-toggle.evas-panel-toggle, #evas-panel-toggle.evas-panel-toggle:focus { background: var(--evas-button-bg, linear-gradient(135deg, var(--evas-color) 0%, var(--evas-color-hover) 100%)); color: var(--evas-button-color, #fff); } #evas-panel-toggle.evas-panel-toggle:hover, #evas-panel-toggle.evas-panel-toggle:focus-visible { background: var(--evas-button-bg-hover, var(--evas-button-bg, var(--evas-color-hover))); color: var(--evas-button-color-hover, var(--evas-button-color, #fff)); } .evas-panel-toggle:hover { transform: scale(1.1); box-shadow: var(--evas-button-shadow-hover, 0 6px 20px rgba(34, 113, 177, 0.4)); } /* Caption sits beside the icon; ordering comes from the evas-icon-pos-* flex-direction rules the Customizer emits. */ .evas-panel-toggle .evas-button-caption { font-size: 15px; font-weight: 600; white-space: nowrap; } /* Hidden until the configured scroll offset is reached. Applied server-side so the button never flashes into view first. */ .evas-toggle-wrapper.evas-scroll-gated { opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .evas-toggle-wrapper.evas-scroll-gated.evas-scrolled-in { opacity: 1; visibility: visible; } .evas-panel-toggle:focus { outline: 3px solid var(--evas-color); outline-offset: 2px; } .evas-panel-toggle .evas-panel-toggle-icon { width: var(--evas-button-size, 28px) !important; height: var(--evas-button-size, 28px) !important; flex-shrink: 0 !important; display: block !important; /* Hard override in case theme sets svg fill to none/transparent */ fill: currentColor !important; color: currentColor !important; } /* Astra (и некоторые темы) могут задавать button svg { fill: none !important; }. * У нашего SVG нет stroke, поэтому принудительно задаём fill для path. */ .evas-panel-toggle .evas-panel-toggle-icon path { fill: currentColor !important; stroke: none !important; } /* Panel Content */ .evas-panel-content { position: absolute; bottom: 70px; right: 0; width: 460px; max-height: 90vh; background: var(--evas-bg); border-radius: var(--evas-border-radius); box-shadow: var(--evas-shadow); display: none; /* Deliberately not `overflow: hidden`. The arrow below is a ::after on this very element, positioned 12px outside it, so clipping here removed it entirely - every one of the arrow rules further down (all six button positions) drew nothing at all. The rounded corners it used to enforce are now owned by the children that actually paint to the card's edges: the header rounds the top, the footer the bottom. */ overflow: visible; animation: evas-slide-in var(--evas-animate) ease-out; pointer-events: auto; } /* Arrow pointing to toggle button */ .evas-panel-content::after { content: ''; position: absolute; bottom: -12px; right: 22px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid var(--evas-bg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } /* A dragged panel is no longer anchored to the toggle button - the Customizer's drag switches the card to `position: fixed` at wherever the visitor dropped it (see customizer.js) - so the arrow would point at empty page. */ #evas-panel[data-evas-dragged="1"] .evas-panel-content::after { display: none; } /* Position adjustments for left-aligned panels */ .evas-position-bottom-left .evas-panel-content { right: auto; left: 0; } .evas-position-bottom-left .evas-panel-content::after { right: auto; left: 22px; } /* Left center - panel opens to the right of button */ .evas-position-left .evas-panel-content, .evas-position-left-center .evas-panel-content { bottom: auto; top: 50%; transform: translateY(-50%); left: 70px; right: auto; } .evas-position-left .evas-panel-content::after, .evas-position-left-center .evas-panel-content::after { bottom: auto; top: 50%; transform: translateY(-50%); left: -12px; right: auto; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid var(--evas-bg); border-left: none; } /* Position adjustments for top panels */ .evas-position-top-right .evas-panel-content { bottom: auto; top: 70px; } .evas-position-top-right .evas-panel-content::after { bottom: auto; top: -12px; border-top: none; border-bottom: 12px solid var(--evas-bg); } /* Top left - panel opens below and to the right of button */ .evas-position-top-left .evas-panel-content { bottom: auto; top: 70px; left: 0; right: auto; } .evas-position-top-left .evas-panel-content::after { bottom: auto; top: -12px; left: 22px; right: auto; border-top: none; border-bottom: 12px solid var(--evas-bg); border-left: 12px solid transparent; border-right: 12px solid transparent; } /* Right center - panel opens to the left of button */ .evas-position-right .evas-panel-content, .evas-position-right-center .evas-panel-content { bottom: auto; top: 50%; transform: translateY(-50%); right: 70px; left: auto; } .evas-position-right .evas-panel-content::after, .evas-position-right-center .evas-panel-content::after { bottom: auto; top: 50%; transform: translateY(-50%); right: -12px; left: auto; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid var(--evas-bg); border-right: none; } #evas-panel.evas-open .evas-panel-content { display: block; } @keyframes evas-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Panel Header */ .evas-panel-header { display: flex; justify-content: space-between; align-items: center; height: 80px; width: 100%; /* Rounds the card's top corners itself: .evas-panel-content no longer clips, or the arrow pointing at the toggle button would be cut off. */ border-radius: var(--evas-border-radius) var(--evas-border-radius) 0 0; overflow: hidden; box-sizing: border-box; padding-top: 16px; padding-left: 0; padding-right: 0; padding-bottom: 0; background: linear-gradient(to bottom, var(--evas-bg), rgba(255, 255, 255, 0)); cursor: default; } .evas-panel-header-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--evas-color) 0%, var(--evas-color-hover) 100%); color: var(--evas-bg, #fff); } .evas-panel-header-icon svg { fill: currentColor; } .evas-panel-header h2 { /* Icon (above) now carries the brand-color accent, so the title itself reads as solid, dark, bold text rather than the gradient-fill treatment this used to have - matches the reference design, where the icon (not the title color) is what stands out. */ margin: 0 0 0 12px; padding: 0; font-size: 24px; font-weight: 800; font-family: sans-serif !important; color: var(--evas-text); letter-spacing: -0.02em; flex: 1; } .evas-panel-close { background: transparent; border: 1.5px solid var(--evas-border-color); border-radius: 50%; padding: 0; margin-right: 32px; color: var(--evas-text); font-size: 14px; cursor: pointer; line-height: 1; width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; } .evas-panel-close:before { content: "✕"; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; } .evas-panel-close:hover { opacity: 1; } .evas-panel-close:focus { outline: 2px dotted var(--evas-text); outline-offset: 2px; } /* Profiles Section Title */ .evas-profiles-section-title { /* Small, muted, tracked-out caps label - deliberately far below .evas-panel-header h2 (24px/bold/dark) so it reads as a section label inside the panel, not a second title. */ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; /* Left/right margin matches .evas-profile-box's new margin below it (also 32px) so the label lines up with the left edge of the bordered cards instead of sitting flush with the panel-body's own inset. */ margin: 0 32px 16px 32px; padding: 4px 0 0 0; display: block; color: color-mix(in srgb, var(--evas-text, #2c3e50) 55%, transparent); } /* Panel Body */ .evas-panel-body { padding: 0; margin: 0; max-height: 50vh; overflow-y: auto; overflow-x: hidden; /* Momentum scrolling for this nested nested scroll container - without it, Safari on iOS scrolls a non-fullscreen `overflow-y: auto` box like this one frame-at-a-time under a finger drag instead of with inertia, which reads as the whole panel being laggy even though nothing else is actually slow. */ -webkit-overflow-scrolling: touch; box-sizing: border-box; } .evas-panel-body::-webkit-scrollbar-track { background-color: var(--evas-bg); border-radius: 8px; } .evas-panel-body::-webkit-scrollbar { width: 17px; background-color: var(--evas-bg); } .evas-panel-body::-webkit-scrollbar-thumb { background-color: var(--evas-color); border-radius: 8.5px; border: 4px solid var(--evas-bg); } /* Panel Footer */ .evas-panel-footer { display: flex; column-gap: 15px; row-gap: 15px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 0; padding: 32px; box-sizing: border-box; border-top: 2px solid var(--evas-color-transparent); background: var(--evas-bg); /* Bottom counterpart to the header's rounding - see .evas-panel-content. */ border-radius: 0 0 var(--evas-border-radius) var(--evas-border-radius); } .evas-panel-footer .evas-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; border-radius: 16px; min-height: 34px; margin: 0; padding: 17px; flex-grow: 1; transition: 0.2s; font-weight: 600; text-transform: none; letter-spacing: normal; border: 2px solid var(--evas-color-transparent); background: var(--evas-bg); color: var(--evas-color); cursor: pointer; } .evas-btn-icon { flex-shrink: 0; } .evas-panel-footer .evas-btn:first-child { margin-left: 0; } .evas-panel-footer .evas-btn:last-child { margin-right: 0; } .evas-panel-footer .evas-btn:focus { outline: none; } .evas-panel-footer .evas-btn:hover { background: var(--evas-color); color: var(--evas-bg); border-color: var(--evas-color); } .evas-panel-footer .evas-btn:focus { background: var(--evas-color); color: var(--evas-bg); border-color: var(--evas-color); box-shadow: 0 0 0 4px var(--evas-bg), 0 0 0 6px var(--evas-color); } /* Hide Forever - solid fill rather than the outlined style shared by the other footer buttons, so it reads as the more consequential action (matches the reference: Reset All stays outlined, Hide Forever is solid blue). Rules below intentionally repeat the same properties as the shared .evas-btn base/hover/focus rules above, just with the fill and text/border colors swapped, since a solid button never needs the "become solid on hover" transition the outlined one does. */ .evas-panel-footer .evas-btn-hide-forever { background: var(--evas-color); color: var(--evas-bg); border-color: var(--evas-color); } .evas-panel-footer .evas-btn-hide-forever:hover, .evas-panel-footer .evas-btn-hide-forever:focus { background: var(--evas-color-hover); border-color: var(--evas-color-hover); color: var(--evas-bg); } /* Controls Wrapper */ .evas-af-controls-wrapper { padding: 20px; } /* Online Dictionary - live Wikipedia search, not a toggle/activate feature like the surrounding action-boxes (see render_online_dictionary() in class-accessibility-controls.php). Layout proportions adapted from the reference plugin's own dictionary widget, but built on this panel's own CSS variables/design tokens rather than hardcoded colors. */ #evas-dictionary-box { padding: 0 32px; } /* The field wrapper is what the icon/spinner/clear button and the results dropdown are all positioned against - deliberately unpadded, unlike #evas-dictionary-box, so their offsets line up with the input's own edges. */ .evas-dictionary-field { position: relative; } #evas-dictionary-search { box-sizing: border-box; width: 100%; margin: 0; /* Right padding leaves room for the spinner/clear button, left for the magnifier icon - both are absolutely positioned on top of the input, so the text has to be inset past them by hand. */ padding: 12px 42px 12px 42px; font-size: 15px; font-family: inherit; line-height: 1.4; color: var(--evas-text); /* Bordered white field, matching .evas-profile-box and the panel's other cards, rather than a filled grey input - the panel has no neutral "subtle fill" token and inventing one here would be the only place it's used. */ background: var(--evas-bg); border: 1.5px solid var(--evas-border-color); border-radius: 999px; transition: border-color 0.2s, box-shadow 0.2s; } #evas-dictionary-search::placeholder { color: var(--evas-text); opacity: 0.5; } #evas-dictionary-search:hover { border-color: var(--evas-color); } #evas-dictionary-search:focus { outline: none; border-color: var(--evas-color); box-shadow: 0 0 0 4px var(--evas-color-transparent); } /* Magnifier drawn in pure CSS (a circle + a rotated bar for the handle) - consistent with how the rest of this panel avoids shipping icon assets for such small glyphs. */ .evas-dictionary-icon { position: absolute; top: 50%; left: 16px; width: 12px; height: 12px; margin-top: -7px; border: 2px solid var(--evas-text); border-radius: 50%; opacity: 0.45; pointer-events: none; transition: opacity 0.2s; } .evas-dictionary-icon::after { content: ''; position: absolute; top: 11px; left: 9px; width: 2px; height: 7px; background: var(--evas-text); border-radius: 1px; transform: rotate(-45deg); transform-origin: top center; } .evas-dictionary-field:focus-within .evas-dictionary-icon { opacity: 0.8; } /* Search preloader - shown for the whole "a search is pending" window (debounce included, not just the network call), so typing never leaves a dead moment where nothing on screen has reacted yet. Swaps places with the clear button, which is why both sit at the same offset. */ .evas-dictionary-spinner { display: none; position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--evas-color-transparent); border-top-color: var(--evas-color); border-radius: 50%; pointer-events: none; animation: evas-dictionary-spin 0.7s linear infinite; } #evas-dictionary-box.is-searching .evas-dictionary-spinner { display: block; } @keyframes evas-dictionary-spin { to { transform: rotate(360deg); } } /* Clear button - an "x" built from two rotated bars, same technique the reference plugin uses for the equivalent control. Shown as soon as there's text to clear, and stood down while the spinner occupies the same spot (see toggleDictionarySpinner() in features.js). */ #evas-dictionary-clear { display: none; position: absolute; cursor: pointer; background: transparent; border: none; padding: 0; top: 50%; right: 12px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; opacity: 0.45; transition: opacity 0.2s, background-color 0.2s; } #evas-dictionary-box.has-query:not(.is-searching) #evas-dictionary-clear { display: block; } #evas-dictionary-clear:hover { opacity: 1; background: var(--evas-color-transparent); } #evas-dictionary-clear:focus-visible { outline: 2px solid var(--evas-color); outline-offset: 2px; opacity: 1; } #evas-dictionary-clear::before, #evas-dictionary-clear::after { content: ''; position: absolute; left: 11px; top: 6px; width: 2px; height: 12px; border-radius: 1px; background: var(--evas-text); } #evas-dictionary-clear::before { transform: rotate(45deg); } #evas-dictionary-clear::after { transform: rotate(-45deg); } /* Results dropdown. Floats over the panel's own content instead of pushing the sections below it down the page (which made the whole panel jump on every search). It stays inside .evas-panel-body's scroll container, so it travels with the field when the panel is scrolled; features.js scrolls the field up on open so the dropdown has room and doesn't get clipped by the body's bottom edge. */ #evas-dictionary-results-box { display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--evas-bg); border: 1px solid var(--evas-border-color); border-radius: var(--evas-border-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); } #evas-dictionary-box.is-open #evas-dictionary-results-box { display: block; } #evas-dictionary-results { margin: 0; padding: 4px; } /* Whole rows are clickable/focusable, not just the trailing link - a much bigger hit target, which matters most on touch. */ .evas-dictionary-result { display: block; padding: 10px 12px; border-radius: calc(var(--evas-border-radius) - 4px); text-decoration: none; color: inherit; transition: background-color 0.15s; } .evas-dictionary-result:hover, .evas-dictionary-result:focus, .evas-dictionary-result.is-active { background: var(--evas-color-transparent); outline: none; } .evas-dictionary-result-title { font-size: 15px; font-weight: 600; margin: 0 0 2px 0; color: var(--evas-text); } .evas-dictionary-result-text { font-size: 13px; line-height: 1.4; margin: 0; color: var(--evas-text); opacity: 0.75; } /* Empty/error rows are plain text, not selectable options. */ .evas-dictionary-result-empty, .evas-dictionary-result-error { margin: 0; padding: 14px 12px; font-size: 14px; color: var(--evas-text); opacity: 0.75; } .evas-dictionary-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--evas-text); opacity: 0.6; } /* Only ever carries transient status text ("Searching…", "Nothing found") for screen readers - kept out of the visual flow so it can't shift the layout, but not display:none, which would stop it being announced. */ .evas-dictionary-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Section Headers */ .evas-section-header { padding: 4px 0 0 0; margin: 32px 24px 0 32px; border-top: 2px solid var(--evas-color-transparent); } .evas-section-header:first-child { margin-top: 0; border-top: none; } .evas-section-header h3, .evas-section-header h4 { font-size: 24px; margin: 16px 0 0; padding: 0; display: block; font-weight: 500; color: var(--evas-text); } /* Profiles Section */ .evas-profiles-section { margin-bottom: 0; } .evas-profiles-grid { display: block; } /* Profile Box - Full width */ .evas-profile-box { display: block; cursor: pointer; padding-left: 20px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0 32px 16px 32px; border: 1.5px solid var(--evas-border-color); border-radius: 12px; transition: all 0.15s ease-out; } .evas-profile-box:focus { outline: none; } .evas-profile-box:first-child { padding-top: 8px; } /* Profile Row - Contains switch and content */ .evas-profile-row { padding: 10.6666666667px 0; display: flex; align-items: center; transition: padding 0.15s ease-out; } /* Switch Box */ .evas-switch-box { position: relative; display: inline-block; flex-shrink: 0; } /* The actual .evas-switch/.evas-slider sizing lives in the single "Toggle Switch" block further down (near .evas-profile-box.evas-active) - this used to be two complete, conflicting definitions of the same switch (60x34 here vs. 50x28 there, same specificity, later one always won, so this one was pure dead weight - the pill shape itself comes from .evas-slider's own border-radius, not .evas-switch's, so nothing here was silently load-bearing). Consolidated into one definition rather than leaving a second copy for someone to edit by mistake later. */ /* Profile Content */ .evas-profile-content { flex: 1; margin-left: 24px; } /* Expand/collapse chevron - independent of the switch: toggling this never activates/deactivates the profile, it only previews its description (see the dedicated .evas-profile-toggle click handler in features.js, which stops the click from reaching the box-level activate/deactivate handler). */ .evas-profile-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px; padding: 0; background: transparent; border: none; border-radius: 50%; color: var(--evas-text); cursor: pointer; opacity: 0.6; transition: opacity 0.2s, background-color 0.2s; } .evas-profile-toggle:hover, .evas-profile-toggle:focus { opacity: 1; background-color: var(--evas-color-transparent); outline: none; } .evas-profile-toggle-icon { transition: transform 0.2s ease-out; } .evas-profile-box.evas-profile-expanded .evas-profile-toggle-icon { transform: rotate(180deg); } .evas-profile-title { font-size: 19px; font-weight: 600; line-height: 1.25; margin: 0 0 5px 0; color: var(--evas-text); } .evas-profile-short { font-size: 16px; line-height: 1.4; color: var(--evas-text); margin: 0; } /* Full description - Hidden by default */ .evas-profile-description { max-height: 0; overflow: hidden; opacity: 0; padding: 0; font-size: 16px; line-height: 1.4; color: var(--evas-text); transition: all 0.15s ease-out; } /* Active profile state - color only. Whether the description is visible is controlled independently by .evas-profile-expanded (below): activating a profile also adds that class (see features.js handleProfile()), but the chevron can expand/collapse the description on its own without touching activation at all. */ .evas-profile-box.evas-active { background-color: var(--evas-color-transparent, #e2f2ff); border-color: var(--evas-color); } .evas-profile-box.evas-active .evas-slider:before { background-color: white; } /* Expanded state - independent of .evas-active. Reveals the full description and gives the row extra breathing room, regardless of whether the profile itself is on or off. */ .evas-profile-box.evas-profile-expanded .evas-profile-row { padding: 20px 0; } .evas-profile-box.evas-profile-expanded .evas-profile-description { height: auto; max-height: 600px; opacity: 1; margin: 0; padding: 16px 0 20px 0; /* Divider line above the description text, matching the reference. */ border-top: 1px solid var(--evas-border-color); } /* Toggle Switch */ .evas-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; } .evas-switch input { /* !important: `.evas-switch input` (0,1,1) exactly ties in specificity with a theme/WP-core-style checkbox reset like `input[type=checkbox]` (attribute selectors count as class-level specificity, so that's also 0,1,1) - without this, whichever rule happens to print later wins, which is fragile even with the enqueue-order fix elsewhere. The real (custom-styled) checkbox must stay invisible; only .evas-slider is meant to be seen. */ opacity: 0 !important; width: 0 !important; height: 0 !important; } .evas-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--evas-color-transparent); transition: 0.3s; border-radius: 34px; } .evas-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: var(--evas-color); transition: 0.3s; border-radius: 50%; } .evas-switch input:checked + .evas-slider { background-color: var(--evas-color); } .evas-switch input:checked + .evas-slider:before { background-color: var(--evas-bg); transform: translateX(22px); } .evas-switch input:focus + .evas-slider { box-shadow: 0 0 1px var(--evas-color); } .evas-switch:hover { box-shadow: 0 0 0 4px var(--evas-bg), 0 0 0 6px var(--evas-color-transparent); } /* Action Boxes (Toggle Buttons) */ .evas-action-box { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; height: 120px; border: 2px solid var(--evas-color-transparent); border-radius: 12px; background: var(--evas-bg); cursor: pointer; transition: all 0.2s; text-align: center; padding: 12px; box-sizing: border-box; } .evas-action-box:hover, .evas-action-box:focus { background-color: var(--evas-color-transparent); border-color: var(--evas-color); } .evas-action-box:focus { border: 2px dotted var(--evas-color); box-shadow: 0 0 0 4px var(--evas-bg), 0 0 0 6px var(--evas-color); outline: none; } .evas-action-box.evas-active { background: var(--evas-color); color: var(--evas-bg); border-color: var(--evas-color); } .evas-action-icon { width: 40px; height: 40px; border-radius: 0; background-color: var(--evas-color); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 20px; color: var(--evas-bg); } .evas-action-box.evas-active .evas-action-icon { background-color: var(--evas-bg); color: var(--evas-color); } .evas-action-label { font-size: 13px; font-weight: 500; line-height: 1.3; } /* Action Grid */ .evas-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } /* Icon masks для каждого контрола */ #evas-action-text-magnifier .evas-action-icon { -webkit-mask-image: url('../images/toggles/text-magnifier.svg'); mask-image: url('../images/toggles/text-magnifier.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-readable-font .evas-action-icon { -webkit-mask-image: url('../images/toggles/readable-font.svg'); mask-image: url('../images/toggles/readable-font.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-dyslexia-font .evas-action-icon { -webkit-mask-image: url('../images/toggles/dyslexia-font.svg'); mask-image: url('../images/toggles/dyslexia-font.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-highlight-titles .evas-action-icon { -webkit-mask-image: url('../images/toggles/highlight-titles.svg'); mask-image: url('../images/toggles/highlight-titles.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-highlight-links .evas-action-icon { -webkit-mask-image: url('../images/toggles/highlight-links.svg'); mask-image: url('../images/toggles/highlight-links.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-dark-contrast .evas-action-icon { -webkit-mask-image: url('../images/toggles/dark-contrast.svg'); mask-image: url('../images/toggles/dark-contrast.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-light-contrast .evas-action-icon { -webkit-mask-image: url('../images/toggles/light-contrast.svg'); mask-image: url('../images/toggles/light-contrast.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-monochrome .evas-action-icon { -webkit-mask-image: url('../images/toggles/monochrome.svg'); mask-image: url('../images/toggles/monochrome.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-high-contrast .evas-action-icon { -webkit-mask-image: url('../images/toggles/high-contrast.svg'); mask-image: url('../images/toggles/high-contrast.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-high-saturation .evas-action-icon { -webkit-mask-image: url('../images/toggles/high-saturation.svg'); mask-image: url('../images/toggles/high-saturation.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-low-saturation .evas-action-icon { -webkit-mask-image: url('../images/toggles/low-saturation.svg'); mask-image: url('../images/toggles/low-saturation.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-mute-sounds .evas-action-icon { -webkit-mask-image: url('../images/toggles/mute-sounds.svg'); mask-image: url('../images/toggles/mute-sounds.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-hide-images .evas-action-icon { -webkit-mask-image: url('../images/toggles/hide-images.svg'); mask-image: url('../images/toggles/hide-images.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-hide-emoji .evas-action-icon { -webkit-mask-image: url('../images/toggles/hide-emoji.svg'); mask-image: url('../images/toggles/hide-emoji.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-virtual-keyboard .evas-action-icon { -webkit-mask-image: url('../images/toggles/virtual-keyboard.svg'); mask-image: url('../images/toggles/virtual-keyboard.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-reading-guide .evas-action-icon { -webkit-mask-image: url('../images/toggles/reading-guide.svg'); mask-image: url('../images/toggles/reading-guide.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-cognitive-reading .evas-action-icon { -webkit-mask-image: url('../images/toggles/cognitive-reading.svg'); mask-image: url('../images/toggles/cognitive-reading.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-stop-animations .evas-action-icon { -webkit-mask-image: url('../images/toggles/stop-animations.svg'); mask-image: url('../images/toggles/stop-animations.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-reading-mask .evas-action-icon { -webkit-mask-image: url('../images/toggles/reading-mask.svg'); mask-image: url('../images/toggles/reading-mask.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-highlight-hover .evas-action-icon { -webkit-mask-image: url('../images/toggles/highlight-hover.svg'); mask-image: url('../images/toggles/highlight-hover.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-highlight-focus .evas-action-icon { -webkit-mask-image: url('../images/toggles/highlight-focus.svg'); mask-image: url('../images/toggles/highlight-focus.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-big-black-cursor .evas-action-icon { -webkit-mask-image: url('../images/toggles/black-cursor.svg'); mask-image: url('../images/toggles/black-cursor.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-big-white-cursor .evas-action-icon { -webkit-mask-image: url('../images/toggles/white-cursor.svg'); mask-image: url('../images/toggles/white-cursor.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-text-to-speech .evas-action-icon { -webkit-mask-image: url('../images/toggles/text-to-speech.svg'); mask-image: url('../images/toggles/text-to-speech.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-keyboard-navigation .evas-action-icon { -webkit-mask-image: url('../images/toggles/keyboard-navigation.svg'); mask-image: url('../images/toggles/keyboard-navigation.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-voice-navigation .evas-action-icon { -webkit-mask-image: url('../images/toggles/voice-navigation.svg'); mask-image: url('../images/toggles/voice-navigation.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-virtual-keyboard .evas-action-icon { -webkit-mask-image: url('../images/toggles/virtual-keyboard.svg'); mask-image: url('../images/toggles/virtual-keyboard.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-align-left .evas-action-icon { -webkit-mask-image: url('../images/toggles/align-left.svg'); mask-image: url('../images/toggles/align-left.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-align-center .evas-action-icon { -webkit-mask-image: url('../images/toggles/align-center.svg'); mask-image: url('../images/toggles/align-center.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #evas-action-align-right .evas-action-icon { -webkit-mask-image: url('../images/toggles/align-right.svg'); mask-image: url('../images/toggles/align-right.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Responsive */ @media screen and (max-width: 480px) { /* #evas-panel itself also needs resetting: its own position-class offset (e.g. right:20px;bottom:20px for evas-position-bottom-right) makes it the containing block .evas-panel-content is positioned relative to - leaving it un-reset means .evas-panel-content's left/right/bottom:0 resolve against that offset box instead of the true viewport edges, landing the "full-width" sheet partway off-screen. Selectors here are deliberately written as `html #evas-panel...` rather than the plain `.evas-panel-content` used elsewhere: this has to beat not just #evas-panel.evas-position-* (0,2,0, desktop position rules) but also the Customizer module's inline `#evas-panel .evas-panel-content { border-radius: ... !important }` (specificity 1,1,0 - an ID beats any number of classes/tags below it), which is printed in wp_footer and therefore always later in the document than this external stylesheet - on a specificity tie the later rule wins, so matching its specificity isn't enough. Repeating the #evas-panel ID and adding the `html` tag pushes this to 2,1,1, clearing 1,1,0 with room to spare regardless of source order. */ html #evas-panel#evas-panel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; } html #evas-panel#evas-panel .evas-panel-content { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; max-height: 100vh !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: unset !important; transform: none !important; border-radius: 16px 16px 0 0 !important; } /* No arrow on mobile - a full-width bottom sheet isn't "pointing" at anything, unlike the desktop popover. */ .evas-panel-content::after { display: none !important; } /* The sheet sits flush against the bottom edge, so the footer must not round its corners the way it does on the desktop popover. */ html #evas-panel#evas-panel .evas-panel-footer { border-radius: 0 !important; } /* Drag-handle bar at the top of the sheet - a bottom-sheet affordance, so (unlike the rest of this redesign, which applies everywhere) it's deliberately scoped to this mobile-only block; a floating desktop popover isn't a draggable sheet and has nothing to indicate. */ html #evas-panel#evas-panel .evas-panel-content::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: var(--evas-border-color); } /* Dimmed backdrop behind the bottom sheet. #evas-panel itself has no intrinsic size (its only child is position:absolute, so it contributes nothing to layout), but a `position: fixed` pseudo- element doesn't need one - `inset: 0` resolves against the viewport directly. Sits at the bottom of #evas-panel's own stacking context (z-index: -1 relative to .evas-panel-content, NOT relative to page content - the whole #evas-panel subtree still paints above the page at its normal 999998 tier), so it dims the page without covering the sheet. Click-to-close for this is handled in class-accessibility- panel.php (checks e.target === panel, i.e. a click that hit this pseudo-element and not any real child). */ html #evas-panel#evas-panel.evas-open::before { content: ''; position: fixed; inset: 0; background: var(--evas-backdrop, rgba(0, 0, 0, 0.5)); z-index: -1; pointer-events: auto; } /* Hide the toggle button itself while the sheet is open on mobile (the full-width sheet already covers where it would be) and show it again the instant the panel closes, by any path (close button, Escape, backdrop click, outside click) - :has() reacts to the .evas-open class directly instead of this needing to be wired into every close handler in JS. `html:has(...)` rather than `body:has(...)` because the panel/wrapper can be re-parented to itself when the theme traps position:fixed on (see the trap-detection script). */ html:has(#evas-panel.evas-open) .evas-toggle-wrapper { display: none !important; } /* Lift the floating toggle button further off the bottom edge on mobile - flush against `bottom: 20px` it sits right under (and is often partly covered by) the browser's own bottom chrome (Safari's URL bar, Chrome's nav bar) or the iOS home-indicator gesture area. env(safe-area-inset-bottom) accounts for the home indicator on devices/viewport configs that expose it; the flat 16px on top of that is the actual "lift" and applies everywhere else too, since most mobile browsers don't report a safe-area inset for their own chrome at all. */ .evas-toggle-wrapper.evas-position-bottom-right, .evas-toggle-wrapper.evas-position-bottom-left { bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 16px) !important; } .evas-panel-header, .evas-panel-body, .evas-panel-footer { padding: 16px 20px; } .evas-panel-header h2 { font-size: 20px; } .evas-panel-body { max-height: 50vh; } .evas-section-header h3, .evas-section-header h4 { font-size: 18px; } .evas-profile-title { font-size: 16px; } .evas-profile-short, .evas-profile-description { font-size: 13px; } /* Round 11 gave .evas-profile-box/.evas-profiles-section-title a 32px side margin so bordered cards would line up with the (wide) desktop popover's own inset - on a 390px viewport that stacks with .evas-panel-body's own 20px padding AND .evas-af-controls-wrapper's 20px padding (72px eaten per side, 144px total) and left almost no room for the row content, forcing "Epilepsy Safe Mode" etc. to wrap across 2-3 lines and look oversized even though the font-size itself is correct. Zeroing it here falls back to just the body+wrapper inset (40px total), matching every other section's action-grid. */ .evas-profile-box, .evas-profiles-section-title { margin-left: 0; margin-right: 0; } /* Even after zeroing the box's own outer margin above, the row's internal spacing (padding + the switch-to-text gap + the chevron's own gap) was still sized for the much wider desktop card, leaving so little room for the title that even "Epilepsy Safe Mode" wrapped across 2 lines. Tightened here, mobile-only, to give the text back the room it needs to read as one line like the reference. */ .evas-profile-box { padding-left: 16px; padding-right: 8px; } .evas-profile-content { margin-left: 12px; } .evas-profile-toggle { margin-left: 4px; } /* Same double-padding bug as .evas-profile-box above: #evas-dictionary- box's 32px side padding was sized for the desktop popover and stacks with .evas-panel-body/.evas-af-controls-wrapper's own 40px combined inset on a 390px viewport, leaving the search input only ~229px wide out of 390px. Zeroing it falls back to the same 40px inset every other section already uses. */ #evas-dictionary-box { padding-left: 0; padding-right: 0; } /* 16px keeps iOS Safari from auto-zooming the whole page when the field takes focus (it does that for any input under 16px), which on a bottom sheet is especially disorienting. */ #evas-dictionary-search { font-size: 16px; padding-top: 13px; padding-bottom: 13px; } /* The panel body is only 50vh tall on mobile, so the desktop dropdown's 260px would fill nearly all of it; capping it relative to the viewport keeps some of the field and the content behind it visible, and rows get a bit more height for touch. */ #evas-dictionary-results-box { max-height: min(240px, 32vh); } .evas-dictionary-result { padding: 12px; } .evas-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .evas-action-box { width: 100%; height: 100px; padding: 8px; } .evas-panel-footer { flex-direction: column; /* The env() addition only ever helps on a page whose viewport meta tag includes `viewport-fit=cover` - this plugin doesn't control that (it's the theme's output), and this site's theme doesn't set it, so env() resolves to 0 here and everywhere else without it: the base value alone is what actually renders, so it needs to be generous enough on its own rather than relying on env() to add the real breathing room. env() is kept anyway since it's harmless and still helps on any page that does set it. */ padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .evas-panel-footer .evas-btn { width: 100%; padding: 12px; } } /* Compact "Accessibility modes" cards on desktop/the popover - a separate min-width query (rather than editing the base rules above) so it can't cascade into the mobile-only spacing tuned separately just above, which was calibrated for the 390px viewport specifically. */ @media screen and (min-width: 481px) { .evas-profile-box { padding-top: 6px; padding-bottom: 6px; margin-bottom: 10px; } .evas-profile-row { padding: 8px 0; } .evas-switch { width: 40px; height: 22px; } .evas-slider:before { height: 16px; width: 16px; left: 3px; bottom: 3px; } .evas-switch input:checked + .evas-slider:before { transform: translateX(18px); } .evas-profile-content { margin-left: 14px; } .evas-profile-toggle { width: 22px; height: 22px; margin-left: 6px; } .evas-profile-title { font-size: 15px; margin-bottom: 3px; } .evas-profile-short, .evas-profile-description { font-size: 13px; } .evas-profile-box.evas-profile-expanded .evas-profile-row { padding: 14px 0; } .evas-profile-box.evas-profile-expanded .evas-profile-description { padding: 10px 0 14px 0; } } /* Color Palette Control */ .evas-palette-box { padding: 20px; width: 100%; /* Not a fixed height: the swatch grid wraps to a different number of rows depending on available width (fewer per row on mobile), so a fixed 150px clipped/overflowed the box whenever more than ~2 rows were needed - swatches spilled outside the rounded border into whatever control sat below it. */ height: auto; min-height: 150px; box-sizing: border-box; grid-column: 1 / -1; /* Span all columns */ margin-bottom: 12px; background: var(--evas-bg, #fff); border: 2px solid var(--evas-color-transparent); border-radius: 12px; } .evas-palette-box .evas-action-box-content { flex-direction: column; gap: 0; } .evas-palette-box .evas-action-box-content .evas-title { display: block; font-size: 14px; font-weight: 500; color: var(--evas-text, #1e1e1e); margin-bottom: 14px; line-height: 1.4; } .evas-palette-box .evas-color-box { user-select: none; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin: 0 -4.5px; /* Negative margin to compensate for color margins */ row-gap: 0; /* No extra row gap */ } .evas-palette-box .evas-color { display: flex; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; position: relative; transition: 0.15s; box-sizing: border-box; border: 4px solid var(--evas-bg, #fff); margin: 4.5px; /* Even spacing like readabler */ } .evas-palette-box .evas-color:hover { border-color: color-mix(in srgb, var(--evas-text, #2c3e50) 8%, var(--evas-bg, #fff)); } .evas-palette-box .evas-color:focus { outline: none; box-shadow: 0 0 0 4px var(--evas-bg, #fff), 0 0 0 6px var(--evas-color, #1e73be); } .evas-palette-box .evas-color.evas-active::before { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background-color: var(--evas-bg, #fff); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .evas-palette-box .evas-color.evas-white { border-color: rgba(0, 0, 0, 0.15); } .evas-palette-box .evas-color.evas-active.evas-white::before { background-color: #1e1e1e; } /* Instructional toast (see EVAS_AF.showHint) - used by features that have no visible effect until the user does something else (e.g. Keyboard Navigation only changes the :focus outline). Isolated from body-level typography/scaling/color effects the same way #evas-panel is, since it's part of the plugin's own UI, not page content. */ .evas-af-hint { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); max-width: 90vw; padding: 12px 20px; background: #1e1e1e; /* Fixed pair: this toast is always dark-on-light regardless of the panel palette, so it must not follow --evas-bg. */ color: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 1000000; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; /* Same isolation as #evas-panel (see comment above): this is plugin UI, not page content, so it must not inherit body-level Content Scaling/Font Sizing/Line Height/Letter Spacing or text-align. transform is NOT !important here on purpose - .evas-af-hint-visible below needs to override it for the show/hide animation, and no accessibility feature in this plugin ever sets `transform` on body descendants. */ font-size: 14px !important; line-height: 1.4 !important; letter-spacing: normal !important; zoom: 1 !important; text-align: center !important; } .evas-af-hint.evas-af-hint-visible { opacity: 1; transform: translate(-50%, 0); }