/* ================================================================== THE SELECTED TINT. One definition, every picker. Selection used to be a white 2px ring plus a white 10%-alpha fill, which had two problems. The visible one: white is the accent token, so "selected" looked like every other emphasised thing on the page. The invisible one: on .size-option the flat tier below states border and fill important, so the ring and the fill were BOTH being dropped and the selected size tile painted pixel-identical to the unselected ones. Portrait was the chosen size and nothing on screen said so. So selection stops being a RING and becomes a tint in the material itself: the same glass, lit. It stays white, which is the product's accent - a coloured selection was tried on 2026-08-15 and rejected on sight, and the objection was right: nothing else on these pages carries a hue, so an amber tile read as a warning rather than as a choice. White does the job here in a way it could not before, because the problem was never the colour. It was that the old white ring was being deleted by the tier below. A wash plus a rim is inside the material and nothing outranks it. ================================================================== */ /* 2026-09-23, the owner's picks "grey: dim" (every lit step one third dimmer) and "segmented: dim" (the frosted thumb at 9% instead of 14%). One tint still: the wash is .09 for the thumb and for every selected tile, which is the one-third step down from .14. --kg-sel-solid, the reduced-transparency answer, keeps its separation on purpose: that is a reader asking for MORE contrast, not less. 2026-09-24: .09 -> .075. The owner asked whether every floating-glass switch is the dimmer one he picked for the shell's top bar (7.5%, softer edges) and wanted it everywhere; the bar's scoped copy is deleted and this is its one definition now, for the thumb and the selected tile. 2026-09-25: .075 -> .05, and the thumb's top rim .2 -> .12. The owner measured the top switcher's thumb as "too bright grey" (rgb 51 over a rgb 20 bar on his device, where the lens tier lifts the bar under it) and asked for a dimmer one everywhere. */ :root { --kg-sel-wash: rgba(255, 255, 255, 0.05); --kg-sel-rim: rgba(255, 255, 255, 0.55); --kg-sel-rim-soft: rgba(255, 255, 255, 0.3); /* The segmented thumb's edge, and the reason it is not --kg-sel-rim-soft. That one is a SELECTION rim: it separates a chosen tile from identical neighbours, and at 30% it is loud enough to do that across a grid. The thumb is the only filled shape in its track, so its edge is only defining the control's own boundary - which is what the Hairline step on the ink scale is for. 10%, the same value every other control border in the system uses, rather than a fourth rim alpha invented here. */ --kg-sel-rim-thin: rgba(255, 255, 255, 0.1); --kg-sel-ink: rgba(255, 255, 255, 0.78); /* --kg-sel-wash already composited over --bg-secondary, for reduced transparency - where the wash has to become one opaque colour. Kept as its own token so the two stay in step: change the wash and this is the second line to change, not a literal to go hunting for. */ --kg-sel-solid: rgb(58, 58, 60); } /* LIGHT THEME IS NOT THE SAME VALUES INVERTED, and the first attempt at it was wrong in a way only a screenshot showed. A white wash on a white panel is nothing: all four tiles rendered identical and the pixel check still passed, because it composited the declared layers instead of reading what was drawn. On a dark panel the selected tile gets BRIGHTER. On a light one there is no headroom above the panel, so the EDGE does the work and the fill only nudges - which is what the product's own light theme already says, where --accent is #000000 and --accent-dim is rgba(0,0,0,0.05). "Selection is white" means "selection is the accent", and in light theme the accent is black. Same idea, opposite end of the ramp. The 0.05 wash is deliberately tiny so the ONE token still serves both surfaces: on a tile it is the accent-dim nudge, and on the segmented thumb - which composites over rgba(255,255,255,0.95) on a grey track - it darkens a white pill by 5% and leaves it reading white. */ [data-theme="light"] { --kg-sel-wash: rgba(0, 0, 0, 0.05); --kg-sel-rim: rgba(0, 0, 0, 0.5); --kg-sel-rim-soft: rgba(0, 0, 0, 0.28); --kg-sel-rim-thin: rgba(0, 0, 0, 0.1); --kg-sel-ink: rgba(0, 0, 0, 0.62); --kg-sel-solid: rgb(214, 214, 220); } /* ================================================================== THE MATERIAL, ON THE FIRST PAINT, ON EVERY ENGINE. This block is deliberately NOT gated behind html.kg-lg-on, and that is the fix for two separate complaints that turned out to be one bug. Everything here used to sit behind that class, which JS adds after DOMContentLoaded. So on every reload the buttons painted in their old page styling first and the whole material - fill, shadow, edge - swapped in afterwards. The refraction arriving late is unavoidable; a canvas has to measure the element before it can build a map for it. The FILL arriving late never was, because none of it depends on measuring anything. The same gate is why Safari and Firefox showed no material at all: the module probes for Chromium and returns before adding the class, so on those engines the buttons kept whatever they had and the house material simply did not exist. Ungating it gives them the pane without the bend, which is the honest degradation - a tinted, blurred, shadowed capsule - rather than a control that looks like the CSS failed to load. The fallback blur is 1px on purpose. That is the article's own feGaussianBlur stdDeviation, the softening its filter applies before displacing, so the pre-lens frame and the post-lens frame are the same material and the lens arriving changes only the rim. A heavier placeholder blur would trade a missing effect for a visible swap. Selectors are concrete rather than [data-kg-liquid-glass] alone, because that attribute is stamped by JS too - on the controls it claims, it would arrive exactly as late as the class did. ================================================================== */ /* THE FROST, AS A LENGTH, FOR THE TIER WITHOUT A LENS. The clarity boot script writes --kg-glass-frost-px on the html element (0px at the shipped clarity, up to the frost maximum). Here it becomes the --kg-lg-frost the backdrop rules below add to their blur - and on the lensed tier it is pinned to 0px, because there the same frost already rides inside the filter chain, after the displacement map, and a blur in front of the lens would soften the detail the lens exists to bend. Declared on html so it inherits, as a stylesheet value rather than the inline one, so the pin can be a plain rule. */ html { --kg-lg-frost: var(--kg-glass-frost-px, 0px); } html.kg-lg-on { --kg-lg-frost: 0px; } [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]), .generate-btn-internal, .generate-btn-desktop, .generate-btn-mobile > button, #kMiniLauncher, .km-import-card { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)); border: 0; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(calc(1px + var(--kg-lg-frost, 0px))); backdrop-filter: blur(calc(1px + var(--kg-lg-frost, 0px))); } /* ------------------------------------------------------------------ THE FLAT TIER - the same material, minus a bend that was never there. A backdrop-filter is not free and it is not conditional: Chromium promotes the element to its own compositing layer, reads the backdrop back out, runs the filter graph and composites the result, every frame the layer is dirty. That is worth paying where the backdrop varies. It is worth nothing at all where the backdrop is a flat panel fill, and the reason is arithmetic rather than taste: - blur of a constant field is that same constant - displacement of a constant field is that same constant - saturate() of a neutral grey is that same neutral grey So over #0a0a0a or #141414 the entire chain returns the backdrop it was given. The one thing it does add is the specular hairline - feFuncA slope 0.4 over the rim map - and that is a real, visible highlight, so it is not simply dropped. It is redrawn as two inset hairlines along the article's own 60-degree light axis, which is what makes the rim brightest at the top-right and bottom-left. A box-shadow is a paint operation inside the element's existing layer; it costs no readback and no layer. MEASURED, on the served page, before deciding: 291 elements on this page can put varying pixels on screen (img, canvas, svg, background-image). Not one of them geometrically underlies any of the controls listed here. The controls that DID come back with a varying backdrop are the fixed dock, the fixed progress island, the popovers, and the drag-and-drop import card over its 42%-alpha veil - and those all keep their lens. The tint is byte-for-byte the tint above. The user's requirement was that the colour is retained, and over a flat backdrop it is retained exactly, not approximately. ------------------------------------------------------------------ */ [data-kg-liquid-glass="flat"], .help-icon, .reset-btn, .model-search-clear, .kg-navgroup, .lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option, .image-btn, .experience-choice, .kpl-tab, .import-upload-box, #hqSamplerSelect, #hqSchedulerSelect, .kg-select-button, #userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)); border: 0; box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.1), inset 1px -1px 0 0 rgba(255, 255, 255, 0.1), 0 4px 19px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Light theme lights the same two lobes, but the rim that reads as a highlight on a dark pane reads as nothing on a white one, so the top-right lobe comes up and the bottom-left one becomes a shadow. */ html[data-theme="light"] [data-kg-liquid-glass="flat"], [data-theme="light"] #userLoraUploadOpenBtn, [data-theme="light"] #userCheckpointUploadOpenBtn { box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.55), inset 1px -1px 0 0 rgba(0, 0, 0, 0.06), 0 4px 19px rgba(0, 0, 0, 0.4); } [data-theme="light"] [data-kg-liquid-glass], [data-theme="light"] .generate-btn-internal, [data-theme="light"] .generate-btn-desktop, [data-theme="light"] .generate-btn-mobile > button, [data-theme="light"] #kMiniLauncher { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)); } /* The dock rule pins its fill important, so the first-paint material has to match it there or the mobile Generate button waits for JS anyway. */ .generate-btn-mobile > button { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; border: 0 !important; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important; color: var(--text-primary, #ffffff) !important; } [data-theme="light"] .generate-btn-mobile > button { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; color: var(--text-primary, #1d1d1f) !important; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { [data-kg-liquid-glass], .generate-btn-internal, .generate-btn-desktop, .generate-btn-mobile > button, #kMiniLauncher { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-secondary, #141414) !important; border: 1px solid var(--border-color, #2a2a2a) !important; box-shadow: none !important; } } /* The refracting path only ever ADDS to what an element already had, so an element that never gets upgraded is not styled by this file at all. Both halves are needed and they do different jobs. The filter bends the backdrop; the MATERIAL - tint, hairline, and the two inset highlights - is what makes the thing read as a pane of glass at all. The K pill already carried its own material, which is why it looked like glass the moment the filter arrived, while the Generate button did not and simply lost the solid --accent fill it used to have. Anything that opts in gets the material here, so the two match. */ html.kg-lg-on [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]) { /* No CSS blur. The article's player pill carries backdropFilter of url(#filter) and nothing else - its softening is the feGaussianBlur INSIDE the chain, at the demo's own Blur Level of 1.0, which is the pass the displacement map then bends. A CSS blur() in front of the filter blurs the backdrop before the lens sees it, and a lens cannot bend detail that has already been averaged away. The variable stays so the menus, which are tuned separately and genuinely want 6px, can still ask for it. */ -webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)); backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)); /* --glass-rgb #222222 at --glass-bg-alpha 0.6, the article's own dark pair. Much denser than the 0.10 white this replaces, and that is the point: the old tint let a bright backdrop through almost untouched, so a white label sat on white. */ background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)); /* No border and no inset highlights. The rim light is now the filter's own specular hairline, measured off the article's baked map; an inset highlight on top of it is the same light drawn twice, and the second one is not refracted. Shadow is the article's exactly. */ border: 0; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4); } /* The primary action carries the same material as everything else here - in the article the player pill, the search field and the artwork tile are one material at three sizes. Stated outright rather than through --kg-lg-tint because the button carries two classes that are both styled elsewhere in the page, so routing the fill through a custom property left the winning declaration ambiguous. */ /* !important, and it is load-bearing rather than decoration. The sticky mobile dock is styled by a .generate-btn-mobile button rule that pins background rgba(255,255,255,0.15) and its border as important, which no amount of specificity can beat - and after the page moves the K button into that dock at runtime, BOTH surfaces match it. That rule is why the two buttons were still wearing a thin white wash while the filter under them was already doing the right thing. Anything that opts in gets its material from this file; that is the point of opting in. */ html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass], html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass], html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass], html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass] { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; border: 0 !important; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important; color: var(--text-primary, #ffffff) !important; } /* Taking the base declaration important takes the page's hover with it, so hover has to be restated here or the button stops answering the pointer. The article has no hover state to copy - its player is not a control - so this is the smallest lift that still reads: the same tint, lighter. */ html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass]:hover { background: var(--kg-lg-tint-hover, rgba(58, 58, 58, 0.64)) !important; } /* WHY THE CIRCLE ROUND THE K NEVER LOOKED LIKE GLASS, on any browser. The placeholder rule at the top of this file lists concrete selectors so the material is there before the JS lands, and #kMiniLauncher is one of them. A selector list is scored per selector, so for this element that declaration carries an ID's weight - 1-0-0. The lensed upgrade that hands every opted-in control its backdrop-filter is html.kg-lg-on [data-kg-liquid-glass]:not(...), which is 0-3-1. Three classes lose to one id. So the launcher kept the 1px placeholder blur for the entire life of the page while every other control moved on, and the block above only ever restated its tint and shadow - never its filter. Measured: backdrop-filter computed to blur(1px) with the lensed tier fully on, idle and mid-generation alike. The block above cannot simply gain the declaration: it is shared with the Generate buttons, which are class-scoped, already win, and are deliberately tuned. So the launcher gets its own rule, at ID weight. */ html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass], html.kg-lg-on #kMiniLauncher { -webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; } /* AND WHERE THERE IS NO LENS, THE SOFTENING HAS TO BE A CSS BLUR. On the lensed tier the softening comes from the feGaussianBlur inside the filter chain, which is why the rule above asks for 0px of CSS blur - a blur in front of the lens averages away the detail the lens exists to bend. Without the chain there is nothing doing that job, and a 60% tint with no blur behind it is a painted disc, which is what most browsers have been showing. kg-lg-on is the honest condition here: it means the chain is actually on this page, not merely that the browser might support it. The inset highlight is the same reasoning. On the lensed tier the rim light is the filter's own specular hairline and drawing a second one would be the same light twice; with no filter there is no hairline at all, so the edge has to be drawn or the circle has no rim. */ html:not(.kg-lg-on) #kMiniLauncher { -webkit-backdrop-filter: blur(calc(14px + var(--kg-lg-frost, 0px))) saturate(1.7) !important; backdrop-filter: blur(calc(14px + var(--kg-lg-frost, 0px))) saturate(1.7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 19px rgba(0, 0, 0, 0.4) !important; } /* DISABLED ON THIS BUTTON MEANS BUSY, NOT UNAVAILABLE, and that distinction is the whole rule. Every place the page disables Generate, it does so because work has just started, and it says so in the label in the same breath - Generating..., Upscaling..., Variation..., Please wait... There is no not-ready state to confuse it with: the button is never disabled for want of a prompt. So the pane must not change. A control that dissolves into flat grey the moment you press it does not read as the same control being busy, it reads as a different control appearing, which is exactly the drop-out that had to be fixed. The material therefore stays identical to the enabled state and only the LABEL steps back a shade - which is also the honest signal, because that label is now live status text rather than a call to action. important, and specifically the backdrop-filter has to be: the page's own .generate-btn-internal:disabled sets backdrop-filter to none, and .generate-btn-mobile button:disabled pins a flat rgba(60,60,60,0.6) with important. Those two are what were switching the glass off mid-run. */ html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; /* Full strength, not dimmed. The instinct is to step the label back to --text-secondary, and that was measured and rejected: over the worst backdrop this pane can be handed - a bright generated image - #888 on the composited surface is 1.2:1, and this label is now live status text that has to be readable exactly when the page is busiest. The enabled label holds 4.27:1 on that same backdrop, so busy keeps it. */ color: var(--text-primary, #ffffff) !important; border: 0 !important; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important; -webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; /* The last thing that was still fading this control mid-run. The rules above restore the tint, the blur and the shadow, and then the page's plain button:disabled rule - an opacity of 0.8 - quietly washed all three of them out together. Same "it goes clearer when it starts" by a different route, and it flatly contradicts what these rules exist to say. Busy is signalled by the label and the cursor, never by fading the material. (No braces in this comment on purpose - a stray one has eaten the following rule in this file before.) */ opacity: 1 !important; /* not-allowed says never; this is a wait. */ cursor: progress !important; } html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; color: var(--text-primary, #1d1d1f) !important; } /* AND THE SAME AGAIN FOR THE TIER WITHOUT THE LENS. Everything above is scoped to html.kg-lg-on - the LENSED tier. The plain tier only ever gets kg-glass-on, and there the page's own .generate-btn-internal:disabled and button:disabled were still winning, so the drop-out this was written to fix came straight back for anyone whose browser cannot run the refraction filter. Measured in headless Chromium, which reports exactly that tier: pressing Generate took the button from rgba(34,34,34,0.6) with blur(1px) and a 19px shadow to a flat opaque #1f1f1f with backdrop-filter none and no shadow at all. The material vanished mid-run, which is precisely the "suddenly becomes clearer" that was reported. Written as its own block rather than by widening the selectors above, because the two tiers need different fallbacks and sharing one would change the lensed look. On the lensed tier --kg-lg-blur is unset and falls back to 0px; on this tier the enabled state is a literal blur(1px), so that is what busy has to hold. :not(.kg-lg-on) keeps the two mutually exclusive, so neither can ever restyle the other. */ html.kg-glass-on:not(.kg-lg-on) .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-glass-on:not(.kg-lg-on) .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-glass-on:not(.kg-lg-on) .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; color: var(--text-primary, #ffffff) !important; border: 0 !important; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important; -webkit-backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important; opacity: 1 !important; cursor: progress !important; } html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; color: var(--text-primary, #1d1d1f) !important; } /* data-theme lives on the html element, so this has to be attached to it. The old first selector - [data-theme="light"] html.kg-lg-on ... - asked for an html element INSIDE a themed element and could never match. */ html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]), html.kg-lg-on [data-theme="light"] [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]) { /* The article's light half of the same pair: --glass-rgb #FFFFFF, the same 0.6 alpha, the same shadow. */ background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)); border: 0; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4); } /* The colour has to come with it. The dock rule above also pins color #ffffff as important, which was survivable while the fill was a thin white wash and is not survivable on a 0.6 WHITE pane - white on white. So light theme restates the text colour alongside the fill. */ html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass] { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; border: 0 !important; box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important; color: var(--text-primary, #1d1d1f) !important; } html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:hover:not(:disabled), html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass]:hover { background: var(--kg-lg-tint-light-hover, rgba(255, 255, 255, 0.74)) !important; } /* The scrim behind the sticky mobile Generate bar. It is a real gradient, not an artifact, and it is the black bottom edge: it covers the backdrop the glass would otherwise be refracting. Only removed where there is refraction to see. */ html.kg-lg-on .generate-btn-mobile { background: none; } /* Refraction is a property of the material, not a state, so it must not animate. Nothing here transitions. */ /* ------------------------------------------------------------------ MENUS AND POPOVERS - now the same material as the control that opened them, which is a reversal and a measured one. They used to carry their own tuning: bezel 12, blur 6px, and a rgba(24,24,27,0.72) tint. That tint was not decoration - it was derived against the worst backdrop a popover can be handed, a large flat white generated image, where blur does nothing because there is no structure to average. At 0.72 the surface composites to rgb(89) and the 15px rows (#ededed) sit at 6.0:1. The house material is the article's 0.60, which composites to rgb(122) on that same backdrop and puts those rows at 3.65:1. That is below the 4.5:1 AA threshold for text this size and it is stated here rather than quietly avoided: alpha 0.67 is where these rows clear AA, and the tint is the single number to change if the trade stops being worth it. What is NOT given up: the popover keeps its deeper cast shadow and its inset edge. A menu floats much further off the page than a pill does, and the shadow is what says so; the article's flat 0 4px 19px on a 260x320 popover reads as a panel lying on the page rather than a sheet above it. Same lens, same tint, popover elevation. !important is not decoration here either. Several of these menus are also styled by id-scoped page rules (#agToolgenPanel .ag-agent-model-menu), and an id beats any number of classes. */ html.kg-lg-on [data-kg-liquid-glass="menu"] { -webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 48px rgba(0, 0, 0, 0.52) !important; } /* data-theme lives on the html element on these pages, so the light override has to be attached to it rather than descend from it. */ html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass="menu"], html.kg-lg-on [data-theme="light"] [data-kg-liquid-glass="menu"] { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(0, 0, 0, 0.16) !important; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { html.kg-lg-on [data-kg-liquid-glass] { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-secondary, #141414); } /* Same reason as above: this has to outrank the menu rule, which is itself important, so it has to be important too. A menu is content with a list in it - it must stay readable with no material at all. */ html.kg-lg-on [data-kg-liquid-glass="menu"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-secondary, #141414) !important; border-color: var(--border-color, #2a2a2a) !important; } /* The button rules above had to take important to get past the page's own important declarations, which means this block has to match them selector for selector to be able to switch the material back off. Reduced transparency is a setting, not a suggestion, and it has to win over everything this file does - including the busy state, which is the one place the material now deliberately survives :disabled. */ html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass], html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass], html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass], html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass], html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:hover, html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:hover, html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:hover, html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass]:hover, html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-secondary, #141414) !important; border: 1px solid var(--border-color, #2a2a2a) !important; box-shadow: none !important; } html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--bg-tertiary, #1f1f1f) !important; color: var(--text-primary, #ffffff) !important; } /* The light half of the same rules is one selector more specific than the block above, so without this the primary button kept its 0 4px 19px cast shadow with reduced transparency on in light theme - visible in a forced-media check, not in the source. Same fix, same reason as the flat tier's rim below. */ html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass], html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:hover, html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:hover, html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:hover, html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass]:hover, html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled, html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled, html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled { background: var(--bg-secondary, #ffffff) !important; border: 1px solid var(--border-color, #d2d2d7) !important; box-shadow: none !important; color: var(--text-primary, #1d1d1f) !important; } html.kg-lg-on .generate-btn-mobile { background: linear-gradient(to top, var(--bg-primary, #0a0a0a) 20%, transparent); } } /* ================================================================== SECONDARY CONTROLS - the same material, everywhere it belongs. "elements that are not the main but same like buttons and stuff". That is chrome: the things you press, pick and filter with. It is not the content layer - .prompt-panel, .panel, .setting-group and the textareas are deliberately absent from every list below, because glass behind a block of editable text is the one place Apple's own guidance says it does not go, and a separate workstream owns those surfaces. These all inherit fill, shadow and blur from the first-paint block at the top of this file - the selectors are listed there too, so none of this waits on JS either. What is left here is what differs per family: corner radius, and the states that must NOT become glass. ================================================================== */ /* The page styles several of these with rules this cannot out-specify - .reset-btn came back opaque rgb(31,31,31) with the lens already attached, which is the worst of both. Stated important so the family is one material rather than most of one. */ .help-icon, .reset-btn, .model-search-clear, .kg-navgroup, .lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option, .image-btn, .experience-choice, .kpl-tab, .import-upload-box, #hqSamplerSelect, #hqSchedulerSelect, .kg-select-button { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; border: 0 !important; /* The flat tier, restated important for the same reason the fill is: several of these are styled by page rules this cannot out-specify, and html.kg-lg-on [data-kg-liquid-glass] would otherwise hand the lens back the moment JS stamps the attribute. One declaration, one tier. */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.1), inset 1px -1px 0 0 rgba(255, 255, 255, 0.1), 0 4px 19px rgba(0, 0, 0, 0.4) !important; } [data-theme="light"] .help-icon, [data-theme="light"] .reset-btn, [data-theme="light"] .model-search-clear, [data-theme="light"] .kg-navgroup, [data-theme="light"] .lora-cat-tab, [data-theme="light"] .size-option, [data-theme="light"] .det-model-pill, [data-theme="light"] .upscale-mode-option, [data-theme="light"] .image-btn, [data-theme="light"] .experience-choice, [data-theme="light"] .kpl-tab, [data-theme="light"] .import-upload-box, [data-theme="light"] #hqSamplerSelect, [data-theme="light"] #hqSchedulerSelect, [data-theme="light"] .kg-select-button { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.55), inset 1px -1px 0 0 rgba(0, 0, 0, 0.06), 0 4px 19px rgba(0, 0, 0, 0.4) !important; } /* The ? glyph was #888 on an opaque panel, which was fine while the button under it was opaque too. On glass it measures 1.2:1 against the worst backdrop the material allows, so it comes up to near-white - the button is 18px and the glyph is the whole content. */ .help-icon, .reset-btn, .model-search-clear { color: rgba(255, 255, 255, 0.88) !important; } [data-theme="light"] .help-icon, [data-theme="light"] .reset-btn, [data-theme="light"] .model-search-clear { color: rgba(0, 0, 0, 0.8) !important; } /* SELECTED IS SOLID, AND THAT IS THE POINT. A selected pill has to stay obviously selected over a backdrop this material does not control - a bright generated image behind the row. Translucent-over-arbitrary is exactly the case where a selected chip stops being distinguishable from an unselected one, so selection keeps an opaque fill and lets the unselected pills carry the glass. SOLID, NOT WHITE (2026-09-14, owner's rule: no pure white fill on any button anywhere). The fill is the opaque chip grey the K Agent's pills use, with a strong hairline, and the label keeps the page ink. It is still opaque, so it still survives an arbitrary image behind it; the hairline is what separates it from an unselected glass pill. */ .lora-cat-tab.active, .det-model-pill.active, .upscale-mode-option.active, .kpl-tab.active { background: var(--bg-hover, #2a2a2a) !important; color: var(--text-primary, #ededed) !important; border-color: var(--kammii-hairline-strong, rgba(255, 255, 255, 0.22)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; } /* .size-option is deliberately NOT in that list. Those pills sit over the image row, where an opaque fill is the only thing that survives an arbitrary backdrop. The size grid sits on a panel this material does control, so it can afford the tint below - and it needs it, because the list above named .size-option.active while the page has only ever set .selected, so the rule never once fired. */ /* SELECTION AS A TINT IN THE GLASS, not a ring around it. The wash is composited OVER the tier's own fill rather than replacing it, so a selected tile is the same material as its neighbours with the warmth added - which is the whole point. Replacing the fill outright would make selection a different material that happens to sit in the same row. Two rims, because they do different jobs. The two-lobe pair is the specular highlight the rest of this file uses, on the same 60 degree axis; the full-perimeter hairline underneath closes the edge so the shape reads as a lens rather than as two lit corners. */ .size-option.selected { background: linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)), var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; box-shadow: inset -1px 1px 0 0 var(--kg-sel-rim), inset 1px -1px 0 0 var(--kg-sel-rim), inset 0 0 0 1px var(--kg-sel-rim-soft), 0 4px 19px rgba(0, 0, 0, 0.4) !important; } [data-theme="light"] .size-option.selected { background: linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)), var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.55), inset 1px -1px 0 0 var(--kg-sel-rim), inset 0 0 0 1px var(--kg-sel-rim-soft), 0 4px 19px rgba(0, 0, 0, 0.4) !important; } /* The dimensions line is --text-secondary, which is the same grey on a selected tile as on an unselected one. Warming it is what makes the selection legible in a glance rather than on inspection; the NAME stays --text-primary so the tile still reads as a label first. */ .size-option.selected .size-option-dims { color: var(--kg-sel-ink); } /* The counts (Images Per Batch) are not a glass surface - they are opaque --bg-tertiary - but they are the same control in the same panel and must be the same selected state. Same wash, over their own fill. The 2px ring becomes the tint, so the ring is free to mean focus. */ .count-option.selected { border-color: transparent; background: linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)), var(--bg-tertiary, #1f1f1f); box-shadow: inset -1px 1px 0 0 var(--kg-sel-rim), inset 1px -1px 0 0 var(--kg-sel-rim), inset 0 0 0 1px var(--kg-sel-rim-soft); color: var(--kg-sel-ink); } /* REDUCED TRANSPARENCY, AND THIS ONE HAD TO BE WRITTEN OUT. The block up top flattens [data-kg-liquid-glass] to an opaque --bg-secondary with no shadow, and JS stamps that attribute on .size-option. Left alone, the cascade would have gone the other way from what the setting asks: .size-option.selected is two classes and important, the flat rule is one attribute and important, so the SELECTED tile would have been the one element on the page still wearing a translucent fill after the user asked for none. So it goes opaque here too - but opaque warm, not opaque grey. Reduced transparency is a request to drop the material, not a request to stop showing which size is selected, and the flat rule alone would have painted the selected tile identically to its neighbours all over again. The rim becomes a real border because that block states one. */ /* THE SEGMENTED THUMB, same tint. One rule serves every strip segAttach() adopts - the settings sheet, Batch Mode, the edit-mode and source tabs - so warming it here is what keeps "selected" one idea across the product instead of amber in the picker and white two panels down. */ /* NO RIM ON THE SEGMENTED THUMB, and it is the one selected surface in the system that does without one. The rim is how selection reads on a tile: a size option or a count option sits in a grid of identical neighbours, and the two-lobe specular pair plus the soft ring is what separates the chosen one from them. A segmented thumb has no neighbours to be told apart from - it is the only filled shape in the track - so the ring is not carrying the selection, and once the lens rides over it during the flight the ring becomes a hard edge sitting on top of a refraction that is trying to be an edge itself. So the top highlight goes and the selection rim is replaced by a plain hairline: one 1px inset edge at the system's border alpha, doing the one job that is left - saying where the control ends. The two-lobe specular pair does not come back, because a highlight drawn under a lens that is trying to draw its own is the same light twice. The drop shadow stays and is not decoration: Apple's own segmented control grounds its thumb exactly this way, and it is what keeps the capsule resting on the track rather than looking painted onto it. */ /* THERE IS NO BRIGHT OUTLINE ON THE REFERENCE. That is the single biggest difference between what this shipped and what lore-glass renders, and it took capturing their live page at 4x to see it rather than argue about it. Their marker's computed style is box-shadow NONE, filter NONE, backdrop-filter NONE, background transparent, with one child filled at 6% white. Every bit of its appearance comes from an SVG filter on the wrapper: three chromatically-offset feDisplacementMap passes over a generated lens map, then a specular pass that in dark mode MULTIPLIES (feComposite k1=1) with a matrix of 0 0 -1 0 1.502 - so the strong specular values DARKEN the surface rather than lighting it. That is why theirs reads as a soft dark lozenge pressed into the track, with a diffuse dark halo around the outside, and why every version here that drew a light hairline read as an outlined chip instead. A 1px white ring is the one thing their control does not have. So: no ring. A tight contact shadow and a soft halo, both dark, and the internal grade lives on the pseudo-element rather than in a border. */ /* FROSTED GLASS, 2026-09-16. The owner's pick out of seven rendered materials ("that kind of thing ... implement it everywhere where the floating grey one was"). The no-ring argument above still holds for a RING: nothing here is a ring. It is the iOS material recipe, two EDGE rims - one light hairline along the top edge, one dark along the bottom - which is what makes a translucent slab read as sitting on the surface rather than painted on it, plus the same tight contact shadow and a longer, softer halo. The wash is unchanged and still the shared selection token, so the thumb and the selected tiles stay one idea. NO BACKDROP BLUR AT REST, and that is the Resting Lens Rule, not an omission. The recipe carries blur(14px) saturate(1.7); over the flat card every strip sits on, blurring a flat colour returns the same flat colour, so the visible result is the fill, the rims and the shadow - measured identical in the mockup with the band hidden - and a resting filter on thirty thumbs would compute every frame for nothing. The lens overlay already carries the refraction during the flight. */ /* 2026-09-24: the shell bar's edges, the owner's pick for every strip. Softer rims (.2 light, .3 dark) and the contact shadow only; the long 8-20px halo is what made the thumbs read as "big floating switches". */ .kg-seg-thumb { background: var(--kg-sel-wash); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="light"] .kg-seg-thumb { background: linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)), rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.16); } /* Deliberately the LAST word on selection in this file. A media query carries no extra specificity, so this block only beats the plain thumb rules above by coming after them - written before them it would have been dead, which is the same silent nothing that started all this. The important flags on the tiles are for a different fight: the flat tier's own important fill. */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .size-option.selected, .count-option.selected { background: var(--kg-sel-solid) !important; border: 1px solid var(--kg-sel-rim) !important; box-shadow: none !important; } /* That box-shadow:none is important, and the focus ring on these controls is a box-shadow - so without this line, increased contrast would strip the focus ring from the SELECTED tile, for precisely the person who turned increased contrast on. Restated important to get back past the rule above. Worth knowing while reading this: today the tiles are plain
with no tabindex and no role, so nothing can focus them and neither this rule nor the page's own :focus-visible rule ever fires. Both are kept because the page ships one already - the day these become reachable, the contrast path must not be the one that silently has no ring. Making them keyboard-reachable is its own job. */ .size-option:focus-visible, .count-option:focus-visible { box-shadow: 0 0 0 2px var(--accent, #ffffff) !important; } /* The ring comes BACK here, deliberately. Dropping it above is a visual choice that assumes the fill and the shadow are legible; a reader who has asked for more contrast or less transparency is telling us that assumption does not hold for them, and an edge is the cheapest way to keep the shape readable when the material is gone. */ .kg-seg-thumb, [data-theme="light"] .kg-seg-thumb { background: var(--kg-sel-solid); box-shadow: inset 0 0 0 1px var(--kg-sel-rim); } } /* THE SEGMENTED NAV GROUP lenses as ONE pane, not three. The dividers between its cells are inset box-shadows on the cells, so the cells must stay transparent or each one paints over the hairline to its left and the group reads as three loose buttons. */ .kg-navcell { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ROUNDER, as asked - the Generate capsule extended to every short, wide control that can carry it. */ .lora-cat-tab, .reset-btn, .model-search-clear, .det-model-pill, .upscale-mode-option, .kg-navgroup { border-radius: 999px; } .help-icon { border-radius: 50%; } /* NOT capsules, and this is a judgement worth stating rather than hiding: 999px on a tall or two-line control turns the ends into semicircles and eats the corners the label needs. These keep a coherent, larger radius instead - the same family, one step down. */ .image-btn, .experience-choice, .import-upload-box, .km-import-card, .size-option, #userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn { border-radius: 18px !important; } /* A tab strip is attached to the panel below it; rounding all four corners detaches it from the thing it is labelling. */ .kpl-tab { border-radius: 12px 12px 0 0; } /* The picker fields. Inline styles on these elements, so important is the only way in - and the dashed upload boxes keep their dashed edge, which is the affordance that says "drop a file here", not decoration. */ #hqSamplerSelect, #hqSchedulerSelect, .kg-select-button { border-radius: 999px !important; border: 0 !important; } #userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn { border: 1px dashed rgba(255, 255, 255, 0.28) !important; } [data-theme="light"] #userLoraUploadOpenBtn, [data-theme="light"] #userCheckpointUploadOpenBtn { border-color: rgba(0, 0, 0, 0.22) !important; } /* ONE POPOVER RECIPE. These two carried different glass - .kgp-inner at #32323280 over a 16px blur, .kg-menu at rgba(28,28,31,0.82) over 30px - which is exactly the drift a house material exists to end. */ /* THE K AGENT PANEL AND ITS COMPOSER JOIN THIS FAMILY, and the reason they were not in it is the reason to write it down. This material is opt-in twice over: by this selector list, and by the data-kg-liquid-glass attribute. A panel that is in neither gets no material at all, so whoever adds one writes their own rgba() plus a blur. That is what happened here - the K Agent panel carried rgba(20,20,23,0.66) with blur(30px) saturate(160%), and its composer bar carried rgba(18,18,18,0.72) with NO backdrop-filter whatsoever, which is why that bar in particular reads as simply see-through: a 72% fill over whatever happens to be behind it, with nothing blurred to separate the two. The real damage is not the initial look, which was fine on the day it was written. It is that a hardcoded alpha cannot follow the reader's clarity setting. --kg-lg-tint is what that slider writes; raise clarity and every surface in this list densifies toward 0.78 while a hardcoded 0.66 stays where it is - so the hand-rolled panel becomes the conspicuously transparent one precisely when the reader has asked for less transparency. Same failure family as the tier-gating and ID-specificity traps: the material is requested and never lands. The fix is NOT to bolt those panels onto this selector list, which was the first attempt and measurably wrong: this rule's blur is calc(var(--kg-lg-blur, 1px) + frost) because the lensed tier does the real work in an SVG filter mounted per element. A panel that is not registered for a lens gets no filter, so joining the list dropped the K Agent panel from blur(30px) to blur(1px) - more see-through, which is the opposite of the complaint. They keep their own blur and take the clarity-linked TINT. THE COMPOSER IS TREATED DIFFERENTLY ON PURPOSE, and only the panel is in the list above. The composer bar stands INSIDE the panel, so its backdrop is already blurred glass, and blurring a blurred near-uniform field is the no-op measured in the modal-over-scrim case: a 4-point luminance move out of 255, at the full cost of a second 30px blur. So it takes the clarity-linked TINT, which is the part that was actually missing, and keeps no backdrop-filter of its own. */ .kgp-inner, .kg-menu { background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important; -webkit-backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 48px rgba(0, 0, 0, 0.52) !important; } [data-theme="light"] .kgp-inner, [data-theme="light"] .kg-menu { background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(0, 0, 0, 0.16) !important; } /* ================================================================== THE IMAGE-OVERLAY FAMILY - one definition for every control that stands on a picture. WHAT THIS REPLACES. Across the two gen pages these controls were declared with eight different materials that were meant to be one: rgba(0,0,0,0.5), 0.55, 0.6, 0.62, 0.65, 0.7, rgba(16,16,18,0.55) and rgba(255,255,255,0.1); blurs of none, 6, 8, 10 and 18px; borders of none, 0.14, 0.15, 0.18, 0.2 and a 2px 0.4; and six different hover alphas. Two buttons twelve pixels apart on the same viewer - the header close and the download disc - were opposite colours. That is the drift, and it is what "a little bit different coloring" meant. WHY THIS FAMILY IS LENSED, ALL OF IT. The backdrop of every control here is a real image: arbitrary, high-contrast, different every time. That is the strongest case for refraction on the page, and it holds in a scrolling grid as much as in the full-size viewer - so none of these is flattened for sitting in a scroller. A family where some controls bend the picture and some do not would read as an inconsistency, not as an optimisation. WHY IT DOES NOT USE THE HOUSE TINT, AND THIS IS MEASURED. The house material is rgba(34,34,34,0.6). Composited over a white image that surface is rgb(122), and pure white glyph on rgb(122) is 4.27:1 - under the 4.5:1 AA floor for the small icons this family is made of. Solving for the alpha that clears 4.5:1 with a white glyph over a white backdrop: the surface has to land at or below rgb(119), which needs alpha 0.617 on the #222 base or 0.535 on pure black. This family therefore uses BLACK at 0.62, which composites to rgb(97) over white and measures 6.21:1 - a real margin rather than a pass by rounding, because a generated image can be brighter and busier than a flat white field and the glyph lands wherever the picture puts it. Stated openly as a deliberate divergence for one family; everything else on the page keeps the house tint. WHY IT DOES NOT FLIP IN LIGHT THEME. An image is an image whatever the interface theme is. A white-tinted control over a bright photo is the exact failure this tint exists to avoid, so this family stays dark in both themes - the only family on the page that does. ================================================================== */ .glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .viewer-counter, #viewerSavedInfo, .viewer-btn, .zoom-controls, .sg-action-btn, .sg-select-check, .kg-tile-more, .ag-chat-attach-remove, .ag-card-avatar-edit, .regional-box-label { background: var(--kg-lg-tint-img, rgba(0, 0, 0, 0.62)); border: 0; color: #ffffff; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); /* The specular rim, same two lobes as the flat tier, at a touch more strength because this one is read against a picture rather than against a panel and needs to hold its own edge. */ /* Tighter than the house shadow on purpose. 0 4px 19px is right for a capsule lying on a dark panel; on a 44px disc over a BRIGHT image the same shadow spreads into a visible grey smudge. This is the smallest cast that still lifts the control off the picture. */ box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.14), inset 1px -1px 0 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.28); } /* The lens, once JS has measured each shape. Important because several of these carry page rules that pin a background, and because the house rule above would otherwise hand them the #222 tint this family deliberately does not use. */ html.kg-lg-on [data-kg-liquid-glass="img"], html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass="img"] { background: var(--kg-lg-tint-img, rgba(0, 0, 0, 0.62)) !important; border: 0 !important; color: #ffffff !important; -webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important; box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.14), inset 1px -1px 0 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.28) !important; } /* ONE HOVER for the family, replacing six. It goes DARKER rather than lighter, which is what most of these already did and is also the only direction that cannot cost contrast: rgb(56) over a white image, 11.6:1. */ .glass-btn:hover, .glass-btn-history-restore:hover, .viewer-nav-btn:hover, .viewer-btn:hover, .sg-action-btn:hover, .kg-tile-more:hover, .ag-chat-attach-remove:hover, html.kg-lg-on [data-kg-liquid-glass="img"]:hover { background: var(--kg-lg-tint-img-hover, rgba(0, 0, 0, 0.78)) !important; } /* THE TWO SHAPES. Everything in this family is a disc except the things that carry a line of text, which are capsules. Nothing else varies. */ .viewer-counter, #viewerSavedInfo, .zoom-controls { border-radius: 999px; } .ag-card-avatar-edit, .regional-box-label { border-radius: 6px; } /* One pane, not N. The zoom cluster is a single capsule with buttons inside it; if the buttons carry their own fill they paint over the capsule and the group reads as loose discs. Same rule as .kg-navcell. */ .zoom-btn { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #ffffff !important; } .zoom-btn:hover { background: rgba(255, 255, 255, 0.16) !important; } /* 44px OF TOUCH, whatever the control is drawn at. The visual size is free to be smaller - the chat-log grid draws these at 26px - so the hit area is pushed out with a pseudo-element rather than by growing the box, which would move the layout. COARSE POINTERS ONLY, and that restriction is the careful part. On a mouse the drawn size has always been the target and precision is available, so leaving it alone is the only way to guarantee the "same click targets" this consolidation promised. On touch there is no precision to rely on and 44pt is the floor. Even on touch this can only ever move a boundary, never orphan a control: where two 26px buttons sit 30px apart their expanded targets overlap by 14px and the later-painted one wins that sliver, which still leaves each button a larger exclusive target than it had before. The dense chat-log cluster is clamped below anyway so it tiles cleanly. */ @media (pointer: coarse) { .glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .viewer-btn, .sg-action-btn, .kg-tile-more, .ag-chat-attach-remove, .zoom-btn { position: relative; } .glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .kg-tile-more, .ag-chat-attach-remove { position: absolute; } .glass-btn::after, .glass-btn-history-restore::after, .viewer-nav-btn::after, .viewer-btn::after, .sg-action-btn::after, .kg-tile-more::after, .ag-chat-attach-remove::after, .zoom-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--kg-hit, 44px); height: var(--kg-hit, 44px); transform: translate(-50%, -50%); border-radius: inherit; pointer-events: auto; } /* The one genuinely dense cluster: 26px discs on a chat-log thumbnail, spaced 30px. Clamped so the targets tile edge to edge instead of overlapping - the most touch that fits without one button eating part of its neighbour. */ .ag-chat-log .output-images .glass-btn { --kg-hit: 30px; } .ag-chat-log .output-images.ag-output-single .glass-btn { --kg-hit: 40px; } } /* .glass-btn is absolutely positioned by the page, so the rule above must not fight it. Restated for the one member whose position is load-bearing. */ .glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .kg-tile-more, .ag-chat-attach-remove, .sg-select-check { position: absolute; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .viewer-counter, #viewerSavedInfo, .viewer-btn, .zoom-controls, .zoom-btn, .sg-action-btn, .sg-select-check, .kg-tile-more, .ag-chat-attach-remove, .ag-card-avatar-edit, .regional-box-label, html.kg-lg-on [data-kg-liquid-glass="img"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* Opaque, and still dark: the thing behind is a picture, so the reduced-transparency answer here is a solid chip, not a light one. */ background: #141414 !important; border: 1px solid rgba(255, 255, 255, 0.34) !important; box-shadow: none !important; color: #ffffff !important; } .zoom-btn { border: 0 !important; background: transparent !important; } } /* BOTTOM SCRIM: the edge material for words laid over a picture (a card's title and likes). It is K Agent's chat edge (worker.js, .ag-edge-fade-blur .ag-chat-edge-bottom): the picture darkens and blurs progressively toward the edge and is clear by the top of the scrim, so there is no line where the veil starts. The host sets the height with --kg-scrim-h and keeps its own position; the veil is a ::before behind the host's content (the host must be positioned, and its z-index or isolation makes the -1 stay inside it). */ .kg-scrim-bottom { isolation: isolate; } .kg-scrim-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--kg-scrim-h, 100%); z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 28%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.07) 80%, rgba(0,0,0,0) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0) 100%); } @media (prefers-reduced-transparency: reduce) { .kg-scrim-bottom::before { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .kgp-inner, .kg-menu, .help-icon, .reset-btn, .model-search-clear, .kg-navgroup, .lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option, .image-btn, .experience-choice, .kpl-tab, .import-upload-box, .km-import-card, #hqSamplerSelect, #hqSchedulerSelect, .kg-select-button, #userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-secondary, #141414) !important; border: 1px solid var(--border-color, #2a2a2a) !important; box-shadow: none !important; } /* The flat tier's specular rim is a box-shadow rather than a filter, so reduced transparency has to switch it off the way it switches off the lens - and the LIGHT half of it is themed, which makes it one step more specific than the class list above. Restated at matching specificity, because a rule that cannot win is the same as a rule that is missing. Reduced transparency is a setting, not a suggestion. */ html[data-theme="light"] [data-kg-liquid-glass="flat"], [data-theme="light"] #hqSamplerSelect, [data-theme="light"] #hqSchedulerSelect, [data-theme="light"] .kg-select-button, [data-theme="light"] #userLoraUploadOpenBtn, [data-theme="light"] #userCheckpointUploadOpenBtn { box-shadow: none !important; } }