hibna/player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
hibna
2025-10-30 04:02:31 +03:00
parent 35e07b059f
commit 183cc65455
13 changed files with 265 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/controls/CenterPlayButton.css
+20 -11
View File
@@ -1,3 +1,8 @@
/* ============================================
CENTER PLAY BUTTON
Clean & Modern Design
============================================ */
.center-play-overlay {
position: absolute;
top: 0;
@@ -12,8 +17,8 @@
}
.center-play-button {
width: 80px;
height: 80px;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: var(--player-primary);
border: none;
@@ -22,34 +27,38 @@
align-items: center;
justify-content: center;
transition: all var(--player-transition-normal) ease;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
pointer-events: all;
outline: none;
}
.center-play-button:hover {
background-color: var(--player-primary-hover);
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(239, 68, 68, 0.6);
}
.center-play-button:active {
transform: scale(1);
}
.center-play-button:focus-visible {
outline: 2px solid var(--player-primary);
outline-offset: 4px;
}
.center-play-button svg {
width: 40px;
height: 40px;
margin-left: 4px; /* Optical adjustment for play icon */
width: 36px;
height: 36px;
margin-left: 3px;
}
@media (max-width: 640px) {
.center-play-button {
width: 64px;
height: 64px;
width: 60px;
height: 60px;
}
.center-play-button svg {
width: 32px;
height: 32px;
width: 30px;
height: 30px;
}
}
src/components/controls/ControlButton.css
+7 -2
View File
@@ -1,3 +1,8 @@
/* ============================================
CONTROL BUTTON
Clean & Modern Design
============================================ */
.control-button {
background: none;
border: none;
@@ -10,6 +15,7 @@
border-radius: var(--player-radius-sm);
transition: all var(--player-transition-fast) ease;
position: relative;
outline: none;
}
.control-button:hover {
@@ -27,7 +33,7 @@
}
.control-button:disabled {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
}
@@ -36,7 +42,6 @@
transform: none;
}
/* Icon sizing */
.control-button svg {
width: var(--player-icon-md);
height: var(--player-icon-md);
src/components/controls/ProgressBar.css
+9 -10
View File
@@ -1,3 +1,8 @@
/* ============================================
PROGRESS BAR
Clean & Modern Design
============================================ */
.progress-bar {
position: relative;
width: 100%;
@@ -27,7 +32,7 @@
top: 0;
left: 0;
height: 100%;
background-color: var(--player-buffered);
background-color: var(--player-progress-buffered);
transition: width 0.1s ease;
}
@@ -51,7 +56,6 @@
transform: scale(0);
transition: transform var(--player-transition-fast) ease;
margin-right: -6px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.progress-bar:hover .progress-handle,
@@ -61,17 +65,16 @@
.progress-tooltip {
position: absolute;
bottom: calc(100% + 8px);
bottom: calc(100% + 10px);
transform: translateX(-50%);
background-color: var(--player-bg-menu);
color: var(--player-text);
padding: 4px 8px;
padding: 6px 12px;
border-radius: var(--player-radius-sm);
font-size: 12px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
box-shadow: var(--player-shadow-md);
z-index: 10;
}
@@ -103,10 +106,6 @@
width: 10px;
height: 10px;
margin-right: -5px;
}
/* Always show handle on mobile for easier touch interaction */
.progress-handle {
transform: scale(1);
}
}
src/components/controls/TimeDisplay.css
+5
View File
@@ -1,3 +1,8 @@
/* ============================================
TIME DISPLAY
Clean & Modern Design
============================================ */
.time-display {
display: flex;
align-items: center;
src/components/controls/VolumeControl.css
+14 -16
View File
@@ -1,3 +1,8 @@
/* ============================================
VOLUME CONTROL
Clean & Modern Design
============================================ */
.volume-control {
display: flex;
align-items: center;
@@ -8,17 +13,16 @@
.volume-slider-container {
position: relative;
width: 0;
height: 6px;
height: 5px;
background-color: var(--player-progress-bg);
border-radius: var(--player-radius-full);
overflow: visible;
transition: width var(--player-transition-normal) ease, opacity var(--player-transition-normal) ease;
opacity: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.volume-slider-container.visible {
width: 100px;
width: 90px;
opacity: 1;
}
@@ -39,34 +43,30 @@
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--player-primary);
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
transition: transform var(--player-transition-fast) ease;
}
.volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.volume-slider::-moz-range-thumb {
width: 16px;
height: 16px;
width: 14px;
height: 14px;
border: none;
border-radius: 50%;
background-color: var(--player-primary);
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
transition: transform var(--player-transition-fast) ease;
}
.volume-slider::-moz-range-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.volume-slider:focus {
@@ -88,15 +88,13 @@
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, var(--player-primary) 0%, var(--player-primary-hover) 100%);
background: var(--player-primary);
pointer-events: none;
transition: width 0.1s ease;
z-index: 1;
border-radius: var(--player-radius-full);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
/* Mobile: Show slider vertically */
@media (max-width: 640px) {
.volume-slider-container.visible {
width: 70px;