/* =========================================================================== foo-tec.com — サイト共通カラースキン（テーマ） を切り替えて全ページに反映。既定は sky。 token: --color-bg-base / -surface / -elevated, --color-fg-primary / -muted / -subtle, --color-border-base / -subtle, --color-accent 参考: submodules/media_schedules (kaizen 44 / GDR-UI-022) の色相プリセット。 =========================================================================== */ :root { color-scheme: dark; /* 既定 = sky */ --color-bg-base: #061421; --color-bg-surface: #0f2238; --color-bg-elevated: #173554; --color-fg-primary: #e6f3ff; --color-fg-muted: #8fb8da; --color-fg-subtle: #4a6f95; --color-border-base: #2a5582; --color-border-subtle: #173554; --color-accent: #4fbef5; /* アクセント上に乗せる文字色（暗いベース色を流用） */ --color-accent-fg: #061421; } [data-theme="dark"] { --color-bg-base: #0a0a0a; --color-bg-surface: #171717; --color-bg-elevated: #262626; --color-fg-primary: #f5f5f5; --color-fg-muted: #a3a3a3; --color-fg-subtle: #525252; --color-border-base: #404040; --color-border-subtle: #262626; --color-accent: #fde047; --color-accent-fg: #0a0a0a; } /* light — dark の対になる明色（白基調・暗文字）。普通の配色。 */ [data-theme="light"] { color-scheme: light; --color-bg-base: #f6f7f9; --color-bg-surface: #ffffff; --color-bg-elevated: #eef0f3; --color-fg-primary: #1b1f24; --color-fg-muted: #5b6470; --color-fg-subtle: #8b94a1; --color-border-base: #d6dbe2; --color-border-subtle: #e6e9ee; --color-accent: #0b5fff; --color-accent-fg: #ffffff; } [data-theme="sky"] { --color-bg-base: #061421; --color-bg-surface: #0f2238; --color-bg-elevated: #173554; --color-fg-primary: #e6f3ff; --color-fg-muted: #8fb8da; --color-fg-subtle: #4a6f95; --color-border-base: #2a5582; --color-border-subtle: #173554; --color-accent: #4fbef5; --color-accent-fg: #061421; } [data-theme="violet"] { --color-bg-base: #0c0815; --color-bg-surface: #181126; --color-bg-elevated: #261a3d; --color-fg-primary: #ebe4f5; --color-fg-muted: #a99ccb; --color-fg-subtle: #6e5e90; --color-border-base: #4a3b78; --color-border-subtle: #261a3d; --color-accent: #8a6dd6; --color-accent-fg: #0c0815; } [data-theme="teal"] { --color-bg-base: #061616; --color-bg-surface: #0d2829; --color-bg-elevated: #163d40; --color-fg-primary: #e0f5f5; --color-fg-muted: #8cc4c6; --color-fg-subtle: #4a8082; --color-border-base: #2e6b6e; --color-border-subtle: #163d40; --color-accent: #5dc9d0; --color-accent-fg: #061616; } /* gray — ニュートラルなグレーベース（濃さを抑えた中間グレー、クールなアクセント） */ [data-theme="gray"] { --color-bg-base: #5f6166; --color-bg-surface: #6c6f74; --color-bg-elevated: #7c8088; --color-fg-primary: #f5f6f8; --color-fg-muted: #d3d7db; --color-fg-subtle: #a8adb2; --color-border-base: #8b9097; --color-border-subtle: #6c6f74; --color-accent: #ccd5dd; --color-accent-fg: #2a2d31; } /* monoflick — MonoFlick サイト由来（スレートのページ＝濃いめ／カード＝淡い＋オレンジ, docs/monoflick 参照） */ [data-theme="monoflick"] { color-scheme: light; --color-bg-base: #8ba4b2; --color-bg-surface: #e3ebef; --color-bg-elevated: #eef3f5; --color-fg-primary: #18262e; --color-fg-muted: #3d525d; --color-fg-subtle: #5f7682; --color-border-base: #b9c8d0; --color-border-subtle: #d2dce1; --color-accent: #e6781e; --color-accent-fg: #ffffff; } /* ネイティブ UI（input[type=date/time/color] のピッカー等）をダーク前提に */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* ===== tools 配下の固定ヘッダー（右上の歯車からその場でスキン選択） ===== theme.js が /tools/ 配下で に .ft-tools を付与し #ft-appbar を注入する。 */ html.ft-tools body { padding-top: 46px; } #ft-appbar { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-base); color: var(--color-fg-primary); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", Roboto, sans-serif; } #ft-appbar .ft-home { color: var(--color-fg-primary); text-decoration: none; font-weight: 600; font-size: 0.95rem; } #ft-appbar .ft-home:hover { color: var(--color-accent); } .ft-gear { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--color-fg-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .ft-gear:hover { color: var(--color-accent); background: var(--color-bg-elevated); } .ft-skin-pop { position: absolute; top: calc(100% + 4px); right: 8px; width: 230px; padding: 6px; background: var(--color-bg-surface); border: 1px solid var(--color-border-base); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); z-index: 10000; } .ft-skin-pop[hidden] { display: none; } .ft-skin-pop-title { padding: 6px 10px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-muted); } .ft-skin-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--color-fg-primary); font: inherit; text-align: left; cursor: pointer; } .ft-skin-row:hover { background: var(--color-bg-elevated); } .ft-skin-row .ft-sw { display: inline-flex; gap: 3px; flex-shrink: 0; } .ft-skin-row .ft-sw span { width: 12px; height: 20px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.12); } .ft-skin-row .ft-name { flex: 1; font-size: 0.9rem; } .ft-skin-row .ft-check { display: inline-flex; color: var(--color-accent); opacity: 0; } .ft-skin-row[aria-pressed="true"] .ft-check { opacity: 1; } /* gear ポップオーバー内の追加設定（mermaid の描画背景色など） */ .ft-divider { height: 1px; margin: 6px 8px; background: var(--color-border-base); } .ft-bg-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px; } .ft-bg-row .ft-bg-label { flex: 1; font-size: 0.9rem; color: var(--color-fg-primary); } .ft-bg-row input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--color-border-base); border-radius: 6px; background: transparent; cursor: pointer; } .ft-bg-reset { border: 1px solid var(--color-border-base); background: var(--color-bg-elevated); color: var(--color-fg-primary); border-radius: 6px; padding: 4px 8px; font-size: 0.8rem; cursor: pointer; } .ft-bg-reset:hover { border-color: var(--color-accent); color: var(--color-accent); } /* gear ポップオーバー内の言語（翻訳）ピッカー — Google 翻訳ウィジェットを内包 */ .ft-lang-row { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 8px; } .ft-lang-note { font-size: 0.72rem; color: var(--color-fg-subtle); } .ft-lang-picker { position: relative; display: inline-flex; align-items: center; align-self: flex-start; height: 30px; padding: 0 14px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-base); color: var(--color-fg-primary); font-size: 0.85rem; cursor: pointer; transition: border-color 0.15s; } .ft-lang-picker:hover { border-color: var(--color-accent); } .ft-lang-label { pointer-events: none; user-select: none; } /* Google Translate は
内に