/* ═══════════════════════════════════════════════════════════════════ BUTTON THEMES — RedLineCAD v2 Selectable button style families applied via data-btn-theme on Each theme overrides .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-info, .btn-warning, .btn-ghost ═══════════════════════════════════════════════════════════════════ */ /* ── 1. NEON / GLOW ─────────────────────────────────────────────── */ [data-btn-theme="neon"] .btn { background: transparent; border-width: 2px; border-style: solid; border-radius: 6px; font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: box-shadow 0.2s, background 0.2s; } [data-btn-theme="neon"] .btn::after { display: none; } [data-btn-theme="neon"] .btn-primary { color: #00d4ff; border-color: #00d4ff; text-shadow: 0 0 8px #00d4ff; box-shadow: 0 0 8px #00d4ff44, inset 0 0 8px #00d4ff11; } [data-btn-theme="neon"] .btn-primary:hover { background: #00d4ff18; box-shadow: 0 0 18px #00d4ff88, inset 0 0 12px #00d4ff22; } [data-btn-theme="neon"] .btn-danger { color: #ff2020; border-color: #ff2020; text-shadow: 0 0 8px #ff2020; box-shadow: 0 0 8px #ff202044, inset 0 0 8px #ff202011; } [data-btn-theme="neon"] .btn-danger:hover { background: #ff202018; box-shadow: 0 0 18px #ff202088, inset 0 0 12px #ff202022; } [data-btn-theme="neon"] .btn-success { color: #00ff88; border-color: #00ff88; text-shadow: 0 0 8px #00ff88; box-shadow: 0 0 8px #00ff8844, inset 0 0 8px #00ff8811; } [data-btn-theme="neon"] .btn-success:hover { background: #00ff8818; box-shadow: 0 0 18px #00ff8888, inset 0 0 12px #00ff8822; } [data-btn-theme="neon"] .btn-warning { color: #ffaa00; border-color: #ffaa00; text-shadow: 0 0 8px #ffaa00; box-shadow: 0 0 8px #ffaa0044, inset 0 0 8px #ffaa0011; } [data-btn-theme="neon"] .btn-warning:hover { background: #ffaa0018; box-shadow: 0 0 18px #ffaa0088, inset 0 0 12px #ffaa0022; } [data-btn-theme="neon"] .btn-info { color: #a855f7; border-color: #a855f7; text-shadow: 0 0 8px #a855f7; box-shadow: 0 0 8px #a855f744, inset 0 0 8px #a855f711; } [data-btn-theme="neon"] .btn-info:hover { background: #a855f718; box-shadow: 0 0 18px #a855f788, inset 0 0 12px #a855f722; } [data-btn-theme="neon"] .btn-secondary { color: #888; border-color: #444; box-shadow: none; } [data-btn-theme="neon"] .btn-secondary:hover { color: #ccc; border-color: #888; box-shadow: 0 0 8px #88888844; } [data-btn-theme="neon"] .btn-ghost { color: #666; border-color: transparent; } /* ── 2. GLASS MORPHISM ──────────────────────────────────────────── */ [data-btn-theme="glass"] .btn { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.12); border-radius: 8px; color: #e0e8ff; font-weight: 700; letter-spacing: 1.5px; box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); transition: background 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } [data-btn-theme="glass"] .btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 8px 8px 0 0; } [data-btn-theme="glass"] .btn::after { display: none; } [data-btn-theme="glass"] .btn:hover { background: rgba(255,255,255,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); } [data-btn-theme="glass"] .btn-primary::before { background: #1a6fff; } [data-btn-theme="glass"] .btn-danger::before { background: #ff2020; } [data-btn-theme="glass"] .btn-success::before { background: #00cc66; } [data-btn-theme="glass"] .btn-warning::before { background: #ffaa00; } [data-btn-theme="glass"] .btn-info::before { background: #a855f7; } [data-btn-theme="glass"] .btn-secondary::before{ background: rgba(255,255,255,0.2); } [data-btn-theme="glass"] .btn-primary { color: #7ab8ff; } [data-btn-theme="glass"] .btn-danger { color: #ff8080; } [data-btn-theme="glass"] .btn-success { color: #66ffaa; } [data-btn-theme="glass"] .btn-warning { color: #ffcc66; } [data-btn-theme="glass"] .btn-info { color: #d4a8ff; } /* ── 3. TACTICAL / INDUSTRIAL ───────────────────────────────────── */ [data-btn-theme="tactical"] .btn { background: linear-gradient(180deg, #2a2a1a 0%, #1a1a0a 100%); border: 2px solid #3a3a2a; border-radius: 3px; color: #c8b88a; font-family: var(--font-display); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.6); position: relative; overflow: hidden; } [data-btn-theme="tactical"] .btn::after { display: none; } [data-btn-theme="tactical"] .btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 4px, rgba(255,255,255,0.02) 4px, rgba(255,255,255,0.02) 8px ); pointer-events: none; } [data-btn-theme="tactical"] .btn:hover { background: linear-gradient(180deg, #3a3a2a 0%, #2a2a1a 100%); border-color: #c9a227; color: #ffd700; box-shadow: 0 0 8px rgba(201,162,39,0.4), inset 0 1px 0 rgba(255,255,255,0.1); } [data-btn-theme="tactical"] .btn-primary { border-color: #c9a227; color: #ffd700; background: linear-gradient(180deg, #2a2500 0%, #1a1800 100%); } [data-btn-theme="tactical"] .btn-danger { border-color: #cc2200; color: #ff4422; background: linear-gradient(180deg, #2a0800 0%, #1a0500 100%); } [data-btn-theme="tactical"] .btn-danger::before { background: repeating-linear-gradient( 45deg, transparent, transparent 4px, rgba(255,68,34,0.06) 4px, rgba(255,68,34,0.06) 8px ); } [data-btn-theme="tactical"] .btn-success { border-color: #226600; color: #44cc22; background: linear-gradient(180deg, #0a1a00 0%, #060f00 100%); } [data-btn-theme="tactical"] .btn-secondary { border-color: #3a3a3a; color: #888; } /* ── 4. SKEWED / ANGULAR ────────────────────────────────────────── */ [data-btn-theme="skewed"] .btn { border-radius: 0; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); border: none; font-weight: 900; letter-spacing: 2px; padding: 9px 24px; position: relative; } [data-btn-theme="skewed"] .btn::after { display: none; } [data-btn-theme="skewed"] .btn-primary { background: linear-gradient(135deg, #1a4fff 0%, #0a2fcc 100%); color: #fff; } [data-btn-theme="skewed"] .btn-primary:hover { background: linear-gradient(135deg, #2a5fff 0%, #1a3fdd 100%); box-shadow: none; } [data-btn-theme="skewed"] .btn-danger { background: linear-gradient(135deg, #cc2020 0%, #880000 100%); color: #fff; } [data-btn-theme="skewed"] .btn-danger:hover { background: linear-gradient(135deg, #dd3030 0%, #991111 100%); box-shadow: none; } [data-btn-theme="skewed"] .btn-success { background: linear-gradient(135deg, #008844 0%, #005522 100%); color: #fff; } [data-btn-theme="skewed"] .btn-success:hover { background: linear-gradient(135deg, #009955 0%, #006633 100%); box-shadow: none; } [data-btn-theme="skewed"] .btn-warning { background: linear-gradient(135deg, #cc8800 0%, #885500 100%); color: #fff; } [data-btn-theme="skewed"] .btn-info { background: linear-gradient(135deg, #6622cc 0%, #441188 100%); color: #fff; } [data-btn-theme="skewed"] .btn-secondary { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); color: #aaa; } [data-btn-theme="skewed"] .btn-ghost { background: transparent; color: #888; clip-path: none; } /* ── 5. GRADIENT / MODERN ───────────────────────────────────────── */ [data-btn-theme="gradient"] .btn { border-radius: 50px; border: none; font-weight: 800; letter-spacing: 1px; padding: 10px 22px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; } [data-btn-theme="gradient"] .btn::after { display: none; } [data-btn-theme="gradient"] .btn:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.4); } [data-btn-theme="gradient"] .btn:active { transform: translateY(0); } [data-btn-theme="gradient"] .btn-primary { background: linear-gradient(135deg, #1a6fff 0%, #0044cc 100%); color: #fff; } [data-btn-theme="gradient"] .btn-danger { background: linear-gradient(135deg, #ff2020 0%, #cc0000 100%); color: #fff; } [data-btn-theme="gradient"] .btn-success { background: linear-gradient(135deg, #00cc66 0%, #008844 100%); color: #fff; } [data-btn-theme="gradient"] .btn-warning { background: linear-gradient(135deg, #ff8800 0%, #cc5500 100%); color: #fff; } [data-btn-theme="gradient"] .btn-info { background: linear-gradient(135deg, #a855f7 0%, #6622cc 100%); color: #fff; } [data-btn-theme="gradient"] .btn-secondary { background: linear-gradient(135deg, #3a3a4a 0%, #1a1a2a 100%); color: #ccc; } [data-btn-theme="gradient"] .btn-ghost { background: transparent; color: #888; border-radius: 50px; border: 1px solid #333; } /* ── 6. CIRCULAR / ICON FOCUSED ─────────────────────────────────── */ [data-btn-theme="circular"] .btn { border-radius: 50%; width: 56px; height: 56px; padding: 0; border-width: 2px; border-style: solid; font-size: 1.2rem; letter-spacing: 0; flex-direction: column; gap: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); transition: box-shadow 0.2s, transform 0.15s; } [data-btn-theme="circular"] .btn::after { display: none; } [data-btn-theme="circular"] .btn:hover { transform: scale(1.08); } [data-btn-theme="circular"] .btn .btn-label { font-size: 0.5rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-top: 2px; } [data-btn-theme="circular"] .btn-primary { background: #0d1a2a; border-color: #1a6fff; color: #1a6fff; box-shadow: 0 0 0 3px #1a6fff22, 0 2px 10px rgba(0,0,0,0.4); } [data-btn-theme="circular"] .btn-primary:hover { box-shadow: 0 0 0 4px #1a6fff44, 0 4px 16px rgba(26,111,255,0.4); } [data-btn-theme="circular"] .btn-danger { background: #1a0000; border-color: #ff2020; color: #ff2020; box-shadow: 0 0 0 3px #ff202022, 0 2px 10px rgba(0,0,0,0.4); } [data-btn-theme="circular"] .btn-danger:hover { box-shadow: 0 0 0 4px #ff202044, 0 4px 16px rgba(255,32,32,0.4); } [data-btn-theme="circular"] .btn-success { background: #001a0a; border-color: #00cc66; color: #00cc66; box-shadow: 0 0 0 3px #00cc6622, 0 2px 10px rgba(0,0,0,0.4); } [data-btn-theme="circular"] .btn-warning { background: #1a1000; border-color: #ffaa00; color: #ffaa00; box-shadow: 0 0 0 3px #ffaa0022, 0 2px 10px rgba(0,0,0,0.4); } [data-btn-theme="circular"] .btn-info { background: #0a0015; border-color: #a855f7; color: #a855f7; box-shadow: 0 0 0 3px #a855f722, 0 2px 10px rgba(0,0,0,0.4); } [data-btn-theme="circular"] .btn-secondary { background: #1a1a1a; border-color: #333; color: #666; } /* ── 7. OUTLINED / TECH ─────────────────────────────────────────── */ [data-btn-theme="outlined"] .btn { background: transparent; border-width: 1px; border-style: solid; border-radius: 4px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.15s, box-shadow 0.15s; } [data-btn-theme="outlined"] .btn::after { display: none; } [data-btn-theme="outlined"] .btn-primary { color: #1a6fff; border-color: #1a6fff; } [data-btn-theme="outlined"] .btn-primary:hover { background: rgba(26,111,255,0.1); box-shadow: 0 0 10px rgba(26,111,255,0.2); } [data-btn-theme="outlined"] .btn-danger { color: #ff4444; border-color: #ff4444; } [data-btn-theme="outlined"] .btn-danger:hover { background: rgba(255,68,68,0.1); box-shadow: 0 0 10px rgba(255,68,68,0.2); } [data-btn-theme="outlined"] .btn-success { color: #00cc66; border-color: #00cc66; } [data-btn-theme="outlined"] .btn-success:hover { background: rgba(0,204,102,0.1); box-shadow: 0 0 10px rgba(0,204,102,0.2); } [data-btn-theme="outlined"] .btn-warning { color: #ffaa00; border-color: #ffaa00; } [data-btn-theme="outlined"] .btn-warning:hover { background: rgba(255,170,0,0.1); box-shadow: 0 0 10px rgba(255,170,0,0.2); } [data-btn-theme="outlined"] .btn-info { color: #a855f7; border-color: #a855f7; } [data-btn-theme="outlined"] .btn-info:hover { background: rgba(168,85,247,0.1); box-shadow: 0 0 10px rgba(168,85,247,0.2); } [data-btn-theme="outlined"] .btn-secondary { color: #666; border-color: #333; } [data-btn-theme="outlined"] .btn-secondary:hover { color: #aaa; border-color: #666; background: rgba(255,255,255,0.04); } /* ── 8. PILL WITH STATUS ────────────────────────────────────────── */ [data-btn-theme="pill"] .btn { border-radius: 50px; border-width: 1px; border-style: solid; padding: 8px 20px 8px 14px; font-weight: 700; letter-spacing: 1px; position: relative; padding-left: 32px; } [data-btn-theme="pill"] .btn::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; } [data-btn-theme="pill"] .btn::after { display: none; } [data-btn-theme="pill"] .btn-primary { background: rgba(26,111,255,0.12); border-color: rgba(26,111,255,0.4); color: #7ab8ff; } [data-btn-theme="pill"] .btn-primary::before { background: #1a6fff; box-shadow: 0 0 6px #1a6fff; } [data-btn-theme="pill"] .btn-primary:hover { background: rgba(26,111,255,0.2); } [data-btn-theme="pill"] .btn-success { background: rgba(0,204,102,0.12); border-color: rgba(0,204,102,0.4); color: #66ffaa; } [data-btn-theme="pill"] .btn-success::before { background: #00cc66; box-shadow: 0 0 6px #00cc66; } [data-btn-theme="pill"] .btn-success:hover { background: rgba(0,204,102,0.2); } [data-btn-theme="pill"] .btn-warning { background: rgba(255,170,0,0.12); border-color: rgba(255,170,0,0.4); color: #ffcc66; } [data-btn-theme="pill"] .btn-warning::before { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; } [data-btn-theme="pill"] .btn-warning:hover { background: rgba(255,170,0,0.2); } [data-btn-theme="pill"] .btn-danger { background: rgba(255,32,32,0.12); border-color: rgba(255,32,32,0.4); color: #ff8080; } [data-btn-theme="pill"] .btn-danger::before { background: #ff2020; box-shadow: 0 0 6px #ff2020; } [data-btn-theme="pill"] .btn-danger:hover { background: rgba(255,32,32,0.2); } [data-btn-theme="pill"] .btn-secondary { background: rgba(100,100,100,0.12); border-color: rgba(100,100,100,0.3); color: #888; } [data-btn-theme="pill"] .btn-secondary::before { background: #555; } /* ── 9. RAISED / 3D ─────────────────────────────────────────────── */ [data-btn-theme="raised"] .btn { border-radius: 6px; border: none; font-weight: 800; letter-spacing: 1.2px; transition: transform 0.1s, box-shadow 0.1s; position: relative; top: 0; } [data-btn-theme="raised"] .btn::after { display: none; } [data-btn-theme="raised"] .btn:hover { top: -2px; } [data-btn-theme="raised"] .btn:active { top: 2px; } [data-btn-theme="raised"] .btn-primary { background: #1a6fff; color: #fff; box-shadow: 0 5px 0 #0033aa, 0 6px 8px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-primary:hover { background: #2a7fff; box-shadow: 0 7px 0 #0033aa, 0 8px 12px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-primary:active { box-shadow: 0 2px 0 #0033aa, 0 3px 4px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-danger { background: #cc0000; color: #fff; box-shadow: 0 5px 0 #880000, 0 6px 8px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-danger:hover { background: #dd1111; box-shadow: 0 7px 0 #880000, 0 8px 12px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-danger:active { box-shadow: 0 2px 0 #880000, 0 3px 4px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-success { background: #008844; color: #fff; box-shadow: 0 5px 0 #004422, 0 6px 8px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-success:hover { background: #009955; box-shadow: 0 7px 0 #004422, 0 8px 12px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-success:active { box-shadow: 0 2px 0 #004422, 0 3px 4px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-warning { background: #cc7700; color: #fff; box-shadow: 0 5px 0 #884400, 0 6px 8px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-warning:hover { background: #dd8800; box-shadow: 0 7px 0 #884400, 0 8px 12px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-secondary { background: #2a2a3a; color: #ccc; box-shadow: 0 5px 0 #111118, 0 6px 8px rgba(0,0,0,0.4); } [data-btn-theme="raised"] .btn-secondary:hover { background: #3a3a4a; box-shadow: 0 7px 0 #111118, 0 8px 12px rgba(0,0,0,0.4); } /* ── 10. TAB / SEGMENTED ────────────────────────────────────────── */ [data-btn-theme="tab"] .btn { border-radius: 0; border-width: 1px; border-style: solid; border-color: #1e2a3a; border-right-width: 0; background: #0d1117; color: #6b7280; font-weight: 700; letter-spacing: 1px; padding: 9px 18px; position: relative; transition: background 0.15s, color 0.15s; } [data-btn-theme="tab"] .btn::after { display: none; } [data-btn-theme="tab"] .btn:first-child { border-radius: 6px 0 0 6px; } [data-btn-theme="tab"] .btn:last-child { border-radius: 0 6px 6px 0; border-right-width: 1px; } [data-btn-theme="tab"] .btn:only-child { border-radius: 6px; border-right-width: 1px; } [data-btn-theme="tab"] .btn-primary { background: #1a3a6a; color: #7ab8ff; border-color: #1a6fff; border-right-width: 0; box-shadow: inset 0 -2px 0 #1a6fff; } [data-btn-theme="tab"] .btn:hover { background: #1a2030; color: #e0e8ff; } [data-btn-theme="tab"] .btn-secondary { background: #0d1117; color: #6b7280; border-color: #1e2a3a; } [data-btn-theme="tab"] .btn-danger { background: #2a0808; color: #ff8080; border-color: #cc2020; box-shadow: inset 0 -2px 0 #cc2020; } [data-btn-theme="tab"] .btn-success { background: #082a14; color: #66ffaa; border-color: #00cc66; box-shadow: inset 0 -2px 0 #00cc66; } /* ── DEFAULT (no theme) — preserve original styles ──────────────── */ [data-btn-theme="default"] .btn, [data-btn-theme="default"] .btn-primary, [data-btn-theme="default"] .btn-secondary, [data-btn-theme="default"] .btn-danger, [data-btn-theme="default"] .btn-success, [data-btn-theme="default"] .btn-info, [data-btn-theme="default"] .btn-warning, [data-btn-theme="default"] .btn-ghost { /* inherits from components.css */ }