/* ============================================= Accessibility Toolbar ============================================= */ /* ---------- Floating Buttons (Right Side) ---------- */ .acc-floating-btns { position: fixed; top: 30%; right: 0; z-index: 9999; display: flex; flex-direction: column; gap: 4px; } .acc-floating-btn { width: 38px; height: 38px; background: #c8ff00; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.2s, transform 0.2s; border-radius: 8px 0 0 8px; } .acc-floating-btn:hover { background: #fffb00; transform: translateX(-3px); } .acc-floating-btn.active { background: #a84a22; } .acc-floating-btn .acc-icon-wheelchair { font-size: 24px; } .acc-floating-btn .acc-icon-fontsize { font-weight: 700; font-family: 'TH Sarabun New', 'Sarabun', sans-serif; font-size: 20px; line-height: 1; } /* ---------- Panels ---------- */ .acc-panel { position: fixed; top: 30%; right: 60px; z-index: 9998; background: #fff; border: 3px solid #C1592A; border-radius: 12px; padding: 16px; min-width: 200px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: none; animation: accSlideIn 0.2s ease-out; } .acc-panel.open { display: block; } @keyframes accSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .acc-panel-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 12px; text-align: center; font-family: 'TH Sarabun New', 'Sarabun', sans-serif; } /* ---------- Display Mode Buttons ---------- */ .acc-mode-list { display: flex; flex-direction: column; gap: 8px; } .acc-mode-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid #e0e0e0; border-radius: 8px; background: #fff; color: #333; cursor: pointer; font-size: 16px; font-weight: 600; font-family: 'TH Sarabun New', 'Sarabun', sans-serif; transition: all 0.2s; text-align: center; justify-content: center; } .acc-mode-btn:hover { border-color: #C1592A; background: #fdf2ee; } .acc-mode-btn.active { border-color: #C1592A; background: #C1592A; color: #fff; } .acc-mode-btn .acc-btn-icon { font-size: 18px; } /* ---------- Font Size Buttons ---------- */ .acc-font-controls { display: flex; gap: 16px; justify-content: center; align-items: center; } .acc-font-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #bbb; background: #fff; color: #333; cursor: pointer; font-size: 22px; font-weight: 700; font-family: 'TH Sarabun New', 'Sarabun', sans-serif; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .acc-font-btn:hover { border-color: #C1592A; background: #fdf2ee; color: #C1592A; } .acc-font-btn:active { transform: scale(0.95); } .acc-font-reset-btn { margin-top: 10px; width: 100%; } /* ---------- Accessibility Modes applied to ---------- */ /* High Contrast */ html.acc-high-contrast { filter: contrast(1.5) !important; } /* Invert Colors */ html.acc-invert-colors { filter: invert(1) hue-rotate(180deg) !important; } html.acc-invert-colors img, html.acc-invert-colors video, html.acc-invert-colors iframe { filter: invert(1) hue-rotate(180deg) !important; } /* Grayscale */ html.acc-grayscale { filter: grayscale(1) !important; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .acc-floating-btns { top: auto; bottom: 80px; } .acc-panel { top: auto; bottom: 140px; right: 60px; min-width: 180px; } .acc-floating-btn { width: 44px; height: 44px; font-size: 18px; } }