/* * 音声ファイル変換ツール(/tools/audio-convert)専用スタイル。 * * デザイン案 28b(ライト)の再現。共通の意匠(配色 6a/6b・プレート・カバー背景・ * 書体)は css/web/tools-app-skin.css が持つ。このファイルはこのツールにしか * 出てこないもの(ステップレール・ファイルの受け口・波形・進み具合・比較)だけを持つ。 * * ほかのツールの CSS と共通スキンには手を入れない。差分はここに閉じる。 * * デザイン案はライトだけなので、ダークは共通スキンの変数(6b)へ寄せて導出する。 * 案の生の値のうち共通スキンに無いものだけ、録音ツール(tools-recorder.css)と * 同じ考え方でこのページの変数として置く。 * * テーマは 。テーマカラーを設定している * ログインユーザーには、JS(app-skin/palette.js の applyAccentVars)が * --eat-acc 系を導出色で上書きする(未設定は共通スキンの既定の緑のまま)。 * * セレクタは #acvRoot 起点にして、ほかのツールや解説側へ漏れないようにする。 */ .tools-audio-convert-page { --acv-groove-soft: #E6E2D8; --acv-well: #FAF8F4; --acv-red: #C14A38; --acv-red-bg: #F4ECE6; --acv-red-text: #8E3A2B; --acv-wave-rest: rgba(28, 26, 17, 0.22); --acv-dash: rgba(28, 26, 17, 0.24); } [data-theme="dark"] .tools-audio-convert-page { --acv-groove-soft: #100E0B; --acv-well: #211D17; --acv-red: #E2614C; --acv-red-bg: #2A1D18; --acv-red-text: #E9A597; --acv-wave-rest: rgba(240, 232, 214, 0.26); --acv-dash: rgba(240, 232, 214, 0.26); } #acvRoot .eat-plate { margin-top: 12px; padding: 13px 14px 14px; } /* ─── ヘッダー ─── */ /* 戻る・EMMU・ツール名は共通部品(.eat-tool-header 系)。 ここに持つのは、このツールにしか出ない「変換中」の表示だけ。 */ #acvRoot .acv-working { flex: none; /* 共通ヘッダーは gap を持たない(タイトル側の margin で空ける)ので、 カラーモードの丸ボタンとの間はここで空ける */ margin-right: 8px; padding: 5px 10px; border-radius: 8px; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); font-size: 11.5px; letter-spacing: 0.95px; color: var(--eat-mold-glyph); } /* ─── ステップレール(読み込む → 設定 → 保存) ─── */ #acvRoot .acv-rail { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0 2px; } #acvRoot .acv-step { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: none; border-radius: 11px; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); font-family: inherit; cursor: default; } #acvRoot .acv-step-num { flex: none; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; color: var(--eat-mold-glyph); background: var(--eat-sound-rest-side); } #acvRoot .acv-step-label { font-size: 13px; white-space: nowrap; color: var(--eat-text2); } /* いまいる段 */ #acvRoot .acv-step.is-now { background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim)); box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6); } #acvRoot .acv-step.is-now .acv-step-num { color: var(--eat-on-acc); background: rgba(30, 38, 0, 0.18); } #acvRoot .acv-step.is-now .acv-step-label { font-weight: 500; color: var(--eat-on-acc); } /* 済んだ段。押すと戻れる */ #acvRoot .acv-step.is-done { background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-3); cursor: pointer; } #acvRoot .acv-step.is-done .acv-step-num { color: var(--eat-on-acc); background: var(--eat-acc); } #acvRoot .acv-step.is-done .acv-step-label { color: var(--eat-mold-glyph); } /* ─── 共通の部品 ─── */ #acvRoot .acv-label { display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--eat-text3); } #acvRoot .acv-plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #acvRoot .acv-flow { flex: none; font-size: 12px; color: var(--eat-text2); } /* 選択肢の帯 */ #acvRoot .acv-fields { display: flex; gap: 10px; margin-top: 11px; } #acvRoot .acv-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } #acvRoot .acv-field--wide { flex: 1.6; } #acvRoot .acv-seg { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); } #acvRoot .acv-seg-btn { flex: 1; min-width: 0; padding: 6px 4px; border: none; border-radius: 8px; background: transparent; font-size: 12px; font-family: inherit; white-space: nowrap; color: var(--eat-text2); cursor: pointer; } #acvRoot .acv-seg-btn.is-on { font-weight: 500; color: var(--eat-text); background: var(--acv-well); border-bottom: 2px solid var(--eat-acc); box-shadow: 0 1px 2px var(--eat-plate-shadow-faint); } #acvRoot .acv-note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--eat-text2); } /* 大きなボタン(下に置く操作) */ #acvRoot .acv-cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 12px; padding: 17px; border: none; border-radius: 18px; font-family: inherit; font-size: 18px; letter-spacing: 2.52px; cursor: pointer; } #acvRoot .acv-cta--go { color: var(--eat-on-acc); background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-acc-dim)); box-shadow: 0 6px 0 var(--eat-acc-side), 0 18px 26px -12px var(--eat-start-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(60, 80, 0, 0.28); } #acvRoot .acv-cta--flat { padding: 16px; border-radius: 17px; font-size: 17px; color: var(--eat-mold-glyph); background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-5); } #acvRoot .acv-cta:disabled { opacity: 0.55; cursor: default; } #acvRoot .acv-cta-ic { flex: none; display: block; } /* 変換する: 右向きの三角 */ #acvRoot .acv-cta-ic--go { width: 0; height: 0; border-left: 12px solid var(--eat-on-acc); border-top: 7px solid transparent; border-bottom: 7px solid transparent; } /* 変換をやめる: 四角 */ #acvRoot .acv-cta-ic--stop { width: 11px; height: 11px; border-radius: 2px; background: var(--eat-mold-glyph); } /* 保存する: フロッピー */ #acvRoot .acv-cta-ic--save { position: relative; width: 13px; height: 13px; border-radius: 2px; border: 1.6px solid var(--eat-on-acc); } #acvRoot .acv-cta-ic--save::after { content: ''; position: absolute; left: 1.6px; right: 1.6px; bottom: 1.6px; height: 4px; background: var(--eat-on-acc); } #acvRoot .acv-flatbtn { flex: 1; min-width: 0; padding: 12px 0; border: none; border-radius: 13px; font-family: inherit; font-size: 13.5px; white-space: nowrap; color: var(--eat-mold-glyph); background: var(--eat-rest-grad); box-shadow: var(--eat-rest-shadow-3); cursor: pointer; } /* 波形(64本のバー。JS が d を組む) */ #acvRoot .acv-well { margin-top: 11px; padding: 9px 0; border-radius: 9px; overflow: hidden; background: var(--acv-well); box-shadow: inset 0 0 0 1px var(--eat-plate-edge), inset 0 2px 5px var(--eat-plate-shadow-faint); } #acvRoot .acv-wave { display: block; width: 100%; height: 52px; } #acvRoot .acv-wave path { fill: none; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; } #acvRoot .acv-wave-done { stroke: var(--eat-acc); } #acvRoot .acv-wave-rest { stroke: var(--acv-wave-rest); } /* ─── 知らせ ─── */ #acvRoot .acv-alert { display: flex; gap: 9px; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--acv-red-bg); box-shadow: inset 0 0 0 1px rgba(193, 74, 56, 0.28); font-size: 12px; line-height: 1.7; color: var(--acv-red-text); } #acvRoot .acv-alert-mark { flex: none; font-size: 12px; color: var(--acv-red); } /* ─── 1段目: ファイルの受け口 ─── */ #acvRoot .acv-privacy { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); font-size: 13.5px; line-height: 1.75; color: var(--eat-mold-glyph); } /* 枠は四隅だけの点線(デザイン案のとおり、辺を1pxの破線で描く) */ #acvRoot .acv-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; min-height: 260px; padding: 26px 20px; border-radius: 18px; text-align: center; cursor: pointer; background-color: var(--eat-plate-solid); background-image: repeating-linear-gradient(0deg, var(--acv-dash) 0 5px, transparent 5px 9px), repeating-linear-gradient(90deg, var(--acv-dash) 0 5px, transparent 5px 9px), repeating-linear-gradient(0deg, var(--acv-dash) 0 5px, transparent 5px 9px), repeating-linear-gradient(90deg, var(--acv-dash) 0 5px, transparent 5px 9px); background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px; background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat: no-repeat; } #acvRoot .acv-drop.is-over { background-color: var(--acv-well); box-shadow: 0 0 0 2px var(--eat-acc); } /* 中央のディスク: 外周の目盛りリング + 盛り上がった面 + 波形のバー */ #acvRoot .acv-disc { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; } #acvRoot .acv-disc-ring { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--eat-ring-rest) 0deg 1.2deg, transparent 1.2deg 9deg); -webkit-mask-image: radial-gradient(closest-side circle, transparent 82%, #000 84%); mask-image: radial-gradient(closest-side circle, transparent 82%, #000 84%); } #acvRoot .acv-disc-face { width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--eat-plate-edge); background: linear-gradient(to bottom, var(--eat-mold-top), var(--eat-mold-bottom)); box-shadow: 0 3px 6px var(--eat-mold-shadow); display: flex; align-items: center; justify-content: center; } #acvRoot .acv-disc-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; } #acvRoot .acv-disc-bars i { width: 3.5px; border-radius: 2px; background: var(--eat-bronze); } #acvRoot .acv-disc-bars i:nth-child(1) { height: 14px; } #acvRoot .acv-disc-bars i:nth-child(2) { height: 22px; } #acvRoot .acv-disc-bars i:nth-child(3) { height: 30px; } #acvRoot .acv-disc-bars i:nth-child(4) { height: 20px; } #acvRoot .acv-disc-bars i:nth-child(5) { height: 26px; } #acvRoot .acv-disc-bars i:nth-child(6) { height: 12px; } #acvRoot .acv-drop-title { font-size: 18px; letter-spacing: 1.08px; color: var(--eat-text); } #acvRoot .acv-drop-sub { font-size: 12.5px; line-height: 1.7; color: var(--eat-text2); } #acvRoot .acv-drop-cta { padding: 14px 28px; border-radius: 15px; font-size: 16px; letter-spacing: 1.92px; color: var(--eat-on-acc); background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-acc-dim)); box-shadow: 0 6px 0 var(--eat-acc-side), 0 18px 26px -12px var(--eat-start-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(60, 80, 0, 0.28); } /* ─── 2段目: 読み込んだファイル ─── */ #acvRoot .acv-src-head { display: flex; align-items: center; gap: 11px; } #acvRoot .acv-badge { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); font-size: 12px; letter-spacing: 0.6px; color: var(--eat-bronze); } #acvRoot .acv-src-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #acvRoot .acv-src-name { font-size: 15px; font-weight: 500; color: var(--eat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #acvRoot .acv-src-spec { font-size: 11.5px; color: var(--eat-text3); } #acvRoot .acv-src-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } #acvRoot .acv-src-time { font-size: 17px; line-height: 1; color: var(--eat-text); } #acvRoot .acv-src-size { font-size: 11px; color: var(--eat-text3); } /* ─── 2段目: 進み具合 ─── */ #acvRoot .acv-prog-plate { padding: 13px 15px 15px; } #acvRoot .acv-prog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } #acvRoot .acv-prog-left { display: flex; align-items: baseline; gap: 5px; min-width: 0; } #acvRoot .acv-prog-pct { font-size: 36px; line-height: 1; color: var(--eat-text); } #acvRoot .acv-prog-unit { font-size: 15px; color: var(--eat-text2); } #acvRoot .acv-prog-msg { padding-left: 6px; font-size: 12.5px; color: var(--eat-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #acvRoot .acv-prog-rest { flex: none; padding-bottom: 3px; font-size: 11.5px; color: var(--eat-text3); } #acvRoot .acv-groove { position: relative; margin-top: 10px; height: 12px; border-radius: 6px; background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); overflow: hidden; } #acvRoot .acv-groove-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 6px; background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-slider-bottom)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); /* 通知は小刻みなので、次の値へ滑らかに伸ばして止まって見えないようにする */ transition: width 250ms linear; } /* ─── 3段目: 変換できました ─── */ #acvRoot .acv-done-plate { display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 18px; padding: 18px 18px 20px; } #acvRoot .acv-done-head { display: flex; align-items: flex-end; gap: 11px; } #acvRoot .acv-done-format { font-size: 56px; line-height: 0.88; color: var(--eat-text); } #acvRoot .acv-done-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 7px; } #acvRoot .acv-done-spec { font-size: 13px; color: var(--eat-text2); } #acvRoot .acv-done-sub { font-size: 12px; color: var(--eat-text3); } #acvRoot .acv-done-plate .acv-well { margin-top: 0; width: 100%; } #acvRoot .acv-done-plate .acv-wave { height: 48px; } #acvRoot .acv-done-name { font-size: 12px; color: var(--eat-text2); word-break: break-all; text-align: center; } #acvRoot .acv-cmp { display: flex; align-items: stretch; gap: 10px; margin-top: 10px; } #acvRoot .acv-cmp-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 12px; border-radius: 12px; } #acvRoot .acv-cmp-cell--before { background: var(--acv-groove-soft); box-shadow: inset 0 1px 2px var(--eat-groove-shadow); } #acvRoot .acv-cmp-cell--after { background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim)); box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6); } #acvRoot .acv-cmp-format { font-size: 19px; line-height: 1.1; color: var(--eat-text); } #acvRoot .acv-cmp-spec { font-size: 11.5px; color: var(--eat-text2); } #acvRoot .acv-cmp-size { font-size: 11px; color: var(--eat-text3); } #acvRoot .acv-cmp-cell--after .acv-label { color: rgba(30, 38, 0, 0.7); } #acvRoot .acv-cmp-cell--after .acv-cmp-format { color: var(--eat-on-acc); } #acvRoot .acv-cmp-cell--after .acv-cmp-spec { color: rgba(30, 38, 0, 0.72); } #acvRoot .acv-cmp-cell--after .acv-cmp-size { color: rgba(30, 38, 0, 0.6); } #acvRoot .acv-done-actions { display: flex; gap: 9px; margin-top: 9px; } /* ─── 3段目: 保存する前に聴いて確かめる ─── */ #acvRoot .acv-play-plate { display: flex; align-items: center; gap: 13px; padding: 13px 15px; } #acvRoot .acv-playbtn { flex: 1; min-width: 0; display: flex; align-items: center; /* 三角と文字をひとかたまりにして、ボタンの中央へ置く */ justify-content: center; gap: 12px; padding: 13px 16px; border: none; border-radius: 15px; font-family: inherit; text-align: center; cursor: pointer; color: var(--eat-on-acc); background: linear-gradient(to bottom, var(--eat-acc-lit), var(--eat-acc) 55%, var(--eat-acc-dim)); box-shadow: 0 4px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.7); } #acvRoot .acv-playbtn:disabled { opacity: 0.55; cursor: default; } /* 停止中は三角、再生中は2本の柱(録音ツールの再生ボタンと同じ見せ方) */ #acvRoot .acv-play-lead { flex: none; display: inline-flex; align-items: center; gap: 5px; } #acvRoot .acv-tri { width: 11px; height: 13px; background: var(--eat-on-acc); clip-path: polygon(0 0, 100% 50%, 0 100%); } #acvRoot .acv-bar { display: none; width: 4px; height: 15px; border-radius: 1px; background: var(--eat-on-acc); } #acvRoot .acv-play-lead.is-playing .acv-tri { display: none; } #acvRoot .acv-play-lead.is-playing .acv-bar { display: inline-block; } /* 幅いっぱいには広げない(広げると中の文字が左に寄る) */ #acvRoot .acv-play-col { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } #acvRoot .acv-play-label { font-size: 15px; letter-spacing: 1.2px; } #acvRoot .acv-play-time { font-size: 11.5px; color: rgba(30, 38, 0, 0.62); } /* 音量つまみは共通部品(.eat-knob)。寸法だけこの画面で決める */ #acvRoot .acv-volume { flex: none; display: flex; flex-direction: column; align-items: center; } #acvRoot .acv-volume-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; } #acvRoot .acv-volume-head span:first-child { font-size: 11px; color: var(--eat-text2); } #acvRoot .acv-volume-head .eat-mono { font-size: 11.5px; color: var(--eat-text2); } #acvRoot .eat-knob { width: 66px; height: 66px; touch-action: none; }