382 lines
27 KiB
CSS
382 lines
27 KiB
CSS
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--font-sans:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
||
|
|
--font-mono:'JetBrains Mono','Fira Code','Consolas',monospace;
|
||
|
|
--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;
|
||
|
|
--transition:0.3s cubic-bezier(0.4,0,0.2,1);
|
||
|
|
--bg-image:url('https://t.alcy.cc/moez');
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="light"]{
|
||
|
|
--bg-primary:rgba(255,255,255,0.75);--bg-secondary:rgba(255,255,255,0.85);
|
||
|
|
--bg-tertiary:rgba(248,250,252,0.9);--bg-card:rgba(255,255,255,0.8);
|
||
|
|
--bg-hover:rgba(0,0,0,0.04);--bg-input:rgba(255,255,255,0.9);
|
||
|
|
--text-primary:#1a1a2e;--text-secondary:#4a4a6a;--text-muted:#8888a0;
|
||
|
|
--border-color:rgba(0,0,0,0.08);--border-strong:rgba(0,0,0,0.12);
|
||
|
|
--accent:#6c5ce7;--accent-light:#a29bfe;--accent-bg:rgba(108,92,231,0.1);
|
||
|
|
--success:#00b894;--success-bg:rgba(0,184,148,0.1);
|
||
|
|
--warning:#fdcb6e;--warning-bg:rgba(253,203,110,0.15);
|
||
|
|
--danger:#e17055;--danger-bg:rgba(225,112,85,0.1);
|
||
|
|
--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 4px 20px rgba(0,0,0,0.08);
|
||
|
|
--shadow-lg:0 8px 40px rgba(0,0,0,0.12);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(108,92,231,0.12);--tag-lx-text:#6c5ce7;
|
||
|
|
--tag-qzv2-bg:rgba(0,184,148,0.12);--tag-qzv2-text:#00b894;
|
||
|
|
--tag-musicfree-bg:rgba(253,121,168,0.12);--tag-musicfree-text:#e84393;
|
||
|
|
--tag-unknown-bg:rgba(100,100,120,0.12);--tag-unknown-text:#646478;
|
||
|
|
--log-bg:rgba(20,22,34,0.92);--log-text:#e8e8f0;--log-muted:#7878a0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"]{
|
||
|
|
--bg-primary:rgba(20,22,34,0.8);--bg-secondary:rgba(28,30,44,0.85);
|
||
|
|
--bg-tertiary:rgba(35,38,54,0.9);--bg-card:rgba(30,32,48,0.75);
|
||
|
|
--bg-hover:rgba(255,255,255,0.06);--bg-input:rgba(20,22,34,0.9);
|
||
|
|
--text-primary:#e8e8f0;--text-secondary:#b0b0c8;--text-muted:#7878a0;
|
||
|
|
--border-color:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.15);
|
||
|
|
--accent:#a29bfe;--accent-light:#6c5ce7;--accent-bg:rgba(162,155,254,0.15);
|
||
|
|
--success:#55efc4;--success-bg:rgba(85,239,196,0.12);
|
||
|
|
--warning:#ffeaa7;--warning-bg:rgba(255,234,167,0.12);
|
||
|
|
--danger:#fab1a0;--danger-bg:rgba(250,177,160,0.12);
|
||
|
|
--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 20px rgba(0,0,0,0.4);
|
||
|
|
--shadow-lg:0 8px 40px rgba(0,0,0,0.5);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#1a1a2e;
|
||
|
|
--tag-lx-bg:rgba(162,155,254,0.18);--tag-lx-text:#a29bfe;
|
||
|
|
--tag-qzv2-bg:rgba(85,239,196,0.18);--tag-qzv2-text:#55efc4;
|
||
|
|
--tag-musicfree-bg:rgba(255,121,168,0.18);--tag-musicfree-text:#ff7eb6;
|
||
|
|
--tag-unknown-bg:rgba(150,150,170,0.18);--tag-unknown-text:#a0a0b8;
|
||
|
|
--log-bg:rgba(10,12,20,0.95);--log-text:#e8e8f0;--log-muted:#585870;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="sakura"]{
|
||
|
|
--bg-primary:rgba(255,240,245,0.75);--bg-secondary:rgba(255,245,248,0.85);
|
||
|
|
--bg-tertiary:rgba(252,235,240,0.9);--bg-card:rgba(255,245,248,0.8);
|
||
|
|
--bg-hover:rgba(255,182,193,0.08);--bg-input:rgba(255,250,252,0.9);
|
||
|
|
--text-primary:#5a2a3a;--text-secondary:#8a4a5a;--text-muted:#b08090;
|
||
|
|
--border-color:rgba(220,100,130,0.12);--border-strong:rgba(220,100,130,0.2);
|
||
|
|
--accent:#ff6b9d;--accent-light:#ffa3c4;--accent-bg:rgba(255,107,157,0.1);
|
||
|
|
--success:#2ecc71;--success-bg:rgba(46,204,113,0.1);
|
||
|
|
--warning:#f39c12;--warning-bg:rgba(243,156,18,0.12);
|
||
|
|
--danger:#e74c3c;--danger-bg:rgba(231,76,60,0.1);
|
||
|
|
--shadow-sm:0 2px 8px rgba(220,100,130,0.1);--shadow-md:0 4px 20px rgba(220,100,130,0.12);
|
||
|
|
--shadow-lg:0 8px 40px rgba(220,100,130,0.18);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(255,107,157,0.12);--tag-lx-text:#ff6b9d;
|
||
|
|
--tag-qzv2-bg:rgba(46,204,113,0.12);--tag-qzv2-text:#2ecc71;
|
||
|
|
--tag-musicfree-bg:rgba(155,89,182,0.12);--tag-musicfree-text:#9b59b6;
|
||
|
|
--tag-unknown-bg:rgba(100,100,120,0.12);--tag-unknown-text:#646478;
|
||
|
|
--log-bg:rgba(40,20,30,0.95);--log-text:#f0d8e0;--log-muted:#9a6a7a;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="ocean"]{
|
||
|
|
--bg-primary:rgba(230,245,255,0.75);--bg-secondary:rgba(240,249,255,0.85);
|
||
|
|
--bg-tertiary:rgba(220,240,255,0.9);--bg-card:rgba(240,249,255,0.8);
|
||
|
|
--bg-hover:rgba(0,150,200,0.06);--bg-input:rgba(250,253,255,0.9);
|
||
|
|
--text-primary:#0a3d5c;--text-secondary:#1a5d7c;--text-muted:#508da0;
|
||
|
|
--border-color:rgba(0,120,180,0.1);--border-strong:rgba(0,120,180,0.18);
|
||
|
|
--accent:#0984e3;--accent-light:#74b9ff;--accent-bg:rgba(9,132,227,0.1);
|
||
|
|
--success:#00cec9;--success-bg:rgba(0,206,201,0.1);
|
||
|
|
--warning:#fdcb6e;--warning-bg:rgba(253,203,110,0.12);
|
||
|
|
--danger:#ff7675;--danger-bg:rgba(255,118,117,0.1);
|
||
|
|
--shadow-sm:0 2px 8px rgba(0,120,180,0.1);--shadow-md:0 4px 20px rgba(0,120,180,0.12);
|
||
|
|
--shadow-lg:0 8px 40px rgba(0,120,180,0.18);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(9,132,227,0.12);--tag-lx-text:#0984e3;
|
||
|
|
--tag-qzv2-bg:rgba(0,206,201,0.12);--tag-qzv2-text:#00cec9;
|
||
|
|
--tag-musicfree-bg:rgba(0,184,148,0.12);--tag-musicfree-text:#00b894;
|
||
|
|
--tag-unknown-bg:rgba(100,100,120,0.12);--tag-unknown-text:#646478;
|
||
|
|
--log-bg:rgba(5,20,35,0.95);--log-text:#d0e8ff;--log-muted:#5080a0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="forest"]{
|
||
|
|
--bg-primary:rgba(235,248,235,0.75);--bg-secondary:rgba(245,255,245,0.85);
|
||
|
|
--bg-tertiary:rgba(225,245,225,0.9);--bg-card:rgba(245,255,245,0.8);
|
||
|
|
--bg-hover:rgba(34,139,34,0.06);--bg-input:rgba(250,255,250,0.9);
|
||
|
|
--text-primary:#1a3d1a;--text-secondary:#2d5d2d;--text-muted:#608060;
|
||
|
|
--border-color:rgba(34,139,34,0.1);--border-strong:rgba(34,139,34,0.18);
|
||
|
|
--accent:#00b894;--accent-light:#55efc4;--accent-bg:rgba(0,184,148,0.1);
|
||
|
|
--success:#2ecc71;--success-bg:rgba(46,204,113,0.1);
|
||
|
|
--warning:#fdcb6e;--warning-bg:rgba(253,203,110,0.12);
|
||
|
|
--danger:#e17055;--danger-bg:rgba(225,112,85,0.1);
|
||
|
|
--shadow-sm:0 2px 8px rgba(34,139,34,0.1);--shadow-md:0 4px 20px rgba(34,139,34,0.12);
|
||
|
|
--shadow-lg:0 8px 40px rgba(34,139,34,0.18);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(0,184,148,0.12);--tag-lx-text:#00b894;
|
||
|
|
--tag-qzv2-bg:rgba(46,204,113,0.12);--tag-qzv2-text:#2ecc71;
|
||
|
|
--tag-musicfree-bg:rgba(155,89,182,0.12);--tag-musicfree-text:#9b59b6;
|
||
|
|
--tag-unknown-bg:rgba(100,100,120,0.12);--tag-unknown-text:#646478;
|
||
|
|
--log-bg:rgba(15,30,15,0.95);--log-text:#d0f0d0;--log-muted:#508050;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="midnight"]{
|
||
|
|
--bg-primary:rgba(25,20,40,0.8);--bg-secondary:rgba(35,28,55,0.85);
|
||
|
|
--bg-tertiary:rgba(45,35,65,0.9);--bg-card:rgba(38,30,58,0.75);
|
||
|
|
--bg-hover:rgba(255,255,255,0.06);--bg-input:rgba(25,20,40,0.9);
|
||
|
|
--text-primary:#e0d8f0;--text-secondary:#b0a0c8;--text-muted:#7a6a90;
|
||
|
|
--border-color:rgba(180,160,220,0.08);--border-strong:rgba(180,160,220,0.15);
|
||
|
|
--accent:#bf6cff;--accent-light:#d4a3ff;--accent-bg:rgba(191,108,255,0.15);
|
||
|
|
--success:#00d2a0;--success-bg:rgba(0,210,160,0.12);
|
||
|
|
--warning:#ffce5c;--warning-bg:rgba(255,206,92,0.12);
|
||
|
|
--danger:#ff6b8a;--danger-bg:rgba(255,107,138,0.12);
|
||
|
|
--shadow-sm:0 2px 8px rgba(0,0,0,0.4);--shadow-md:0 4px 20px rgba(0,0,0,0.5);
|
||
|
|
--shadow-lg:0 8px 40px rgba(0,0,0,0.6);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(191,108,255,0.18);--tag-lx-text:#bf6cff;
|
||
|
|
--tag-qzv2-bg:rgba(0,210,160,0.18);--tag-qzv2-text:#00d2a0;
|
||
|
|
--tag-musicfree-bg:rgba(255,107,138,0.18);--tag-musicfree-text:#ff6b8a;
|
||
|
|
--tag-unknown-bg:rgba(150,150,170,0.18);--tag-unknown-text:#a0a0b8;
|
||
|
|
--log-bg:rgba(10,8,18,0.95);--log-text:#e0d8f0;--log-muted:#6a5a80;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="sunset"]{
|
||
|
|
--bg-primary:rgba(255,242,230,0.75);--bg-secondary:rgba(255,248,240,0.85);
|
||
|
|
--bg-tertiary:rgba(255,235,218,0.9);--bg-card:rgba(255,248,240,0.8);
|
||
|
|
--bg-hover:rgba(255,140,80,0.06);--bg-input:rgba(255,252,248,0.9);
|
||
|
|
--text-primary:#5a2a0a;--text-secondary:#8a4a1a;--text-muted:#b08060;
|
||
|
|
--border-color:rgba(220,100,30,0.1);--border-strong:rgba(220,100,30,0.18);
|
||
|
|
--accent:#ff7f50;--accent-light:#ffb088;--accent-bg:rgba(255,127,80,0.1);
|
||
|
|
--success:#2ecc71;--success-bg:rgba(46,204,113,0.1);
|
||
|
|
--warning:#f39c12;--warning-bg:rgba(243,156,18,0.12);
|
||
|
|
--danger:#e74c3c;--danger-bg:rgba(231,76,60,0.1);
|
||
|
|
--shadow-sm:0 2px 8px rgba(220,100,30,0.1);--shadow-md:0 4px 20px rgba(220,100,30,0.12);
|
||
|
|
--shadow-lg:0 8px 40px rgba(220,100,30,0.18);
|
||
|
|
--glass-blur:blur(20px);--text-on-accent:#fff;
|
||
|
|
--tag-lx-bg:rgba(255,127,80,0.12);--tag-lx-text:#ff7f50;
|
||
|
|
--tag-qzv2-bg:rgba(46,204,113,0.12);--tag-qzv2-text:#2ecc71;
|
||
|
|
--tag-musicfree-bg:rgba(155,89,182,0.12);--tag-musicfree-text:#9b59b6;
|
||
|
|
--tag-unknown-bg:rgba(100,100,120,0.12);--tag-unknown-text:#646478;
|
||
|
|
--log-bg:rgba(30,15,5,0.95);--log-text:#f0d8c0;--log-muted:#9a7050;
|
||
|
|
}
|
||
|
|
|
||
|
|
body{font-family:var(--font-sans);color:var(--text-primary);min-height:100vh;background-image:var(--bg-image);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;transition:color var(--transition);position:relative}
|
||
|
|
body::before{content:'';position:fixed;inset:0;background:var(--bg-primary);z-index:-1;transition:background var(--transition)}
|
||
|
|
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
|
||
|
|
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
|
||
|
|
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
|
||
|
|
|
||
|
|
.container{max-width:1200px;margin:0 auto;padding:24px 20px 60px}
|
||
|
|
.navbar{position:sticky;top:0;z-index:100;background:var(--bg-secondary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-color);padding:0 20px;transition:background var(--transition),border-color var(--transition)}
|
||
|
|
.navbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
|
||
|
|
.navbar-brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;color:var(--text-primary);text-decoration:none}
|
||
|
|
.navbar-brand .brand-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-on-accent);flex-shrink:0}
|
||
|
|
.navbar-brand .brand-icon svg{width:20px;height:20px}
|
||
|
|
.navbar-brand .brand-subtitle{font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px}
|
||
|
|
.navbar-actions{display:flex;align-items:center;gap:8px}
|
||
|
|
.theme-selector{position:relative}
|
||
|
|
.theme-dropdown-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:13px;font-family:var(--font-sans);transition:all var(--transition)}
|
||
|
|
.theme-dropdown-btn:hover{border-color:var(--accent);color:var(--accent)}
|
||
|
|
.theme-dropdown-btn svg{width:16px;height:16px}
|
||
|
|
.theme-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-secondary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:8px;min-width:180px;display:none;z-index:200}
|
||
|
|
.theme-dropdown.show{display:block}
|
||
|
|
.theme-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:14px;transition:all 0.2s}
|
||
|
|
.theme-option:hover{background:var(--bg-hover);color:var(--text-primary)}
|
||
|
|
.theme-option.active{background:var(--accent-bg);color:var(--accent)}
|
||
|
|
.theme-option .theme-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0}
|
||
|
|
.theme-option .theme-check{margin-left:auto;width:16px;height:16px;opacity:0}
|
||
|
|
.theme-option.active .theme-check{opacity:1}
|
||
|
|
|
||
|
|
.hero{text-align:center;padding:48px 20px 32px}
|
||
|
|
.hero h1{font-size:36px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;letter-spacing:-0.5px}
|
||
|
|
.hero p{font-size:16px;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.6}
|
||
|
|
.hero-badges{display:flex;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}
|
||
|
|
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:100px;font-size:13px;color:var(--text-secondary)}
|
||
|
|
.hero-badge svg{width:14px;height:14px}
|
||
|
|
|
||
|
|
.card{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md);transition:all var(--transition);margin-bottom:20px}
|
||
|
|
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
|
||
|
|
.card-header svg{width:20px;height:20px;color:var(--accent)}
|
||
|
|
.card-header h2{font-size:17px;font-weight:600;color:var(--text-primary)}
|
||
|
|
|
||
|
|
/* 平台展示 */
|
||
|
|
.platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
|
||
|
|
.platform-info-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;transition:all var(--transition)}
|
||
|
|
.platform-info-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
|
||
|
|
.platform-info-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
|
||
|
|
.platform-info-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
|
|
.platform-info-icon svg{width:20px;height:20px}
|
||
|
|
.platform-info-icon.lx{background:var(--tag-lx-bg);color:var(--tag-lx-text)}
|
||
|
|
.platform-info-icon.qzv2{background:var(--tag-qzv2-bg);color:var(--tag-qzv2-text)}
|
||
|
|
.platform-info-icon.musicfree{background:var(--tag-musicfree-bg);color:var(--tag-musicfree-text)}
|
||
|
|
.platform-info-name{font-size:15px;font-weight:600;color:var(--text-primary)}
|
||
|
|
.platform-info-format{font-size:12px;color:var(--text-muted)}
|
||
|
|
.platform-info-section{margin-bottom:8px}
|
||
|
|
.platform-info-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
|
||
|
|
.platform-info-tags{display:flex;flex-wrap:wrap;gap:4px}
|
||
|
|
.platform-info-tag{padding:2px 8px;border-radius:4px;font-size:11px;background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}
|
||
|
|
|
||
|
|
.input-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--bg-tertiary);border-radius:var(--radius-sm);padding:4px}
|
||
|
|
.input-tab{flex:1;padding:10px 16px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-family:var(--font-sans);border-radius:6px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:6px}
|
||
|
|
.input-tab svg{width:16px;height:16px}
|
||
|
|
.input-tab.active{background:var(--bg-card);color:var(--accent);box-shadow:var(--shadow-sm)}
|
||
|
|
.input-tab:hover:not(.active){color:var(--text-primary)}
|
||
|
|
|
||
|
|
.url-input-wrap{position:relative}
|
||
|
|
.url-textarea{width:100%;min-height:140px;padding:16px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-family:var(--font-mono);line-height:1.6;resize:vertical;transition:border-color var(--transition)}
|
||
|
|
.url-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
|
||
|
|
.url-textarea::placeholder{color:var(--text-muted)}
|
||
|
|
.url-count{position:absolute;bottom:12px;right:16px;font-size:12px;color:var(--text-muted);background:var(--bg-secondary);padding:2px 8px;border-radius:100px}
|
||
|
|
|
||
|
|
.file-upload-area{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:40px 20px;text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg-input)}
|
||
|
|
.file-upload-area:hover,.file-upload-area.dragover{border-color:var(--accent);background:var(--accent-bg)}
|
||
|
|
.file-upload-area svg{width:40px;height:40px;color:var(--text-muted);margin-bottom:12px}
|
||
|
|
.file-upload-area p{color:var(--text-secondary);font-size:14px}
|
||
|
|
.file-upload-area .file-types{font-size:12px;color:var(--text-muted);margin-top:6px}
|
||
|
|
|
||
|
|
/* 上传进度 */
|
||
|
|
.upload-progress{margin-top:12px;padding:12px 16px;background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}
|
||
|
|
.upload-progress-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;color:var(--text-secondary)}
|
||
|
|
.upload-progress-bar{height:6px;background:var(--bg-hover);border-radius:3px;overflow:hidden}
|
||
|
|
.upload-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:3px;transition:width 0.3s ease;width:0%}
|
||
|
|
|
||
|
|
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
||
|
|
.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--accent-bg);border-radius:100px;font-size:13px;color:var(--accent)}
|
||
|
|
.file-chip svg{width:14px;height:14px}
|
||
|
|
.file-chip .remove-file{cursor:pointer;opacity:0.6;transition:opacity 0.2s}
|
||
|
|
.file-chip .remove-file:hover{opacity:1}
|
||
|
|
|
||
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-sans);font-weight:600;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap}
|
||
|
|
.btn svg{width:18px;height:18px}
|
||
|
|
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:var(--text-on-accent);box-shadow:var(--shadow-sm)}
|
||
|
|
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
|
||
|
|
.btn-primary:active{transform:translateY(0)}
|
||
|
|
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
||
|
|
.btn-secondary{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}
|
||
|
|
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
|
||
|
|
.btn-ghost{background:transparent;color:var(--text-secondary);padding:8px 14px}
|
||
|
|
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
|
||
|
|
|
||
|
|
.actions-bar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px;flex-wrap:wrap}
|
||
|
|
.actions-left{display:flex;gap:8px;align-items:center}
|
||
|
|
.actions-right{display:flex;gap:8px}
|
||
|
|
|
||
|
|
.progress-bar{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;margin-top:16px;display:none}
|
||
|
|
.progress-bar.show{display:block}
|
||
|
|
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:2px;transition:width 0.3s ease;width:0%}
|
||
|
|
|
||
|
|
/* === 日志面板 === */
|
||
|
|
.log-panel-card{padding:0;overflow:hidden}
|
||
|
|
.log-panel-card .card-header{padding:16px 20px;margin-bottom:0;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}
|
||
|
|
.log-pulse{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.5s infinite}
|
||
|
|
.log-pulse.idle{background:var(--text-muted);animation:none}
|
||
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
|
||
|
|
|
||
|
|
.log-panel{background:var(--log-bg);font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--log-text);padding:16px;max-height:400px;overflow-y:auto;}
|
||
|
|
.log-entry{display:flex;gap:8px;padding:2px 0;animation:logIn 0.2s ease}
|
||
|
|
.log-time{color:var(--log-muted);flex-shrink:0;font-size:12px;min-width:65px}
|
||
|
|
.log-level{flex-shrink:0;font-weight:600;min-width:55px;font-size:12px}
|
||
|
|
.log-level.info{color:#74b9ff}
|
||
|
|
.log-level.success{color:var(--success)}
|
||
|
|
.log-level.warn{color:var(--warning)}
|
||
|
|
.log-level.error{color:var(--danger)}
|
||
|
|
.log-message{flex:1;word-break:break-word}
|
||
|
|
.log-entry.plugin-header{border-top:1px solid rgba(255,255,255,0.05);margin-top:6px;padding-top:6px}
|
||
|
|
.log-entry.plugin-header .log-message{font-weight:600;color:var(--accent-light)}
|
||
|
|
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
|
||
|
|
|
||
|
|
/* 结果卡片 */
|
||
|
|
.results-section{margin-top:32px}
|
||
|
|
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
|
||
|
|
.results-header h2{font-size:20px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
|
||
|
|
.results-header h2 svg{width:22px;height:22px;color:var(--accent)}
|
||
|
|
.results-actions{display:flex;gap:8px}
|
||
|
|
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
|
||
|
|
|
||
|
|
.result-card{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-md);transition:all var(--transition);position:relative;overflow:hidden;animation:cardIn 0.3s ease}
|
||
|
|
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
|
||
|
|
.result-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
|
||
|
|
.result-card.status-passed{border-left:4px solid var(--success)}
|
||
|
|
.result-card.status-warning{border-left:4px solid var(--warning)}
|
||
|
|
.result-card.status-failed{border-left:4px solid var(--danger)}
|
||
|
|
.result-card.status-pending{border-left:4px solid var(--text-muted)}
|
||
|
|
|
||
|
|
.result-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px}
|
||
|
|
.result-card-title{flex:1;min-width:0}
|
||
|
|
.result-name{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
|
.result-url{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
|
|
||
|
|
.score-badge{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}
|
||
|
|
.score-badge .score-num{font-size:20px;line-height:1}
|
||
|
|
.score-badge .score-grade{font-size:10px;opacity:0.8;margin-top:2px}
|
||
|
|
.score-badge.grade-S{background:var(--success-bg);color:var(--success)}
|
||
|
|
.score-badge.grade-A{background:var(--success-bg);color:var(--success)}
|
||
|
|
.score-badge.grade-B{background:var(--warning-bg);color:var(--warning)}
|
||
|
|
.score-badge.grade-C{background:var(--warning-bg);color:var(--warning)}
|
||
|
|
.score-badge.grade-D{background:var(--danger-bg);color:var(--danger)}
|
||
|
|
|
||
|
|
.platform-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
|
||
|
|
.platform-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;font-size:12px;font-weight:500}
|
||
|
|
.platform-tag svg{width:12px;height:12px}
|
||
|
|
.platform-tag.tag-lx{background:var(--tag-lx-bg);color:var(--tag-lx-text)}
|
||
|
|
.platform-tag.tag-qzv2{background:var(--tag-qzv2-bg);color:var(--tag-qzv2-text)}
|
||
|
|
.platform-tag.tag-musicfree{background:var(--tag-musicfree-bg);color:var(--tag-musicfree-text)}
|
||
|
|
.platform-tag.tag-unknown{background:var(--tag-unknown-bg);color:var(--tag-unknown-text)}
|
||
|
|
|
||
|
|
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:14px}
|
||
|
|
.info-item{display:flex;flex-direction:column;gap:2px}
|
||
|
|
.info-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px}
|
||
|
|
.info-value{font-size:13px;color:var(--text-primary);font-weight:500}
|
||
|
|
|
||
|
|
.latency-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
|
||
|
|
.latency-bar-label{font-size:12px;color:var(--text-secondary);min-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
|
.latency-bar-track{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}
|
||
|
|
.latency-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
|
||
|
|
.latency-bar-fill.good{background:var(--success)}
|
||
|
|
.latency-bar-fill.ok{background:var(--warning)}
|
||
|
|
.latency-bar-fill.bad{background:var(--danger)}
|
||
|
|
.latency-bar-value{font-size:12px;font-weight:600;min-width:55px;text-align:right}
|
||
|
|
.latency-bar-value.good{color:var(--success)}
|
||
|
|
.latency-bar-value.ok{color:var(--warning)}
|
||
|
|
.latency-bar-value.bad{color:var(--danger)}
|
||
|
|
|
||
|
|
.quality-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
|
||
|
|
.quality-tag{padding:3px 8px;border-radius:4px;font-size:11px;font-weight:500;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}
|
||
|
|
.quality-tag.declared{background:var(--success-bg);color:var(--success);border-color:transparent}
|
||
|
|
|
||
|
|
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
|
||
|
|
.modal-overlay.show{display:flex}
|
||
|
|
.modal{background:var(--bg-secondary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:800px;width:100%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column}
|
||
|
|
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-color)}
|
||
|
|
.modal-header h3{font-size:18px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
|
||
|
|
.modal-header h3 svg{width:20px;height:20px;color:var(--accent)}
|
||
|
|
.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;transition:all 0.2s}
|
||
|
|
.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
|
||
|
|
.modal-close svg{width:20px;height:20px}
|
||
|
|
.modal-body{padding:24px;overflow-y:auto;flex:1}
|
||
|
|
.md-preview{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;font-size:14px;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;font-family:var(--font-mono);max-height:500px;overflow-y:auto}
|
||
|
|
.poster-container{display:flex;justify-content:center;padding:20px 0}
|
||
|
|
#poster-canvas{max-width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
|
||
|
|
|
||
|
|
.toast-container{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px}
|
||
|
|
.toast{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--bg-secondary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);color:var(--text-primary);font-size:14px;animation:toastIn 0.3s ease;max-width:380px}
|
||
|
|
.toast svg{width:18px;height:18px;flex-shrink:0}
|
||
|
|
.toast.success{border-left:3px solid var(--success)}.toast.success svg{color:var(--success)}
|
||
|
|
.toast.error{border-left:3px solid var(--danger)}.toast.error svg{color:var(--danger)}
|
||
|
|
.toast.info{border-left:3px solid var(--accent)}.toast.info svg{color:var(--accent)}
|
||
|
|
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
|
||
|
|
|
||
|
|
.spinner{width:18px;height:18px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 0.8s linear infinite}
|
||
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
||
|
|
|
||
|
|
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
|
||
|
|
.empty-state svg{width:48px;height:48px;margin-bottom:16px;opacity:0.5}
|
||
|
|
.empty-state p{font-size:15px}
|
||
|
|
|
||
|
|
.skeleton-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;height:200px;position:relative;overflow:hidden}
|
||
|
|
.skeleton-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--bg-hover),transparent);animation:shimmer 1.5s infinite}
|
||
|
|
@keyframes shimmer{to{transform:translateX(100%)}}
|
||
|
|
|
||
|
|
@media(max-width:768px){
|
||
|
|
.hero h1{font-size:26px}.hero p{font-size:14px}
|
||
|
|
.results-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}
|
||
|
|
.navbar-brand .brand-subtitle{display:none}
|
||
|
|
.actions-bar{flex-direction:column;align-items:stretch}
|
||
|
|
.actions-left,.actions-right{justify-content:stretch}
|
||
|
|
.actions-left .btn,.actions-right .btn{flex:1;justify-content:center}
|
||
|
|
.container{padding:16px 12px 40px}.card{padding:16px}
|
||
|
|
.theme-dropdown-btn span{display:none}
|
||
|
|
.platforms-grid{grid-template-columns:1fr}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer{text-align:center;padding:40px 20px 20px;color:var(--text-muted);font-size:13px}
|
||
|
|
.footer a{color:var(--accent);text-decoration:none}
|