/* ============================================================ SULE WORKSTATION BOX - 共通カラーテーマ定義 ------------------------------------------------------------ 全ページのテーマカラーはこのファイルで一元管理する。 テーマの切り替えは theme.js が を 書き換えることで行う（選択は localStorage に保存され全ページ共通）。 ============================================================ */ /* --- チョコミント (デフォルト) --- */ :root { --theme-bg: #E0F7FA; /* ページ背景 */ --theme-main: #3E2723; /* メイン (ダークチョコ / 文字・枠線) */ --theme-text-sec: #5D4037; /* サブテキスト (ライトチョコ) */ --theme-accent: #26C6DA; /* アクセント */ --theme-accent-light: #B2EBF2; /* 薄いアクセント (リング・表ヘッダ等) */ --theme-accent-bright: #A7FFEB; /* 明るいアクセント (縁取り・ツールチップ) */ --theme-glow: rgba(167, 255, 235, 0.6); --theme-card: #FFFFFF; /* カード背景 */ --theme-stripe: #F5FFFA; /* テーブル縞模様 */ --theme-select-bg: #F0FDFA; /* セレクトボックス背景 */ --theme-highlight-bg: #3E2723; /* 強調カード背景 */ --theme-highlight-text: #FFFFFF; /* 強調カード文字 */ /* 電卓 (ダークUI) 用パレット */ --calc-bg: #2B1B17; --calc-display: #40E0D0; --calc-preview: #80CBC4; --calc-btn-num: #3E2723; --calc-btn-num-h: #4E342E; --calc-btn-op: #006064; --calc-btn-op-h: #00838F; --calc-btn-ac: #004D40; --calc-btn-ac-h: #00695C; --calc-btn-eq: #40E0D0; --calc-btn-eq-h: #84FFFF; --calc-text-num: #E0F2F1; --calc-text-op: #80CBC4; --calc-text-ac: #B2DFDB; --calc-text-eq: #2B1B17; } /* --- チョコバナナ --- */ [data-theme="banana"] { --theme-bg: #FFFDE7; --theme-text-sec: #5D4037; --theme-accent: #FDD835; --theme-accent-light: #FFF59D; --theme-accent-bright: #FFF176; --theme-glow: rgba(255, 241, 118, 0.6); --theme-stripe: #FFFDE7; --theme-select-bg: #FFF9C4; --theme-highlight-bg: #FDD835; --theme-highlight-text: #3E2723; --calc-display: #FFEA00; --calc-preview: #FFF176; --calc-btn-op: #F57F17; --calc-btn-op-h: #F9A825; --calc-btn-ac: #E65100; --calc-btn-ac-h: #EF6C00; --calc-btn-eq: #FFEA00; --calc-btn-eq-h: #FFFF00; --calc-text-num: #FFF8E1; --calc-text-op: #261C19; --calc-text-ac: #FFF3E0; --calc-text-eq: #2B1B17; } /* --- ストロベリーチョコ --- */ [data-theme="strawberry"] { --theme-bg: #FCE4EC; --theme-text-sec: #880E4F; --theme-accent: #EC407A; --theme-accent-light: #F8BBD0; --theme-accent-bright: #FF80AB; --theme-glow: rgba(255, 128, 171, 0.6); --theme-stripe: #FFF0F5; --theme-select-bg: #FEEBF1; --theme-highlight-bg: #EC407A; --theme-highlight-text: #FFFFFF; --calc-display: #FF2A68; --calc-preview: #FF80AB; --calc-btn-op: #C2185B; --calc-btn-op-h: #D81B60; --calc-btn-ac: #880E4F; --calc-btn-ac-h: #AD1457; --calc-btn-eq: #FF2A68; --calc-btn-eq-h: #FF4081; --calc-text-num: #FCE4EC; --calc-text-op: #F8BBD0; --calc-text-ac: #F8BBD0; --calc-text-eq: #FCE4EC; } /* ============================================================ 共通テーマ切り替えUI (theme.js の mountSwitcher が生成) ============================================================ */ .sule-theme-switcher { display: inline-flex; align-items: center; gap: 0.6rem; } .sule-palette-icon { display: flex; align-items: center; color: var(--theme-main); opacity: 0.8; } .sule-theme-select-wrap { position: relative; display: inline-block; } .sule-theme-select { appearance: none; -webkit-appearance: none; font-family: inherit; background-color: var(--theme-card); border: 2px solid var(--theme-main); border-radius: 9999px; padding: 0.5rem 2.5rem 0.5rem 1rem; font-size: 0.875rem; font-weight: bold; color: var(--theme-main); cursor: pointer; outline: none; min-width: 160px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: all 0.2s; } .sule-theme-select:hover { background-color: #FAFAFA; } .sule-theme-select:focus { box-shadow: 0 0 0 2px var(--theme-bg), 0 0 0 4px var(--theme-accent); } .sule-theme-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--theme-main); opacity: 0.7; }