improve player look
This commit is contained in:
parent
8008d68c8b
commit
007ad4581b
@ -347,15 +347,16 @@ footer {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: linear-gradient(120deg, #0b1220, #0f172a);
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 14px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1000; /* Make sure it sits on top */
|
z-index: 1000; /* Make sure it sits on top */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
|
pointer-events: none; /* avoid blocking underlying content */
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .audio-player-container {
|
||||||
|
pointer-events: auto; /* keep controls clickable */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal Styles */
|
/* Modal Styles */
|
||||||
@ -1085,46 +1086,86 @@ footer {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
color: var(--brand-ink);
|
color: var(--brand-ink);
|
||||||
}
|
}
|
||||||
/* Buttons - harmonize with brand palette */
|
/* Buttons - harmonize with dark blue palette */
|
||||||
.btn-primary {
|
.btn {
|
||||||
background: linear-gradient(135deg, var(--brand-sky), #3b82f6);
|
border-radius: 10px;
|
||||||
border: 1px solid var(--brand-sky);
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, var(--brand-navy), var(--dark-background));
|
||||||
|
border: 1px solid var(--brand-navy);
|
||||||
|
color: #e5e7eb;
|
||||||
|
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background: linear-gradient(135deg, #2563eb, var(--brand-sky));
|
background: linear-gradient(135deg, #1b2a44, #0d1524);
|
||||||
border-color: #2563eb;
|
border-color: #1b2a44;
|
||||||
box-shadow: 0 12px 28px rgba(59, 130, 246, 0.22);
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active,
|
.btn-primary:active,
|
||||||
.btn-primary:focus {
|
.btn-primary:focus {
|
||||||
background: linear-gradient(135deg, #1d4ed8, #2563eb);
|
background: linear-gradient(135deg, #0d1524, #0a1020);
|
||||||
border-color: #1d4ed8;
|
border-color: #0d1524;
|
||||||
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.26) inset;
|
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
|
||||||
|
color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: linear-gradient(135deg, #1f2e4a, #0f172a);
|
||||||
|
border: 1px solid #1f2e4a;
|
||||||
|
color: #e5e7eb;
|
||||||
|
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover,
|
||||||
|
.btn-secondary:focus {
|
||||||
|
background: linear-gradient(135deg, #223456, #111a2f);
|
||||||
|
border-color: #223456;
|
||||||
|
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:active {
|
||||||
|
background: linear-gradient(135deg, #0c1220, #0a0f1a);
|
||||||
|
border-color: #0c1220;
|
||||||
|
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-secondary {
|
.btn-outline-secondary {
|
||||||
border-color: var(--border-color);
|
border: 1px solid var(--brand-navy);
|
||||||
color: var(--brand-ink);
|
color: var(--brand-navy);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-secondary:hover,
|
.btn-outline-secondary:hover,
|
||||||
.btn-outline-secondary:focus {
|
.btn-outline-secondary:focus {
|
||||||
background: linear-gradient(135deg, #fff, #f4f7fb);
|
background: linear-gradient(135deg, #f7f9fd, #eef2f9);
|
||||||
color: var(--brand-ink);
|
color: var(--brand-navy);
|
||||||
border-color: var(--border-color);
|
border-color: var(--brand-navy);
|
||||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-secondary:active {
|
.btn-outline-secondary:active {
|
||||||
background: #eef2f7;
|
background: #e5eaf5;
|
||||||
color: var(--brand-ink);
|
color: var(--brand-navy);
|
||||||
border-color: var(--border-color);
|
border-color: var(--brand-navy);
|
||||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) inset;
|
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-light {
|
||||||
|
background: linear-gradient(135deg, #e8ecf4, #dfe6f3);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--brand-ink);
|
||||||
|
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-light:hover,
|
||||||
|
.btn-light:focus {
|
||||||
|
background: linear-gradient(135deg, #dfe5f1, #d7dfef);
|
||||||
|
color: var(--brand-ink);
|
||||||
|
border-color: var(--brand-navy);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,11 +2,13 @@
|
|||||||
background: linear-gradient(135deg, #f9fbff, #eef4ff);
|
background: linear-gradient(135deg, #f9fbff, #eef4ff);
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
|
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
|
||||||
border: 1px solid #d7e3f4;
|
border: 8px solid #0b1220;
|
||||||
padding: 12px 16px;
|
padding: 12px 12px;
|
||||||
width: min(1100px, 100%);
|
width: min(600px, 100%);
|
||||||
display: none;
|
display: none;
|
||||||
color: #1f2937;
|
color: #1f2937;
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Now Playing Info */
|
/* Now Playing Info */
|
||||||
@ -106,33 +108,51 @@
|
|||||||
|
|
||||||
.player-button,
|
.player-button,
|
||||||
.sound-button {
|
.sound-button {
|
||||||
background-color: #0f172a;
|
width: var(--control-size);
|
||||||
border: 1px solid #0f172a;
|
height: var(--control-size);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 6px;
|
display: inline-flex;
|
||||||
border-radius: 12px;
|
align-items: center;
|
||||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
justify-content: center;
|
||||||
}
|
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||||
|
padding: 0;
|
||||||
.player-button {
|
line-height: 1;
|
||||||
width: var(--control-size);
|
overflow: visible;
|
||||||
height: var(--control-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sound-button {
|
|
||||||
width: var(--control-size);
|
|
||||||
height: var(--control-size);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-button:hover,
|
.player-button:hover,
|
||||||
.sound-button:hover {
|
.sound-button:hover {
|
||||||
background-color: #0b1220;
|
background: rgba(15, 23, 42, 0.08);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-button:active,
|
||||||
|
.sound-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
background: rgba(15, 23, 42, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-button:focus-visible,
|
||||||
|
.sound-button:focus-visible {
|
||||||
|
outline: 2px solid rgba(20, 33, 61, 0.85);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-button svg,
|
||||||
|
.sound-button svg {
|
||||||
|
width: var(--control-size);
|
||||||
|
height: var(--control-size);
|
||||||
|
display: block;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.player-button svg path,
|
.player-button svg path,
|
||||||
.sound-button svg path {
|
.sound-button svg path {
|
||||||
fill: #f9fbff;
|
fill: var(--dark-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline::-webkit-slider-thumb,
|
.timeline::-webkit-slider-thumb,
|
||||||
|
|||||||
@ -167,17 +167,14 @@
|
|||||||
</audio>
|
</audio>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button class="player-button icon-color">
|
<button class="player-button icon-color">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<input type="range" class="timeline" max="100" value="0" step="0.1">
|
<input type="range" class="timeline" max="100" value="0" step="0.1">
|
||||||
<div id="timeInfo" class="now-playing-info"></div>
|
<div id="timeInfo" class="now-playing-info"></div>
|
||||||
</div>
|
</div>
|
||||||
<button class="sound-button icon-color" onclick="player.fileDownload()">
|
<button class="sound-button icon-color" onclick="player.fileDownload()">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" width="35" height="35">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z" />
|
<path d="M12 2.25A9.75 9.75 0 1 1 2.25 12 9.75 9.75 0 0 1 12 2.25Zm0 5a.75.75 0 0 0-.75.75v4.19l-1.72-1.72a.75.75 0 1 0-1.06 1.06l3.03 3.03a.75.75 0 0 0 1.06 0l3.03-3.03a.75.75 0 1 0-1.06-1.06L12.75 12.2V8a.75.75 0 0 0-.75-.75ZM7.5 15.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user