/* theme-tech.css - Sci-Fi / Cyberpunk Tech Theme Applied via [data-theme="tech"] on All rules are scoped to override the default (classic) theme. */ /* ============= CUSTOM FONTS ============= */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="tech"] { --bg-base: #030810; --bg-panel: #0a1628; --bg-elevated: #0f2240; --border: #0e4bef33; --accent: #00e5ff; --accent-hover: #00b8d4; --success: #00ff88; --success-hover: #00cc6a; --danger: #ff2255; --danger-hover: #cc1144; --warning: #ffaa00; --text-main: #e0f0ff; --text-muted: #5588bb; --radius-lg: 4px; --radius-md: 3px; --radius-sm: 2px; --shadow-md: 0 0 12px rgba(0, 229, 255, 0.15), 0 4px 8px rgba(0, 0, 0, 0.6); --shadow-lg: 0 0 30px rgba(0, 229, 255, 0.1), 0 10px 20px rgba(0, 0, 0, 0.7); --neon-glow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 30px rgba(0, 229, 255, 0.2); --tech-glow-cyan: 0 0 8px rgba(0, 229, 255, 0.5); --tech-glow-green: 0 0 8px rgba(0, 255, 136, 0.5); --tech-glow-magenta: 0 0 8px rgba(255, 34, 85, 0.5); --scanline: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 229, 255, 0.02) 2px, rgba(0, 229, 255, 0.02) 4px ); } /* ============= BODY & GLOBAL ============= */ body[data-theme="tech"] { font-family: 'Share Tech Mono', 'JetBrains Mono', monospace; background: var(--bg-base); background-image: var(--scanline); } /* ============= SCROLLBAR ============= */ body[data-theme="tech"] ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 0; box-shadow: var(--tech-glow-cyan); } body[data-theme="tech"] ::-webkit-scrollbar-thumb:hover { background: #00fff2; } body[data-theme="tech"] ::-webkit-scrollbar-track { background: #050d1a; } /* ============= HEADER ============= */ body[data-theme="tech"] header { background: rgba(3, 8, 16, 0.95); border-bottom: 1px solid rgba(0, 229, 255, 0.3); box-shadow: 0 2px 20px rgba(0, 229, 255, 0.15), inset 0 -1px 0 rgba(0, 229, 255, 0.2); backdrop-filter: blur(20px); } body[data-theme="tech"] header div:first-child { font-family: 'Orbitron', sans-serif; background: linear-gradient(90deg, #00e5ff, #00ff88, #00e5ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: techGradient 4s linear infinite; letter-spacing: 2px; text-transform: uppercase; } @keyframes techGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ============= BUTTONS ============= */ body[data-theme="tech"] button { background: linear-gradient(135deg, #0a1628, #0f2240); border: 1px solid rgba(0, 229, 255, 0.25); border-radius: 2px; color: var(--text-main); font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.1); position: relative; overflow: hidden; } body[data-theme="tech"] button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), transparent); transition: left 0.5s ease; } body[data-theme="tech"] button:hover::before { left: 100%; } body[data-theme="tech"] button:hover { background: linear-gradient(135deg, #0f2240, #163060); border-color: var(--accent); box-shadow: var(--neon-glow); transform: translateY(-1px); color: #ffffff; } body[data-theme="tech"] button:active { transform: translateY(0); box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.2); } body[data-theme="tech"] .btn-run { background: linear-gradient(135deg, #003322, #005533); border-color: rgba(0, 255, 136, 0.5); box-shadow: 0 0 12px rgba(0, 255, 136, 0.2); color: #00ff88; } body[data-theme="tech"] .btn-run:hover { background: linear-gradient(135deg, #005533, #007744); box-shadow: var(--tech-glow-green), 0 4px 15px rgba(0, 255, 136, 0.3); color: #fff; } body[data-theme="tech"] .btn-stop { background: linear-gradient(135deg, #330011, #550022); border-color: rgba(255, 34, 85, 0.5); box-shadow: 0 0 12px rgba(255, 34, 85, 0.2); color: #ff2255; } body[data-theme="tech"] .btn-stop:hover { background: linear-gradient(135deg, #550022, #770033); box-shadow: var(--tech-glow-magenta), 0 4px 15px rgba(255, 34, 85, 0.3); color: #fff; } /* ============= PANELS & COLUMNS ============= */ body[data-theme="tech"] .col-left { background: var(--bg-panel); border-right: 1px solid rgba(0, 229, 255, 0.15); box-shadow: 2px 0 20px rgba(0, 229, 255, 0.05); } body[data-theme="tech"] .col-right { background: var(--bg-panel); border-left: 1px solid rgba(0, 229, 255, 0.15); box-shadow: -2px 0 20px rgba(0, 229, 255, 0.05); } body[data-theme="tech"] .col-center { background: radial-gradient(circle at center, #060e1f 0%, #010408 100%); background-image: radial-gradient(circle at center, #060e1f 0%, #010408 100%), linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; } /* ============= EDITOR ============= */ body[data-theme="tech"] .editor-header, body[data-theme="tech"] .panel-header { background: rgba(0, 229, 255, 0.05); border-bottom: 1px solid rgba(0, 229, 255, 0.2); color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 2px; } body[data-theme="tech"] .editor-wrapper { background: #020610; border: none; } body[data-theme="tech"] textarea { color: #00e5ff; font-family: 'Share Tech Mono', monospace; text-shadow: 0 0 4px rgba(0, 229, 255, 0.3); } body[data-theme="tech"] .highlight-bar { background: linear-gradient(90deg, rgba(0, 229, 255, 0.2), transparent); border-left: 3px solid var(--accent); box-shadow: 0 0 10px rgba(0, 229, 255, 0.1); } /* ============= ERROR PANEL ============= */ body[data-theme="tech"] .error-panel { background: var(--bg-panel); border-top: 1px solid rgba(255, 34, 85, 0.3); } body[data-theme="tech"] .error-item { background: rgba(255, 34, 85, 0.08); border-left: 4px solid #ff2255; color: #ff6688; font-family: 'Share Tech Mono', monospace; border-radius: 0; } body[data-theme="tech"] .error-item:hover { background: rgba(255, 34, 85, 0.15); box-shadow: 0 0 10px rgba(255, 34, 85, 0.1); } /* ============= DASHBOARD ============= */ body[data-theme="tech"] .dashboard { background: rgba(3, 8, 16, 0.85); border: 1px solid rgba(0, 229, 255, 0.25); border-radius: 2px; box-shadow: var(--shadow-lg), inset 0 0 20px rgba(0, 229, 255, 0.03); } body[data-theme="tech"] .dash-row { color: #00e5ff; font-family: 'Share Tech Mono', monospace; text-shadow: 0 0 6px rgba(0, 229, 255, 0.3); } body[data-theme="tech"] .dash-row span:first-child { color: #5588bb; } body[data-theme="tech"] .dash-row span[id="valRpm"] { color: #00ff88; text-shadow: 0 0 8px rgba(0, 255, 136, 0.5); } /* ============= CONTROLS AREA ============= */ body[data-theme="tech"] .controls-area { background: rgba(3, 8, 16, 0.95); border-top: 1px solid rgba(0, 229, 255, 0.2); box-shadow: 0 -2px 20px rgba(0, 229, 255, 0.08); } /* ============= PARAMS ============= */ body[data-theme="tech"] .param-group { background: rgba(0, 229, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 2px; } body[data-theme="tech"] input[type="number"], body[data-theme="tech"] input[type="text"], body[data-theme="tech"] select { background: #050d1a; border: 1px solid rgba(0, 229, 255, 0.2); color: #00e5ff; font-family: 'Share Tech Mono', monospace; border-radius: 0; } body[data-theme="tech"] input[type="number"]:focus, body[data-theme="tech"] input[type="text"]:focus, body[data-theme="tech"] select:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(0, 229, 255, 0.3), 0 0 2px rgba(0, 229, 255, 0.5); } body[data-theme="tech"] input[type="range"] { background: rgba(0, 229, 255, 0.2); border-radius: 0; } body[data-theme="tech"] input[type="range"]::-webkit-slider-thumb { background: var(--accent); border-radius: 0; width: 14px; height: 14px; box-shadow: var(--tech-glow-cyan); } /* ============= RIGHT COLUMN ============= */ body[data-theme="tech"] .right-bottom { background: #050810; border-top: 1px solid rgba(0, 229, 255, 0.15); } body[data-theme="tech"] .feature-list li { border-bottom: 1px solid rgba(0, 229, 255, 0.1); color: #5588bb; } body[data-theme="tech"] .feature-list li b { color: #00e5ff; } body[data-theme="tech"] .program-item { background: rgba(0, 229, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 2px; } body[data-theme="tech"] .program-item:hover { background: rgba(0, 229, 255, 0.12); border-color: var(--accent); box-shadow: var(--tech-glow-cyan); transform: translateY(-2px); } body[data-theme="tech"] .prog-id { color: #00e5ff; font-family: 'Orbitron', monospace; text-shadow: 0 0 6px rgba(0, 229, 255, 0.3); } body[data-theme="tech"] .prog-desc { color: #5588bb; } body[data-theme="tech"] .cmd-item { border-bottom: 1px solid rgba(0, 229, 255, 0.08); color: #5588bb; } body[data-theme="tech"] .cmd-item b { color: #00ff88; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0; font-family: 'Share Tech Mono', monospace; text-shadow: 0 0 4px rgba(0, 255, 136, 0.3); } /* ============= MODALS & OVERLAYS ============= */ body[data-theme="tech"] .designer-overlay, body[data-theme="tech"] .tool-manager-overlay { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); } body[data-theme="tech"] .designer-container { background: var(--bg-base); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 2px; box-shadow: 0 0 50px rgba(0, 229, 255, 0.1); } body[data-theme="tech"] .designer-header { background: rgba(0, 229, 255, 0.05); border-bottom: 1px solid rgba(0, 229, 255, 0.2); font-family: 'Orbitron', sans-serif; } body[data-theme="tech"] .d-col-preview { background: #010408; border-right: 1px solid rgba(0, 229, 255, 0.15); } body[data-theme="tech"] .d-col-stack { background: var(--bg-base); border-right: 1px solid rgba(0, 229, 255, 0.15); } body[data-theme="tech"] .d-col-tools { background: var(--bg-panel); } body[data-theme="tech"] .panel-label { background: rgba(0, 229, 255, 0.05); color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 10px; border-bottom: 1px solid rgba(0, 229, 255, 0.2); letter-spacing: 2px; } /* ============= STACK LIST ============= */ body[data-theme="tech"] .stack-item { background: rgba(0, 229, 255, 0.03); border-radius: 0; border-left: 4px solid rgba(0, 229, 255, 0.3); box-shadow: none; } body[data-theme="tech"] .stack-item:hover { background: rgba(0, 229, 255, 0.08); border-left-color: var(--accent); box-shadow: var(--tech-glow-cyan); } body[data-theme="tech"] .stack-item.start-node { border-left-color: var(--success); } body[data-theme="tech"] .si-icon { background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 0; } body[data-theme="tech"] .si-info { color: #5588bb; font-family: 'Share Tech Mono', monospace; } body[data-theme="tech"] .si-info b { color: #00e5ff; } /* ============= TOOL BUTTONS ============= */ body[data-theme="tech"] .t-btn { background: rgba(0, 229, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 0; box-shadow: none; transition: all 0.3s ease; } body[data-theme="tech"] .t-btn:hover { background: rgba(0, 229, 255, 0.1); border-color: var(--accent); box-shadow: var(--neon-glow); transform: translateY(-3px); } body[data-theme="tech"] .t-btn span:last-child { font-family: 'Share Tech Mono', monospace; font-size: 12px; } /* ============= DIRECTION GRID ============= */ body[data-theme="tech"] .d-btn { background: rgba(0, 229, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 0; color: #00e5ff; } body[data-theme="tech"] .d-btn:hover { background: rgba(0, 229, 255, 0.15); border-color: var(--accent); box-shadow: var(--tech-glow-cyan); } body[data-theme="tech"] .d-btn span { color: #5588bb; } body[data-theme="tech"] .d-btn:hover span { color: #00e5ff; } /* ============= INPUT GROUPS ============= */ body[data-theme="tech"] .input-group { background: rgba(0, 229, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.12); border-radius: 0; } body[data-theme="tech"] .input-row label { color: #5588bb; font-family: 'Share Tech Mono', monospace; } body[data-theme="tech"] .input-row input, body[data-theme="tech"] .input-row select { border-radius: 0; } /* ============= TOOL MANAGER ============= */ body[data-theme="tech"] .tool-manager-modal { background: var(--bg-base); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 2px; box-shadow: 0 0 50px rgba(0, 229, 255, 0.1); } body[data-theme="tech"] .tm-header { background: rgba(0, 229, 255, 0.05); border-bottom: 1px solid rgba(0, 229, 255, 0.2); font-family: 'Orbitron', sans-serif; } body[data-theme="tech"] .tm-list { background: var(--bg-panel); border-right: 1px solid rgba(0, 229, 255, 0.15); } body[data-theme="tech"] .tm-item { border-radius: 0; background: rgba(0, 229, 255, 0.02); } body[data-theme="tech"] .tm-item:hover { background: rgba(0, 229, 255, 0.08); } body[data-theme="tech"] .tm-item.active { background: rgba(0, 229, 255, 0.12); border-left: 4px solid var(--accent); } body[data-theme="tech"] .tm-form { background: var(--bg-base); } body[data-theme="tech"] .tm-custom-area { background: rgba(0, 229, 255, 0.03); border: 1px dashed rgba(0, 229, 255, 0.2); border-radius: 0; } body[data-theme="tech"] .tm-custom-diagram { background: #050d1a; border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 0; } /* ============= WIP BADGE ============= */ body[data-theme="tech"] .badge-wip { background: #ff2255; color: #fff; border-radius: 0; box-shadow: var(--tech-glow-magenta); font-family: 'Orbitron', sans-serif; font-size: 8px; } /* ============= STATUS BADGE ============= */ body[data-theme="tech"] #statusBadge { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; text-shadow: 0 0 8px currentColor; } /* ============= MEASURE PANEL ============= */ body[data-theme="tech"] #measurePanel { background: rgba(0, 229, 255, 0.05); border-top: 1px solid rgba(0, 229, 255, 0.2); border-radius: 0; } /* ============= CORNER ANIMATIONS ============= */ body[data-theme="tech"] .designer-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00e5ff, transparent); animation: scanLine 3s linear infinite; z-index: 1; } @keyframes scanLine { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } /* ============= HEADER SELECT DROPDOWNS ============= */ body[data-theme="tech"] header select { background: #050d1a !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; color: #00e5ff !important; font-family: 'Share Tech Mono', monospace !important; border-radius: 0 !important; } body[data-theme="tech"] header button { border-radius: 0 !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 1px; } /* ============= PULSE ANIMATION ON ACCENT ELEMENTS ============= */ @keyframes techPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } body[data-theme="tech"] .btn-run { animation: techPulse 2s ease-in-out infinite; } body[data-theme="tech"] .btn-run:hover { animation: none; }