/* =========================================================================== デザイントークン 色はすべてここで定義し、ダークモードは値の差し替えだけで切り替える。 =========================================================================== */ :root { color-scheme: light; /* チームカラー（紺と金）。明暗どちらでも使う。 色の濃さは段ごとに決まっていて、変わるのは色相（--team-hue）だけ。 チーム設定で色を選ぶと、この1つの数字が入れ替わって全体の色が変わる。 金色（--gold）はメダルにも使うため、色相を変えても固定のまま。 */ --team-hue: 213; --navy-900: hsl(var(--team-hue) 61% 10%); --navy-800: hsl(var(--team-hue) 58% 14%); --navy-700: hsl(var(--team-hue) 56% 20%); --navy-600: hsl(var(--team-hue) 56% 26%); --navy-500: hsl(var(--team-hue) 53% 35%); --navy-400: hsl(var(--team-hue) 39% 47%); --navy-300: hsl(var(--team-hue) 37% 63%); --gold: #c2a15c; --gold-soft: #e8dcc2; --gold-deep: #8a6d23; /* 面と文字 */ --bg: #eef1f6; --bg-tint: #e4e9f2; --surface: #ffffff; --surface-2: #f7f9fc; --surface-sunken: #f1f4f9; --line: #e2e7ef; --line-soft: #eef1f6; --text: #14233a; --text-strong: #0a1729; --muted: #6b7889; --faint: #a8b3c2; /* アクセントの背景（タグやバッジ用） */ --accent-soft: hsl(var(--team-hue) 45% 94%); --gold-bg: #f6ecd6; --danger: #b3402c; --danger-bg: #fdf3f2; --danger-line: #e7c3bd; /* 影は2枚重ねて、近い影と遠い影で奥行きを出す */ --shadow-1: 0 1px 2px rgba(10, 23, 41, 0.04), 0 1px 3px rgba(10, 23, 41, 0.05); --shadow-2: 0 2px 4px rgba(10, 23, 41, 0.04), 0 10px 26px rgba(10, 23, 41, 0.07); --shadow-hover: 0 4px 8px rgba(10, 23, 41, 0.06), 0 16px 36px rgba(10, 23, 41, 0.1); --ring: 0 0 0 3px rgba(42, 86, 135, 0.18); --radius-lg: 18px; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --ease: cubic-bezier(0.2, 0.8, 0.3, 1); } /* OSがダークのとき（テーマ「自動」） */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #0b1220; --bg-tint: #0f1829; --surface: #131c2c; --surface-2: #182234; --surface-sunken: #0f1727; --line: #263349; --line-soft: #1d2839; --text: #e6ecf5; --text-strong: #f4f7fb; --muted: #93a1b5; --faint: #5e6c80; --navy-300: hsl(var(--team-hue) 43% 69%); --accent-soft: hsl(var(--team-hue) 42% 18%); --gold-bg: rgba(51, 41, 19, 0.55); --gold-deep: #d9bd7c; --danger: #e88370; --danger-bg: #2a1614; --danger-line: #4a2622; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.35); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.35), 0 20px 44px rgba(0, 0, 0, 0.45); --ring: 0 0 0 3px rgba(120, 165, 220, 0.28); } } /* 手動でダークを選んだとき */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b1220; --bg-tint: #0f1829; --surface: #131c2c; --surface-2: #182234; --surface-sunken: #0f1727; --line: #263349; --line-soft: #1d2839; --text: #e6ecf5; --text-strong: #f4f7fb; --muted: #93a1b5; --faint: #5e6c80; --navy-300: hsl(var(--team-hue) 43% 69%); --accent-soft: hsl(var(--team-hue) 42% 18%); --gold-bg: rgba(51, 41, 19, 0.55); --gold-deep: #d9bd7c; --danger: #e88370; --danger-bg: #2a1614; --danger-line: #4a2622; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.35); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.35), 0 20px 44px rgba(0, 0, 0, 0.45); --ring: 0 0 0 3px rgba(120, 165, 220, 0.28); } /* チームの基調色。チーム設定で選ぶと が付く。 ダークモードの指定より後ろに置き、明暗どちらでも効くようにしている （ダーク側は --team-hue を触らないので、打ち消し合うことはない）。 */ :root[data-team='forest'] { --team-hue: 152; } :root[data-team='crimson'] { --team-hue: 350; } :root[data-team='royal'] { --team-hue: 232; } :root[data-team='teal'] { --team-hue: 190; } :root[data-team='purple'] { --team-hue: 278; } :root[data-team='umber'] { --team-hue: 25; } * { box-sizing: border-box; } /* hidden 属性を確実に効かせる。 .panel などに display を指定していると、既定の [hidden]{display:none} が 打ち消されてしまうため。 */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } /* 動きを減らす設定の人には、アニメーションを出さない */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* =========================================================================== ヘッダー（チーム写真のヒーロー） =========================================================================== */ /* 以前はチームの集合写真を背景に敷いていたが、インターネットに公開する方針に 変更したため、子どもの顔が写った写真は載せず紺色の背景にしている。 */ .page-header { position: relative; min-height: 132px; display: flex; align-items: flex-end; padding: 26px 20px 22px; border-bottom: 1px solid var(--gold); background: radial-gradient(130% 170% at 88% 0%, rgba(194, 161, 92, 0.16) 0%, transparent 55%), linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--navy-700) 100%); } .header-inner { position: relative; /* 重ねたグラデーションより前に出す */ width: 100%; max-width: 1180px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 18px; } .brand-text { min-width: 0; } .brand-logo { height: 58px; width: auto; display: block; border-radius: var(--radius-sm); border: 1px solid rgba(194, 161, 92, 0.45); box-shadow: 0 6px 20px rgba(5, 12, 22, 0.5); } .page-header h1 { margin: 0; color: #fff; font-size: 23px; font-weight: 600; letter-spacing: 0.08em; text-shadow: 0 1px 10px rgba(5, 12, 22, 0.65); } .header-sub { margin: 3px 0 0; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: 0.34em; text-shadow: 0 1px 8px rgba(5, 12, 22, 0.8); } /* 写真の上に置く操作類は、すりガラス調にして下地から浮かせる */ .header-tools { display: flex; align-items: flex-end; gap: 12px; } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 23, 41, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease); } .theme-toggle:hover { background: rgba(29, 64, 104, 0.7); border-color: rgba(255, 255, 255, 0.4); } .theme-toggle:active { transform: translateY(1px); } .theme-icon { font-size: 14px; line-height: 1; } /* スコアブックへ移るボタン */ .app-switch { text-decoration: none; } .as-label { white-space: nowrap; } .admin-box { display: flex; align-items: center; gap: 10px; } /* 閲覧のみのときに出す目印 */ .admin-state { padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(194, 161, 92, 0.5); background: rgba(10, 23, 41, 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; } /* ログインしていない間は、成績を一切表示しない */ .container.signed-out > *:not(.login-bar) { display: none !important; } /* パスワードの入力欄 */ .login-bar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); } .login-bar .field { flex: 0 1 260px; } /* シーズン選択。ヘッダーではなく本文の先頭に置いている （ヘッダーを小さく保ち、スコアブックと同じ高さにそろえるため） */ .season-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .season-picker > span { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-deep); flex: none; } .season-picker select { min-width: 0; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(194, 161, 92, 0.5); background: rgba(10, 23, 41, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); } .season-picker select:hover { border-color: var(--gold); } .season-picker select option { color: var(--text); background: var(--surface); } .season-picker select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(194, 161, 92, 0.45); } .container { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; } .season-caption { margin: 0 0 18px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; } .season-caption strong { color: var(--text-strong); } /* =========================================================================== ダッシュボード（ベントー風に、主役のカードだけ大きく取る） =========================================================================== */ .dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } .stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 132px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* 上端の細いライン。主役カードだけ金色になる */ .stat-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--navy-500), transparent 70%); } .stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--navy-300); text-transform: uppercase; } .stat-value { margin-top: 2px; font-size: 38px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); } .stat-unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 5px; letter-spacing: 0.04em; } /* 「8勝 3敗」のように数字が2つ並ぶカードで、2つ目の前に間隔をあける */ .stat-value .stat-unit + span { margin-left: 12px; } .stat-note { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; } /* 補足を2行に分けて出すとき（公式戦と練習試合など） */ .stat-note-rows { display: grid; gap: 1px; } /* 試合一覧の「公式戦／練習試合」の目印 */ .kind { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; border: 1px solid transparent; } .kind-official { color: var(--gold-deep); background: var(--gold-bg); border-color: var(--gold); } .kind-practice { color: var(--navy-400); background: var(--accent-soft); border-color: var(--navy-300); } /* 公式戦と練習試合を上下に並べるカード。 1つの大きな数字ではなく、2つの数字を対等に見せたいので専用の形にしている */ .stat-split { margin: 3px 0 5px; display: grid; gap: 2px; } .stat-split-row { display: flex; align-items: baseline; gap: 10px; } .stat-split-key { flex: 0 0 auto; min-width: 52px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--navy-300); } .stat-split-val { font-size: 22px; font-weight: 300; line-height: 1.25; color: var(--text-strong); } .stat-split-val .stat-unit { margin-left: 3px; } .stat-split-val .stat-unit + span { margin-left: 9px; } /* 主役のカード（チーム打率・総勝敗）は紺で塗って大きく見せる */ .stat-card.highlight { background: radial-gradient(120% 140% at 100% 0%, rgba(194, 161, 92, 0.18) 0%, transparent 55%), linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%); border-color: transparent; box-shadow: var(--shadow-2); } .stat-card.highlight::after { background: linear-gradient(90deg, var(--gold), transparent 70%); } .stat-card.highlight .stat-label { color: var(--gold); } .stat-card.highlight .stat-value { color: #fff; font-weight: 400; font-size: 44px; } .stat-card.highlight .stat-unit { color: rgba(255, 255, 255, 0.7); } .stat-card.highlight .stat-note { color: var(--navy-300); } /* カードの並び（4列）。合計8マスちょうどで、2段に隙間なく収まる。 ・1段目： 登録選手数(1) 試合数(1) 勝敗(2) ・2段目： チーム打率(2) チーム防御率(2) */ .dashboard .stat-record-card, .dashboard .stat-average-card, .dashboard .stat-era-card { grid-column: span 2; } /* =========================================================================== メッセージ =========================================================================== */ .message { margin-bottom: 18px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; border-left-width: 3px; box-shadow: var(--shadow-1); } .message.error { background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger); color: var(--danger); } .message.ok { background: var(--accent-soft); border-color: var(--line); border-left-color: var(--navy-500); color: var(--text-strong); } /* =========================================================================== パネル =========================================================================== */ /* --------------------------------------------------------------------------- 画面の切り替え（管理者のみ）。4つのうち1つを出す --------------------------------------------------------------------------- */ .panel-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-pill); } .panel-tab { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-pill); padding: 10px 6px; min-height: 44px; /* 指で押しやすい大きさ */ cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .panel-tab:hover { color: var(--text-strong); } .panel-tab.is-active { color: #fff; background: var(--navy-500); box-shadow: var(--shadow-1); } .panel-tab:focus-visible { outline: none; box-shadow: var(--ring); } @media (max-width: 420px) { .panel-tab { font-size: 13px; letter-spacing: 0; } } .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .panel-full { grid-column: 1 / -1; } .panel { display: flex; flex-direction: column; /* これが無いと、中の表の幅にパネルが引き伸ばされて画面からはみ出す */ min-width: 0; padding: 22px 24px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow 0.2s var(--ease); } .panel:hover { box-shadow: var(--shadow-2); } .panel h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding-bottom: 13px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-strong); border-bottom: 1px solid var(--line); } .panel h2::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--gold); } /* =========================================================================== フォーム =========================================================================== */ .form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; } .field-narrow { flex: 0 0 84px; } .field span { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--navy-300); text-transform: uppercase; } .field input, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface-2); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease); } .field input::placeholder { color: var(--faint); } .field input:hover, .field select:hover { border-color: var(--navy-300); } .field input:focus, .field select:focus { outline: none; background: var(--surface); border-color: var(--navy-500); box-shadow: var(--ring); } .btn { padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 13px; font-family: inherit; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease), border-color 0.18s var(--ease); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn-primary { background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-800) 100%); color: #fff; box-shadow: var(--shadow-1); } .btn-primary:hover { background: linear-gradient(160deg, var(--navy-500) 0%, var(--navy-700) 100%); box-shadow: 0 4px 14px rgba(15, 33, 56, 0.3); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { background: var(--faint); box-shadow: none; cursor: not-allowed; transform: none; } .btn-cancel { background: var(--surface); border-color: var(--line); color: var(--muted); } .btn-cancel:hover { border-color: var(--navy-300); color: var(--text-strong); } .btn-delete { background: none; border: 1px solid var(--line); color: var(--muted); padding: 4px 12px; font-size: 11px; letter-spacing: 0.06em; border-radius: var(--radius-pill); font-family: inherit; cursor: pointer; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease); } .btn-delete:hover { border-color: var(--navy-300); color: var(--text-strong); background: var(--surface-2); } .btn-delete:focus-visible { outline: none; box-shadow: var(--ring); } .hint { font-size: 11px; color: var(--muted); margin: 14px 0 0; letter-spacing: 0.02em; } /* =========================================================================== 表 =========================================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); /* 表が広くても、枠自体は親の幅を超えない（超えると画面ごと横スクロールしてしまう） */ min-width: 0; max-width: 100%; } /* 人数が増えても背が伸びすぎないよう、中でスクロールさせる */ .table-scroll { max-height: 420px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; } th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--navy-300); text-transform: uppercase; text-align: left; white-space: nowrap; background: var(--surface); border-bottom: 1px solid var(--navy-600); } td { padding: 11px 12px; font-size: 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); } td.num, th.num { text-align: right; } tbody tr { transition: background 0.12s var(--ease); } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } .uniform-number { display: inline-block; min-width: 30px; margin-right: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-900) 100%); color: #fff; font-size: 11px; font-weight: 700; text-align: center; } .avg { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-strong); } .avg.none { font-size: 14px; font-weight: 400; color: var(--faint); letter-spacing: 0.08em; } .rate { color: var(--muted); } /* 一覧の先頭（打率トップ・防御率トップ）を金色で強調 */ tbody tr:first-child .avg:not(.none) { color: var(--gold-deep); } .empty { margin: auto 0; padding: 24px 0; color: var(--muted); font-size: 13px; text-align: center; letter-spacing: 0.02em; } /* 一覧の中身。パネルが引き伸ばされた分をここが受け持つ */ #player-list, #game-list, #batting-list, #pitching-list, #sheet-entry { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* 成績一覧の1列目（選手名）。横スクロールしても左に残す */ .player-cell { position: sticky; left: 0; z-index: 1; background: var(--surface); white-space: nowrap; border-right: 1px solid var(--line-soft); } /* 見出しは上下方向にも固定されるので、本文セルより前に出す */ .player-cell.is-header { z-index: 2; } tbody tr:hover .player-cell { background: var(--surface-2); } /* 試合ごとの内訳は、成績の行とは別行にして全幅で表示する。 （sticky で左に固定することも試したが、colspan のセルでは表示が崩れるため 　通常どおり表と一緒にスクロールさせている） */ .detail-row td { padding-top: 0; border-bottom: 1px solid var(--line-soft); } .detail-row:hover { background: transparent; } /* =========================================================================== タグ・バッジ =========================================================================== */ .role-tag, .outcome { display: inline-block; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid; white-space: nowrap; } .role-tag { padding: 2px 10px; } .outcome { min-width: 30px; padding: 2px 10px; text-align: center; font-weight: 700; } .role-batter { color: var(--navy-500); border-color: var(--line); background: var(--accent-soft); } .role-pitcher { color: var(--gold-deep); border-color: var(--gold-soft); background: var(--gold-bg); } .role-two-way { color: var(--navy-400); border-color: var(--navy-300); background: var(--accent-soft); } .outcome-win { color: var(--gold-deep); background: var(--gold-bg); border-color: var(--gold); } .outcome-loss { color: var(--muted); background: var(--surface-2); border-color: var(--line); } .outcome-draw { color: var(--navy-400); background: var(--accent-soft); border-color: var(--navy-300); } .outcome-unknown { color: var(--faint); background: none; border-color: transparent; } /* 試合一覧。日付とチーム名は折り返さず、長い大会名だけ省略する */ #game-list td, #game-list th { white-space: nowrap; } .tournament { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: 13px; } .tournament.none { color: var(--faint); } /* =========================================================================== 試合成績のまとめて入力 =========================================================================== */ .sheet-toolbar { align-items: flex-end; } .sheet-actions { display: flex; gap: 10px; align-items: center; margin: 18px 0 4px; } .entry-title { margin: 24px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--navy-300); text-transform: uppercase; } .entry-num, .entry-select { width: 70px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; text-align: right; color: var(--text); background: var(--surface-2); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .entry-select { text-align: left; } .entry-num:focus, .entry-select:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--ring); } .entry-played { width: 16px; height: 16px; accent-color: var(--navy-500); } /* =========================================================================== チーム設定（基調色えらび） =========================================================================== */ .team-colors { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; } /* 見本の色相。上の :root[data-team='...'] と必ず同じ値にすること */ .team-swatch[data-color='navy'] { --swatch-hue: 213; } .team-swatch[data-color='forest'] { --swatch-hue: 152; } .team-swatch[data-color='crimson'] { --swatch-hue: 350; } .team-swatch[data-color='royal'] { --swatch-hue: 232; } .team-swatch[data-color='teal'] { --swatch-hue: 190; } .team-swatch[data-color='purple'] { --swatch-hue: 278; } .team-swatch[data-color='umber'] { --swatch-hue: 25; } .team-swatch { --swatch-hue: 213; /* 未知の色が来ても、とりあえず紺で描く */ width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid var(--line); /* 見本の色は選択肢そのものの色相で描く（--swatch-hue は JS が入れる） */ background: linear-gradient(140deg, hsl(var(--swatch-hue) 56% 26%) 0%, hsl(var(--swatch-hue) 53% 42%) 100%); transition: transform 0.12s var(--ease), box-shadow 0.18s var(--ease); } .team-swatch:hover { transform: translateY(-1px); } .team-swatch[aria-pressed='true'] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); } /* =========================================================================== バックアップ =========================================================================== */ .backup-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .backup-head .hint { margin: 0; flex: 1 1 260px; min-width: 0; } .backup-kind { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .backup-kind.auto { color: var(--navy-400); background: var(--accent-soft); border-color: var(--navy-300); } .backup-kind.manual { color: var(--gold-deep); background: var(--gold-bg); border-color: var(--gold); } /* =========================================================================== 選手ランキング =========================================================================== */ .rankings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rank-block { position: relative; overflow: hidden; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-sunken); } /* 上端の金色のライン。表彰台らしさを出すための飾り */ .rank-block::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .rank-block h3 { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--navy-300); text-transform: uppercase; } .rank-table td { padding: 9px 6px; vertical-align: middle; border-bottom-color: var(--line); } .rank-table .rank-cell { width: 40px; padding-right: 0; } .rank-table tbody tr:hover { background: transparent; } /* --------------------------------------------------------------------------- メダル（1位=金・2位=銀・3位=銅） 画像は使わず、CSS のグラデーションだけで金属の質感を出している。 色は明暗どちらのテーマでも同じ（金属そのものの色のため）。 --------------------------------------------------------------------------- */ .medal { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; width: 32px; height: 34px; } /* 首から下げるリボン。円盤の後ろに来るよう重なり順を下げている */ .medal::before, .medal::after { content: ''; position: absolute; top: 0; width: 8px; height: 16px; background: var(--navy-400); border-radius: 2px 2px 0 0; transform-origin: top center; } .medal::before { left: 4px; transform: rotate(16deg); } .medal::after { right: 4px; transform: rotate(-16deg); } .medal-disc { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--medal-ink); background: radial-gradient( circle at 34% 28%, var(--medal-hi) 0%, var(--medal-base) 55%, var(--medal-lo) 100% ); border: 1px solid var(--medal-edge); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(10, 23, 41, 0.3); } .medal-1 { --medal-hi: #fff6d2; --medal-base: #d9b13f; --medal-lo: #a67c1f; --medal-edge: #8a6d23; --medal-ink: #4a3a0d; } .medal-2 { --medal-hi: #ffffff; --medal-base: #c9cfd8; --medal-lo: #949daa; --medal-edge: #858e9a; --medal-ink: #3b434e; } .medal-3 { --medal-hi: #f7dcbe; --medal-base: #c68a4f; --medal-lo: #96612e; --medal-edge: #7e5227; --medal-ink: #462d13; } .rank-note { font-size: 11px; color: var(--muted); margin-top: 1px; } .rank-table .avg { font-size: 18px; } /* 1位の行だけ、金色の帯を敷いて目立たせる。 同率1位が複数いる場合は、その全員に付く（:first-child では取りこぼす） */ .rank-table .rank-row-1 td { background: linear-gradient(90deg, var(--gold-bg) 0%, transparent 78%); } .rank-table .rank-row-1 .avg { font-size: 21px; color: var(--gold-deep); } /* =========================================================================== 試合ごとの成績（折りたたみ） =========================================================================== */ details.records { margin-top: 6px; } details.records summary { display: inline-block; cursor: pointer; font-size: 11px; letter-spacing: 0.04em; color: var(--navy-400); list-style: none; transition: color 0.16s var(--ease); } details.records summary::-webkit-details-marker { display: none; } details.records summary::before { content: "▸ "; } details.records[open] summary::before { content: "▾ "; } details.records summary:hover { color: var(--text-strong); } details.records .table-wrap { margin-top: 8px; background: var(--surface-sunken); border: 1px solid var(--line); } details.records th { padding: 6px 10px; font-size: 9px; color: var(--faint); background: var(--surface-sunken); border-bottom: 1px solid var(--line); } details.records td { padding: 6px 10px; font-size: 12px; } /* =========================================================================== 個人成績表（印刷用） 画面には出さず、印刷のときだけ現れる。別ウィンドウを開くと安全のための 指定（CSP）に引っかかるため、同じページの中に用意して @media print で 切り替えている。 紙は白地なので、画面用のトークン（ダーク対応）は使わず、 印刷でそのまま出る色を直接書いている。 =========================================================================== */ #print-area { display: none; } .sheet { --ink: #16233a; --ink-soft: #5b6779; --ink-faint: #97a2b2; --rule: #dfe5ee; --navy: #16304e; --navy-deep: #0d1c30; --gold: #a8873f; --gold-pale: #f6f0e2; color: var(--ink); } /* ---- 帯（ロゴ＋見出し）---- */ .sheet-head { display: flex; align-items: center; gap: 6mm; padding: 4mm 6mm; color: #fff; background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 100%); border-bottom: 1.2pt solid var(--gold); } .sheet-head img { height: 9.5mm; width: auto; flex: 0 0 auto; } .sheet-head .ttl { flex: 1; min-width: 0; } .sheet-head .season { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.3em; color: #d8c48d; } .sheet-head .t { font-size: 15pt; font-weight: 600; letter-spacing: 0.14em; line-height: 1.25; } .sheet-head .team { font-size: 8pt; letter-spacing: 0.1em; color: #b9c6d8; white-space: nowrap; align-self: flex-end; } /* ---- 選手 ---- */ .sheet-who { display: flex; align-items: baseline; gap: 4mm; padding: 4mm 1mm 3mm; border-bottom: 0.6pt solid var(--rule); } .sheet-no { font-size: 26pt; font-weight: 300; line-height: 1; color: var(--navy); letter-spacing: -0.02em; } .sheet-no::before { content: "No."; font-size: 7.5pt; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); vertical-align: 0.9em; margin-right: 1mm; } .sheet-who .nm { font-size: 18pt; font-weight: 600; letter-spacing: 0.08em; } .sheet-who .rl { margin-left: auto; font-size: 8pt; color: var(--ink-soft); letter-spacing: 0.06em; white-space: nowrap; } /* ---- 主要な数字。打率だけ大きく見せる ---- */ .sheet-big { display: grid; /* 列は等分にする。以前は打率の列だけ広くしていたが、 数字の右に空きが出て収まりが悪かった */ grid-template-columns: repeat(4, 1fr); margin: 3.5mm 0 1mm; } /* 数字を枠の中央に置く。左寄せだと右側が大きく空いて落ち着かない */ .sheet-big > div { padding: 0 3mm; text-align: center; border-left: 0.6pt solid var(--rule); } .sheet-big > div:first-child { border-left: none; } .sheet-big .k { font-size: 7pt; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); } /* 4つとも同じ大きさにそろえる。打率だけ大きくしていたが、 並んだときに背丈が不ぞろいに見えて落ち着かなかった */ .sheet-big .v { font-size: 24pt; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--navy-deep); white-space: nowrap; } /* ---- 見出し ---- */ .sheet h3 { margin: 4mm 0 1.5mm; font-size: 7.5pt; font-weight: 700; letter-spacing: 0.24em; color: var(--navy); padding-bottom: 0.8mm; border-bottom: 0.6pt solid var(--rule); } /* ---- 表。縦線を引かず、横の罫だけで読ませる ---- */ .sheet table { width: 100%; border-collapse: collapse; font-size: 8pt; } .sheet th { padding: 0 1.2mm 1mm; text-align: right; font-size: 6.5pt; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); white-space: nowrap; border-bottom: 0.8pt solid var(--navy); } .sheet th:first-child, .sheet th:nth-child(2) { text-align: left; } .sheet td { padding: 1.1mm 1.2mm; border-bottom: 0.4pt solid var(--rule); } .sheet td.n { text-align: right; } /* 0 のところは薄いハイフンにして、数字のある欄を目立たせる */ .sheet .q { color: var(--ink-faint); } .sheet td.g { color: var(--gold); font-weight: 700; } .sheet tbody tr:last-child td { border-bottom: none; } /* 合計の行だけ、少し強く見せる */ .sheet-total td { font-size: 9pt; } /* ---- チーム内での順位（3位までのメダル）---- */ .sheet-medals { display: flex; flex-wrap: wrap; gap: 2.5mm 9mm; padding: 1.5mm 1mm 0; } .sheet-medal { display: flex; align-items: baseline; gap: 1.8mm; white-space: nowrap; } .sheet-medal .sheet-disc { align-self: center; } .sheet-medal .lb { font-size: 8pt; font-weight: 700; color: var(--ink); letter-spacing: 0.06em; } .sheet-medal .v { font-size: 11.5pt; font-weight: 600; color: var(--navy-deep); } .sheet-disc { width: 6.5mm; height: 6.5mm; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 7pt; font-weight: 700; box-shadow: inset 0 0 0 0.8pt rgba(255, 255, 255, 0.5); } /* ---- グラフ ---- */ .sheet-chart svg { width: 100%; height: auto; display: block; } .sheet-chart .gl line { stroke: var(--rule); stroke-width: 1; } .sheet-chart .gl text { fill: var(--ink-faint); font-size: 9px; } .sheet-chart .base { stroke: var(--navy); stroke-width: 1.2; } .sheet-chart .area { fill: rgba(22, 48, 78, 0.07); } .sheet-chart polyline { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .sheet-chart circle { fill: #fff; stroke: var(--gold); stroke-width: 1.6; } .sheet-chart .cap { fill: var(--gold); font-size: 10px; font-weight: 700; } /* ---- 指導者から ---- */ .sheet-word { margin-top: 4mm; padding: 2mm 2mm 11mm; border-top: 0.8pt solid var(--gold); background: linear-gradient(180deg, var(--gold-pale) 0%, rgba(255, 255, 255, 0) 60%); } .sheet-word .k { font-size: 7pt; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); } .sheet-foot { margin-top: 3mm; padding-top: 1.5mm; border-top: 0.4pt solid var(--rule); text-align: center; font-size: 6.5pt; letter-spacing: 0.1em; color: var(--ink-faint); } @media print { @page { size: A4; margin: 9mm 10mm 7mm; } /* 印刷のときは成績表だけを出す */ body.printing > *:not(#print-area) { display: none !important; } body.printing { background: #fff; } #print-area { display: block; font-family: "Meiryo", "Yu Gothic", sans-serif; font-size: 8.5pt; line-height: 1.42; } /* 1人1枚。最後の1枚のうしろには余分な白紙を作らない */ .sheet { page-break-after: always; } .sheet:last-child { page-break-after: auto; } /* 小さい表は途中で切らない。試合ごとの表だけは、試合数が増えたときに 2ページ目へ続けられるようにする（見出しは各ページの先頭で繰り返す） */ .sheet table:not(.sheet-games) { page-break-inside: avoid; } .sheet-games thead { display: table-header-group; } .sheet-games tr { page-break-inside: avoid; } /* 印刷では背景色も出す（既定では省かれる） */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* =========================================================================== レスポンシブ =========================================================================== */ @media (max-width: 1080px) { .dashboard { grid-template-columns: repeat(2, 1fr); } .dashboard .stat-record-card, .dashboard .stat-average-card, .dashboard .stat-era-card { grid-column: span 2; } } @media (max-width: 900px) { .panels { grid-template-columns: 1fr; } .rankings { grid-template-columns: 1fr; } .header-inner { align-items: flex-start; } } /* --------------------------------------------------------------------------- スマートフォン --------------------------------------------------------------------------- */ @media (max-width: 700px) { .container { padding: 18px 14px 60px; } .panels { gap: 14px; } .panel { padding: 18px 16px 20px; border-radius: var(--radius); } /* ヘッダーはスコアブックと同じ高さ・余白にそろえる。 行き来したときに画面が跳ねないようにするため。 */ .page-header { min-height: 0; padding: calc(14px + env(safe-area-inset-top)) 14px 12px; } /* 折り返さず1行に収める。入りきらない分はチーム名を省略する （スコアブックのヘッダーと同じ収め方） */ .header-inner { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; } .brand { gap: 9px; min-width: 0; flex: 1 1 auto; } .brand-logo { height: 34px; flex: none; } /* ロゴにチーム名が入っているので、狭い画面では見出しを重ねて出さない。 スコアブックも同じ扱いにしてあり、並べたときに同じ顔になる。 */ .page-header h1 { display: none; } .header-sub { font-size: 10px; letter-spacing: 0.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-tools { flex-wrap: nowrap; align-items: center; gap: 7px; flex: none; } .admin-box { flex: none; display: flex; gap: 7px; } /* ログアウトとテーマは記号だけにする。行き先が分かる「スコアブック」だけ 文字を残す（スコアブック側のヘッダーと同じ並べ方） */ .admin-box .theme-label, #theme-toggle .theme-label { display: none; } .app-switch .as-label { display: inline; } .admin-state { display: none; } .theme-toggle { padding: 10px 12px; } /* 指で押しやすい大きさにする */ .btn { padding: 13px 20px; font-size: 14px; } .btn-delete { padding: 8px 14px; font-size: 12px; } .theme-toggle { padding: 11px 14px; } /* iOS は文字が16px未満の入力欄に触れると画面を勝手に拡大するので、16pxにする */ .field input, .field select, .entry-num, .entry-select, .season-picker select { font-size: 16px; } .entry-num, .entry-select { width: 76px; padding: 9px; } .entry-played { width: 20px; height: 20px; } /* 入力欄は行いっぱいに並べる */ .field-narrow { flex: 1 1 84px; } /* 一覧は画面の高さに合わせる */ .table-scroll { max-height: 60vh; } td { padding: 12px 10px; } th { padding: 8px 10px; } /* まとめて入力の表も、選手名を左に固定する */ #entry-batting th:first-child, #entry-batting td:first-child, #entry-pitching th:first-child, #entry-pitching td:first-child, #player-list th:first-child, #player-list td:first-child, #game-list th:first-child, #game-list td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line-soft); } /* 見出しは縦横どちらにも固定されるので、本文より前に出す */ #entry-batting th:first-child, #entry-pitching th:first-child, #player-list th:first-child, #game-list th:first-child, .player-cell.is-header { z-index: 2; } } @media (max-width: 560px) { /* カードは2列。1列にすると縦に長くなりすぎて全体が見渡せない */ .dashboard { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* 紺のカード（勝敗・チーム打率）と防御率を全幅にすると、隙間なく並ぶ */ .dashboard .stat-average-card, .dashboard .stat-era-card { grid-column: span 2; } .dashboard .stat-card.highlight { grid-column: span 2; } .stat-split-val { font-size: 19px; } .stat-card { min-height: 0; padding: 14px 14px 13px; } .stat-value { font-size: 28px; } .stat-card.highlight .stat-value { font-size: 34px; } .stat-label { font-size: 9px; letter-spacing: 0.12em; } .stat-note { font-size: 10px; } .stat-unit { font-size: 11px; margin-left: 3px; } .stat-value .stat-unit + span { margin-left: 8px; } } /* =========================================================================== ライブ配信（管理者のパネル） =========================================================================== */ .live-state { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); font-size: 14px; color: var(--muted); } .live-state.is-on { background: var(--accent-soft); border-color: transparent; color: var(--text); } .live-state strong { color: var(--text-strong); } .live-state-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } /* 発行した直後だけ出る箱。ここを閉じるとキーは二度と見られないので目立たせる */ .live-new-key { margin: 0 0 12px; padding: 12px; border: 2px solid var(--gold); border-radius: var(--radius-sm); background: var(--gold-bg); } .live-new-key-note { margin: 0 0 8px; font-size: 13px; line-height: 1.7; } .live-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .live-key-row code { flex: 1 1 16em; min-width: 0; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; user-select: all; /* ひと触りで全部選べるように */ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; } .live-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .live-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); } .live-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--surface-sunken); color: var(--muted); } .live-badge.live { background: #2e7d4f; color: #fff; } .live-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } /* =========================================================================== スコアブックから取り込む（管理者のパネル） =========================================================================== */ .import-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } /* ファイル選択は見た目が端末ごとに違うので、ボタンの中に隠して見た目をそろえる */ .import-choose { position: relative; overflow: hidden; cursor: pointer; } .import-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .import-game { margin-bottom: 14px; } .import-game h3 { margin: 0 0 8px; font-size: 14px; } .import-dl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); } .import-dl dt { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .import-dl dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); } /* 上書きになるときは、取り込む前に必ず目に入るようにする */ .import-warn { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); font-size: 13px; line-height: 1.8; } .import-row-new td { background: var(--gold-bg); } /* スコアブックから流し込んだ行。保存するまでは記録に入っていないので、 どれが入ったのかが見て分かるようにしておく */ tr.is-imported > td { background: var(--accent-soft); } tr.is-imported > td:first-child { box-shadow: inset 3px 0 0 var(--gold); } .import-create-label, .import-promote { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-right: 10px; } .import-create-label input, .import-promote input { width: 17px; height: 17px; margin: 0; } .import-role { font: inherit; font-size: 13px; padding: 4px 8px; } .import-ok { font-size: 12px; color: var(--muted); } .import-ng { font-size: 12px; color: var(--danger); font-weight: 700; } .import-note { display: block; font-size: 11px; color: var(--muted); } .import-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .import-actions .hint { margin: 0; } /* ごく狭い画面では英字のラベルも省く。 ロゴでチームは分かり、どちらのアプリかは切り替えボタンの行き先 （⇄ スコアブック / ⇄ 成績アプリ）と本文のタブで分かるため。 2つのアプリで同じ扱いにして、行き来しても高さが変わらないようにしている。 */ @media (max-width: 480px) { .header-sub { display: none; } }