e3afa5b95a
- Extract shared CSS (sidebar, theme vars, layout) into shared.css - Extract shared JS (tailwind config, sidebar injection, theme toggle) into shared.js - Remove ~1200 lines of duplicated code across 13 HTML pages - Standardize all titles to format: Tool Name — WA Dev Tools - Standardize page headers (h1 + description) across all tools - Standardize container padding (tool-container class) - Sidebar now injected via JS — single source of truth - Use CSS variables for accent colors everywhere (no more hardcoded #0054e6)
98 lines
4.8 KiB
CSS
98 lines
4.8 KiB
CSS
/* WA Dev Tools — Shared Styles */
|
|
|
|
/* Theme variables */
|
|
:root {
|
|
--bg: #f5f5f7;
|
|
--bg-grad1: rgba(0, 67, 184, 0.04);
|
|
--bg-grad2: rgba(0, 50, 140, 0.03);
|
|
--surface-800: rgba(255,255,255,0.85);
|
|
--surface-700: #f0f0f3;
|
|
--surface-600: #dde0e6;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #555;
|
|
--text-muted: #888;
|
|
--bar-bg: #e0e0e0;
|
|
--select-bg: #f0f0f3;
|
|
--select-color: #1a1a2e;
|
|
--accent: #0054e6;
|
|
--accent-dim: #0043b8;
|
|
--accent-bright: #6b9fff;
|
|
--accent-bg: rgba(0,84,230,.08);
|
|
}
|
|
.dark {
|
|
--bg: #060c18;
|
|
--bg-grad1: rgba(0, 84, 230, 0.03);
|
|
--bg-grad2: rgba(0, 67, 184, 0.02);
|
|
--surface-800: rgba(9,16,32,0.8);
|
|
--surface-700: #0d1828;
|
|
--surface-600: #162040;
|
|
--text-primary: #fff;
|
|
--text-secondary: #c0c0c0;
|
|
--text-muted: #666;
|
|
--bar-bg: #0d1828;
|
|
--select-bg: #091020;
|
|
--select-color: #e0e0e0;
|
|
}
|
|
|
|
/* Base */
|
|
body {
|
|
background: var(--bg);
|
|
background-image:
|
|
radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
|
|
min-height: 100vh;
|
|
transition: background 0.3s;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar { position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s }
|
|
.sidebar-logo { margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace }
|
|
.sidebar-nav { display:flex;flex-direction:column;gap:6px;flex:1 }
|
|
.sidebar-link { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative }
|
|
.sidebar-link:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
|
|
.sidebar-link.active { color:var(--accent);background:var(--accent-bg) }
|
|
.sidebar-link.active::before { content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent) }
|
|
.sidebar-bottom { margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px }
|
|
.main-content { margin-left:56px }
|
|
|
|
/* Theme toggle */
|
|
.theme-toggle { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;color:var(--text-muted) }
|
|
.theme-toggle:hover { background:rgba(255,255,255,.06);color:var(--text-secondary) }
|
|
.theme-toggle-knob { display:flex;align-items:center;justify-content:center }
|
|
|
|
/* Mobile bottom bar */
|
|
@media(max-width:640px) {
|
|
.sidebar { position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0 }
|
|
.sidebar-logo { display:none }
|
|
.sidebar-nav { flex-direction:row;gap:4px;flex:none }
|
|
.sidebar-bottom { margin-top:0;margin-left:auto;flex-direction:row }
|
|
.sidebar-link.active::before { left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0 }
|
|
.main-content { margin-left:0;padding-bottom:60px }
|
|
}
|
|
|
|
/* Page header */
|
|
.page-header { margin-bottom:24px }
|
|
.page-header h1 { font-size:1.875rem;font-weight:800;letter-spacing:-0.025em;color:var(--text-primary);line-height:1.2 }
|
|
@media(min-width:640px) { .page-header h1 { font-size:2.25rem } }
|
|
.page-header h1 .accent { color:var(--accent) }
|
|
.page-header .description { margin-top:8px;font-size:0.875rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace }
|
|
|
|
/* Standard content container */
|
|
.tool-container { padding:32px 16px }
|
|
@media(min-width:640px) { .tool-container { padding:48px 16px } }
|
|
|
|
/* Common form elements */
|
|
.wa-input { background:var(--select-bg);border:1px solid var(--surface-600);color:var(--select-color);padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;transition:border-color .2s }
|
|
.wa-input:focus { border-color:var(--accent) }
|
|
.wa-btn { padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s }
|
|
.wa-btn:hover { background:var(--accent-dim) }
|
|
.wa-btn:disabled { opacity:0.5;cursor:not-allowed }
|
|
.wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width:6px;height:6px }
|
|
::-webkit-scrollbar-track { background:transparent }
|
|
::-webkit-scrollbar-thumb { background:var(--surface-600);border-radius:3px }
|
|
::-webkit-scrollbar-thumb:hover { background:var(--text-muted) }
|