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

STYLE: Compact focus video volume controls 

UI Size Optimization:
- Reduced volume slider width from 200px to 120px (40% smaller)
- Added explicit height: 4px for thinner slider profile
- Reduced font sizes: speaker icon 14px12px, volume display 12px11px
- Tightened spacing: gaps 10px8px, margins 10px8px
- Minimized volume display width from 35px to 30px

 Focus Session UX:
- More compact volume control takes less screen space
- Maintains full functionality while being less intrusive
- Better proportioned for focus interruption interface
- Cleaner, more minimal focus session appearance
This commit is contained in:
dilgenfritz 2025-10-31 08:04:19 -05:00
parent c94a25bdd3
commit 6b5fbcf91c
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: 10px; margin: 10px 0; position: relative;">
<label for="focus-video-volume" style="color: #bbb; font-size: 14px;">🔊</label>
<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>
<input type="range"
id="focus-video-volume"
min="0"
max="100"
value="50"
style="width: 200px; accent-color: #673ab7;">
<span id="focus-volume-display" style="color: #bbb; font-size: 12px; min-width: 35px;">50%</span>
style="width: 120px; height: 4px; accent-color: #673ab7;">
<span id="focus-volume-display" style="color: #bbb; font-size: 11px; min-width: 30px;">50%</span>
</div>
<div class="video-info" id="video-info" style="font-size: 12px; color: #bbb; margin-top: 5px; text-align: center;">
Loading video...