/** * 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); --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: 99998; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; filter: none !important; pointer-events: none; /* No margin from html */ margin: 0 !important; } /* Position variations for panel */ #evas-panel.evas-position-bottom-right { right: 20px; bottom: 20px; } #evas-panel.evas-position-bottom-left { left: 20px; bottom: 20px; } #evas-panel.evas-position-top-right { right: 20px; top: 80px; } #evas-panel.evas-position-top-left { left: 20px; top: 80px; } #evas-panel.evas-position-left, #evas-panel.evas-position-left-center { left: 20px; top: 50%; transform: translateY(-50%); } #evas-panel.evas-position-right, #evas-panel.evas-position-right-center { right: 20px; top: 50%; transform: translateY(-50%); } /* Toggle button wrapper positions */ .evas-toggle-wrapper.evas-position-bottom-right { right: 20px !important; bottom: 20px !important; } .evas-toggle-wrapper.evas-position-bottom-left { left: 20px !important; bottom: 20px !important; } .evas-toggle-wrapper.evas-position-top-right { right: 20px !important; top: 80px !important; } .evas-toggle-wrapper.evas-position-top-left { left: 20px !important; top: 80px !important; } .evas-toggle-wrapper.evas-position-left, .evas-toggle-wrapper.evas-position-left-center { left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; } .evas-toggle-wrapper.evas-position-right, .evas-toggle-wrapper.evas-position-right-center { right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; } /* Toggle Button Wrapper - positioned in to avoid body filter issues */ .evas-toggle-wrapper { position: fixed !important; z-index: 99999 !important; filter: none !important; pointer-events: auto !important; margin: 0 !important; } /* Toggle Button */ .evas-panel-toggle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--evas-color) 0%, var(--evas-color-hover) 100%); /* Ensure icon color isn't overridden by theme/button styles */ color: #fff !important; border: none; cursor: pointer; font-size: 26px; box-shadow: 0 4px 15px rgba(34, 113, 177, 0.3); transition: transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; } .evas-panel-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(34, 113, 177, 0.4); } .evas-panel-toggle:focus { outline: 3px solid var(--evas-color); outline-offset: 2px; } .evas-panel-toggle .evas-panel-toggle-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 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; overflow: hidden; 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)); } /* 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%; 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 h2 { margin: 0 32px; padding: 0; font-size: 24px; font-weight: 600; font-family: sans-serif !important; color: var(--evas-text); } .evas-panel-close { background: transparent; border: 0; padding: 10px; margin-right: 32px; color: var(--evas-text); font-size: 16px; cursor: pointer; line-height: 1; width: auto; height: auto; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 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 { font-size: 24px; margin: 0 0 16px 0; padding: 4px 0 0 0; display: block; font-weight: 500; color: var(--evas-text); border-top: 2px solid var(--evas-color-transparent); padding-top: 16px; } /* Panel Body */ .evas-panel-body { padding: 0; margin: 0; max-height: 50vh; overflow-y: auto; overflow-x: hidden; 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); } .evas-panel-footer .evas-btn { 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-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); } /* Controls Wrapper */ .evas-af-controls-wrapper { padding: 20px; } /* 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: 32px; padding-right: 32px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 20px; transition: all 0.15s ease-out; } .evas-profile-box:focus { outline: none; } .evas-profile-box:first-child { padding-top: 16px; } /* 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; } .evas-switch { position: relative; display: inline-block; border-radius: 17px; width: 60px; height: 34px; font-size: 0; transition: 0.25s ease-out all; } .evas-switch:hover { border-radius: 17px; } .evas-switch input { opacity: 0; width: 0; height: 0; } .evas-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--evas-color-transparent); border-radius: 34px; transition: 0.4s; } .evas-slider:before { position: absolute; content: ""; border-radius: 50%; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: var(--evas-color); transition: 0.4s; } .evas-switch input:checked + .evas-slider { background-color: var(--evas-color); } .evas-switch input:checked + .evas-slider:before { transform: translateX(26px); } /* Profile Content */ .evas-profile-content { flex: 1; margin-left: 24px; } .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 */ .evas-profile-box.evas-active { background-color: #e2f2ff; } .evas-profile-box.evas-active .evas-profile-row { padding: 32px 0; } .evas-profile-box.evas-active .evas-profile-description { height: auto; max-height: 600px; opacity: 1; margin: 0; padding: 16px 0 32px 0; } .evas-profile-box.evas-active .evas-slider:before { background-color: white; } /* Toggle Switch */ .evas-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; } .evas-switch input { opacity: 0; width: 0; height: 0; } .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; } /* Input Spinner (для Content Scaling, Font Size и т.д.) */ .evas-input-spinner { display: flex; align-items: center; gap: 12px; padding: 16px 0; } .evas-input-spinner-label { flex: 1; font-size: 16px; font-weight: 500; color: var(--evas-text); } .evas-input-spinner-control { display: flex; align-items: center; gap: 8px; } .evas-input-spinner-btn, .evas-plus, .evas-minus { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--evas-color); color: var(--evas-bg); font-size: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; min-width: 36px; min-height: 36px; flex-shrink: 0; } .evas-input-spinner-btn:hover, .evas-plus:hover, .evas-minus:hover { background: var(--evas-color-hover); transform: scale(1.1); } .evas-input-spinner-btn:focus, .evas-plus:focus, .evas-minus:focus { outline: none; box-shadow: 0 0 0 4px var(--evas-bg), 0 0 0 6px var(--evas-color); } .evas-input-spinner-value { min-width: 60px; text-align: center; font-size: 16px; font-weight: 600; color: var(--evas-text); } /* 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-content { width: 100vw; max-width: 100vw; min-width: 100vw; max-height: 100vh; left: 0 !important; right: 0 !important; bottom: 0; top: unset !important; border-radius: 16px 16px 0 0; } .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; } .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; } .evas-panel-footer .evas-btn { width: 100%; padding: 12px; } } /* Color Palette Control */ .evas-palette-box { padding: 20px; width: 100%; height: 150px; grid-column: 1 / -1; /* Span all columns */ margin-bottom: 12px; background: #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: #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 #fff; margin: 4.5px; /* Even spacing like readabler */ } .evas-palette-box .evas-color:hover { border-color: #f0f0f0; } .evas-palette-box .evas-color:focus { outline: none; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #1e73be; } .evas-palette-box .evas-color.evas-active::before { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background-color: #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; }