/* * 録音ツール(/tools/recorder)専用スタイル。 * * アプリ(Flutter)の録音画面 = デザイン案 19a(ライト)/19c(ダーク)の再現。 * 共通の意匠(配色 6a/6b・プレート・ボタン・スイッチ・つまみ・拍のバー・ * カバー背景・書体)は css/web/tools-app-skin.css が持つ。このファイルは * recorder_scene.dart / recorder_widgets.dart にしかないものだけを持つ。 * * ほかの Web ツールの EMMUS 共通スキン(tools.css の et- 系)は使わない。 * * テーマは 。テーマカラーを設定している * ログインユーザーには、JS(app-skin/palette.js の applyAccentVars)が * --eat-acc 系を導出色で上書きする(未設定は共通スキンの既定の緑のまま)。 */ /* ============ 録音専用の色(recorder_widgets.dart) ============ */ .tools-recorder-page { --rec-groove-soft: #E6E2D8; --rec-wave-well: #FAF8F4; --rec-red: #C14A38; --rec-playhead-shadow: rgba(28, 26, 17, 0.4); } [data-theme="dark"] .tools-recorder-page { --rec-groove-soft: #100E0B; --rec-wave-well: #211D17; --rec-red: #E2614C; --rec-playhead-shadow: rgba(0, 0, 0, 0.4); } /* ============ 共通部品に足す録音側の寸法・余白 ============ PlateBox / VolumeKnob そのものは共通スキン。ここは「どれくらい空けるか・ どの大きさで置くか」という画面側の指定(Flutter でも scene 側の仕事)。 */ .emmu-rec .eat-plate { margin-top: 12px; } .emmu-rec .eat-knob { width: 66px; height: 66px; } /* ─── ヘッダー ─── */ .rec-header { display: flex; align-items: center; padding: 0 4px; } .rec-back-ic { width: 13px; height: 13px; fill: var(--eat-text2); } .rec-brand { margin: 0 9px; font-size: 9.5px; letter-spacing: 2.28px; color: var(--eat-bronze); } .rec-title { flex: 1; min-width: 0; margin: 0 8px 0 0; font-size: 16px; letter-spacing: 0.96px; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: var(--rec-groove-soft); box-shadow: 0 1px 2px var(--eat-groove-shadow); font-size: 9.5px; letter-spacing: 1.33px; color: var(--eat-sound-rest-text); white-space: nowrap; } .rec-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec-red); box-shadow: 0 0 6px var(--rec-red); } /* ─── 録音/再生の切替 ─── */ .rec-mode { margin-top: 12px; padding: 5px; border-radius: 14px; background: var(--rec-groove-soft); box-shadow: 0 2px 3px var(--eat-groove-shadow); display: flex; gap: 5px; } .rec-mode-cell { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; border: none; border-radius: 10px; background: transparent; color: var(--eat-text2); font-family: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; } .rec-mode-cell.is-on { background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 58%, var(--eat-acc-dim) 100%); box-shadow: 0 3px 0 var(--eat-acc-side); color: var(--eat-on-acc); font-weight: 500; } .rec-mode-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--eat-text2); } .rec-mode-cell.is-on .rec-mode-dot { background: var(--rec-red); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.549); } .rec-mode-tri { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } /* ─── 波形の窪み ─── */ .rec-well { margin-top: 12px; padding: 11px 0; border-radius: 9px; background: var(--rec-wave-well); box-shadow: 0 2px 5px var(--eat-groove-shadow); position: relative; } .rec-well canvas { display: block; width: 100%; } /* ─── 録音モード: 波形プレート ─── */ .rec-wave-plate { padding: 14px 15px 15px; } .rec-wave-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .rec-status { font-size: 8.5px; letter-spacing: 1.7px; color: var(--eat-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; } .rec-device-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; } .rec-device { max-width: 100%; font-size: 10px; color: var(--eat-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-rate { font-size: 8.5px; color: var(--eat-text3); } .rec-live-well canvas { height: 80px; } .rec-clock-row { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; } .rec-clock { font-size: 44px; line-height: 1; color: var(--eat-text); } .rec-remain { font-size: 10px; color: var(--eat-text2); padding-bottom: 5px; } /* ─── 録音モード: 録音レベル ─── */ .rec-gain-plate { padding: 14px 15px 15px; display: flex; align-items: center; gap: 14px; } .rec-gain-col { flex: 1; min-width: 0; } .rec-gain-head { display: flex; align-items: baseline; gap: 8px; } .rec-label { font-size: 8.5px; letter-spacing: 1.7px; color: var(--eat-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-db { font-size: 11px; color: var(--eat-text); white-space: nowrap; } .rec-meter { margin-top: 9px; height: 15px; border-radius: 8px; background: var(--eat-groove); box-shadow: 0 1px 3px var(--eat-groove-shadow); position: relative; overflow: hidden; } .rec-meter-fill { position: absolute; inset: 0; /* 帯はトラック全幅で描いて、いまのレベルのところで切る(clip-path は JS)。 0dB(88%)の右は赤。この帯の色はテーマ・テーマカラーに依らず固定 */ background: linear-gradient(90deg, var(--eat-acc) 0%, var(--eat-acc) 78%, #B0834E 88%, #C14A38 89%, #C14A38 100%); clip-path: inset(0 100% 0 0); } .rec-meter-comb { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 5px, var(--eat-groove) 5px 7px); } .rec-meter-peak { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--eat-text); } .rec-meter-zero { position: absolute; left: 88%; top: 0; bottom: 0; width: 2px; background: var(--rec-red); } .rec-meter-scale { position: relative; height: 11px; margin-top: 5px; font-size: 8.5px; color: var(--eat-text3); } .rec-meter-scale span { position: absolute; top: 0; line-height: 11px; } .rec-meter-scale .is-zero { color: var(--rec-red); } .rec-hint { margin: 9px 0 0; font-size: 10px; color: var(--eat-text2); } /* ─── 録音モード: 光メトロノーム ─── */ .rec-metro-plate { padding: 13px 15px 14px; } .rec-metro-head { display: flex; align-items: center; gap: 8px; } .rec-metro-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rec-metro-title { font-size: 12px; color: var(--eat-text); } .rec-metro-sub { margin-top: 1px; font-size: 9.5px; color: var(--eat-text2); } .rec-beatcols { margin-top: 12px; /* デザイン案(幅375の端末)では内寸301×高さ56。画面が広がってバーの幅が 広がるぶん、同じ比率で高さも伸ばす(縦横比を維持する)。 */ aspect-ratio: 301 / 56; padding: 0 6px; display: flex; align-items: flex-end; gap: 11px; } .rec-metro-row { margin-top: 12px; display: flex; align-items: flex-end; gap: 14px; } /* 拍子2 : BPM1 の幅配分(BPM 欄は3桁入力に合わせて小さく) */ .rec-signature { flex: 2; min-width: 0; } .rec-signature > .rec-label, .rec-bpm-field .rec-label { font-size: 9px; letter-spacing: 1.26px; color: var(--eat-text2); } .rec-bpm-field .rec-label { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .rec-signature-nums { display: flex; align-items: flex-end; } .rec-signature-nums button { flex: 1; min-width: 0; background: none; border: none; padding: 0 0 6px; font-size: 20px; line-height: 1.2; color: var(--eat-text2); cursor: pointer; display: inline-flex; align-items: flex-end; justify-content: center; } .rec-signature-nums button.is-on { font-size: 26px; color: var(--eat-text); border-bottom: 2px solid var(--eat-bronze); padding-bottom: 4px; } .rec-bpm-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; /* 数値は欄の中央、「BPM」は右端に寄せる */ justify-content: center; padding: 10px 12px; border-radius: 11px; background: var(--rec-groove-soft); box-shadow: 0 1px 3px var(--eat-groove-shadow); cursor: text; } .rec-bpm-field input { width: 46px; min-width: 0; background: transparent; border: none; outline: none; padding: 0; font-size: 26px; line-height: 1; text-align: center; color: var(--eat-text); caret-color: var(--eat-acc); } /* ─── 通知文・メインボタン ─── */ .rec-notice { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--eat-text2); white-space: pre-line; } .rec-actions { margin-top: 12px; position: sticky; bottom: 10px; z-index: 2; } .rec-lead-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--eat-on-acc); } .rec-lead-square { width: 12px; height: 12px; border-radius: 2px; background: var(--eat-sound-rest-text); } /* ─── 再生モード ─── */ .rec-empty-plate { padding: 26px 15px; text-align: center; } .rec-empty-title { font-size: 15px; color: var(--eat-text); } .rec-empty-sub { margin: 8px 0 0; font-size: 11px; line-height: 1.7; color: var(--eat-text2); } .rec-player-plate { padding: 14px 15px 15px; } .rec-take-name { font-size: 14px; font-weight: 500; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-take-meta { margin-top: 2px; font-size: 9.5px; color: var(--eat-text3); } .rec-scrub-well { margin-top: 11px; touch-action: none; cursor: pointer; } .rec-scrub-well canvas { height: 72px; } .rec-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--eat-text); } .rec-playhead-knob { position: absolute; top: 39px; width: 15px; height: 15px; border-radius: 50%; background: var(--eat-text); box-shadow: 0 2px 4px var(--rec-playhead-shadow); } .rec-time-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; color: var(--eat-text2); } .rec-repeat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: none; border-radius: 8px; background: var(--rec-groove-soft); box-shadow: 0 1px 2px var(--eat-groove-shadow); color: var(--eat-text2); font-family: inherit; font-size: 9.5px; cursor: pointer; } .rec-repeat svg { width: 13px; height: 13px; fill: currentColor; } .rec-repeat.is-on { background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 58%, var(--eat-acc-dim) 100%); box-shadow: 0 2px 0 var(--eat-acc-side); color: var(--eat-on-acc); } .rec-transport { margin-top: 11px; display: flex; align-items: center; gap: 10px; } .rec-skip { flex: none; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-3); color: var(--eat-sound-rest-text); position: relative; cursor: pointer; padding: 0; } .rec-skip svg { position: absolute; inset: 0; margin: auto; width: 27px; height: 27px; fill: currentColor; } .rec-skip-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 1px; font-size: 8.5px; } .rec-btn-play { flex: 1; min-width: 0; padding: 13px; border-radius: 13px; font-size: 14px; letter-spacing: 1.4px; gap: 11px; box-shadow: 0 3px 0 var(--eat-acc-side); } .rec-play-lead { display: inline-flex; align-items: center; gap: 5px; } .rec-tri { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .rec-tri-acc { width: 11px; height: 13px; background: var(--eat-on-acc); } .rec-bar { display: none; width: 4px; height: 15px; border-radius: 1px; background: var(--eat-on-acc); } .rec-play-lead.is-playing .rec-tri-acc { display: none; } .rec-play-lead.is-playing .rec-bar { display: inline-block; } .rec-speed-row { margin-top: 11px; display: flex; align-items: flex-end; gap: 13px; } .rec-speed { flex: 1; min-width: 0; } .rec-speed-head { display: flex; align-items: baseline; } .rec-speed-label { font-size: 10.5px; color: var(--eat-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-speed-val { margin-left: 6px; font-size: 17px; color: var(--eat-text); } .rec-speed-x { margin-left: 3px; font-size: 10px; color: var(--eat-text2); } .rec-speed-track { margin-top: 7px; height: 22px; position: relative; touch-action: none; cursor: pointer; } .rec-speed-groove { position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 5px; background: var(--rec-groove-soft); box-shadow: 0 1px 3px var(--eat-groove-shadow); } .rec-speed-fill { position: absolute; left: 0; top: 6px; height: 10px; border-radius: 5px; background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 52%, var(--eat-slider-bottom) 100%); } .rec-speed-thumb { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle 21px at 34% 26%, var(--eat-knob-face-1) 0%, var(--eat-knob-face-2) 30%, var(--eat-knob-face-3) 62%, var(--eat-knob-face-4) 100%); box-shadow: 0 2px 5px var(--eat-knob-shadow); } .rec-speed-scale { margin-top: 3px; display: flex; justify-content: space-between; font-size: 8.5px; color: var(--eat-text3); } .rec-volume { flex: none; display: flex; flex-direction: column; align-items: center; } .rec-volume-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; } .rec-volume-head span:first-child { font-size: 9px; color: var(--eat-text2); } .rec-volume-head .eat-mono { font-size: 9.5px; color: var(--eat-text2); } /* ─── ファイル名・メモ・形式・保存 ─── */ .rec-groovebox { margin-top: 8px; width: 100%; padding: 9px 11px; border: none; border-radius: 10px; background: var(--rec-groove-soft); box-shadow: 0 1px 2px var(--eat-groove-shadow); display: flex; align-items: center; text-align: left; font-family: inherit; cursor: pointer; color: var(--eat-text2); } /* ファイル名・メモ: 1行目に左上のキャプション、2行目に中身(左揃え) */ .rec-name-box, .rec-memo-box { flex-direction: column; align-items: stretch; gap: 4px; } .rec-name-box { margin-top: 11px; } .rec-name-box .rec-label, .rec-memo-box .rec-label { font-size: 9px; letter-spacing: 1.26px; color: var(--eat-text3); text-align: left; } .rec-name-row { display: flex; align-items: center; min-width: 0; } .rec-name-text { flex: 1; min-width: 0; text-align: left; font-size: 11.5px; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-edit-ic { flex: none; margin-left: 8px; width: 13px; height: 13px; fill: var(--eat-text3); } .rec-memo-text { font-size: 10.5px; line-height: 1.7; text-align: left; /* 入力されたメモはファイル名と同じ文字色 */ color: var(--eat-text); white-space: pre-wrap; word-break: break-word; } .rec-memo-text.is-empty { color: var(--eat-text3); } .rec-format-row { margin-top: 11px; display: flex; align-items: center; } .rec-format-label { font-size: 10px; color: var(--eat-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; } .rec-smallbtn { border: none; padding: 5px 9px; border-radius: 8px; background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-3); color: var(--eat-sound-rest-text); font-family: inherit; font-size: 10.5px; white-space: nowrap; cursor: pointer; } .rec-smallbtn + .rec-smallbtn { margin-left: 6px; } .rec-smallbtn.is-on { background: linear-gradient(to bottom, var(--eat-acc-lit) 0%, var(--eat-acc) 58%, var(--eat-acc-dim) 100%); box-shadow: 0 3px 0 var(--eat-acc-side); color: var(--eat-on-acc); } .rec-smallbtn--wide { padding: 11px 0; border-radius: 11px; font-size: 11.5px; text-align: center; } .rec-export-actions { margin-top: 8px; display: flex; gap: 7px; } .rec-btn-save { flex: 15; min-width: 0; padding: 11px; border-radius: 11px; font-size: 11.5px; letter-spacing: 0.8px; box-shadow: 0 3px 0 var(--eat-acc-side); } .rec-export-actions .rec-smallbtn--wide { flex: 10; min-width: 0; margin-left: 0; } .rec-smallbtn:disabled { cursor: default; } /* ─── 録音の一覧 ─── */ .rec-list-plate { padding: 5px 4px; } .rec-list-hair { height: 1px; background: var(--eat-hair); margin: 0 12px; } .rec-take-row { width: 100%; display: flex; align-items: center; padding: 10px 12px; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; } .rec-take-play { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-3); display: inline-flex; align-items: center; justify-content: center; color: var(--eat-sound-rest-text); } .rec-take-play .rec-tri { width: 9px; height: 11px; } .rec-take-body { flex: 1; min-width: 0; margin: 0 8px 0 11px; display: flex; flex-direction: column; } .rec-take-title { font-size: 12.5px; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-take-sub { margin-top: 2px; font-family: "IBM Plex Mono", Menlo, Consolas, monospace; font-size: 9px; color: var(--eat-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-take-thumb { flex: none; width: 44px; height: 26px; } /* ─── 書き出し中のオーバーレイ ─── */ .rec-export-overlay { position: fixed; inset: 0; z-index: 50; background: var(--eat-scrim); display: flex; align-items: center; justify-content: center; padding: 0 28px; } .rec-export-card { width: 100%; max-width: 374px; padding: 20px 20px 18px; margin-top: 0; } .rec-export-head { display: flex; align-items: center; gap: 7px; } .rec-export-head .eat-mono { font-size: 9px; letter-spacing: 1.98px; color: var(--eat-text3); } .rec-export-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eat-acc); } .rec-export-title { margin-top: 12px; font-size: 15px; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-groove { margin-top: 14px; height: 8px; border-radius: 8px; background: var(--eat-groove); box-shadow: 0 1px 2px var(--eat-groove-shadow); overflow: hidden; } .rec-groove-fill { display: block; width: 0%; height: 100%; border-radius: 8px; background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-slider-bottom)); /* 通知は小刻みなので、次の値へ滑らかに伸ばして止まって見えないようにする */ transition: width 250ms linear; } .rec-export-msg { margin-top: 10px; font-size: 11px; color: var(--eat-text2); } /* ─── ダイアログ(ファイル名・メモ・削除・上書き確認) ─── */ .rec-dialog { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; padding: 24px; } .rec-dlg { width: 100%; max-width: 340px; background: var(--eat-plate-solid); border-radius: 16px; padding: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .rec-dlg-title { font-size: 15px; color: var(--eat-text); } .rec-dlg-body { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--eat-text2); white-space: pre-line; word-break: break-word; } .rec-dlg-input, .rec-dlg-textarea { margin-top: 12px; width: 100%; box-sizing: border-box; padding: 10px; font-family: inherit; font-size: 13px; color: var(--eat-text); background: transparent; border: 1px solid var(--eat-rule); border-radius: 6px; outline: none; caret-color: var(--eat-acc); } .rec-dlg-textarea { line-height: 1.6; resize: vertical; } .rec-dlg-input::placeholder, .rec-dlg-textarea::placeholder { font-size: 11px; color: var(--eat-text3); } .rec-dlg-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 4px; } .rec-dlg-btn { background: none; border: none; padding: 8px 10px; font-family: inherit; font-size: 13px; cursor: pointer; } .rec-dlg-btn--muted { color: var(--eat-text2); } .rec-dlg-btn--green { color: var(--eat-acc); } .rec-dlg-btn--red { color: var(--rec-red); }