/* ArtIsWar additions. Kept in its own file so upstream merges never touch it. Three things live here: the source link cell, an optional rule hiding the built-in export button, and a forced dark theme in the site palette. */ /* --------------------------------------------------------------------------- 1. Source link -- last cell in the headphone-manager row. graphtool.js appends as the final cell; the row is display:flex with order 0..7 already assigned (curve-color 0, item-line 1, channels 2, baseline 3, hide 4, pin 5, export 6, remove 7), so order:8 puts this after the close button. The cell is emitted on every row and left empty where there is no url, which keeps all rows the same shape. --------------------------------------------------------------------------- */ tbody.curves > tr > td.source-link { order: 8; flex: 104px 0 0; justify-content: flex-end; padding-right: 16px; } tbody.curves > tr > td.source-link a { color: var(--accent-color); font-family: var(--font-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; transition: color 0.12s ease; } tbody.curves > tr > td.source-link a:hover, tbody.curves > tr > td.source-link a:focus-visible { color: var(--font-color-primary); text-decoration: underline; } /* --------------------------------------------------------------------------- 2. Built-in export button. HIDDEN. CrinGraph's per-row export writes the curve as CrinGraph holds it: resampled onto its own 480-point 1/48-octave grid, edge-extrapolated past where the measurement ends, no header, channels named (1) and (2). That is not the published measurement -- source in the same row points at the real file. Two downloads in one row doing different things was confusing, so the ambiguous one goes. Scoped to tbody.curves, so this touches ONLY the per-row button. The toolbar Screenshot button that saves graph.png is a different element and is not affected. Comment this line out to restore; nothing is deleted from the fork. --------------------------------------------------------------------------- */ tbody.curves > tr > td.button-export { display: none; } /* --------------------------------------------------------------------------- 3. Forced dark theme, ArtIsWar palette. config.js sets themingEnabled = false, so graphtool.js never adds a theme-default/theme-dark/theme-contrast class to and never builds the toggle -- only the bare :root palette applies. The doubled :root beats style-alt-theme.css, which setLayout() appends to after this file and would otherwise win on equal specificity. Values keep upstream's dark-theme lightness relationships and substitute the site palette from website/css/brutalist.css where the roles line up: --black #000000 --white #ffffff --gold #d4af37 --grid #1a1a1a --grid-dim #0a0a0a rgba(255,255,255,0.5) muted text Curve colours are NOT here. getCurveColor() in graphtool.js generates them algorithmically from the curve id for contrast between simultaneous curves, independent of the theme; brand colours would make overlays harder to read. --------------------------------------------------------------------------- */ :root:root { --accent-color: #d4af37; /* --gold: active buttons, source link */ --aiw-red: #cc0000; /* --red: warning and destructive only, as on the site */ --accent-color-contrast: rgba(255, 255, 255, 0.5); --background-color: #000000; /* --black: page */ --background-color-contrast: #1a1a1a; /* --grid: borders and dividers */ --background-color-contrast-more: rgba(255, 255, 255, 0.5); /* axis text, scale handles */ --background-color-graph: #0a0a0a; /* --grid-dim: plot area */ --background-color-inputs: #0a0a0a; --font-color-primary: #ffffff; /* --white */ --font-color-secondary: #000000; /* text on the gold accent */ --font-color-inputs: rgba(255, 255, 255, 0.5); --header-color: #000000; --header-links-color: #ffffff; --header-menu-icon-color: #ffffff; --scrollbar-color: 0, 0, 0; --scrollbar-accent: 255, 255, 255; --logo-filter: invert(1); --svg-filter: invert(1); } /* --------------------------------------------------------------------------- 4. Embed-only trims. externalLinksBar is a single global boolean -- there is no config switch that separates the standalone page from the embed. CrinGraph ships an ?embed mode that would give CSS a hook, but it strips the toolbar, target picker, manager rows and browse panel down to a static image. So config.js sets data-artiswar-framed on when window.self !== window.top instead, which keeps the cross-links to other squig sites on the standalone page, where they are ordinary community courtesy, and drops them inside the tier list page, where they would be competitors on your own site. The credit goes the other way: it stays in the embed too, since that is where most people will see the graph. --------------------------------------------------------------------------- */ html[data-artiswar-framed] div.external-links { display: none; } /* The credit line, quiet by default in both modes. */ div.accessories aside p.center { margin: 0; padding: 12px 0 20px; text-align: center; color: var(--font-color-inputs); font-family: var(--font-secondary); font-size: 11px; } div.accessories aside p.center a { color: var(--font-color-inputs); text-decoration: underline; } div.accessories aside p.center a:hover { color: var(--accent-color); } /* --------------------------------------------------------------------------- 5. The site red. brutalist.css uses --red narrowly -- the ">" brand prompt, the hover border on a card, a price, a corner accent. It is an attention/destructive marker, not a surface, so it is used the same way here rather than as decoration. --------------------------------------------------------------------------- */ /* Echoes the site header's "> ARTISWAR". */ header.header div.logo a span::before { content: "> "; color: var(--aiw-red); } /* Channel-imbalance warning. Semantically a warning, and easy to miss in grey. */ /* style-alt.css forces every text in this cell with !important, so this has to match it -- hence the same specificity path plus the class, and !important. */ tbody.curves > tr > td.channels text.imbalance { fill: var(--aiw-red) !important; color: var(--aiw-red) !important; font-weight: 700; } /* Destructive actions, on hover only -- matches .product-card:hover on the site. */ tbody.curves > tr > td.remove:hover { color: var(--aiw-red); } #phones div.phone-item span.remove:hover { color: var(--aiw-red); } /* --------------------------------------------------------------------------- 6. Variants listed under a model in the browse list. graphtool.js emits div.phone-item-variants inside each div.phone-item that has more than one configuration. Indented under the model name, each with a "+" affordance matching the manager row's variant popouts. --------------------------------------------------------------------------- */ /* The item is display:flex/align-items:center, so the sub-list has to claim a full row of its own or it lands beside the model name. */ #phones div.phone-item:has(div.phone-item-variants) { flex-wrap: wrap; align-items: stretch; } /* The add/remove button must stay on the model's own row, not wrap below the sub-list, so it is ordered ahead of it explicitly. */ #phones div.phone-item div.phone-item-add { order: 1; } #phones div.phone-item div.phone-item-variants { order: 2; flex: 0 0 100%; display: flex; flex-direction: column; /* Its own ground. The row machinery writes an inline background onto this subtree, so the parent's highlight colour bleeds through and leaves the text unreadable. !important is how upstream solves the identical problem for the sibling .phone-item-add a few rules up in style-alt.css. */ background-color: var(--background-color) !important; border-top: 1px solid var(--background-color-contrast); } #phones div.phone-item div.phone-item-variant { position: relative; padding: 9px 30px 9px 22px; color: var(--font-color-inputs); font-size: 0.92em; line-height: 1.2; cursor: pointer; } #phones div.phone-item div.phone-item-variant:hover { color: var(--font-color-primary); background: var(--background-color-contrast); } #phones div.phone-item div.phone-item-variant::after { content: "+"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--accent-color); font-weight: 700; } /* --------------------------------------------------------------------------- 7. Visible scrollbars on the horizontal strips. The toolbar, target picker and links bar are all overflow-x:auto and wider than the viewport at most window sizes. They scroll correctly -- the range is right -- but style-alt.css paints the thumb at 10% opacity, which against this palette (--scrollbar-accent 255,255,255 on black) is invisible. With no visible bar there is no affordance, and Chrome does not translate a plain wheel to horizontal scroll, so the content past the right edge looks unreachable. Alpha raised and the horizontal bar made tall enough to grab. --------------------------------------------------------------------------- */ div.tools::-webkit-scrollbar, div.targets::-webkit-scrollbar, div.external-links::-webkit-scrollbar, div.tutorial-description::-webkit-scrollbar { height: 10px; background-color: rgba(255, 255, 255, 0.05); border-radius: 10px; } div.tools::-webkit-scrollbar-thumb, div.targets::-webkit-scrollbar-thumb, div.external-links::-webkit-scrollbar-thumb, div.tutorial-description::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.28); border-radius: 10px; } div.tools::-webkit-scrollbar-thumb:hover, div.targets::-webkit-scrollbar-thumb:hover, div.external-links::-webkit-scrollbar-thumb:hover, div.tutorial-description::-webkit-scrollbar-thumb:hover { background-color: var(--accent-color); } /* Firefox. style-alt.css sets `scrollbar-color: dark`, which is not a valid value for that property and is discarded. */ div.tools, div.targets, div.external-links, div.tutorial-description { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.05); }