/* ════════════════════════════════════════════════════════════════════════════ taste.css — styling for the "surrogate of taste" page (taste.html / taste.js). Shares the house palette and the monospace UI font with soup/guess/index, but not their chrome: this page has no viewport, no burger menu and no docks. It is a three-view shell (judge / train / ranking) under one bar, so the layout here is a plain grid rather than the floating panels the graph pages use. The one rule the whole page is built around: when you are judging a pair, the two images must be as large as the window allows and everything else must get out of the way — a cramped thumbnail makes for a careless judgement, and the judgements are the only thing the model ever learns from. ════════════════════════════════════════════════════════════════════════════ */ :root { --font-ui: 'Courier New', Courier, monospace; --c-text: #333333; --c-header-text: #000000; --c-text-muted: #777777; --c-panel-bg: #ffffff; --c-page-bg: #e9ecef; --c-border: #000000; --c-hairline: #00000022; --c-highlight: #cfe7e5; --c-selected: #ff7e15; --c-accent: #09ffea; --c-button-bg: #ffffff; --c-button-bg-hover: var(--c-highlight); --bar-h: 34px; --status-h: 24px; font-family: var(--font-ui); color: var(--c-text); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--c-page-bg); } body { display: grid; grid-template-rows: var(--bar-h) 1fr var(--status-h); } /* ── Top bar ──────────────────────────────────────────────────────────────── */ .bar { display: flex; align-items: center; gap: 14px; padding: 0 12px; /* Last resort for a window too narrow even for the compact bar below: the TOOLBAR scrolls, the page never does. A non-wrapping flex row would otherwise widen and drag the judge cards past the viewport with it. */ min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--c-panel-bg); border-bottom: 1px solid var(--c-border); font-size: 12px; } .bar::-webkit-scrollbar { display: none; } .bar__home { flex: 0 0 auto; text-decoration: none; color: var(--c-header-text); font-size: 15px; line-height: 1; padding: 2px 6px; } .bar__home:hover { background: var(--c-highlight); } .bar__title { font-weight: 700; letter-spacing: 0.18em; color: var(--c-header-text); } .bar__field { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--c-text-muted); } .bar__field select { min-width: 0; } .bar__count { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--c-text-muted); } .tabs { flex: 0 0 auto; } .bar__spacer { flex: 1; } .tabs { display: flex; gap: 0; } .tab { font: inherit; font-size: 12px; padding: 5px 14px; cursor: pointer; color: var(--c-text); background: transparent; border: 1px solid transparent; border-bottom: none; } .tab:hover { background: var(--c-highlight); } .tab--on { background: var(--c-page-bg); border-color: var(--c-border); font-weight: 700; } /* ── Views ────────────────────────────────────────────────────────────────── */ #main { position: relative; overflow: hidden; } .view { display: none; height: 100%; overflow: auto; } .view--on { display: block; } #view-judge { display: none; grid-template-rows: 1fr auto auto; gap: 10px; padding: 12px; } #view-judge.view--on { display: grid; } /* ── Judge: the pair ──────────────────────────────────────────────────────── */ .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; } .card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; /* Bottom padding reserves the .card__key strip: now that the image fills the card, an un-letterboxed tall picture would otherwise run underneath it. */ padding: 8px 8px 24px; font: inherit; cursor: pointer; background: var(--c-panel-bg); border: 1px solid var(--c-border); transition: border-color 0.1s ease, box-shadow 0.1s ease; } .card:hover { border-color: var(--c-selected); box-shadow: 0 0 0 2px var(--c-selected); } .card:disabled { cursor: default; opacity: 0.4; } .card:disabled:hover { border-color: var(--c-border); box-shadow: none; } .card img { /* Fit the panel proportionally, GROWING as well as shrinking. `width/height: 100%` makes the element claim the whole card; `object-fit: contain` then scales the actual pixels inside that box, preserving aspect ratio and letterboxing the remainder. The obvious `max-width/max-height: 100%` only ever shrinks, so a small source — 300px on its short side is what taste_sampler writes by default — would sit marooned in the middle of a large panel, which is exactly the cramped view that makes for careless judgements. */ width: 100%; height: 100%; /* Flex items floor at their content size without these, which would let a wide image push the card wider than its grid column. */ min-width: 0; min-height: 0; object-fit: contain; /* The images are the judgement. Nothing here may tint or crop them. */ image-rendering: auto; } .card__key { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); padding: 1px 8px; font-size: 11px; color: var(--c-text-muted); background: #ffffffcc; pointer-events: none; } .verdict { display: flex; align-items: center; gap: 8px; } .verdict__gap { flex: 1; } .hint { margin: 0; font-size: 11px; color: var(--c-text-muted); min-height: 14px; } /* ── Controls ─────────────────────────────────────────────────────────────── */ .btn { font: inherit; font-size: 12px; padding: 5px 14px; cursor: pointer; color: var(--c-text); background: var(--c-button-bg); border: 1px solid var(--c-border); } .btn:hover:not(:disabled) { background: var(--c-button-bg-hover); } .btn:disabled { cursor: default; color: var(--c-text-muted); opacity: 0.5; } .btn--primary { font-weight: 700; } .btn--ghost { border-color: var(--c-hairline); color: var(--c-text-muted); } select, input[type='number'], input[type='text'] { font: inherit; font-size: 12px; padding: 3px 6px; color: var(--c-text); background: var(--c-panel-bg); border: 1px solid var(--c-border); } input[type='number'] { width: 92px; } /* ── Panels (train view) ──────────────────────────────────────────────────── */ .cols { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 12px; align-items: start; padding: 12px; } .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .panel { padding: 12px 14px 14px; background: var(--c-panel-bg); border: 1px solid var(--c-border); } .panel--flush { margin: 12px 12px 0; } .panel h2 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-header-text); } .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; } .row--buttons { flex-wrap: wrap; } .row > label { flex: 1; color: var(--c-text-muted); } .inline-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-muted); } .note { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--c-text-muted); } /* Backbone multi-select: a scrolling checkbox list, because picking two and concatenating them is a supported (and meaningful) choice, not an edge case. */ .backbones { /* Tall enough for the whole catalogue (8 CLIP + 4 DINOv2) without scrolling: a clipped list reads as "these are the options", and DINOv2 being below the fold is exactly the choice a user would never discover. */ max-height: 300px; overflow: auto; border: 1px solid var(--c-hairline); padding: 4px 6px; margin-bottom: 8px; } .backbones label { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 11.5px; cursor: pointer; } .backbones label:hover { background: var(--c-highlight); } /* ── Progress + curve ─────────────────────────────────────────────────────── */ .progress { height: 6px; margin: 4px 0 10px; background: var(--c-hairline); } .progress__fill { height: 100%; width: 0; background: var(--c-selected); transition: width 0.1s linear; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px 10px; margin-bottom: 10px; font-size: 11.5px; } .stat__label { display: block; color: var(--c-text-muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .stat__value { color: var(--c-header-text); font-weight: 700; } .curve { display: block; width: 100%; height: 150px; margin-bottom: 8px; border: 1px solid var(--c-hairline); } .log { max-height: 132px; margin: 0; padding: 6px 8px; overflow: auto; font: inherit; font-size: 11px; line-height: 1.45; color: var(--c-text-muted); background: #f4f6f7; border: 1px solid var(--c-hairline); white-space: pre-wrap; } /* ── Ranking grid ─────────────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; } .cell { display: flex; flex-direction: column; background: var(--c-panel-bg); border: 1px solid var(--c-border); } .cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f6f7; } .cell__meta { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; font-size: 10.5px; color: var(--c-text-muted); border-top: 1px solid var(--c-hairline); } .cell__rank { font-weight: 700; color: var(--c-header-text); } /* ── Status bar ───────────────────────────────────────────────────────────── */ .statusbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 11px; color: var(--c-text-muted); background: var(--c-panel-bg); border-top: 1px solid var(--c-border); } .statusbar > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .statusbar__spacer { flex: 1 1 auto; } .statusbar .is-error { color: #c62828; } /* Narrow windows: stack the pair vertically rather than shrinking both images into strips, and let the train view become one column. */ @media (max-width: 760px) { .pair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .cols { grid-template-columns: 1fr; } } /* The bar's own threshold, deliberately not 760: it needs ~900px to lay out comfortably, and the pair-stacking above is a question about image shape, not toolbar width. Give the controls the room instead of the decoration -- the title and image count are what a narrow window can lose without losing any function, and the field labels collapse via font-size so the selects (which restore it) keep their own text. */ @media (max-width: 940px) { .bar { gap: 8px; } .bar__title, .bar__count { display: none; } .bar__field { font-size: 0; } .bar__field select { font-size: 12px; } .tab { padding: 5px 9px; } }