/* theme-steampunk.css - Steampunk Aesthetic Theme Applied via [data-theme="steampunk"] on Mechanical, brass, copper, and dark leather aesthetic. */ /* ============= CUSTOM FONTS ============= */ @import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=VT323&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="steampunk"] { --bg-base: #1a1412; /* Very dark deep brown/black */ --bg-panel: #2e211a; /* Dark leather */ --bg-elevated: #3d2c23; /* Aged wood/lighter leather */ --border: #a86c47; /* Copper/Bronze */ --accent: #d4af37; /* Brass/Gold */ --accent-hover: #fae28c; /* Bright Brass */ --accent-sky: #4e827b; /* Oxidized copper patina */ --accent-warm: #9c3f2b; /* Rust red */ --accent-spirit: #8c735b; /* Worn suede */ --success: #6c823f; /* Olive brass */ --success-hover: #819b4c; --danger: #9c2b2b; /* Crimson rust */ --danger-hover: #bf3f3f; --warning: #cc8b33; /* Tarnished gold */ --text-main: #e6d3ba; /* Aged parchment / pale brass */ --text-muted: #a38c75; /* Dusty brown */ --radius-lg: 8px; /* Mechanically sharper corners */ --radius-md: 4px; --radius-sm: 2px; --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(212, 175, 55, 0.2); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 2px 5px rgba(212, 175, 55, 0.3); --steampunk-bg: radial-gradient(circle at 10% 20%, rgba(168, 108, 71, 0.1) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(78, 130, 123, 0.1) 0%, transparent 50%); /* === Block Colors (蒸氣龐克機械風) === */ --block-bg: #2e211a; /* 暗皮革底 */ --block-setup: #8c735b; /* 磨損麂皮 */ --block-tool: #d4af37; /* 黃銅 */ --block-cycle-start: #cc8b33; /* 鍛鐵金 */ --block-cycle-g73: #d4af37; /* 亮黃銅 */ --block-cycle-g75: #4e827b; /* 氧化銅綠 */ --block-cycle-end: #d4af37; /* 亮黃銅 */ --block-finish: #6c823f; /* 橄欖銅綠 */ --block-drill: #8c9c5a; /* 古銅綠 */ --block-mill: #4e827b; /* 氧化銅青 */ --block-radial-slot: #a86c47; /* 銅管橘 */ --block-radial-profile: #4e827b; /* 氧化銅綠 */ --block-engrave: #fae28c; /* 亮黃銅光 */ --block-parting: #9c3f2b; /* 鐵鏽紅 */ --block-tap: #c99877; /* 玫瑰銅 */ --block-face-tap: #cc8b33; /* 鍛鐵金 */ --block-thread: #8b5e3c; /* 紅銅 */ --block-multi-thread: #cc8b33; /* 鍛鐵金 */ --block-pulley: #4e827b; /* 氧化銅綠 */ --block-insert-indicator: #d4af37; /* 黃銅 */ --block-insert-bg: #3d2c23; /* 深皮革 */ } /* ============= BODY & GLOBAL ============= */ body[data-theme="steampunk"] { font-family: 'Special Elite', 'Courier New', monospace; background: var(--bg-base); background-image: var(--steampunk-bg); color: var(--text-main); } /* ============= SCROLLBAR ============= */ body[data-theme="steampunk"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6b4d36, #a86c47, #4e3626); border-radius: 4px; border: 1px solid #1a1412; } body[data-theme="steampunk"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8c6a51, #d4af37, #6b4d36); } body[data-theme="steampunk"] ::-webkit-scrollbar-track { background: #1a1412; border-radius: 4px; } /* ============= HEADER ============= */ body[data-theme="steampunk"] header { background: linear-gradient(180deg, #2e211a 0%, #17110e 100%); border-bottom: 4px solid var(--border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.05); } body[data-theme="steampunk"] header div:first-child { font-family: 'Playfair Display', serif; color: var(--accent); text-shadow: 0 2px 4px #000, 0 0 10px rgba(212, 175, 55, 0.4); font-weight: 700; letter-spacing: 2px; } /* ============= BUTTONS ============= */ body[data-theme="steampunk"] button { background: linear-gradient(180deg, #4b3621 0%, #2e211a 100%); border: 1px solid var(--border); border-top: 1px solid #c99877; border-radius: var(--radius-md); color: var(--text-main); font-family: 'Special Elite', monospace; font-weight: 600; text-transform: uppercase; transition: all 0.2s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.1); } body[data-theme="steampunk"] button:hover { background: linear-gradient(180deg, #5c432d 0%, #3d2c23 100%); color: var(--accent-hover); border-color: var(--accent); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8), inset 0 1px 5px rgba(212, 175, 55, 0.3); transform: translateY(-2px); } body[data-theme="steampunk"] button:active { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8); background: #2e211a; } body[data-theme="steampunk"] .btn-run { background: linear-gradient(180deg, #6c823f 0%, #455427 100%); border: 1px solid #8ba851; color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,255,255,0.2); } body[data-theme="steampunk"] .btn-run:hover { background: linear-gradient(180deg, #819b4c 0%, #586b32 100%); border-color: #a8cf5c; color: #fff; } body[data-theme="steampunk"] .btn-stop { background: linear-gradient(180deg, #9c2b2b 0%, #5e1818 100%); border: 1px solid #bf3f3f; color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,255,255,0.2); } body[data-theme="steampunk"] .btn-stop:hover { background: linear-gradient(180deg, #bf3f3f 0%, #7d1f1f 100%); border-color: #e55555; color: #fff; } /* ============= PANELS & COLUMNS ============= */ body[data-theme="steampunk"] .col-left { background: var(--bg-panel); border-right: 3px solid #1a1412; box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5); position: relative; } body[data-theme="steampunk"] .col-right { background: var(--bg-panel); border-left: 3px solid #1a1412; box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5); } body[data-theme="steampunk"] .col-center { background: linear-gradient(135deg, #1f1815 0%, #2b1f1a 100%); } /* ============= EDITOR ============= */ body[data-theme="steampunk"] .editor-header, body[data-theme="steampunk"] .panel-header { background: linear-gradient(90deg, #2b1f1a, #1a1412); border-bottom: 2px solid var(--border); color: var(--accent); font-family: 'Playfair Display', serif; font-weight: 700; text-shadow: 1px 1px 2px #000; } body[data-theme="steampunk"] .editor-wrapper { background: #110d0a; border: none; border-radius: 0; } body[data-theme="steampunk"] textarea { color: #d4af37; font-family: 'VT323', 'Courier New', monospace; font-size: 16px; background: #110d0a; } body[data-theme="steampunk"] .highlight-bar { background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent); border-left: 3px solid var(--accent); } /* ============= ERROR PANEL ============= */ body[data-theme="steampunk"] .error-panel { background: #2b1111; border-top: 2px solid var(--danger); } body[data-theme="steampunk"] .error-item { background: #1a0a0a; border-left: 4px solid var(--danger); color: #d86c6c; border-radius: var(--radius-sm); margin: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); } /* ============= DASHBOARD ============= */ body[data-theme="steampunk"] .dashboard { background: url('data:image/svg+xml;utf8,'), #2e211a; border: 3px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px #000, inset 0 2px 10px rgba(212, 175, 55, 0.15); } body[data-theme="steampunk"] .dash-row { color: var(--text-main); font-weight: 600; border-bottom: 1px dotted var(--border); } body[data-theme="steampunk"] .dash-row span:first-child { color: var(--text-muted); } body[data-theme="steampunk"] .dash-row span[id="valRpm"] { color: var(--accent-hover); font-weight: 700; text-shadow: 0 0 5px rgba(250, 226, 140, 0.3); } /* ============= CONTROLS AREA ============= */ body[data-theme="steampunk"] .controls-area { background: #2b1f1a; border-top: 3px solid #1a1412; } /* ============= PARAMS ============= */ body[data-theme="steampunk"] .param-group { background: #2e211a; border: 2px solid var(--border); border-radius: var(--radius-md); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); } body[data-theme="steampunk"] input[type="number"], body[data-theme="steampunk"] input[type="text"], body[data-theme="steampunk"] select { background: #1a1412; border: 1px solid var(--border); color: var(--text-main); font-family: 'VT323', monospace; font-size: 16px; border-radius: var(--radius-sm); padding: 6px 10px; } body[data-theme="steampunk"] input[type="number"]:focus, body[data-theme="steampunk"] input[type="text"]:focus, body[data-theme="steampunk"] select:focus { border-color: var(--accent); box-shadow: 0 0 5px var(--accent); outline: none; background: #000; } body[data-theme="steampunk"] input[type="range"] { background: linear-gradient(90deg, #4b3621, #a86c47); border-radius: 4px; height: 10px; border: 1px solid #1a1412; } body[data-theme="steampunk"] input[type="range"]::-webkit-slider-thumb { background: radial-gradient(circle, #d4af37, #a86c47); border: 2px solid #8c5a3b; border-radius: 50%; width: 20px; height: 20px; box-shadow: 0 2px 8px #000, inset 0 1px 3px rgba(255,255,255,0.4); } /* ============= MEASURE PANEL ============= */ body[data-theme="steampunk"] #measurePanel { background: #2e211a; border: 2px solid var(--accent-sky); border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(0,0,0,0.8); } /* ============= RIGHT COLUMN ============= */ body[data-theme="steampunk"] .right-bottom { background: #2b1f1a; border-top: 2px solid var(--border); } body[data-theme="steampunk"] .program-item { background: linear-gradient(90deg, #3d2c23, #2e211a); border: 1px solid #4a362a; border-left: 3px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 2px 5px #000; } body[data-theme="steampunk"] .program-item:hover { border-color: var(--accent); border-left: 3px solid var(--accent); box-shadow: 0 4px 10px #000; transform: translateX(4px); } body[data-theme="steampunk"] .prog-id { color: var(--accent); font-weight: 700; } body[data-theme="steampunk"] .cmd-item b { color: #1a1412; background: var(--border); border-radius: 2px; padding: 2px 6px; } /* ============= STACK LIST ============= */ body[data-theme="steampunk"] .stack-item { background: #3d2c23; border-radius: var(--radius-sm); border: 1px solid #1a1412; border-left: 4px solid var(--border); box-shadow: 0 3px 8px #000; } body[data-theme="steampunk"] .stack-item:hover { background: #4b3621; border-left-color: var(--accent); box-shadow: 0 5px 12px #000; transform: translateX(3px); } body[data-theme="steampunk"] .stack-item.start-node { border-left-color: var(--warning); background: #4d3a22; } body[data-theme="steampunk"] .si-icon { background: #2e211a; border: 2px solid var(--border); border-radius: 50%; color: var(--accent); } body[data-theme="steampunk"] .si-info { color: var(--text-muted); } body[data-theme="steampunk"] .si-info b { color: var(--text-main); } /* ============= INPUT GROUPS ============= */ body[data-theme="steampunk"] .input-group { background: #2b1f1a; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8); } body[data-theme="steampunk"] .input-row label { color: var(--text-muted); font-weight: 600; } body[data-theme="steampunk"] .input-row input, body[data-theme="steampunk"] .input-row select { background: #110d0a !important; border: 1px solid var(--border) !important; color: var(--accent-hover) !important; border-radius: var(--radius-sm); padding: 6px 10px; } body[data-theme="steampunk"] .input-row input:focus, body[data-theme="steampunk"] .input-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); outline: none; } /* ============= MODALS & OVERLAYS ============= */ body[data-theme="steampunk"] .designer-overlay, body[data-theme="steampunk"] .tool-manager-overlay { background: rgba(26, 20, 18, 0.85); backdrop-filter: sepia(0.6) blur(6px); } body[data-theme="steampunk"] .designer-container { background: url('data:image/svg+xml;utf8,'), var(--bg-panel); border: 4px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px #000, inset 0 0 20px rgba(0,0,0,0.8); } body[data-theme="steampunk"] .designer-header { background: linear-gradient(180deg, #3d2c23, #1a1412); border-bottom: 3px solid var(--border); color: var(--accent); font-family: 'Playfair Display', serif; letter-spacing: 1px; } body[data-theme="steampunk"] .d-col-preview, body[data-theme="steampunk"] .d-col-stack, body[data-theme="steampunk"] .d-col-tools { border-right: 2px solid #1a1412; background: rgba(0,0,0,0.3); } body[data-theme="steampunk"] .panel-label { background: #1a1412; color: var(--accent-hover); border-bottom: 2px solid var(--border); margin: 0; padding: 10px; } /* Override inline dark styles inside designer */ body[data-theme="steampunk"] .tool-grid, body[data-theme="steampunk"] .stock-panel { background: #2b1f1a !important; border: 2px solid #5c432d !important; border-radius: 4px !important; box-shadow: inset 0 5px 15px rgba(0,0,0,0.6) !important; } body[data-theme="steampunk"] .d-col-tools div[style*="font-size:12px"] { color: var(--accent) !important; border-bottom: 1px dotted var(--border) !important; font-family: 'Special Elite', monospace; font-weight: 700 !important; } body[data-theme="steampunk"] .stock-panel label { color: var(--text-muted); } body[data-theme="steampunk"] .stock-panel input { background: #110d0a !important; border: 1px solid var(--border) !important; color: var(--accent-hover) !important; border-radius: var(--radius-sm); padding: 4px 8px; font-family: 'VT323', monospace; font-size: 16px; } /* ============= TOOL BUTTONS ============= */ body[data-theme="steampunk"] .t-btn { background: linear-gradient(180deg, #4b3621, #2e211a); border: 1px solid var(--border); border-top: 1px solid #e1b493; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.5); color: var(--text-main); } body[data-theme="steampunk"] .t-btn:hover { border-color: var(--accent); background: linear-gradient(180deg, #5c432d, #3d2c23); box-shadow: 0 6px 12px rgba(0,0,0,0.8), inset 0 1px 3px rgba(212,175,55,0.2); transform: translateY(-2px); color: var(--accent-hover); } body[data-theme="steampunk"] .d-btn { background: #2e211a; border: 1px solid var(--border); border-radius: 3px; color: var(--text-main); } body[data-theme="steampunk"] .d-btn:hover { background: var(--accent-spirit); border-color: var(--accent); color: #fff; } body[data-theme="steampunk"] .d-btn:hover span { color: #fff; } /* ============= HEADER SELECT DROPDOWNS ============= */ body[data-theme="steampunk"] header select { background: #1a1412 !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; border-radius: 2px !important; font-weight: 600; } body[data-theme="steampunk"] header select:focus { background: #000 !important; border-color: var(--accent) !important; box-shadow: 0 0 5px rgba(212, 175, 55, 0.4); } body[data-theme="steampunk"] header button { background: linear-gradient(180deg, #4b3621, #2e211a) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; border-radius: 2px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important; } body[data-theme="steampunk"] header button:hover { background: var(--accent-spirit) !important; color: #fff !important; } /* ============= ANIMATIONS ============= */ @keyframes steampunkGear { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body[data-theme="steampunk"] .btn-run::before { content: '⚙️ '; display: inline-block; animation: steampunkGear 4s linear infinite; } body[data-theme="steampunk"] .btn-run:hover::before { animation: steampunkGear 2s linear infinite; }