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/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;