/* theme-liberty.css - Liberty Theme (Opulent Mansion / Luxury Classic) Applied via [data-theme="liberty"] on Aesthetic: High-end European mansion, rich mahogany wood, gold leaf, glossy cream marble. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,800;1,500&family=Nunito:wght@400;600;700&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="liberty"] { --bg-base: #fdfbf7; /* Glossy cream marble */ --bg-panel: #f8f4eb; /* Warm cream */ --bg-elevated: #ffffff; /* Pure white highlights */ --border: #d4af37; /* Gold / Brass molding */ --accent: #4a1f0a; /* Rich dark mahogany wood */ --accent-hover: #692d11; /* Lighter cherry wood */ --accent-sky: #c5a059; /* Warm ambient gold glow */ --accent-warm: #7a1515; /* Deep burgundy velvet */ --accent-spirit: #8c6a38; /* Antique bronze */ --success: #2d452b; /* Classic dark green */ --success-hover: #3c5938; --danger: #7a1515; /* Burgundy / Cherry */ --danger-hover: #9e1f1f; --warning: #d4af37; /* Gold */ --text-main: #2b1104; /* Very dark wood brown */ --text-muted: #755944; /* Mid brown */ --radius-lg: 16px; --radius-md: 8px; --radius-sm: 4px; --shadow-soft: 0 5px 15px rgba(74, 31, 10, 0.1), 0 2px 5px rgba(74, 31, 10, 0.05); --shadow-lg: 0 15px 35px rgba(74, 31, 10, 0.15), 0 5px 15px rgba(74, 31, 10, 0.1); /* === Block Colors (自由奢華古典風) === */ --block-bg: #f7f3ea; /* 象牙白底 */ --block-setup: #8c6a38; /* 古銅色 */ --block-tool: #4a1f0a; /* 桃花心木 */ --block-cycle-start: #b87333; /* 拋光銅 */ --block-cycle-g73: #d4af37; /* 金箔 */ --block-cycle-g75: #c5a059; /* 暖金光 */ --block-cycle-end: #d4af37; /* 金箔 */ --block-finish: #2d452b; /* 經典深綠 */ --block-drill: #3c5938; /* 橡木綠 */ --block-mill: #2d452b; /* 經典深綠 */ --block-radial-slot: #692d11; /* 櫻桃木 */ --block-radial-profile: #8c6a38; /* 古銅色 */ --block-engrave: #ffd700; /* 純金 */ --block-parting: #7a1515; /* 勃艮第酒紅 */ --block-tap: #b87333; /* 拋光銅 */ --block-face-tap: #b87333; /* 拋光銅 */ --block-thread: #7a1515; /* 勃艮第酒紅 */ --block-multi-thread: #b87333; /* 拋光銅 */ --block-pulley: #c5a059; /* 暖金光 */ --block-insert-indicator: #d4af37; /* 金箔 */ --block-insert-bg: #faf5e8; /* 象牙光澤 */ } /* ============= BODY & GLOBAL ============= */ body[data-theme="liberty"] { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; background: var(--bg-base); color: var(--text-main); background-image: linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(212,175,55,0.03) 1px, transparent 1px); background-size: 60px 60px; } /* ============= SCROLLBAR ============= */ body[data-theme="liberty"] ::-webkit-scrollbar-thumb { background: var(--accent-sky); border-radius: 4px; border: 2px solid var(--bg-base); } body[data-theme="liberty"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); } body[data-theme="liberty"] ::-webkit-scrollbar-track { background: var(--bg-base); } /* ============= HEADER ============= */ body[data-theme="liberty"] header { background: linear-gradient(180deg, #3b1c0a 0%, #4a1f0a 100%); border-bottom: 4px solid var(--border); color: #fcfcf5; box-shadow: 0 5px 20px rgba(0,0,0,0.3); } body[data-theme="liberty"] header div:first-child { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 22px; letter-spacing: 2px; color: #ffd700; text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 10px rgba(212,175,55,0.4); } body[data-theme="liberty"] header select, body[data-theme="liberty"] header button { background: #fdfbf7 !important; color: var(--accent) !important; border: 2px solid var(--border) !important; border-radius: 4px !important; font-family: 'Nunito', sans-serif; font-weight: 700; } body[data-theme="liberty"] header select:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5); } /* ============= BUTTONS ============= */ body[data-theme="liberty"] button { background: linear-gradient(180deg, #ffffff 0%, #f7f3ea 100%); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-soft); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body[data-theme="liberty"] button:hover { border-color: var(--accent); background: linear-gradient(180deg, #f7f3ea 0%, #ecdcb8 100%); color: var(--accent); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25); transform: translateY(-2px); } body[data-theme="liberty"] .btn-run { background: linear-gradient(180deg, #4a1f0a 0%, #2b1104 100%); color: #ffd700; border: 2px solid var(--border); box-shadow: 0 4px 15px rgba(74, 31, 10, 0.4); } body[data-theme="liberty"] .btn-run:hover { background: linear-gradient(180deg, #692d11 0%, #4a1f0a 100%); color: #ffffff; border-color: #ffd700; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); } body[data-theme="liberty"] .btn-stop { background: linear-gradient(180deg, #9e1f1f 0%, #7a1515 100%); color: #ffffff; border: 2px solid var(--danger-hover); box-shadow: 0 4px 10px rgba(122, 21, 21, 0.3); } body[data-theme="liberty"] .btn-stop:hover { background: linear-gradient(180deg, #ba2424 0%, #9e1f1f 100%); } /* ============= PANELS & COLUMNS ============= */ body[data-theme="liberty"] .col-left, body[data-theme="liberty"] .col-right { background: var(--bg-panel); border-right: 2px solid var(--border); box-shadow: 5px 0 20px rgba(74,31,10,0.05); } body[data-theme="liberty"] .col-right { border-left: 2px solid var(--border); border-right: none; box-shadow: -5px 0 20px rgba(74,31,10,0.05); } body[data-theme="liberty"] .col-center { background: radial-gradient(circle at center, #fdfbf7 0%, #eae0ce 100%); } /* ============= EDITOR ============= */ body[data-theme="liberty"] .editor-header, body[data-theme="liberty"] .panel-header { background: linear-gradient(90deg, #f7f3ea 0%, #ecdcb8 100%); border-bottom: 2px solid var(--border); color: var(--accent); font-weight: 700; font-family: 'Playfair Display', serif; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; } body[data-theme="liberty"] .editor-wrapper { background: #ffffff; border: 2px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); } body[data-theme="liberty"] textarea { color: var(--accent); font-family: 'Consolas', 'Courier New', monospace; font-size: 16px; } /* ============= DASHBOARD ============= */ body[data-theme="liberty"] .dashboard { background: rgba(253, 251, 247, 0.9); border: 3px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); } body[data-theme="liberty"] .dash-row { color: var(--text-main); border-bottom: 1px dotted var(--border); font-family: 'Playfair Display', serif; font-weight: 600; } body[data-theme="liberty"] .dash-row span[id="valRpm"] { color: var(--accent-warm); font-weight: 800; } /* ============= CONTROLS AREA ============= */ body[data-theme="liberty"] .controls-area { background: var(--bg-panel); border-top: 3px solid var(--border); box-shadow: 0 -5px 15px rgba(74, 31, 10, 0.05); } /* ============= PARAMS ============= */ body[data-theme="liberty"] .param-group { background: var(--bg-base); border: 2px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); } body[data-theme="liberty"] input[type="number"], body[data-theme="liberty"] input[type="text"], body[data-theme="liberty"] select { background: #ffffff; border: 1px solid var(--border); color: var(--accent); border-radius: var(--radius-sm); padding: 6px 10px; font-family: 'Nunito', sans-serif; font-weight: 700; } body[data-theme="liberty"] input[type="number"]:focus, body[data-theme="liberty"] input[type="text"]:focus, body[data-theme="liberty"] select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3); outline: none; } body[data-theme="liberty"] input[type="range"] { background: var(--border); height: 8px; border-radius: 4px; } body[data-theme="liberty"] input[type="range"]::-webkit-slider-thumb { background: var(--accent); border: 2px solid #ffd700; border-radius: 50%; width: 20px; height: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* ============= MEASURE PANEL ============= */ body[data-theme="liberty"] #measurePanel { background: #ffffff; border: 2px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } /* ============= RIGHT COLUMN (PROGRAMS) ============= */ body[data-theme="liberty"] .right-bottom { background: var(--bg-panel); } body[data-theme="liberty"] .program-item { background: #ffffff; border: 1px solid var(--border); border-left: 6px solid var(--accent-spirit); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); } body[data-theme="liberty"] .program-item:hover { border-color: var(--accent); border-left-color: var(--warning); transform: translateX(3px); background: #fdfbf7; } body[data-theme="liberty"] .prog-id { color: var(--accent); font-family: 'Playfair Display', serif; font-weight: 800; } /* ============= DESIGNER ============= */ body[data-theme="liberty"] .designer-overlay, body[data-theme="liberty"] .tool-manager-overlay { background: rgba(43, 17, 4, 0.85); backdrop-filter: blur(8px); } body[data-theme="liberty"] .designer-container { background: var(--bg-base); border: 4px solid var(--accent); border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 2px #d4af37 inset; } body[data-theme="liberty"] .designer-header { background: linear-gradient(180deg, #4a1f0a 0%, #2b1104 100%); border-bottom: 2px solid var(--border); color: #ffd700; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 18px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } body[data-theme="liberty"] .d-col-preview, body[data-theme="liberty"] .d-col-stack, body[data-theme="liberty"] .d-col-tools { border-right: 2px solid var(--border); background: #fdfaf3; } body[data-theme="liberty"] .panel-label { background: linear-gradient(90deg, #f7f3ea 0%, #ecdcb8 100%); color: var(--accent); border-bottom: 2px solid var(--border); font-family: 'Playfair Display', serif; font-weight: 800; font-size: 14px; margin: 0; padding: 10px; } /* Override inline dark styles inside designer */ body[data-theme="liberty"] .tool-grid, body[data-theme="liberty"] .stock-panel { background: #fdf8eb !important; border: 2px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: inset 0 2px 10px rgba(212, 175, 55, 0.1) !important; } body[data-theme="liberty"] .d-col-tools div[style*="font-size:12px"] { color: var(--accent) !important; border-bottom: 2px solid var(--border) !important; font-weight: 800 !important; font-family: 'Playfair Display', serif; text-transform: uppercase; font-size: 13px !important; letter-spacing: 1px; } body[data-theme="liberty"] .stock-panel input { background: #ffffff !important; border: 1px solid var(--border) !important; color: var(--accent) !important; border-radius: var(--radius-sm); padding: 4px 8px; } /* ============= TOOL BUTTONS ============= */ body[data-theme="liberty"] .t-btn { background: linear-gradient(180deg, #ffffff 0%, #f7f3ea 100%); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 6px rgba(74, 31, 10, 0.05); color: var(--accent); font-family: 'Nunito', sans-serif; font-weight: 700; } body[data-theme="liberty"] .t-btn:hover { border-color: var(--accent); background: linear-gradient(180deg, #f7f3ea 0%, #eaddb6 100%); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(212, 175, 55, 0.2); } /* ============= STACK LIST ============= */ body[data-theme="liberty"] .stack-item { background: #ffffff; border: 1px solid var(--border); border-left: 6px solid var(--accent-spirit); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(74, 31, 10, 0.05); } body[data-theme="liberty"] .stack-item:hover { border-left-color: var(--warning); box-shadow: 0 6px 15px rgba(212, 175, 55, 0.15); background: #fdfbf7; transform: translateX(3px); } body[data-theme="liberty"] .stack-item.start-node { border-left-color: var(--danger); background: #fff4f4; } /* ============= INPUT GROUPS ============= */ body[data-theme="liberty"] .input-group { background: #fdfaf3; border: 2px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 0 2px 5px rgba(212, 175, 55, 0.05); } body[data-theme="liberty"] .input-row input, body[data-theme="liberty"] .input-row select { background: #ffffff !important; border: 1px solid var(--border) !important; color: var(--accent) !important; font-family: 'Nunito', sans-serif; border-radius: var(--radius-sm); } body[data-theme="liberty"] .input-row input:focus, body[data-theme="liberty"] .input-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3); outline: none; }