/* 並び：左にヘルパーの一覧（ナビ）、右にページ。ページは、見出しと説明の下で、左に引数の欄、右に出力の欄（ERB → HTML → プレビューとフォーム送信）を並べる */ :root { --bg: #f4f5f8; --surface: #ffffff; --sunken: #eceef3; --ink: #181b23; /* 引数や options の説明の文。ページの中身の大半なので、本文に近い濃さにする（白の背景で 10 : 1 くらい） */ --ink-soft: #3a3f4b; /* 補足の文字（サイト名の下のひと言、凡例、表の見出しなど） */ --muted: #5b6273; /* さらに薄い補足（引数の初めの値の注記など）。読みやすさの目安（4.5 : 1）を下回らない濃さにする */ --faint: #6e7585; --line: #dadde5; --line-strong: #b4b9c6; --accent: #a3173f; --accent-soft: #f7e6eb; --tok-tag: #a3173f; --tok-attr: #2f5d9e; --tok-str: #2c7a4b; --tok-sym: #8a4fb0; --add-bg: #d7f2df; --add-fg: #14592d; --chg-bg: #fde9b8; --chg-fg: #6f4b00; --del-bg: #fbe0e0; --del-fg: #a12a2a; /* Web フォントは使わず、パソコンに入っているフォントを使う。 英字は OS の画面の字（Mac は San Francisco、Windows は Segoe UI）、日本語は Mac はヒラギノ、Windows はメイリオ */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* コードは、Mac は Menlo、Windows は Consolas、Linux は DejaVu Sans Mono */ --font-code: Menlo, Consolas, "DejaVu Sans Mono", monospace; --radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #12141a; --surface: #1a1d25; --sunken: #22262f; --ink: #e7e9ef; --ink-soft: #c9cdd6; --muted: #a3a9b8; --faint: #808797; --line: #2e333e; --line-strong: #4a505d; --accent: #f0668c; --accent-soft: #3a1f29; --tok-tag: #f0668c; --tok-attr: #84aef0; --tok-str: #7fd19c; --tok-sym: #c99af0; --add-bg: #173d25; --add-fg: #9be8b4; --chg-bg: #4a3812; --chg-fg: #f7d68a; --del-bg: #4a1f22; --del-fg: #f2a3a3; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #12141a; --surface: #1a1d25; --sunken: #22262f; --ink: #e7e9ef; --ink-soft: #c9cdd6; --muted: #a3a9b8; --faint: #808797; --line: #2e333e; --line-strong: #4a505d; --accent: #f0668c; --accent-soft: #3a1f29; --tok-tag: #f0668c; --tok-attr: #84aef0; --tok-str: #7fd19c; --tok-sym: #c99af0; --add-bg: #173d25; --add-fg: #9be8b4; --chg-bg: #4a3812; --chg-fg: #f7d68a; --del-bg: #4a1f22; --del-fg: #f2a3a3; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; } code { font-family: var(--font-code); font-size: 0.92em; } button, input, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ナビは、いちばん長い名前（grouped_collection_select）が 1 行に収まる幅。それより長い名前は _ のうしろで折り返す */ .shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 100%; } /* ---------- 左：ヘルパーの一覧（ナビ） ---------- */ .nav { border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; } /* ナビは画面の高さの flex なので、中身がはみ出すと要素を縮めようとする。overflow: hidden の言語の切り替えは 0 まで縮んで消えるので、どれも縮めない（はみ出した分はスクロールする） */ .nav > * { flex-shrink: 0; } /* 縦に長いページでも一覧が見えるように、ナビを画面の高さに収めて左に残す（長ければナビの中でスクロールする） */ @media (min-width: 761px) { .nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; } .nav .nav-foot { padding-bottom: 16px; } } .brand { font-weight: 700; font-size: 17px; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; } .brand small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); } /* 言語の切り替えは、options の true/false（.seg）と同じ見た目にする */ .nav .langs { flex-direction: row; gap: 0; margin-top: -8px; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; } .nav .langs li + li { border-left: 1px solid var(--line-strong); } .nav .langs a { padding: 3px 12px; border-radius: 0; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: var(--surface); } .nav .langs a[aria-current="true"] { background: var(--ink); color: var(--surface); } .nav h2 { font-family: var(--font-code); font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; padding: 0 8px; } .nav section > ul { margin-left: 12px; padding-left: 6px; border-left: 1px solid var(--line); } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav li > a, .nav li > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-family: var(--font-code); font-size: 15px; text-decoration: none; color: var(--ink); } .nav li a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav li a:not([aria-current="page"]):hover { background: var(--sunken); } .nav li > span { color: var(--faint); } /* 一覧の小見出し（FormOptionsHelper の ）。リンクではないので、薄く小さくする */ .nav .nav-group { padding: 8px 8px 2px; font-family: var(--font-code); font-size: 13px; color: var(--muted); } .nav .nav-group:first-child { padding-top: 2px; } /* 一覧の最後の、ヘルパー同士の関係を見るページ（対応表） */ .nav .nav-map a { justify-content: flex-start; } /* 名前は、_ のうしろ（）で折り返す。flex の中で縮めるために min-width: 0 にする */ .nav .nav-name { min-width: 0; } .nav li > span em { font-style: normal; font-family: var(--font-ui); font-size: 12px; } /* 一覧のあとの「このサイトについて」 */ .nav .nav-foot { padding-top: 12px; border-top: 1px solid var(--line); } .nav .nav-foot a { font-family: var(--font-ui); } /* ---------- ページ ---------- */ .main { padding: 28px 28px 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; } .head { display: flex; flex-direction: column; gap: 8px; } .eyebrow { font-size: 14px; color: var(--muted); font-family: var(--font-code); } .head h1 { margin: 0; font-family: var(--font-code); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ref-link { font-size: 15px; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; } .ref-link:hover { opacity: 0.8; } .aliases { margin: -4px 0 0; font-size: 14px; color: var(--muted); } .aliases code { font-family: var(--font-code); font-size: 14.5px; color: var(--ink); } .signature { font-family: var(--font-code); font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; overflow-x: auto; white-space: nowrap; } .signature .kw { color: var(--tok-tag); } .summary-panel .summary { margin: 0; font-size: 16px; color: var(--ink); } .signature .p { color: var(--tok-attr); } .signature .d { color: var(--muted); } .work { display: grid; grid-template-columns: clamp(400px, 42%, 560px) minmax(0, 1fr); gap: 24px; align-items: start; } /* 引数の欄を出さないページ（csrf_meta_tags）は、出力の欄を横いっぱいにする */ .work.no-controls { grid-template-columns: minmax(0, 1fr); } /* ---------- 引数の欄 ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .controls { display: flex; flex-direction: column; } /* display: flex が hidden に勝たないようにする（引数の欄を出さないページ） */ .controls[hidden] { display: none; } .opt .name { font-family: var(--font-code); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; } .help { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; } .text { flex: 1 1 140px; min-width: 0; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 6px; padding: 5px 8px; font-family: var(--font-code); font-size: 15px; } .args { display: flex; flex-direction: column; } .arg { display: flex; flex-direction: column; gap: 8px; padding-block: 14px; } .arg:first-child { padding-top: 0; } .arg:last-child { padding-bottom: 0; } .arg + .arg { border-top: 1px dashed var(--line); } .arg-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-code); } .arg-include { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); align-self: center; } .arg-name { font-size: 16px; font-weight: 600; } .arg-default { font-size: 14px; color: var(--faint); } .arg-value { font-family: var(--font-code); font-size: 15px; color: var(--tok-sym); } /* 固定の引数は 1 行ずつ詰めて並べる */ .arg-fixed + .arg-fixed { border-top: none; padding-top: 0; } .arg > .text { flex: none; } .arg-hash { border-left: 2px solid var(--line); padding-left: 10px; display: flex; flex-direction: column; gap: 2px; } .arg-body { border-left: 2px solid var(--line); padding-left: 10px; display: flex; flex-direction: column; gap: 8px; } .arg-body > .seg { align-self: flex-start; max-width: 100%; } .arg-body > .text { flex: none; } /* 使わない間の入力欄は、押しても入力欄に届かないようにして、行を押したことにする（押すと「渡す」にチェックが付き、入力できるようになる） */ .text:disabled { opacity: 0.45; pointer-events: none; } /* 文字列と Symbol のどちらでも渡せる引数（button の value など）。種類の切り替えと文字列の欄を横に並べる */ .arg-kind { display: flex; gap: 8px; align-items: center; } .seg input:disabled + label { opacity: 0.45; cursor: default; } /* 渡さない引数の例（preset）と String / Symbol は、押せるが薄く見せる（押すと、その引数を渡すことになる） */ .arg-opt:not(:has(.arg-include:checked)) .blk, .arg-opt:not(:has(.arg-include:checked)) .arg-kind .seg, .arg-opt:not(:has(.arg-include:checked)) .arg-preset-code { opacity: 0.45; } /* 値が決まっている option の値。チェックを外している間は薄く見せる */ .opt-fixed { font-family: var(--font-code); font-size: 14px; padding: 2px 8px; background: var(--sunken); border-radius: 6px; overflow-wrap: anywhere; } .opt:not(:has(> input[type="checkbox"]:checked)) .opt-fixed { opacity: 0.45; } /* 例が 1 つだけの引数のコード（ラジオボタンを出さない） */ .arg-preset-code { font-size: 14px; padding: 6px 10px; background: var(--sunken); border-radius: 6px; align-self: flex-start; cursor: pointer; } select.text { font-family: var(--font-code); } .text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* 書き換えられることがわかるように、文字列の入力欄の右端に鉛筆のアイコンを出す */ input.text[type="text"] { padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; } .opt:hover { background: var(--bg); } /* 選んだ行は塗らずに左の線で示す（説明の中のコードの灰色と紛れないように） */ .opt:has(> input[type="checkbox"]:checked) { background: transparent; border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 6px 6px 0; } /* チェックで含める引数も、options の行と同じ見た目にする */ .arg-opt { padding: 14px 10px; margin-inline: -10px; border-radius: 6px; cursor: pointer; } .arg-opt:hover { background: var(--bg); } /* 選んだ引数は、入力と説明をまとめる左の線をえんじ色にする（線を 1 本にするため、options の行のような外側の線は付けない） */ .arg-opt:has(.arg-include:checked) > .arg-body { border-left-color: var(--accent); } .opt > input[type="checkbox"] { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); grid-row: span 3; } .opt .opt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; } .opt .opt-body { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* 別名の option は選べないので、チェックボックスの列を空けて名前と説明だけ並べる */ .opt-alias { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; } .opt-alias > * { grid-column: 2; } /* どのヘルパーでも同じ規則の options。閉じた状態では見出しだけ出す */ .opt-group > summary { padding: 8px 10px; border-radius: 6px; font-size: 15px; color: var(--muted); cursor: pointer; } .opt-group > summary:hover { background: var(--bg); } .opt-group[open] > summary { margin-bottom: 2px; } .opt-set { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .opt-scope { margin: 0; padding: 6px 10px; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--sunken); border-bottom: 1px solid var(--line); } .opt-set-body { display: flex; flex-direction: column; gap: 2px; padding: 4px; } .opt-group-note { padding: 0 10px; margin: 2px 0 4px; } .help ol, .help ul { margin: 4px 0 0; padding-left: 1.4em; } .help li + li { margin-top: 2px; } .ctx-code { margin-bottom: 12px; } /* &block の選択肢。ラジオボタンと、ブロックの中身のコード */ .blk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; } .blk:has(> input:checked) { background: transparent; border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 6px 6px 0; } .blk > input { margin: 3px 0 0; accent-color: var(--accent); } .blk > code, .blk > pre { margin: 0; font-family: var(--font-code); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .ctx-caption { font-family: var(--font-code); font-size: 13px; color: var(--faint); margin-bottom: 4px; } .opt-alias .name { font-family: var(--font-code); font-size: 15px; font-weight: 600; } .seg { position: relative; display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; } /* ラジオボタン本体は見えなくして、label をボタンの見た目にする（選んでいるかどうかは :checked で決まる） */ .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .seg label { background: var(--surface); padding: 3px 12px; font-family: var(--font-code); font-size: 14px; cursor: pointer; } .seg label:not(:first-of-type) { border-left: 1px solid var(--line-strong); } .seg input:checked + label { background: var(--ink); color: var(--surface); } .seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; } /* ---------- 出力の欄 ---------- */ .outputs { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* 2 列のときは、引数が長くても出力が見えるように、右の列を画面に残す（画面より高ければ列の中でスクロールし、列の端まで行けばページがスクロールする） */ @media (min-width: 1101px) { .outputs { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } } .out { min-width: 0; } .out-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .out-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .out-body { padding: 14px; } .code { font-family: var(--font-code); font-size: 14.5px; line-height: 1.75; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; } /* HTML の欄は、出力が長いとき（time_zone_select の 152 個の など）は、途中で切らない */ .overview-table td:last-child code { white-space: nowrap; } .overview-table { border-collapse: collapse; font-size: 15px; } .overview-table th, .overview-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .overview-table th { font-weight: 600; color: var(--muted); font-size: 14px; } /* 行のまとまりの見出し（「配列か Hash から作る」など）。表の幅いっぱいに通し、地の色で見分ける */ .overview-table .overview-group th { color: var(--ink); background: var(--sunken); } /* まとめのページは、表がいちばん広くなったとき（約 940px）に合わせた幅にする。ほかの段も、それより広げない。表は中身の幅に合わせる */ .about.overview { max-width: 1040px; } .overview-scroll + p { margin-top: 12px; } /* 「ページに載せていないもの」の目次。見出しへのリンクを横に並べる */ .about .toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 0; } .about .toc a { padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; color: var(--ink); text-decoration: none; } .about .toc a:hover { background: var(--sunken); } .about .toc code { background: none; padding: 0; } .about h3 { scroll-margin-top: 16px; } .about dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; line-height: 1.7; } .about dt { font-weight: 700; } .about dd { margin: 0; } .about code { font-family: var(--font-code); font-size: 0.9em; background: var(--sunken); padding: 0 4px; border-radius: 3px; overflow-wrap: anywhere; } @media (max-width: 760px) { .about section { padding: 16px; } .about dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .about dd + dt { margin-top: 8px; } } /* ---------- トップのページ（about と同じ枠を使う） ---------- */ /* ヘルパーの一覧は、名前を横に並べて折り返す（ナビと同じく、等幅の文字） */ .home h3 code { background: none; padding: 0; } .home h3:first-of-type { margin-top: 4px; } .about ul.home-helpers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .about .home-helpers li { margin: 0; } .home-helpers a { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-code); font-size: 15px; color: var(--ink); text-decoration: none; } .home-helpers a:hover { background: var(--sunken); } .home-helpers .home-map a { font-family: var(--font-ui); color: var(--accent); }