/* theme-macaron.css - Macaron / Pastel Aesthetic Theme Applied via [data-theme="macaron"] on Sweet, bright, and pastel aesthetic inspired by French macarons. */ /* ============= CUSTOM FONTS ============= */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap'); /* ============= CSS VARIABLES ============= */ body[data-theme="macaron"] { --bg-base: #fdf5f6; /* Soft baby pink base */ --bg-panel: #fffbf2; /* Creamy vanilla panel */ --bg-elevated: #ffffff; --border: #f8cdda; /* Light strawberry pink border */ --accent: #ffb8d1; /* Macaron Pink */ --accent-hover: #ff9cb7; --accent-sky: #bfe5eb; /* Macaron Mint/Blue */ --accent-warm: #ffe0b2; /* Macaron Lemon/Peach */ --accent-spirit: #c8b9eb; /* Macaron Lavender/Taro */ --success: #a2e4b8; /* Matcha green */ --success-hover: #82d49e; --danger: #ffaba6; /* Berry pink */ --danger-hover: #ff8b85; --warning: #fce28b; /* Banana yellow */ --text-main: #695e63; /* Soft dark purple/brown */ --text-muted: #a698a0; /* Light dusty taupe */ --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --shadow-soft: 0 4px 15px rgba(255, 184, 209, 0.2), 0 1px 4px rgba(255, 184, 209, 0.1); --shadow-lg: 0 10px 40px rgba(255, 184, 209, 0.25), 0 4px 12px rgba(255, 184, 209, 0.15); --macaron-bg: radial-gradient(circle at 10% 20%, rgba(255, 184, 209, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(191, 229, 235, 0.25) 0%, transparent 45%); /* === Block Colors (馬卡龍粉嫩風) === */ --block-bg: #fff5f7; /* 棉花糖粉底 */ --block-setup: #c8b9eb; /* 芋頭紫 */ --block-tool: #7fc4d4; /* 薄荷藍 */ --block-cycle-start: #ffb478; /* 蜜桃橘 */ --block-cycle-g73: #fce28b; /* 檸檬黃 */ --block-cycle-g75: #bfe5eb; /* 天空薄荷 */ --block-cycle-end: #fce28b; /* 檸檬黃 */ --block-finish: #a2e4b8; /* 抹茶綠 */ --block-drill: #b8e6d0; /* 薄荷奶綠 */ --block-mill: #a2e4b8; /* 抹茶綠 */ --block-radial-slot: #8eb4e6; /* 藍莓奶藍 */ --block-radial-profile: #bfe5eb; /* 天空薄荷 */ --block-engrave: #f0d06e; /* 蜂蜜金 */ --block-parting: #f5a27a; /* 杏桃粉橘 */ --block-tap: #ffd3c4; /* 蜜桃膚粉 */ --block-face-tap: #ffb478; /* 蜜桃橘 */ --block-thread: #dda0dd; /* 紫薯紫 */ --block-multi-thread: #ffb478; /* 蜜桃橘 */ --block-pulley: #8ed8e8; /* 棉花糖藍 */ --block-insert-indicator: #ffb8d1; /* 草莓粉 */ --block-insert-bg: #fff0f5; /* 玫瑰水底 */ } /* ============= BODY & GLOBAL ============= */ body[data-theme="macaron"] { font-family: 'Quicksand', 'Nunito', sans-serif; background: var(--bg-base); background-image: var(--macaron-bg); color: var(--text-main); } /* ============= SCROLLBAR ============= */ body[data-theme="macaron"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffb8d1, #bfe5eb); border-radius: 12px; border: 3px solid var(--bg-panel); } body[data-theme="macaron"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff9cb7, #a2d8e0); } body[data-theme="macaron"] ::-webkit-scrollbar-track { background: #fdfdfd; border-radius: 12px; } /* ============= HEADER ============= */ body[data-theme="macaron"] header { background: linear-gradient(90deg, #ffb8d1 0%, #ffe0b2 50%, #bfe5eb 100%); border-bottom: 3px solid #ffffff; box-shadow: 0 4px 25px rgba(255, 184, 209, 0.35); } body[data-theme="macaron"] header div:first-child { font-family: 'Numito', 'Quicksand', sans-serif; color: #fff; text-shadow: 0 2px 5px rgba(255, 137, 175, 0.4); font-weight: 700; } /* ============= BUTTONS ============= */ body[data-theme="macaron"] button { background: #ffffff; border: 2px solid var(--accent); border-radius: var(--radius-lg); color: var(--text-main); font-family: 'Quicksand', sans-serif; font-weight: 600; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 4px 10px rgba(255, 184, 209, 0.2); } body[data-theme="macaron"] button:hover { background: var(--accent); color: #fff; border-color: var(--accent-hover); box-shadow: 0 6px 15px rgba(255, 184, 209, 0.4); transform: translateY(-2px); } body[data-theme="macaron"] button:active { transform: translateY(0) scale(0.95); box-shadow: 0 2px 5px rgba(255, 184, 209, 0.2); } body[data-theme="macaron"] .btn-run { background: linear-gradient(135deg, #a2e4b8, #82d49e); border: none; color: #fff; box-shadow: 0 4px 15px rgba(162, 228, 184, 0.4); } body[data-theme="macaron"] .btn-run:hover { background: linear-gradient(135deg, #82d49e, #6cc48a); box-shadow: 0 6px 20px rgba(162, 228, 184, 0.5); color: #fff; } body[data-theme="macaron"] .btn-stop { background: linear-gradient(135deg, #ffaba6, #ff8b85); border: none; color: #fff; box-shadow: 0 4px 15px rgba(255, 171, 166, 0.4); } body[data-theme="macaron"] .btn-stop:hover { background: linear-gradient(135deg, #ff8b85, #ff6b64); box-shadow: 0 6px 20px rgba(255, 171, 166, 0.5); color: #fff; } /* ============= PANELS & COLUMNS ============= */ body[data-theme="macaron"] .col-left { background: var(--bg-panel); border-right: 2px solid var(--border); box-shadow: 4px 0 20px rgba(255, 184, 209, 0.1); } body[data-theme="macaron"] .col-right { background: var(--bg-panel); border-left: 2px solid var(--border); box-shadow: -4px 0 20px rgba(255, 184, 209, 0.1); } body[data-theme="macaron"] .col-center { background: linear-gradient(135deg, #fffcf5 0%, #fff0f5 100%); } /* ============= EDITOR ============= */ body[data-theme="macaron"] .editor-header, body[data-theme="macaron"] .panel-header { background: #fff; border-bottom: 2px solid var(--border); color: var(--accent-hover); font-weight: 700; } body[data-theme="macaron"] .editor-wrapper { background: var(--bg-elevated); border: none; border-radius: 0; } body[data-theme="macaron"] textarea { color: var(--text-main); background: var(--bg-elevated); } body[data-theme="macaron"] .highlight-bar { background: linear-gradient(90deg, rgba(255, 184, 209, 0.2), transparent); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; } /* ============= ERROR PANEL ============= */ body[data-theme="macaron"] .error-panel { background: #ffeeee; border-top: 2px solid var(--danger); } body[data-theme="macaron"] .error-item { background: #fff; border-left: 4px solid var(--danger); color: #e55555; border-radius: 12px; margin: 5px; box-shadow: 0 2px 6px rgba(255, 171, 166, 0.2); } /* ============= DASHBOARD ============= */ body[data-theme="macaron"] .dashboard { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 2px solid #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body[data-theme="macaron"] .dash-row { color: var(--text-main); font-weight: 600; } body[data-theme="macaron"] .dash-row span:first-child { color: var(--text-muted); } body[data-theme="macaron"] .dash-row span[id="valRpm"] { color: var(--accent-hover); font-weight: 700; } /* ============= CONTROLS AREA ============= */ body[data-theme="macaron"] .controls-area { background: var(--bg-panel); border-top: 2px solid var(--border); } /* ============= PARAMS ============= */ body[data-theme="macaron"] .param-group { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 4px 10px rgba(255, 184, 209, 0.1); } body[data-theme="macaron"] input[type="number"], body[data-theme="macaron"] input[type="text"], body[data-theme="macaron"] select { background: #fdf5f6; border: 2px solid var(--border); color: var(--text-main); font-family: inherit; border-radius: var(--radius-md); padding: 8px 12px; } body[data-theme="macaron"] input[type="number"]:focus, body[data-theme="macaron"] input[type="text"]:focus, body[data-theme="macaron"] select:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 4px rgba(255, 184, 209, 0.25); outline: none; background: #fff; } body[data-theme="macaron"] input[type="range"] { background: linear-gradient(90deg, #ffb8d1, #bfe5eb); border-radius: 12px; height: 8px; } body[data-theme="macaron"] input[type="range"]::-webkit-slider-thumb { background: #fff; border: 3px solid var(--accent); border-radius: 50%; width: 20px; height: 20px; box-shadow: 0 2px 8px rgba(255, 184, 209, 0.4); } /* ============= MEASURE PANEL ============= */ body[data-theme="macaron"] #measurePanel { background: #fff; border: 2px solid var(--accent-sky); border-radius: var(--radius-lg); box-shadow: 0 4px 15px rgba(191, 229, 235, 0.5); } /* ============= STACK LIST ============= */ body[data-theme="macaron"] .stack-item { background: var(--bg-elevated); border-radius: var(--radius-sm); border: 2px solid var(--border); box-shadow: var(--shadow-soft); } body[data-theme="macaron"] .stack-item:hover { background: #fff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(255, 184, 209, 0.15); transform: translateX(2px); } body[data-theme="macaron"] .stack-item.start-node { border-color: var(--warning); background: #fffef2; } body[data-theme="macaron"] .si-icon { background: rgba(255, 184, 209, 0.15); border: 2px solid rgba(255, 184, 209, 0.3); border-radius: 50%; color: var(--accent-hover); } body[data-theme="macaron"] .si-info { color: var(--text-muted); } body[data-theme="macaron"] .si-info b { color: var(--text-main); } /* ============= INPUT GROUPS ============= */ body[data-theme="macaron"] .input-group { background: #fffbf2; border: 2px solid #ffe8ef; border-radius: var(--radius-md); box-shadow: inset 0 2px 5px rgba(255, 184, 209, 0.05); } body[data-theme="macaron"] .input-row label { color: var(--text-muted); font-weight: 600; } body[data-theme="macaron"] .input-row input, body[data-theme="macaron"] .input-row select { background: #fff; border: 2px solid var(--border); color: var(--text-main); border-radius: var(--radius-sm); padding: 6px 10px; } body[data-theme="macaron"] .input-row input:focus, body[data-theme="macaron"] .input-row select:focus { border-color: var(--accent-sky); box-shadow: 0 0 0 3px rgba(191, 229, 235, 0.3); outline: none; } /* ============= RIGHT COLUMN ============= */ body[data-theme="macaron"] .right-bottom { background: var(--bg-panel); border-top: 2px solid var(--border); } body[data-theme="macaron"] .program-item { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } body[data-theme="macaron"] .program-item:hover { border-color: var(--accent-hover); box-shadow: 0 6px 20px rgba(255, 184, 209, 0.3); transform: translateY(-3px); } body[data-theme="macaron"] .prog-id { color: var(--accent-hover); font-weight: 700; } body[data-theme="macaron"] .cmd-item b { color: #fff; background: var(--accent); border-radius: var(--radius-md); padding: 4px 8px; } /* ============= MODALS & OVERLAYS ============= */ body[data-theme="macaron"] .designer-overlay, body[data-theme="macaron"] .tool-manager-overlay { background: rgba(255, 240, 245, 0.8); backdrop-filter: blur(12px); } body[data-theme="macaron"] .designer-container { background: var(--bg-panel); border: 3px solid #fff; border-radius: 30px; box-shadow: 0 20px 60px rgba(255, 184, 209, 0.3); } body[data-theme="macaron"] .designer-header { background: #fff; border-bottom: 2px solid var(--border); color: var(--text-main); } body[data-theme="macaron"] .d-col-preview, body[data-theme="macaron"] .d-col-stack, body[data-theme="macaron"] .d-col-tools { border-right: 2px solid var(--border); background: var(--bg-panel); } body[data-theme="macaron"] .panel-label { background: #fff; color: var(--accent-hover); border-bottom: 2px solid var(--border); border-radius: 12px 12px 0 0; margin: 5px; } /* Override inline dark styles inside designer */ body[data-theme="macaron"] .tool-grid, body[data-theme="macaron"] .stock-panel { background: #ffffff !important; border: 2px solid var(--border) !important; } body[data-theme="macaron"] .d-col-tools div[style*="font-size:12px"] { color: var(--text-main) !important; border-bottom-color: var(--border) !important; font-weight: 700 !important; } body[data-theme="macaron"] .stock-panel label { color: var(--text-muted); font-weight: 600; } body[data-theme="macaron"] .stock-panel input { background: #fdf5f6 !important; border: 2px solid var(--border) !important; color: var(--text-main) !important; border-radius: var(--radius-sm); padding: 4px 8px; } /* ============= TOOL BUTTONS ============= */ body[data-theme="macaron"] .t-btn { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-lg); } body[data-theme="macaron"] .t-btn:hover { border-color: var(--accent-sky); background: #f4fbfa; box-shadow: 0 8px 25px rgba(191, 229, 235, 0.4); transform: translateY(-4px); } body[data-theme="macaron"] .d-btn { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-md); } body[data-theme="macaron"] .d-btn:hover { background: var(--accent-spirit); border-color: #b7a6e1; color: #fff; } body[data-theme="macaron"] .d-btn:hover span { color: #fff; } /* ============= HEADER SELECT DROPDOWNS ============= */ body[data-theme="macaron"] header select { background: rgba(255, 255, 255, 0.8) !important; border: 2px solid rgba(255, 255, 255, 0.9) !important; color: var(--text-main) !important; border-radius: var(--radius-md) !important; font-weight: 600; } body[data-theme="macaron"] header select:focus { background: #fff !important; border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); } body[data-theme="macaron"] header button { background: #fff !important; color: var(--text-main) !important; border: none !important; border-radius: var(--radius-md) !important; box-shadow: 0 2px 10px rgba(255, 184, 209, 0.3) !important; } body[data-theme="macaron"] header button:hover { background: var(--accent) !important; color: #fff !important; } /* ============= ANIMATIONS ============= */ @keyframes macaronBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } body[data-theme="macaron"] .btn-run { animation: macaronBounce 2.5s ease-in-out infinite; } body[data-theme="macaron"] .btn-run:hover { animation: none; }