/* digital.css /assets/css/sekigae-digital.css を参考に、学習/検定向けに一般化した共通UI。 - 軽量 - 余白と可読性 - ボタン/フォーム/テーブル/タイマー/通知 */ :root { /* Light/Dark 自動追従 + data-theme で手動固定（learning.css の考え方を統合） */ color-scheme: light dark; --dg-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --dg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --dg-color-bg: #ffffff; --dg-color-surface: #f6f8fb; --dg-color-surface-2: #eef2f7; --dg-color-border: #d7dee8; --dg-color-text: #0b1220; --dg-color-muted: #4b5565; --dg-color-link: #0b5ed7; --dg-color-link-visited: #6f42c1; --dg-color-primary: #0b5ed7; --dg-color-primary-hover: #0a53be; --dg-color-primary-active: #084298; --dg-color-on-primary: #ffffff; --dg-color-danger: #b42318; --dg-color-warning: #a15c07; --dg-color-success: #067647; /* learning.css 相当の「読みやすさ」トークン */ --dg-color-code-bg: #0b1220; --dg-color-code-text: #e5e7eb; --dg-color-mark-bg: #fff3b0; --dg-color-mark-text: #1f2937; --dg-color-selection: rgba(11, 94, 215, 0.18); --dg-focus-ring: 0 0 0 3px rgba(11, 94, 215, 0.35); --dg-radius-sm: 8px; --dg-radius-md: 12px; --dg-space-1: 4px; --dg-space-2: 8px; --dg-space-3: 12px; --dg-space-4: 16px; --dg-space-5: 20px; --dg-space-6: 24px; --dg-space-7: 32px; --dg-space-8: 40px; --dg-text-xs: 12px; --dg-text-sm: 14px; --dg-text-md: 16px; --dg-text-lg: 18px; --dg-text-xl: 22px; --dg-text-2xl: 28px; --dg-line-md: 1.7; --dg-container: 980px; --dg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --dg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10); } * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--dg-font-sans); font-size: var(--dg-text-md); line-height: var(--dg-line-md); color: var(--dg-color-text); background: var(--dg-color-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--dg-color-selection); } /* Dark theme (OS設定に追従) */ @media (prefers-color-scheme: dark) { :root { --dg-color-bg: #0b0f14; --dg-color-surface: #111826; --dg-color-surface-2: #0e1522; --dg-color-border: #243145; --dg-color-text: #e7edf5; --dg-color-muted: #a7b3c4; --dg-color-link: #60a5fa; --dg-color-link-visited: #c084fc; /* primary は link と合わせて明るめに */ --dg-color-primary: #60a5fa; --dg-color-primary-hover: #93c5fd; --dg-color-primary-active: #3b82f6; --dg-color-on-primary: #0b1220; --dg-color-code-bg: #0b1220; --dg-color-code-text: #e5e7eb; --dg-color-mark-bg: #3a2e00; --dg-color-mark-text: #ffe8a3; --dg-color-selection: rgba(96, 165, 250, 0.22); } } /* Manual Override: */ :root[data-theme="light"] { color-scheme: light; --dg-color-bg: #ffffff; --dg-color-surface: #f6f8fb; --dg-color-surface-2: #eef2f7; --dg-color-border: #d7dee8; --dg-color-text: #0b1220; --dg-color-muted: #4b5565; --dg-color-link: #0b5ed7; --dg-color-link-visited: #6f42c1; --dg-color-primary: #0b5ed7; --dg-color-primary-hover: #0a53be; --dg-color-primary-active: #084298; --dg-color-on-primary: #ffffff; --dg-color-code-bg: #0b1220; --dg-color-code-text: #e5e7eb; --dg-color-mark-bg: #fff3b0; --dg-color-mark-text: #1f2937; --dg-color-selection: rgba(11, 94, 215, 0.18); } :root[data-theme="dark"] { color-scheme: dark; --dg-color-bg: #0b0f14; --dg-color-surface: #111826; --dg-color-surface-2: #0e1522; --dg-color-border: #243145; --dg-color-text: #e7edf5; --dg-color-muted: #a7b3c4; --dg-color-link: #60a5fa; --dg-color-link-visited: #c084fc; --dg-color-primary: #60a5fa; --dg-color-primary-hover: #93c5fd; --dg-color-primary-active: #3b82f6; --dg-color-on-primary: #0b1220; --dg-color-code-bg: #0b1220; --dg-color-code-text: #e5e7eb; --dg-color-mark-bg: #3a2e00; --dg-color-mark-text: #ffe8a3; --dg-color-selection: rgba(96, 165, 250, 0.22); } img, svg { max-width: 100%; height: auto; } a { color: var(--dg-color-link); text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--dg-color-link-visited); } /* ボタンリンクは訪問済みでも色を変えない */ a.dg-btn:visited, .dg-btn:visited { color: var(--dg-color-on-primary); } /* subtle ボタンも */ a.dg-btn--subtle:visited, .dg-btn--subtle:visited { color: var(--dg-color-text); } /* danger ボタンも */ a.dg-btn--danger:visited, .dg-btn--danger:visited { color: var(--dg-color-on-primary); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: none; box-shadow: var(--dg-focus-ring); border-radius: 6px; } .dg-container { width: min(var(--dg-container), calc(100% - 32px)); margin: 0 auto; } .dg-header { border-bottom: 1px solid var(--dg-color-border); background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fbfdff 100%); } .dg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-4); padding: var(--dg-space-5) 0; } /* Topbar actions (optional, injected by dg-topbar.js) */ .dg-topbar .dg-topbar__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--dg-space-2); flex-wrap: wrap; } .dg-topbar .dg-topbar__actions .dg-btn { padding: 8px 12px; min-height: 36px; } .dg-brand { display: flex; align-items: baseline; gap: var(--dg-space-2); text-decoration: none; color: inherit; } .dg-brand__title { font-size: var(--dg-text-lg); font-weight: 700; letter-spacing: 0.01em; } .dg-brand__badge { font-size: var(--dg-text-xs); color: var(--dg-color-muted); border: 1px solid var(--dg-color-border); background: var(--dg-color-surface); padding: 2px 8px; border-radius: 999px; } .dg-nav { display: flex; gap: var(--dg-space-4); align-items: center; flex-wrap: wrap; } .dg-nav a { text-decoration: none; padding: 6px 8px; border-radius: 8px; } .dg-nav a:hover { background: var(--dg-color-surface); } .dg-main { padding: var(--dg-space-7) 0; } .dg-page-title { margin: 0 0 var(--dg-space-4) 0; font-size: var(--dg-text-2xl); line-height: 1.25; } .dg-lead { margin: 0 0 var(--dg-space-6) 0; color: var(--dg-color-muted); } .dg-card { background: var(--dg-color-bg); border: 1px solid var(--dg-color-border); border-radius: var(--dg-radius-md); box-shadow: var(--dg-shadow-sm); } .dg-card__body { padding: var(--dg-space-6); } /* Details（折りたたみ） */ .dg-details { background: var(--dg-color-bg); border: 1px solid var(--dg-color-border); border-radius: var(--dg-radius-md); box-shadow: var(--dg-shadow-sm); margin: var(--dg-space-5) 0; overflow: clip; } .dg-details > summary { cursor: pointer; padding: var(--dg-space-5) var(--dg-space-6); font-weight: 800; background: color-mix(in srgb, var(--dg-color-surface) 80%, transparent); display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-3); } .dg-details > summary::-webkit-details-marker { display: none; } .dg-details > summary::after { content: "▸"; color: var(--dg-color-muted); flex: 0 0 auto; } .dg-details[open] > summary { border-bottom: 1px solid var(--dg-color-border); } .dg-details[open] > summary::after { content: "▾"; } .dg-details__body { padding: var(--dg-space-6); } .dg-stack { display: grid; gap: var(--dg-space-5); } .dg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-4); } .dg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dg-prose h2 { margin: var(--dg-space-7) 0 var(--dg-space-3) 0; font-size: var(--dg-text-xl); line-height: 1.3; } .dg-prose h3 { margin: var(--dg-space-6) 0 var(--dg-space-2) 0; font-size: var(--dg-text-lg); line-height: 1.35; } .dg-prose p { margin: 0 0 var(--dg-space-4) 0; } .dg-prose ul, .dg-prose ol { margin: 0 0 var(--dg-space-4) 0; padding-left: 1.2em; } .dg-prose li { margin: 0 0 var(--dg-space-2) 0; } .dg-prose code { font-family: var(--dg-font-mono); font-size: 0.95em; background: var(--dg-color-surface); border: 1px solid var(--dg-color-border); padding: 0.1em 0.35em; border-radius: 8px; } .dg-prose mark { background: var(--dg-color-mark-bg); color: var(--dg-color-mark-text); padding: 0 0.2em; border-radius: 0.35em; } .dg-prose pre { background: var(--dg-color-code-bg); color: var(--dg-color-code-text); border: 1px solid color-mix(in srgb, var(--dg-color-border), transparent 35%); padding: var(--dg-space-4); border-radius: var(--dg-radius-md); overflow: auto; } .dg-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; } .dg-prose blockquote { margin: 0 0 var(--dg-space-5) 0; padding: var(--dg-space-3) var(--dg-space-4); background: color-mix(in srgb, var(--dg-color-surface) 80%, transparent); border-left: 5px solid color-mix(in srgb, var(--dg-color-primary) 70%, var(--dg-color-border) 30%); border-radius: var(--dg-radius-sm); color: color-mix(in srgb, var(--dg-color-text) 75%, var(--dg-color-muted) 25%); } /* learning.css の callout を dg-* として追加（既存 dg-note と併用可） */ .dg-callout { margin: 0 0 var(--dg-space-5); padding: var(--dg-space-4); border-radius: var(--dg-radius-md); border: 1px solid var(--dg-color-border); background: color-mix(in srgb, var(--dg-color-surface) 85%, transparent); box-shadow: var(--dg-shadow-sm); } .dg-callout__title { margin: 0 0 var(--dg-space-2); font-weight: 800; line-height: 1.25; } .dg-callout--info { border-left: 6px solid color-mix(in srgb, var(--dg-color-primary), #fff 25%); } .dg-callout--success { border-left: 6px solid color-mix(in srgb, var(--dg-color-success), #fff 25%); } .dg-callout--warning { border-left: 6px solid color-mix(in srgb, var(--dg-color-warning), #fff 25%); } .dg-callout--danger { border-left: 6px solid color-mix(in srgb, var(--dg-color-danger), #fff 25%); } .dg-prose hr { border: none; border-top: 1px solid var(--dg-color-border); margin: var(--dg-space-7) 0; } .dg-table { width: 100%; border-collapse: collapse; font-size: var(--dg-text-sm); } .dg-table th, .dg-table td { border: 1px solid var(--dg-color-border); padding: 10px 12px; vertical-align: top; } .dg-table th { background: var(--dg-color-surface); text-align: left; } .dg-btn { appearance: none; border: 1px solid transparent; background: var(--dg-color-primary); color: var(--dg-color-on-primary); border-radius: 10px; padding: 10px 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-height: 40px; } .dg-btn:hover { background: var(--dg-color-primary-hover); } .dg-btn:active { background: var(--dg-color-primary-active); } .dg-btn--subtle { background: var(--dg-color-surface); color: var(--dg-color-text); border-color: var(--dg-color-border); } .dg-btn--subtle:hover { background: var(--dg-color-surface-2); } .dg-btn--danger { background: var(--dg-color-danger); } .dg-btn--danger:hover { background: color-mix(in srgb, var(--dg-color-danger), #000 10%); } .dg-field { display: grid; gap: 6px; } .dg-label { font-size: var(--dg-text-sm); color: var(--dg-color-muted); } .dg-input, .dg-select, .dg-textarea { width: 100%; border: 1px solid var(--dg-color-border); border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; } .dg-textarea { min-height: 110px; resize: vertical; } .dg-help { font-size: var(--dg-text-xs); color: var(--dg-color-muted); } .dg-row { display: flex; gap: var(--dg-space-3); align-items: center; flex-wrap: wrap; } .dg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--dg-color-surface); border: 1px solid var(--dg-color-border); color: var(--dg-color-muted); font-size: var(--dg-text-sm); } .dg-badge--ok { border-color: color-mix(in srgb, var(--dg-color-success), #fff 65%); color: var(--dg-color-success); } .dg-badge--ng { border-color: color-mix(in srgb, var(--dg-color-danger), #fff 65%); color: var(--dg-color-danger); } .dg-note { border-left: 4px solid var(--dg-color-border); background: var(--dg-color-surface); padding: var(--dg-space-4); border-radius: 10px; } .dg-note--warning { border-left-color: rgba(161, 92, 7, 0.65); } .dg-note--danger { border-left-color: rgba(180, 35, 24, 0.65); } .dg-note--success { border-left-color: rgba(6, 118, 71, 0.65); } .dg-timer { font-family: var(--dg-font-mono); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; padding: 10px 12px; border: 1px solid var(--dg-color-border); border-radius: 10px; background: var(--dg-color-surface); } .dg-footer { border-top: 1px solid var(--dg-color-border); background: var(--dg-color-surface); padding: var(--dg-space-6) 0; } .dg-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-4); flex-wrap: wrap; } .dg-footer__meta { color: var(--dg-color-muted); font-size: var(--dg-text-sm); } @media (max-width: 860px) { .dg-grid { grid-template-columns: 1fr; } .dg-grid--3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dg-header__inner { align-items: flex-start; flex-direction: column; } .dg-card__body { padding: var(--dg-space-5); } } /* ========================================================= top.css 統合（バランス重視） - 既存の dg-* デザインは維持 - top.css 風のページは body などに .dg-top を付けて opt-in ========================================================= */ :root { /* top.css 互換のトークン（digital の色から派生） */ --dg-top-bg: color-mix(in srgb, var(--dg-color-surface) 55%, var(--dg-color-bg) 45%); --dg-top-card: var(--dg-color-bg); --dg-top-fg: var(--dg-color-text); --dg-top-muted: var(--dg-color-muted); --dg-top-accent: color-mix(in srgb, var(--dg-color-primary) 65%, #38a169 35%); --dg-top-accent-light: color-mix(in srgb, var(--dg-top-accent) 35%, #ffffff 65%); --dg-top-border: var(--dg-color-border); } body.dg-top { background: var(--dg-top-bg); color: var(--dg-top-fg); letter-spacing: 0.03em; } /* top.css の .wrap/.container 相当（既存 .dg-container と共存） */ body.dg-top .wrap, body.dg-top .container { max-width: 900px; margin: 0 auto; padding: 2rem; } body.dg-top h1, body.dg-top h2, body.dg-top h3, body.dg-top p { margin: 0 0 0.8rem; } /* ヘッダー */ body.dg-top header { background: var(--dg-top-accent-light); color: #fff; padding: 1rem 0; text-align: center; border-bottom: 3px solid var(--dg-top-accent); position: relative; z-index: 10; } body.dg-top header h1 { font-size: 1.9rem; font-weight: 600; margin-bottom: 0.3rem; } body.dg-top header p { color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; } /* 見出し */ body.dg-top h2 { color: var(--dg-top-accent); font-size: 1.4rem; border-left: 5px solid var(--dg-top-accent); padding-left: 0.6rem; } body.dg-top h3 { color: var(--dg-top-muted); font-size: 1.15rem; } /* カード */ body.dg-top .card { background: var(--dg-top-card); border: 1px solid var(--dg-top-border); border-radius: 12px; padding: 1.4rem 1.6rem; margin: 1.4rem 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); } /* コード表示（top.css 互換） */ body.dg-top code, body.dg-top pre { font-family: var(--dg-font-mono); } body.dg-top pre { background: color-mix(in srgb, var(--dg-color-surface) 70%, var(--dg-color-bg) 30%); border: 1px solid var(--dg-top-border); border-radius: 10px; padding: 1rem; overflow-x: auto; } /* 注意書き */ body.dg-top .note { background: color-mix(in srgb, var(--dg-top-accent-light) 30%, var(--dg-color-bg) 70%); border-left: 5px solid var(--dg-top-accent-light); padding: 0.9rem 1rem; color: color-mix(in srgb, var(--dg-color-text) 80%, #2f4f2f 20%); border-radius: 6px; margin: 1rem 0; } /* フッター */ body.dg-top .footer { text-align: center; font-size: 0.9rem; color: var(--dg-top-muted); margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--dg-top-border); } /* 印刷（top.css 互換） */ @media print { body.dg-top { background: #fff; color: #000; } body.dg-top header { background: none; color: #000; border: none; } body.dg-top .card { box-shadow: none; } } /* ナビゲーション（#menu）を壊さないよう dg-top の時だけ適用 */ body.dg-top #menu { position: fixed; top: 0; left: 0; background: #334; color: #fff; width: 220px; height: 100%; transform: translateX(-100%); transition: transform 0.3s; overflow-y: auto; z-index: 1000; } body.dg-top #menu.show { transform: translateX(0); } body.dg-top #menu button { width: 100%; padding: 10px; background: #223; border: none; color: white; cursor: pointer; } body.dg-top #menu li { padding: 10px; border-bottom: 1px solid #445; } body.dg-top #menu li:hover { background: #445; }