/* 配色（ui.spec §3）— BT-BBS 時代の concept blue #4fc3f7 を基調に、 オレンジ #ff9800 をサブアクセントとして継承する。 テーマは で切り替える（既定はダーク）。 */ :root, :root[data-theme="dark"] { /* ブラウザが描くもの（audio の再生器・スクロールバー・日付ピッカー）を サイトのテーマに合わせる。指定が無いと白い部品が黒地に浮く */ color-scheme: dark; --bg: #000; --bg-panel: #16181c; --border: #2f3336; --text: #e7e9ea; /* X の二次テキスト色は #71767b だが、パネル地（--bg-panel）に載ると 3.88:1 で WCAG AA（4.5:1）を割る。右ペインのウィジェットは常時この地なので実害がある。 見た目をほぼ変えずに黒地 5.42:1 / パネル地 4.59:1 に届く最小の値へ寄せた。 */ --text-dim: #7d8288; --accent: #4fc3f7; /* concept blue */ --accent-hover: #29b6f6; --accent-text: #00121c; --accent-sub: #ff9800; /* concept orange（サブ） */ --danger: #ef5350; --success: #66bb6a; --band-bg: #000; } :root[data-theme="light"] { color-scheme: light; --bg: #fff; --bg-panel: #f2f5f7; --border: #d3d9de; --text: #16181d; --text-dim: #5c6570; --accent: #0288c7; /* 白地で可読なブルー（同系の濃色） */ --accent-hover: #026fa3; --accent-text: #fff; --accent-sub: #e07800; --danger: #d32f2f; --success: #2e7d32; --band-bg: #0b2a3d; /* ライトでも帯は濃色（サイバーブルーの暗部） */ } /* 黒帯の高さ。sticky な左右ペイン・ページ見出しのオフセットがこれに追随する （狭幅では帯を sticky から外すので 0 になる） */ :root { --band-h: 48px; } /* 3 ペインの各幅と、その合計（＝レイアウトの実効幅）。 .shell と黒帯の内側の両方をこの合計に揃えることで、帯の右端（ラジオ）と 右ペインの右端が一直線になる。合計より広い上限を .shell に与えると、 ペインが埋められない余りが右に残り、帯だけが外側へはみ出して見える。 */ :root { --pane-left-w: 240px; --pane-center-w: 600px; --pane-right-w: 350px; --content-w: calc(var(--pane-left-w) + var(--pane-center-w) + var(--pane-right-w)); } /* 掲示板（2 ペイン）は中央が伸びて余りが出ないので、従来どおり広く取る */ body:has(.pane-center.wide) { --content-w: 1280px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; line-height: 1.6; /* 日本語は既定でどこでも折れるので、狭い画面だと「最初のポストを書／く」の ように語の途中で切れる。禁則を厳格側に寄せ、対応ブラウザでは文節で折る （auto-phrase。未対応のブラウザでは無視されるだけで害はない） */ line-break: strict; word-break: auto-phrase; } a { color: inherit; text-decoration: none; } /* インライン SVG アイコン（_icons.html）。線種はここで一括指定し、 色は currentColor で周囲のテキスト色・状態色に追随させる */ .i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } .shell { display: flex; min-height: 100vh; max-width: var(--content-w); margin: 0 auto; } /* グローバル帯（journal. の band と同型。セクション間の一次ナビ）。 ダークでは黒、ライトでは濃紺寄りのブルーで「帯」であることを保つ */ .topband { background: var(--band-bg); border-bottom: 1px solid var(--border); height: var(--band-h); position: sticky; top: 0; z-index: 20; } /* 内側を .shell と同じ中央固定幅に揃え、ロゴの左端が左ペインのナビ項目と 一直線になるようにする（X と同じ揃え方。pane-left の 12px + nav-item の 12px）。 右の padding は右ペインの 16px に合わせる（帯の右端＝ウィジェットの右端） */ .topband-inner { display: flex; align-items: center; gap: 20px; max-width: var(--content-w); height: 100%; margin: 0 auto; padding: 0 16px 0 24px; } /* 帯は常に濃色なので、帯の中の文字は白系で固定する（ライトでも読める） */ .topband-logo { font-size: 18px; font-weight: 800; color: #e7e9ea; flex-shrink: 0; } /* 帯のナビは横スクロールで逃がす（狭幅で項目が消えないように。スクロールバーは隠す） */ .topband-nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; } .topband-nav::-webkit-scrollbar { display: none; } .topband-nav a, .topband-nav .disabled { padding: 6px 14px; border-radius: 9999px; font-size: 14px; color: #e7e9ea; white-space: nowrap; } .topband-nav a:hover { background: rgba(255, 255, 255, .12); } .topband-nav a.on { background: var(--accent); color: #00121c; font-weight: 700; } .topband-nav .disabled { color: #6b7177; cursor: default; } .topband-user { flex-shrink: 0; font-size: 14px; } .topband-user a { color: #e7e9ea; } /* 左ペイン */ .pane-left { width: var(--pane-left-w); flex-shrink: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: var(--band-h); /* topband の下に貼り付く */ height: calc(100vh - var(--band-h)); overflow-y: auto; } .brand { font-size: 22px; font-weight: 700; padding: 12px; } /* 掲示板の左ペイン（したらば型: カテゴリ見出し＋板リスト） */ .bbs-cat { margin: 12px 4px 4px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent); border-radius: 6px; } .bbs-board { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 14px; color: var(--text); } .bbs-board:hover { background: var(--bg-panel); } .bbs-board.active { background: var(--bg-panel); font-weight: 700; } .bbs-count { font-size: 12px; color: var(--text-dim); } /* 左ペインのお気に入りスレ（未読が先頭。スレ名は 1 行に畳む） */ .bbs-fav .label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bbs-unread { flex: none; padding: 0 7px; border-radius: 999px; background: var(--accent-sub); color: #1a1200; font-size: 11px; font-weight: 700; } .sage-label { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } /* レス番はクリックで >>n を挿入するボタン（見た目は番号のまま） */ .res-quote { background: none; border: none; padding: 0; font: inherit; color: var(--text-dim); cursor: pointer; } .res-quote:hover { color: var(--accent); text-decoration: underline; } .char-count { font-size: 12px; color: var(--text-dim); margin-right: auto; white-space: nowrap; } .char-count.is-over { color: var(--accent-sub); } .res-url { word-break: break-all; } .res-popup { position: absolute; z-index: 50; max-width: 560px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); pointer-events: none; } .res-refresh { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .res-refresh .button-secondary { padding: 6px 16px; font-size: 13px; } .recovery-codes { columns: 2; margin: 8px 0; padding-left: 20px; } .recovery-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 0; } .recovery-issued { border-color: var(--accent); margin: 16px; } /* ログイン方法（連携済みプロバイダーの一覧と追加） */ .login-methods { list-style: none; margin: 8px 0; padding: 0; } .login-methods li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); } .login-methods li:last-child { border-bottom: none; } .login-method-name { font-weight: 600; min-width: 84px; } .login-methods form { margin-left: auto; } .login-add { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* スレ一覧のツールバー・ページャ */ .thread-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border); } .thread-sort { display: flex; gap: 4px; } .thread-sort a { padding: 4px 12px; border-radius: 9999px; font-size: 13px; color: var(--text); } .thread-sort a:hover { background: var(--bg-panel); } .thread-sort a.on { background: var(--accent); color: var(--accent-text); font-weight: 700; } .pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; } .pager .button-secondary { padding: 6px 18px; font-size: 13px; text-decoration: none; } /* >>n ポップアップと新着レス読み込み */ .res-popup { position: absolute; z-index: 30; max-width: 560px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); pointer-events: none; } .res-refresh { display: flex; align-items: center; gap: 12px; padding: 10px 16px; } .res-refresh .button-secondary { padding: 6px 16px; font-size: 13px; } .nav-item { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 9999px; font-size: 18px; } .nav-item:hover { background: var(--bg-panel); } .nav-item.active { font-weight: 700; } .nav-item.disabled { color: var(--text-dim); cursor: default; } .nav-item .icon { width: 26px; display: flex; justify-content: center; } .nav-item .icon .i { width: 22px; height: 22px; } .nav-item.active .icon .i { stroke-width: 2.6; } .post-button { margin-top: 12px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 9999px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; text-align: center; display: block; } /* 中央ペイン */ .pane-center { flex: 1; max-width: var(--pane-center-w); min-height: 100vh; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* 2 ペイン（掲示板。ui.spec §2.1 — スレ一覧・レスの一覧性を優先して右ペインを持たない） */ .pane-center.wide { max-width: none; } .page-header { position: sticky; /* 黒帯（z-index 20）の下に貼り付く。top: 0 だと帯の裏に潜って消える */ top: var(--band-h); z-index: 5; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg) 75%, transparent); padding: 12px 16px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border); } .composer { padding: 16px; border-bottom: 1px solid var(--border); } .composer textarea { width: 100%; background: transparent; border: none; color: var(--text); font-size: 18px; line-height: 1.5; /* 空のときの下限。JS が height を付けると rows 属性は効かなくなるので、ここで持つ */ min-height: 4.5em; resize: none; outline: none; } /* 入力量に合わせて伸びる入力欄（Twitter と同じ。autogrow.js が textarea を .grow-wrap で包む）。 同じテキストを ::after に複製してグリッドで重ね、高さは内容から CSS が決める （JS で測らないので、スクリプト実行時点で CSS が当たっていなくても壊れない）。 伸びる以上、内部スクロールバーは出さない。JS 無効時は rows 属性のままの素の textarea。 */ .grow-wrap { display: grid; } .grow-wrap::after { content: attr(data-replicated-value) " "; /* 末尾の改行を潰さないための " " */ white-space: pre-wrap; overflow-wrap: anywhere; visibility: hidden; } .grow-wrap > textarea, .grow-wrap::after { grid-area: 1 / 1 / 2 / 2; /* 同じセルに重ねる = 高さが必ず一致する */ font: inherit; /* 複製と実物のメトリクスを揃える（.grow-wrap 側で指定する） */ padding: 0; border: 0; overflow: hidden; } .composer .grow-wrap { font-size: 18px; line-height: 1.5; min-height: 4.5em; } /* キーボード操作時だけフォーカス位置を可視化する（マウス時は caret で足りる） */ .composer textarea:focus-visible, .search-box:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } /* 狭幅では 1 行に収まらないので折り返す（詰めるとボタン内で改行して潰れる） */ .composer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; margin-top: 8px; } .composer-actions .button-primary { padding: 8px 20px; font-size: 15px; white-space: nowrap; } .composer-attach { cursor: pointer; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9999px; color: var(--accent); } .composer-attach:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } .composer-attach .i { width: 20px; height: 20px; } .composer-attach input[type="file"] { font-size: 12px; color: var(--text-dim); max-width: 220px; } /* 音の添付。タイムラインでは幅いっぱいに置く（コントロールが小さいと押しにくい） */ .post-audio { display: block; width: 100%; margin: 10px 0 2px; } /* JS が効いているときは素の input を隠してアイコンボタンだけにする */ .composer.enhanced .composer-attach input[type="file"] { display: none; } .composer.dragover { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* 添付プレビュー（composer.js が生成） */ .attach-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .attach-previews[hidden] { display: none; } .attach-thumb { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .attach-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: none; border-radius: 9999px; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .attach-remove:hover { background: rgba(0, 0, 0, .85); } .attach-remove .i { width: 14px; height: 14px; } .attach-note { margin: 6px 0 0; font-size: 12px; color: var(--danger); } .attach-note[hidden] { display: none; } /* 素の file input（プロフィール編集・プレスキット等）の「ファイルを選択」ボタンを サイトのボタン様式に寄せる（ブラウザ標準の見た目を上書き） */ input[type="file"]::file-selector-button { font: inherit; font-size: 13px; padding: 6px 14px; margin-right: 10px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; } input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); } /* 投稿画像 */ .post-images { display: grid; gap: 4px; margin-top: 8px; border-radius: 12px; overflow: hidden; } .post-images.cols-1 { grid-template-columns: 1fr; } .post-images.cols-2 { grid-template-columns: 1fr 1fr; } .post-images img { width: 100%; height: 100%; max-height: 400px; object-fit: cover; display: block; } .empty-state { padding: 48px 32px; color: var(--text-dim); text-align: center; } /* 画像ライトボックス（lightbox.js が DOM を生成）。X の画像ビューアと同型: タップで全画面 → 上下スワイプで飛ばして閉じる → 端末の戻るでも閉じる。 */ html.lb-open, html.lb-open body { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; } .lightbox[hidden] { display: none; } .lightbox-backdrop { position: absolute; inset: 0; background: #000; } .lightbox-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* スワイプはこちらで処理するので、ブラウザのスクロール／戻るジェスチャへ渡さない */ touch-action: none; will-change: transform; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; /* タップは stage が受ける（どこを押しても閉じる） */ /* ズーム・パンは JS がこの要素の transform に当てる（stage 側は閉じるスワイプ専用） */ transform-origin: center center; will-change: transform; } .lightbox-close, .lightbox-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .18); } .lightbox-close { top: calc(env(safe-area-inset-top, 0px) + 10px); left: 10px; } .lightbox-close .i { width: 22px; height: 22px; } .lightbox-nav { top: 50%; transform: translateY(-50%); } .lightbox-nav[hidden] { display: none; } .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } .lightbox-nav .i { width: 20px; height: 20px; } .lightbox-dots { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: flex; gap: 6px; } .lightbox-dots[hidden] { display: none; } .lightbox-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); } .lightbox-dot.on { background: var(--accent); } /* 指で触る端末では左右ボタンを出さない（スワイプで送る） */ @media (hover: none) { .lightbox-nav { display: none; } } /* アバター（既定: 色相ハッシュ + 頭文字） */ .avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: hsl(var(--h, 210), 45%, 40%); color: #fff; font-weight: 700; flex-shrink: 0; text-decoration: none; } .avatar-sm { width: 40px; height: 40px; font-size: 18px; } .avatar-md { width: 56px; height: 56px; font-size: 24px; } img.avatar { object-fit: cover; background: var(--bg-panel); } .avatar-xl { width: 96px; height: 96px; font-size: 40px; border: 4px solid var(--bg); margin-top: -48px; } /* プロフィール（X 型: バナー + 重なるアバター + タブ） */ .profile-topbar { display: flex; align-items: center; gap: 20px; } .topbar-back { font-size: 20px; } .topbar-name { font-size: 17px; font-weight: 700; line-height: 1.2; } .topbar-sub { color: var(--text-dim); font-size: 13px; font-weight: 400; } .profile-banner { height: 160px; background: linear-gradient(120deg, hsl(var(--h, 210), 45%, 28%), hsl(calc(var(--h, 210) + 60), 45%, 38%)); background-size: cover; background-position: center; } .profile-card { padding: 12px 16px 4px; } .profile-avatar-row { display: flex; justify-content: space-between; align-items: flex-start; } .profile-action { padding-top: 8px; } .profile-action .button-primary, .profile-action .button-secondary { padding: 8px 18px; font-size: 14px; } .profile-name { font-size: 20px; margin: 8px 0 0; } .profile-handle { color: var(--text-dim); margin: 0 0 8px; } .profile-bio { margin: 8px 0; } .profile-meta { color: var(--text-dim); font-size: 14px; margin: 8px 0 4px; } .profile-stats { color: var(--text-dim); font-size: 14px; margin: 4px 0 8px; } .profile-stats b { color: var(--text); font-weight: 700; } .profile-stats a:hover { text-decoration: underline; } .my-head-text a:hover { text-decoration: underline; } .profile-tabs { display: flex; border-bottom: 1px solid var(--border); } .profile-tabs .tab { flex: 1; text-align: center; padding: 14px 0 10px; color: var(--text-dim); font-size: 15px; border-bottom: 3px solid transparent; } .profile-tabs .tab.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); } .profile-tabs .tab.disabled { cursor: default; opacity: 0.5; } .profile-tabs .tab:not(.disabled):hover { background: var(--bg-panel); } /* 設定フォーム */ .settings-form { padding: 16px; display: flex; flex-direction: column; gap: 16px; } .settings-form label { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: 14px; } /* display を指定した要素には hidden 属性が効かない（UA の display:none を上書きしてしまう）。 見たまま編集が Markdown の欄を畳めるように、ここで戻す */ .settings-form label[hidden] { display: none; } .settings-form input, .settings-form textarea { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 15px; } .form-error { padding: 12px 16px; color: var(--danger); } .settings-check { flex-direction: row !important; align-items: center; gap: 8px !important; } /* 左ナビのログアウト */ .logout-form { margin-top: auto; } .nav-button { width: 100%; background: none; border: none; cursor: pointer; color: inherit; font-size: 18px; font-family: inherit; } /* 投稿カード。--depth はポスト詳細で会話として並べるときのインデント段数 （sns.spec §2.3。一覧では付かないので 0）。 */ .post { --step: 22px; /* 返信 1 段ぶんの字下げ（狭幅では詰める） */ --indent: calc(var(--depth, 0) * var(--step)); position: relative; /* 会話の縦線（::before / ::after）の基準 */ padding: 12px 16px 12px calc(16px + var(--indent)); border-bottom: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; } .post-main { flex: 1; min-width: 0; position: relative; } /* position: 右上の「…」の基準 */ .repost-note { width: 100%; color: var(--text-dim); font-size: 13px; padding-left: 30px; } .repost-note a { font-weight: 700; } .post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .post-name { font-weight: 700; } .post-handle, .post-time { color: var(--text-dim); font-size: 14px; } .press-label { background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 6px; } .post-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .post-url { color: var(--accent); } /* リンクカード（外部 URL の OGP プレビュー。sns.spec §2.1）。 画像は自前で取得・変換したものを配信するので寸法は 1.91:1 に切り揃える。 */ .link-card { display: block; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: inherit; } .link-card:hover { background: var(--bg-panel); } .link-card-image { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-bottom: 1px solid var(--border); } .link-card-text { display: block; padding: 8px 12px; } .link-card-site { display: block; color: var(--text-dim); font-size: 13px; } .link-card-title, .link-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .link-card-title { font-weight: 700; } /* 説明はメタデータではなく本文（X のリンクではポスト本文がここに入る）。--text-dim だと ダークで 4.58:1、ホバー時（背景が --bg-panel）は 3.88:1 で AA を割る。太字/並字で タイトルとの主従を付け、色は落とさない。出所を示す site 名だけは従来どおり dim。 */ .link-card-desc { color: var(--text); font-size: 14px; margin-top: 2px; } .post-actions { margin-top: 4px; font-size: 13px; display: flex; gap: 8px; align-items: center; } .post-actions > :first-child { margin-left: -10px; } .action-link { color: var(--text-dim); padding: 6px 10px; border-radius: 9999px; } .action-link:hover { color: var(--accent); background: var(--bg-panel); } .action-btn { background: none; border: none; color: var(--text); /* グレーだと見えないので通常色。ホバーで各アクション色になる */ font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 9999px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .action-btn .i { width: 17px; height: 17px; } /* ホバーの色づけはポインタのある環境だけに出す。タッチでは押した指を離しても :hover が残り続けるため、イイネを取り消したのに色が消えないように見える。 さらに、押していない状態のホバー色は押した後の色より薄くする（同じ色にすると、 カーソルを載せたまま取り消したときに解除されたことが分からない）。 */ @media (hover: hover) { a.action-btn:hover, button.action-btn:hover { background: var(--bg-panel); color: var(--accent); } /* アクションごとのホバー色（押した後の状態色を薄めたもの） */ button.action-btn.action-like:hover { color: color-mix(in srgb, #f91880 55%, var(--text)); background: color-mix(in srgb, #f91880 12%, transparent); } button.action-btn.action-repost:hover { color: color-mix(in srgb, var(--success) 55%, var(--text)); background: color-mix(in srgb, var(--success) 12%, transparent); } button.action-btn.action-bookmark:hover { color: color-mix(in srgb, var(--accent) 55%, var(--text)); background: color-mix(in srgb, var(--accent) 12%, transparent); } a.action-btn.action-report:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } /* 押した後はホバー中でも本来の色のまま（薄める対象は「押していない」ときだけ） */ button.action-btn.action-like.is-liked:hover { color: #f91880; } button.action-btn.action-repost.is-reposted:hover { color: var(--success); } button.action-btn.action-bookmark.is-bookmarked:hover { color: var(--accent); } } span.action-btn { cursor: default; } /* 未ログイン時のカウント表示 */ .action-link { color: var(--text); } button[disabled], .button-primary[disabled] { opacity: .6; cursor: progress; } /* 送信中ではなく「まだ何も書いていない」ための無効化（composer.js） */ button[disabled].is-idle { cursor: not-allowed; } .action-btn.is-liked { color: #f91880; } .action-btn.is-liked .i { fill: currentColor; } .action-btn.is-reposted { color: var(--success); } .action-btn.is-reposted .i { stroke-width: 2.6; } .action-btn.is-bookmarked { color: var(--accent); } .action-btn.is-bookmarked .i { fill: currentColor; } .action-btn.is-voted { color: var(--accent); font-weight: 700; } .post-tombstone { color: var(--text-dim); font-style: italic; } /* 会話の縦線（sns.spec §2.3）。アバター列の中心に線を通し、すぐ上・すぐ下の行と 親子であることを示す。線が続いている間はカードの区切り線を出さない（X と同じで、 区切りは「別の話」の合図なので、続いている返信の間に引くと会話が切れて見える）。 */ .post.has-line-up::before, .post.has-line-down::after { content: ""; position: absolute; left: calc(16px + var(--indent) + 19px); width: 2px; background: var(--border); } .post.has-line-up::before { top: 0; height: 12px; } .post.has-line-down::after { top: 52px; bottom: 0; } /* 12（上余白）+ 40（アバター） */ .post.has-line-down { border-bottom: none; } .post-tombstone.has-line-down::after { top: 0; } /* 墓標にはアバターが無いので通しで引く */ /* 親が 1 段浅いとき（インデントが増えるとき）は、親の線の位置から下ろして 自分のアバターの真上へ曲げる。真下に引くと x がずれて線が途切れて見える。 */ .post.has-line-elbow::before { left: calc(16px + var(--indent) - var(--step) + 19px); width: var(--step); height: 12px; background: none; border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 8px; } /* 返信先。線で繋がっていない親（TL に流れてきた返信・枝分かれした返信）にだけ出す */ .reply-note { color: var(--text-dim); font-size: 14px; margin-top: 2px; } .reply-note a { color: var(--accent); } /* 会話の中心にしているポスト。本文を一段大きくして、前後の文脈と主従を付ける */ .post.is-target .post-body { font-size: 19px; line-height: 1.45; } .thread-heading { margin: 0; padding: 12px 16px 8px; font-size: 15px; color: var(--text-dim); } /* カードのどこを押しても詳細へ（posts.js）。JS が動いているときだけ手のひらにする */ .has-post-links .post[data-post-url] { cursor: pointer; } .has-post-links .post[data-post-url]:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } /* ドロップダウンメニュー（ポストの「…」＝その他／アクションバー右端の ↑ ＝共有）。 X と同じ位置取り。
で組むので JS 無効でも開閉・キーボード操作ができ、 menus.js は「外側クリック・Esc で閉じる」「同時に 1 つだけ開く」「削除の確認」を足すだけ。 */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } /* Safari の三角を消す */ /* 「…」はポスト右上に絶対配置する。post-head は長い表示名で折り返す設計なので、 flow に載せると名前が長い端末（スマホ）で「…」だけが次の行に落ちる。 */ .post-menu { position: absolute; top: -2px; right: 0; } .post-head:has(.post-menu) { padding-right: 30px; } /* 「…」の下に名前が潜り込まない幅 */ .post-share { margin-left: auto; } /* X と同じで共有だけ右端に離す */ .menu-button { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 9999px; color: var(--text-dim); } .menu-button:hover, .menu[open] > .menu-button { color: var(--accent); background: var(--bg-panel); } .menu-button .i { width: 17px; height: 17px; } .post-share > .menu-button { color: var(--text); padding: 6px 10px; } .menu-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 250px; padding: 6px 0; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / .45); } .menu-panel-right { left: auto; right: 0; } .menu-panel form { margin: 0; } .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: none; border: none; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; } .menu-item:hover { background: var(--bg-panel); } .menu-item .i { width: 18px; height: 18px; } .menu-item.is-danger { color: var(--danger); } /* OS の共有シートは navigator.share がある端末だけ（menus.js が html に印を付ける） */ .share-native { display: none; } .can-share .share-native { display: flex; } /* 他社ロゴ（X）はストロークではなく塗りのグリフ。_icons.html の logo-x 専用 */ .i-solid { fill: currentColor; stroke: none; } /* コピー完了などの一時通知。ページ遷移を伴わない操作の結果を伝える唯一の口 */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 60; max-width: min(90vw, 420px); padding: 10px 18px; border-radius: 9999px; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* 掲示板 */ .board-category { font-size: 14px; color: var(--text-dim); margin: 0; padding: 14px 16px 6px; border-bottom: 1px solid var(--border); } .board-card { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border); } .board-head { display: block; } .board-head:hover .board-name { text-decoration: underline; } .board-name { display: block; font-size: 17px; font-weight: 700; } .board-desc { display: block; color: var(--text-dim); font-size: 14px; margin-top: 2px; } .board-desc-page { color: var(--text-dim); font-size: 14px; padding: 8px 16px; margin: 0; border-bottom: 1px solid var(--border); } .board-meta { color: var(--text-dim); font-size: 13px; margin-top: 4px; } /* 板ごとのスレ名一覧（したらば型。数字ではなくスレ名を並べる） */ .board-threads { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: board-thread; } .board-threads li { counter-increment: board-thread; display: flex; gap: 6px; align-items: baseline; padding: 2px 0; font-size: 14px; } .board-threads li::before { content: counter(board-thread) ":"; flex-shrink: 0; min-width: 1.8em; text-align: right; color: var(--text-dim); font-size: 13px; } .board-threads a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--accent); } .board-threads a:hover { text-decoration: underline; } .thread-res { flex-shrink: 0; color: var(--text-dim); font-size: 13px; } .board-more { display: inline-block; margin-top: 6px; color: var(--accent); font-size: 13px; } .board-more:hover { text-decoration: underline; } .board-empty { margin: 8px 0 0; color: var(--text-dim); font-size: 13px; } .new-thread { border-bottom: 1px solid var(--border); } .new-thread summary { padding: 12px 16px; cursor: pointer; color: var(--accent); font-weight: 700; } /* スレ一覧の 1 行。左のレス数バッジ → スレタイ（リンク色）→ メタの順で読ませる。 タイトルが本文と同じ色だと「押せる場所」が消えて一覧がのっぺりする */ .thread-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; } .thread-row:hover { background: var(--bg-panel); } .thread-count { flex: none; min-width: 48px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: 11px; line-height: 1.25; text-align: center; } .thread-count b { display: block; font-size: 15px; color: var(--text); } .thread-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .thread-title { color: var(--accent); font-weight: 700; min-width: 0; } .thread-row:hover .thread-title { text-decoration: underline; } .thread-meta { color: var(--text-dim); font-size: 12px; } /* 2ch / したらば型の板トップ。スレごとに「>>1 の冒頭＋新着レス」をワンセットで積む */ .thread-block { padding: 14px 16px; border-bottom: 1px solid var(--border); } .thread-block-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0; font-size: 16px; line-height: 1.4; } .thread-block-head .thread-flag { margin-left: 0; } .thread-block-title { color: var(--accent); font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .thread-block-title:hover { text-decoration: underline; } .thread-block-count { color: var(--text-dim); font-weight: 400; font-size: 13px; } .preview-res { margin-top: 8px; font-size: 14px; } .preview-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .preview-no { color: var(--accent); font-weight: 700; } .preview-name { font-weight: 700; } a.preview-name:hover { text-decoration: underline; } .preview-id, .preview-time { color: var(--text-dim); font-size: 12px; } /* 長文は 3 行で畳む（続きは「全部読む」へ。文字数でも切るのでここは保険） */ .preview-body { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .preview-aborn { color: var(--text-dim); font-style: italic; } /* お絵かき板の絵はサムネイルで（原寸はスレ側で見る） */ .preview-images { margin-top: 4px; } .preview-images img { max-height: 96px; max-width: 100%; border-radius: 6px; border: 1px solid var(--border); background: #fff; } .thread-block-links { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; font-size: 13px; } .thread-block-links a { color: var(--accent); } .thread-block-links a:hover { text-decoration: underline; } /* ロック・上限などの状態は色付きの札にする（メタ文の中に埋もれさせない） */ .thread-flag { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--accent-sub); border-radius: 999px; color: var(--accent-sub); font-size: 11px; } /* スレの見出し（タイトル＋レス数＋☆ を 1 ブロックに収める） */ .thread-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); } .thread-heading { font-size: 21px; line-height: 1.35; margin: 0; } .thread-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; color: var(--text-dim); font-size: 13px; } .thread-head-meta .thread-flag { margin-left: 0; } /* レス 1 件。アバター（名無し板では ID の色チップ）＋ 本体の 2 カラム */ .res { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .res-main { flex: 1; min-width: 0; } .res-avatar { width: 28px; height: 28px; font-size: 13px; margin-top: 2px; flex: none; } .res-gap { width: 28px; flex: none; } .res-avatar img.avatar { width: 28px; height: 28px; } /* 名無し板は誰か分からないままで、同一人物だけ見分けられればよい（ID と同じ情報量） */ .res-idchip { width: 10px; height: 10px; margin: 7px 9px 0; border-radius: 50%; background: hsl(var(--h, 210), 45%, 45%); flex: none; } /* 自分のレスは左のアクセントラインで分かるようにする（背景は薄く） */ .res.is-own { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .res-head { display: flex; gap: 8px; align-items: center; font-size: 14px; flex-wrap: wrap; } .res-no { color: var(--accent); font-weight: 700; } .res-name { font-weight: 700; } .res-name:hover, .res-handle:hover { text-decoration: underline; } .res-handle, .res-time { color: var(--text-dim); font-size: 13px; } .res-badge { padding: 0 8px; border: 1px solid var(--accent-sub); border-radius: 999px; color: var(--accent-sub); font-size: 11px; } .res-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } /* 記事スレの >>1（記事カード。閲覧者の言語版の題名・リード・記事へのリンク） */ .article-card { white-space: normal; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-panel); } .article-card p { margin: 0 0 6px; } .article-card p:last-child { margin-bottom: 0; } .article-card-site { font-size: .8em; color: var(--ink-dim); } .article-card-title { font-size: 1.05em; font-weight: 700; line-height: 1.5; } .article-card-excerpt { color: var(--ink-dim); font-size: .95em; line-height: 1.7; } /* リードと「記事を読む」の間は本文の行間より広く取る（ボタンがリードに貼り付いて見えた・2026-09-03） */ .article-card-excerpt + p { margin-top: 14px; } .res-aborn { color: var(--text-dim); font-style: italic; } /* お絵かき板のレスに付いた絵（sns.spec §4.1）。1 レス 1 枚が基本なので段組みは持たない */ .res-images { margin: 6px 0 0; } .res-images img { max-width: min(100%, 480px); height: auto; border-radius: 6px; border: 1px solid var(--border); /* 白地に描かれた絵が黒地へ溶けないよう、地は白のままにする */ background: #fff; cursor: zoom-in; } /* 書き込み欄の上に置く「絵を描く」導線 */ .oekaki-start { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; } /* イイネと「…」はヘッダ右端にまとめる（通報は「…」の中。sns.spec §4） */ .res-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; } .res-tools .action-btn { padding: 4px 8px; font-size: 12px; gap: 4px; } .res-tools .action-btn .i { width: 15px; height: 15px; } .res-tools .menu-button { padding: 4px; } .res-menu .menu-item { font-size: 14px; padding: 10px 14px; } .res-anchor { color: var(--accent); } .res:target { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* 前回読んだ位置の区切り（お気に入り登録者にだけ出る） */ .res-newline { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--accent-sub); font-size: 12px; font-weight: 700; } .res-newline::before, .res-newline::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; } /* >>n のポップアップはレスの複製。操作系は押せない（pointer-events: none）ので出さない */ .res-popup .res-tools { display: none; } /* 運営からのお知らせ（support.spec §7.1）。掲示板のスレは古い順に読むものなので、 最新の変更点を追う導線だけを新しい順に分ける。中身は同じレス。 */ .notices-lead { padding: 12px 16px 0; } .notice { padding: 14px 16px; border-bottom: 1px solid var(--border); } .notice-head { display: flex; align-items: center; gap: 8px; } .notice-date { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; } .notice-date:hover { color: var(--accent); text-decoration: underline; } .notice-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .notices-older { padding: 16px; text-align: center; font-size: 14px; } .notices-older a { color: var(--accent); } /* 投稿者名のホバーカード（profile_card.js が /u//card を差し込む）。 クラスは pcard 系で統一する — .profile-card は profile.html のヘッダが使っており、 名前を共有すると position:absolute がページ本体へ効いて浮いてしまう */ .pcard { position: absolute; z-index: 60; width: 300px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 34px rgb(0 0 0 / .5); } .pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .pcard-action .button-primary, .pcard-action .button-secondary { padding: 6px 16px; font-size: 13px; } .pcard-name { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; } .pcard-name:hover { text-decoration: underline; } .pcard-handle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; } .pcard-bio { margin: 8px 0 0; font-size: 14px; } .pcard-stats { display: flex; gap: 14px; margin: 10px 0 0; font-size: 13px; color: var(--text-dim); } .pcard-stats b { color: var(--text); } .pcard-stats a:hover { text-decoration: underline; } /* 固定ポスト */ .pinned-note { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 13px; padding: 10px 16px 0; } /* 検索 */ .search-form { padding: 12px 16px; border-bottom: 1px solid var(--border); } .search-res { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); } .search-res:hover { background: var(--bg-panel); } .search-res-thread { color: var(--text-dim); font-size: 13px; } .search-res-body { margin-top: 4px; } /* 通知 */ .nav-badge { background: var(--accent); color: var(--accent-text); border-radius: 9999px; font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: auto; } .notif { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .notif.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); } .notif-icon { width: 28px; display: flex; justify-content: center; padding-top: 2px; } .notif-icon .i { width: 20px; height: 20px; } .notif-icon.notif-like { color: #f91880; } .notif-icon.notif-like .i { fill: currentColor; } .notif-icon.notif-repost { color: var(--success); } .notif-icon.notif-reply, .notif-icon.notif-follow { color: var(--accent); } .notif-body p { margin: 0; } .notif-excerpt { display: block; color: var(--text-dim); font-size: 14px; margin: 4px 0; } .notif-body .post-time { font-size: 12px; } /* 右ペイン */ .pane-right { width: var(--pane-right-w); flex-shrink: 0; padding: 8px 16px; position: sticky; top: var(--band-h); height: calc(100vh - var(--band-h)); overflow-y: auto; } .search-box { width: 100%; background: var(--bg-panel); border: 1px solid transparent; border-radius: 9999px; padding: 12px 16px; color: var(--text); font-size: 15px; outline: none; } .widget { background: var(--bg-panel); border-radius: 16px; margin-top: 16px; padding: 12px 16px; } .widget h2 { font-size: 18px; margin: 4px 0 8px; } .widget .placeholder { color: var(--text-dim); font-size: 14px; } /* 右ペイン最下部のフッター（規約・著作権表示） */ .pane-footer { margin: 16px 0 24px; padding: 0 4px; } .pane-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .pane-footer-links a { color: var(--text-dim); font-size: 13px; line-height: 16px; text-decoration: none; } .pane-footer-links a:hover { text-decoration: underline; } .pane-footer-copy { color: var(--text-dim); font-size: 13px; line-height: 16px; margin: 4px 0 0; } /* 制度ページ（/about/）の文書本文 */ .doc { padding: 8px 16px 40px; } .doc-updated { color: var(--text-dim); font-size: 13px; margin: 4px 0 16px; } .doc h2 { font-size: 17px; margin: 28px 0 8px; } .doc p { margin: 8px 0; font-size: 15px; } .doc ul { margin: 8px 0; padding-left: 22px; } .doc li { margin: 4px 0; font-size: 15px; } /* 管理コンソール（SNS の 3 ペインではなく専用のフルワイド画面。admin.spec §1） */ .admin-body { background: var(--bg); } .admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .admin-nav { border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; } .admin-brand { font-weight: 800; font-size: 16px; padding: 8px; } .admin-nav-sub { font-size: 11px; color: var(--text-dim); padding: 0 8px 8px; } .admin-nav-item { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--text); } .admin-nav-item:hover { background: var(--bg-panel); } .admin-nav-item.active { background: var(--bg-panel); font-weight: 700; } .admin-nav-item.disabled { color: var(--text-dim); cursor: default; } .admin-nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 8px; } .admin-main { padding: 24px 28px 64px; min-width: 0; } .admin-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; } .admin-header h1 { font-size: 24px; margin: 0; } .admin-filter { display: flex; gap: 8px; align-items: center; } .admin-filter input, .admin-filter select { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; } .admin-filter .button-secondary { padding: 8px 16px; font-size: 14px; } .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .admin-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } a.admin-card:hover { background: var(--bg-panel); } .admin-card-num { font-size: 28px; font-weight: 800; line-height: 1.1; } .admin-card-label { font-size: 13px; color: var(--text-dim); } .admin-card.warn .admin-card-num { color: var(--danger); } .admin-panel { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; } .admin-panel.issued { border-color: var(--accent); } .admin-panel-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .admin-panel h2 { font-size: 15px; margin: 0; } .admin-link { color: var(--accent); } /* ゲームセンターのマスタ編集（gamecenter.spec §6）。1 エントリ = 1 つの JSON を 縦に積むので、テーブルではなく入れ子のパネルで並べる */ .admin-subpanel { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; } .admin-subpanel h3 { font-size: 14px; margin: 0; } .admin-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); } .admin-form button { align-self: flex-start; } .admin-form textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } p.success { color: var(--success); } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table th { color: var(--text-dim); font-weight: 600; white-space: nowrap; } .admin-table td.nowrap { white-space: nowrap; } .admin-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .admin-table td.danger { color: var(--danger); } /* 列が多く横に長い表なので、ホバー中の行だけ地を上げて視線が行を外さないようにする */ .admin-table tbody tr:hover > td { background: color-mix(in srgb, var(--text) 7%, transparent); } /* 認証手段の列。プロバイダー・パスキー・リカバリーをアイコン 1 行に畳んで行高を抑える */ .auth-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; } .auth-item { display: inline-flex; align-items: center; gap: 3px; } .auth-item .i { width: 15px; height: 15px; vertical-align: 0; } .danger { color: var(--danger); } .article-preview { line-height: 1.8; max-width: 720px; } .article-preview h1, .article-preview h2, .article-preview h3 { margin: 20px 0 8px; } .article-preview img { max-width: 100%; border-radius: 8px; } .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; } .editor-aside { position: sticky; top: 16px; } @media (max-width: 1023px) { .editor-grid { grid-template-columns: 1fr; } .editor-aside { position: static; } } .admin-table td.ok { color: var(--success); } /* 削除（非表示）済みの行。復帰させられるので消さずに沈める */ .admin-table tr.row-hidden td { opacity: 0.55; } .admin-table tr.row-hidden input[type="text"] { text-decoration: line-through; } .admin-table .button-secondary { padding: 4px 12px; font-size: 12px; white-space: nowrap; } .admin-table input[type="text"] { min-width: 220px; padding: 4px 8px; font-size: 13px; background: var(--bg-input, var(--bg-panel)); color: inherit; border: 1px solid var(--border); border-radius: 6px; } /* はじめの一歩（空タイムラインの導線） */ .starter { margin: 16px; padding: 16px; border: 1px solid var(--accent); border-radius: 12px; } .starter-head { display: flex; align-items: baseline; justify-content: space-between; } .starter-head h2 { font-size: 16px; margin: 0; } .starter-count { font-size: 13px; color: var(--text-dim); } .starter-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } /* リンク文字列は途中で折らない（「最初のポストを書／く」を防ぐ）。溢れないよう 行は折り返せるままにする */ .starter-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; line-height: 1.5; } .starter-list li > a { white-space: nowrap; } .starter-list li.is-done { color: var(--text-dim); } .starter-check { color: var(--accent); font-weight: 700; flex-shrink: 0; } .starter-list li.is-done .starter-check { color: var(--success); } .starter-list a { color: var(--accent); font-weight: 600; } /* カード自身が左右 16px を持つので、外枠は見出し・注記だけを揃える */ .timeline-suggest { padding: 0 0 24px; } .timeline-suggest > h2, .timeline-suggest > .placeholder { padding: 0 16px; } .timeline-suggest h2 { font-size: 16px; margin: 0 0 4px; } /* メンバーカード（検索結果・おすすめ） */ /* メンバーカード。中央ペインでは投稿（.post）と同じ左右 16px に揃え、 右ペインのウィジェット内だけウィジェット自身の padding に任せる */ .user-card { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .widget .user-card { padding: 8px 0; } .user-card:last-of-type { border-bottom: none; } /* アバターは img（width/height 属性つき）と頭文字 div の両方が同じ円になるよう固定する。 div 側にサイズを与えないと内容分の幅しかなく、border-radius: 50% が楕円になる */ .user-card .avatar { width: 44px; height: 44px; font-size: 19px; } .user-card-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .user-card-text { min-width: 0; } .user-card-name { font-weight: 700; font-size: 14px; } .user-card-handle, .user-card-bio { font-size: 12px; color: var(--text-dim); } .user-card-bio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-card .button-primary, .user-card .button-secondary { padding: 6px 16px; font-size: 13px; white-space: nowrap; } /* 興味ジャンル。ラベルの字数がまちまち（RPG / アドベンチャー・ノベル）なので、 幅なりに流すと不揃いに見える。等幅グリッドに並べて縦横を揃える */ .genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin: 12px 0; } /* .editor-form label（縦積み）より詳細度を上げる。負けるとチェックボックスと ラベルが縦に積まれて高さが倍になる */ .genre-chip, .editor-form label.genre-chip { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--text); cursor: pointer; min-height: 44px; /* 行の高さを揃えつつ、指で押せる大きさを確保する */ } .genre-chip input[type="checkbox"] { width: auto; flex: none; margin: 0; } .genre-chip:hover { border-color: var(--text-dim); } .genre-chip:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } @media (max-width: 480px) { .genre-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } .form-saved { color: var(--success); font-size: 14px; } /* 右ペイン: いま動いているスレ */ .trend-row { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); } .trend-row:last-child { border-bottom: none; } .trend-row:hover .trend-title { color: var(--accent); } .trend-board { display: block; font-size: 11px; color: var(--text-dim); } .trend-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; } .trend-meta { font-size: 11px; color: var(--text-dim); } .title-badge { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 9999px; font-size: 12px; color: var(--accent); border: 1px solid var(--accent); } .pending-badge { display: inline-block; border-radius: 9999px; padding: 1px 8px; font-size: 11px; color: var(--accent-sub); border: 1px solid var(--accent-sub); } /* 折り返すと行が 2 段になるので、バッジ自体は改行させない */ .role-badge { display: inline-block; white-space: nowrap; border-radius: 9999px; padding: 2px 10px; font-size: 12px; border: 1px solid var(--border); } .role-badge.role-admin { background: var(--accent); color: var(--accent-text); border-color: transparent; } .role-badge.role-editor { border-color: var(--accent); color: var(--accent); } /* シスオペ（サービスアカウント）。人間のロールと一目で見分けが付く配色にする */ .role-badge.role-sysop { border-color: var(--success); color: var(--success); } .role-form { display: flex; gap: 6px; align-items: center; } .role-form select { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12px; } /* ロール変更は「選び直す → 確定」の 2 段（admin.js）。未確定の変更が行に残ったまま 放置されると事故るので、確定待ちの間はセレクトと確定ボタンの両方を目立たせる */ .role-form.pending select { border-color: var(--accent); } .role-form.pending .role-save { background: var(--accent); color: var(--accent-text); border-color: transparent; } .role-form.pending .role-save:hover { background: var(--accent-hover); } .admin-inline-input { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 13px; width: 100%; min-width: 90px; } .admin-inline-input.num { min-width: 56px; width: 56px; } /* textarea は既定でフォントが等幅になる（他のセルと揃わない）ので継承させる */ textarea.admin-inline-input { font: inherit; line-height: 1.4; resize: vertical; } /* ラジオ編成の局テーブル。列幅は colgroup で決め、入力欄はセルに収める */ .stations-table { table-layout: fixed; width: 100%; min-width: 880px; } .stations-table .admin-inline-input { min-width: 0; } .stations-table .admin-inline-input.num { width: 100%; } /* 局のジャケット。サムネ・差し替え・取り外しを 1 セルに畳む */ .station-cover-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .station-cover-thumb { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel) center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none; } .station-cover-form { display: flex; flex-direction: column; gap: 4px; width: 100%; } /* 既定のファイル選択ボタンはセル幅を超えるので、文字を詰めて収める */ .station-cover-file { font-size: 11px; width: 100%; } .station-cover-file::file-selector-button { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 11px; margin-right: 4px; } .station-cover-cell .button-secondary { padding: 3px 6px; font-size: 11px; width: 100%; white-space: nowrap; } .station-cover-error { font-size: 11px; line-height: 1.3; } .admin-row-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .admin-row-actions .button-primary, .admin-row-actions .button-secondary { width: 100%; padding: 4px 8px; font-size: 12px; white-space: nowrap; } .admin-table select { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; } .ok { color: var(--success); } /* 総合ステータス */ .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .status-item { display: flex; align-items: center; gap: 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .status-item .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex: 1; } .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .status-dot.ok { background: var(--success); } .status-dot.ng { background: var(--danger); } .counts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .counts-block { border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .counts-block h3 { font-size: 13px; margin: 0 0 8px; color: var(--text-dim); } .counts-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; } .counts-row .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* マイラボ（適応型ダッシュボード。ui.spec §2） */ .my-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border); } /* flex-basis を持たせて「入らなければ行を折る」ようにする。flex:1 だけだと 名前欄が 1 文字幅まで潰れて縦書きになる（狭幅で実際に起きた） */ .my-head-text { flex: 1 1 200px; min-width: 0; } .my-head-text h1 { font-size: 20px; margin: 0; overflow-wrap: anywhere; } .my-head-text p { margin: 2px 0 0; font-size: 14px; color: var(--text-dim); } /* .avatar-xl はプロフィールのバナーに重ねる前提で負のマージンを持つ。 マイラボにはバナーが無いので打ち消し、テンプレートの 72px 指定に揃える */ .my-head .avatar-xl { width: 72px; height: 72px; font-size: 30px; margin-top: 0; border: none; } .my-head-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } .my-head-actions .button-secondary { padding: 8px 16px; font-size: 13px; white-space: nowrap; } .my-section-title { font-size: 15px; margin: 20px 16px 8px; } .my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 0 16px 16px; } .my-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .my-card h3 { font-size: 14px; margin: 0 0 8px; } /* 投稿のアップロード進捗 */ .upload-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* display 指定は hidden 属性より強いので明示的に打ち消す（常時表示バグの防止） */ .upload-progress[hidden] { display: none; } .upload-bar { flex: 1; height: 6px; background: var(--bg-panel); border-radius: 9999px; overflow: hidden; } .upload-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; } .upload-pct { font-size: 12px; color: var(--text-dim); min-width: 3.5em; text-align: right; } .theme-form { display: flex; gap: 8px; } .theme-form .button-secondary { padding: 8px 16px; font-size: 13px; } .my-card.issued { border-color: var(--accent); } .my-card.is-disabled { opacity: .45; } .my-card.is-disabled h3 { color: var(--text-dim); } .my-card p { font-size: 13px; margin: 0 0 6px; } @media (max-width: 767px) { .admin-shell { grid-template-columns: 1fr; } .admin-nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); } .admin-nav-foot { margin-top: 0; border-top: none; flex-direction: row; } .admin-main { padding: 16px; } } /* 旧レイアウト（ニュースルームが使う節見出し） */ .admin-section { border-bottom: 1px solid var(--border); padding: 16px; } .admin-section h2 { font-size: 16px; margin: 0 0 8px; } .admin-section .placeholder { color: var(--text-dim); font-size: 14px; } .invite-issued { font-size: 14px; margin: 0 0 8px; } .invite-url { width: 100%; margin-bottom: 12px; font-family: monospace; } /* フォローリンクの「作り直す」「失効させる」は別々の form なので横に並べる */ .follow-link-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .invite-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; } .invite-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); } .invite-form select, .invite-form input { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; } .invite-form .button-primary { padding: 8px 20px; font-size: 14px; } .invite-table { width: 100%; border-collapse: collapse; font-size: 13px; } .invite-table th, .invite-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); } .invite-table th { color: var(--text-dim); font-weight: 600; } .invite-table .button-secondary { padding: 4px 12px; font-size: 12px; white-space: nowrap; } /* ニュースルームの起稿・編集フォーム */ .editor-form { display: flex; flex-direction: column; gap: 16px; } .editor-meta { display: flex; flex-wrap: wrap; gap: 12px; } .editor-meta label { flex: 1 1 220px; } .editor-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); } .editor-form input, .editor-form select, .editor-form textarea { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 15px; font-family: inherit; width: 100%; } .editor-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.6; resize: vertical; } /* 規約・18+ の同意チェック（必須項目なので他のラベルより読みやすく。 チェックボックスには input の width: 100% を効かせない） */ .editor-form label.consent-check { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text); line-height: 1.7; line-break: strict; } .editor-form .consent-check input[type="checkbox"] { width: auto; flex: none; margin-top: 4px; } .editor-lang { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .editor-lang legend { font-size: 13px; color: var(--text-dim); padding: 0 6px; } .editor-actions { display: flex; gap: 12px; align-items: center; } .editor-actions .button-primary, .editor-actions .button-secondary { padding: 10px 24px; font-size: 15px; text-decoration: none; } .editor-row-menu .menu-button { min-width: 34px; padding: 3px 10px 7px; font-size: 20px; line-height: 1; } .editor-row-menu .menu-panel { min-width: 150px; } .admin-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 12px 0; } .admin-pager .button-secondary { text-decoration: none; } .admin-pager [aria-disabled="true"] { opacity: .4; pointer-events: none; } .form-error { color: var(--danger); font-size: 14px; margin: 0 0 8px; } /* エディタ 2 ペイン（左: 本文 / 右: プレビュー・素材・書き方）。journal.spec §4.5 */ .editor-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .editor-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; } .editor-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); } .editor-tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 14px; padding: 8px 12px; cursor: pointer; } .editor-tabs button.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; } .editor-tabpane { min-height: 320px; } .og-card { display: flex; gap: 0; overflow: hidden; border: 1px solid var(--line, #d5d8dd); border-radius: 10px; background: #fff; max-width: 480px; } .og-card-thumb { flex: 0 0 120px; min-height: 90px; display: flex; align-items: center; justify-content: center; background: #e8eaee; color: #8a8f98; font-size: 12px; } .og-card-text { padding: 10px 12px; min-width: 0; } .og-card-title { font-weight: 700; font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .og-card-desc { font-size: 12px; color: #565b64; line-height: 1.5; margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .og-card-site { font-size: 11px; color: #8a8f98; margin-top: 6px; } #preview-frame { width: 100%; height: 68vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .editor-toolbar button { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; padding: 5px 10px; cursor: pointer; } .editor-toolbar button:hover { border-color: var(--accent); } .editor-bodylabel { margin: 0; } .media-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--text-dim); font-size: 13px; } .media-drop.over { border-color: var(--accent); } .media-drop p { margin: 0 0 10px; } .media-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .media-grid li { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .media-grid img { width: 100%; height: 96px; object-fit: cover; display: block; } .media-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); padding: 6px; } .media-meta button { background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); font-size: 11px; padding: 2px 6px; cursor: pointer; } .media-meta button:hover { color: var(--text); border-color: var(--accent); } @media (max-width: 1100px) { .editor-split { grid-template-columns: 1fr; } .editor-side { position: static; } #preview-frame { height: 50vh; } } /* ランディング */ .landing { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; } .landing h1 { font-size: 40px; margin: 0; } /* 看板コピー。lead（dim）より前に出す。h1 とは別階層なので太さと行間で差をつける */ .landing .hook { font-size: 21px; font-weight: 700; line-height: 1.7; max-width: 520px; margin: 0; } /* 中央寄せの見出し・短い段落は、行末を成り行きに任せると「パスポ／ート」 「プライバ／シーポリシー」のようなみっともない割れ方をする。行長を揃え（balance）、 日本語の禁則を厳格側に寄せ（「ゲームセンタ／ー、」の長音落ちを防ぐ）、対応ブラウザ では文節で折る（auto-phrase。未対応でも無害） */ .landing h1, .landing .hook, .landing .lead, .landing .legal-note { text-wrap: balance; line-break: strict; word-break: auto-phrase; } .nowrap { white-space: nowrap; } .landing .lead { color: var(--text-dim); max-width: 480px; } .landing .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; } /* 登録手続き（/welcome）。ナビを持たない独立ページだが中身はフォームなので、 ランディングの中央寄せ・上下中央は外す（ラベルが行の真ん中で折り返して読みにくい）。 スマホでは 1 画面に収まらないので、上から素直に積む。 */ .landing-form { justify-content: flex-start; text-align: left; padding: 28px 16px 56px; } .landing-form > * { width: 100%; max-width: 480px; } .landing-form h1 { font-size: 26px; text-align: center; line-height: 1.4; } .landing-form .lead { max-width: 480px; } /* balance は中央寄せの短い行のためのもの。左寄せのフォーム説明に掛けると 「つづいて、あなたの名前を／決めてください」のように早すぎる位置で折れる */ .landing-form .lead, .landing-form .legal-note, .landing-form h1 { text-wrap: pretty; } .landing-form .genre-grid { margin: 4px 0 0; } /* 18+ 明示と規約同意のみなし（登録導線の必須表示）。読み飛ばされない程度には効かせる */ .legal-note { color: var(--text-dim); font-size: 13px; line-height: 1.7; max-width: 480px; line-break: strict; } .landing .legal-note { margin: 8px auto 0; } .landing-form .legal-note { margin: 8px 0 0; } /* 規約への導線。読んでもらう前提なので本文リンクより強く見せる */ /* 入力欄の下に置く補足。ラベルを長くして読みにくくしないための逃がし先 */ .field-hint { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0; } .consent-docs { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; } .consent-docs a { color: var(--accent); text-decoration: underline; font-weight: 700; } .onboarding-exit { text-align: center; } .link-button { background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 8px; } .link-button:hover { color: var(--text); } .button-primary, .button-secondary, .button-danger { border-radius: 9999px; padding: 12px 28px; font-size: 16px; font-weight: 700; cursor: pointer; } .button-primary { background: var(--accent); color: var(--accent-text); border: none; } .button-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .button-danger { background: var(--danger); color: #fff; border: none; } /* 作品ポートフォリオ（sns.spec §7） */ .works-owner-bar { padding: 12px 16px 0; margin: 0; } .works-lead { padding: 0 16px; margin: 12px 0; color: var(--text-dim); font-size: 14px; } .works-group { font-size: 15px; margin: 18px 16px 8px; display: flex; align-items: center; gap: 8px; } .works-count { color: var(--text-dim); font-size: 13px; font-weight: 400; } .works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 0 16px 8px; } /* アルバム。ジャケットは CD と同じ正方形で扱う（作品カードは 16:9） */ .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 0 16px 8px; } .album-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .album-card:hover .album-cover { border-color: var(--accent); } .album-cover { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 10px; background-color: hsl(var(--h, 210), 40%, 30%); background-image: linear-gradient(120deg, hsl(var(--h, 210), 45%, 28%), hsl(calc(var(--h, 210) + 60), 45%, 38%)); background-size: cover; background-position: center; flex: none; } /* 管理一覧では行の中に小さく置く */ .work-row .album-cover { width: 72px; } .album-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .album-card-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .album-card-meta { font-size: 12px; color: var(--text-dim); } .album-detail-head { display: flex; gap: 16px; padding: 16px; align-items: flex-start; } .album-cover-lg { width: 180px; flex: none; } .album-cover-preview { width: 140px; margin: 4px 0; } .album-detail-text { min-width: 0; } .album-detail-text h1 { font-size: 22px; margin: 6px 0; } .album-notes { padding: 0 16px 24px; } /* 曲。番号 → 題名 → 操作の 1 行と、その下に再生器を敷く */ .track-list { list-style: none; margin: 0; padding: 0 16px 8px; display: flex; flex-direction: column; gap: 14px; } .track { display: flex; flex-direction: column; gap: 6px; } .track-head { display: flex; align-items: baseline; gap: 10px; } .track-no { color: var(--text-dim); font-variant-numeric: tabular-nums; flex: none; } .track-title { font-weight: 600; min-width: 0; } .track-actions { margin-left: auto; display: flex; gap: 4px; flex: none; } .track-audio { display: block; width: 100%; } @media (max-width: 480px) { /* 縦に積むが、ジャケットは画面を占領させない（曲順が 1 画面に入るように） */ .album-detail-head { flex-direction: column; gap: 12px; } .album-cover-lg { width: 150px; } } .work-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .work-card:hover { border-color: var(--accent); } .work-cover, .work-row-cover, .note-row-cover, .work-detail-cover { background-color: hsl(var(--h, 210), 40%, 30%); background-image: linear-gradient(120deg, hsl(var(--h, 210), 45%, 28%), hsl(calc(var(--h, 210) + 60), 45%, 38%)); background-size: cover; background-position: center; } .work-cover { display: block; aspect-ratio: 16 / 9; position: relative; } .work-status { position: absolute; top: 8px; left: 8px; font-size: 12px; font-weight: 700; border-radius: 9999px; padding: 3px 10px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); } .work-status.is-wip { background: var(--accent-sub); color: #1a0f00; border-color: transparent; } .work-status.is-released { background: var(--accent); color: var(--accent-text); border-color: transparent; } /* 種別バッジ（ゲーム・イラスト・音楽…）。カバー上では左下（左上は状態が使う） */ .work-kind { position: absolute; bottom: 8px; left: 8px; font-size: 12px; font-weight: 700; border-radius: 9999px; padding: 3px 10px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); } /* 作品タブの種別チップ（棚に実在する種別だけ並ぶ） */ .works-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; } .works-chip { font-size: 13px; border: 1px solid var(--border); border-radius: 9999px; padding: 4px 12px; color: var(--text-dim); } .works-chip:hover { border-color: var(--accent); text-decoration: none; } .works-chip.active { background: var(--accent); color: var(--accent-text); border-color: transparent; } .work-draft { position: absolute; top: 8px; right: 8px; font-size: 12px; border-radius: 9999px; padding: 3px 10px; background: var(--bg); color: var(--text-dim); border: 1px dashed var(--border); } .work-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; } .work-title { font-size: 15px; margin: 0; overflow-wrap: anywhere; } .work-title a { color: var(--text); } .work-title a:hover { color: var(--accent); } .work-tagline { margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .work-meta { margin: 0; font-size: 12px; color: var(--text-dim); } .work-links { display: flex; flex-wrap: wrap; gap: 6px; } .work-link { font-size: 12px; border: 1px solid var(--border); border-radius: 9999px; padding: 4px 10px; color: var(--text-dim); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .work-link:hover { color: var(--accent); border-color: var(--accent); } .work-link.is-play, .work-link.is-store { color: var(--text); border-color: var(--accent); } .work-link.is-press { color: var(--accent-sub); border-color: var(--accent-sub); } /* 作品ページ */ .work-detail-cover { aspect-ratio: 16 / 6; } .work-detail-head { padding: 14px 16px 4px; position: relative; } .work-detail-head .work-status, .work-detail-head .work-kind, .work-detail-head .work-draft { position: static; display: inline-block; margin-right: 6px; } .work-detail-head h1 { font-size: 22px; margin: 8px 0 4px; overflow-wrap: anywhere; } .work-detail-links { padding: 8px 16px 4px; } .work-detail-links h2 { font-size: 14px; color: var(--text-dim); margin: 0 0 8px; } /* 詳細ページはリンク名を省略せず折り返す（プレスリリースの見出しは長い） */ .work-detail-links .work-link { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 6px 12px; white-space: normal; overflow: visible; overflow-wrap: anywhere; } .work-link-kind { color: var(--text-dim); font-size: 11px; white-space: nowrap; } .work-link-label { color: var(--text); } .work-detail-body { padding: 8px 16px 16px; } .work-detail-foot { padding: 0 16px 24px; font-size: 14px; } .work-cover-preview { width: 240px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); } /* 作品の管理（設定側） */ .work-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); } .work-row-cover { flex: 0 0 96px; height: 54px; border-radius: 8px; } /* ノートの管理ページ。最後の行が画面の底に貼り付かないよう下に余白を残す （一覧の末尾に何も無いと、まだ続きがあるのか終わりなのか分からない） */ .note-manage { padding-bottom: 40px; } /* 章の行。番号を独立した列にし、公開範囲のバッジはメタ行へ置く （タイトルの中に混ぜると、折り返したときに行間へ割り込んで崩れる） */ .chapter-row { align-items: center; } .chapter-row-no { flex: none; width: 34px; text-align: center; font-size: 18px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } .chapter-row .work-row-text h3 { display: block; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .chapter-row-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; color: var(--text-dim); font-size: 13px; } /* 一度決めたらほぼ触らない設定。畳んだ見出しだけを置く */ .note-settings { border-top: 1px solid var(--border); margin-top: 24px; } .note-settings > summary { padding: 14px 16px; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--text-dim); } .note-settings > summary:hover { color: var(--text); } .note-settings[open] > summary { color: var(--text); } /* 作るときは設定しか無い。畳む見出しはページ名と重なるだけなので出さない */ .note-settings.is-only { border-top: 0; margin-top: 0; } .note-settings.is-only > summary { display: none; } /* ノートのサムネ。作品と違って contain で全体を見せる（ノートのカバーはロゴを 置く人がいる。切り取ると何の絵か分からなくなるので、はみ出す分を切るのではなく 余白を付ける）。枠は行の上下ラインいっぱいに取り、その中で画像を最大化する ——54px 固定だと行の上端に貼り付いて、下に余白が残ったまま絵が小さくなる。 */ .note-row-cover { flex: 0 0 96px; align-self: stretch; min-height: 54px; /* 説明が 1 行の行でも潰れない */ border-radius: 8px; background-size: contain; background-repeat: no-repeat; } .work-row-text { flex: 1 1 200px; min-width: 0; } .work-row-text h3 { font-size: 15px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .work-row-text .work-status, .work-row-text .work-kind, .work-row-text .work-draft { position: static; } .work-row-text p { margin: 0; font-size: 13px; overflow-wrap: anywhere; } .work-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .work-row-actions .button-secondary { padding: 6px 14px; font-size: 13px; } @media (max-width: 480px) { /* 狭い画面では説明とボタンが同じ行を取り合って、どちらも読めなくなる。 ジャケット＋文章を上、操作を下の行へ落とす */ .work-row { flex-wrap: wrap; } .work-row-actions { width: 100%; justify-content: flex-end; } } .work-delete:hover { color: var(--danger); } .link-row { display: flex; gap: 8px; flex-wrap: wrap; } .link-row select { flex: 0 0 140px; } .link-row input[name="link_label"] { flex: 1 1 140px; min-width: 0; } .link-row input[name="link_url"] { flex: 2 1 220px; min-width: 0; } /* レスポンシブ（ui.spec §2.1）。 閾値は 3 ペインの合計（--content-w = 1190px）が収まらなくなる幅に置く */ @media (max-width: 1189px) { :root { --pane-left-w: 72px; } .pane-left { padding: 8px; align-items: center; } .pane-left .label { display: none; } .nav-item { padding: 12px; } .post-button { width: 48px; height: 48px; padding: 0; } /* 掲示板の左ペインは板名が本体なのでアイコン化しない（ui.spec §2.2） */ .pane-left.bbs { width: 200px; padding: 8px 10px; align-items: stretch; } .pane-left.bbs .label { display: inline; } /* 掲示板は中央が伸びるので画面いっぱいに使う */ body:has(.pane-center.wide) { --content-w: 100%; } /* リスト型左ペイン（.bbs）を持つ 3 ペインページ（ノート管理系）は、この幅だと 左 200px + 中央 600 + 右 350 が収まらない。右ペインを畳んで掲示板と同じ扱いにする */ body:has(.pane-left.bbs) { --content-w: 100%; } body:has(.pane-left.bbs) .pane-right { display: none; } body:has(.pane-left.bbs) .pane-center { max-width: none; } } @media (max-width: 1023px) { .pane-right { display: none; } /* 右ペインが消えた分は中央が吸収する（余りを残すと帯だけが外へはみ出す） */ :root, body:has(.pane-center.wide) { --content-w: 100%; } .pane-center { max-width: none; } /* 帯の項目を 1 行に収める（詰めないと右端のセクションが横スクロールに隠れる） */ .topband-inner { gap: 12px; padding: 0 16px; } .topband-nav a, .topband-nav .disabled { padding: 6px 9px; } } @media (max-width: 767px) { .shell { flex-direction: column; } .pane-left { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: auto; height: 56px; flex-direction: row; justify-content: space-around; align-items: center; background: var(--bg); border-top: 1px solid var(--border); padding: 0; z-index: 10; } .brand, .post-button { display: none; } .pane-center { max-width: 100%; border: none; padding-bottom: 64px; } /* 会話の字下げは狭幅では詰める（4 段で 88px 取ると本文が縦一列に潰れる） */ .post { --step: 12px; } /* 掲示板（2 ペイン）とリスト型左ペインのページには下タブが出ないので、その分の余白も要らない */ .pane-center.wide, body:has(.pane-left.bbs) .pane-center { padding-bottom: 16px; } /* 下タブ: 項目を等幅にし、通知バッジはアイコンに重ねる。 バッジを行内に置くと 1 枠ぶん幅を食って右端（オプション）が見切れる */ .pane-left .nav-item, .pane-left .nav-button { position: relative; flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 0; gap: 0; } .pane-left .nav-badge { position: absolute; top: 2px; left: 50%; margin-left: 2px; padding: 0 5px; font-size: 11px; line-height: 16px; } /* 縦並び用の margin-top: auto は下タブでは効かせない */ .logout-form { display: flex; flex: 1 1 0; min-width: 0; margin-top: 0; } /* 掲示板の左ペインは板リストなので下タブ化できない。 上部に貼り付く横スクロールの板バーにする（ui.spec §2.2 の板選択を保つ） */ .pane-left.bbs { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; border-top: none; border-bottom: 1px solid var(--border); } .pane-left.bbs::-webkit-scrollbar { display: none; } .pane-left.bbs .nav-item, .pane-left.bbs .bbs-board, .pane-left.bbs .bbs-cat { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; margin: 0; font-size: 14px; } /* カテゴリ見出しは横一列だと「選択中の板」に見えるので、地の色の小見出しに戻す */ .pane-left.bbs .bbs-cat { background: none; color: var(--text-dim); font-size: 12px; padding: 0 2px; } .pane-left.bbs .bbs-board { border: 1px solid var(--border); border-radius: 9999px; } .pane-left.bbs .bbs-board.active { background: var(--accent); color: var(--accent-text); } .pane-left.bbs .bbs-board.active .bbs-count { color: inherit; } /* ログアウトは板バーに混ぜない（オプションから辿れる） */ .pane-left.bbs .logout-form { display: none; } /* 帯: 狭幅では 1 行に収まらないので 2 段にする（ロゴ＋ラジオ / セクション）。 sticky を外して縦を content に返す代わり、ページ見出しが上端に貼り付く。 */ :root { --band-h: 0px; } .topband { position: static; height: auto; } .topband-inner { flex-wrap: wrap; align-items: center; height: auto; gap: 2px 10px; padding: 6px 12px; } .topband-logo { order: 0; font-size: 16px; } .topband-user { order: 1; margin-left: auto; } /* nav は flex-basis 100% で必ず 2 段目に落ちる（order でロゴ行より後ろへ） */ .topband-nav { order: 2; flex: 1 0 100%; } .topband-nav a { padding: 5px 10px; font-size: 13px; } /* 準備中の項目は押せないので、狭幅では実際に行ける導線に幅を譲る */ .topband-nav .disabled { display: none; } /* ランディング／ログイン: ボタンが 1 行に入らないので折り返す */ .landing { padding: 24px 16px; } .landing h1 { font-size: 30px; } .landing .hook { font-size: 18px; } .button-primary, .button-secondary { padding: 12px 20px; font-size: 15px; } /* 作品カードは 1 列（240px 固定だと横に溢れる端末がある） */ .works-grid { grid-template-columns: 1fr; } .work-row-actions { flex-wrap: wrap; justify-content: flex-end; } .link-row select, .link-row input { flex: 1 1 100%; } /* プロフィールのタブは折り返さず横スクロール */ .profile-tabs { overflow-x: auto; scrollbar-width: none; } .profile-tabs::-webkit-scrollbar { display: none; } .profile-tabs .tab { flex: 0 0 auto; padding: 12px 14px 9px; font-size: 14px; white-space: nowrap; } } /* ── お気に入りスレッド（sns.spec §4） */ .thread-fav { margin: 0 0 0 auto; } .fav-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; } .fav-toggle:hover { border-color: var(--accent-sub); color: var(--text); } .fav-toggle.on { border-color: var(--accent-sub); color: var(--accent-sub); } .fav-star { font-size: 16px; line-height: 1; } /* マイラボは各ブロックが自前で左右 16px のインセットを持つ（.my-section-title / .my-grid と同じ）。ここを 0 にすると枠だけが見出しより外に出てベタ付きになる */ .fav-threads { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 16px 24px; } .fav-thread { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; } .fav-thread:last-child { border-bottom: none; } .fav-thread:hover { background: var(--bg-panel); } /* 未読のあるスレは行ごと目立たせる（一覧を見る目的が未読の確認なので） */ .fav-thread.is-unread { box-shadow: inset 3px 0 0 var(--accent); } .fav-thread.is-unread .fav-thread-title { font-weight: 700; } .fav-thread-board { flex: 0 0 auto; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 13px; } .fav-thread-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fav-thread-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; } .fav-unread { background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; } @media (max-width: 767px) { /* 板名とタイトルを 2 段にする（1 行に詰めるとタイトルが潰れる） */ .fav-thread { flex-wrap: wrap; gap: 4px 10px; } .fav-thread-board { order: 1; } .fav-thread-meta { order: 2; margin-left: auto; } .fav-thread-title { order: 3; flex-basis: 100%; white-space: normal; } } /* ===== ノート（notes.spec）: 束（ノート）と章 ===== */ .note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 12px; } .note-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .note-card:hover { border-color: var(--accent); } /* カバーは 16:9 の枠に「切らずに」収める。ノートのカバーにはロゴを置く人がいて、 切り取ると何の絵か分からなくなる。収まらない分は余白にし、地は呼び出し側が パネル色で塗る（管理一覧のサムネと同じ方針） */ .note-cover, .note-detail-cover { background-color: hsl(var(--h, 210), 40%, 30%); background-image: linear-gradient(120deg, hsl(var(--h, 210), 45%, 28%), hsl(calc(var(--h, 210) + 60), 45%, 38%)); background-size: contain; background-repeat: no-repeat; background-position: center; aspect-ratio: 16 / 9; } .note-cover { display: block; position: relative; } /* 表紙のカバーは 16:9 のまま高さだけ抑える。ここが高いと、目次と「読む」ボタンが 1 画面目から押し出される（読み手がこのページに来る目的はそこ） */ .note-detail-cover { max-height: 240px; } .note-chapters { position: absolute; bottom: 8px; left: 8px; font-size: 12px; font-weight: 700; border-radius: 9999px; padding: 3px 10px; background: var(--bg-panel); border: 1px solid var(--border); } .note-card-body { padding: 10px 12px; } .note-title { margin: 0 0 4px; font-size: 16px; } .note-summary { color: var(--text-dim); font-size: 14px; margin: 0 0 6px; } .note-meta { color: var(--text-dim); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .note-draft { color: var(--text-dim); } .note-detail-head, .note-chapter-head { padding: 20px 16px 16px; } .note-detail-head h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.4; overflow-wrap: anywhere; } .note-lead { color: var(--text-dim); font-size: 15px; line-height: 1.8; margin: 0 0 14px; } .note-stat { color: var(--text-dim); font-size: 13px; margin: 12px 0 0; } .note-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; } /* 著者行。表示名とハンドルを 2 段に積み、アバターと合わせて 1 かたまりにする */ .note-author { display: inline-flex; align-items: center; gap: 10px; } .note-author .avatar { width: 40px; height: 40px; flex: none; } .note-author-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .note-author-name { font-weight: 700; font-size: 15px; } .note-author-handle { color: var(--text-dim); font-size: 13px; } .note-author:hover .note-author-name { text-decoration: underline; } /* 章ページの署名行。著者を左、操作を右に寄せる（別々の段に積むと本文が下がる） */ .note-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .note-byline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* 公開範囲のバッジ（作者だけに見える） */ .note-vis { font-size: 12px; border-radius: 9999px; padding: 2px 8px; border: 1px solid var(--border); color: var(--text-dim); } .note-vis.is-public { border-color: transparent; background: var(--accent); color: var(--accent-text); } .note-vis.is-members { border-color: transparent; background: var(--accent-sub); color: #1a0f00; } .note-toc { padding: 0 16px 16px; border-top: 1px solid var(--border); } .note-toc h2, .note-comments h2 { font-size: 16px; margin: 20px 0 4px; } .note-toc-list { list-style: none; margin: 0; padding: 0; } .note-toc-list li { border-bottom: 1px solid var(--border); } .note-toc-list li:last-child { border-bottom: 0; } /* 行ぜんぶが的。番号・タイトル・メタを縦に積む — 1 行に詰めると、長いタイトルが 折り返したときに右端のメタだけが 1 行目に取り残される */ .note-toc-row { display: block; padding: 14px 10px; margin: 0 -10px; border-radius: 10px; } .note-toc-row:hover { background: var(--bg-panel); } .note-toc-no { display: block; color: var(--text-dim); font-size: 12px; } .note-toc-title { display: block; font-weight: 700; font-size: 16px; line-height: 1.5; margin: 2px 0 4px; overflow-wrap: anywhere; } .note-toc-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; } /* 本文。読み物なので字を少し大きく、行間を広く取る */ .note-chapter-no { color: var(--text-dim); font-size: 13px; margin: 0; } .note-chapter-no a { color: var(--accent); } .note-chapter-head h1 { margin: 6px 0 0; font-size: 27px; line-height: 1.45; overflow-wrap: anywhere; } .note-body { padding: 8px 16px 32px; max-width: 680px; line-height: 1.95; font-size: 17px; } .note-body h1 { font-size: 22px; margin: 1.8em 0 0.6em; } .note-body h2 { font-size: 20px; margin: 1.8em 0 0.6em; border-left: 4px solid var(--accent); padding-left: 10px; } .note-body h3 { font-size: 17px; margin: 1.4em 0 0.5em; } .note-body p { margin: 0 0 1.4em; } .note-body img { max-width: 100%; height: auto; border-radius: 8px; } /* a の既定は color:inherit / 下線なし（サイト全体の UI 向け）。本文中では リンクだと分からなくなるので、読み物の中だけ元に戻す */ .note-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .note-body ul, .note-body ol { margin: 0 0 1.4em; padding-left: 1.6em; } .note-body li { margin: 0.2em 0; } .note-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; } .note-body blockquote { margin: 0 0 1.4em; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--text-dim); } /* 中の段落の下マージンがそのまま残ると、引用の最後に空行が 1 つ入って見える */ .note-body blockquote > :last-child { margin-bottom: 0; } .note-body code { background: var(--bg-panel); border-radius: 4px; padding: 1px 5px; font-size: 0.92em; } .note-body pre { background: var(--bg-panel); padding: 12px; border-radius: 8px; overflow-x: auto; } .note-body pre code { background: none; padding: 0; } .note-paywall { margin: 0 16px 20px; padding: 16px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; color: var(--text-dim); } /* 前後の章。字だけのリンクだと本文の続きに紛れるのでカードにする */ .note-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0 16px 12px; } .note-nav-card { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; } .note-nav-card:hover { border-color: var(--accent); } /* 右寄せは前後が並ぶときだけ。1 枚しか無い章（最初・最後）で右寄せにすると、 画面幅いっぱいのカードの右端に文字が張り付いて読みにくい */ .note-nav-card.is-next:not(:only-child) { text-align: right; } .note-nav-label { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 4px; } .note-nav-title { display: block; font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .note-nav-toc { padding: 0 16px 24px; margin: 0; font-size: 14px; } .note-nav-toc a { color: var(--accent); } .note-comments { padding: 0 16px 24px; } .note-comment { padding: 10px 0; border-bottom: 1px solid var(--border); } .note-comment.is-reply { padding-left: 20px; border-left: 2px solid var(--border); } .note-comment-head { display: flex; gap: 8px; align-items: center; font-size: 14px; } .note-comment-chapter { color: var(--text-dim); font-size: 13px; } .note-comment-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .note-comment-form textarea, .note-comment-reply input { width: 100%; } .note-comment-reply { display: flex; gap: 8px; margin-top: 6px; } .note-comment.is-spoiler .note-comment-body summary { cursor: pointer; color: var(--text-dim); } /* ポストに貼られたノートのカード（表示のたびに公開判定した結果。notes.spec §7.4） */ .note-post-card { display: block; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: inherit; padding: 10px 12px; } .note-post-card:hover { background: var(--bg-panel); } .note-post-card.is-gone { color: var(--text-dim); font-size: 14px; } .note-post-card.is-preview { margin: 0 0 12px; } .note-post-card-text { display: block; } .note-post-quote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--text); white-space: pre-wrap; } /* 選択範囲から引用ポストへ飛ぶバブル（notes.js が位置を決める） */ .quote-bubble { position: absolute; z-index: 40; background: var(--accent); color: var(--accent-text); border: none; border-radius: 9999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; } .chapter-form textarea { font-family: inherit; line-height: 1.7; } /* ---- 章の見たまま編集（note_editor.js）------------------------------------ 編集面には公開面と同じ .note-body を当てる。ここで見えている通りに公開される。 */ .rich-editor { margin-top: 8px; } .rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 12px 12px 0 0; background: var(--bg-panel); /* 長い本文を書いている間もツールバーを見失わない。貼り付く位置（top）は ページ見出しの実寸に合わせて note_editor.js が入れる — 見出しも sticky で 同じ位置に貼り付くため、素の var(--band-h) だと見出しの裏に潜って消える */ position: sticky; top: var(--band-h); z-index: 3; } .rich-btn { font: inherit; font-size: 13px; line-height: 1; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); cursor: pointer; } .rich-btn:hover { background: var(--border); } .rich-btn.on { background: var(--accent); color: var(--accent-text); } .rich-btn.is-bold { font-weight: 800; } .rich-btn.is-italic { font-style: italic; } .rich-btn.is-strike { text-decoration: line-through; } .rich-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; } .rich-surface { /* .note-body の padding（左右 16px）に合わせつつ、枠の中に収める */ min-height: 60vh; max-width: none; padding: 14px 16px 24px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; background: var(--bg); outline: none; } .rich-surface:focus { border-color: var(--accent); } /* 空のときの案内。contenteditable には placeholder が無いので自前で出す */ .rich-surface:empty::before, .rich-surface > p:only-child:has(> br:only-child)::before { content: "ここに本文を書きます。上のボタンで見出し・引用・リストにできます。"; color: var(--text-dim); } /* Markdown を直接編集している間は、見たまま用のボタンを効かない見た目にする */ .rich-editor.is-source .rich-btn:not([data-tool="source"]):not([data-tool="image"]) { opacity: 0.35; pointer-events: none; } .rich-editor.is-rich [data-rich-source] { margin-top: 10px; } .rich-editor [data-image-status]:empty { display: none; } @media (max-width: 700px) { .rich-surface { min-height: 50vh; } } /* ---- 右ペインのエディタ道具（章を書いている間だけ差し替わる）---- */ .editor-stats { display: flex; gap: 20px; margin: 0 0 8px; } .editor-stats div { display: flex; flex-direction: column; gap: 2px; } .editor-stats dt { color: var(--text-dim); font-size: 12px; } .editor-stats dd { margin: 0; font-size: 18px; font-weight: 700; } .editor-outline { list-style: none; margin: 0; padding: 0; } .editor-outline li { border-bottom: 1px solid var(--border); } .editor-outline li:last-child { border-bottom: 0; } .editor-outline li.is-minor { padding-left: 14px; } .editor-outline-link { font: inherit; font-size: 14px; text-align: left; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--text); cursor: pointer; /* 長い見出しでウィジェットを広げない */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-outline li.is-minor .editor-outline-link { color: var(--text-dim); } .editor-outline-link:hover { color: var(--accent); } .editor-keys { list-style: none; margin: 0; padding: 0; font-size: 14px; } .editor-keys li { display: flex; align-items: center; gap: 6px; padding: 5px 0; } .editor-keys span { color: var(--text-dim); margin-left: auto; } .editor-keys kbd { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; background: var(--bg); } @media (max-width: 767px) { .note-grid { grid-template-columns: 1fr; } .note-toc-list li { flex-direction: column; gap: 2px; } } /* 狭幅ではドロップダウンをやめて下からのシートにする（X のスマホ表示と同じ）。 ポストの位置に貼り付けると画面外へはみ出しやすく、指も届きにくい。 */ @media (max-width: 600px) { .menu-panel { position: fixed; inset: auto 0 0 0; min-width: 0; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; } .menu-item { padding: 14px 20px; } } /* ラジオ（radio.spec §6）— 黒帯右端のボタンと、そこから開くパネル。 パネルは .shell の外にあり、ページ遷移（nav.js の部分置換）で作り直されない。 */ .topband-user { display: flex; align-items: center; gap: 14px; } .topband-radio { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9999px; background: none; color: #e7e9ea; font-size: 14px; cursor: pointer; white-space: nowrap; } .topband-radio:hover { background: rgba(255, 255, 255, .12); } .topband-radio[aria-expanded="true"] { background: var(--accent); color: var(--accent-text); border-color: transparent; } .radio-panel { position: fixed; top: calc(var(--band-h) + 8px); right: 24px; z-index: 30; width: 320px; max-height: calc(100vh - var(--band-h) - 24px); overflow-y: auto; padding: 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } /* hidden 属性より display の指定が強いので、閉じている間を明示的に消す （局を選ぶまで再生欄とコントローラは出さない） */ .radio-now[hidden], .radio-controls[hidden], .radio-timetable-link[hidden] { display: none; } .radio-now { display: flex; gap: 12px; align-items: center; } .radio-now-cover { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; background: var(--bg) center / cover no-repeat; border: 1px solid var(--border); } .radio-now-text { min-width: 0; } .radio-now-station { font-size: 12px; color: var(--accent); font-weight: 700; } .radio-now-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .radio-now-artist { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .radio-controls { display: flex; align-items: center; gap: 8px; margin: 12px 0; } .radio-play { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--accent); color: var(--accent-text); cursor: pointer; } .radio-play:hover { background: var(--accent-hover); } /* 停止中は ▶、再生中は ⏸ を出す（同じボタンで切り替える） */ .radio-play .i:nth-child(2) { display: none; } .radio-play.is-playing .i:first-child { display: none; } .radio-play.is-playing .i:nth-child(2) { display: block; } /* 進捗は表示だけ（同期放送なのでシークできない）。押せそうに見せない */ .radio-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; } .radio-progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .4s linear; } .radio-volume-icon { color: var(--text-dim); display: flex; } .radio-volume { width: 72px; accent-color: var(--accent); } .radio-timetable-link { display: inline-block; font-size: 13px; margin-bottom: 12px; } .radio-stations { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .radio-station { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 6px; border: none; background: none; color: var(--text); text-align: left; cursor: pointer; border-radius: 10px; } .radio-station:hover { background: rgba(127, 127, 127, .12); } .radio-station.is-on { background: rgba(79, 195, 247, .14); } .radio-station-cover { width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px; background: var(--bg) center / cover no-repeat; border: 1px solid var(--border); } .radio-station-text { min-width: 0; display: flex; flex-direction: column; } .radio-station-name { font-weight: 700; font-size: 14px; } .radio-station-tagline { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .radio-empty { padding: 12px 6px; color: var(--text-dim); font-size: 13px; } /* ラジオのページ（局一覧・番組表） */ .radio-lead { color: var(--text-dim); padding: 12px 16px; } .radio-lead .i { vertical-align: -3px; } .radio-index { list-style: none; margin: 0; padding: 0; } .radio-index-link { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: inherit; } .radio-index-link:hover { background: rgba(127, 127, 127, .08); } .radio-index-cover { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; background: var(--bg-panel) center / cover no-repeat; border: 1px solid var(--border); } .radio-index-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .radio-index-name { font-weight: 700; font-size: 16px; } .radio-index-tagline { color: var(--accent); font-size: 13px; } .radio-index-desc { color: var(--text-dim); font-size: 13px; } .radio-board { padding: 8px 0 16px; } .radio-board h2 { padding: 8px 16px; font-size: 15px; color: var(--text-dim); } .radio-rows { list-style: none; margin: 0; padding: 0; } .radio-row { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .radio-row-time { color: var(--text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; } .radio-row-body { display: flex; flex-direction: column; min-width: 0; } .radio-row-artist { font-size: 13px; color: var(--text-dim); } .radio-row.is-now { background: rgba(79, 195, 247, .1); } .radio-row.is-now .radio-row-time { color: var(--accent); font-weight: 700; } .radio-row.is-past .radio-row-time { opacity: .6; } @media (max-width: 767px) { /* 狭幅では帯にラベルを出す余地がないのでアイコンだけにし、 パネルは画面幅いっぱいに寄せる */ .topband-radio-label { display: none; } .topband-radio { padding: 5px 8px; } .radio-panel { right: 8px; left: 8px; width: auto; } }