/* D-084 COMPARE: the bonus comparison of the work-info page (the status bar and the dialog), moved out of nuruma-ui.css. * Loaded after nuruma-foundation.css (dependency), only on work-info pages that render the comparison. Same scope and the same * selectors as before (`.nrm-ui.nrm-ui` beats the THE THOR content resets on div / p / dl / section), so nothing else changes. * Tokens (--nu-*, --nu-fs-*) come from nuruma-ui.css / nuruma-foundation.css. Spacing 4/8/12/16/24/32, radii 4/8/12. * * Bar : a status tray at the bottom of the screen while at least one bonus is selected (count, 比べる, 解除, the 3-item * notice). It is out of the sticky page nav, so the nav keeps one line; at the bottom it is where the thumb is, and * `scroll-padding-bottom` keeps focused targets and anchors clear of it. On short screens (400% zoom, landscape phone) it is * ONE compact row. * Dialog : a comparison TABLE (round 2): columns = the 2-3 selected bonuses, rows = attributes in one fixed order, so price, stock, * target and shop are read at the same position. Phone: a narrow label column and equal value columns (table-layout: fixed, * values wrap, nothing scrolls sideways); PC: the same table with wider cells. Sticky header on tall screens, a scrolling * header and a second 「閉じる」 on short ones. 「違いだけ見る」 hides the rows identical in every column (.is-same on the row). */ /* ---- Status bar ---- */ .nrm-ui.nrm-ui .nrm-wi-cmpbar { position: fixed; left: 0; right: 0; bottom: var(--nuruma-tray-bottom, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--nu-surface); border-top: 1px solid var(--nu-line-strong); box-shadow: 0 -4px 16px rgba(36, 33, 43, .10); font-size: var(--nu-fs-s); line-height: 1.4; } .nrm-ui.nrm-ui .nrm-wi-cmpbar[hidden] { display: none; } .nrm-wi-cmpbar .nu-btn { min-height: 44px; padding: 6px 16px; } .nrm-ui.nrm-ui .nrm-wi-cmpstat { flex: 1 1 11em; display: flex; flex-direction: column; min-width: 0; } .nrm-wi-cmpsel { font-size: var(--nu-fs-m); font-weight: 700; white-space: nowrap; } .nrm-wi-nowrap { white-space: nowrap; } .nrm-wi-cmpsel b, .nrm-wi-cmpscope b, .nrm-wi-cmpcount b { font-variant-numeric: tabular-nums; } .nrm-wi-cmpscope { font-size: var(--nu-fs-s); color: var(--nu-sub); } .nrm-wi-cmpbtns { display: inline-flex; gap: 8px; flex: 0 0 auto; } .nrm-wi-cmpmsg { flex-basis: 100%; color: var(--nu-warn); font-size: var(--nu-fs-xs); } .nrm-wi-cmpmsg:empty { display: none; } .nrm-wi-cmphint { font-size: var(--nu-fs-s); color: var(--nu-sub); } /* 比べる needs two bonuses: aria-disabled keeps it focusable (it can say why through the hint) and quiet. */ .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"], .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"]:hover { background: var(--nu-bg); border-color: var(--nu-line-strong); color: var(--nu-sub); cursor: default; } /* Phones: the bottom-right 72px stay free for a floating button of the theme (page-top). */ @media (max-width: 767px) { .nrm-ui.nrm-ui .nrm-wi-cmpbar { padding-right: max(16px, 72px); } } /* Focused targets and in-page anchors stop above the tray; the end of the page is not hidden behind it. */ /* The tray sits above any fixed UI of the theme at the bottom edge (nuruma-ui.js measures it: --nuruma-tray-bottom, 0 when there is none). --nrm-cmp-h is the tray's real height (nuruma-ui.js measures it: wrapped text, the notice, larger text); 144px until measured. */ html:has(.nrm-wi-cmpbar:not([hidden])) { scroll-padding-bottom: var(--nrm-cmp-h, 144px); } /* The page end stays above the tray: the root keeps the tray's measured extent (tray + its offset above a theme bottom bar) free while it shows (class set by nuruma-ui.js). */ html.nu-has-tray { padding-bottom: calc(var(--nuruma-tray-h, 0px) + 8px); } @media (max-width: 359px) { .nrm-wi-cmpbtns { flex: 1 1 100%; } .nrm-wi-cmpbtns .nu-btn { flex: 1 1 0; } } @media print { .nrm-ui.nrm-ui .nrm-wi-cmpbar { display: none; } } /* ---- Dialog ---- */ .nrm-ui .nrm-wi-cmpdlg { width: min(96vw, 1080px); max-width: min(96vw, 1080px); max-height: 90vh; padding: 0; overflow: auto; overscroll-behavior: contain; } /* The page behind a modal dialog does not scroll (the scrollbar gutter stays, so nothing shifts). */ html:has(dialog.nrm-wi-cmpdlg[open]) { overflow: hidden; scrollbar-gutter: stable; } /* Head: title + close (sticky on phones, 52px); the count and 「違いだけ見る」 are the row under it and scroll away with the content. From 768px (and on a * landscape phone) the three are ONE row (grid areas on .nrm-wi-cmptop, below). */ .nrm-ui.nrm-ui .nrm-wi-cmptop { display: contents; } .nrm-ui.nrm-ui .nrm-wi-cmphead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; padding-top: max(4px, env(safe-area-inset-top, 0px)); background: var(--nu-surface); border-bottom: 1px solid var(--nu-line); } .nrm-ui.nrm-ui .nrm-wi-cmphead h2 { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--nu-text); box-shadow: none; text-shadow: none; font-size: var(--nu-fs-xl); line-height: var(--nu-lh-tight); font-weight: var(--nu-fw-title, 700); overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmphead form { flex: none; margin: 0; } .nrm-wi-cmphead .nu-btn { width: 44px; min-height: 44px; padding: 0; font-size: 20px; } .nrm-ui.nrm-ui .nrm-wi-cmptool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding: 0 12px; } .nrm-wi-cmpcount { font-size: var(--nu-fs-s); color: var(--nu-sub); white-space: nowrap; } .nrm-wi-cmpdiff { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: var(--nu-fs-m); font-weight: 700; cursor: pointer; } .nrm-wi-cmpdiff input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--nu-accent); cursor: inherit; } .nrm-wi-cmpdiff:has(input:disabled) { color: var(--nu-sub); font-weight: 400; cursor: default; } .nrm-ui.nrm-ui .nrm-wi-cmpnote { margin: 0; padding: 4px 12px 16px; font-size: var(--nu-fs-s); color: var(--nu-sub); } /* What 「違いだけ見る」 left out, said once (the common value is not lost). */ .nrm-ui.nrm-ui .nrm-wi-cmpsame:empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); } .nrm-ui.nrm-ui .nrm-wi-cmpsame { margin: 8px 12px 0; padding: 8px 12px; background: var(--nu-bg); border: 1px solid var(--nu-line); border-radius: var(--nu-r); font-size: var(--nu-fs-s); color: var(--nu-text); overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmpgrid { padding: 8px 4px 0; } /* A second 「閉じる」 at the foot, only where the head is not sticky (short screens). */ .nrm-ui.nrm-ui .nrm-wi-cmpfoot { display: none; margin: 0; padding: 0 12px 16px; } .nrm-wi-cmpfoot .nu-btn { width: 100%; min-height: 44px; } /* ---- The comparison table: columns = the 2-3 selected bonuses, rows = attributes in one fixed order. ---- * Phone: a narrow label column (2-3 characters) and equal value columns; values wrap inside their column, so the same attribute * of every bonus stays on the same line band and nothing scrolls sideways (table-layout: fixed). */ .nrm-ui.nrm-ui .nrm-wi-cmptable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; font-size: var(--nu-fs-s); line-height: 1.45; color: var(--nu-text); } .nrm-wi-cmptable .nrm-wi-cmplc { width: 4.2em; } .nrm-ui.nrm-ui .nrm-wi-cmptable th, .nrm-ui.nrm-ui .nrm-wi-cmptable td { padding: 6px 4px; border: 0; background: transparent; text-align: left; vertical-align: top; font-weight: 400; font-size: inherit; line-height: inherit; overflow-wrap: break-word; word-break: normal; min-width: 0; } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody td, .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th { border-top: 1px solid var(--nu-line); } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody td { border-left: 1px solid var(--nu-line-soft, var(--nu-line)); } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th.nrm-wi-cmprl { padding-left: 0; padding-right: 2px; font-size: var(--nu-fs-xs); font-weight: 700; color: var(--nu-sub); line-height: 1.6; } .nrm-ui.nrm-ui .nrm-wi-cmptable thead th.nrm-wi-cmpitem { padding: 4px; font-weight: var(--nu-fw-title, 700); } .nrm-ui.nrm-ui .nrm-wi-cmptable thead td.nrm-wi-cmprmc { padding: 4px; } .nrm-ui.nrm-ui .nrm-wi-cmptable tr.is-same, .nrm-ui.nrm-ui .nrm-wi-cmptable tr.is-empty { display: none; } .nrm-ui.nrm-ui .nrm-wi-cmptable td.is-blank::before { content: "\2014"; color: var(--nu-sub); } /* The picture row (the first body row, it scrolls away; the sticky header is only the names): ONE reserved box per column, the same size and position in every column * (the columns are equal width), the whole image inside it (contain: portrait, landscape and square keep their own ratio, nothing is cropped or stretched). The box is * a button that opens the whole image; a bonus without a picture (or a failed one) writes the reason in the very same box. Phone: a square as wide as the column. */ .nrm-ui.nrm-ui .nrm-wi-cmpimg { position: relative; display: block; box-sizing: border-box; width: 100%; max-width: 132px; aspect-ratio: 1 / 1; margin: 0; padding: 0; overflow: hidden; background: var(--nu-bg); color: var(--nu-text); border: 1px solid var(--nu-line); border-radius: var(--nu-r); font: inherit; -webkit-appearance: none; appearance: none; } .nrm-ui.nrm-ui button.nrm-wi-cmpimg { cursor: zoom-in; } .nrm-ui.nrm-ui button.nrm-wi-cmpimg[aria-disabled="true"] { cursor: default; } .nrm-ui.nrm-ui .nrm-wi-cmpimg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; margin: 0; display: block; } .nrm-ui.nrm-ui .nrm-wi-cmpimg.is-none { display: flex; align-items: center; justify-content: center; padding: 4px 2px; text-align: center; color: var(--nu-sub); font-size: var(--nu-fs-xs); line-height: 1.3; border-style: dashed; overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmpimg:focus-visible { outline: 3px solid var(--nu-accent); outline-offset: 2px; } .nrm-wi-cmpimg.is-img-failed img { visibility: hidden; } .nrm-wi-cmpimg.is-img-failed::after { content: attr(data-fail-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2px; text-align: center; font-size: var(--nu-fs-xs); line-height: 1.3; color: var(--nu-sub); overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmpname { color: var(--nu-text); margin: 6px 0 0; font-size: var(--nu-fs-s); font-weight: var(--nu-fw-title, 700); line-height: 1.35; overflow-wrap: anywhere; } /* never clipped: the name is what tells the columns apart */ /* The column header sticks only when the script finds it compact enough (nuruma-ui.js cmpStick: screen >= 640px high, head + header <= 30 %). */ .nrm-ui.nrm-ui .nrm-wi-cmptable.is-stick thead tr:first-child > * { position: sticky; top: var(--nrm-s, 0px); z-index: 1; background: var(--nu-surface); } .nrm-ui.nrm-ui .nrm-wi-cmptable.is-stick thead tr:nth-child(2) > * { position: sticky; top: calc(var(--nrm-s, 0px) + var(--nrm-h1, 0px)); z-index: 1; background: var(--nu-surface); border-bottom: 1px solid var(--nu-line); } /* THE THOR styles every `.content table`: th white on grey, td white, odd rows #f2f2f2, table colour / size (measured live: the column names were white on white). * Every cell kind gets its own colour and ground here at (0,4,x)+ so no theme rule of that kind (0,2,3) can reach it; no !important. */ .nrm-ui.nrm-ui .nrm-wi-cmpdlg table.nrm-wi-cmptable { color: var(--nu-text); background: var(--nu-surface); border: 0; margin: 0; } .nrm-ui.nrm-ui .nrm-wi-cmpdlg table.nrm-wi-cmptable caption { color: var(--nu-text); background: var(--nu-surface); } .nrm-ui.nrm-ui .nrm-wi-cmpdlg table.nrm-wi-cmptable :is(th, td) { color: var(--nu-text); background: var(--nu-surface); text-align: left; } .nrm-ui.nrm-ui .nrm-wi-cmpdlg table.nrm-wi-cmptable tr:nth-child(n) > :is(th, td) { background: var(--nu-surface); } .nrm-ui.nrm-ui .nrm-wi-cmpdlg table.nrm-wi-cmptable th.nrm-wi-cmprl { color: var(--nu-sub); } .nrm-wi-cmprmc .nu-btn { width: 100%; min-height: 44px; padding: 0 2px; font-weight: 400; } /* Cells: price first (the emphasis the card has), then stock words; a condition of another edition is gone with the edition filter. */ .nrm-ui.nrm-ui .nrm-wi-cmpg + .nrm-wi-cmpg { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--nu-line); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cond { display: block; font-size: var(--nu-fs-s); line-height: 1.5; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cond-l, .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-condprod { display: block; font-size: var(--nu-fs-xs); font-weight: 700; color: var(--nu-sub); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cprice { display: block; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cprice b { font-size: var(--nu-fs-m); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cprice small, .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cprice .nrm-wi-listp { display: block; margin-left: 0; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cond-s { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-stores summary { min-height: 44px; display: flex; align-items: center; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-condhint, .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cnote { margin: 0; font-size: var(--nu-fs-xs); line-height: 1.45; } .nrm-ui.nrm-ui .nrm-wi-cmpout { margin: 4px 0 0; font-size: var(--nu-fs-xs); color: var(--nu-warn); } .nrm-wi-cmptable td .nu-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 4px; font-size: var(--nu-fs-s); line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; } .nrm-wi-cmptable td .nu-btn:first-child { margin-top: 0; } .nrm-ui .nrm-wi-cmptable .nu-btn-ghost { font-weight: 400; } /* Inside the dialog the shop links are SMALL OUTLINED BUTTONS (owner rule: a purchase button is clearly told from its ground; not filled, so three columns do not show three slabs): 2px * border var(--nu-btn-border) (>= 3:1 on the cell ground), accent label (9.7:1), 44px line, the arrow and the 広告 label inside, forced-colors border. Explicit colours at (0,4,x). */ .nrm-ui.nrm-ui .nrm-wi-cmptable td a.nu-btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2px; width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 4px 8px; box-sizing: border-box; background: var(--nu-btn-bg, var(--nu-surface)); border: 2px solid var(--nu-btn-border, #5F5A63); border-radius: var(--nu-r); box-shadow: none; color: var(--nu-link); font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; } .nrm-ui.nrm-ui .nrm-wi-cmptable td a.nu-btn:hover { background: var(--nu-btn-bg-selected, var(--nu-accent-soft)); border-color: var(--nu-text); color: var(--nu-accent-dark); text-decoration: underline; text-underline-offset: 3px; } .nrm-ui.nrm-ui .nrm-wi-cmptable td a.nu-btn:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .nrm-ui.nrm-ui .nrm-wi-cmptable td a.nu-btn .nu-ad { text-decoration: none; } .nrm-ui.nrm-ui .nrm-wi-cmptable td .nrm-wi-cmpc a.nu-btn + a.nu-btn { margin-top: 4px; } /* The card's own 比べる keeps ONE name; the state is the visible word 「✓ 選択中」 beside it (aria-pressed carries it for assistive technology). */ .nrm-wi-cmpon { display: none; font-size: 14px; font-weight: 700; color: var(--nu-accent-dark); } .nrm-ui .nrm-wi-cmpbtn[aria-pressed="true"] + .nrm-wi-cmpon { display: inline; } /* Phone: the dialog is a full-height sheet (it covers the page, the header is the sheet's own sticky top). */ @media (max-width: 767px) { .nrm-ui .nrm-wi-cmpdlg { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; } } /* Wide screens and landscape phones: title, count, 「違いだけ見る」 and close are one row. */ @media (min-width: 768px), (min-width: 560px) and (max-height: 520px) { .nrm-ui.nrm-ui .nrm-wi-cmptop { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "title count tool close"; align-items: center; gap: 0 16px; padding: 12px 16px; background: var(--nu-surface); border-bottom: 1px solid var(--nu-line); } .nrm-ui.nrm-ui .nrm-wi-cmphead, .nrm-ui.nrm-ui .nrm-wi-cmptool { display: contents; } .nrm-ui.nrm-ui .nrm-wi-cmphead h2 { grid-area: title; } .nrm-ui.nrm-ui .nrm-wi-cmphead form { grid-area: close; } .nrm-wi-cmpcount { grid-area: count; align-self: end; padding-bottom: 4px; } .nrm-wi-cmpdiff { grid-area: tool; } } @media (min-width: 768px) { .nrm-ui.nrm-ui .nrm-wi-cmpgrid { padding: 8px 16px 24px; } /* The dialog is as wide as its columns need (one item is not stretched over 1080px). */ .nrm-ui .nrm-wi-cmpdlg:has([data-compare-grid][data-n="1"]) { width: min(96vw, 560px); } .nrm-ui .nrm-wi-cmpdlg:has([data-compare-grid][data-n="2"]) { width: min(96vw, 800px); } .nrm-ui.nrm-ui .nrm-wi-cmpnote { padding: 4px 16px 20px; } .nrm-ui.nrm-ui .nrm-wi-cmpsame { margin: 12px 16px 0; } .nrm-wi-cmptable .nrm-wi-cmplc { width: 6em; } .nrm-ui.nrm-ui .nrm-wi-cmptable { font-size: var(--nu-fs-m); } .nrm-ui.nrm-ui .nrm-wi-cmptable th, .nrm-ui.nrm-ui .nrm-wi-cmptable td { padding: 10px 12px; } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th.nrm-wi-cmprl { padding-left: 0; font-size: var(--nu-fs-s); } .nrm-ui.nrm-ui .nrm-wi-cmptable thead th.nrm-wi-cmpitem, .nrm-ui.nrm-ui .nrm-wi-cmptable thead td.nrm-wi-cmprmc { padding: 4px 12px; } .nrm-ui.nrm-ui .nrm-wi-cmpimg { max-width: none; aspect-ratio: auto; height: 160px; } .nrm-ui.nrm-ui .nrm-wi-cmpname { font-size: var(--nu-fs-l); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cond { font-size: var(--nu-fs-m); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cprice b { font-size: var(--nu-fs-l); } .nrm-wi-cmptable td .nu-btn { font-size: var(--nu-fs-m); padding: 6px 12px; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-condhint, .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cnote { font-size: var(--nu-fs-s); } /* The bar becomes a centred tray. */ .nrm-ui.nrm-ui .nrm-wi-cmpbar { left: 50%; right: auto; bottom: calc(16px + var(--nuruma-tray-bottom, 0px)); width: min(640px, calc(100% - 32px)); transform: translateX(-50%); padding: 8px 12px 8px 16px; border: 1px solid var(--nu-line-strong); border-radius: var(--nu-r-l); box-shadow: var(--nu-shadow), 0 8px 24px rgba(36, 33, 43, .12); } } /* Forced colours: boundaries and states do not rely on the colours the author chose. */ @media (forced-colors: active) { .nrm-ui.nrm-ui .nrm-wi-cmpbar, .nrm-ui.nrm-ui .nrm-wi-cmpdlg { border: 1px solid CanvasText; } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody td, .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th { border-top: 1px solid CanvasText; } .nrm-ui.nrm-ui .nrm-wi-cmptable tbody td { border-left: 1px solid CanvasText; } .nrm-ui .nrm-wi-cmpbtn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; } .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; } } /* Short screens, the tray (400% zoom of a desktop window is 320x256; a landscape phone is 568x320): ONE compact row, never a third of the * screen. The scope line goes; the 3-item notice takes the place of the count (it is the more urgent text) instead of adding a row. */ @media (max-height: 520px) { .nrm-ui.nrm-ui .nrm-wi-cmpbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } .nrm-ui.nrm-ui .nrm-wi-cmpbar .nrm-wi-cmpstat { grid-column: 1; grid-row: 1; } .nrm-ui.nrm-ui .nrm-wi-cmpbar .nrm-wi-cmpmsg { grid-column: 1 / -1; grid-row: 2; } /* default (an engine without :has): its own row under the count, nothing overlaps */ .nrm-ui.nrm-ui .nrm-wi-cmpbar .nrm-wi-cmpbtns { grid-column: 2; grid-row: 1; flex: none; } .nrm-wi-cmpbar .nrm-wi-cmpbtns .nu-btn { flex: none; padding: 4px 12px; } .nrm-wi-cmpbar .nrm-wi-cmpscope { display: none; } .nrm-wi-cmpmsg { font-size: var(--nu-fs-xs); line-height: 1.25; } } /* With :has the notice takes the place of the count (one row); without it (Firefox 110-120 has @container but no :has) the rule above keeps two rows. */ @supports selector(:has(*)) { @media (max-height: 520px) { .nrm-ui.nrm-ui .nrm-wi-cmpbar .nrm-wi-cmpmsg { grid-column: 1; grid-row: 1; } .nrm-ui.nrm-ui .nrm-wi-cmpbar:has(.nrm-wi-cmpmsg:not(:empty)) .nrm-wi-cmpstat { display: none; } } } /* Short screens (landscape phone, 400% zoom): the head scrolls away with the content (the foot has a second 「閉じる」), so the sheet is all content. */ @media (max-height: 520px) { .nrm-ui.nrm-ui .nrm-wi-cmphead, .nrm-ui.nrm-ui .nrm-wi-cmptop { position: static; } .nrm-ui.nrm-ui .nrm-wi-cmpfoot { display: block; } } /* Short landscape (568x320, 400% zoom): the picture box is a low strip (the same height in every column, the whole image inside it), so the table, not the picture, fills the first screen. */ @media (max-height: 480px) { .nrm-ui.nrm-ui .nrm-wi-cmpimg { max-width: none; aspect-ratio: auto; height: 56px; } .nrm-ui.nrm-ui .nrm-wi-cmpname { margin-top: 0; } } /* Numbers never break inside: a date, a price or a counter is a span (nuruma-ui.js wraps each number with its unit; .nu-tok is nowrap), the words between them still wrap. */ .nrm-ui .nu-tok, .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-tok { white-space: nowrap; } /* In the table's narrow columns a token is unbreakable (keep-all: no break between its digits and its unit) but gives way as the LAST RESORT when it alone is wider than its cell * (anywhere): the reader's own text spacing (WCAG 1.4.12: letter-spacing .12em, word-spacing .16em) widens digits and must never push the dialog sideways. */ .nrm-ui.nrm-ui .nrm-wi-cmptable .nu-tok { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nu-num, .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-num { font-variant-numeric: tabular-nums; } /* Value rows written from the server's own words (edition, paid or not, shipping, total, when it was checked). 調査中 is a written state, quiet but readable. */ .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cmpv { margin: 0; font-size: inherit; line-height: inherit; color: var(--nu-text); } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cmpv.nu-unknown, .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cmpv.nu-unknown .nu-tok { color: var(--nu-sub); font-size: var(--nu-fs-s); font-weight: 400; } .nrm-ui.nrm-ui .nrm-wi-cmptable .nrm-wi-cmpc .nrm-wi-cmpv + .nrm-wi-cmpv { margin-top: 2px; } /* The affiliate label travels with the cloned link; it stays visible in the narrow columns (the arrow of the link goes, the label does not). */ .nrm-ui.nrm-ui .nrm-wi-cmptable td a .nu-ad { display: inline-block; flex: 0 0 auto; margin-left: 4px; } /* 「この特典のカードへ」: a text link with an arrow (it repeats per column, so it is not a button). */ .nrm-ui.nrm-ui .nrm-wi-cmptable a.nrm-wi-cmpgo { display: inline-flex; align-items: center; min-height: 44px; color: var(--nu-link); font-size: var(--nu-fs-s); line-height: 1.35; overflow-wrap: anywhere; } .nrm-ui.nrm-ui .nrm-wi-cmptable a.nrm-wi-cmpgo:hover { color: var(--nu-accent-dark); } /* 320 px: three columns have to carry a date and a price, so the label column and the padding give room (no number is broken to make it fit). */ @media (max-width: 359px) { .nrm-ui.nrm-ui .nrm-wi-cmptable th, .nrm-ui.nrm-ui .nrm-wi-cmptable td { padding-left: 3px; padding-right: 3px; } .nrm-wi-cmptable .nrm-wi-cmplc { width: 4.1em; } .nrm-ui.nrm-ui .nrm-wi-cmpgrid { padding-left: 2px; padding-right: 2px; } } /* Column identity while scrolling (nuruma-ui.js cmpIdBar / cmpIdSync): a thin sticky bar under the dialog's head, only shown once the real header has scrolled away and is not sticky itself. */ .nrm-ui.nrm-ui .nrm-wi-cmpid { position: sticky; top: var(--nrm-s, 0px); z-index: 1; background: var(--nu-surface); color: var(--nu-text); border-bottom: 1px solid var(--nu-line); } .nrm-ui.nrm-ui .nrm-wi-cmpid[hidden] { display: none; } .nrm-ui.nrm-ui .nrm-wi-cmpidt { display: grid; grid-template-columns: 4.2em repeat(var(--nrm-n, 3), minmax(0, 1fr)); margin: 0; background: var(--nu-surface); color: var(--nu-text); font-size: var(--nu-fs-s); line-height: 1.35; } /* the table's own columns: label column and equal value columns (same font size, same em) */ .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpidc { box-sizing: border-box; min-width: 0; padding: 3px 4px; background: var(--nu-surface); color: var(--nu-text); font-size: var(--nu-fs-xs); text-align: left; overflow: hidden; } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpid-s, .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpid-n { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpid-s { color: var(--nu-sub); font-weight: 400; } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpid-n { font-weight: var(--nu-fw-title, 700); } @media (min-width: 768px) { .nrm-ui.nrm-ui .nrm-wi-cmpidt { grid-template-columns: 6em repeat(var(--nrm-n, 3), minmax(0, 1fr)); font-size: var(--nu-fs-m); } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpidc { padding: 4px 12px; font-size: var(--nu-fs-s); } } @media (max-width: 359px) { .nrm-ui.nrm-ui .nrm-wi-cmpidt { grid-template-columns: 4.1em repeat(var(--nrm-n, 3), minmax(0, 1fr)); } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpidc { padding-left: 3px; padding-right: 3px; } } /* Short screens: ONE line (the bonus name), so the bar takes about 24px of the screen. */ @media (max-height: 520px) { .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpid-s { display: none; } .nrm-ui.nrm-ui .nrm-wi-cmpidt .nrm-wi-cmpidc { padding-top: 2px; padding-bottom: 2px; } } @media (forced-colors: active) { .nrm-ui.nrm-ui .nrm-wi-cmpid { border-bottom: 1px solid CanvasText; } } /* Lightbox (REVIEW3-A11Y nit): where the screen is tall enough the close button sits in a row of its own ABOVE the picture instead of over its corner; on a short screen (landscape phone, * 400 % zoom) the picture needs every pixel and the button stays in the corner. (STYLE owns the lightbox rules in nuruma-ui.css; this only applies on pages with the comparison.) */ @media (min-height: 561px) { .nrm-ui.nrm-ui .nu-lightbox form { position: static; display: flex; justify-content: flex-end; margin: 0; padding: 8px 8px 0; } .nrm-ui.nrm-ui .nu-lightbox img { max-height: min(70vh, calc(100vh - 250px)); max-height: min(70vh, calc(100dvh - 250px)); } } /* The store-list disclosure inside a table cell is a small outlined control too (its edge is the button token). */ .nrm-ui.nrm-ui .nrm-wi-cmptable td .nrm-wi-stores summary { box-sizing: border-box; padding: 4px 8px; background: var(--nu-btn-bg, var(--nu-surface)); border: 2px solid var(--nu-btn-border, #5F5A63); border-radius: var(--nu-r); color: var(--nu-link); font-weight: 700; cursor: pointer; } /* ---- Buttons are told from their ground (owner requirement 「ボタンを背景から明確に見分けられるように」) ---- * Every real button of the tray and the dialog has its own explicit fill / border / label at (0,4,x) (a theme's `button` reset cannot flatten them): * tray 比べる filled primary: fill var(--nu-accent) 9.7:1 on the tray ground, label #fff 9.7:1, 2px border of the same colour * tray 解除 outlined: 2px accent border (9.7:1), accent label, surface fill * dialog x / 閉じる 2px border var(--nu-sub) (7:1), ink label; 外す outlined like 解除 * 違いだけ見る the native 24px checkbox (visible edge, accent when on) * The shop links in the table are small outlined buttons (see above). All targets stay 44px. */ .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn-primary { background: var(--nu-accent); border: 2px solid var(--nu-accent); color: #fff; font-weight: 700; box-shadow: none; } .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn-primary:hover { background: var(--nu-accent-dark); border-color: var(--nu-accent-dark); color: #fff; } .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn-ghost, .nrm-ui.nrm-ui .nrm-wi-cmptable td.nrm-wi-cmprmc button.nu-btn { background: var(--nu-surface); border: 2px solid var(--nu-btn-border); color: var(--nu-link); font-weight: 700; text-decoration: none; box-shadow: none; } .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn-ghost:hover, .nrm-ui.nrm-ui .nrm-wi-cmptable td.nrm-wi-cmprmc button.nu-btn:hover { background: var(--nu-accent-soft); border-color: var(--nu-accent-dark); color: var(--nu-accent-dark); } .nrm-ui.nrm-ui .nrm-wi-cmphead button.nu-btn, .nrm-ui.nrm-ui .nrm-wi-cmpfoot button.nu-btn { background: var(--nu-surface); border: 2px solid var(--nu-sub); color: var(--nu-text); box-shadow: none; } .nrm-ui.nrm-ui .nrm-wi-cmphead button.nu-btn:hover, .nrm-ui.nrm-ui .nrm-wi-cmpfoot button.nu-btn:hover { background: var(--nu-bg); border-color: var(--nu-text); } .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"], .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"]:hover { border-width: 2px; border-style: solid; } .nrm-ui.nrm-ui .nrm-wi-cmpdiff input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--nu-accent); cursor: inherit; } /* the NATIVE box: its edge is ~4.5:1 on white, the accent fills it when on, forced colours draw it themselves */ .nrm-ui.nrm-ui .nu-lightbox a.nu-btn-primary { background: #fff; border: 2px solid #fff; color: var(--nu-accent); font-weight: 700; } /* the primary on the lightbox's dark ground: white fill (18:1), accent label */ .nrm-ui.nrm-ui .nu-lightbox a.nu-btn-primary:hover { background: #FDEEF0; border-color: #FDEEF0; color: var(--nu-accent-dark); } .nrm-ui.nrm-ui .nu-lightbox button.nu-lightbox-close { background: #111; color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px #111; } /* Forced colours (Windows High Contrast): no fixed colour of ours is used (a fixed white label lands on the browser's text backplate and vanishes); every button is ButtonFace with a ButtonText * label and a 2px edge (Highlight for the primary, so it still reads as THE action), links are LinkText, the disabled one GrayText. */ /* ---- D-088 readability of the comparison (same design rules as the TOP): the row labels are quiet, the shop and the price are what the eye lands on, the states stay plain words. * Rows (data-cmp-row): shop / ed / target / paid / price / ship / total / stock / checked / deadline ... Nothing is added, nothing is hidden: only weight, size, colour and rhythm. * The selectors are as specific as the rules they refine (tbody th.nrm-wi-cmprl, .nrm-wi-cmpv) and come later in the file. */ .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th.nrm-wi-cmprl { font-weight: 600; } .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="shop"] td { font-size: var(--nu-fs-m); font-weight: 700; color: var(--nu-text); } .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="price"] .nrm-wi-cprice b { font-size: var(--nu-fs-m); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="total"] .nrm-wi-cmpv:not(.nu-unknown) { font-size: var(--nu-fs-m); font-weight: 800; font-variant-numeric: tabular-nums; } .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="ship"] .nrm-wi-cmpv, .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="checked"] .nrm-wi-cmpv, .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="deadline"] .nrm-wi-cmpv { color: var(--nu-sub); font-size: var(--nu-fs-s); } .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="stock"] .nrm-wi-cmpv { font-size: var(--nu-fs-s); } .nrm-ui.nrm-ui .nrm-wi-cmptable td, .nrm-ui.nrm-ui .nrm-wi-cmptable tbody th.nrm-wi-cmprl { padding-top: 12px; padding-bottom: 12px; } @media (min-width: 560px) { .nrm-ui.nrm-ui .nrm-wi-cmptable tr[data-cmp-row="price"] .nrm-wi-cprice b { font-size: var(--nu-fs-l); } } @media (forced-colors: active) { .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn, .nrm-ui.nrm-ui .nrm-wi-cmphead button.nu-btn, .nrm-ui.nrm-ui .nrm-wi-cmpfoot button.nu-btn, .nrm-ui.nrm-ui .nrm-wi-cmptable td.nrm-wi-cmprmc button.nu-btn, .nrm-ui.nrm-ui .nu-lightbox button.nu-lightbox-close, .nrm-ui.nrm-ui .nu-lightbox a.nu-btn-primary, .nrm-ui.nrm-ui .nrm-wi-cmptable td .nrm-wi-stores summary { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; box-shadow: none; } .nrm-ui.nrm-ui .nrm-wi-cmpbar button.nu-btn-primary { background: ButtonFace; color: ButtonText; border: 2px solid Highlight; box-shadow: inset 0 0 0 2px Highlight; font-weight: 700; } .nrm-ui.nrm-ui .nrm-wi-cmptable td a.nu-btn { background: Canvas; color: LinkText; border: 2px solid ButtonText; } .nrm-ui.nrm-ui .nrm-wi-cmpbar .nu-btn[aria-disabled="true"] { background: ButtonFace; color: GrayText; border-color: GrayText; box-shadow: none; } }