/* ============================================================ theme-v2.css — 見た目の見直し（2026-09-23・オーナー判断「黒×金で引き締める」） ★style.css の「後」に読む上書きの1枚★ 元の style.css / header.css には手を入れていない。 おかしければ、各ページの を1行消せば元に戻る。 管理画面（admin.html）には読ませない（運営の道具なので見た目を変える理由が無い）。 決まり（見本で合意したもの）: 1. ★金の塗りは「作る」などの本当の主役だけ★ 選んでいる項目は、金の細い線と薄い下地で示す 2. 上の帯はスマホでも1段。絵文字ではなく線のアイコン（/icons.svg） 3. ログインボーナスは細い棒の列にして、主役の「作る」を押し下げない 4. 作る画面は「1 作り方／2 内容／3 仕上がり」に区切る（D-287）。★「作る」の貼り付けはやめた★（D-283・下の案内が隠れた） ★言葉は変えていない★（訳の鍵を崩さないため） ============================================================ */ /* ---------- 色 ---------- */ :root { --bg:#f6f4f0; --card:#ffffff; --field:#fbfaf8; --hover:#f3f0ea; --line:#e7e2d9; --line2:#d9d2c6; --ink:#1f1c19; --sub:#766f66; /* ★明るい配色の金は濃いめ★ 白地で読めるように */ --gold:#b8922a; --onGold:#1a1712; --goldSoft:rgba(184,146,42,.10); --goldLine:rgba(184,146,42,.55); --goldGrad:linear-gradient(180deg,#d7b653,#b8922a); --glass:rgba(255,255,255,.82); } :root[data-theme="dark"] { --bg:#0c0b0e; --card:#141318; --field:#1b1a20; --hover:#1c1b21; --line:#26252c; --line2:#34323b; --ink:#ece8e1; /* ★灰色は明るめ★（2026-09-23 利用者の声「フォント小さくするのやめて」）暗い背景の小さい灰色は読みにくい */ --sub:#a8a198; --gold:#d9b950; --onGold:#17140d; --goldSoft:rgba(217,185,80,.10); --goldLine:rgba(217,185,80,.55); --goldGrad:linear-gradient(180deg,#e6c863,#c9a53a); --glass:rgba(12,11,14,.82); } :root[data-theme="dark"] body { /* 上からごく薄く金の光。作品の邪魔をしない強さに留める */ background-image:radial-gradient(120% 480px at 50% -120px, rgba(217,185,80,.07), transparent 70%); background-repeat:no-repeat; } body { -webkit-font-smoothing:antialiased; } /* ---------- 線のアイコン ---------- */ .ico { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; } /* ---------- 上の帯 ---------- */ header { background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .brand { font-size:18px; letter-spacing:.2em; } /* 押せる印だけのボタン（☰・お知らせ・設定） */ /* ★display は隠れていない時だけ★ id の指定は .hidden より強いので、書くと隠したボタンまで出てしまう（実際に出た） */ header #menu, header #svcBtn, header #bell, header #settings { background:transparent; border:0; color:var(--ink); padding:8px; border-radius:10px; align-items:center; gap:6px; font-weight:400; } header #menu:not(.hidden), header #svcBtn:not(.hidden), header #bell:not(.hidden), header #settings:not(.hidden) { display:inline-flex; } header #menu:hover, header #svcBtn:hover, header #bell:hover, header #settings:hover { background:var(--hover); filter:none; } /* 画面の名前（動画・画像…）は塗らず、細い線で区切るだけ */ .svc-badge { background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 0 2px 10px; color:var(--sub); font-weight:500; gap:5px; } .svc-badge .ico { width:15px; height:15px; } /* 残高は丸い枠の中に。★押すとコインを買う画面★（app.js / tools.js / book.html で繋ぐ） */ #coin:not(.hidden) { display:inline-flex; } #coin { align-items:center; gap:6px; padding:4px 5px 4px 12px; border-radius:999px; border:1px solid var(--line2); background:var(--card); font-variant-numeric:tabular-nums; cursor:pointer; line-height:1.15; } #coin small { font-size:11px; } #coin::after { content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--goldSoft); color:var(--gold); font-weight:700; font-size:15px; line-height:1; flex:none; } /* 「コインを買う」は塗らない（主役は「作る」）。スマホでは残高の「＋」に任せて隠す */ header #buy, header #buyBtn { background:transparent; color:var(--gold); border:1px solid var(--goldLine); } #bellBadge { box-shadow:0 0 0 2px var(--card); } #meBtn .letter { color:var(--onGold); } @media (max-width: 560px) { /* ★1段に収める★ header.css は折り返しを許していた（2段になっていた） */ header { flex-wrap:nowrap; gap:4px; padding:8px 10px 8px 6px; } .brand { font-size:14px; letter-spacing:.14em; } .svc-badge { font-size:12px; padding-left:8px; } header #buy, header #buyBtn { display:none; } #coin { font-size:14px; } #coin small:not([style]) { display:none; } /* 「コイン」の字は ⊕ があるので省く。期限の注記（style 付き）は残す */ } /* ---------- 上のタブ（作る／作ったもの／友だちに教える）：下線で示す ---------- */ .tabs:not(#sources) { gap:22px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:nowrap; } .tabs:not(#sources) button { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 0 11px; margin-bottom:-1px; color:var(--sub); flex:0 0 auto; } .tabs:not(#sources) button[aria-selected=true] { background:transparent; color:var(--ink); border-bottom-color:var(--gold); font-weight:700; } /* ---------- 何から作るか（文章から／画像から…）：切り替えスイッチ ---------- */ #sources { gap:2px; padding:3px; border-radius:12px; background:var(--hover); border:1px solid var(--line); } #sources button { background:transparent; border:0; color:var(--sub); border-radius:9px; padding:9px 12px; } #sources button[aria-selected=true] { background:var(--card); color:var(--ink); font-weight:700; box-shadow:inset 0 0 0 1px var(--line2), 0 1px 2px rgba(0,0,0,.08); } @media (max-width: 560px) { #sources:not(.hidden) { display:grid; grid-template-columns:1fr 1fr; } #sources button { flex:none; } } /* 名前の下に一言（D-286）。押す前に「絵が動く／キャラが出演する」の違いが分かるように */ /* ★:not(.hidden) を外さない★ id の指定は .hidden より強く、オーナー専用の「この子で作る２」が全員に出た */ #sources button:not(.hidden) { display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.25; flex:1; } #sources button small { font-size:12px; font-weight:400; color:var(--sub); white-space:nowrap; } #sources button[aria-selected=true] small { color:var(--gold); } #refNote { margin-top:10px; } /* ---------- 作る画面の3つの区切り（D-287）---------- 1 作り方／2 内容／3 仕上がり。線と余白で分け、上から順に進めば「作る」に着く形にする */ .formSec + .formSec { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; } .secHead { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink); } .secHead b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--goldLine); color:var(--gold); font-size:12px; font-weight:700; } .secHead button { font-weight:500; letter-spacing:0; margin:-4px 0; } /* 画像の画面は材料が無いことが多く番号が合わないので、番号と題は出さない（線だけで分ける）。 ★ネタ帳のボタンは残す★ 見出しの行ごと消すと押せなくなる */ :root[data-service="image"] .secHead > b, :root[data-service="image"] .secHead > span[data-i18n] { display:none; } :root[data-service="image"] .secHead:not(:has(button:not(.hidden))) { display:none; } /* ★中身が全部隠れている区切りは、区切りごと消す★ 画像の画面では「作り方」が空になり、 上に空白と線だけが残っていた。続く区切りの上の線も要らない */ #secSource:not(:has(> :not(.hidden):not(.secHead))) { display:none; } #secSource:not(:has(> :not(.hidden):not(.secHead))) + .formSec { border-top:0; margin-top:0; padding-top:0; } /* 「文章でこまかく指示する」（この子で作るだけ）が隠れている時は、空の行の余白を残さない */ #secPrompt > .row:not(:has(button:not(.hidden))) { display:none; } /* 見出しの直下の欄名は、見出しとの間を詰める */ .formSec .secHead + * > label:first-child, .formSec .secHead + label { margin-top:0; } /* 「作る」は仕上がりの下で、線を1本挟んで独立させる */ #goRow { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; } /* ★材料の脇役ボタン（終わりの絵）★ 下の区切りのネタ帳と同じ大きさ・並びに見えていたので、 材料の一部だと分かるよう、材料の直下に寄せる */ #endImageWrap { margin-top:8px !important; } /* ---------- 2〜3択（絵柄・向き・長さ）：金の線と薄い下地 ---------- */ .seg button { background:var(--card); border:1px solid var(--line2); color:var(--sub); border-radius:10px; } .seg button[aria-selected=true] { background:var(--goldSoft); border-color:var(--goldLine); color:var(--ink); font-weight:700; } .seg button[aria-selected=true] .sub { color:var(--gold); opacity:1; } /* ---------- ボタンの格 ---------- */ /* 主役（塗り）。★ここ以外で金を塗らない★ ★セレクタは素の button のまま★ style.css の基本の指定（button）と同じ強さにして、 `.seg button` `.tabs button` のような個別の指定には勝たないようにする。 `button:not(.ghost)` と書くと強さが上がり、選択肢まで全部金色に塗ってしまう */ button { background:var(--goldGrad); border-color:transparent; } button.ghost { background:var(--card); border-color:var(--line2); } /* ログインボーナスの「押す」は脇役：線だけ */ #stampBtn, .tb-bonus .gold, .bk-bonus .gold { background:var(--goldSoft); color:var(--gold); border:1px solid var(--goldLine); } #stampBtn:disabled { background:transparent; border-color:var(--line2); color:var(--sub); } /* ---------- 枠 ---------- */ .card { border-radius:16px; border-color:var(--line); } :root[data-theme="dark"] .card { box-shadow:none; } textarea, input[type=text], input[type=search], input[type=number], select { border-radius:12px; } textarea:focus, input:focus, select:focus { outline:none; border-color:var(--goldLine); box-shadow:0 0 0 3px var(--goldSoft); } /* ---------- ログインボーナス：読める大きさの札を7つ ---------- ★細い棒はやめた★（2026-09-23 オーナー「ログインボーナスとか小さすぎない？？」） 棒にしたら何日目か読めず、受け取り済みの時は style.css の強い指定（#stampCard.done #stampRow .s・9px）が 勝って、棒と小さい数字が混ざって崩れていた。★受け取り済みでも同じ大きさ★にして、その指定を同じ強さで上書きする */ #stampCard { border-radius:14px; background:var(--card); } .stamp-head span, #stampTitle { font-size:15px; } #stampRow { gap:6px; align-items:center; flex-wrap:wrap; } #stampRow .s, #stampCard.done #stampRow .s { flex:0 0 auto; width:34px; max-width:none; height:28px; aspect-ratio:auto; border-radius:8px; border:1px solid var(--line2); background:transparent; color:var(--sub); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; } #stampRow .s.big, #stampCard.done #stampRow .s.big { width:44px; font-size:13px; font-weight:700; color:var(--gold); border-color:var(--goldLine); } #stampRow .s.on, #stampCard.done #stampRow .s.on { background:var(--goldSoft); border-color:var(--goldLine); color:var(--gold); } #stampRow .s.now { border:1.5px solid var(--gold); color:var(--gold); background:transparent; } .stamp-note, #perkBonus { font-size:13px; } /* ---------- 音のチェック：スイッチ ---------- */ .chk input[type=checkbox] { -webkit-appearance:none; appearance:none; width:36px; height:21px; margin:0; border-radius:999px; background:var(--line2); position:relative; flex:none; cursor:pointer; transition:background .15s; } .chk input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:var(--card); transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25); } .chk input[type=checkbox]:checked { background:var(--gold); } .chk input[type=checkbox]:checked::after { left:18px; background:#fff; } /* ---------- 「作る」の行 ---------- ★スマホで画面下に貼り付けるのはやめた★（2026-09-23 利用者の声「作るボタンの下の表示が見えない」Android） すぐ下に 作っている途中の案内（#status）・エラー（#err）・コイン不足の案内（#shortBox）がある。 貼り付けた帯の裏にそれらが潜り、途中で押すと案内が画面外に出て「押しても何も起きない」ように見えた。 この画面は「押したら真下に結果が出る」作りなので、元の位置のままにする */ #go { letter-spacing:.1em; } /* ---------- ☰ メニュー ---------- */ .svc .svc-ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; border:1px solid var(--line2); background:var(--hover); color:var(--ink); font-size:0; } .svc .svc-ico .ico { width:20px; height:20px; } .svc[aria-current="page"] { position:relative; } .svc[aria-current="page"]::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--gold); } .svc[aria-current="page"] .svc-ico { color:var(--gold); border-color:var(--goldLine); background:var(--goldSoft); } .svc.soon { opacity:.45; } /* ---------- 作る画面の小さいボタン（ネタ帳から選ぶ・キャラ図鑑） ---------- */ #bookPick:not(.hidden), #charPick:not(.hidden) { display:inline-flex; align-items:center; gap:6px; } #bookPick .ico, #charPick .ico { width:15px; height:15px; color:var(--gold); } /* ---------- 止まっている画面などの大きな印 ---------- */ .big-ico { width:36px; height:36px; stroke-width:1.4; color:var(--gold); } /* ============================================================ 第2弾（2026-09-23・全ページの見直し・オーナー判断「全部」） ============================================================ */ /* ---------- ① 入力欄の抜け ---------- style.css は text / file にしか見た目を付けておらず、検索欄（作ったもの）と 紹介URL欄（友だちに教える・じぶん）が ★ブラウザ既定のまま★（灰色の2px枠・高さ21px）だった。 明るい配色では目立たず、暗い配色で浮いた */ /* ★種類を書いていない input（type 省略＝文字）も入れる★ 紹介URL欄がそれで、[type=text] に当たっていなかった */ input:not([type]), input[type=search], input[type=email], input[type=url], input[type=number], input[type=password] { padding:10px 12px; border:1px solid var(--line); border-radius:12px; /* ★幅は付けない★ 横並びで flex:1 を使う所が多い */ font-size:14px; font-family:inherit; background:var(--field); color:var(--ink); } input[type=search]::placeholder, input[type=text]::placeholder, textarea::placeholder { color:var(--sub); opacity:.75; } input[readonly] { color:var(--sub); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; } /* ---------- ② 作ったもの：「つなげる」のチェック ---------- */ .grid .pick input[type=checkbox] { -webkit-appearance:none; appearance:none; width:18px; height:18px; margin:0; border:1.5px solid var(--line2); border-radius:5px; background:var(--card); position:relative; cursor:pointer; flex:none; } .grid .pick input[type=checkbox]:checked { background:var(--gold); border-color:var(--gold); } .grid .pick input[type=checkbox]:checked::after { content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px; border:solid var(--onGold); border-width:0 2px 2px 0; transform:rotate(45deg); } .grid .pick input[type=checkbox]:disabled { opacity:.4; } /* ---------- ③ 作ったもの ---------- */ /* 作品ごとの「続きを作る」は脇役：線の枠（10本並べば金が10個になっていた） */ .grid .primary { background:var(--goldSoft); color:var(--gold); border:1px solid var(--goldLine); font-weight:600; } .grid .primary:hover { background:var(--goldSoft); filter:brightness(1.15); } .grid .more { color:var(--sub); border-color:var(--line2); } /* ★大きさの札（768×1184）は隠す★（2026-09-23 オーナー判断） 2026-09-15 に「拡大した物をつないだか見分ける」ために付けたが、拡大は画質を上げたので 利用者には出していない（管理者だけ）。利用者には意味の無い技術の数字になっていた。 ★作る側（app.js）は残してある★ 拡大を戻すなら、この1行を消せば出る */ .grid .badgeSize { display:none; } /* ★「つなげる」の案内とボタンは、1本でも選んだ時だけ★ 何も選んでいない時は説明とボタンが一覧の上を占めていた。各作品の「つなげる」は常に見えている。 :has が使えない古い端末では今までどおり常に出る（壊れない） */ #tab-works:not(:has(.grid .pick input:checked)) #combineBox { display:none; } @media (max-width: 560px) { /* ★画面の下に固定★ 案内は一覧の「上」にあるので、sticky では下の作品を選ぶ頃には画面の外に出る */ #tab-works:has(.grid .pick input:checked) #combineBox:not(.hidden) { position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line2); box-shadow:0 -10px 30px rgba(0,0,0,.35); } #tab-works:has(.grid .pick input:checked) #combineBox .note { margin:0 0 6px; font-size:12px; } #tab-works:has(.grid .pick input:checked) #combineBox p { margin:0; } #tab-works:has(.grid .pick input:checked) #combineNote { display:block; margin-top:6px; } #tab-works:has(.grid .pick input:checked) .grid { padding-bottom:120px; } } #combine:not(:disabled) { background:var(--goldGrad); color:var(--onGold); border-color:transparent; font-weight:700; } /* ---------- ④ ネタ帳の上の操作：2行にまとめる ---------- */ .bk-wrap .bk-tools .bk-sub { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .bk-wrap .bk-tools .bk-sub button { padding:7px 12px; font-size:13px; } @media (max-width: 560px) { .bk-wrap .bk-tools { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; } .bk-wrap .bk-tools input[type=search] { min-width:0; } .bk-wrap .bk-tools select { width:auto; } /* 2行目：その他の操作は横に流す（はみ出したら横にスクロール）＋ 右端に「新規登録」 */ .bk-wrap .bk-tools .bk-sub { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; } .bk-wrap .bk-tools .bk-sub::-webkit-scrollbar { display:none; } .bk-wrap .bk-tools .bk-sub button { flex:0 0 auto; white-space:nowrap; padding:7px 12px; font-size:14px; } .bk-wrap .bk-tools #bkAdd { white-space:nowrap; } } /* ---------- ⑤ ログインボーナスの帯（ツール・ネタ帳）の印 ---------- */ .tb-bonus .ico, .bk-bonus .ico { width:16px; height:16px; color:var(--gold); margin-right:6px; } /* ---------- 読みやすさ（2026-09-23 利用者の声「フォント小さくするのやめて」）---------- ★本文の大きさは変えていなかった★が、暗い配色になって小さい灰色の注意書きが読みにくくなった。 注意書きの類を 12px → 13px、行間を広めに */ .note, .muted, .langNote, .plan-note, .perk, .stamp-note { font-size:13px; line-height:1.7; } label { font-size:14px; } /* ---------- 幅の狭いスマホ（Android に多い 360px 以下）---------- 360px で上の帯が 367px になり、横にスクロールしていた（2026-09-23 実測）。 画面名の札は文字を外してアイコンだけにする（アイコンで動画／画像は見分けられる） */ @media (max-width: 370px) { .svc-badge span { display:none; } .svc-badge { padding-left:6px; } .brand { letter-spacing:.1em; } header { gap:2px; } } /* ---------- 残高の期限の注記（2026-09-23 本番の不具合）---------- ボーナスのコインには30日の期限があり、残高に「うち100は10/23まで」が付く（ほぼ全員）。 注記が数字の横に並び、スマホで上の帯が 420〜467px にはみ出して横スクロールしていた。 → 数字と注記を .cv の箱で縦に積む。★スマホでは期限が近い（7日以内＝赤字）時だけ出す★ それ以外の内訳は「じぶん」の画面に全部ある（D-91 の決まりのまま） */ #coin .cv { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; } #coin .cv small[style] { font-size:10.5px !important; margin-top:1px; white-space:nowrap; } @media (max-width: 560px) { /* ★!important が要る★ 注記は style="display:block" を直に持っていて、ふつうの指定では隠れない */ #coin .cv small[style]:not([style*="--bad"]) { display:none !important; } /* ★期限が近い（赤字）時は、枠の真下に小さな札で出す★ 横幅を取らないので、部品の多い 動画・画像の画面でも 375px 以下ではみ出さない（横に積むと 363〜410px になった） */ #coin { position:relative; } #coin .cv small[style*="--bad"] { position:absolute; top:calc(100% + 4px); right:0; z-index:2; padding:2px 7px; border-radius:7px; background:var(--card); border:1px solid currentColor; box-shadow:0 4px 12px rgba(0,0,0,.35); } }