/* * アプリ(Flutter)デザインの音楽ツールで共通のスキン。 * * 対象は Flutter がアプリ内で実装している5ツール(録音・メトロノーム・ * チューナー・音域チェック・キー BPM)。ToolRegistry の skin => 'app' が * 付いたツールだけが body.tools-app-skin としてこれを読む。 * * ■ここに入れてよいもの * Flutter 側が共通ファイルに置いている部品だけ: * metronome_palette.dart … 配色(6a ライト / 6b ダーク) * tool_plate.dart … PlateBox(.eat-plate)/ HeaderCircle(.eat-circle) * tool_buttons.dart … ToolGreenButton(.eat-btn-green)/ * ToolFlatButton(.eat-btn-flat)/ AccentSwitch(.eat-switch) * knob_gloss.dart … つまみの光沢・指標(描画は js/tools/app-skin/knob.js) * tool_fonts.dart … 書体(.eat-serif / .eat-mono) * metronome_scene.dart … MetronomeBeatBar(.eat-beatbar。recorder_scene が import) * user_info_view.dart … UserProfileCoverBackground(.eat-cover。5画面すべてが使う) * * ■ここに入れてはいけないもの * - ツール固有の寸法・配置(バーの並びの gap など。画面側の仕事) * - EMMUS 由来の旧スキン(tools.css の .emmu-tool / .et- 系)。混ぜないこと * * テーマは 。テーマカラーを設定している * ログインユーザーには、JS(app-skin/palette.js の applyAccentVars)が * --eat-acc 系を導出色で上書きする(未設定はこのファイルの既定の緑のまま)。 * * 書体はデザイン案の指定どおり(アプリは同梱しないので端末フォントで代替): * 見出し・数字 = Zen Antique / 本文 = Zen Kaku Gothic New / ラベル = IBM Plex Mono */ /* ============ 配色(ライト 6a) ============ */ .tools-app-skin { --eat-bg: #EFECE4; --eat-bg-faint: rgba(239, 236, 228, 0.012); --eat-scrim: rgba(239, 236, 228, 0.86); --eat-plate-top: rgba(252, 251, 248, 0.85); --eat-plate: rgba(248, 246, 241, 0.85); --eat-plate-solid: #F8F6F1; --eat-plate-edge: rgba(28, 26, 17, 0.11); --eat-plate-shadow: rgba(28, 26, 17, 0.302); --eat-plate-shadow-faint: rgba(28, 26, 17, 0.06); --eat-circle-shadow: rgba(28, 26, 17, 0.071); --eat-text: #1D1A15; --eat-text2: #6A6459; --eat-text3: #9A9387; --eat-text-faint: #A8A196; --eat-hair: rgba(28, 26, 17, 0.09); --eat-rule: rgba(28, 26, 17, 0.161); --eat-bronze: #B0834E; --eat-groove: #E0DCD2; --eat-groove-shadow: rgba(28, 26, 17, 0.22); --eat-ring-rest: rgba(28, 26, 17, 0.141); --eat-mold-top: #FBF9F5; --eat-mold-bottom: #EAE6DC; --eat-mold-edge: rgba(28, 26, 17, 0.122); --eat-mold-glyph: #4A453C; --eat-mold-shadow: rgba(28, 26, 17, 0.09); --eat-sound-rest: #FBF9F5; --eat-sound-rest-bottom: #EEEBE1; --eat-sound-rest-side: #DCD7CA; --eat-sound-rest-text: #4A453C; --eat-rest-grad: linear-gradient(to bottom, #FBF9F5, #EEEBE1); --eat-rest-shadow-3: 0 3px 0 #DCD7CA; --eat-rest-shadow-5: 0 5px 0 #DCD7CA; --eat-switch-off-grad: linear-gradient(to bottom, #E0DCD2, #DCD7CA); /* 操作色(テーマカラー設定時は JS が上書き) */ --eat-acc: #A0BC00; --eat-acc-lit: #D2EC4E; --eat-acc-dim: #8BA300; --eat-acc-side: #6F8400; --eat-on-acc: #1E2600; --eat-slider-bottom: #87A100; --eat-beat-accent-num: #7D9200; --eat-sound-sel-1: #CBE544; --eat-sound-sel-2: #9FBB00; --eat-sound-sel-3: #8BA300; --eat-sound-sel-shadow: rgba(60, 80, 0, 0.451); --eat-knob-shadow: rgba(43, 55, 0, 0.42); --eat-start-shadow: rgba(60, 80, 0, 0.502); --eat-accent-switch-shadow: rgba(45, 60, 0, 0.451); --eat-accent-knob-shadow: rgba(28, 26, 17, 0.451); --eat-switch-on-1: #BCD726; --eat-switch-on-2: #8FA900; --eat-switch-thumb-1: #FFFFFF; --eat-switch-thumb-2: #F0EEE4; --eat-switch-thumb-3: #D8D4C6; --eat-knob-face-1: #DBFF0F; --eat-knob-face-2: #B6D600; --eat-knob-face-3: #8AA300; --eat-knob-face-4: #6C7F00; } /* ============ 配色(ダーク 6b) ============ */ [data-theme="dark"] .tools-app-skin { --eat-bg: #14120E; --eat-bg-faint: rgba(20, 18, 14, 0.012); --eat-scrim: rgba(20, 18, 14, 0.86); --eat-plate-top: rgba(34, 31, 25, 0.8); --eat-plate: rgba(30, 27, 22, 0.8); --eat-plate-solid: #1E1B16; --eat-plate-edge: rgba(240, 232, 214, 0.09); --eat-plate-shadow: rgba(0, 0, 0, 0.851); --eat-plate-shadow-faint: rgba(0, 0, 0, 0.06); --eat-circle-shadow: rgba(0, 0, 0, 0.502); --eat-text: #F0EBDF; --eat-text2: #948D7D; --eat-text3: #7D7668; --eat-text-faint: #7D7668; --eat-hair: rgba(240, 232, 214, 0.09); --eat-rule: rgba(240, 232, 214, 0.161); --eat-bronze: #C9A06A; --eat-groove: #100E0B; --eat-groove-shadow: rgba(0, 0, 0, 0.8); --eat-ring-rest: rgba(240, 235, 223, 0.161); --eat-mold-top: #2A261F; --eat-mold-bottom: #1A1712; --eat-mold-edge: rgba(240, 232, 214, 0.102); --eat-mold-glyph: #C4BDAD; --eat-mold-shadow: rgba(0, 0, 0, 0.502); --eat-sound-rest: #2A261F; --eat-sound-rest-bottom: #211E18; --eat-sound-rest-side: #100E0B; --eat-sound-rest-text: #C4BDAD; --eat-rest-grad: linear-gradient(to bottom, #5A5449 0%, #3F392F 48%, #29241D 100%); --eat-rest-shadow-3: 0 11px 14px -3px rgba(0, 0, 0, 0.851), 0 7px 0 #080604, 0 3px 0 #332D24; --eat-rest-shadow-5: 0 13px 14px -3px rgba(0, 0, 0, 0.851), 0 9px 0 #080604, 0 5px 0 #332D24; --eat-switch-off-grad: linear-gradient(to bottom, #100E0B, #100E0B); --eat-acc-side: #5F7000; --eat-slider-bottom: #7D9200; --eat-beat-accent-num: #B4D200; --eat-sound-sel-shadow: rgba(0, 0, 0, 0.6); --eat-knob-shadow: rgba(0, 0, 0, 0.6); --eat-start-shadow: rgba(0, 0, 0, 0.749); --eat-accent-switch-shadow: rgba(20, 28, 0, 0.502); --eat-accent-knob-shadow: rgba(0, 0, 0, 0.549); --eat-switch-thumb-3: #CFCABD; --eat-knob-face-1: #D0F400; --eat-knob-face-2: #A0BC00; --eat-knob-face-3: #758900; --eat-knob-face-4: #566500; } /* ============ 画面の上限幅 ============ ツール画面(.eat-screen)とそれに幅をそろえる要素(カバー背景・画面下の操作バー・ ボトムシート・解説・相互リンク・広告)が共通で使う上限幅。 13 インチ iPad の縦向き(1032pt = iPad Pro 13" の論理幅。iPad Air 13" は 1024pt)で 画面幅いっぱいに広がる値にしてある。PC でもタブレットでもこの幅が上限。 幅をそろえたい要素は必ずこの変数を使い、px を直書きしないこと。 */ :root { --eat-screen-max: 1032px; } /* ============ ページ骨格 ============ */ /* アプリ画面の再現のため、共通の上部バーは出さず画面内ヘッダーを使う */ body.tools-app-skin .tools-topbar-wrap { display: none; } body.tools-page.tools-app-skin { background: var(--eat-bg); color: var(--eat-text2); } body.tools-page.tools-app-skin .tools-shell { max-width: none; padding: 0; } /* 相互リンク(ほかのツールを見る)もアプリの配色に合わせる */ body.tools-page.tools-app-skin .tool-links { position: relative; z-index: 1; box-sizing: border-box; max-width: var(--eat-screen-max); margin: 0 auto; padding: 4px 16px 28px; } body.tools-page.tools-app-skin .tool-links a { color: var(--eat-text2); } /* 相互リンクの下に置く広告と PR 表記もアプリの配色に合わせる */ body.tools-page.tools-app-skin .tool-ads-pr, body.tools-page.tools-app-skin .tool-ads { position: relative; z-index: 1; box-sizing: border-box; max-width: var(--eat-screen-max); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } body.tools-page.tools-app-skin .tool-ads-pr { margin-top: 0; color: var(--eat-text3); } body.tools-page.tools-app-skin .tool-ads { padding-bottom: 28px; } /* ツールのルート。各ツールは自分のクラス(.emmu-rec など)を併記する */ .emmu-app-tool { position: relative; font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; color: var(--eat-text2); } .emmu-app-tool [hidden] { display: none !important; } /* ============ 書体(tool_fonts.dart) ============ */ .eat-serif { font-family: "Zen Antique", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-weight: 400; } .eat-mono { font-family: "IBM Plex Mono", Menlo, Consolas, monospace; } /* ============ カバー画像の背景(ログイン中のみ) ============ アプリの UserProfileCoverBackground の再現: 画像に白(プロフィールカラー1)/黒(2)の紗を掛け、下端 10% で背景色へ溶かす。 テンプレートカバー(15番以降)は紗を掛けず、下端 80px だけ溶かす。 高さは calculateCoverHeight(幅 375/640 基準で 667)と同じ。 */ .eat-cover { position: fixed; top: 0; left: 0; right: 0; z-index: 0; margin: 0 auto; /* 上限幅はツール画面(.eat-screen)と同じ(--eat-screen-max)。高さ式はユーザー詳細画面 (profile-app.css)のカバー表示と同じ */ max-width: var(--eat-screen-max); height: calc(min(100vw, var(--eat-screen-max)) * 1.77867); overflow: hidden; pointer-events: none; } @media (min-width: 600px) { .eat-cover { height: calc(min(100vw, var(--eat-screen-max)) * 1.04219); } } .eat-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .eat-cover-overlay { position: absolute; inset: 0; } .eat-cover.is-p1 .eat-cover-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 90%, var(--eat-bg) 100%); } .eat-cover.is-p2 .eat-cover-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 90%, var(--eat-bg) 100%); } /* プロフィールカラー2 × ライト表示だけ、溶け始めが画面の半分から */ [data-theme="light"] .eat-cover.is-p2 .eat-cover-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, var(--eat-bg) 100%); } .eat-cover.is-template .eat-cover-overlay { background: linear-gradient(to bottom, var(--eat-bg-faint) calc(100% - 80px), var(--eat-bg) 100%); } /* ============ 画面(スマホ幅の1カラム) ============ */ .eat-screen { position: relative; z-index: 1; /* 上限は --eat-screen-max(13インチ iPad 縦向きで画面幅いっぱい)。カバー背景と同幅 */ box-sizing: border-box; max-width: var(--eat-screen-max); margin: 0 auto; padding: 20px 16px 10px; } /* ============ ツール共通ヘッダー(戻る / EMMU / ツール名) ============ */ .eat-tool-header { display: flex; align-items: center; padding: 0 4px; } .eat-tool-back-ic { width: 13px; height: 13px; fill: var(--eat-text2); } .eat-tool-brand { margin: 0 9px; font-size: 9.5px; letter-spacing: 2.28px; color: var(--eat-bronze); } .eat-tool-title { flex: 1; min-width: 0; margin: 0 8px 0 0; color: var(--eat-text); font-size: 16px; letter-spacing: 1.28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============ 丸ボタン(tool_plate.dart HeaderCircle) ============ */ .emmu-app-tool .eat-circle { box-sizing: content-box; } .eat-circle { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--eat-plate-solid); border: 1px solid var(--eat-plate-edge); box-shadow: 0 1px 2px var(--eat-circle-shadow); display: inline-flex; align-items: center; justify-content: center; color: var(--eat-text2); font-size: 13px; text-decoration: none; cursor: pointer; padding: 0; } /* ============ プレート(tool_plate.dart PlateBox) ============ */ .eat-plate { border-radius: 15px; border: 1px solid var(--eat-plate-edge); background: linear-gradient(to bottom, var(--eat-plate-top) 0%, var(--eat-plate) 6%); box-shadow: 0 1px 2px var(--eat-plate-shadow-faint), 0 14px 24px -18px var(--eat-plate-shadow); } /* ============ ツール下の折りたたみ解説 ============ * app スキン共通の PlateBox と配色変数を使う。 * 各ツール固有のルートやページには依存させない。 */ /* 解説をツール本体(.eat-screen)の外へ置くツール(チューナー・音域チェック・メトロノーム)用。 画面下に貼り付く操作バーより後ろへ置くため .eat-screen の外に出しているので、 幅と内側余白を .eat-screen(max-width:var(--eat-screen-max) / padding:0 16px)にそろえる。 */ .emmu-app-tool > .tdoc { /* .eat-cover は position:fixed / z-index:0。.eat-screen は position:relative / z-index:1 で カバーより前に出ている。.eat-screen の外に置く解説にも同じ重なり順を与えないと、 カバー画像の背後に隠れて見えなくなる。 */ position: relative; z-index: 1; box-sizing: border-box; max-width: var(--eat-screen-max); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .tdoc { width: 100%; min-width: 0; color: var(--eat-text2); font-size: 15px; line-height: 1.9; } .tdoc-frame { overflow: hidden; } .tdoc-frame > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; color: var(--eat-text); font-size: 15px; font-weight: 700; line-height: 1.5; list-style: none; cursor: pointer; } .tdoc-frame > summary::-webkit-details-marker { display: none; } .tdoc-frame > summary::after { content: "＋"; flex: none; margin-left: auto; color: var(--eat-acc); font-family: "IBM Plex Mono", Menlo, Consolas, monospace; font-weight: 500; } .tdoc-frame[open] > summary { border-bottom: 1px solid var(--eat-hair); } .tdoc-frame[open] > summary::after { content: "−"; } .tdoc-inner { padding: 6px 16px 20px; } .tdoc h2 { margin: 24px 0 8px; padding-left: 10px; border-left: 4px solid var(--eat-acc); color: var(--eat-text); font-size: 17px; font-weight: 700; line-height: 1.55; } .tdoc h3 { margin: 18px 0 6px; color: var(--eat-text); font-size: 15px; font-weight: 700; } .tdoc p { margin: 0 0 12px; } .tdoc strong, .tdoc-lead { color: var(--eat-text); font-weight: 700; } .tdoc ol, .tdoc ul { margin: 0 0 14px; padding-left: 1.3em; } .tdoc li { margin: 0 0 6px; } .tdoc table { width: 100%; margin: 0 0 16px; border-collapse: collapse; color: var(--eat-text2); font-size: 14px; } .tdoc th, .tdoc td { padding: 7px 9px; border: 1px solid var(--eat-plate-edge); text-align: left; vertical-align: top; } .tdoc th { background: var(--eat-groove); color: var(--eat-text); white-space: nowrap; } .tdoc .tdoc-tool-links__title { margin-top: 26px; } .tdoc-tool-links__table { display: grid; gap: 7px; } .tdoc-tool-links__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .tdoc-tool-links__button { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--eat-plate-edge); border-radius: 8px; background: var(--eat-groove); color: var(--eat-text); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; } .tdoc-tool-links__button:hover, .tdoc-tool-links__button:focus-visible { border-color: var(--eat-acc); outline: none; } @media (max-width: 520px) { .tdoc-tool-links__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── 解説の下に共通で出すアプリCTA ── * 折りたたみ(details)の外に置くので、解説を開かなくても常に見える。 * バッジの表示サイズは emmus.jp の記事と揃える(アイコン46 / AppStore 126 / GooglePlay 155、高さ46)。 */ .tdoc-cta { margin: 14px 0 0; padding: 16px; text-align: center; } .tdoc-cta-lead { margin: 0 0 12px; color: var(--eat-text); font-size: 15px; font-weight: 700; line-height: 1.6; } .tdoc-cta-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .tdoc-cta-badges a { display: inline-flex; line-height: 0; } .tdoc-cta-badges img { display: block; width: auto; height: 46px; } .tdoc-cta-icon { border-radius: 10px; } /* ============ 回転つまみ(app-skin/knob.js が描く canvas) ============ */ .eat-knob { flex: none; touch-action: none; cursor: grab; } /* ============ 入り切りスイッチ(tool_buttons.dart AccentSwitch) ============ */ .eat-switch { flex: none; width: 46px; height: 27px; border: none; border-radius: 14px; padding: 0; position: relative; background: var(--eat-switch-off-grad); box-shadow: 0 2px 3px var(--eat-groove-shadow); cursor: pointer; transition: background 140ms ease-out; } .eat-switch.is-on { background: linear-gradient(to bottom, var(--eat-switch-on-1), var(--eat-switch-on-2)); box-shadow: 0 2px 3px var(--eat-accent-switch-shadow); } .eat-switch-thumb { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle 10.5px at 36% 28%, var(--eat-switch-thumb-1) 0%, var(--eat-switch-thumb-2) 60%, var(--eat-switch-thumb-3) 100%); box-shadow: 0 1px 3px var(--eat-accent-knob-shadow); transition: left 140ms ease-out; } .eat-switch.is-on .eat-switch-thumb { left: calc(100% - 24px); } /* ============ 拍のバー(metronome_scene.dart MetronomeBeatBar) ============ バー1本ぶんの見た目だけを持つ。並び(gap・全体の高さ)は画面側で決める。 色と高さは JS(app-skin/beat-bar.js と各ツール)が書き込む。 */ .eat-beatcell { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; } .eat-beatbar { width: 100%; height: 45%; border-radius: 7px; position: relative; box-sizing: border-box; } .eat-beatbar-gloss { position: absolute; top: 3px; left: 5px; right: 5px; height: 6px; border-radius: 99px; } /* ============ 大きなボタン(tool_buttons.dart) ============ */ .eat-btn-green, .eat-btn-flat { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 17px; border: none; border-radius: 18px; font-size: 19px; letter-spacing: 2.28px; white-space: nowrap; cursor: pointer; } /* 押すと進む操作(ToolGreenButton) */ .eat-btn-green { color: var(--eat-on-acc); background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 55%, var(--eat-acc-dim) 100%); box-shadow: 0 6px 0 var(--eat-acc-side), 0 18px 26px -12px var(--eat-start-shadow); } /* 押すと戻る・止める操作(ToolFlatButton) */ .eat-btn-flat { letter-spacing: 2.66px; color: var(--eat-sound-rest-text); background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-5); } .eat-btn-green:disabled, .eat-btn-flat:disabled { cursor: default; }