Fork to yt-mp3-ui
Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
parent
84a8e0faa7
commit
9c6360e9c4
GPG key ID:
9A099EDA51316854
10 changed files with 243 additions and 288 deletions
|
|
@ -8,6 +8,11 @@
|
|||
--border-focus: rgba(99,102,241,0.6);
|
||||
--text: #f1f1f5;
|
||||
--text-muted: #8b8b9e;
|
||||
--input-bg: rgba(255,255,255,0.05);
|
||||
--tag-bg: rgba(255,255,255,0.07);
|
||||
--track: rgba(255,255,255,0.07);
|
||||
--card-shadow: none;
|
||||
--orb-opacity: 0.18;
|
||||
--primary: #6366f1;
|
||||
--primary-hover: #4f52e0;
|
||||
--success: #22c55e;
|
||||
|
|
@ -16,6 +21,20 @@
|
|||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--bg: #f4f5fb;
|
||||
--surface: #ffffff;
|
||||
--surface-hover: rgba(0,0,0,0.04);
|
||||
--border: rgba(0,0,0,0.09);
|
||||
--text: #16161f;
|
||||
--text-muted: #5c5c72;
|
||||
--input-bg: #ffffff;
|
||||
--tag-bg: rgba(0,0,0,0.05);
|
||||
--track: rgba(0,0,0,0.09);
|
||||
--card-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
--orb-opacity: 0.12;
|
||||
}
|
||||
|
||||
html { font-size: 16px; }
|
||||
|
||||
body {
|
||||
|
|
@ -27,6 +46,7 @@ body {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Ambient background orbs */
|
||||
|
|
@ -35,7 +55,7 @@ body {
|
|||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.18;
|
||||
opacity: var(--orb-opacity);
|
||||
}
|
||||
.orb-1 { width: 500px; height: 500px; background: #6366f1; top: -150px; left: -100px; }
|
||||
.orb-2 { width: 400px; height: 400px; background: #8b5cf6; bottom: -100px; right: -80px; }
|
||||
|
|
@ -53,7 +73,7 @@ body {
|
|||
}
|
||||
|
||||
/* Header */
|
||||
header { display: flex; justify-content: center; }
|
||||
header { display: flex; justify-content: center; position: relative; }
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -63,6 +83,28 @@ header { display: flex; justify-content: center; }
|
|||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.theme-toggle:hover { color: var(--text); border-color: var(--border-focus); }
|
||||
.theme-toggle svg { display: block; }
|
||||
.theme-toggle .icon-moon { display: none; }
|
||||
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
|
||||
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
|
||||
|
||||
/* Hero */
|
||||
.hero { text-align: center; }
|
||||
.hero h1 {
|
||||
|
|
@ -95,6 +137,7 @@ header { display: flex; justify-content: center; }
|
|||
gap: 20px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* Input row */
|
||||
|
|
@ -114,7 +157,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
#url-input {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
|
|
@ -237,7 +280,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
.meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.tag {
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--tag-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
|
|
@ -245,39 +288,6 @@ header { display: flex; justify-content: center; }
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Format selector */
|
||||
.format-section { display: flex; flex-direction: column; gap: 10px; }
|
||||
.format-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.select-wrap { position: relative; }
|
||||
.select-wrap select {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
padding: 11px 40px 11px 14px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.select-wrap select:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
|
||||
}
|
||||
.select-wrap select option { background: #1a1a2e; color: var(--text); }
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-wrap {
|
||||
display: flex;
|
||||
|
|
@ -303,7 +313,7 @@ header { display: flex; justify-content: center; }
|
|||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--track);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -330,7 +340,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--track);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue