/* theme-oxford.css - British Aesthetic Theme (Oxford) Applied via [data-theme="oxford"] on Academic, sophisticated, rain-soaked, aristocratic vibe (Oxford Blue, Racing Green, Crimson, Gold). */ /* ============= CUSTOM FONTS ============= */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="oxford"] { --bg-base: #e9e6df; /* Parchment / Old paper */ --bg-panel: #fcfbfa; /* Cream white */ --bg-elevated: #ffffff; /* Pure white */ --border: #d4c8b8; /* Light tan/stone border */ --accent: #002147; /* Oxford Blue */ --accent-hover: #003b7a; /* Brighter Blue */ --accent-sky: #4f6d7a; /* Foggy blue-grey */ --accent-warm: #8a1538; /* Crimson Red */ --accent-spirit: #004d40; /* British Racing Green */ --success: #2e5a40; /* Deep Green */ --success-hover: #3b7654; --danger: #8a1538; /* Crimson */ --danger-hover: #b31b49; --warning: #cfb53b; /* Gold/Brass */ --text-main: #1c2621; /* Charcoal green/black */ --text-muted: #6b6b61; /* Mossy grey */ --radius-lg: 10px; --radius-md: 4px; --radius-sm: 2px; --shadow-soft: 0 5px 15px rgba(0, 33, 71, 0.08); --shadow-lg: 0 10px 30px rgba(0, 33, 71, 0.12); /* === Block Colors (牛津學院風) === */ --block-bg: #f4efe9; /* 羊皮紙底 */ --block-setup: #6b6b61; /* 石牆灰 */ --block-tool: #002147; /* 牛津藍 */ --block-cycle-start: #b85c1f; /* 皮革棕 */ --block-cycle-g73: #cfb53b; /* 校徽金 */ --block-cycle-g75: #4f6d7a; /* 霧藍灰 */ --block-cycle-end: #cfb53b; /* 校徽金 */ --block-finish: #2e5a40; /* 賽車綠 */ --block-drill: #004d40; /* 深綠 */ --block-mill: #2e5a40; /* 賽車綠 */ --block-radial-slot: #003b7a; /* 深藍 */ --block-radial-profile: #4f6d7a; /* 霧藍灰 */ --block-engrave: #cfb53b; /* 校徽金 */ --block-parting: #8a1538; /* 深紅 */ --block-tap: #b85c1f; /* 皮革棕 */ --block-face-tap: #b85c1f; /* 皮革棕 */ --block-thread: #8a1538; /* 深紅 */ --block-multi-thread: #b85c1f; /* 皮革棕 */ --block-pulley: #4f6d7a; /* 霧藍灰 */ --block-insert-indicator: #cfb53b; /* 校徽金 */ --block-insert-bg: #eae5d8; /* 暖羊皮紙 */ } /* ============= BODY & GLOBAL ============= */ body[data-theme="oxford"] { font-family: 'Lora', serif; background: var(--bg-base); background-image: repeating-linear-gradient(45deg, rgba(0,33,71,0.02) 0, rgba(0,33,71,0.02) 2px, transparent 2px, transparent 8px); color: var(--text-main); } /* ============= SCROLLBAR ============= */ body[data-theme="oxford"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } body[data-theme="oxford"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-spirit); } body[data-theme="oxford"] ::-webkit-scrollbar-track { background: var(--bg-base); } /* ============= HEADER ============= */ body[data-theme="oxford"] header { background: #002147; /* Oxford Blue */ border-bottom: 4px solid #cfb53b; /* Gold */ color: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } body[data-theme="oxford"] header div:first-child { font-family: 'Crimson Pro', serif; font-weight: 700; font-size: 22px; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(207, 181, 59, 0.5); } body[data-theme="oxford"] header select, body[data-theme="oxford"] header button { background: #003b7a !important; color: #ffffff !important; border: 1px solid #cfb53b !important; border-radius: 2px !important; font-family: 'Lora', serif; } body[data-theme="oxford"] header select:focus { box-shadow: 0 0 5px var(--warning); } /* ============= BUTTONS ============= */ body[data-theme="oxford"] button { background: #ffffff; border: 2px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 15px; transition: all 0.2s ease; } body[data-theme="oxford"] button:hover { background: var(--accent); color: #ffffff; box-shadow: var(--shadow-soft); } body[data-theme="oxford"] .btn-run { background: var(--accent-spirit); border-color: #00332a; color: #ffffff; } body[data-theme="oxford"] .btn-run:hover { background: #006655; border-color: #004d40; } body[data-theme="oxford"] .btn-stop { background: var(--danger); border-color: #630e28; color: #ffffff; } body[data-theme="oxford"] .btn-stop:hover { background: var(--danger-hover); border-color: var(--danger); } /* ============= PANELS & COLUMNS ============= */ body[data-theme="oxford"] .col-left, body[data-theme="oxford"] .col-right { background: var(--bg-panel); border-right: 1px solid var(--border); box-shadow: 2px 0 15px rgba(0,0,0,0.03); } body[data-theme="oxford"] .col-right { border-left: 1px solid var(--border); } /* ============= EDITOR ============= */ body[data-theme="oxford"] .editor-header, body[data-theme="oxford"] .panel-header { background: #f4efe9; border-bottom: 2px solid var(--border); color: var(--accent); font-weight: 700; font-family: 'Crimson Pro', serif; text-transform: capitalize; } body[data-theme="oxford"] .editor-wrapper { background: #ffffff; border: 1px solid var(--border); } body[data-theme="oxford"] textarea { font-family: 'Consolas', 'Courier New', monospace; font-size: 15px; color: var(--text-main); } /* ============= DASHBOARD ============= */ body[data-theme="oxford"] .dashboard { background: #ffffff; border: 3px double var(--border); border-radius: 0; box-shadow: var(--shadow-soft); } body[data-theme="oxford"] .dash-row { color: var(--text-main); border-bottom: 1px dotted var(--border); } body[data-theme="oxford"] .dash-row span[id="valRpm"] { color: var(--accent-warm); font-weight: 700; } /* ============= CONTROLS AREA ============= */ body[data-theme="oxford"] .controls-area { background: var(--bg-panel); border-top: 1px solid var(--border); } /* ============= PARAMS ============= */ body[data-theme="oxford"] .param-group { background: var(--bg-base); border: 1px solid var(--border); border-radius: 2px; } body[data-theme="oxford"] input[type="number"], body[data-theme="oxford"] input[type="text"], body[data-theme="oxford"] select { background: #ffffff; border: 1px solid var(--border); color: var(--text-main); padding: 4px 8px; font-family: 'Courier New', monospace; font-size: 14px; } body[data-theme="oxford"] input[type="number"]:focus, body[data-theme="oxford"] input[type="text"]:focus, body[data-theme="oxford"] select:focus { border-color: var(--accent); box-shadow: 0 0 4px rgba(0, 33, 71, 0.2); outline: none; } body[data-theme="oxford"] input[type="range"] { background: var(--border); height: 6px; border-radius: 3px; -webkit-appearance: none; appearance: none; } body[data-theme="oxford"] input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: var(--warning); border: 2px solid var(--accent); border-radius: 0; width: 16px; height: 20px; } /* ============= RIGHT COLUMN (PROGRAMS) ============= */ body[data-theme="oxford"] .program-item { background: #ffffff; border: 1px solid var(--border); border-left: 4px solid var(--accent-spirit); border-radius: 0; } body[data-theme="oxford"] .program-item:hover { border-color: var(--accent); border-left-color: var(--warning); background: #fcfbf8; } body[data-theme="oxford"] .prog-id { color: var(--accent-warm); font-weight: 700; } /* ============= DESIGNER ============= */ body[data-theme="oxford"] .designer-overlay, body[data-theme="oxford"] .tool-manager-overlay { background: rgba(28, 38, 33, 0.8); backdrop-filter: blur(5px); } body[data-theme="oxford"] .designer-container { background: var(--bg-base); border: 3px solid var(--accent); border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); } body[data-theme="oxford"] .designer-header { background: #ffffff; border-bottom: 3px double var(--border); color: var(--accent); font-family: 'Crimson Pro', serif; font-weight: 700; } body[data-theme="oxford"] .d-col-preview, body[data-theme="oxford"] .d-col-stack, body[data-theme="oxford"] .d-col-tools { border-right: 1px solid var(--border); background: #f4efe9; } body[data-theme="oxford"] .panel-label { background: #e6e2db; color: var(--accent); font-family: 'Crimson Pro', serif; border-bottom: 2px solid var(--border); font-weight: 700; margin: 0; padding: 10px; } /* Override inline dark styles inside designer */ body[data-theme="oxford"] .tool-grid, body[data-theme="oxford"] .stock-panel { background: #e9e6df !important; border: 1px solid var(--border) !important; border-radius: 2px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.02) !important; } body[data-theme="oxford"] .d-col-tools div[style*="font-size:12px"] { color: var(--accent) !important; border-bottom: 2px solid var(--warning) !important; font-weight: 600 !important; font-family: 'Crimson Pro', serif; font-size: 14px !important; } body[data-theme="oxford"] .stock-panel input { background: #ffffff !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; padding: 4px 8px; } /* ============= TOOL BUTTONS ============= */ body[data-theme="oxford"] .t-btn { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--text-main); font-family: 'Lora', serif; } body[data-theme="oxford"] .t-btn:hover { border-color: var(--accent); background: #f0f4f8; color: var(--accent); transform: scale(1.02); } /* ============= STACK LIST ============= */ body[data-theme="oxford"] .stack-item { background: #ffffff; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } body[data-theme="oxford"] .stack-item:hover { border-left-color: var(--warning); background: #fbfaf8; transform: translateX(2px); } body[data-theme="oxford"] .stack-item.start-node { border-left-color: var(--danger); background: #fdf5f6; } /* ============= INPUT GROUPS ============= */ body[data-theme="oxford"] .input-group { background: #fbfaf8; border: 1px solid var(--border); border-radius: 2px; } body[data-theme="oxford"] .input-row input, body[data-theme="oxford"] .input-row select { background: #ffffff !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; } body[data-theme="oxford"] .input-row input:focus, body[data-theme="oxford"] .input-row select:focus { border-color: var(--accent); box-shadow: 0 0 4px rgba(0, 33, 71, 0.2); outline: none; }