/* Accessability by Foxco - frontend styles */ /* Uses --aacf-bg and --aacf-accent, injected inline per active preset */ #aacf-access-root { position: fixed; z-index: 999999; font-family: Arial, Helvetica, sans-serif; } #aacf-access-root.aacf-pos-bottom-right { bottom: 20px; right: 20px; } #aacf-access-root.aacf-pos-bottom-left { bottom: 20px; left: 20px; } #aacf-access-root.aacf-pos-top-right { top: 20px; right: 20px; } #aacf-access-root.aacf-pos-top-left { top: 20px; left: 20px; } #aacf-access-root.aacf-pos-middle-right { top: 50%; right: 20px; transform: translateY(-50%); } #aacf-access-root.aacf-pos-middle-left { top: 50%; left: 20px; transform: translateY(-50%); } #aacf-access-toggle { width: 52px; height: 52px; border-radius: 50%; background: var(--aacf-bg, #1a1a2e); color: var(--aacf-accent, #df6737); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } #aacf-access-toggle .aacf-icon { font-size: 26px; line-height: 1; } #aacf-access-panel { display: none; position: absolute; width: 260px; background: #ffffff; color: #1a1a1a; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); overflow: hidden; } /* bottom-anchored buttons open the panel upward, others open downward */ .aacf-pos-bottom-right #aacf-access-panel, .aacf-pos-bottom-left #aacf-access-panel { bottom: 62px; } .aacf-pos-top-right #aacf-access-panel, .aacf-pos-top-left #aacf-access-panel, .aacf-pos-middle-right #aacf-access-panel, .aacf-pos-middle-left #aacf-access-panel { top: 62px; } .aacf-pos-bottom-right #aacf-access-panel, .aacf-pos-top-right #aacf-access-panel, .aacf-pos-middle-right #aacf-access-panel { right: 0; } .aacf-pos-bottom-left #aacf-access-panel, .aacf-pos-top-left #aacf-access-panel, .aacf-pos-middle-left #aacf-access-panel { left: 0; } #aacf-access-panel.aacf-open { display: block; } .aacf-panel-header { background: var(--aacf-bg, #1a1a2e); color: #ffffff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: bold; } #aacf-access-close { background: none; border: none; color: #ffffff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .aacf-panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .aacf-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .aacf-btn-group { display: flex; gap: 4px; } .aacf-panel-body button { font-size: 13px; cursor: pointer; border: 1px solid #d5d5d5; background: #f7f7f7; border-radius: 4px; padding: 6px 10px; } .aacf-toggle-btn { text-align: left; } .aacf-toggle-btn[aria-pressed="true"] { background: var(--aacf-accent, #df6737); color: #ffffff; border-color: var(--aacf-accent, #df6737); } #aacf-access-reset { margin-top: 4px; font-size: 12px; color: #555555; background: none; border: none; text-align: left; padding: 0; } /* ---- Applied states, added to ---- */ html.aacf-contrast-on { filter: contrast(1.35) grayscale(0.1); } html.aacf-contrast-on body { background: #000000 !important; color: #ffffff !important; } html.aacf-underline-on a { text-decoration: underline !important; } html.aacf-font-on body, html.aacf-font-on body * { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.6 !important; } html.aacf-cursor-on, html.aacf-cursor-on * { cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' stroke='%23ffffff' stroke-width='1' d='M3 2l14 6-5.5 2.5L14 16z'/%3E%3C/svg%3E") 4 4, auto !important; }