GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

STYLE: Ultra-compact focus volume control 

Minimal UI Design:
- Reduced volume slider to 60px width (50% smaller than previous)
- Ultra-thin 3px height for minimal visual footprint
- Micro font sizes: speaker 10px, volume display 9px
- Tight 4px gaps and 5px margins for maximum compactness
- Volume display reduced to 20px width

 Focus Session Optimization:
- Tiny, unobtrusive volume control as requested
- Maintains full functionality in minimal space
- Perfect for focus interruption sessions
- Matches user's preferred compact sizing
This commit is contained in:
dilgenfritz 2025-10-31 08:07:17 -05:00
parent 6b5fbcf91c
commit b692260015
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/tasks/interactiveTaskManager.js
View File

@ -1157,15 +1157,15 @@ class InteractiveTaskManager {
autoplay
style="width: 100%; max-height: 400px; border-radius: 8px; margin: 15px 0;">
</video>
<div class="focus-video-controls" style="display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; position: relative;">
<label for="focus-video-volume" style="color: #bbb; font-size: 12px;">🔊</label>
<div class="focus-video-controls" style="display: flex; align-items: center; justify-content: center; gap: 4px; margin: 5px 0; position: relative;">
<label for="focus-video-volume" style="color: #bbb; font-size: 10px;">🔊</label>
<input type="range"
id="focus-video-volume"
min="0"
max="100"
value="50"
style="width: 120px; height: 4px; accent-color: #673ab7;">
<span id="focus-volume-display" style="color: #bbb; font-size: 11px; min-width: 30px;">50%</span>
style="width: 60px; height: 3px; accent-color: #673ab7;">
<span id="focus-volume-display" style="color: #bbb; font-size: 9px; min-width: 20px;">50%</span>
</div>
<div class="video-info" id="video-info" style="font-size: 12px; color: #bbb; margin-top: 5px; text-align: center;">
Loading video...