/* Editorial Desk ― このアプリだけの部品 * * biz-tools の CSS（tokens・tool-common・list-page・plan・interview・inside・mops・ui-b）は * そのまま読み、ここには「記事のための部品」だけを足す。 * 決まり（biz-tools の CLAUDE.md §3・§3.5） * ・固定色を書かない。tokens.css の変数だけ使う（図の見本の絵は画像なので例外） * ・パネルの角丸は var(--panel-r)、下の余白は 1.5rem * ・クラス名は ed- を付けて、biz-tools の名前とぶつけない * ui-b.css より前に読む（B type の差し替えを効かせるため）。 */ /* ---- バッジ（全画面で共通。デザイン.md §3「バッジ」、11/04 矢吹さん「全画面大きさは一緒、横幅一緒、文字はみ出さない」。11/05「札」とは呼ばない） ---- ・高さはどのバッジも同じ 20px。表の中でも大きくしない。表の中では列の中央に置く。 ・横幅はバッジの種類ごとにそろえる：いちばん長い言葉（状態・やること＝4字まで〔11/05 矢吹さん「4文字縛り」〕、ジャンル＝3字）＋ 最初の字の前と最後の字の後に 8px。形は丸（角の丸み 10px・字 11.5px 太字・高さ 20px。11/05 矢吹さん C で確定）。 ・文字は決して切らない（「…」にしない）。5字より長い言葉が来たときは、そのバッジだけ横に伸びる */ .ed-st{ display:inline-block; box-sizing:border-box; width:auto; min-width:var(--ed-st-w, calc(4em + 18px)); text-align:center; vertical-align:middle; font-size:var(--kit-fs-xs); font-weight:700; height:20px; line-height:18px; padding:0 8px; border-radius:10px; letter-spacing:0; border:1px solid var(--line-strong); color:var(--muted); background:var(--surface); white-space:nowrap; overflow:visible; text-overflow:clip; } .ed-st.c-teal { border-color:var(--cool-text); color:var(--cool-text); background:var(--cool-soft); } .ed-st.c-blue { border-color:var(--cool-text); color:var(--cool-text); background:var(--surface); } .ed-st.c-purple{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } /* 過去トラの「バグ」（記号の無いトラブル）：本当の紫。c-purple は色の名前と違って青（アクセント）で、記号の A1 などと見分けられなかった（11/08 矢吹さん「紫のバグ みえない」） */ .ed-st.c-bug { border-color:var(--kit-tone-purple); color:#fff; background:var(--kit-tone-purple); } /* 塗りの紫（記号のバッジは白地に線なので、ひと目で分かる） */ .ed-st.c-amber { border-color:var(--warn); color:var(--warn); background:var(--warn-soft); } .ed-st.c-green { border-color:var(--ok); color:var(--ok); background:var(--ok-soft); } .ed-st.c-red { border-color:var(--bad); color:var(--bad); background:var(--bad-soft); } /* バッジ（ジャンル）：6つとも同じ幅（いちばん長い「アニメ」3字＋前後8px。11/04 矢吹さん「サイズがそろっていない」） */ .ed-g{ display:inline-block; box-sizing:border-box; width:auto; min-width:var(--ed-g-w, calc(3em + 18px)); text-align:center; vertical-align:middle; font-size:var(--kit-fs-xs); font-weight:700; height:20px; line-height:18px; padding:0 8px; border-radius:10px; border:1px solid var(--line-strong); letter-spacing:0; color:var(--ink-2); background:var(--surface-2); white-space:nowrap; overflow:visible; text-overflow:clip; } /* ジャンルの色は ui-kit の共通の色（土台の合意 kit1 A3。フロント画面と同じ）。白は薄い地に濃い字 */ .ed-g.g-music{ border-color:var(--kit-g-music); color:var(--kit-g-music); background:var(--kit-g-music-soft); } .ed-g.g-movie{ border-color:var(--kit-g-movie); color:var(--kit-g-movie); background:var(--kit-g-movie-soft); } .ed-g.g-manga{ border-color:var(--kit-g-manga); color:var(--kit-g-manga); background:var(--kit-g-manga-soft); } .ed-g.g-book { border-color:var(--kit-g-book); color:var(--kit-g-book); background:var(--kit-g-book-soft); } .ed-g.g-anime{ border-color:var(--kit-g-anime); color:var(--kit-g-anime); background:var(--kit-g-anime-soft); } .ed-g.g-art { border-color:var(--kit-g-art); color:var(--kit-g-art); background:var(--kit-g-art-soft); } .ed-g.g-mix { border-color:var(--kit-g-mix); color:var(--kit-g-mix); background:var(--kit-g-mix-soft); } /* 黒い画面の札は縁取り：地は塗らず、字と縁を同じ色にする（11/05 矢吹さん「黒でもみやすいですか」。表現の決まり） */ html[data-theme="dark"] .ed-st, html[data-theme="dark"] .ed-g, html[data-theme="dark"] .iv-tag{ background:transparent; border-color:currentColor; } html[data-theme="dark"] .ed-st.c-bug{ background:var(--kit-tone-purple); border-color:var(--kit-tone-purple); color:var(--bg, #111); } /* 過去トラの「バグ」は暗い画面でも塗りの紫 */ /* 自分の番の印 */ .ed-mine{ display:inline-block; font-size:var(--kit-fs-xs); padding:0 6px; border-radius:3px; margin-left:6px; background:var(--accent); color:var(--on-accent); vertical-align:1px; white-space:nowrap; } .ed-warn{ color:var(--bad); font-weight:600; } .ed-sub{ color:var(--muted); font-size:var(--kit-fs-s); } .ed-num{ font-family:var(--f-num); font-variant-numeric:tabular-nums; } /* 11/07 速さ B：前に開いたときの一覧を先に出している間だけ、見出し（h1）の横に1行で出す。折り返さないので消えても高さは変わらない */ .ed-stale{ flex:0 1 auto; min-width:0; color:var(--kit-muted); font-size:var(--kit-fs-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ed-stale:empty{ display:none; } /* 右上の人のメニュー：見本の「この人として見る」は長いので、中だけ流す */ .ed-usermenu{ min-width:260px; } .ed-usermenu .ed-who{ max-height:260px; overflow-y:auto; } .ed-usermenu .dropdown-item.active{ background:var(--accent-soft); color:var(--accent-text); } /* 知らせ */ .ed-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:2000; background:var(--ink); color:var(--bg); padding:8px 18px; border-radius:20px; font-size:var(--kit-fs-s); opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; text-align:center; } .ed-toast.on{ opacity:1; } /* ---- 見本の帯（いちばん上） ---- */ .ed-demo{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:var(--kit-fs-s); color:var(--ink-2); background:var(--warn-soft); border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:var(--panel-r); padding:8px 12px; margin-bottom:1rem; } .ed-demo b{ color:var(--ink); } .ed-demo .sp{ flex:1; } /* ---- 本文の記法 ---- */ .ed-shelf{ color:var(--accent-text); text-decoration:none; border-bottom:1px dotted var(--accent-text); } .ed-hl{ background:var(--warn-soft); color:inherit; padding:0 2px; } /* ---- 図・イメージカット・表紙（左右の回り込み・小中大） ---- */ .ed-fig{ margin:4px 0 12px; position:relative; z-index:1; } .ed-fig .art svg, .ed-fig .art img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); } .ed-fig figcaption{ font-family:var(--f); font-size:var(--kit-fs-xs); color:var(--muted); margin-top:4px; line-height:1.5; } .ed-fig.pos-right{ float:right; margin-left:18px; } .ed-fig.pos-left { float:left; margin-right:18px; } .ed-fig.size-s{ width:min(26%, 170px); } .ed-fig.size-m{ width:min(34%, 220px); } .ed-fig.size-l{ width:min(50%, 340px); } /* フロント画面と同じ幅（11/04） */ .ed-fig.k-cover.size-s{ width:22%; } .ed-fig.k-cover.size-m{ width:30%; } .ed-fig.k-cover.size-l{ width:38%; } .ed-kind{ display:inline-block; font-size:var(--kit-fs-xs); padding:0 6px; border-radius:3px; border:1px solid var(--line-strong); color:var(--muted); margin-left:4px; } /* スマホ幅では回り込ませない（フロント画面の見え方と同じ） */ .ed-phone .ed-fig{ float:none; width:100% !important; margin:8px 0 14px; } .ed-phone .ed-fig.k-cover{ width:46% !important; } /* ---- 仕上がりの見え方（フロント画面の記事の字組み） ---- */ .ed-article{ font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-size:16px; line-height:2.05; color:var(--ink); } .ed-article::after{ content:""; display:block; clear:both; } .ed-article h1{ font-size:24px; font-weight:700; line-height:1.5; margin:0 0 .3em; font-family:inherit; } .ed-article .lead{ color:var(--ink-2); font-size:14px; margin-bottom:1.2em; } .ed-article h2{ font-size:19px; font-weight:700; margin:1.6em 0 .5em; padding-top:.4em; border-top:1px solid var(--line); font-family:inherit; clear:none; } .ed-article p{ margin:0 0 1em; } .ed-article ruby rt{ font-size:.5em; } .ed-article .notes{ clear:both; font-family:var(--f); font-size:12px; line-height:1.7; color:var(--ink-2); border-top:1px solid var(--line); margin-top:2em; padding-top:1em; } .ed-article .notes p{ margin:0 0 .4em; } .ed-device{ margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--panel-r); padding:28px 36px; max-width:760px; } .ed-device.ed-phone{ max-width:390px; padding:18px 16px; border-radius:22px; border-width:8px; border-color:var(--line-strong); } .ed-device.ed-phone .ed-article{ font-size:15px; } .ed-device.ed-phone .ed-article h1{ font-size:20px; } /* ---- 記事の詳細：上の帯と、審査の段の並び ---- */ /* 8段を1行、狭い画面は4段ずつ2行。行の頭の段には前からの線を出さない（折り返した行の線が左へはみ出すのを防ぐ） */ .ed-steps{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); row-gap:10px; margin:0; padding:0; list-style:none; } @media (max-width: 767.98px){ .ed-steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); } .ed-steps li:nth-child(4n+1)::after{ display:none; } } .ed-steps li{ min-width:0; overflow-wrap:anywhere; position:relative; text-align:center; font-size:var(--kit-fs-xs); color:var(--muted); padding:22px 2px 0; } .ed-steps li::before{ content:""; position:absolute; top:7px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); z-index:1; } .ed-steps li::after{ content:""; position:absolute; top:12px; left:-50%; right:50%; height:2px; background:var(--line-strong); } .ed-steps li:first-child::after{ display:none; } .ed-steps li.done{ color:var(--ink-2); } .ed-steps li.done::before{ background:var(--accent); border-color:var(--accent); } .ed-steps li.done::after, .ed-steps li.now::after{ background:var(--accent); } .ed-steps li.now{ color:var(--accent-text); font-weight:700; } .ed-steps li.now::before{ background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .ed-steps li .who{ display:block; font-weight:400; color:var(--muted); font-size:var(--kit-fs-xs); } .ed-acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .ed-lock{ display:inline-flex; gap:6px; align-items:center; font-size:var(--kit-fs-s); color:var(--warn); } /* 審査の記録（足すだけ） */ .ed-tl{ list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--line); } .ed-tl li{ position:relative; padding:0 0 14px 10px; } .ed-tl li::before{ content:""; position:absolute; left:-25px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); } .ed-tl li.a-pass::before, .ed-tl li.a-publish::before, .ed-tl li.a-submit::before, .ed-tl li.a-forward::before{ border-color:var(--accent); background:var(--accent); } .ed-tl li.a-reject::before{ border-color:var(--bad); background:var(--bad); } .ed-tl li.a-hold::before{ border-color:var(--warn); background:var(--warn); } .ed-tl .h{ font-size:var(--kit-fs-s); color:var(--muted); } .ed-tl .t{ font-size:var(--kit-fs-s); } /* 差分 */ /* ---- 編集画面 ---- */ .ed-editbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .ed-editbar .sp{ flex:1; } .ed-plan{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; } .ed-plan button{ border:0; background:var(--surface); padding:4px 12px; font-size:var(--kit-fs-s); color:var(--ink-2); } .ed-plan button+button{ border-left:1px solid var(--line); } .ed-plan button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); font-weight:600; } .ed-ed{ display:grid; grid-template-columns:200px minmax(0,1fr) 340px; gap:16px; align-items:start; } .ed-ed.b{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px; } @media (max-width:1399px){ .ed-ed{ grid-template-columns:minmax(0,1fr) 320px; } .ed-ed .ed-outline{ display:none; } .ed-ed.b{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .ed-ed.b .ed-side{ grid-column:1 / -1; } } @media (max-width:991px){ .ed-ed, .ed-ed.b{ grid-template-columns:minmax(0,1fr); } } .ed-outline{ position:sticky; top:86px; } .ed-outline a{ display:block; font-size:var(--kit-fs-s); color:var(--ink-2); padding:4px 8px; border-left:2px solid transparent; text-decoration:none; } .ed-outline a:hover{ color:var(--accent-text); border-left-color:var(--accent); } .ed-outline .sub{ font-size:var(--kit-fs-xs); color:var(--muted); padding:8px 8px 2px; } .ed-paper{ background:var(--surface); border:1px solid var(--line); border-radius:var(--panel-r); padding:24px 28px 40px; margin-bottom:1.5rem; } .ed-paper .ttl{ width:100%; border:0; outline:none; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:24px; font-weight:700; background:transparent; color:var(--ink); padding:0; } .ed-paper .ang{ width:100%; border:0; outline:none; resize:none; font-size:14px; color:var(--ink-2); background:transparent; padding:0; margin-top:6px; } .ed-paper[data-locked="1"] .ttl, .ed-paper[data-locked="1"] .ang{ pointer-events:none; } /* 案1：ブロック */ .ed-blocks{ margin-top:16px; } .ed-blocks::after{ content:""; display:block; clear:both; } .ed-blk{ position:relative; padding-left:30px; } .ed-blk .hdl{ position:absolute; left:0; top:6px; width:22px; height:22px; border-radius:4px; border:0; background:transparent; color:var(--muted); cursor:grab; opacity:0; font-size:14px; line-height:22px; padding:0; } .ed-blk:hover .hdl, .ed-blk:focus-within .hdl{ opacity:1; } .ed-blk .hdl:hover{ background:var(--surface-2); } .ed-blk .tx{ outline:none; border-radius:3px; padding:1px 4px; margin:0 -4px; white-space:pre-wrap; } .ed-blk .tx:focus{ background:var(--surface-2); } .ed-blk.t-p .tx{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:16px; line-height:2; margin-bottom:12px; } .ed-blk.t-h .tx{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:19px; font-weight:700; margin:18px 0 8px; padding-top:6px; } .ed-blk.t-fig{ z-index:2; } .ed-blk.t-fig.pos-right{ float:right; margin-left:18px; padding-left:0; } .ed-blk.t-fig.pos-left { float:left; margin-right:18px; } .ed-blk.t-fig.size-s{ width:30%; } .ed-blk.t-fig.size-m{ width:42%; } .ed-blk.t-fig.size-l{ width:56%; } .ed-blk.t-fig.k-cover.size-s{ width:22%; } .ed-blk.t-fig.k-cover.size-m{ width:30%; } .ed-blk.t-fig.k-cover.size-l{ width:38%; } .ed-blk.t-fig.pos-left{ padding-left:30px; } .ed-blk.t-fig .ed-fig{ float:none; width:100%; margin:0; } .ed-blk.t-fig.pos-right .hdl{ left:-26px; } .ed-blk.sel .ed-fig .art{ outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } .ed-blk.drop-before, #edLive .drop-before{ box-shadow:inset 0 3px 0 var(--accent); } .ed-blk.drop-after, #edLive .drop-after{ box-shadow:inset 0 -3px 0 var(--accent); } .ed-blk.dragging{ opacity:.4; } .ed-ftools{ display:none; flex-wrap:wrap; gap:4px; margin-top:6px; } .ed-blk.sel .ed-ftools, .ed-blk.t-fig:focus-within .ed-ftools{ display:flex; } .ed-ftools .btn{ padding:1px 7px; font-size:var(--kit-fs-xs); } .ed-ftools .btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .ed-ins{ height:10px; position:relative; } .ed-ins .plus{ position:absolute; left:2px; top:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--accent-text); font-size:var(--kit-fs-s); line-height:1; padding:0; opacity:0; z-index:3; } .ed-ins:hover .plus, .ed-ins .plus:focus{ opacity:1; } .ed-insmenu{ position:absolute; z-index:1060; min-width:220px; } /* 提案（審査役は本文を直せない。直したい所は提案として残す） */ .ed-sug{ background:var(--ok-soft); border-bottom:2px solid var(--ok); } .ed-cm{ background:var(--warn-soft); border-bottom:2px solid var(--warn); cursor:pointer; } /* 案2：原稿と見え方 */ .ed-src{ width:100%; min-height:640px; border:1px solid var(--line); border-radius:var(--panel-r); background:var(--surface); font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Hiragino Sans",monospace; font-size:var(--kit-fs-s); line-height:1.9; padding:16px; color:var(--ink); resize:vertical; } .ed-src[readonly]{ background:var(--surface-2); } .ed-live{ max-height:calc(100vh - 210px); overflow-y:auto; position:sticky; top:86px; } .ed-live .ed-fig{ cursor:pointer; } .ed-live .ed-fig.sel .art{ outline:3px solid var(--accent); outline-offset:2px; } .ed-live .ed-fig .ed-ftools{ display:none; } .ed-live .ed-fig.sel .ed-ftools{ display:flex; } /* 右の欄 */ .ed-side{ position:sticky; top:86px; } .ed-side .card-body{ max-height:calc(100vh - 230px); overflow-y:auto; } .ed-chk{ list-style:none; margin:0; padding:0; } .ed-chk li{ display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--kit-fs-s); } .ed-chk li:last-child{ border-bottom:0; } .ed-chk i{ font-size:var(--kit-fs-m); line-height:1.3; } .ed-chk .lv-ok i{ color:var(--ok); } .ed-chk .lv-warn i{ color:var(--warn); } .ed-chk .lv-bad i{ color:var(--bad); } .ed-chk .d{ display:block; color:var(--muted); font-size:var(--kit-fs-xs); } .ed-slot{ border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:10px; margin-bottom:10px; } .ed-slot h6{ font-size:var(--kit-fs-s); margin:0 0 6px; } .ed-pre{ white-space:pre-wrap; font-size:var(--kit-fs-xs); line-height:1.6; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; max-height:160px; overflow:auto; margin:6px 0; } .ed-typegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .ed-typegrid button{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:4px; font-size:var(--kit-fs-xs); color:var(--ink-2); text-align:center; } .ed-typegrid button svg{ display:block; width:100%; height:auto; border-radius:2px; margin-bottom:2px; } .ed-typegrid button:hover{ border-color:var(--accent); } .ed-cmt{ border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; margin-bottom:8px; font-size:var(--kit-fs-s); } .ed-cmt.done{ opacity:.55; } .ed-cmt .h{ font-size:var(--kit-fs-xs); color:var(--muted); display:flex; justify-content:space-between; gap:6px; } .ed-cmt q{ display:block; font-size:var(--kit-fs-xs); color:var(--ink-2); border-left:3px solid var(--warn); padding-left:6px; margin:4px 0; quotes:none; } /* ---- 体制図（案B：左から右へ、部ごとに1段。11/07 19:09 矢吹さん、UI/UX 担当の見本「3 体制図」） ---- 左に代表、右へ部の段。段の中は、下に役を持つ責任者ごとに1行（責任者 → 下の役を左から右へ）、下のない役はまとめて1行。 高さは部と責任者の数で決まり、人が増えても右に並ぶだけ。狭い幅では図の中だけ横にスクロールし、画面ははみ出さない */ .ob-scroll{ overflow-x:auto; padding-bottom:4px; } .ob-map{ display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:20px; min-width:820px; } .ob-root{ align-self:center; position:relative; } .ob-root::after{ content:""; position:absolute; left:100%; top:50%; width:20px; border-top:2px solid var(--line-strong); } .ob-lanes{ display:flex; flex-direction:column; gap:10px; border-left:2px solid var(--line-strong); padding:6px 0; } .ob-lane{ position:relative; margin-left:16px; border:1px solid var(--line); border-radius:var(--panel-r); background:var(--surface); min-width:0; } .ob-lane::before{ content:""; position:absolute; left:-18px; top:16px; width:16px; border-top:2px solid var(--line-strong); } .ob-lane.is-solo{ border-color:var(--warn); border-style:dashed; } .ob-head{ padding:4px 8px; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:var(--panel-r) var(--panel-r) 0 0; } .ob-body{ display:flex; flex-direction:column; gap:8px; padding:8px; min-width:0; } .ob-row{ display:flex; align-items:center; gap:12px; min-width:0; } .ob-row > .ob-nd{ flex:none; width:200px; } .ob-kids{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; } .ob-row > .ob-nd + .ob-kids{ border-left:2px solid var(--line); padding-left:12px; } .ob-sub{ display:flex; align-items:center; gap:6px; flex-basis:100%; min-width:0; } .ob-sub > .ob-kids{ flex:1; } .ob-more{ font:inherit; font-size:var(--kit-fs-s); color:var(--accent); background:none; border:0; padding:4px; cursor:pointer; text-decoration:underline; } .ob-arw{ width:12px; border-top:2px solid var(--line-strong); } .ob-nd{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; max-width:240px; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-top:3px solid var(--accent); border-radius:var(--panel-r); padding:5px 10px; cursor:pointer; } .ob-nd:hover{ background:var(--surface-2); } .ob-nd:focus-visible, .ob-grp:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .ob-nd .ob-n{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:700; font-size:var(--kit-fs-s); } .ob-nd small{ font-size:var(--kit-fs-xs); color:var(--muted); overflow-wrap:anywhere; } .ob-kids .ob-nd{ border-top-width:2px; padding:4px 8px; } .ob-kids .ob-nd .ob-n{ font-size:var(--kit-fs-s); } .ob-nd.is-top{ border-top-color:var(--warn); } .ob-nd.is-dept{ border:0; background:transparent; padding:2px 0; max-width:none; flex-direction:row; align-items:baseline; gap:10px; } .ob-nd.is-dept .ob-n{ font-size:var(--kit-fs-s); } .ob-nd.is-new{ border-style:dashed; border-top-style:solid; border-top-color:var(--muted); } .ob-grp{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--kit-fs-s); color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--panel-r); padding:4px 8px; cursor:pointer; } .ob-grp[aria-expanded="true"]{ border-color:var(--accent); } .ob-grp b{ font-weight:700; } .ob-cnt{ font-size:var(--kit-fs-xs); color:var(--muted); } .ob-gen{ display:inline-flex; flex-direction:column; min-width:96px; padding:4px 8px; border:1px solid var(--line); border-radius:var(--panel-r); background:var(--surface); font-size:var(--kit-fs-xs); color:var(--muted); } .ob-gen b{ font-size:var(--kit-fs-s); color:var(--ink); } .ob-cap{ font-size:var(--kit-fs-s); color:var(--muted); font-weight:700; } .ob-loose{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); } .ob-dh{ font-size:var(--kit-fs-s); margin:16px 0 6px; } .ob-gens{ display:flex; flex-wrap:wrap; gap:6px; } @media (pointer:coarse){ .ob-nd, .ob-grp{ min-height:32px; } } /* 体制図の一覧タブ：スマホの幅では役の番号（ORG-01 など）を出さず、役の名前に列の幅を使う（11/07 UI/UX 担当 NG1： 番号で「代表（k…」のように1〜2字しか見えなかった）。番号は行を押した右の引き出しの題の横に出る */ @media (max-width:599.98px){ #orgList .ktr-name .ktr-code{ display:none; } } /* 組織図の一覧の「列を足す」（11/08）。スマホ幅はカードの形で列が無いので出さない */ .ed-org-extra{ margin-bottom:8px; } @media (max-width:599.98px){ .ed-org-extra{ display:none; } } /* スマホの幅：代表を上に置き、部の段は図の中だけ横にスクロール */ @media (max-width:767.98px){ .ob-map{ grid-template-columns:minmax(0,1fr); row-gap:10px; min-width:640px; } .ob-root{ justify-self:start; } .ob-root::after{ display:none; } } /* 指で押す端末は 32px（UIチェック S-7） */ /* ---- ルール一覧 ---- */ .ed-md{ font-size:var(--kit-fs-m); line-height:1.85; } .ed-md h1{ font-size:var(--kit-fs-l); } .ed-md h2{ font-size:var(--kit-fs-l); margin-top:1.4em; } .ed-md h3{ font-size:var(--kit-fs-m); } .ed-md table{ width:100%; border-collapse:collapse; font-size:var(--kit-fs-s); margin:8px 0 14px; } .ed-md th, .ed-md td{ border:1px solid var(--line); padding:5px 8px; vertical-align:top; } .ed-md th{ background:var(--surface-2); } .ed-md code{ font-size:var(--kit-fs-s); } /* ---- ログイン ---- */ .ed-login{ max-width:420px; margin:9vh auto 0; } /* 帯のボタン（iv-btn）の色違い：差し戻すは赤、公開するは緑 */ .iv-btn.ed-danger{ color:var(--bad); border-color:var(--bad); } .iv-btn.ed-danger:hover{ background:var(--bad-soft); } .iv-btn.ed-ok{ background:var(--go-fill); border-color:var(--go-fill); color:#fff; } /* 右の欄のタブは折り返さない（幅が足りないときは横に流す） */ .ed-plan button{ white-space:nowrap; } .ed-ed.b{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 330px; } /* ガントの状態の色（mops の --c* と同じ並び） */ #mkt .bar.s-plan{ background:var(--muted); } #mkt .bar.s-patrol{ background:var(--c3); } #mkt .bar.s-write{ background:var(--c2); } #mkt .bar.s-r1, #mkt .bar.s-r2, #mkt .bar.s-r3{ background:var(--c1); } #mkt .bar.s-ready{ background:var(--c6); } #mkt .bar.s-pub{ background:var(--c4); } #mkt .bar.s-back{ background:var(--c5); } #mkt .bar.s-hold{ background:var(--line-strong); } #mkt .gl a.nm{ color:inherit; text-decoration:none; } #mkt .gl a.nm:hover{ color:var(--accent-text); text-decoration:underline; } /* 状態の色の小さな四角（凡例・絞り込み・積み上げの帯） */ .ed-sw{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; } .ed-sw.s-plan, .ed-sb.s-plan{ background:var(--muted); } .ed-sw.s-patrol, .ed-sb.s-patrol{ background:var(--c3); } .ed-sw.s-write, .ed-sb.s-write{ background:var(--c2); } .ed-sw.s-r1, .ed-sw.s-r2, .ed-sw.s-r3, .ed-sb.s-r1, .ed-sb.s-r2, .ed-sb.s-r3{ background:var(--c1); } .ed-sw.s-ready, .ed-sb.s-ready{ background:var(--c6); } .ed-sw.s-pub, .ed-sb.s-pub{ background:var(--c4); } .ed-sw.s-back, .ed-sb.s-back{ background:var(--c5); } .ed-sw.s-hold, .ed-sb.s-hold{ background:var(--line-strong); } #mkt .sbar i.ed-sb{ display:block; height:100%; } /* ---- ダッシュボード（2026-11-03 の直し） ---- */ /* ステータス状況：状態ごとの本数。押すと記事一覧へ */ .ed-stgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; } .ed-stbox{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r,6px); color:var(--ink); text-decoration:none; min-width:0; } .ed-stbox:hover{ border-color:var(--accent); box-shadow:var(--ed-sh-soft); color:var(--ink); } .ed-stbox:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .ed-stbox .v{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:600; font-size:var(--kit-fs-xl); line-height:1.1; } .ed-stbox .v u{ text-decoration:none; font-size:var(--kit-fs-s); font-weight:400; color:var(--muted); margin-left:3px; } .ed-stbox .who{ font-size:var(--kit-fs-xs); color:var(--muted); } .ed-stbox.zero .v{ color:var(--muted); } /* 審査と所要日数：数字を大きく、天地を詰める */ #mkt .tiles.ed-big .tile{ padding:8px 12px; min-height:0 !important; height:auto; } #mkt .tiles.ed-big .tile .lab{ margin-bottom:2px; } #mkt .tiles.ed-big .fr2{ margin-top:0; gap:24px; } #mkt .tiles.ed-big .fr2 .cn{ font-size:34px; line-height:1.05; } #mkt .tiles.ed-big .tile.mt>.fa{ margin-top:2px; padding-top:2px; font-size:var(--kit-fs-s); } #mkt .tiles.ed-big{ align-items:start; } /* 日時の記事推移 */ .ed-trend{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r,6px); padding:10px 12px; } .ed-trbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:6px; font-size:var(--kit-fs-s); color:var(--muted); } .ed-trrange{ display:inline-flex; align-items:center; gap:6px; max-width:100%; } .ed-trbody{ display:flex; gap:12px; align-items:flex-start; } .ed-trsvg{ flex:1; min-width:0; overflow-x:auto; } .ed-trsvg svg{ width:100%; min-width:560px; height:auto; display:block; } .ed-lgv{ display:flex; flex-direction:column; gap:3px; width:150px; flex:none; font-size:var(--kit-fs-xs); } .ed-lgv .lgb{ text-align:left; background:none; border:1px solid transparent; border-radius:4px; padding:3px 7px; cursor:pointer; color:var(--ink-2); } .ed-lgv .lgb:hover{ border-color:var(--line-strong); } .ed-lgv .lgb.off{ opacity:.38; } .ed-lgv .lgb i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; } .ed-lgv .ln{ color:var(--muted); font-size:var(--kit-fs-xs); margin-top:6px; line-height:1.5; } @media (max-width:760px){ .ed-trbody{ flex-direction:column; } .ed-lgv{ width:100%; flex-direction:row; flex-wrap:wrap; } } /* 円グラフ集計 */ .ed-pies{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; } .ed-pie{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r,6px); padding:10px 12px; min-width:0; } .ed-pie .h{ display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:6px; } .ed-pie h3{ font-size:var(--kit-fs-s); font-weight:600; margin:0; color:var(--ink); } .ed-pie .b{ display:flex; gap:10px; align-items:center; } .ed-pie svg{ width:120px; height:120px; flex:none; } .ed-pie ul{ list-style:none; margin:0; padding:0; font-size:var(--kit-fs-xs); flex:1; min-width:0; } .ed-pie li{ display:flex; align-items:center; gap:5px; padding:1px 0; } .ed-pie li i{ width:9px; height:9px; border-radius:2px; flex:none; } .ed-pie li .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); } .ed-pie li .n, .ed-pie li .p{ font-family:var(--font-data); font-variant-numeric:tabular-nums; } .ed-pie li .p{ color:var(--muted); width:3em; text-align:right; } #mkt .seg.sm button{ padding:2px 8px; font-size:var(--kit-fs-xs); } /* ---- 編集画面（案1 ブロック型）2026-11-03 の直し ---- * 中央の「机」の上に紙を置き、ここが編集する場所だと分かるようにする。左右（見出し・右の欄）は控えめに。 */ .ed-ehead{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:var(--panel-r); padding:10px 14px; margin-bottom:14px; } .ed-ehead .l{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; } .ed-ehead .who{ font-size:var(--kit-fs-s); color:var(--ink-2); } .ed-ehead .r{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .ed-ehead .dv{ width:1px; height:24px; background:var(--line-strong); margin:0 4px; } /* 承認・差し戻しの色（ふつうのボタンと分ける） */ .iv-btn.ed-go{ background:var(--go-fill); border-color:var(--go-fill); color:#fff; font-weight:600; } .iv-btn.ed-go:hover{ background:var(--go-fill-h); border-color:var(--go-fill-h); color:#fff; } .iv-btn.ed-ng{ background:var(--ng-fill); border-color:var(--ng-fill); color:#fff; font-weight:600; } .iv-btn.ed-ng:hover{ background:var(--ng-fill-h); border-color:var(--ng-fill-h); color:#fff; } .ed-ed{ grid-template-columns:180px minmax(0,1fr) 360px; gap:18px; } .ed-outline{ opacity:.85; } .ed-desk{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--panel-r); padding:0 0 18px; box-shadow:inset 0 0 0 3px var(--accent-soft); } .ed-desk.ro{ box-shadow:none; } .ed-desk-h{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; padding:10px 18px 4px; } .ed-desk-h .t{ font-weight:700; color:var(--accent-text); font-size:var(--kit-fs-s); } .ed-desk-h .hint{ font-size:var(--kit-fs-s); color:var(--muted); } .ed-desk-h.lock{ color:var(--warn); font-size:var(--kit-fs-s); padding-bottom:10px; } .ed-tb{ position:sticky; top:70px; z-index:5; display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:6px 18px 10px; padding:6px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--ed-sh-soft); } .ed-tb .lb{ font-size:var(--kit-fs-xs); color:var(--muted); margin-right:2px; } .ed-tb button{ border:1px solid transparent; background:transparent; border-radius:var(--r-sm); padding:4px 9px; font-size:var(--kit-fs-s); color:var(--ink); display:inline-flex; gap:5px; align-items:center; } .ed-tb button:hover:not(:disabled){ background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-soft); } .ed-tb button:disabled{ opacity:.4; cursor:not-allowed; } .ed-tb button i{ font-size:var(--kit-fs-m); } .ed-tb .sep{ width:1px; height:20px; background:var(--line); margin:0 4px; } .ed-tb .where{ margin-left:auto; font-size:var(--kit-fs-xs); color:var(--muted); } .ed-desk .ed-paper{ margin:0 18px; box-shadow:var(--ed-sh-paper); padding:28px 36px 44px; margin-bottom:0; } /* 直接書けると分かるように：なぞると点線、書いているところは色の枠 */ .ed-desk:not(.ro) .ed-blk .tx{ cursor:text; border:1px dashed transparent; } .ed-desk:not(.ro) .ed-blk:hover .tx{ border-color:var(--line-strong); } .ed-desk:not(.ro) .ed-blk .tx:focus{ background:var(--surface); border:1px solid var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .ed-blk .tx:empty::before{ content:attr(data-ph); color:var(--muted); } .ed-desk:not(.ro) .ed-paper .ttl:hover, .ed-desk:not(.ro) .ed-paper .ang:hover{ box-shadow:0 1px 0 var(--line-strong); } .ed-desk:not(.ro) .ed-paper .ttl:focus, .ed-desk:not(.ro) .ed-paper .ang:focus{ box-shadow:0 2px 0 var(--accent); } /* ＋ ここに足す */ .ed-ins .lbl{ position:absolute; left:28px; top:-7px; font-size:var(--kit-fs-xs); color:var(--accent-text); opacity:0; pointer-events:none; } .ed-ins:hover .lbl{ opacity:1; } /* 右の欄：タブを5等分にして、はみ出さない */ .ed-side .card{ background:var(--surface); } @media (max-width:1399px){ .ed-ed{ grid-template-columns:minmax(0,1fr) 340px; } } @media (max-width:991px){ .ed-ed{ grid-template-columns:minmax(0,1fr); } .ed-tb .where{ display:none; } } /* ---- 3回目の直し（11/03 PDF） ---- */ /* ステータス状況：状態の色の箱にして目立たせる */ .ed-stbox{ border-width:0; border-left:4px solid var(--line-strong); } .ed-stbox .nm{ font-size:var(--kit-fs-s); font-weight:600; } .ed-stbox.s-plan { background:var(--surface-2); border-left-color:var(--muted); } .ed-stbox.s-patrol{ background:var(--cool-soft); border-left-color:var(--cool-text); } .ed-stbox.s-patrol .nm{ color:var(--cool-text); } .ed-stbox.s-write { background:var(--cool-soft); border-left-color:var(--s2); } .ed-stbox.s-write .nm{ color:var(--s2); } .ed-stbox.s-r1, .ed-stbox.s-r2, .ed-stbox.s-r3{ background:var(--accent-soft); border-left-color:var(--accent); } .ed-stbox.s-r1 .nm, .ed-stbox.s-r2 .nm, .ed-stbox.s-r3 .nm{ color:var(--accent-text); } .ed-stbox.s-ready { background:var(--warn-soft); border-left-color:var(--warn); } .ed-stbox.s-ready .nm{ color:var(--warn); } .ed-stbox.s-pub { background:var(--ok-soft); border-left-color:var(--ok); } .ed-stbox.s-pub .nm{ color:var(--ok); } .ed-stbox.s-back { background:var(--bad-soft); border-left-color:var(--bad); } .ed-stbox.s-back .nm{ color:var(--bad); } .ed-stbox.zero{ opacity:.7; } .ed-stgrid{ grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); } /* 推移は低く（ブラウザ1画面に収める） */ .ed-trsvg svg{ max-height:200px; } .ed-lgv{ font-size:var(--kit-fs-xs); gap:1px; } .ed-lgv .lgb{ padding:1px 7px; } /* 円グラフ：4つとも同じ位置。凡例は名前だけ（数はカーソルで） */ .ed-pies{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1199px){ .ed-pies{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:575px){ .ed-pies{ grid-template-columns:minmax(0,1fr); } } .ed-pie .h{ min-height:26px; } .ed-pie .b{ align-items:flex-start; } .ed-pie ul{ display:grid; grid-template-columns:minmax(0,1fr); align-content:start; } .ed-pie li{ cursor:default; } /* ガントの上のカード：文字の下の空白をなくす */ #mkt .tiles.ed-tight{ align-items:start; } #mkt .tiles.ed-tight .tile{ min-height:0 !important; height:auto !important; padding-bottom:10px; } /* 並べ替えできる見出し */ th.ed-sth{ cursor:pointer; user-select:none; white-space:nowrap; } th.ed-sth i{ margin-left:3px; font-size:var(--kit-fs-s); opacity:.45; vertical-align:-1px; } th.ed-sth:hover i, th.ed-sth.on i{ opacity:1; color:var(--accent-text); } th.ed-sth.on{ color:var(--accent-text); } .ed-mats{ border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:10px 12px; background:var(--surface-2); } .ed-mats .h{ font-size:var(--kit-fs-s); font-weight:600; margin-bottom:6px; } /* ---- 編集画面 v3（11/03 PDF 3回目：CMS の書き方に寄せる） ---- */ .ed-ed.no-ol{ grid-template-columns:minmax(0,1fr) 360px; } @media (max-width:991px){ .ed-ed.no-ol{ grid-template-columns:minmax(0,1fr); } } .ed-otoggle{ border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); font-size:var(--kit-fs-s); padding:3px 10px; color:var(--ink); display:inline-flex; gap:4px; align-items:center; align-self:center; } .ed-otoggle:hover{ border-color:var(--accent); color:var(--accent-text); } .ed-oclose{ border:0; background:transparent; color:var(--muted); padding:0 2px; } .ed-oclose:hover{ color:var(--accent-text); } .ed-tb select.form-select{ width:auto; min-width:104px; font-size:var(--kit-fs-s); padding-top:3px; padding-bottom:3px; } .ed-tb button.f span{ font-size:var(--kit-fs-s); } .ed-head{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line); } .ed-fl{ display:flex; align-items:baseline; gap:8px; font-size:var(--kit-fs-xs); font-weight:600; color:var(--muted); margin:10px 0 3px; } .ed-fl:first-child{ margin-top:0; } .ed-fl .c{ margin-left:auto; font-weight:400; font-variant-numeric:tabular-nums; } .ed-fl .c.over{ color:var(--bad); font-weight:700; } .ed-paper .ed-head input.ttl{ font-size:24px; font-weight:700; } .ed-paper .ed-head input.sub2{ width:100%; border:1px solid transparent; border-radius:var(--r-sm); padding:4px 0; font-size:16px; color:var(--ink-2,var(--ink)); background:transparent; } .ed-paper .ed-head input.sub2:hover, .ed-paper .ed-head input.sub2:focus{ border-color:var(--line); outline:none; } .ed-paper .ed-head input.sub2:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .ed-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; } .ed-tags .ed-fl{ margin:0 4px 0 0; } .ed-tag{ display:inline-flex; align-items:center; gap:4px; background:var(--accent-soft); color:var(--accent-text); border-radius:999px; padding:2px 6px 2px 10px; font-size:var(--kit-fs-s); } .ed-tag button{ border:0; background:transparent; color:inherit; padding:0 2px; line-height:1; font-size:var(--kit-fs-s); } .ed-tags input{ border:1px dashed var(--line); border-radius:999px; padding:2px 10px; font-size:var(--kit-fs-s); background:transparent; color:var(--ink); } .ed-tags input:focus{ outline:none; border-color:var(--accent); border-style:solid; } .ed-blk.fs-s .tx{ font-size:.88em; } .ed-blk.fs-l .tx{ font-size:1.2em; } .ed-bub{ position:absolute; z-index:1080; display:flex; gap:2px; align-items:center; background:var(--ed-bub-bg); border-radius:8px; padding:4px; box-shadow:var(--ed-sh-pop); } .ed-bub button{ border:0; background:transparent; color:#fff; border-radius:6px; width:30px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--kit-fs-m); } .ed-bub button:hover{ background:var(--ed-bub-hover); } .ed-bub .sep{ width:1px; height:18px; background:var(--ed-bub-sep); margin:0 3px; } /* 右の欄のタブ：自前の等分のタブ（崩れの直し） */ .ed-stabs{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--line); } .ed-stabs button{ border:0; background:transparent; padding:10px 2px 9px; font-size:var(--kit-fs-s); color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; gap:4px; align-items:center; justify-content:center; white-space:nowrap; min-width:0; } .ed-stabs button:hover{ color:var(--ink); } .ed-stabs button[aria-selected="true"]{ color:var(--accent-text); border-bottom-color:var(--accent); font-weight:600; } .ed-stabs .n{ font-size:var(--kit-fs-xs); border-radius:999px; padding:0 6px; line-height:16px; } .ed-stabs .n.p{ background:var(--accent-soft); color:var(--accent-text); } .ed-stabs .n.w{ background:var(--warn-soft); color:var(--warn); } /* ---- ダッシュボード 4回目（11/03 23時：1画面に収める） ---- */ .ed-stbox{ padding:6px 10px; gap:1px; } .ed-stbox .v{ font-size:var(--kit-fs-xl); } #mkt .tiles.ed-big .tile{ padding:6px 12px; } #mkt .tiles.ed-big .fr2 .cn{ font-size:28px; } .ed-trbar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; } .ed-lgh{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-left:auto; font-size:var(--kit-fs-xs); } .ed-lgh .lgb{ background:none; border:1px solid transparent; border-radius:4px; padding:1px 6px; cursor:pointer; color:var(--ink-2); } .ed-lgh .lgb:hover{ border-color:var(--line-strong); } .ed-lgh .lgb.off{ opacity:.38; } .ed-lgh .lgb i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; } .ed-lgh .ln{ color:var(--muted); font-size:var(--kit-fs-xs); margin-left:8px; } .ed-trsvg svg{ width:100%; height:auto; max-height:170px; display:block; margin-top:4px; } .ed-pie{ padding:8px 12px; } .ed-pie .b{ align-items:center; } .ed-pie svg{ width:110px; height:110px; } .ed-pie ul.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; } .ed-pies{ align-items:stretch; } /* ---- ダッシュボード 5回目（11/03 23時の画像コメント） ---- */ /* ステータスの箱：前の白い箱に戻し、頭の縦線だけ色 */ .ed-stbox, .ed-stbox.s-plan, .ed-stbox.s-patrol, .ed-stbox.s-write, .ed-stbox.s-r1, .ed-stbox.s-r2, .ed-stbox.s-r3, .ed-stbox.s-ready, .ed-stbox.s-pub, .ed-stbox.s-back{ background:var(--surface); border:1px solid var(--line); border-left-width:4px; } .ed-stbox .nm, .ed-stbox.s-patrol .nm, .ed-stbox.s-write .nm, .ed-stbox.s-r1 .nm, .ed-stbox.s-r2 .nm, .ed-stbox.s-r3 .nm, .ed-stbox.s-ready .nm, .ed-stbox.s-pub .nm, .ed-stbox.s-back .nm{ color:var(--ink); } .ed-stbox{ padding:8px 12px; } .ed-stbox .v{ font-size:var(--kit-fs-xl); } /* 推移：天地を大きく */ .ed-trsvg svg{ max-height:300px; } /* 円グラフ：大きく、凡例は小さく円に寄せる */ .ed-pie .b{ justify-content:center; gap:14px; } .ed-pie svg{ width:150px; height:150px; } .ed-pie ul{ flex:0 1 auto; font-size:var(--kit-fs-xs); } .ed-pie li{ padding:0; line-height:1.55; } .ed-stbox.s-plan{ border-left-color:var(--muted); } .ed-stbox.s-patrol{ border-left-color:var(--cool-text); } .ed-stbox.s-write{ border-left-color:var(--s2); } .ed-stbox.s-r1, .ed-stbox.s-r2, .ed-stbox.s-r3{ border-left-color:var(--accent); } .ed-stbox.s-ready{ border-left-color:var(--warn); } .ed-stbox.s-pub{ border-left-color:var(--ok); } .ed-stbox.s-back{ border-left-color:var(--bad); } .ed-pie ul.c2{ grid-template-columns:minmax(0,1fr); } .ed-pie li .t{ overflow:visible; } /* 編集長が見ること：記事名は題の長さ（前16字 ― 後14字）に少し余白を足した幅で止め、種別・ステータスを左に寄せる */ table.ed-notice{ table-layout:fixed; width:100%; } table.ed-notice td:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ed-tip{ position:fixed; z-index:2000; display:none; pointer-events:none; background:#1f2430; color:#fff; font-size:var(--kit-fs-s); padding:5px 9px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.2); white-space:nowrap; font-variant-numeric:tabular-nums; } .ed-pie [data-tip]{ cursor:default; } .ed-pie path.hl, .ed-pie circle.hl{ opacity:.8; } .ed-pie li.hl .t{ color:var(--ink); font-weight:600; } /* 閉じられる枠（記事一覧の上の2つ） */ .dash-grid:has(.ed-fold){ align-items:start; } .ed-foldbtn{ border:0; background:none; padding:0; display:flex; align-items:center; gap:4px; width:100%; font:inherit; color:inherit; text-align:left; } .ed-foldbtn i{ font-size:var(--kit-fs-l); color:var(--muted); } .ed-foldbtn .st{ margin-left:auto; font-size:var(--kit-fs-xs); font-weight:400; color:var(--accent-text); } .ed-fold.shut > h3{ margin-bottom:0; } /* ---- ボタンの色（デザイン.md §4、矢吹さん 11/04） ---- 紫＝開く・編集する・登録する（主の操作）／緑＝承認（通す・出す・回す・公開する・テーマにする） 赤＝差し戻す・見送る・取り消す・削除／白地に線＝やめる・戻る・書き出す。 塗りは白い字が乗る濃さに固定（黒テーマの明るい緑・赤だと白い字が 2:1 しかなく読めなかった）。 */ /* 主の色の塗りに乗せる字は --on-accent（白では白、黒では濃い字。ui-kit の --kit-accent-ink）。黒の主の色は明るい青なので白い字では読めない */ .btn-primary{ --vz-btn-color:var(--on-accent); --vz-btn-bg:var(--accent); --vz-btn-border-color:var(--accent); --vz-btn-hover-color:var(--on-accent); --vz-btn-active-color:var(--on-accent); --vz-btn-hover-bg:var(--accent); --vz-btn-hover-border-color:var(--accent); --vz-btn-active-bg:var(--accent); --vz-btn-active-border-color:var(--accent); } /* 乗せたとき・押したときも主の色のまま、少し明るくするだけ（ui-kit の .pri と同じ）。前は Velzon の決まりが残り、紫（#403098）に変わっていた（TSK-0106、11/08 矢吹さん「マウスオーバーすると紫に」） */ .btn-primary:hover:not(:disabled), .btn-primary:active{ filter:brightness(1.06); } .btn-success{ --vz-btn-color:#fff; --vz-btn-bg:var(--go-fill); --vz-btn-border-color:var(--go-fill); --vz-btn-hover-color:#fff; --vz-btn-hover-bg:var(--go-fill-h); --vz-btn-hover-border-color:var(--go-fill-h); --vz-btn-active-color:#fff; --vz-btn-active-bg:var(--go-fill-h); --vz-btn-active-border-color:var(--go-fill-h); } .btn-danger{ --vz-btn-color:#fff; --vz-btn-bg:var(--ng-fill); --vz-btn-border-color:var(--ng-fill); --vz-btn-hover-color:#fff; --vz-btn-hover-bg:var(--ng-fill-h); --vz-btn-hover-border-color:var(--ng-fill-h); --vz-btn-active-color:#fff; --vz-btn-active-bg:var(--ng-fill-h); --vz-btn-active-border-color:var(--ng-fill-h); } /* 乗せた・押したときの字は主の色の塗りと同じ --on-accent（黒のテーマの明るい青に白い字は 2.3 で読めなかった。11/08 UI/UX 担当 #166 NG） */ .btn-outline-primary{ --vz-btn-color:var(--accent-text); --vz-btn-border-color:var(--accent-text); --vz-btn-bg:transparent; --vz-btn-hover-color:var(--on-accent); --vz-btn-hover-bg:var(--accent); --vz-btn-hover-border-color:var(--accent); --vz-btn-active-color:var(--on-accent); --vz-btn-active-bg:var(--accent); --vz-btn-active-border-color:var(--accent); } .btn-outline-danger{ --vz-btn-color:var(--bad); --vz-btn-border-color:var(--bad); --vz-btn-bg:transparent; --vz-btn-hover-color:#fff; --vz-btn-hover-bg:var(--ng-fill); --vz-btn-hover-border-color:var(--ng-fill); --vz-btn-active-color:#fff; --vz-btn-active-bg:var(--ng-fill); --vz-btn-active-border-color:var(--ng-fill); } /* 一覧の件名（想定テーマ）は1行。押すと中身を見る */ .iv-tbl a.ed-ttl1{ display:block; max-width:34em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; color:var(--ink); } .iv-tbl a.ed-ttl1:hover{ color:var(--accent-text); text-decoration:underline; } .btn-outline-success{ --vz-btn-color:var(--ok); --vz-btn-border-color:var(--ok); --vz-btn-bg:transparent; --vz-btn-hover-color:#fff; --vz-btn-hover-bg:var(--go-fill); --vz-btn-hover-border-color:var(--go-fill); --vz-btn-active-color:#fff; --vz-btn-active-bg:var(--go-fill); --vz-btn-active-border-color:var(--go-fill); } /* 帯の紫の線（主の操作が別にあるときの、2つ目の登録） */ .iv-btn.ed-line{ color:var(--accent-text); border-color:var(--accent-text); } .iv-btn.ed-line:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } /* B type（ui-b.css）はリンク（a）の字を青にするので、a で作ったボタンと件名まで青くなっていた（矢吹さん 11/04）。 ボタンの字はボタンの色の決まり（デザイン.md §4）に戻す。html[data-ui] を付けて ui-b.css より強くする */ html[data-ui][data-bs-theme] a.iv-btn{ color:var(--ink-2); } html[data-ui][data-bs-theme] a.iv-btn.pri, html[data-ui][data-bs-theme] a.iv-btn.pri:hover{ color:var(--on-accent); } html[data-ui][data-bs-theme] a.iv-btn.ed-go, html[data-ui][data-bs-theme] a.iv-btn.ed-go:hover, html[data-ui][data-bs-theme] a.iv-btn.ed-ng, html[data-ui][data-bs-theme] a.iv-btn.ed-ng:hover{ color:#fff; } html[data-ui][data-bs-theme] a.iv-btn.ed-line{ color:var(--accent-text); } html[data-ui][data-bs-theme] a.iv-btn.ed-line:hover{ color:var(--on-accent); } html[data-ui][data-bs-theme] a.iv-open{ color:var(--accent-text); } html[data-ui][data-bs-theme] a.iv-open:hover{ color:var(--on-accent); } html[data-ui][data-bs-theme] a.btn{ color:var(--vz-btn-color); } html[data-ui][data-bs-theme] a.btn:hover{ color:var(--vz-btn-hover-color); } html[data-ui][data-bs-theme] .iv-tbl a.ed-ttl1{ color:var(--ink); } html[data-ui][data-bs-theme] .iv-tbl a.ed-ttl1:hover{ color:var(--accent-text); } /* 編集長が見ること：IDは折らない・札は大きめ・列の間を広く（矢吹さん 11/04） */ #mkt table.ed-notice th, #mkt table.ed-notice td{ padding:8px 12px 8px 9px; white-space:nowrap; } #mkt table.ed-notice td:last-child{ white-space:normal; } /* 札はほかの画面と同じ大きさ・同じ幅（上の .ed-st のまま。11/04 矢吹さん「以前のように小さく」） */ /* 差し戻しが2回以上のときの「進め方を決める」欄 */ .ed-decide{ border-left:4px solid var(--bad); } .ed-decide .h{ font-weight:700; font-size:var(--kit-fs-m); margin-bottom:4px; color:var(--ink); } .ed-decide .h i{ color:var(--bad); margin-right:4px; } /* サムネ2枚の枠（ed-img.js、段5） */ .ed-thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:4px 0 12px; } .ed-thumb{ border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:10px; } .ed-thumb.drop{ border-color:var(--accent); background:var(--accent-soft); } .ed-thumb-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:var(--kit-fs-s); } .ed-thumb-box{ aspect-ratio:16/9; border-radius:var(--r-sm); background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--muted); font-size:var(--kit-fs-s); } .ed-thumb-box img{ width:100%; height:100%; object-fit:cover; display:block; } .ed-thumb-a{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; } /* 編集画面の「画像」のタブ（11/04、ED-0007 の差し戻しコメント）：依頼の項目は閉じ、図は1枚ずつのカード */ .ed-isec{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; margin-bottom:12px; } .ed-ihd{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:var(--kit-fs-s); } .ed-idet{ margin-top:8px; } .ed-idet > summary{ cursor:pointer; font-size:var(--kit-fs-s); color:var(--accent-text); } .ed-thumbs.sm{ grid-template-columns:1fr 1fr; gap:8px; margin:0; } .ed-thumbs.sm .ed-thumb{ padding:6px; } .ed-thumbs.sm .ed-thumb-h{ font-size:var(--kit-fs-xs); margin-bottom:4px; } .ed-thumbs.sm .ed-thumb-h .ed-sub, .ed-thumbs.sm .ed-thumb-h .ed-warn{ font-size:var(--kit-fs-xs); } .ed-thumbs.sm .ed-thumb-box{ font-size:var(--kit-fs-xs); text-align:center; } .ed-thumbs.sm .ed-thumb-a{ margin-top:6px; gap:4px; } .ed-thumbs.sm .ed-thumb-a .btn{ padding:2px 8px; font-size:var(--kit-fs-xs); } .ed-fcard{ border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:8px; margin-bottom:8px; cursor:pointer; } .ed-fcard.on{ border-style:solid; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .ed-fcard.drop{ border-color:var(--accent); background:var(--accent-soft); } .ed-fc-top{ display:flex; gap:8px; } .ed-fc-img{ flex:0 0 96px; aspect-ratio:16/9; border-radius:4px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--muted); font-size:var(--kit-fs-xs); text-align:center; line-height:1.3; } .ed-fc-img img{ width:100%; height:100%; object-fit:cover; } .ed-fc-tx{ min-width:0; flex:1; font-size:var(--kit-fs-s); } .ed-fc-cap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2, inherit); } .ed-fc-st{ display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; font-size:var(--kit-fs-xs); } .ed-fc-st span{ border-radius:999px; padding:0 7px; border:1px solid var(--line); color:var(--muted); } .ed-fc-st span.ok{ color:var(--ok); border-color:var(--ok); } .ed-fc-st span.ng{ color:var(--bad); border-color:var(--bad); } .ed-fc-a{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .ed-fc-a .btn{ padding:3px 9px; font-size:var(--kit-fs-s); } /* テーマ一覧：まとめて記事にする・見送るためのチェックの列（11/04） */ .iv-tbl th.ed-pk, .iv-tbl td.ed-pk{ width:40px; min-width:40px; max-width:40px; padding-right:4px; } /* ---- ガント：1日＝決まった幅（11/04 矢吹さん「日単位で表示、開始・公開予定の日にちを正確にプロット」） ---- 左の記事の欄は横に流しても残す（sticky）。目盛りの線は1日ごと、土日は見出しの色を変える */ #mkt .ed-gsc{ overflow-x:auto; overflow-y:visible; } #mkt .ed-gantt .gl{ position:sticky; left:0; z-index:3; background:var(--surface); } #mkt .ed-gantt .gt.day{ background-image:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--dw)); } #mkt .ed-gantt .today{ border-left:1.5px dashed var(--bad); background:color-mix(in srgb, var(--bad) 7%, transparent); } #mkt .ed-gantt .bar{ padding:0 4px; } #mkt .ed-gfold{ display:flex; align-items:center; gap:6px; background:none; border:0; padding:0; color:var(--ink); font-size:var(--kit-fs-s); cursor:pointer; min-width:0; } #mkt .ed-gfold .st{ font-size:var(--kit-fs-xs); color:var(--muted); margin-left:6px; } #mkt .ed-gfold:hover .st{ color:var(--accent-text); } #mkt .ed-gfold{ display:inline-flex; } #mkt .gl .ed-gcnt{ margin-left:2px; font-size:var(--kit-fs-s); color:var(--ink); font-family:var(--f-num); } /* 本数：数のあと少しあけて薄い単位 */ #mkt .gl .ed-gcnt u{ text-decoration:none; color:var(--muted); font-size:var(--kit-fs-xs); margin-left:3px; font-family:var(--f-body, inherit); } #mkt .ed-gnone{ padding:18px 14px; color:var(--muted); font-size:var(--kit-fs-s); position:sticky; left:0; } /* 記事一覧の上の2つのグラフ：高さをそろえ、どちらも説明の直後から描きはじめる（11/04 矢吹さん） */ .dash-grid.ed-pair:not(:has(.ed-fold.shut)){ align-items:stretch; } .dash-grid.ed-pair .ed-fold:not(.shut){ display:flex; flex-direction:column; } .dash-grid.ed-pair .ed-fold > .lead{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-grid.ed-pair .ed-fold .biz-diverge{ flex:1; justify-content:space-between; } /* 表の字は隣の列に重ねない（11/04 矢吹さん「文字が重なる」）。列の幅を決めた表（grid.js が table-layout:fixed にする）でも、 はみ出す分は「…」で切る。全文はなぞると出る（title） */ table[data-grid] > tbody > tr > td{ overflow:hidden; text-overflow:ellipsis; } table[data-grid] > tbody > tr > td .pl-ttl, table[data-grid] > tbody > tr > td .pl-ttl > a, table[data-grid] > tbody > tr > td .pl-ttl .sub{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } /* 札の入った欄は切らない（札の字が欠けないように。11/04 矢吹さん「文字が読めなくなっています」） */ table[data-grid] > tbody > tr > td:has(.ed-st), table[data-grid] > tbody > tr > td:has(.ed-g), table[data-grid] > tbody > tr > td:has(> .iv-tag:only-child), table[data-grid] > tbody > tr > td:has(.iv-btn), table[data-grid] > tbody > tr > td:has(.ed-gm){ overflow:visible; text-overflow:clip; } /* 左右の段の数がちがう（6と8）ので、左の棒は少し太くして、間が空きすぎないようにする */ .dash-grid.ed-pair .ed-fold .biz-divrow .h{ height:18px; } /* ガント 11/04 18時の直し：日の数字と曜日を読める大きさに・左の項目の幅を変える／閉じる・つかんで左右に動かす */ /* 閉じた列は中身を出さない */ #mkt .ed-gsc .gt.day{ cursor:grab; } #mkt .ed-gnav{ display:flex; align-items:center; gap:6px; margin:0 0 8px; flex-wrap:wrap; } #mkt .ed-gnav .iv-btn{ padding:3px 10px; font-size:var(--kit-fs-s); } /* 月の名前は、横に動かしても見えている月の左端に残る */ /* タグの札も高さはほかの札と同じ（幅は言葉の長さのまま） */ .iv-tag{ line-height:1.5; padding:0 7px; } /* 題の後ろの補足ラベル（「元あり」など）は、題と同じ行の末尾に置く。行の高さを変えない（11/04 矢吹さん・絶対ルール）。 題が長いときは題のほうを「…」で切り、ラベルは必ず全部見せる。ラベルの前（題の字のあと）は必ず 5px あける */ .ed-ttlrow{ display:flex; align-items:center; min-width:0; max-width:100%; } table[data-grid] > tbody > tr > td .ed-ttlrow > .pl-ttl{ display:block; flex:0 1 auto; min-width:0; } .ed-ttlrow > .ed-aux{ flex:0 0 auto; margin-left:5px; white-space:nowrap; } /* 表（grid）の行の高さは全部そろえる（11/04 矢吹さん・絶対ルール）。 行の中のボタンは「編集する」と同じ高さの小さい形にし、2段になる欄（題＋補足）は補足が空でも1行ぶん取る */ table[data-grid] > tbody > tr > td .iv-btn{ padding:2px 10px; line-height:1.6; font-size:var(--kit-fs-xs); vertical-align:middle; } table[data-grid] > tbody > tr > td .pl-ttl .sub{ line-height:17px; height:17px; } /* 体制図の「編集部ワークフロー図」タブ（11/04 矢吹さん）。中身は data/workflow-body.html（副編集長の workflow.html から写す）。 元の色の名前（--human・--go など）を Desk の色に当てて、字体・色は Desk のものにする */ .ed-flow{ --fg:var(--ink); --bg:var(--surface-2); --human:var(--cool-text); --human-soft:var(--cool-soft); --go:var(--ok); --go-soft:var(--ok-soft); --ng:var(--bad); --ng-soft:var(--bad-soft); --wait:var(--warn); --wait-soft:var(--warn-soft); display:flex; flex-direction:column; gap:28px; font-size:var(--kit-fs-m); line-height:1.75; color:var(--ink); } .ed-flow h2{ font-size:var(--kit-fs-l); font-weight:700; margin:0 0 4px; color:var(--ink); } .ed-flow .lede{ color:var(--muted); margin:0; max-width:80ch; } .ed-flow .note{ color:var(--muted); font-size:var(--kit-fs-s); margin:0 0 10px; max-width:80ch; } .ed-flow .legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--kit-fs-s); color:var(--muted); margin-top:10px; } .ed-flow .legend span{ display:inline-flex; align-items:center; gap:6px; } .ed-flow .dot{ width:11px; height:11px; border-radius:3px; display:inline-block; } .ed-flow .org{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; } .ed-flow .role{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:12px 14px; min-width:0; } .ed-flow .role.h{ border-color:var(--human); background:var(--human-soft); } .ed-flow .role b{ font-size:var(--kit-fs-m); } .ed-flow .role .who{ font-size:var(--kit-fs-xs); color:var(--muted); margin-left:6px; } .ed-flow .role ul{ margin:6px 0 0; padding-left:18px; font-size:var(--kit-fs-s); } .ed-flow .role .when{ display:inline-block; margin-top:8px; font-size:var(--kit-fs-xs); line-height:1.5; padding:0 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); } .ed-flow .scroll{ overflow-x:auto; padding-bottom:6px; } .ed-flow .lane{ display:flex; align-items:stretch; min-width:980px; } .ed-flow .st{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:9px 10px 11px; font-size:var(--kit-fs-s); display:flex; flex-direction:column; gap:3px; } .ed-flow .st .n{ font-weight:700; font-size:var(--kit-fs-s); } .ed-flow .st .by{ font-size:var(--kit-fs-xs); color:var(--muted); } .ed-flow .st.h{ background:var(--human-soft); border-color:var(--human); } .ed-flow .st.end{ background:var(--go-soft); border-color:var(--go); } .ed-flow .arrow{ flex:0 0 18px; display:flex; align-items:center; justify-content:center; color:var(--muted); } .ed-flow .routes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; } .ed-flow .route{ background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--go); border-radius:var(--r-sm,6px); padding:11px 13px; min-width:0; } .ed-flow .route.ng{ border-left-color:var(--ng); } .ed-flow .route.wait{ border-left-color:var(--wait); } .ed-flow .route.h{ border-left-color:var(--human); } .ed-flow .route b{ font-size:var(--kit-fs-m); } .ed-flow .path{ font-size:var(--kit-fs-s); margin:6px 0 4px; padding:5px 8px; background:var(--surface-2); border-radius:4px; overflow-wrap:anywhere; } .ed-flow .route p{ margin:4px 0 0; font-size:var(--kit-fs-s); color:var(--muted); } /* 補足ラベルは前の字のあと 5px（デザイン.md §3） */ .ed-flow .tag{ font-size:var(--kit-fs-xs); line-height:1.5; padding:0 5px; border-radius:999px; margin-left:5px; vertical-align:1px; white-space:nowrap; } .ed-flow .t-go{ background:var(--go-soft); color:var(--go); } .ed-flow .t-ng{ background:var(--ng-soft); color:var(--ng); } .ed-flow .t-wait{ background:var(--wait-soft); color:var(--wait); } .ed-flow .t-h{ background:var(--human-soft); color:var(--human); } .ed-flow .tbl{ overflow-x:auto; } .ed-flow table{ border-collapse:collapse; width:100%; font-size:var(--kit-fs-s); background:var(--surface); border:1px solid var(--line); } .ed-flow th, .ed-flow td{ padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .ed-flow th{ font-weight:600; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; } .ed-flow td.t{ font-family:var(--f-num); font-variant-numeric:tabular-nums; white-space:nowrap; } .ed-flow tr:last-child td{ border-bottom:0; } .ed-flow .foot{ font-size:var(--kit-fs-xs); color:var(--muted); margin:6px 0 0; } /* Gemini で作ったサムネの候補（記事の中身「サムネと画像」） */ .ed-cands{ border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:10px 12px; margin:6px 0 12px; background:var(--surface); } .ed-cands-h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-weight:600; font-size:var(--kit-fs-s); margin-bottom:6px; } .ed-cand{ padding:8px 0; border-top:1px solid var(--line); } .ed-cand-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:6px; font-size:var(--kit-fs-s); } .ed-cand-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; } .ed-cand-i{ margin:0; border:1px solid var(--line); border-radius:var(--r-sm,6px); overflow:hidden; background:var(--surface-2); } .ed-cand-i.on{ border-color:var(--ok); box-shadow:0 0 0 1px var(--ok); } .ed-cand-i img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; } .ed-cand-i figcaption{ display:flex; gap:6px; align-items:center; padding:6px; min-height:36px; } @media (pointer:coarse){ .ed-cands .btn{ min-height:32px; } } /* 候補の欄のボタン（Gemini で作る・作り直す・これにする・削除）も指で押す端末は 32px（T-S16 A、UI/UX 担当 11/06 #36 の NG） */ /* 一覧の表示件数とページ（ED.pager） */ .ed-pager{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 0 4px; } .ed-pager .sp{ flex:1 1 auto; } .ed-pager .iv-btn{ padding:3px 10px; min-width:32px; } .ed-pager .iv-btn.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; } .ed-pager .iv-btn:disabled{ opacity:.45; cursor:default; } /* 押せる数字のカード（記事一覧の「止まっている記事」） */ button.pl-kpi.ed-kpi-go{ text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; } button.pl-kpi.ed-kpi-go:hover:not(:disabled){ border-color:var(--accent); } button.pl-kpi.ed-kpi-go:disabled{ cursor:default; } button.pl-kpi.ed-kpi-go u{ text-decoration:none; color:var(--accent-text); } /* ガントの絞り込みの帯：見出しの無い部品（公開済みも出す・絞り込み解除・件数）も、下の段（選ぶ欄・状態の札）と同じ高さ・同じ下端にそろえる（11/04 矢吹さん「ボタンの位置がずれてる」） */ #mkt .row > .ed-flend{ align-self:flex-end; height:var(--ed-flh, 31px); display:inline-flex; align-items:center; box-sizing:border-box; margin:0; } #mkt .row > .pick.ed-flend{ padding-top:0; padding-bottom:0; } #mkt .stfilter .pick{ height:var(--ed-flh, 31px); box-sizing:border-box; } /* 記事の中身：ジャンルの「直す」（補足は文字のあと5px） */ .pl-meta .ed-gfix{ margin-left:5px; padding:0 8px; line-height:1.6; font-size:var(--kit-fs-xs); vertical-align:middle; white-space:nowrap; } .pl-meta .ed-gfix i{ margin-right:2px; } /* 候補を作ったモデル（見比べ用） */ .ed-cand-i figcaption:has(.ed-cmodel){ flex-wrap:wrap; } .ed-cand-i .ed-cmodel{ flex:0 0 100%; font-size:var(--kit-fs-xs); color:var(--ink-3, var(--muted)); margin-bottom:4px; } /* 「画像は手で作る」の印（記事の中身・記事一覧） */ .ed-gman{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:var(--kit-fs-s); cursor:pointer; white-space:nowrap; } .ed-gman .form-check-input, .ed-gm .form-check-input{ margin:0; } .ed-gm{ display:inline-flex; align-items:center; gap:5px; font-size:var(--kit-fs-s); line-height:16px; height:16px; vertical-align:middle; cursor:pointer; white-space:nowrap; } .ed-gm .form-check-input{ width:14px; height:14px; flex:0 0 14px; } /* ダッシュボード「編集長が見ること」の表示件数（表との間を空ける） */ #mkt .sec > .ed-pager{ margin-top:10px; } /* 表の真ん中寄せ（手動生成のチェック） */ table .ed-c, table th.ed-c{ text-align:center; } .ed-c > .ed-gm{ justify-content:center; } /* 公開待ちをまとめて公開（11/05） */ .ed-pubsel{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .ed-pubsel .iv-cnt{ margin-left:auto; } .ed-publist{ max-height:52vh; overflow:auto; border:1px solid var(--line); border-radius:8px; } .ed-pubrow{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--line); cursor:pointer; margin:0; } .ed-pubrow:last-child{ border-bottom:0; } .ed-pubrow .form-check-input{ margin:0; flex:none; } .ed-pubrow .t{ flex:1; min-width:0; } /* 体制図の「ノウハウ本」タブ（11/05 矢吹さん「管理画面から閲覧できるように」）。中身は data/knowhow-body.html（副編集長のノウハウ本.html から写す）。 本の色の変数（--nh-*）を管理画面の色に当てる。字体は管理画面のもの。上の固定の帯の下に飛び先が隠れないように余白を取る */ .ed-nh{ --nh-bg:var(--surface-2); --nh-panel:var(--surface); --nh-ink:var(--ink); --nh-ink2:var(--muted); --nh-line:var(--line); --nh-accent:var(--accent); --nh-accent-soft:var(--accent-soft); --nh-ok:var(--ok); --nh-ng:var(--bad); --nh-warn:var(--warn); --nh-pur:var(--cool-text); --nh-code:var(--surface-2); max-width:860px; font-size:var(--kit-fs-m); line-height:1.9; color:var(--ink); } .ed-nh, .ed-nh h1, .ed-nh h2, .ed-nh h3, .ed-nh h4{ font-family:inherit; } .ed-nh h1{ font-size:var(--kit-fs-l); line-height:1.5; margin:4px 0 10px; } .ed-nh [id]{ scroll-margin-top:140px; } /* ---- UIチェック.md 版1 の機械の検査で見つかったものの直し（11/05） ---- 影と、文字の上に出る黒い帯（.ed-bub）の色は、ここで名前を付けて使う（C-1：部品の中に色を直接書かない） */ :root{ --ed-sh-soft: 0 2px 8px rgba(0,0,0,.06); --ed-sh-paper: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); --ed-sh-pop: 0 6px 18px rgba(0,0,0,.25); --ed-bub-bg: #1f2430; --ed-bub-hover: rgba(255,255,255,.16); --ed-bub-sep: rgba(255,255,255,.25); } /* C-2：黒のときの左のメニューの字（#7c7f90 は地との差が 3.9:1 しかない） */ html[data-bs-theme="dark"] .navbar-menu .nav-link:not(.active){ color:var(--ink-2); } /* 決まりの .md の中の表は、狭い幅では箱の中で横に送る（O-1） */ .ed-reftw{ overflow-x:auto; max-width:100%; } /* 長い選択肢の欄は画面の幅を超えない（O-1） */ select.form-select.w-auto{ max-width:100%; } @media (max-width:575.98px){ /* S-6：iPhone は 16px より小さい入力欄にふれると勝手に拡大する */ input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:var(--kit-fs-l) !important; } /* S-7：指で押すボタンは高さ 32px 以上（表の行の中は小さいまま） */ .iv-btn, .btn{ min-height:32px; display:inline-flex; align-items:center; justify-content:center; } tbody tr .iv-btn, tbody tr .btn, .modal .btn, .dropdown-menu .btn{ min-height:0; } /* ジャンルの「直す」は小さい字のボタン。高さ 32px は上下の余白でとる（O-6 が2行と見ないように） */ .pl-meta .ed-gfix{ min-height:0; padding-top:6px; padding-bottom:6px; } } /* 列の幅のつまみは右に 3px はみ出す作り。いちばん右の列では内側に入れる（スマホでページが横にずれる、O-1） */ th:last-child > .gr-rz{ right:0; } /* biz-tools の写し（tool-common.css・plan.css）が主の色の塗りに白い字を決め打ちしている所。ui-kit の部品（2回目）に移すまでここで直す */ .biz-span .seg button[aria-pressed="true"], #mkt .seg button[aria-pressed="true"]{ color:var(--on-accent); } #mkt .fr2 .cn u{ margin-left:4px; } /* 数字の後ろの単位は少しあけて薄い字（11/05 数字の決まり） */ /* kit-grid（ui-kit の表）の帯の左に置く区分（国・状態など）。部品の select と同じ高さ */ .kg-before{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--kit-fs-s); color:var(--muted); max-width:100%; } .kg-before label{ margin:0; white-space:nowrap; } @media (max-width:639.98px){ .kg-before{ display:grid; grid-template-columns:auto 1fr; width:100%; } .kg-before select{ width:100%; min-width:0; } } .kg-before select{ height:30px; } @media (pointer:coarse){ .kg-before select{ height:32px; } } /* 指で押す端末は 32px（UIチェック S-7。11/07 UI/UX 担当の NG、記事一覧も同じ） */ .kg-foot .kg-sz, #mkt .kg-foot .kg-sz{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin:0; } /* ダッシュの #mkt の「表の字は左」より、部品の揃え（数字は右）を先にする。バッジは左（11/05 ui-kit 2d0f4d3 で中央をやめた） */ #mkt .kg-t .kg-n{ text-align:right; } /* 見出しの字はデザインテーマに従う（--kit-f-head。標準はふだんの字、11/05 ui-kit rules/デザイン.md §1） */ h1, h2, h3, .page-title-box h4, .dash-card h3{ font-family:var(--kit-f-head); } /* ---- 編集画面の案 A〜F（11/05 矢吹さん「A〜F 全部」、ui-kit の kit-figplace・kit-article-view） ---- */ /* B：本文はフロント画面と同じ幅と字で書く。PC＝本文の幅 720px、スマホ＝390px */ .ed-desk .ed-paper.ed-w-pc{ max-width:792px; margin-left:auto; margin-right:auto; } .ed-desk .ed-paper.ed-w-sp{ max-width:390px; padding:20px 16px 32px; margin-left:auto; margin-right:auto; } .ed-w-sp .ed-blocks.a-body{ font-size:.98rem; } .ed-paper.kit-av .ed-blk.t-p .tx{ font-family:inherit; font-size:inherit; line-height:inherit; margin-bottom:1.15em; } .ed-paper.kit-av .ed-blk.t-h .tx{ font-family:var(--kit-f-head); font-size:1.15rem; line-height:1.5; font-weight:700; margin:2.2em 0 .3em; padding:0 0 0 10px; border-left:4px solid var(--kit-accent); color:var(--kit-heading); } .ed-desk:not(.ro) .ed-paper.kit-av .ed-blk.t-h .tx:focus{ border-left:4px solid var(--kit-accent); } /* C：見出しの下に、節の字数の棒 */ .ed-hbar{ display:block; margin:0 0 .8em 14px; min-height:12px; } .ed-hbar:empty{ display:none; } /* 図の置き方の決まりに合わない図：図の下に赤で理由 */ .ed-fng{ clear:both; display:flex; gap:6px; align-items:flex-start; margin-top:6px; padding:4px 8px; border-radius:var(--kit-r-sm); background:var(--kit-bad-soft); color:var(--kit-bad); font-size:var(--kit-fs-s); font-weight:600; line-height:1.5; } .fig-ng figure, .ed-fig.fig-ng{ outline:2px solid var(--kit-bad); outline-offset:2px; } /* A：図をつかんでいる間は、すき間の印（kit-figplace）を出す */ .kfp-on .ed-ins{ height:auto; } .kfp-on .ed-ins .plus, .kfp-on .ed-ins .lbl{ display:none; } /* E：図を置けないすき間で「＋」を押したとき、品書きの下に理由 */ .ed-insng{ padding:4px 16px 6px; font-size:var(--kit-fs-s); line-height:1.5; color:var(--kit-bad); max-width:280px; } /* 画面の枠は kit-frame（11/05）。中身の下に最下部の文字 */ .ed-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:32px; padding-top:14px; border-top:1px solid var(--kit-line); font-size:var(--kit-fs-s); color:var(--kit-muted); } :root{ --kit-toast-top:64px; } /* 字の機械の検査（kit-thumbcheck）の結果。画像ごとに1段 */ .ed-tc{ display:grid; gap:10px; margin:10px 0 14px; } .ed-tc:empty{ display:none; } .ed-tch{ font-size:var(--kit-fs-m); margin:4px 0 0; } .ed-tcr{ display:grid; gap:6px; } .ed-tcrh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--kit-fs-s); } .ed-tcrh .btn{ margin-left:auto; } /* まとめて処理で済んだ行（ED.dimRow）。その場で薄くする */ #edRoot tr.ed-bdone{ opacity:.4; transition:opacity .4s; } /* ガントの絞り込みの見出し（札の組の名前。label と同じ小ささ） */ #mkt .field .ed-fl{ font-size:var(--kit-fs-xs); color:var(--muted); } /* カスタム項目の見る形（11/05 記事の「項目」）。2列の定義の並び。狭い幅は1列 */ .ed-props{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; margin:0 0 10px; } .ed-props > div{ min-width:0; } .ed-props dt{ font-size:var(--kit-fs-xs); font-weight:600; color:var(--muted); margin:0 0 2px; } .ed-props dd{ margin:0; font-size:var(--kit-fs-s); overflow-wrap:anywhere; } .ed-props .ed-ptext{ white-space:pre-wrap; } @media (max-width:639.98px){ .ed-props{ grid-template-columns:1fr; } } .ed-hist{ list-style:none; padding:0; margin:6px 0 0; font-size:var(--kit-fs-s); } .ed-hist li{ padding:4px 0; border-top:1px solid var(--line); } .ed-hist .d{ color:var(--muted); margin-right:6px; } .ed-pbtn{ margin-top:10px; } /* ユーザー管理の中のタブ（ユーザー・組織図） */ .ed-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kit-line); margin: 0 0 12px; } .ed-subtabs a { padding: 6px 12px; color: var(--kit-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 32px; display: inline-flex; align-items: center; } .ed-subtabs a[aria-current="page"] { color: var(--kit-ink); border-bottom-color: var(--kit-accent); font-weight: 700; } /* 組織図の役の中身の窓 */ .ed-org-dl { display: grid; grid-template-columns: 8em 1fr; gap: 6px 12px; margin: 0; } .ed-org-dl dt { color: var(--kit-muted); font-weight: 400; } .ed-org-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* 窓の中のリンクも押せる所は 32px 以上（S-7、11/06 画面の品質） */ .ed-org-dl a { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; } /* 役割の概要（TSK-0108）：窓のいちばん上。編集長は「編集する」で 400 字まで書ける（org-sum.js） */ .ed-org-sum { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--kit-line); } .ed-org-sum-h { display: flex; align-items: center; gap: 8px; } .ed-org-sum-h .ob-dh { margin: 0; flex: 1; } .ed-org-sum-t { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .ed-org-sum-none { color: var(--kit-muted); } .ed-org-sum-act .btn, .ed-org-sum-foot .btn { min-height: 32px; font-size: var(--kit-fs-m); } .ed-org-sum-in { margin-top: 6px; font-size: var(--kit-fs-m); } .ed-org-sum-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .ed-org-sum-n { flex: 1; color: var(--kit-muted); font-size: var(--kit-fs-s); } .ed-org-sum-err { margin: 6px 0 0; } /* ロール（roles.html）：スマホのカードでは「操作」と「押せる役」を折り返して全部出す（11/06 画面の品質 O-3） */ #rlGrid .kg-card .kg-cb b, #rlGrid .kg-card .kg-cs { white-space: normal; overflow: visible; text-overflow: clip; } /* 出典の割合で押せないボタン（T-M03）。包む要素がツールチップを受ける */ .ed-lockbtn{ display:inline-flex; } .ed-lockbtn .iv-btn:disabled{ opacity:.45; cursor:not-allowed; } .ed-lockbtn-note{ margin:-8px 0 14px; color:var(--bad); font-size:var(--kit-fs-s); line-height:1.6; } /* タスク・トラブルの種別のバッジ（一覧と業務設定）：状態のバッジ（縁取りの丸）と形で分ける。ベタ塗りの角丸（11/07 TK-001 矢吹さん A）。幅は「トラブル」に合わせてそろえる */ /* TSK-0104（11/07 19:15 矢吹さん「タスクとトラブルのバッジの幅が違う」）：前は min-width がちょうど「トラブル」4文字＋余白（62px）で、 字の幅が少しでも広い端末（Mac・iPad の字など）では「トラブル」だけが広がった。余裕を持たせた同じ幅にそろえ、字の間も 0 に */ .kt-ty{display:inline-block;box-sizing:border-box;min-width:calc(4.5em + 18px);letter-spacing:0;text-align:center;vertical-align:middle;font-size:var(--kit-fs-xs);font-weight:700;height:20px;line-height:20px;padding:0 8px;border-radius:4px;color:#fff;white-space:nowrap} .kt-ty.is-tr{background:var(--bad)} .kt-ty.is-tk{background:var(--cool-text)} html[data-theme="dark"] .kt-ty, html[data-bs-theme="dark"] .kt-ty{color:var(--bg, #111)} /* メニューの3段（11/07 矢吹さん：システム運用（0）＞ 体制運営など（1・開け閉め）＞ 画面（2））。 （0）の見出しは字を強く、（1）とその下の画面は1段字下げして、段の深さが見て分かるようにする。アイコンだけの細い帯（kf-mini）では字下げしない */ .kf:not(.kf-mini) .kf-items .kf-gbtn{ padding-left:30px; } .kf:not(.kf-mini) .kf-items .kf-gbtn ~ .kf-item{ padding-left:30px; } .kf:not(.kf-mini) .kf-items .kf-group:not(.kf-gbtn){ color:var(--kf-nav-ink, #fff); font-size:var(--kit-fs-s); letter-spacing:.02em; } /* 画面の説明（見出し A 案、11/07 18:30 矢吹さん「もう少し天地を狭めて」で決定、UI/UX 担当の寸法）。 見出し（.kit-ph の h1）は1回だけ。そのすぐ下に白いカードで説明を出す。左に主の色の細い線（部品一覧の説明カードと同じ考え方）。 出すのは IV.headline('', 説明, 右の枠)。右の枠（.rt）にはボタンや「前に開いたときの一覧です」を置ける。 */ .ed-pd{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; margin:0 0 12px; padding:6px 14px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:4px; font-size:var(--kit-fs-s); line-height:1.6; color:var(--ink); min-width:0; } .ed-pd .tx{ flex:1 1 320px; min-width:0; margin:0; overflow-wrap:anywhere; } .ed-pd .rt{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; flex:0 0 auto; } /* 業務設定の表（11/07 品質管理のバグ出し #4）：390 の幅で「審／査」「公開待／ち」のように字の途中で折れていた。 短い字の列は折らず、表が幅を超えるときは箱の中で横に送る（.ed-reftw）。長い説明の列（.fs-12）だけは折る */ .ed-ref-nw th, .ed-ref-nw td:not(.fs-12){ white-space:nowrap; } /* 長い説明の列は狭くしすぎない（12字ほど）。足りない分は箱の中で横に送る（UI/UX 担当 #84 NG1：ToDo が3〜4字の幅に押しこまれた） */ .ed-ref-nw td.fs-12{ min-width:12em; } /* 一覧の表の検索欄（11/07 品質管理のバグ出し #5）：スマホの幅では入力の字が 16px（S-6）になり、幅 220px では 「…タグで検索」のように字が切れていた。狭い幅では検索欄を1行いっぱいに広げる。ui-kit の kit-grid にも同じ直しを渡す */ @media (max-width:575.98px){ .kg-bar .kg-q{ flex:1 1 100%; width:auto; } } /* ワークフロー図のタブの「記事制作／運営」（11/07 TSK-0103 案A）。運営は7段なので、記事の9段より狭くてよい */ .ed-flow-pick{ margin:0 0 12px; } @media (pointer:coarse){ .ed-flow-pick button{ min-height:32px; } } .ed-flow .lane.lane-7{ min-width:860px; } .ed-flow td.nw{ white-space:nowrap; } .ed-flow-pick button{ white-space:nowrap; width:auto; padding:5px 14px; font-family:inherit; } .ed-flow table.ops-t{ min-width:760px; } /* 390 で列が2〜3字に縮まないよう、表は .tbl の中で横に送る */ /* 業務設定（11/07 作り直し、見本 1 業務設定 案A）：タブ → 表 → 右の引き出し */ .ws-body{ margin-top:12px; display:flex; flex-direction:column; gap:10px; min-width:0; } .ws-note{ color:var(--muted); font-size:var(--kit-fs-s); margin:0; max-width:90ch; } .ws-set{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm,6px); } .ws-set-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 14px; border-bottom:1px solid var(--line); } .ws-set-h .ws-sp{ flex:1; } .ws-sub{ color:var(--muted); font-size:var(--kit-fs-s); } .ws-set-b{ padding:12px 14px; } .ws-lead{ color:var(--muted); font-size:var(--kit-fs-s); margin:0 0 10px; } .ws-dz{ border-top:1px solid var(--line); margin-top:14px; padding-top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .ws-hint{ color:var(--muted); font-size:var(--kit-fs-s); margin:0; } .ws-foot{ display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); margin-top:14px; padding-top:12px; } .ws-fig{ border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:8px; margin-top:12px; background:var(--surface-2); } .ws-fig svg{ display:block; width:100%; height:auto; } /* 組織図（kit-tree）の状態のバッジも、ほかの状態のバッジと同じ幅に（11/07 21:44 矢吹さん「組織図、バッジの幅が違います」）。 部品の幅は 64px の決め打ちで、ちょうど4字＋余白だった。Mac のヒラギノの太字では4字が少し広く、「新しい案」「返事待ち」だけ広がった。 ed-core の pillWidths が開いた端末の字で測った --ed-st-w を使う。測れないときも4字に余裕のある幅にする */ .ktr-bd{ box-sizing:border-box; min-width:var(--ed-st-w, calc(4.8em + 18px)); letter-spacing:0; } /* ルール一覧 案B（11/07）：左に段の木、右に本文。上の段ほど強い。390 以下は木が上・本文が下 */ .rl-wrap{ margin-top:12px; } .rl-two{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; } .rl-side{ position:sticky; top:72px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 90px); } .rl-q{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm,6px); padding:0 10px; } .rl-q:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .rl-q i{ color:var(--muted); } .rl-q input{ flex:1; min-width:0; border:0; background:transparent; color:var(--ink); padding:8px 0; font-size:var(--kit-fs-s); outline:none; } .rl-tree{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:6px; overflow:auto; display:flex; flex-direction:column; gap:1px; } .rl-g{ font-size:var(--kit-fs-xs); letter-spacing:.06em; color:var(--muted); padding:10px 8px 4px; border-top:1px solid var(--line); margin-top:4px; } .rl-n{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent; color:var(--ink); border-radius:var(--r-sm,6px); padding:6px 8px; font-size:var(--kit-fs-s); min-height:36px; position:relative; } .rl-n:hover{ background:var(--surface-2); } .rl-n.on{ background:var(--accent-soft); color:var(--accent-text); font-weight:600; } .rl-n.dim{ opacity:.5; } .rl-n.rl-d1{ padding-left:22px; } .rl-n.rl-d2{ padding-left:38px; } .rl-n.rl-d1::before, .rl-n.rl-d2::before{ content:""; position:absolute; top:0; bottom:50%; width:8px; border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } .rl-n.rl-d1::before{ left:13px; } .rl-n.rl-d2::before{ left:29px; } .rl-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rl-n small{ color:var(--muted); font-size:var(--kit-fs-xs); white-space:nowrap; font-weight:400; } .rl-lv{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:var(--kit-fs-xs); font-weight:700; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface); } .rl-lv1{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .rl-lv2{ border-color:var(--accent); color:var(--accent-text); } .rl-lv3{ border-style:dashed; } .rl-foot{ font-size:var(--kit-fs-xs); color:var(--muted); margin:0; } .rl-doc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:16px 20px 24px; min-width:0; } .rl-dh{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; } .rl-dh h2{ font-size:var(--kit-fs-l); margin:0; } .rl-meta{ color:var(--muted); font-size:var(--kit-fs-s); } .rl-hits{ margin-left:auto; font-size:var(--kit-fs-s); color:var(--warn); font-weight:600; } .rl-what{ color:var(--ink-2); font-size:var(--kit-fs-s); margin:8px 0 0; max-width:75ch; } .rl-chips{ display:flex; gap:6px; overflow-x:auto; padding:10px 0 4px; margin:6px 0 4px; border-bottom:1px solid var(--line); scrollbar-width:thin; } .rl-chip{ flex:none; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:3px 12px; font-size:var(--kit-fs-s); white-space:nowrap; min-height:30px; } .rl-chip:hover{ border-color:var(--accent); color:var(--accent-text); } .rl-body{ max-width:80ch; overflow-wrap:anywhere; } .rl-title{ font-size:var(--kit-fs-m); font-weight:700; margin:12px 0 4px; } .rl-two > *, .rl-chips{ min-width:0; max-width:100%; } .rl-body h2{ scroll-margin-top:120px; padding-top:6px; border-top:1px dashed var(--line); } mark.rl-hit{ background:var(--warn-soft); color:inherit; padding:0 1px; border-radius:2px; box-shadow:inset 0 -2px 0 var(--warn); } mark.rl-hit.on{ outline:2px solid var(--warn); } @media (max-width: 991.98px){ .rl-two{ grid-template-columns:minmax(0,1fr); } .rl-side{ position:static; max-height:none; } .rl-tree{ max-height:300px; } .rl-doc{ padding:14px; } } /* ルール一覧の字を大きく、本文を広く（11/07 23:13 矢吹さん「文字が小さすぎて読めません、もう少し幅を広げたページに」） 本文 13.5px → 16px、章 15px → 20px。本文の幅は 80ch（約 680px）の上限をやめ、1行が長くなりすぎない 64em（約 1020px）まで。 左の木は 300px → 260px にして、本文に幅を回す */ .rl-two{ grid-template-columns:260px minmax(0,1fr); gap:20px; } .rl-q input{ font-size:var(--kit-fs-m); padding:9px 0; } .rl-n{ font-size:var(--kit-fs-m); min-height:40px; } .rl-n small{ font-size:var(--kit-fs-s); } .rl-g{ font-size:var(--kit-fs-s); } .rl-foot{ font-size:var(--kit-fs-s); line-height:1.7; } .rl-doc{ padding:22px 32px 36px; } .rl-dh h2{ font-size:24px; font-weight:700; } .rl-meta{ font-size:var(--kit-fs-m); } .rl-hits{ font-size:var(--kit-fs-m); } .rl-what{ font-size:var(--kit-fs-l); max-width:64em; line-height:1.8; } .rl-chip{ font-size:var(--kit-fs-m); padding:5px 14px; min-height:34px; } .rl-body.ed-md{ max-width:64em; font-size:var(--kit-fs-l); line-height:1.9; } .rl-body p, .rl-body li{ font-size:inherit; } .rl-body .rl-title{ font-size:var(--kit-fs-l); margin:16px 0 8px; } .rl-body h2{ font-size:var(--kit-fs-l); font-weight:700; margin-top:1.8em; padding-top:14px; } .rl-body h3{ font-size:var(--kit-fs-l); font-weight:700; margin-top:1.4em; } .rl-body table{ font-size:var(--kit-fs-m); } .rl-body th, .rl-body td{ padding:7px 10px; } .rl-body code{ font-size:var(--kit-fs-m); } @media (max-width: 991.98px){ .rl-two{ grid-template-columns:minmax(0,1fr); } .rl-doc{ padding:16px; } .rl-dh h2{ font-size:var(--kit-fs-l); } } /* 押せない欄（ダークで押せる欄と見分けにくい。11/07 UI/UX 担当の案） */ .modal .form-control:disabled, .modal .form-select:disabled{ background:var(--surface-2); color:var(--muted); opacity:.75; cursor:not-allowed; } /* 前回の画面の写し（11/07 速さ A）：本物が描けるまで写しを出し、本物は裏で描く（幅を測る部品があるので、見えないだけで同じ幅で描く） */ #edRoot.ed-hid{ position:absolute !important; left:0; right:0; top:0; visibility:hidden; pointer-events:none; } .ed-snap{ pointer-events:none; } /* 直しの提案のまとめ採用（suggest.html）：採用する前の窓で、記事ごとの直しを全部見せる。長いので窓の中で送る（11/08） */ .ed-sgall { max-height: 50vh; overflow: auto; border: 1px solid var(--kit-line); border-radius: 6px; padding: 8px 12px; } .ed-sgall details + details { border-top: 1px solid var(--kit-line); padding-top: 6px; margin-top: 6px; } .ed-sgall summary { cursor: pointer; min-height: 32px; display: list-item; } .ed-sgall li { overflow-wrap: anywhere; } /* 注意の帯（止めてはいないが「先にこちらを」と知らせる1行。赤はエラーの色なので使わない。11/08 UI/UX 担当 #199） */ .ed-note-warn { color: var(--kit-warn-ink); background: var(--kit-warn-soft); border-left: 3px solid var(--kit-warn); border-radius: var(--kit-r-sm, 4px); padding: 6px 10px; } .ed-note-warn a { color: inherit; text-decoration: underline; } /* 提案のまとめ採用：カード（スマホ）では、もとの文と直した文を2行に分ける（11/08 UI/UX NG3） */ .kg-cs .ed-sgc { display: block; white-space: normal; } .kg-cs .ed-sgc del, .kg-cs .ed-sgc ins { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-cs .ed-sgc-a { display: none; } .kg-cs .ed-sgc ins::before { content: "→ "; }