/* theme-ghibli.css - Studio Ghibli / 宮崎駿 Inspired Theme Applied via [data-theme="ghibli"] on Warm, natural, hand-painted watercolor aesthetic inspired by Totoro's forest, Laputa's sky, and Spirited Away's bathhouse. */ /* ============= CUSTOM FONTS ============= */ @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="ghibli"] { --bg-base: #f5efe6; --bg-panel: #ebe3d5; --bg-elevated: #fff8ef; --border: #c4b89e; --accent: #5b8c5a; /* 龍貓森林綠 */ --accent-hover: #4a7a4a; --accent-sky: #6bb7c0; /* 天空之城藍 */ --accent-warm: #d4845a; /* 紅豬暖橘 */ --accent-spirit: #a0522d; /* 千與千尋赤茶 */ --accent-pink: #e8a0bf; /* 霍爾城堡玫瑰 */ --success: #6aab6a; --success-hover: #5a9a5a; --danger: #c75050; --danger-hover: #a84040; --warning: #d4a03c; --text-main: #3e3228; --text-muted: #8a7b6b; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --shadow-soft: 0 2px 12px rgba(94, 84, 68, 0.12), 0 1px 3px rgba(94, 84, 68, 0.08); --shadow-lg: 0 8px 30px rgba(94, 84, 68, 0.15), 0 2px 8px rgba(94, 84, 68, 0.1); --ghibli-cloud: radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.4) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(107,183,192,0.08) 0%, transparent 50%); /* === Block Colors (吉卜力水彩風) === */ --block-bg: #f0e8d8; /* 水彩紙底色 */ --block-setup: #a0885a; /* 枯葉棕 */ --block-tool: #5b8c5a; /* 龍貓森林綠 */ --block-cycle-start: #d4845a; /* 紅豬暖橘 */ --block-cycle-g73: #dba946; /* 向日葵金 */ --block-cycle-g75: #6bb7c0; /* 天空之城藍 */ --block-cycle-end: #dba946; /* 向日葵金 */ --block-finish: #6aab6a; /* 草地嫩綠 */ --block-drill: #88c9a0; /* 薄荷綠 */ --block-mill: #5bab8a; /* 翡翠綠 */ --block-radial-slot: #4a7a8c; /* 靜謐藍灰 */ --block-radial-profile: #6bb7c0; /* 天空之城藍 */ --block-engrave: #c5973c; /* 復古金 */ --block-parting: #c7694a; /* 燒陶紅 */ --block-tap: #d4a88c; /* 陶瓷膚粉 */ --block-face-tap: #d4845a; /* 紅豬暖橘 */ --block-thread: #a0522d; /* 千尋赤茶 */ --block-multi-thread: #d4845a; /* 紅豬暖橘 */ --block-pulley: #6bb7c0; /* 天空之城藍 */ --block-insert-indicator: #5b8c5a; /* 龍貓森林綠 */ --block-insert-bg: #e8f0e8; /* 嫩葉淡綠 */ } /* ============= BODY & GLOBAL ============= */ body[data-theme="ghibli"] { font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Rounded Mplus 1c', sans-serif; background: var(--bg-base); background-image: var(--ghibli-cloud); color: var(--text-main); } /* ============= SCROLLBAR ============= */ body[data-theme="ghibli"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b5caa0, #8aaa7a); border-radius: 10px; border: 2px solid var(--bg-panel); } body[data-theme="ghibli"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8aaa7a, #6b8b5e); } body[data-theme="ghibli"] ::-webkit-scrollbar-track { background: #e8dfd2; border-radius: 10px; } /* ============= HEADER ============= */ body[data-theme="ghibli"] header { background: linear-gradient(135deg, #5b8c5a 0%, #6bb7c0 50%, #88c9a0 100%); border-bottom: 3px solid rgba(255,255,255,0.3); box-shadow: 0 3px 20px rgba(91, 140, 90, 0.25); } body[data-theme="ghibli"] header div:first-child { font-family: 'Zen Maru Gothic', sans-serif; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 0 20px rgba(255,255,255,0.2); letter-spacing: 1px; font-weight: 700; } /* ============= BUTTONS ============= */ body[data-theme="ghibli"] button { background: linear-gradient(180deg, #fff8ef, #f0e8d8); border: 2px solid var(--border); border-radius: var(--radius-md); color: var(--text-main); font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 500; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 6px rgba(94, 84, 68, 0.1), inset 0 1px 0 rgba(255,255,255,0.8); position: relative; overflow: hidden; } body[data-theme="ghibli"] button:hover { background: linear-gradient(180deg, #ffffff, #f5eee0); border-color: var(--accent); box-shadow: 0 4px 15px rgba(91, 140, 90, 0.2), inset 0 1px 0 rgba(255,255,255,0.9); transform: translateY(-2px); color: var(--accent-hover); } body[data-theme="ghibli"] button:active { transform: translateY(0) scale(0.98); box-shadow: inset 0 2px 4px rgba(94, 84, 68, 0.15); } body[data-theme="ghibli"] .btn-run { background: linear-gradient(180deg, #7bc47b, #5ba85b); border-color: #4a9a4a; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 3px 10px rgba(91, 168, 91, 0.3); } body[data-theme="ghibli"] .btn-run:hover { background: linear-gradient(180deg, #8ad48a, #6ab86a); box-shadow: 0 5px 20px rgba(91, 168, 91, 0.4); color: #fff; } body[data-theme="ghibli"] .btn-stop { background: linear-gradient(180deg, #d47070, #c05050); border-color: #a84040; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 3px 10px rgba(199, 80, 80, 0.3); } body[data-theme="ghibli"] .btn-stop:hover { background: linear-gradient(180deg, #e08080, #d06060); box-shadow: 0 5px 20px rgba(199, 80, 80, 0.4); color: #fff; } /* ============= PANELS & COLUMNS ============= */ body[data-theme="ghibli"] .col-left { background: var(--bg-panel); border-right: 2px solid rgba(196, 184, 158, 0.5); box-shadow: 2px 0 15px rgba(94, 84, 68, 0.05); } body[data-theme="ghibli"] .col-right { background: var(--bg-panel); border-left: 2px solid rgba(196, 184, 158, 0.5); box-shadow: -2px 0 15px rgba(94, 84, 68, 0.05); } body[data-theme="ghibli"] .col-center { /* 天空漸層，像天空之城的雲海 */ background: linear-gradient(180deg, #d4eef5 0%, #e8f4f0 30%, #f0ebe0 100%); } /* ============= EDITOR ============= */ body[data-theme="ghibli"] .editor-header, body[data-theme="ghibli"] .panel-header { background: linear-gradient(135deg, rgba(91,140,90,0.12), rgba(107,183,192,0.08)); border-bottom: 2px solid rgba(91, 140, 90, 0.2); color: var(--accent); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; } body[data-theme="ghibli"] .editor-wrapper { background: var(--bg-elevated); border: none; border-radius: 0; } body[data-theme="ghibli"] textarea { color: var(--text-main); font-family: 'M PLUS Rounded 1c', 'Consolas', monospace; background: var(--bg-elevated); } body[data-theme="ghibli"] .highlight-bar { background: linear-gradient(90deg, rgba(91, 140, 90, 0.15), rgba(107, 183, 192, 0.08), transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; } /* ============= ERROR PANEL ============= */ body[data-theme="ghibli"] .error-panel { background: #fdf5f0; border-top: 2px solid rgba(199, 80, 80, 0.2); } body[data-theme="ghibli"] .error-item { background: rgba(199, 80, 80, 0.06); border-left: 4px solid var(--danger); color: #8b3a3a; border-radius: 0 8px 8px 0; } body[data-theme="ghibli"] .error-item:hover { background: rgba(199, 80, 80, 0.1); } /* ============= DASHBOARD ============= */ body[data-theme="ghibli"] .dashboard { background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body[data-theme="ghibli"] .dash-row { color: var(--text-main); font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 500; } body[data-theme="ghibli"] .dash-row span:first-child { color: var(--text-muted); } body[data-theme="ghibli"] .dash-row span[id="valRpm"] { color: var(--accent); font-weight: 700; } /* ============= CONTROLS AREA ============= */ body[data-theme="ghibli"] .controls-area { background: linear-gradient(0deg, var(--bg-panel), var(--bg-base)); border-top: 2px solid rgba(196, 184, 158, 0.4); } /* ============= PARAMS ============= */ body[data-theme="ghibli"] .param-group { background: rgba(255, 248, 239, 0.8); border: 2px solid rgba(196, 184, 158, 0.4); border-radius: var(--radius-md); } body[data-theme="ghibli"] input[type="number"], body[data-theme="ghibli"] input[type="text"], body[data-theme="ghibli"] select { background: #fff; border: 2px solid var(--border); color: var(--text-main); font-family: 'M PLUS Rounded 1c', sans-serif; border-radius: var(--radius-sm); } body[data-theme="ghibli"] input[type="number"]:focus, body[data-theme="ghibli"] input[type="text"]:focus, body[data-theme="ghibli"] select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 140, 90, 0.15); outline: none; } body[data-theme="ghibli"] input[type="range"] { background: linear-gradient(90deg, #b5caa0, #6bb7c0); border-radius: 10px; height: 6px; } body[data-theme="ghibli"] input[type="range"]::-webkit-slider-thumb { background: linear-gradient(180deg, #fff, #f0e8d8); border: 2px solid var(--accent); border-radius: 50%; width: 18px; height: 18px; box-shadow: 0 2px 6px rgba(91, 140, 90, 0.3); } /* ============= RIGHT COLUMN ============= */ body[data-theme="ghibli"] .right-bottom { background: var(--bg-panel); border-top: 2px solid rgba(196, 184, 158, 0.3); } body[data-theme="ghibli"] .feature-list li { border-bottom: 1px solid rgba(196, 184, 158, 0.3); color: var(--text-muted); } body[data-theme="ghibli"] .feature-list li b { color: var(--accent); } body[data-theme="ghibli"] .program-item { background: var(--bg-elevated); border: 2px solid rgba(196, 184, 158, 0.3); border-radius: var(--radius-md); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body[data-theme="ghibli"] .program-item:hover { background: #fff; border-color: var(--accent); box-shadow: 0 4px 15px rgba(91, 140, 90, 0.15); transform: translateY(-2px) scale(1.01); } body[data-theme="ghibli"] .prog-id { color: var(--accent); font-weight: 700; } body[data-theme="ghibli"] .prog-desc { color: var(--text-muted); } body[data-theme="ghibli"] .cmd-item { border-bottom: 1px solid rgba(196, 184, 158, 0.2); color: var(--text-muted); } body[data-theme="ghibli"] .cmd-item b { color: var(--accent); background: rgba(91, 140, 90, 0.1); border: 1px solid rgba(91, 140, 90, 0.2); border-radius: var(--radius-sm); font-weight: 700; } /* ============= MODALS & OVERLAYS ============= */ body[data-theme="ghibli"] .designer-overlay, body[data-theme="ghibli"] .tool-manager-overlay { background: rgba(62, 50, 40, 0.6); backdrop-filter: blur(8px); } body[data-theme="ghibli"] .designer-container { background: var(--bg-base); border: 2px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body[data-theme="ghibli"] .designer-header { background: linear-gradient(135deg, rgba(91,140,90,0.1), rgba(107,183,192,0.08)); border-bottom: 2px solid rgba(196,184,158,0.3); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; } body[data-theme="ghibli"] .d-col-preview { background: linear-gradient(180deg, #e8f4f0, #f5efe6); border-right: 2px solid rgba(196,184,158,0.3); } body[data-theme="ghibli"] .d-col-stack { background: var(--bg-base); border-right: 2px solid rgba(196,184,158,0.3); } body[data-theme="ghibli"] .d-col-tools { background: var(--bg-panel); } body[data-theme="ghibli"] .panel-label { background: linear-gradient(135deg, rgba(91,140,90,0.08), rgba(107,183,192,0.05)); color: var(--accent); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; border-bottom: 2px solid rgba(196,184,158,0.2); } /* Override inline dark styles inside designer */ body[data-theme="ghibli"] .tool-grid, body[data-theme="ghibli"] .stock-panel { background: var(--bg-elevated) !important; border: 2px solid rgba(196,184,158,0.3) !important; border-radius: var(--radius-md) !important; } body[data-theme="ghibli"] .d-col-tools div[style*="font-size:12px"] { color: var(--text-main) !important; border-bottom-color: rgba(196,184,158,0.3) !important; font-weight: 700 !important; } body[data-theme="ghibli"] .stock-panel label { color: var(--text-muted); font-weight: 500; } body[data-theme="ghibli"] .stock-panel input { background: #fff !important; border: 2px solid var(--border) !important; color: var(--text-main) !important; border-radius: var(--radius-sm); padding: 4px 8px; } /* ============= STACK LIST ============= */ body[data-theme="ghibli"] .stack-item { background: var(--bg-elevated); border-radius: var(--radius-sm); border-left: 4px solid rgba(91, 140, 90, 0.3); box-shadow: var(--shadow-soft); } body[data-theme="ghibli"] .stack-item:hover { background: #fff; border-left-color: var(--accent); box-shadow: 0 4px 12px rgba(91, 140, 90, 0.15); transform: translateX(2px); } body[data-theme="ghibli"] .stack-item.start-node { border-left-color: var(--accent-warm); } body[data-theme="ghibli"] .si-icon { background: rgba(91, 140, 90, 0.08); border: 2px solid rgba(91, 140, 90, 0.2); border-radius: var(--radius-sm); } body[data-theme="ghibli"] .si-info { color: var(--text-muted); } body[data-theme="ghibli"] .si-info b { color: var(--text-main); font-weight: 700; } /* ============= TOOL BUTTONS ============= */ body[data-theme="ghibli"] .t-btn { background: var(--bg-elevated); border: 2px solid rgba(196, 184, 158, 0.4); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body[data-theme="ghibli"] .t-btn:hover { background: #fff; border-color: var(--accent); box-shadow: 0 6px 20px rgba(91, 140, 90, 0.2); transform: translateY(-3px) scale(1.02); } body[data-theme="ghibli"] .t-btn span:last-child { font-weight: 500; } /* ============= DIRECTION GRID ============= */ body[data-theme="ghibli"] .d-btn { background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text-main); } body[data-theme="ghibli"] .d-btn:hover { background: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(91, 140, 90, 0.2); } body[data-theme="ghibli"] .d-btn span { color: var(--text-muted); } /* ============= INPUT GROUPS ============= */ body[data-theme="ghibli"] .input-group { background: rgba(255, 248, 239, 0.6); border: 2px solid rgba(196, 184, 158, 0.3); border-radius: var(--radius-md); } body[data-theme="ghibli"] .input-row label { color: var(--text-muted); font-weight: 500; } body[data-theme="ghibli"] .input-row input, body[data-theme="ghibli"] .input-row select { border-radius: var(--radius-sm); } /* ============= TOOL MANAGER ============= */ body[data-theme="ghibli"] .tool-manager-modal { background: var(--bg-base); border: 2px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body[data-theme="ghibli"] .tm-header { background: linear-gradient(135deg, rgba(91,140,90,0.1), rgba(107,183,192,0.06)); border-bottom: 2px solid rgba(196,184,158,0.3); font-family: 'Zen Maru Gothic', sans-serif; } body[data-theme="ghibli"] .tm-list { background: var(--bg-panel); border-right: 2px solid rgba(196,184,158,0.3); } body[data-theme="ghibli"] .tm-item { border-radius: var(--radius-sm); background: var(--bg-elevated); } body[data-theme="ghibli"] .tm-item:hover { background: #fff; box-shadow: var(--shadow-soft); } body[data-theme="ghibli"] .tm-item.active { background: rgba(91, 140, 90, 0.08); border-left: 4px solid var(--accent); } body[data-theme="ghibli"] .tm-form { background: var(--bg-base); } body[data-theme="ghibli"] .tm-custom-area { background: rgba(91, 140, 90, 0.04); border: 2px dashed rgba(91, 140, 90, 0.2); border-radius: var(--radius-md); } body[data-theme="ghibli"] .tm-custom-diagram { background: var(--bg-elevated); border: 2px solid rgba(196,184,158,0.3); border-radius: var(--radius-sm); } /* ============= WIP BADGE ============= */ body[data-theme="ghibli"] .badge-wip { background: linear-gradient(135deg, var(--accent-warm), #c76a3a); color: #fff; border-radius: 20px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 10px; font-weight: 700; box-shadow: 0 2px 6px rgba(212, 132, 90, 0.3); } /* ============= STATUS BADGE ============= */ body[data-theme="ghibli"] #statusBadge { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; border-radius: 20px; } /* ============= MEASURE PANEL ============= */ body[data-theme="ghibli"] #measurePanel { background: rgba(91, 140, 90, 0.06); border-top: 2px solid rgba(91, 140, 90, 0.15); border-radius: var(--radius-md); } /* ============= HEADER SELECT DROPDOWNS ============= */ body[data-theme="ghibli"] header select { background: rgba(255,255,255,0.2) !important; border: 2px solid rgba(255,255,255,0.3) !important; color: #fff !important; font-family: 'M PLUS Rounded 1c', sans-serif !important; border-radius: var(--radius-sm) !important; } body[data-theme="ghibli"] header select:focus { background: rgba(255,255,255,0.3) !important; border-color: rgba(255,255,255,0.6) !important; } /* 💥 下拉選項必須深色文字 + 白底，否則展開後白字看不見 */ body[data-theme="ghibli"] header select option { background: #fff !important; color: #3e3228 !important; } body[data-theme="ghibli"] header button { border-radius: var(--radius-sm) !important; font-family: 'M PLUS Rounded 1c', sans-serif !important; font-weight: 500; } /* ============= LEAF FLOAT ANIMATION ============= */ @keyframes ghibliFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } body[data-theme="ghibli"] .btn-run { animation: ghibliFloat 3s ease-in-out infinite; } body[data-theme="ghibli"] .btn-run:hover { animation: none; } /* ============= SUBTLE WATERCOLOR BORDER ON CENTER ============= */ body[data-theme="ghibli"] .col-center::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 0% 100%, rgba(91,140,90,0.06) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(107,183,192,0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; }