/** * Eye Gaze Core - Styles * Version: 1.0.1 * * Provides styling for dwell animations and rest mode */ /* Hide the system cursor everywhere when the user opts in via the Cursor row in the Eye Gaze settings panel. The class lives on so it covers the whole document including modal overlays. */ html.eg-cursor-hidden, html.eg-cursor-hidden * { cursor: none !important; } /* ==================== DWELL OVERLAY BASE ==================== */ .dwell-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1000; } /* ==================== ANIMATION: RING ==================== */ .dwell-overlay-ring { border: 3px solid transparent; border-radius: inherit; --progress: 0; --dwell-color: rgba(255, 215, 0, 1); } .dwell-overlay-ring::before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: inherit; border: 3px solid var(--dwell-color); clip-path: polygon( 50% 50%, 50% 0%, calc(50% + 50% * sin(var(--progress) * 3.6deg)) calc(50% - 50% * cos(var(--progress) * 3.6deg)), 100% 100%, 0% 100% ); box-shadow: 0 0 10px var(--dwell-color); } /* Alternative ring implementation using conic-gradient (more reliable) */ .dwell-overlay-ring::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: inherit; background: conic-gradient( from -90deg, var(--dwell-color) calc(var(--progress) * 1%), transparent calc(var(--progress) * 1%) ); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; padding: 3px; box-shadow: 0 0 10px var(--dwell-color); } /* ==================== ANIMATION: FILLED CIRCLE ==================== */ .dwell-overlay-filled-circle { --progress: 0; --dwell-color: rgba(255, 215, 0, 0.5); } .dwell-overlay-filled-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: conic-gradient( from -90deg, var(--dwell-color) calc(var(--progress) * 1%), transparent calc(var(--progress) * 1%) ); box-shadow: 0 0 15px var(--dwell-color); } /* ==================== ANIMATION: THICK RING ==================== */ .dwell-overlay-thick-ring { --progress: 0; --dwell-color: rgba(255, 215, 0, 1); } .dwell-overlay-thick-ring::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: conic-gradient( from -90deg, var(--dwell-color) calc(var(--progress) * 1%), transparent calc(var(--progress) * 1%) ); /* Create donut/ring effect with mask */ mask: radial-gradient(circle, transparent 50%, black 50%); -webkit-mask: radial-gradient(circle, transparent 50%, black 50%); box-shadow: 0 0 15px var(--dwell-color); } /* ==================== ANIMATION: RADIAL FILL ==================== */ .dwell-overlay-radial-fill { border-radius: inherit; /* Background set dynamically via JavaScript */ } /* ==================== ANIMATION: FILL ==================== */ .dwell-overlay-fill { background: linear-gradient(to right, rgba(255, 215, 0, 0.4) 0%, transparent 0%); transition: background 50ms linear; border-radius: inherit; } /* ==================== ANIMATION: GLOW ==================== */ .dwell-overlay-glow { background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%); opacity: 0; transition: opacity 50ms linear, box-shadow 50ms linear; animation: pulse 1s ease-in-out infinite; border-radius: inherit; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ==================== REST MODE INDICATOR ==================== */ body.rest-mode-active::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, #4CAF50 0%, #8BC34A 25%, #CDDC39 50%, #8BC34A 75%, #4CAF50 100% ); background-size: 200% 100%; animation: restModeGradient 3s linear infinite; z-index: 9999; pointer-events: none; } @keyframes restModeGradient { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } body.rest-mode-active::after { content: 'REST MODE'; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(76, 175, 80, 0.95); color: white; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: bold; z-index: 9999; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); animation: restModeBadge 2s ease-in-out infinite; } @keyframes restModeBadge { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } /* ==================== REST BUTTON STYLES ==================== */ .rest-button { position: relative; background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; border: none; padding: 15px 30px; font-size: 18px; font-weight: bold; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); min-width: 120px; min-height: 60px; } .rest-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .rest-button.active { background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%); box-shadow: 0 0 20px rgba(139, 195, 74, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2); } .rest-button::before { content: '⏸'; margin-right: 8px; } .rest-button.active::before { content: '▶'; } /* ==================== GAME BUTTON BASE STYLES ==================== */ .eye-gaze-button { position: relative; background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; border: none; padding: 15px 30px; font-size: 18px; font-weight: bold; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); min-width: 100px; min-height: 60px; overflow: hidden; } .eye-gaze-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .eye-gaze-button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .eye-gaze-button.disabled { opacity: 0.5; cursor: not-allowed; } /* Button variants */ .eye-gaze-button.primary { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); } .eye-gaze-button.success { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); } .eye-gaze-button.danger { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); } .eye-gaze-button.warning { background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); } .eye-gaze-button.secondary { background: linear-gradient(135deg, #607D8B 0%, #455A64 100%); } /* ==================== SETTINGS PANEL STYLES ==================== */ .settings-panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 20px 0; } .settings-panel h3 { margin-top: 0; color: #333; font-size: 20px; margin-bottom: 15px; } .setting-item { margin-bottom: 20px; } .setting-item label { display: block; color: #555; font-weight: 600; margin-bottom: 8px; font-size: 14px; } .setting-item input[type="range"] { width: 100%; height: 8px; border-radius: 5px; background: #ddd; outline: none; -webkit-appearance: none; } .setting-item input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2196F3; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .setting-item input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #2196F3; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .setting-item select { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 5px; font-size: 14px; background: white; cursor: pointer; } .setting-value { display: inline-block; margin-left: 10px; color: #2196F3; font-weight: bold; min-width: 60px; } /* ==================== RTL SUPPORT ==================== */ html[dir="rtl"] .rest-button::before { margin-right: 0; margin-left: 8px; } html[dir="rtl"] body.rest-mode-active::after { left: auto; right: 50%; transform: translateX(50%); } /* ==================== RESPONSIVE DESIGN ==================== */ @media (max-width: 768px) { .eye-gaze-button { font-size: 16px; padding: 12px 24px; min-height: 50px; } .rest-button { font-size: 16px; padding: 12px 24px; min-height: 50px; } .settings-panel { padding: 15px; } } /* ==================== EYE GAZE SETTINGS PANEL (full-screen tile grid) ==================== Replaces the previous demo-landscape design (gradients, drop shadows, cramped sizing) with the AAC tile aesthetic the chess settings page uses: every tile uniform shape, monochrome by default, selection signalled by --state-selected, big enough for eye-gaze targeting. Layout: 7-col grid (1 caption col + 6 button cols). Animation row (caption + 6 tiles fills full width), color row (same), three timing rows (caption + −/value/+ + a 3-col invisible spacer pinning the +/− group to the left), utility row (1-col leading spacer + Glow / Language / Close, each spans 2 cols). Class names match the JS event hooks (.setting-btn, .timing-btn, .timing-value, .color-dot, .language-btn, .popup-close-btn) — only the visual styling changed, not the markup contracts. */ .eye-gaze-settings { display: grid; grid-template-columns: 1.5fr repeat(6, 1fr); grid-auto-rows: 1fr; height: 100vh; gap: var(--gap, 12px); padding: var(--gap, 12px); background: var(--bg, #1a2332); box-sizing: border-box; overflow: hidden; } /* Tile base — used by animation, color, timing − / + buttons, and utility row buttons. Selection signalled by --state-selected, never by size. */ .eye-gaze-settings .setting-btn { background: var(--surface, #2a3a52); border: var(--border-width, 2px) solid #fff; border-radius: var(--radius, 8px); color: var(--text, #fff); font-weight: 700; font-size: clamp(14px, calc((100vh - 100px) / 35), 22px); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; box-sizing: border-box; padding: 5px; transition: background 0.2s, border-color 0.2s; text-align: center; min-width: 0; min-height: 0; } .eye-gaze-settings .setting-btn:hover { background: var(--surface-hover, #354766); } .eye-gaze-settings .setting-btn.selected { background: var(--state-selected, #4CAF50); border-color: var(--border-selected, rgba(76, 175, 80, 0.6)); } /* Color tile — colored dot + label inside the regular tile chrome */ .eye-gaze-settings .color-dot { width: clamp(16px, calc(100vh / 30), 32px); height: clamp(16px, calc(100vh / 30), 32px); border-radius: 50%; display: inline-block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); flex-shrink: 0; } /* Caption column — non-interactive row label, no border, no background. Muted text so it reads as a label, not a control. Used by every caption-row (animation type, color, dwell time, exit/distance tolerance). */ .eye-gaze-settings .eg-caption { display: flex; align-items: center; justify-content: flex-start; padding: 0 calc(var(--gap, 12px)); color: var(--text-muted, #a8b5c8); font-weight: 600; font-size: clamp(14px, calc((100vh - 100px) / 35), 22px); pointer-events: none; user-select: none; } /* Spacer that fills cols 5-7 of a numeric timing row so the next row starts cleanly at col 1. Renders nothing (no background, no border). */ .eye-gaze-settings .eg-row-spacer { grid-column: span 3; } /* Spacer that holds col 1 of the utility row. Lets the three utility buttons (each span 2) flow into cols 2-7, mirroring the empty caption col of the rows above. */ .eye-gaze-settings .eg-utility-leading-spacer { grid-column: 1; } .eye-gaze-settings .timing-value { display: flex; align-items: center; justify-content: center; background: var(--surface, #2a3a52); border: var(--border-width, 2px) solid #fff; border-radius: var(--radius, 8px); color: var(--text, #fff); font-weight: 700; font-family: 'Courier New', monospace; font-size: clamp(14px, calc((100vh - 100px) / 28), 28px); box-sizing: border-box; min-width: 0; } .eye-gaze-settings .timing-btn { font-size: clamp(20px, calc((100vh - 100px) / 18), 36px); font-weight: 900; } /* Utility row: Glow / Language / Close, each spans 2 cols (3 buttons fill 6). */ .eye-gaze-settings .eg-utility { grid-column: span 2; } .eye-gaze-settings .eg-close { background: var(--state-danger, #d32f2f); border-color: var(--state-danger, #d32f2f); } .eye-gaze-settings .eg-close:hover { background: #b71c1c; border-color: #b71c1c; } /* Language popup — separate full-screen overlay with its own 5-col grid. 15 langs fill rows 1-3 (5 cols each). Row 4 is reserved for future languages: 5 disabled placeholder slots, no text, no dwell. Close button spans row 5 full-width. JS toggles inline display: 'grid' / 'none' to show / hide. */ .popup-overlay { position: fixed; inset: 0; z-index: 100; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: var(--gap, 12px); padding: var(--gap, 12px); background: var(--bg, #1a2332); box-sizing: border-box; /* display is set by JS — 'grid' when shown, 'none' when hidden */ } /* Reserved-slot placeholders. Same size as language buttons (auto-sized by the grid) but visually disabled — page background, faint dashed border, no text, no hover/dwell. Adding a new language replaces one of these without reflowing the layout. */ .lang-placeholder { background: var(--bg, #1a2332); border: var(--border-width, 2px) dashed rgba(255, 255, 255, 0.12); border-radius: var(--radius, 8px); pointer-events: none; user-select: none; box-sizing: border-box; min-width: 0; min-height: 0; } .language-btn { background: var(--surface, #2a3a52); border: var(--border-width, 2px) solid #fff; border-radius: var(--radius, 8px); color: var(--text, #fff); font-weight: 700; font-size: clamp(14px, calc(100vh / 30), 26px); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; padding: 5px; min-width: 0; min-height: 0; transition: background 0.2s, border-color 0.2s; } .language-btn:hover { background: var(--surface-hover, #354766); } .language-btn.selected { background: var(--state-selected, #4CAF50); border-color: var(--border-selected, rgba(76, 175, 80, 0.6)); } .popup-close-btn { grid-column: 1 / 6; background: var(--state-danger, #d32f2f); border: var(--border-width, 2px) solid #fff; border-radius: var(--radius, 8px); color: var(--text, #fff); font-weight: 700; font-size: clamp(14px, calc(100vh / 22), 30px); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; padding: 5px; min-width: 0; min-height: 0; transition: background 0.2s; } .popup-close-btn:hover { background: #b71c1c; } /* 'None' animation — overlay element is created but renders nothing */ .dwell-overlay-none { /* intentionally empty */ } /* ==================== ACCESSIBILITY ==================== */ .eye-gaze-button:focus, .rest-button:focus { outline: 3px solid #FFD700; outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .dwell-overlay, .eye-gaze-button, .rest-button { transition: none; animation: none; } .dwell-overlay-glow { animation: none; } body.rest-mode-active::before, body.rest-mode-active::after { animation: none; } } /* High contrast mode support */ @media (prefers-contrast: high) { .eye-gaze-button, .rest-button { border: 2px solid currentColor; } .dwell-overlay-ring::after { border-width: 4px; } } /* ==================== ADAPTIVE GRID LAYOUT SYSTEM ==================== */ /* * Automatic screen-adaptive grid system for game layouts * Usage: Add .adaptive-grid-page class to your game page container * Ensures grid + frame always fits within viewport */ :root { /* Adaptive cell size calculation */ /* Height: 8 rows + 1 for frame (0.5 top + 0.5 bottom) = 9 units */ /* Width: 16 grid units + 1 for frame (0.5 left + 0.5 right) = 17 units */ --height-based-size: calc(100vh / 9); --width-based-size: calc(100vw / 17); /* Use smaller value to ensure everything fits */ --adaptive-cell-size: min(var(--height-based-size), var(--width-based-size)); /* Grid dimensions */ --grid-row-height: var(--adaptive-cell-size); --grid-cell-size: var(--adaptive-cell-size); --grid-control-width: calc(var(--adaptive-cell-size) * 2); --grid-gap: 4px; /* Frame dimensions (0.5× cell size on each side) */ --frame-width: calc(var(--adaptive-cell-size) * 0.5); --frame-height: calc(var(--adaptive-cell-size) * 0.5); --frame-color: #1a1a1a; --frame-border: #555; } /* Base grid page container */ .adaptive-grid-page { display: grid; grid-template-columns: repeat(8, var(--grid-cell-size)) /* Board/game columns */ repeat(4, var(--grid-control-width)); /* Control panel columns */ grid-template-rows: repeat(8, var(--grid-row-height)); gap: var(--grid-gap); max-height: 100vh; max-width: 100vw; /* Frame border around the grid */ padding: var(--frame-height) var(--frame-width); background: var(--frame-color); border: 2px solid var(--frame-border); box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); } /* Grid positioning classes - Board area (8×8) */ .grid-board-area { grid-column: 1 / 9; grid-row: 1 / 9; } /* Grid positioning classes - Control panel (Right side) */ .grid-control-row-1 { grid-column: 9 / 13; grid-row: 1 / 2; } .grid-control-row-2 { grid-column: 9 / 13; grid-row: 2 / 3; } .grid-control-row-3 { grid-column: 9 / 13; grid-row: 3 / 4; } .grid-control-row-4 { grid-column: 9 / 13; grid-row: 4 / 5; } .grid-control-row-5 { grid-column: 9 / 13; grid-row: 5 / 6; } .grid-control-row-6 { grid-column: 9 / 13; grid-row: 6 / 7; } .grid-control-row-7 { grid-column: 9 / 13; grid-row: 7 / 8; } .grid-control-row-8 { grid-column: 9 / 13; grid-row: 8 / 9; } /* Split rows for dual controls (e.g., turn indicators) */ .grid-control-row-1-left { grid-column: 9 / 11; grid-row: 1 / 2; } .grid-control-row-1-right { grid-column: 11 / 13; grid-row: 1 / 2; } /* Control button base styling */ .grid-control-btn { border: 3px solid #fff; border-radius: 8px; padding: 8px; color: #fff; font-size: clamp(12px, calc(var(--grid-row-height) * 0.16), 18px); font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; position: relative; background: #555; height: 100%; width: 100%; overflow: visible; /* Important: Don't clip dwell animations */ } .grid-control-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .grid-btn-icon { font-size: calc(var(--grid-row-height) * 0.35); line-height: 1; } .grid-btn-label { font-size: clamp(11px, calc(var(--grid-row-height) * 0.14), 16px); font-weight: 700; line-height: 1.2; } /* Responsive: Smaller screens reduce gap */ @media (max-width: 1024px) { :root { --grid-gap: 2px; } } /* Responsive: Portrait or narrow screens switch to vertical layout */ @media (max-height: 600px), (max-width: 800px) { .adaptive-grid-page { grid-template-columns: repeat(8, var(--grid-cell-size)); grid-template-rows: auto; height: auto; gap: 8px; padding: 10px; } .grid-board-area { grid-column: 1 / 9; grid-row: 1 / 2; } .grid-control-row-1, .grid-control-row-2, .grid-control-row-3, .grid-control-row-4, .grid-control-row-5, .grid-control-row-6, .grid-control-row-7, .grid-control-row-8, .grid-control-row-1-left, .grid-control-row-1-right { grid-column: 1 / 9; grid-row: auto; } .grid-control-btn { min-height: 70px; } } /* Responsive: Mobile vertical layout */ @media (max-width: 768px) { :root { --adaptive-cell-size: calc(95vw / 8); } body { overflow-y: auto; } .adaptive-grid-page { grid-template-columns: repeat(8, var(--adaptive-cell-size)); grid-template-rows: auto; height: auto; gap: 8px; padding: 10px; } .grid-board-area { grid-column: 1 / 9; grid-row: 1 / 2; } .grid-control-row-1, .grid-control-row-2, .grid-control-row-3, .grid-control-row-4, .grid-control-row-5, .grid-control-row-6, .grid-control-row-7, .grid-control-row-8, .grid-control-row-1-left, .grid-control-row-1-right { grid-column: 1 / 9; grid-row: auto; } .grid-control-btn { min-height: 80px; } }