/* SuruX surface design: Skeuomorphism (key "skeuo"). Ported from the approved mock. First material only: paper, aluminium, leather, stone, forged carbon, denim. Finish rules live in surux.buttons.bevel.css. */ @media screen and (forced-colors: none) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) { /* Radius: small, machined corners. */ --surux-radius-sm: .3rem; --surux-radius-md: .45rem; --surux-radius-lg: .5rem; --surux-radius-card: .4rem; --surux-radius-field: .3rem; --surux-radius-control: .3rem; --surux-radius-chip: .3rem; --surux-radius-pill: .3rem; --surux-radius-modal: .5rem; --surux-band-radius: 6px; --surux-radius-input: .3rem; --surux-radius-menu: .5rem; --surux-radius-hero: .5rem; --surux-radius-hero-halo: .5rem; --surux-radius-band: 6px; --surux-elevation-field: inset 0 1px 0 var(--surux-skeuo-well-line, transparent), inset 0 2px 4px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent), 0 0 transparent, 0 0 transparent; --surux-elevation-toast: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 2px 3px var(--surux-skeuo-cast, transparent), 0 10px 20px -6px var(--surux-skeuo-cast-deep, transparent); /* Border width: unchanged hairline, strong edge stays 2px. */ --surux-border-width: 1px; --surux-border-width-strong: 2px; /* Blur: materials are opaque, nothing is frosted. */ --surux-blur-shell: blur(0px); --surux-blur-overlay: blur(0px); --surux-blur-float: blur(0px); /* Elevation: one light from the top. Specular top edge, dark bottom bevel, a short hard cast shadow straight down and a soft contact shadow. Values come from the appearance tokens below. */ --surux-elevation-card: inset 0 1px 0 var(--surux-skeuo-specular, transparent), inset 0 -1px 0 var(--surux-skeuo-bevel-shade, transparent), var(--surux-skeuo-stack, transparent), 0 1px 1px var(--surux-skeuo-cast, transparent), 0 5px 8px -3px var(--surux-skeuo-cast-soft, transparent); --surux-elevation-raised: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 -1px 0 var(--surux-skeuo-cast, transparent), 0 -4px 10px -4px var(--surux-skeuo-cast-soft, transparent); --surux-elevation-float: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 2px 3px var(--surux-skeuo-cast, transparent), 0 12px 24px -6px var(--surux-skeuo-cast-deep, transparent); --surux-elevation-modal: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 3px 4px var(--surux-skeuo-cast, transparent), 0 26px 48px -12px var(--surux-skeuo-cast-deep, transparent); /* Texture library. Neutral alpha-only tiles (black or white), so each material takes its colour from the surface tokens underneath and never from a hard-coded hue. Every high-frequency tile (grain, leather, brushed, linen, carbon) is chrome-only: bars and rims. Desks are lit with gradients only (turbulence tiles at desk scale do not stitch seamlessly). */ --surux-skeuo-tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --surux-skeuo-tex-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --surux-skeuo-tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .03' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --surux-skeuo-tex-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='3' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='2.2' lighting-color='%23fff' result='d'%3E%3CfeDistantLight azimuth='270' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='d' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.7' result='hi'/%3E%3CfeColorMatrix in='d' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 0 0 0 .78' result='lo'/%3E%3CfeMerge%3E%3CfeMergeNode in='lo'/%3E%3CfeMergeNode in='hi'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); --surux-skeuo-tex-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='80'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .9' numOctaves='2' seed='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .8 0 0 0 -.36' result='hi'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.8 0 0 0 .33' result='lo'/%3E%3CfeMerge%3E%3CfeMergeNode in='lo'/%3E%3CfeMergeNode in='hi'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); --surux-skeuo-tex-linen: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 4px); --surux-skeuo-tex-carbon: linear-gradient(27deg, rgba(255, 255, 255, .025) 5px, transparent 5px) 0 5px / 20px 20px, linear-gradient(207deg, rgba(255, 255, 255, .025) 5px, transparent 5px) 10px 0 / 20px 20px, linear-gradient(27deg, rgba(255, 255, 255, .04) 5px, transparent 5px) 0 10px / 20px 20px, linear-gradient(207deg, rgba(255, 255, 255, .04) 5px, transparent 5px) 10px 5px / 20px 20px, linear-gradient(90deg, rgba(255, 255, 255, .03) 10px, transparent 10px) 0 0 / 20px 20px, linear-gradient(rgba(255, 255, 255, .035) 25%, rgba(255, 255, 255, .015) 25%, rgba(255, 255, 255, .015) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, .05) 75%) 0 0 / 20px 20px; /* Forged carbon (Black, Stefan 30 Sep): chopped fibre pressed into irregular flakes. Two noise fields cut into hard-edged bands give the flake edges; a diagonal satin sheen gives the clear coat. Alpha-only white, chrome only. */ --surux-skeuo-tex-forged: linear-gradient(115deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .035) 56%, rgba(255, 255, 255, 0) 76%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.075 .11' numOctaves='2' seed='23' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0' result='b'/%3E%3CfeComponentTransfer in='b' result='c'%3E%3CfeFuncA type='discrete' tableValues='0 .06 .015 .1 .03 .13 .01 .08 .025 .11 0 .05'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .1' numOctaves='1' seed='41' stitchTiles='stitch' result='d'/%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 1 0 0 0' result='e'/%3E%3CfeComponentTransfer in='e' result='g'%3E%3CfeFuncA type='discrete' tableValues='0 .05 0 .08 0 .03 0 .06'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='c'/%3E%3CfeMergeNode in='g'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); /* Seams. A stitched seam on a bar is a dashed line one stitch-length apart, drawn as a background layer. */ --surux-skeuo-seam-bottom: linear-gradient(90deg, var(--surux-skeuo-stitch, transparent) 58%, transparent 58%) 0 calc(100% - 6px) / 9px 1px repeat-x; --surux-skeuo-seam-top: linear-gradient(90deg, var(--surux-skeuo-stitch, transparent) 58%, transparent 58%) 0 6px / 9px 1px repeat-x; /* Rims. Cards, lanes and plates are a textured frame around a smooth panel. The panel is one background layer inset by the rim width; a 1px inlay line (dark top, lit bottom) sets it into the frame. A rim width of 0 means the whole sheet is the smooth panel. Defaults: no rim. */ --surux-skeuo-rim-width: 0px; --surux-skeuo-plate-width: 0px; --surux-skeuo-rim-panel-size: calc(100% - 2 * var(--surux-skeuo-rim-width, transparent)); --surux-skeuo-rim-inlay-size: calc(100% - 2 * var(--surux-skeuo-rim-width, transparent) + 2px); --surux-skeuo-plate-panel-size: calc(100% - 2 * var(--surux-skeuo-plate-width, transparent)); --surux-skeuo-plate-inlay-size: calc(100% - 2 * var(--surux-skeuo-plate-width, transparent) + 2px); --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; /* Light materials set a heading scrim. Dark materials leave it transparent. */ --surux-skeuo-band-scrim: transparent; /* Rivets: a domed head lit from the top, one per plate corner. */ --surux-skeuo-rivet: radial-gradient(circle at 42% 36%, var(--surux-skeuo-rivet-hi, transparent) 0 .6px, var(--surux-skeuo-rivet-mid, transparent) 1.9px, var(--surux-skeuo-rivet-lo, transparent) 3.1px, var(--surux-skeuo-rivet-rim, transparent) 3.6px, transparent 4.1px); --surux-skeuo-rivet-hi: transparent; --surux-skeuo-rivet-mid: transparent; --surux-skeuo-rivet-lo: transparent; /* Material library for every approved material. Alternate blocks (T3) only choose these. */ --surux-skeuo-tex-paper: var(--surux-skeuo-tex-linen, none), var(--surux-skeuo-tex-grain, none); --surux-skeuo-tex-aluminium: var(--surux-skeuo-tex-brushed, none); --surux-skeuo-tex-stone: var(--surux-skeuo-tex-grain-light, none), var(--surux-skeuo-tex-grain, none), var(--surux-skeuo-tex-mottle, none); /* Approved alternate tiles. Each alternate block only chooses these. Hues are material chrome. */ --surux-skeuo-tex-oak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .16' numOctaves='2' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .04 0 .07 0 .05 0 .03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .09' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0 0 0 -.25'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .05 .12 .03 .16 .07 .2 .02 .1 .04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); --surux-skeuo-oak-base: linear-gradient(180deg, #d6b07a, #b98d55); --surux-skeuo-tex-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0045 .008' numOctaves='5' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .32 0 0 0 0 .34 0 0 0 0 .38 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 .26 .1 0 0 0 0 0 0 0 .14 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"), var(--surux-skeuo-tex-grain-light, none); --surux-skeuo-marble-base: linear-gradient(180deg, #f7f7f5, #e4e5e6); --surux-skeuo-tex-walnut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .16' numOctaves='2' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .04 0 .07 0 .05 0 .03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .09' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0 0 0 -.25'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .05 .12 .03 .16 .07 .2 .02 .1 .04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); --surux-skeuo-walnut-base: linear-gradient(180deg, #6a4529, #3e2716); --surux-skeuo-leather-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 88%, #fff 12%), color-mix(in srgb, var(--surux-surface) 72%, #000 28%)); --surux-skeuo-stone-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 86%, #fff 14%), color-mix(in srgb, var(--surux-surface) 78%, #000 22%)); --surux-skeuo-tex-felt: var(--surux-skeuo-tex-grain, none), var(--surux-skeuo-tex-grain-light, none), var(--surux-skeuo-tex-mottle, none); --surux-skeuo-felt-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 70%, #9aa0a8 30%), color-mix(in srgb, var(--surux-surface-2-base) 80%, #3a3f46 20%)); --surux-skeuo-tex-woven: linear-gradient(115deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .035) 56%, rgba(255, 255, 255, 0) 76%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.015'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.015'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.01'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.01'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='0' y='0' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='5' y='0' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='5' y='0' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='10' y='0' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='10' y='0' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='15' y='0' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='15' y='0' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='0' y='5' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='0' y='5' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='5' y='5' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='5' y='5' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='10' y='5' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='10' y='5' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='15' y='5' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='15' y='5' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='0' y='10' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='0' y='10' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='5' y='10' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='5' y='10' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='10' y='10' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='10' y='10' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='15' y='10' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='15' y='10' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='0' y='15' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='0' y='15' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='5' y='15' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='5' y='15' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='10' y='15' width='5' height='5' fill='url(%23v)'/%3E%3Crect x='10' y='15' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3Crect x='15' y='15' width='5' height='5' fill='url(%23h)'/%3E%3Crect x='15' y='15' width='5' height='5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='.4'/%3E%3C/svg%3E") 0 0 / 20px 20px; --surux-skeuo-tex-suede: var(--surux-skeuo-tex-grain, none), var(--surux-skeuo-tex-grain-light, none); --surux-skeuo-suede-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 62%, #2a3a66 38%), color-mix(in srgb, var(--surux-surface-2-base) 70%, #121a33 30%)); --surux-skeuo-tex-lapis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .95 0 0 0 0 .74 0 0 0 0 .26 1.9 0 0 0 -.72'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 .55 .85 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), var(--surux-skeuo-tex-mottle, none), var(--surux-skeuo-tex-grain-light, none); --surux-skeuo-lapis-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 35%, #2544a8 65%), color-mix(in srgb, var(--surux-surface-2-base) 45%, #16296e 55%)); --surux-skeuo-tex-denim: repeating-linear-gradient(135deg, rgba(255, 255, 255, .075) 0 1px, transparent 1px 3px), repeating-linear-gradient(45deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 5px), var(--surux-skeuo-tex-grain-light, none); --surux-skeuo-denim-base: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 45%, #3a5a9e 55%), color-mix(in srgb, var(--surux-surface-2-base) 55%, #1c2f5c 45%)); --surux-skeuo-rivet-rim: transparent; /* Focus on bar chrome. The key is the same family as the bar, so a key-coloured ring disappears into Warm Light, Charcoal and Slate. A black separation halo, drawn outside the primary stroke, is the tone that stays 3:1 from that stroke and from a light bar stop. The bars themselves are unchanged. */ --surux-skeuo-focus-halo: #000; } /* Light: aluminium. Stacked card stock, brushed plates and bars. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-bs-theme="light"]:not([data-surux-theme="night"]) { --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 95%, #000 5%); --surux-skeuo-specular: rgba(255, 255, 255, .95); --surux-skeuo-lip: rgba(255, 255, 255, .75); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .07); --surux-skeuo-cast: rgba(0, 0, 0, .2); --surux-skeuo-cast-soft: rgba(0, 0, 0, .2); --surux-skeuo-cast-deep: rgba(0, 0, 0, .34); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-emboss: 0 1px 0 rgba(255, 255, 255, .8); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 95%, #000 5%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 48%, #000 52%); --surux-skeuo-well-shade: rgba(0, 0, 0, .16); --surux-skeuo-well-line: rgba(0, 0, 0, .1); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-2-base) 90%, #000 10%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 96%, #000 4%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 62%, #000 38%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-base) 72%, var(--surux-surface-2-base) 28%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-2-base) 52%, #000 48%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .7); --surux-skeuo-key-shade: rgba(0, 0, 0, .12); --surux-skeuo-key-top: rgba(255, 255, 255, .95); --surux-skeuo-key-bottom: rgba(0, 0, 0, .1); --surux-skeuo-strip: linear-gradient(180deg, var(--surux-skeuo-key, transparent), color-mix(in srgb, var(--surux-skeuo-key, transparent) 90%, #000 10%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .2); --surux-skeuo-desk: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 16rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 70%, #fff 30%), var(--surux-surface) 3rem); --surux-skeuo-inlay: linear-gradient(transparent, transparent); --surux-skeuo-rim: linear-gradient(var(--surux-surface), var(--surux-surface)); --surux-skeuo-rim-width: 0px; --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-bar: var(--surux-skeuo-tex-aluminium, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 50%, #fff 50%) 0%, color-mix(in srgb, var(--surux-surface-2-base) 92%, #000 8%) 48%, color-mix(in srgb, var(--surux-surface-2-base) 82%, #000 18%) 100%); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-2-base) 58%, #000 42%); --surux-skeuo-stack: 0 3px 0 -1px color-mix(in srgb, var(--surux-surface-base) 93%, #000 7%), 0 3px 0 0 var(--surux-skeuo-edge, transparent); --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #000 45%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-aluminium, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 45%, #fff 55%), color-mix(in srgb, var(--surux-surface-2-base) 88%, #000 12%)); --surux-skeuo-plate-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 55%, #fff 45%), var(--surux-surface) 55%, color-mix(in srgb, var(--surux-surface) 96%, #000 4%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .9)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: #fff; --surux-skeuo-rivet-mid: color-mix(in srgb, var(--surux-surface-2-base) 60%, #fff 40%); --surux-skeuo-rivet-lo: color-mix(in srgb, var(--surux-surface-2-base) 55%, #000 45%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .35); } /* Blue night: denim. Smooth enamel sheets, denim chrome. Night palette is Black, below. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-bs-theme="dark"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 62%, #000 38%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .12); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 45%, #000 55%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: rgba(214, 140, 72, .85); --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 72%, #000 28%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 84%, #fff 16%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 55%, color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, .12)); --surux-skeuo-rim: var(--surux-skeuo-tex-denim, none), var(--surux-skeuo-denim-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-denim, none), var(--surux-skeuo-denim-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-denim, none), var(--surux-skeuo-denim-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 90%, #000 10%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 226, 190, .95); --surux-skeuo-rivet-mid: #b87333; --surux-skeuo-rivet-lo: #6b3714; --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Warm Light: paper. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="warm-light"]:not([data-surux-theme="night"]) { --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 96%, #000 4%); --surux-skeuo-specular: rgba(255, 255, 255, .95); --surux-skeuo-lip: rgba(255, 255, 255, .75); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .07); --surux-skeuo-cast: rgba(0, 0, 0, .2); --surux-skeuo-cast-soft: rgba(0, 0, 0, .2); --surux-skeuo-cast-deep: rgba(0, 0, 0, .34); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-2-base) 66%, #000 34%); --surux-skeuo-emboss: 0 1px 0 rgba(255, 255, 255, .8); --surux-skeuo-stitch: rgba(255, 255, 255, .5); --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 94%, var(--surux-surface-2-base) 6%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 46%, #000 54%); --surux-skeuo-well-shade: rgba(0, 0, 0, .16); --surux-skeuo-well-line: rgba(0, 0, 0, .1); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-2-base) 70%, var(--surux-surface-base) 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 95%, #000 5%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 58%, #000 42%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-base) 66%, var(--surux-surface-2-base) 34%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-2-base) 50%, #000 50%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .7); --surux-skeuo-key-shade: rgba(0, 0, 0, .12); --surux-skeuo-key-top: rgba(255, 255, 255, .95); --surux-skeuo-key-bottom: rgba(0, 0, 0, .1); --surux-skeuo-strip: linear-gradient(180deg, var(--surux-skeuo-key, transparent), color-mix(in srgb, var(--surux-skeuo-key, transparent) 90%, #000 10%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .2); --surux-skeuo-desk: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 14rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 72%, #fff 28%), var(--surux-surface) 3rem); --surux-skeuo-inlay: linear-gradient(transparent, transparent); --surux-skeuo-rim: linear-gradient(var(--surux-surface), var(--surux-surface)); --surux-skeuo-rim-width: 0px; --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-bar: var(--surux-skeuo-tex-paper, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%), color-mix(in srgb, var(--surux-surface-2-base) 58%, #000 42%)); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-2-base) 38%, #000 62%); --surux-skeuo-stack: 0 3px 0 -1px color-mix(in srgb, var(--surux-surface-base) 88%, var(--surux-surface-2-base) 12%), 0 3px 0 0 var(--surux-skeuo-edge, transparent); --surux-skeuo-plate-width: 8px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-2-base) 40%, #000 60%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-paper, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 66%, #000 34%), color-mix(in srgb, var(--surux-surface-2-base) 56%, #000 44%)); --surux-skeuo-plate-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 75%, #fff 25%), var(--surux-surface) 40%); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(255, 255, 255, .35)); /* Bookcloth and oak darken toward the top of the band, under the heading. A surface scrim there keeps the dark ink at 4.5:1. It fades out before the segment strip. Oak inherits it. */ --surux-skeuo-band-scrim: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 68%, transparent) 0 4.75rem, transparent 6.4rem); --surux-skeuo-plate-rule: 1px solid color-mix(in srgb, var(--surux-text) 22%, var(--surux-surface)); --surux-skeuo-plate-rule-offset: -12px; --surux-skeuo-rivet-hi: transparent; --surux-skeuo-rivet-mid: transparent; --surux-skeuo-rivet-lo: transparent; --surux-skeuo-rivet-rim: transparent; } /* Charcoal: leather. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="charcoal"]:not([data-surux-theme="night"]) { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 66%, #000 34%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .12); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: rgba(255, 255, 255, .26); --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 50%, #fff 50%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 80%, #fff 20%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 2.5rem, color-mix(in srgb, var(--surux-surface) 93%, #000 7%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, .12)); --surux-skeuo-rim: var(--surux-skeuo-tex-leather, none), var(--surux-skeuo-leather-base, none); --surux-skeuo-rim-width: 8px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-leather, none), var(--surux-skeuo-leather-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-leather, none), var(--surux-skeuo-leather-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 90%, #000 10%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 255, 255, .85); --surux-skeuo-rivet-mid: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-rivet-lo: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Slate: stone. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="slate"]:not([data-surux-theme="night"]) { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 80%, #000 20%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .16); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 50%, #000 50%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 76%, #000 24%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 40%, #fff 60%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 78%, #000 22%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 94%, #000 6%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .07); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 38% 20% at 16% 34%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 28% 16% at 74% 18%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 46% 24% at 66% 68%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 30% 18% at 10% 88%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 22% 12% at 40% 56%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 97%, #000 3%), color-mix(in srgb, var(--surux-surface) 97%, #000 3%) 2.5rem, color-mix(in srgb, var(--surux-surface) 88%, #000 12%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .14)); --surux-skeuo-rim: var(--surux-skeuo-tex-stone, none), var(--surux-skeuo-stone-base, none); --surux-skeuo-rim-width: 7px; --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-bar: var(--surux-skeuo-tex-stone, none), var(--surux-skeuo-stone-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-stone, none), var(--surux-skeuo-stone-base, none); --surux-skeuo-plate-panel: var(--surux-skeuo-panel, none); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 255, 255, .85); --surux-skeuo-rivet-mid: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-rivet-lo: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Black: forged carbon. Woven carbon is the second Black material and is not this block. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):is([data-surux-appearance="black"], [data-surux-theme="night"]) { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 55%, #000 45%); --surux-surface: color-mix(in srgb, var(--surux-surface-base) 97%, #fff 3%); --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 96%, #fff 4%); --surux-skeuo-specular: rgba(255, 255, 255, .14); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 45%, #000 55%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: transparent; --surux-skeuo-well: var(--surux-surface-base); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: var(--surux-surface-base); --surux-skeuo-channel: var(--surux-surface-base); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 80%, #fff 20%); --surux-skeuo-key-edge: #000; --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 16rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 95%, #fff 5%), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 91%, #000 9%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(255, 255, 255, .14)); --surux-skeuo-rim: var(--surux-skeuo-tex-forged, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 90%, #fff 10%), color-mix(in srgb, var(--surux-surface-base) 78%, #000 22%)); --surux-skeuo-rim-width: 7px; --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-bar: var(--surux-skeuo-tex-forged, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%), color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%)); --surux-skeuo-bar-edge: #000; --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: #000; --surux-skeuo-plate-rim: var(--surux-skeuo-tex-forged, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 86%, #fff 14%), color-mix(in srgb, var(--surux-surface-base) 80%, #000 20%)); --surux-skeuo-plate-panel: var(--surux-skeuo-panel, none); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 255, 255, .85); --surux-skeuo-rivet-mid: color-mix(in srgb, var(--surux-surface-2-base) 50%, #fff 50%); --surux-skeuo-rivet-lo: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Warm Light alternate: oak and brass. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="warm-light"]:not([data-surux-theme="night"])[data-surux-design-material="oak"] { --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 96%, #000 4%); --surux-skeuo-specular: rgba(255, 255, 255, .95); --surux-skeuo-lip: rgba(255, 255, 255, .75); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .07); --surux-skeuo-cast: rgba(0, 0, 0, .2); --surux-skeuo-cast-soft: rgba(0, 0, 0, .2); --surux-skeuo-cast-deep: rgba(0, 0, 0, .34); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-2-base) 66%, #000 34%); --surux-skeuo-emboss: 0 1px 0 rgba(255, 255, 255, .8); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 94%, var(--surux-surface-2-base) 6%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 46%, #000 54%); --surux-skeuo-well-shade: rgba(0, 0, 0, .16); --surux-skeuo-well-line: rgba(0, 0, 0, .1); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-2-base) 70%, var(--surux-surface-base) 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 95%, #000 5%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 58%, #000 42%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-base) 66%, var(--surux-surface-2-base) 34%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-2-base) 50%, #000 50%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .7); --surux-skeuo-key-shade: rgba(0, 0, 0, .12); --surux-skeuo-key-top: rgba(255, 255, 255, .95); --surux-skeuo-key-bottom: rgba(0, 0, 0, .1); --surux-skeuo-strip: linear-gradient(180deg, var(--surux-skeuo-key, transparent), color-mix(in srgb, var(--surux-skeuo-key, transparent) 90%, #000 10%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .2); --surux-skeuo-desk: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 14rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 72%, #fff 28%), var(--surux-surface) 3rem); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .25)); --surux-skeuo-rim: var(--surux-skeuo-tex-oak, none), var(--surux-skeuo-oak-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-oak, none), var(--surux-skeuo-oak-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-2-base) 38%, #000 62%); --surux-skeuo-stack: 0 3px 0 -1px color-mix(in srgb, var(--surux-surface-base) 88%, var(--surux-surface-2-base) 12%), 0 3px 0 0 var(--surux-skeuo-edge, transparent); --surux-skeuo-plate-width: 8px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-2-base) 40%, #000 60%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-oak, none), var(--surux-skeuo-oak-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 75%, #fff 25%), var(--surux-surface) 40%); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(255, 255, 255, .35)); --surux-skeuo-band-scrim: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 68%, transparent) 0 4.75rem, transparent 6.4rem); --surux-skeuo-plate-rule: 1px solid color-mix(in srgb, var(--surux-text) 22%, var(--surux-surface)); --surux-skeuo-plate-rule-offset: -12px; --surux-skeuo-rivet-hi: rgba(255, 244, 205, .95); --surux-skeuo-rivet-mid: #c9a24a; --surux-skeuo-rivet-lo: color-mix(in srgb, #c9a24a 46%, #000 54%); --surux-skeuo-rivet-rim: transparent; } /* Light alternate: Carrara marble and chrome. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-bs-theme="light"]:not([data-surux-theme="night"])[data-surux-design-material="marble"] { --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 95%, #000 5%); --surux-skeuo-specular: rgba(255, 255, 255, .95); --surux-skeuo-lip: rgba(255, 255, 255, .75); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .07); --surux-skeuo-cast: rgba(0, 0, 0, .2); --surux-skeuo-cast-soft: rgba(0, 0, 0, .2); --surux-skeuo-cast-deep: rgba(0, 0, 0, .34); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-emboss: 0 1px 0 rgba(255, 255, 255, .8); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 95%, #000 5%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 48%, #000 52%); --surux-skeuo-well-shade: rgba(0, 0, 0, .16); --surux-skeuo-well-line: rgba(0, 0, 0, .1); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-2-base) 90%, #000 10%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 96%, #000 4%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 62%, #000 38%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-base) 72%, var(--surux-surface-2-base) 28%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-2-base) 52%, #000 48%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .7); --surux-skeuo-key-shade: rgba(0, 0, 0, .12); --surux-skeuo-key-top: rgba(255, 255, 255, .95); --surux-skeuo-key-bottom: rgba(0, 0, 0, .1); --surux-skeuo-strip: linear-gradient(180deg, var(--surux-skeuo-key, transparent), color-mix(in srgb, var(--surux-skeuo-key, transparent) 90%, #000 10%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .2); --surux-skeuo-desk: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 16rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 70%, #fff 30%), var(--surux-surface) 3rem); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .25)); --surux-skeuo-rim: var(--surux-skeuo-tex-marble, none), var(--surux-skeuo-marble-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-marble, none), var(--surux-skeuo-marble-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-2-base) 58%, #000 42%); --surux-skeuo-stack: 0 3px 0 -1px color-mix(in srgb, var(--surux-surface-base) 93%, #000 7%), 0 3px 0 0 var(--surux-skeuo-edge, transparent); --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #000 45%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-marble, none), var(--surux-skeuo-marble-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 55%, #fff 45%), var(--surux-surface) 55%, color-mix(in srgb, var(--surux-surface) 96%, #000 4%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .9)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 255, 255, .98); --surux-skeuo-rivet-mid: #b9bec6; --surux-skeuo-rivet-lo: #5d636c; --surux-skeuo-rivet-rim: rgba(0, 0, 0, .35); } /* Charcoal alternate: walnut and brass. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="charcoal"]:not([data-surux-theme="night"])[data-surux-design-material="walnut"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 66%, #000 34%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .12); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 50%, #fff 50%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 80%, #fff 20%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 2.5rem, color-mix(in srgb, var(--surux-surface) 93%, #000 7%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .25)); --surux-skeuo-rim: var(--surux-skeuo-tex-walnut, none), var(--surux-skeuo-walnut-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-walnut, none), var(--surux-skeuo-walnut-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-walnut, none), var(--surux-skeuo-walnut-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 90%, #000 10%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 240, 200, .95); --surux-skeuo-rivet-mid: #c9a24a; --surux-skeuo-rivet-lo: color-mix(in srgb, #c9a24a 46%, #000 54%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Slate alternate: grey wool felt. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-appearance="slate"]:not([data-surux-theme="night"])[data-surux-design-material="felt"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 80%, #000 20%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .16); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 50%, #000 50%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: rgba(230, 232, 236, .45); --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 76%, #000 24%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 40%, #fff 60%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 78%, #000 22%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 94%, #000 6%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .07); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: var(--surux-skeuo-key, transparent); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 38% 20% at 16% 34%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 28% 16% at 74% 18%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 46% 24% at 66% 68%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 30% 18% at 10% 88%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 22% 12% at 40% 56%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 72%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 97%, #000 3%), color-mix(in srgb, var(--surux-surface) 97%, #000 3%) 2.5rem, color-mix(in srgb, var(--surux-surface) 88%, #000 12%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .25)); --surux-skeuo-rim: var(--surux-skeuo-tex-felt, none), var(--surux-skeuo-felt-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-felt, none), var(--surux-skeuo-felt-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-felt, none), var(--surux-skeuo-felt-base, none); --surux-skeuo-plate-panel: var(--surux-skeuo-panel, none); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: transparent; --surux-skeuo-rivet-mid: transparent; --surux-skeuo-rivet-lo: transparent; --surux-skeuo-rivet-rim: transparent; } /* Blue night alternate: navy suede. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-theme="night"])[data-bs-theme="dark"][data-surux-design-material="suede"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 62%, #000 38%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .07); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 45%, #000 55%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: rgba(170, 190, 235, .38); --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 72%, #000 28%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 84%, #fff 16%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 55%, color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, .12)); --surux-skeuo-rim: var(--surux-skeuo-tex-suede, none), var(--surux-skeuo-suede-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-suede, none), var(--surux-skeuo-suede-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-suede, none), var(--surux-skeuo-suede-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 90%, #000 10%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: transparent; --surux-skeuo-rivet-mid: transparent; --surux-skeuo-rivet-lo: transparent; --surux-skeuo-rivet-rim: transparent; } /* Blue night alternate: lapis lazuli. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-theme="night"])[data-bs-theme="dark"][data-surux-design-material="lapis"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 62%, #000 38%); --surux-surface: var(--surux-surface-base); --surux-surface-2: var(--surux-surface-2-base); --surux-skeuo-specular: rgba(255, 255, 255, .12); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 45%, #000 55%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: transparent; --surux-skeuo-well: color-mix(in srgb, var(--surux-surface-base) 72%, #000 28%); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%); --surux-skeuo-channel: color-mix(in srgb, var(--surux-app-bg) 80%, #000 20%); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 84%, #fff 16%); --surux-skeuo-key-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 140% 90% at 50% 120%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); --surux-skeuo-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 55%, color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, .12)); --surux-skeuo-rim: var(--surux-skeuo-tex-lapis, none), var(--surux-skeuo-lapis-base, none); --surux-skeuo-rim-width: 6px; --surux-skeuo-rim-seam: 1px dashed var(--surux-skeuo-stitch, transparent); --surux-skeuo-bar: var(--surux-skeuo-tex-lapis, none), var(--surux-skeuo-lapis-base, none); --surux-skeuo-bar-edge: color-mix(in srgb, var(--surux-surface-base) 40%, #000 60%); --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: color-mix(in srgb, var(--surux-surface-base) 35%, #000 65%); --surux-skeuo-plate-rim: var(--surux-skeuo-tex-lapis, none), var(--surux-skeuo-lapis-base, none); --surux-skeuo-plate-panel: linear-gradient(180deg, var(--surux-surface), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 90%, #000 10%)); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 240, 200, .95); --surux-skeuo-rivet-mid: #c9a24a; --surux-skeuo-rivet-lo: color-mix(in srgb, #c9a24a 46%, #000 54%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* Black alternate: woven carbon. The base block stays forged carbon. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):is([data-surux-appearance="black"], [data-surux-theme="night"])[data-surux-design-material="woven-carbon"] { --surux-app-bg: color-mix(in srgb, var(--surux-surface-base) 55%, #000 45%); --surux-surface: color-mix(in srgb, var(--surux-surface-base) 97%, #fff 3%); --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 96%, #fff 4%); --surux-skeuo-specular: rgba(255, 255, 255, .14); --surux-skeuo-lip: rgba(255, 255, 255, .07); --surux-skeuo-bevel-shade: rgba(0, 0, 0, .35); --surux-skeuo-cast: rgba(0, 0, 0, .55); --surux-skeuo-cast-soft: rgba(0, 0, 0, .45); --surux-skeuo-cast-deep: rgba(0, 0, 0, .7); --surux-skeuo-edge: color-mix(in srgb, var(--surux-surface-base) 45%, #000 55%); --surux-skeuo-emboss: 0 -1px 0 rgba(0, 0, 0, .55); --surux-skeuo-stitch: transparent; --surux-skeuo-well: var(--surux-surface-base); --surux-skeuo-well-edge: color-mix(in srgb, var(--surux-surface-2-base) 55%, #fff 45%); --surux-skeuo-well-shade: rgba(0, 0, 0, .55); --surux-skeuo-well-line: rgba(0, 0, 0, .55); --surux-skeuo-tray: var(--surux-surface-base); --surux-skeuo-channel: var(--surux-surface-base); --surux-skeuo-channel-edge: color-mix(in srgb, var(--surux-surface-2-base) 70%, #fff 30%); --surux-skeuo-key: color-mix(in srgb, var(--surux-surface-2-base) 80%, #fff 20%); --surux-skeuo-key-edge: #000; --surux-skeuo-key-sheen: rgba(255, 255, 255, .14); --surux-skeuo-key-shade: rgba(0, 0, 0, .25); --surux-skeuo-key-top: rgba(255, 255, 255, .22); --surux-skeuo-key-bottom: rgba(0, 0, 0, .4); --surux-skeuo-strip: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2) 55%, var(--surux-surface)), color-mix(in srgb, var(--surux-surface) 92%, #000 8%)); --surux-skeuo-tab: color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%); --surux-skeuo-float-sheen: rgba(255, 255, 255, .03); --surux-skeuo-desk: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 16rem); --surux-skeuo-panel: linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 95%, #fff 5%), var(--surux-surface) 3rem, color-mix(in srgb, var(--surux-surface) 91%, #000 9%)); --surux-skeuo-inlay: linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(255, 255, 255, .14)); --surux-skeuo-rim: var(--surux-skeuo-tex-woven, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 90%, #fff 10%), color-mix(in srgb, var(--surux-surface-base) 78%, #000 22%)); --surux-skeuo-rim-width: 7px; --surux-skeuo-rim-seam: 1px dashed transparent; --surux-skeuo-bar: var(--surux-skeuo-tex-woven, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 88%, #fff 12%), color-mix(in srgb, var(--surux-surface-base) 70%, #000 30%)); --surux-skeuo-bar-edge: #000; --surux-skeuo-stack: 0 0 0 transparent; --surux-skeuo-plate-width: 9px; --surux-skeuo-plate-edge: #000; --surux-skeuo-plate-rim: var(--surux-skeuo-tex-woven, none), linear-gradient(180deg, color-mix(in srgb, var(--surux-surface-2-base) 86%, #fff 14%), color-mix(in srgb, var(--surux-surface-base) 80%, #000 20%)); --surux-skeuo-plate-panel: var(--surux-skeuo-panel, none); --surux-skeuo-plate-inlay: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .16)); --surux-skeuo-band-scrim: transparent; --surux-skeuo-plate-rule: 1px solid transparent; --surux-skeuo-plate-rule-offset: -6px; --surux-skeuo-rivet-hi: rgba(255, 255, 255, .85); --surux-skeuo-rivet-mid: color-mix(in srgb, var(--surux-surface-2-base) 50%, #fff 50%); --surux-skeuo-rivet-lo: color-mix(in srgb, var(--surux-surface-2-base) 70%, #000 30%); --surux-skeuo-rivet-rim: rgba(0, 0, 0, .7); } /* ------------------------------------------------------------------------------------- * 3. Selector rules: materials the tokens cannot paint * ------------------------------------------------------------------------------------- */ /* Desk: smooth. The default primary glow is a light source of its own, so it goes. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) body { background: var(--surux-skeuo-desk, transparent), var(--surux-app-bg); } /* Bars: topbar and command bar are the machined or bound chrome. Opaque, seam on the inner edge. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-topbar { background: var(--surux-skeuo-seam-bottom, transparent), var(--surux-skeuo-bar, transparent); border-bottom: 1px solid var(--surux-skeuo-bar-edge, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent), 0 3px 6px -2px var(--surux-skeuo-cast-soft, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar { border-radius: .5rem .5rem 0 0; border-color: var(--surux-skeuo-bar-edge, transparent); background: var(--surux-skeuo-seam-top, transparent), var(--surux-skeuo-bar, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; } /* The sidebar keeps the layout sheet's smooth fill. In the canopy layout it takes the canopy's --surux-app-bg. Only the edge is skeuo chrome; the textured bar would sit under the nav text. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-sidebar { border-color: var(--surux-skeuo-bar-edge, transparent); } /* Two-tone focus on controls hosted by the bar. The primary outline stays; the halo is key (surface as the fallback) and wraps the stroke so the indicator meets the bar on every material. Only a floating overflow panel is excluded. One or two inline commands (the same :not([data-surux-command-overflow-inline-few]) / [data-surux-command-overflow-many] condition as surux.components.css) stay on the bar and keep the halo. Menus and popovers stay excluded. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-topbar, .surux-command-bar, .surux-sidebar) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible:not(:where(.dropdown-menu *, .surux-command-overflow:is(:not([data-surux-command-overflow-inline-few]), [data-surux-command-overflow-many]) > .surux-command-overflow-panel *, [popover] *)) { outline: 2px solid var(--surux-primary) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px var(--surux-skeuo-focus-halo, var(--surux-skeuo-key, var(--surux-surface))) !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.dropdown-item, .surux-user-menu-item):focus-visible { outline: 2px solid var(--surux-primary); outline-offset: -2px; box-shadow: none; } /* Sheets: cards, edit sections, toolbars and lanes. A textured rim (on the rim appearances) around a smooth panel; the rim carries the stitch. With rim width 0 the panel is the whole sheet. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-card, .surux-workflow-lane):not(:where(.surux-whep-player, .surux-whep-player *, .surux-channel-gallery *, .surux-inspection-window *, .surux-map-canvas *)) { border-color: var(--surux-skeuo-edge, transparent); background: var(--surux-skeuo-panel, transparent) center / var(--surux-skeuo-rim-panel-size, transparent) var(--surux-skeuo-rim-panel-size, transparent) no-repeat padding-box, var(--surux-skeuo-inlay, transparent) center / var(--surux-skeuo-rim-inlay-size, transparent) var(--surux-skeuo-rim-inlay-size, transparent) no-repeat padding-box, var(--surux-skeuo-rim, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-card, .surux-workflow-lane):not(:focus-visible):not(:where(.surux-whep-player, .surux-whep-player *, .surux-channel-gallery *, .surux-inspection-window *, .surux-map-canvas *)) { outline: var(--surux-skeuo-rim-seam, transparent); outline-offset: calc(var(--surux-skeuo-rim-width, transparent) / -2 - 1px); } /* The stitch is not a focus ring. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(a, button, label, [role="button"], [tabindex]).surux-card:not(:focus-visible) { outline: revert; outline-offset: revert; } /* No rim where content runs to the edge (flush cards), or on a sheet inside another sheet or dialog: those are single smooth pieces (index cards in a lane, cards inside a card, rows in a modal). */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-card:is(.surux-card-padding-none, .surux-card .surux-card, .surux-workflow-lane .surux-card, :is(.modal, .surux-modal-content, .surux-drawer-content) .surux-card) { background: var(--surux-skeuo-panel, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-card:not(:focus-visible):is(.surux-card-padding-none, .surux-card .surux-card, .surux-workflow-lane .surux-card, :is(.modal, .surux-modal-content, .surux-drawer-content) .surux-card) { outline: 0; } /* Never inside tables: any sheet that holds a table is plain, smooth stock. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-card, .surux-data-table-card, .modal-content, .surux-drawer-content, .surux-workflow-lane):is(.surux-data-table-card, :has(table)) { background: var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-card, .surux-data-table-card, .modal-content, .surux-drawer-content, .surux-workflow-lane):not(:focus-visible):is(.surux-data-table-card, :has(table)) { outline: 0; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(a, button, label, [role="button"], [tabindex]).surux-card:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 3px; } /* A card with no padding of its own is flush with the rim. Inset it by the rim so text stays off the texture. :where keeps this behind a card's own padding. Rimless sheets are excluded: nothing textured is drawn there. */ :where(:is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-card:not([class*="padding"]):not([class*="p-"]):not(.surux-edit-section):not(.surux-card-padding-none):not(.surux-data-table-card):not(:has(table)):not(.surux-card .surux-card):not(.surux-workflow-lane .surux-card):not(:is(.modal, .surux-modal-content, .surux-drawer-content) .surux-card)) { padding: var(--surux-skeuo-rim-width, 0px); } /* Plates: header band and page hero. A frame of the plate material (brushed metal, bookcloth, carbon) around the band, riveted at the corners on metal, a printed rule on paper. The header band has no inner label panel: the texture runs across the band. The page hero keeps its smooth label panel. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-header-band, .surux-page-hero) { --bs-secondary-color: var(--surux-muted); --surux-skeuo-rivet-at: calc(var(--surux-skeuo-plate-width, transparent) / 2 - 4.5px); border-color: var(--surux-skeuo-plate-edge, var(--surux-skeuo-edge, transparent)); border-radius: var(--surux-radius-card); box-shadow: var(--surux-elevation-card); outline: var(--surux-skeuo-plate-rule, transparent); outline-offset: var(--surux-skeuo-plate-rule-offset, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-header-band { background: var(--surux-skeuo-rivet, transparent) left var(--surux-skeuo-rivet-at, transparent) top var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) right var(--surux-skeuo-rivet-at, transparent) top var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) left var(--surux-skeuo-rivet-at, transparent) bottom var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) right var(--surux-skeuo-rivet-at, transparent) bottom var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-band-scrim, transparent), var(--surux-skeuo-plate-inlay, transparent) center / var(--surux-skeuo-plate-inlay-size, transparent) var(--surux-skeuo-plate-inlay-size, transparent) no-repeat padding-box, var(--surux-skeuo-plate-rim, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero { background: var(--surux-skeuo-rivet, transparent) left var(--surux-skeuo-rivet-at, transparent) top var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) right var(--surux-skeuo-rivet-at, transparent) top var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) left var(--surux-skeuo-rivet-at, transparent) bottom var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-rivet, transparent) right var(--surux-skeuo-rivet-at, transparent) bottom var(--surux-skeuo-rivet-at, transparent) / 9px 9px no-repeat padding-box, var(--surux-skeuo-plate-panel, transparent) center / var(--surux-skeuo-plate-panel-size, transparent) var(--surux-skeuo-plate-panel-size, transparent) no-repeat padding-box, var(--surux-skeuo-plate-inlay, transparent) center / var(--surux-skeuo-plate-inlay-size, transparent) var(--surux-skeuo-plate-inlay-size, transparent) no-repeat padding-box, var(--surux-skeuo-plate-rim, transparent), var(--surux-surface); } /* The band's segment rule and the hero's inner layers stop at the frame. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-header-band .surux-band-segments { margin-inline: var(--surux-skeuo-plate-width, transparent); margin-bottom: var(--surux-skeuo-plate-width, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero:has(.surux-page-hero-halo) { padding: 0; } /* The halo hero keeps its content and tone but becomes the plate: the glow art and its ring are a second light source, so they give way to the plate's own top sheen. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-art { inset: var(--surux-skeuo-plate-width, transparent); border-radius: 0; background: linear-gradient(180deg, var(--surux-skeuo-specular, transparent), transparent 2.25rem); opacity: .5; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-art::before { display: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero-halo.surux-page-hero-content { padding: calc(var(--surux-skeuo-plate-width, transparent) + .7rem); } /* The context mark is a domed enamel badge set in a metal ring, in the tenant colour pair. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-mark { border-radius: 50%; background: radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%), radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%), var(--surux-primary-action-bg); color: var(--surux-primary-contrast); box-shadow: 0 0 0 2px var(--surux-skeuo-rivet-mid, var(--surux-skeuo-key, transparent)), 0 0 0 3px var(--surux-skeuo-key-edge, transparent), 0 2px 3px 2px var(--surux-skeuo-cast, transparent); } /* Summary facts read through a recessed window. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-summary-facts { border-color: var(--surux-skeuo-well-edge, transparent); border-radius: var(--surux-radius-control); background: var(--surux-skeuo-well, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-well-line, transparent), inset 0 2px 5px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } /* Embossed type on titles and headings. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-page-title-row h1, .surux-section-heading, .surux-workflow-lane-header h2, .surux-modal-title, .surux-page-hero-copy strong) { text-shadow: var(--surux-skeuo-emboss, transparent); } /* Tabs: the channel and key geometry are a single-level horizontal strip only. Folder parents, the vertical rail and child tabs are not this plate. */ :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list:not(.surux-tab-list-hierarchy), html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list:not(.surux-tab-list-hierarchy), [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list:not(.surux-tab-list-hierarchy) ) { gap: .3rem; padding: .3rem .3rem .35rem; border: 1px solid var(--surux-skeuo-channel-edge, transparent); border-radius: var(--surux-radius-md); background: var(--surux-skeuo-channel, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-well-line, transparent), inset 0 2px 4px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button, html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button, [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button ) { min-height: 38px; margin-bottom: 0; padding-block: .5rem .45rem; border: 1px solid transparent; border-bottom-width: 3px; border-radius: var(--surux-radius-control); text-shadow: var(--surux-skeuo-emboss, transparent); } :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:hover, html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:hover, [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:hover ) { background: color-mix(in srgb, var(--surux-skeuo-key, transparent) 45%, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-lip, transparent); } :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) ) { border-color: var(--surux-skeuo-key-edge, transparent); border-bottom-color: var(--surux-primary); background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, transparent) 0%, rgba(255, 255, 255, 0) 60%, var(--surux-skeuo-key-shade, transparent) 100%), var(--surux-skeuo-tab, transparent); color: var(--surux-text); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), 0 1px 2px var(--surux-skeuo-cast, transparent), 0 2px 4px -1px var(--surux-skeuo-cast-soft, transparent); } /* Below the desktop rail, a vertical preference still renders a horizontal strip. Give it the channel. */ @media (max-width: 991.98px) { html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list:not(.surux-tab-list-hierarchy) { gap: .3rem; padding: .3rem .3rem .35rem; border: 1px solid var(--surux-skeuo-channel-edge, transparent); border-radius: var(--surux-radius-md); background: var(--surux-skeuo-channel, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-well-line, transparent), inset 0 2px 4px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button { min-height: 38px; margin-bottom: 0; padding-block: .5rem .45rem; border: 1px solid transparent; border-bottom-width: 3px; border-radius: var(--surux-radius-control); text-shadow: var(--surux-skeuo-emboss, transparent); } html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:hover { background: color-mix(in srgb, var(--surux-skeuo-key, transparent) 45%, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-lip, transparent); } html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list:not(.surux-tab-list-hierarchy) > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) { border-color: var(--surux-skeuo-key-edge, transparent); border-bottom-color: var(--surux-primary); background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, transparent) 0%, rgba(255, 255, 255, 0) 60%, var(--surux-skeuo-key-shade, transparent) 100%), var(--surux-skeuo-tab, transparent); color: var(--surux-text); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), 0 1px 2px var(--surux-skeuo-cast, transparent), 0 2px 4px -1px var(--surux-skeuo-cast-soft, transparent); } html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list-hierarchy > .surux-tab-button:hover:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))) { background: color-mix(in srgb, var(--surux-skeuo-key, transparent) 45%, transparent); box-shadow: none; } html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tab-list-hierarchy > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) { border-bottom: 3px solid var(--surux-primary); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: none; color: var(--surux-text); } } :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list-hierarchy > .surux-tab-button:hover:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))), html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list-hierarchy > .surux-tab-button:hover:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))), [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list-hierarchy > .surux-tab-button:hover:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))) ) { background: color-mix(in srgb, var(--surux-skeuo-key, transparent) 45%, transparent); box-shadow: none; } :is( html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-desktop-tab-orientation="vertical"]) .surux-tab-list-hierarchy > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"])[data-surux-desktop-tab-orientation="vertical"] .surux-tabs[data-surux-tabs-orientation-policy="horizontal-only"] > .surux-tab-list-hierarchy > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list-hierarchy > .surux-tab-button:is(.active, [aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) ) { border-bottom: 3px solid var(--surux-primary); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: none; color: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs .surux-tab-button:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; } @media (min-width: 992px) { html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button:focus-visible { outline-offset: -3px; } } [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button:focus-visible { outline-offset: -3px; } /* Fields: debossed wells. The edge goes only through --surux-picker-edge. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :not(.surux-filter-control.is-filter-active) > :where(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) { --surux-picker-rest: var(--surux-skeuo-well, transparent); --surux-picker-well: var(--surux-skeuo-well, transparent); --surux-picker-edge: var(--surux-skeuo-well-edge, currentColor); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:disabled)):not(:has([readonly])) { --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 52%, var(--surux-text)); } /* TR-0000173 skeuo read-only plate */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"]))):not(:has(> [readonly]:focus-visible)) { --surux-picker-edge: var(--surux-border); border-color: var(--surux-picker-edge); background: var(--surux-surface-2); box-shadow: none; } /* TR-0000173 skeuo disabled well */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"])):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"]))) { --surux-picker-edge: var(--surux-disabled-control-border); border-color: var(--surux-picker-edge); background: var(--surux-disabled-control-bg); box-shadow: var(--surux-disabled-control-shadow); } /* TR-0000173 skeuo read-only warning */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(> [readonly]:focus-visible)) { --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 52%, var(--surux-text)); border-color: var(--surux-picker-edge); } /* TR-0000173 skeuo read-only focus */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(> [readonly]:focus-visible):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))) { --surux-picker-edge: var(--surux-primary); border-color: var(--surux-primary); background: var(--surux-surface-2); box-shadow: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-shell, .surux-picker-shell):focus-within > :is(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) { --surux-picker-edge: var(--surux-primary); background: var(--surux-skeuo-well, transparent); box-shadow: var(--surux-elevation-field, 0 0 transparent), 0 0 0 2px var(--surux-picker-edge, var(--surux-primary)); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface).surux-search-input-box { --surux-input-border: var(--surux-picker-edge, currentColor); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface)::after { display: none; } /* Switch: a physical slot with a domed knob. The knob is lit from the top, the slot is recessed. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .form-switch .form-check-input { width: 2.5em; height: 1.3em; /* The slot edge carries the 3:1 boundary on every surface: muted ink, not the well edge. */ border-color: color-mix(in srgb, var(--surux-muted) 70%, var(--surux-text)); background-color: var(--surux-skeuo-tray, transparent); background-image: radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(0, 0, 0, .55) 63% 67%, transparent 70%), radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .95) 0 18%, rgba(236, 236, 236, 1) 34%, rgba(186, 186, 186, 1) 60%, rgba(120, 120, 120, 1) 64%, transparent 68%) !important; background-size: 1.3em 1.3em, 1.3em 1.3em !important; background-repeat: no-repeat; background-position: left center, left center; box-shadow: inset 0 1px 3px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:checked { border-color: color-mix(in srgb, var(--surux-primary) 62%, #000 38%); background-color: var(--surux-primary); /* The palette sheet paints a flat contrast dot with !important; the same knob is kept on. */ background-image: radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(0, 0, 0, .55) 63% 67%, transparent 70%), radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .95) 0 18%, rgba(236, 236, 236, 1) 34%, rgba(186, 186, 186, 1) 60%, rgba(120, 120, 120, 1) 64%, transparent 68%) !important; background-size: 1.3em 1.3em, 1.3em 1.3em !important; background-position: right center, right center; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 var(--surux-skeuo-lip, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; } /* Status chips: enamel badges. The tone keeps its colours; only a bevel at the edge is added, never a sheen across the label (a sheen lowers the tone text's contrast). */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-status-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 1px var(--surux-skeuo-cast, transparent); } /* Segmented control: recessed track (already inset) with a raised key as the thumb. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-segmented-control { border-color: var(--surux-skeuo-well-edge, transparent); background: var(--surux-skeuo-tray, transparent); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-segmented-control::before { border-radius: calc(var(--surux-radius-control) - 1px); background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .14)), var(--surux-primary-action-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px var(--surux-skeuo-cast, transparent); } /* Tables: a milled header strip; rows separated by an engraved groove. No texture. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table thead th { background: var(--surux-skeuo-strip, transparent); border-bottom-color: var(--surux-skeuo-edge, transparent); text-shadow: var(--surux-skeuo-emboss, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody :is(td, th) { border-bottom-color: color-mix(in srgb, var(--surux-skeuo-edge, transparent) 55%, transparent); background-color: var(--surux-list-pin-bg, var(--surux-surface)); background-image: linear-gradient(180deg, var(--surux-skeuo-lip, transparent) 0 1px, transparent 1px), linear-gradient( color-mix(in srgb, var(--surux-primary) var(--surux-list-row-plain-hover, 0%), transparent) 0 100% ), linear-gradient( color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent), color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent) ); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-payment-report-invoice-table tr:is(.is-paid, .is-reserved) { --surux-list-row-tint: 5%; --surux-list-row-tint-colour: var(--surux-success); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-payment-report-invoice-table tr.is-overdue { --surux-list-row-tint: 6%; --surux-list-row-tint-colour: var(--surux-danger); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) tr.capture-run-moved { --surux-list-row-tint: 14%; --surux-list-row-tint-colour: var(--surux-warning); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-planner-account-day-row { --surux-list-row-tint: 100%; --surux-list-row-tint-colour: var(--surux-surface-2); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-preference-sample-selected { --surux-list-row-tint: 10%; --surux-list-row-tint-colour: var(--surux-primary); } /* Drawers and offcanvas are smooth sheets; metric tiles and summary status are small plates; the pager is a recessed tray. Docked drawers keep their square viewport edges (radius untouched). */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-drawer-content:not(.modal-fullscreen) { border-color: var(--surux-skeuo-edge, transparent); background: var(--surux-skeuo-panel, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-editor-summary-status) { border-color: var(--surux-skeuo-edge, transparent); box-shadow: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 1px 1px var(--surux-skeuo-cast, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-page-control, .surux-page-size-control) { border-color: var(--surux-skeuo-well-edge, transparent); background: var(--surux-skeuo-tray, transparent); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } /* Section icon tiles are small raised enamel plates. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-edit-section-icon { border-radius: var(--surux-radius-control); box-shadow: inset 0 1px 0 var(--surux-skeuo-specular, transparent), inset 0 -1px 0 var(--surux-skeuo-bevel-shade, transparent), 0 1px 1px var(--surux-skeuo-cast, transparent); } /* Modal: an opaque smooth sheet. No plate behind the footer buttons. The tone accent stays. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-modal .modal-content, .surux-modal-content) { border-color: var(--surux-skeuo-edge, transparent); background: var(--surux-skeuo-panel, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-footer { border-top-color: transparent; background: transparent; background-image: none; box-shadow: 0 0 transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header { background: transparent; box-shadow: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header::before { inset: 0 auto 0 0; width: var(--surux-border-width-strong); border-radius: 0; background: var(--surux-modal-header-accent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header-icon { border-radius: var(--surux-radius-control); border-color: var(--surux-modal-header-accent); background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, transparent), rgba(255, 255, 255, 0) 55%), var(--surux-skeuo-well, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } /* Floating layers: opaque, elevated sheets. Never textured, never translucent. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.dropdown-menu, .surux-command-overflow-panel, .surux-select-list, .surux-field-hint-popover, .popover, .surux-picker-results, .surux-workflow-lane-peek, .surux-tab-rail-preferences) { border-color: var(--surux-skeuo-edge, transparent); background-color: var(--surux-surface); background-image: linear-gradient(180deg, var(--surux-skeuo-float-sheen, rgba(255, 255, 255, .06)), rgba(255, 255, 255, 0) 2rem); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--surux-elevation-float); } /* Workflow board: each lane is a framed sheet; cards sit in its recessed tray as smooth index cards. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane { box-shadow: var(--surux-elevation-card); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane-header { border-bottom-color: var(--surux-skeuo-edge, transparent); background: transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane-tools { padding-inline: calc(var(--surux-skeuo-rim-width, 0px) + .15rem); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane-items { margin: .5rem calc(var(--surux-skeuo-rim-width, transparent) + .15rem) calc(var(--surux-skeuo-rim-width, transparent) + .15rem); border: 1px solid var(--surux-skeuo-well-edge, transparent); border-radius: var(--surux-radius-control); background: var(--surux-skeuo-tray, transparent); box-shadow: inset 0 2px 4px var(--surux-skeuo-well-shade, transparent), 0 1px 0 var(--surux-skeuo-lip, transparent); } /* Toast: the tone stripe is resolved on the toast itself (see NOTES.md, the root token cannot). */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast { border-radius: var(--surux-radius-card); background-color: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-toast-tone) 4%); background-image: none; box-shadow: inset .16rem 0 0 color-mix(in srgb, var(--surux-toast-tone) 58%, transparent), var(--surux-elevation-toast, 0 0 transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast-icon { border-radius: var(--surux-radius-control); background: color-mix(in srgb, var(--surux-toast-tone) 28%, var(--surux-surface)); color: color-mix(in srgb, var(--surux-toast-tone) 72%, var(--surux-text)); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast-title + .surux-toast-message { color: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast[class~="surux-toast-error"] .surux-toast-action { color: color-mix(in srgb, var(--surux-danger) 80%, var(--surux-text) 20%); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast[class~="surux-toast-success"] .surux-toast-action { color: color-mix(in srgb, var(--surux-success) 80%, var(--surux-text) 20%); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toast-count { color: var(--surux-text); background: transparent; } /* List keyboard focus stays on the card. The table sheet's outline: 0 must not remove it. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-data-table-card:has(> .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible) { outline: 2px solid var(--surux-primary); outline-offset: 3px; } /* Row states paint the cell and keep the lip plus the page tint, including pinned cells. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-link:hover > td, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-activatable:hover > td, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-link:hover > th, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-activatable:hover > th { background-color: color-mix(in srgb, var(--surux-primary) var(--surux-list-row-hover-tint, 8%), var(--surux-surface)); background-image: linear-gradient(180deg, var(--surux-skeuo-lip, transparent) 0 1px, transparent 1px); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > td, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > th { background-color: color-mix(in srgb, var(--surux-primary) var(--surux-list-row-selected-tint, 10%), var(--surux-surface)); background-image: linear-gradient(180deg, var(--surux-skeuo-lip, transparent) 0 1px, transparent 1px); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr:has(.surux-row-actions-menu[open]) > td, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr:has(.surux-row-actions-menu[open]) > th { background-color: color-mix(in srgb, var(--surux-primary) 8%, var(--surux-surface)); background-image: linear-gradient(180deg, var(--surux-skeuo-lip, transparent) 0 1px, transparent 1px); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr:is(.surux-row-selected, .surux-row-link:hover, .surux-row-activatable:hover) { --surux-list-fold-ink: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table tbody tr:is(.surux-row-selected, .surux-row-link:hover) :is(.surux-record-code, a:not(.btn):not(.surux-button)) { color: var(--surux-text); } /* Pinned controls sit on the sheet, not a darker desk band. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-data-table-scroll { --surux-list-pin-bg: var(--surux-surface); --surux-list-pin-edge: calc(var(--surux-list-pin-dir, 1) * 4px) 0 6px -4px var(--surux-skeuo-cast, transparent); --surux-thead-cell-shadow: inset 0 -1px 0 var(--surux-skeuo-edge, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table :is(td, th).surux-row-control-column:not(thead th), :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-control-column :is(.surux-row-actions, .surux-row-actions-menu) { box-shadow: 0 0 transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-control-column :is(.surux-command-button-icon-only, .surux-command-overflow-trigger) { width: var(--surux-icon-only-subtle-size, 2.25rem); min-width: var(--surux-icon-only-subtle-size, 2.25rem); height: var(--surux-icon-only-subtle-size, 2.25rem); min-height: var(--surux-icon-only-subtle-size, 2.25rem); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-table .surux-planner-line-needs-review > :is(td, th).surux-row-control-column:not(thead th) { box-shadow: inset .2rem 0 0 color-mix(in srgb, var(--surux-planner-purple, var(--surux-primary)) 72%, transparent); } @media (max-width: 991.98px) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) [data-surux-mobile-mode="cards"].surux-data-table-card:is(:not([data-surux-list-measured]), [data-surux-list-compact]) { background-color: transparent; background-image: none; box-shadow: none; outline: 0; } } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) [data-surux-mobile-mode="cards"][data-surux-list-compact].surux-data-table-card { background-color: transparent; background-image: none; box-shadow: none; outline: 0; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card) { border: 1px solid var(--surux-skeuo-edge, transparent); border-radius: var(--surux-radius-card); background: var(--surux-skeuo-panel, transparent), var(--surux-surface); box-shadow: var(--surux-elevation-card); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card):hover { box-shadow: var(--surux-elevation-raised); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card)::after { border-color: var(--surux-skeuo-edge, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card) :is(.surux-row-actions, .surux-row-actions-menu, .surux-mobile-list-item-actions) .surux-command-overflow-panel:not(:popover-open):where(:not([data-surux-row-sheet] > *)) { background-color: transparent; box-shadow: 0 0 transparent; } /* Folder: hooks only, plain lengths. The drawn parent is the SVG, not a key. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-list-hierarchy { --surux-tab-folder-fill: var(--surux-skeuo-channel, transparent); --surux-tab-folder-edge: transparent; --surux-tab-folder-inset-dark: var(--surux-skeuo-well-shade, transparent); --surux-tab-folder-inset-light: var(--surux-skeuo-lip, transparent); --surux-tab-folder-shadow: drop-shadow(0 3px 4px var(--surux-skeuo-cast, transparent)); --surux-tab-folder-shadow-room: 8px; --surux-tab-folder-radius: var(--surux-radius-md); --surux-tab-folder-shoulder: var(--surux-radius-sm); --surux-tab-folder-lane-radius: var(--surux-radius-md); --surux-tab-folder-ink: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) [data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]) { background: transparent; box-shadow: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-list-hierarchy:not([data-surux-tab-folder="drawn"]) > .surux-tab-sublist { background: var(--surux-skeuo-well, transparent); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-sublist > .surux-tab-button { border-width: 0; border-radius: var(--surux-radius-control); background: transparent; box-shadow: none; color: var(--surux-muted); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-sublist > .surux-tab-button:hover { background: color-mix(in srgb, var(--surux-skeuo-key, transparent) 35%, transparent); color: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-sublist > .surux-tab-button:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-sublist > .surux-tab-button:is(.active, [aria-selected="true"]) { border-width: 0; background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, transparent), rgba(255, 255, 255, 0) 60%), var(--surux-skeuo-key, var(--surux-surface)); color: var(--surux-text); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), 0 1px 1px var(--surux-skeuo-cast, transparent); } @media (min-width: 992px) { html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-rail-collapsible):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button { border-radius: var(--surux-radius-control); border-bottom-width: 0; } html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.surux-tabs-rail-collapsible):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list { border-inline-end-color: var(--surux-skeuo-edge, var(--surux-border)); } html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.is-tab-rail-collapsed:not(.is-tab-rail-open)):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs:not(.is-tab-rail-collapsed:not(.is-tab-rail-open)):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"]:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) { border-bottom-color: transparent; border-inline-end-color: var(--surux-primary); box-shadow: inset -2px 0 0 var(--surux-primary); } } [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not(.surux-tabs-rail-collapsible) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button { border-radius: var(--surux-radius-control); border-bottom-width: 0; } [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not(.surux-tabs-rail-collapsible):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list { border-inline-end-color: var(--surux-skeuo-edge, var(--surux-border)); } [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not(.is-tab-rail-collapsed:not(.is-tab-rail-open)):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)), [data-surux-preference-preview][data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not(.is-tab-rail-collapsed:not(.is-tab-rail-open)):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"]:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) { border-bottom-color: transparent; border-inline-end-color: var(--surux-primary); box-shadow: inset -2px 0 0 var(--surux-primary); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-rail-controls { background: transparent; box-shadow: 0 0 transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-rail-controls :is(.surux-tab-rail-toggle, .surux-tab-rail-options) { border-color: var(--surux-skeuo-key-edge, transparent); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tab-rail-controls .surux-tab-rail-toggle[aria-pressed="true"] { box-shadow: inset 0 2px 3px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-pinned::before { background: var(--surux-skeuo-edge, transparent); } /* Search-field actions stay discs. Command-bar commands are Bevel keys (.375rem), every tone, labelled or icon-only, including close and the overflow trigger. Inline panels, the form and the delete bar stay clear. Icon-only Subtle and Tinted stay Bevel wells (F2). The header band stays .375rem keys so the help trigger matches Refresh (H4 branch a). The chevron reads --surux-button-radius-pill. On the command bar that token is the key radius, including icon-only Subtle and Tinted wells when the finish is not Bevel. Search overflow triggers, and labelled Subtle commands in the search field, stay 999px. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is( .surux-command-bar, .surux-command-bar.surux-command-bar-lanes ) :is( .surux-command-button, .surux-command-overflow-trigger, .surux-command-button-icon-only, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-button-tone-standard, .surux-button-tone-secondary, .surux-button-tone-warning, .surux-button-tone-destructive ):where(:not(.surux-button-tone-action)):where(:not(.surux-button-pressed, [aria-pressed="true"])) { --surux-button-radius: .375rem; --surux-button-bg: var(--surux-surface); --surux-button-border: var(--surux-skeuo-key-edge, transparent); border-radius: .375rem; background: var(--surux-surface); background-image: none; box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-overflow-trigger { --surux-button-radius-pill: .375rem; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button-subtle-surface:not(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted) { --surux-button-radius-pill: .375rem; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar :is(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted), :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header .btn.surux-button.surux-modal-close.surux-command-button-icon-only { --surux-button-radius-pill: .375rem; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-command-bar, .surux-toolbar-search-actions, .surux-header-band .surux-page-helper) .btn.surux-button.surux-command-button.surux-command-button-subtle-surface:not(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted):not(:hover, :focus-visible, :active, .surux-button-pressed, [aria-pressed="true"], :disabled, [aria-disabled="true"]) { background: var(--surux-surface) !important; background-image: none !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]):not([data-surux-button-style="bevel"]) :is(.surux-command-bar, .surux-toolbar-search-actions, .surux-header-band .surux-page-helper) .btn.surux-button.surux-command-button.surux-command-button-icon-only.surux-command-button-subtle-surface:not(:hover, :focus-visible, :active, .surux-button-pressed, [aria-pressed="true"], :disabled, [aria-disabled="true"]):where(:not(.surux-toolbar-search-actions *)) { background: var(--surux-skeuo-tray, var(--surux-surface)) !important; background-image: none !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-button-tone-secondary:is(.surux-button-pressed, [aria-pressed="true"]) { color: var(--surux-text); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-action { background: var(--surux-primary-action-bg); color: var(--surux-primary-contrast); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-warning { color: var(--surux-warning); box-shadow: 0 0 0 1px var(--surux-warning) !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-destructive { color: var(--surux-danger); box-shadow: 0 0 0 1px var(--surux-danger) !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-warning:focus-visible:not(:where(.dropdown-menu *, .surux-command-overflow:is(:not([data-surux-command-overflow-inline-few]), [data-surux-command-overflow-many]) > .surux-command-overflow-panel *, [popover] *)) { box-shadow: 0 0 0 1px var(--surux-warning), 0 0 0 2px var(--surux-surface), 0 0 0 4px var(--surux-primary), 0 0 0 6px var(--surux-skeuo-focus-halo, var(--surux-skeuo-key, var(--surux-surface))) !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-destructive:focus-visible:not(:where(.dropdown-menu *, .surux-command-overflow:is(:not([data-surux-command-overflow-inline-few]), [data-surux-command-overflow-many]) > .surux-command-overflow-panel *, [popover] *)) { box-shadow: 0 0 0 1px var(--surux-danger), 0 0 0 2px var(--surux-surface), 0 0 0 4px var(--surux-primary), 0 0 0 6px var(--surux-skeuo-focus-halo, var(--surux-skeuo-key, var(--surux-surface))) !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :where(.dropdown-menu, [popover], .surux-command-overflow:is(:not([data-surux-command-overflow-inline-few]), [data-surux-command-overflow-many]) > .surux-command-overflow-panel) .surux-command-button:is(.surux-button-tone-warning, .surux-button-tone-destructive):focus-visible { outline: 2px solid var(--surux-primary) !important; outline-offset: -2px !important; box-shadow: 0 0 0 1px currentColor !important; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-footer .surux-command-button.surux-button-tone-approved:where(:not(:disabled, .disabled, [aria-disabled="true"])) { --surux-button-radius: 999px; --surux-button-bg: var(--surux-workflow-approved-bg); --surux-button-border: var(--surux-workflow-approved-border); --surux-button-fg: var(--surux-workflow-approved-color); border-radius: 999px; background: var(--surux-workflow-approved-bg); color: var(--surux-workflow-approved-color); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-footer .surux-command-button.surux-button-tone-paid:where(:not(:disabled, .disabled, [aria-disabled="true"])) { --surux-button-radius: 999px; --surux-button-bg: var(--surux-workflow-paid-bg); --surux-button-border: var(--surux-workflow-paid-border); --surux-button-fg: var(--surux-workflow-paid-color); border-radius: 999px; background: var(--surux-workflow-paid-bg); color: var(--surux-workflow-paid-color); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-overflow[data-surux-command-overflow-inline-few] > .surux-command-overflow-panel, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-form, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-delete-command-bar { background-color: transparent; background-image: none; border-color: transparent; box-shadow: 0 0 transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-search-actions :is( .surux-command-button, .surux-command-overflow-trigger, .surux-command-button-icon-only, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-button-tone-standard, .surux-button-tone-secondary, .surux-button-tone-warning, .surux-button-tone-destructive ):where(:not(.surux-button-tone-action)):where(:not(.surux-button-pressed, [aria-pressed="true"])) { --surux-button-radius: 999px; --surux-button-bg: var(--surux-surface); --surux-button-border: var(--surux-skeuo-key-edge, transparent); border-radius: 999px; background: var(--surux-skeuo-well, var(--surux-surface)); background-image: none; box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toolbar-search-actions .surux-command-overflow-trigger, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-search-actions .btn.surux-button.surux-command-button.surux-command-button-icon-only:is(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted) { --surux-button-radius-pill: 999px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-toolbar-search-actions .surux-command-button-subtle-surface:not(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted) { --surux-button-radius-pill: 999px; } /* In-field discs beat Bevel's important tray paint as well as containing bar keys. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-search-actions .btn.surux-button.surux-command-button.surux-command-button-icon-only:is(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted) { --surux-button-radius-control: 999px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-search-actions .btn.surux-button.surux-command-button.surux-command-button-icon-only:is(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted):where(:not(.surux-button-tone-action)) { background: transparent !important; } /* Month and day tiles. The selected tile is a pressed key. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-month-option:not(.is-selected):not(.is-current):not(:disabled):not(:hover):not(:focus-visible) { border-color: var(--surux-skeuo-key-edge, transparent); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-month-option, .surux-date-day).is-selected:not(:disabled):not(.is-disabled) { background-color: var(--surux-surface); color: var(--surux-text); box-shadow: inset 0 2px 4px var(--surux-skeuo-well-shade, transparent), inset 0 1px 0 var(--surux-skeuo-well-line, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-date-day.is-today.is-selected:not(:disabled):not(.is-disabled) { outline: 1px solid var(--surux-primary); outline-offset: -2px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-date-nav, .surux-date-today, .surux-date-clear, .surux-date-day, .surux-month-option):focus-visible { outline-color: var(--surux-primary); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-quick-filters { background: var(--surux-skeuo-tray, transparent); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-search-quick-filter { background: transparent; box-shadow: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-search-quick-filter.is-active, .surux-search-quick-filter[aria-current="page"]) { background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -3px 0 var(--surux-quick-filter-accent, var(--surux-primary)), inset 0 -4px 0 #000; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-column-filter-trigger { border-color: var(--surux-skeuo-key-edge, transparent); border-radius: var(--surux-radius-control); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-column-filter-root.is-open .surux-column-filter-trigger, .surux-column-filter-trigger[aria-expanded="true"]) { box-shadow: inset 0 2px 3px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-column-filter-trigger:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-filter-control.is-filter-active > :is(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) { --surux-picker-edge: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text)); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-nav-search .surux-input { border-color: var(--surux-skeuo-well-edge, currentColor); background: var(--surux-skeuo-well, transparent); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :where(.surux-card, .surux-input, .surux-date-display, .surux-control-switch, .surux-private-switch) { --surux-input-bg: var(--surux-skeuo-well, transparent); --surux-input-border: var(--surux-skeuo-well-edge, currentColor); --surux-disabled-control-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector) { border-color: var(--surux-skeuo-well-edge, currentColor); background-color: var(--surux-skeuo-well, var(--surux-surface)); box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector):focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-chip:not([aria-pressed="true"]):not([aria-checked="true"]), :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-chip-chooser > button:not([aria-pressed="true"]):not([aria-checked="true"]) { border-color: var(--surux-skeuo-key-edge, transparent); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(.surux-chip[aria-pressed="true"], .surux-chip[aria-checked="true"], .surux-chip-chooser > button[aria-pressed="true"], .surux-chip-chooser > button[aria-checked="true"]) { box-shadow: inset 0 2px 3px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-choice-tiles > button { border-radius: var(--surux-radius-control); background: var(--surux-skeuo-panel, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-choice-swatch { border-radius: var(--surux-radius-control); box-shadow: inset 0 1px 0 var(--surux-skeuo-specular, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-choice-tiles > button[aria-checked="true"] { border-color: var(--surux-primary); box-shadow: inset 0 2px 3px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-summary-bar { border-color: var(--surux-skeuo-edge, transparent); background: var(--surux-skeuo-panel, transparent), var(--surux-surface); box-shadow: var(--surux-elevation-card); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-list-footer { border-top-color: var(--surux-skeuo-edge, transparent); background: var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-sidebar-backdrop, :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) body.surux-sidebar-open .surux-sidebar-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) body.surux-sidebar-open .surux-sidebar { box-shadow: var(--surux-elevation-float); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-back:not(.surux-header-band *) { border: 1px solid var(--surux-skeuo-key-edge, transparent); border-radius: var(--surux-radius-control); background: var(--surux-skeuo-key, var(--surux-surface)); box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-header-band .surux-breadcrumb-back { border-color: transparent; background: transparent; box-shadow: none; color: var(--surux-band-fg, var(--surux-text)); } @media (min-width: 768px) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-drawer-content:not(.modal-fullscreen) { border-start-end-radius: 0; border-end-end-radius: 0; } } @media (max-width: 767.98px) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-drawer-content:not(.modal-fullscreen) { border-end-start-radius: 0; border-end-end-radius: 0; } } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-select-list[data-surux-select-sheet="true"] { border-radius: var(--surux-radius-card) var(--surux-radius-card) 0 0; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(a.surux-card, .surux-card[role="button"]):hover { box-shadow: var(--surux-elevation-raised); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) :is(a.surux-card, .surux-card[role="button"]):active { box-shadow: inset 0 2px 4px var(--surux-skeuo-well-shade, transparent); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane.is-drag-over { box-shadow: inset 0 0 0 2px var(--surux-primary); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-lane-header :is(.surux-workflow-lane-count, .surux-workflow-lane-chevron) { color: color-mix(in srgb, var(--surux-muted) 55%, var(--surux-text)); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-report-section.is-spine { box-shadow: inset var(--surux-border-width-strong) 0 0 var(--surux-primary); } /* A checked disabled switch keeps its locked cue, regardless of the design finish. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:checked:disabled { background-color: color-mix(in srgb, var(--surux-disabled-control-color) 54%, var(--surux-disabled-control-bg) 46%); border-color: var(--surux-disabled-control-border); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-collection-footer > .surux-list-footer { background: transparent; border-color: transparent; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header .btn.surux-button.surux-modal-close.surux-command-button-icon-only { --surux-button-radius-control: .375rem; border-radius: .375rem; opacity: 1; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-modal-header .btn.surux-button.surux-modal-close.surux-command-button-icon-only:where(:not(:hover, :focus-visible, :active, :disabled, [aria-disabled="true"])) { border: 1px solid var(--surux-skeuo-key-edge, var(--surux-border)) !important; background: linear-gradient(180deg, var(--surux-surface), var(--surux-surface-2)) !important; box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent) !important; } /* Canvas motion belongs inside the label panel, clear of its physical frame. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-header-band > .surux-band-texture { clip-path: inset(var(--surux-skeuo-plate-width, 0px) round var(--surux-radius-card)); } /* A sandbox host is a writing card; its inert samples cannot strip its outer rim. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-card:has(> .surux-card-body > [data-surux-preference-preview]) { border-color: var(--surux-skeuo-edge, transparent); background: var(--surux-skeuo-panel, transparent) center / var(--surux-skeuo-rim-panel-size, transparent) var(--surux-skeuo-rim-panel-size, transparent) no-repeat padding-box, var(--surux-skeuo-inlay, transparent) center / var(--surux-skeuo-rim-inlay-size, transparent) var(--surux-skeuo-rim-inlay-size, transparent) no-repeat padding-box, var(--surux-skeuo-rim, transparent), var(--surux-surface); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-card:has(> .surux-card-body > [data-surux-preference-preview]):not(:focus-visible) { outline: var(--surux-skeuo-rim-seam, transparent); outline-offset: calc(var(--surux-skeuo-rim-width, transparent) / -2 - 1px); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-caret { --surux-skeuo-key-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, transparent), inset 0 -1px 0 var(--surux-skeuo-key-bottom, transparent), 0 1px 2px var(--surux-skeuo-cast, transparent); border-color: var(--surux-skeuo-key-edge, var(--surux-border)); background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, transparent), transparent 55%, var(--surux-skeuo-key-shade, transparent)), var(--surux-skeuo-key, var(--surux-surface)); box-shadow: var(--surux-skeuo-key-shadow, none); } } @media screen and (forced-colors: none) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) { --surux-row-menu-shadow: var(--surux-elevation-float); --surux-row-menu-border: var(--surux-border); } } @media screen and (forced-colors: none) { /* Filter footers use the same Bevel key as command bars. */ html[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-filter-clear-all.surux-command-button-icon-only { --surux-skeuo-filter-clear-radius: .375rem; } /* Flat reads the control-radius token. Scope it to search keys so field and menu radii retain their material shape while these actions follow the search discs. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"][data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-search-actions :is(.surux-command-button, .surux-command-overflow-trigger) { --surux-radius-control: var(--surux-button-radius-pill, 999px); } /* S2 desktop row capsule is a machined menu. Slots, including warning, destructive and their red ring, are control keys in every interaction state. The More panel uses the menu radius; the summary card beside the capsule uses the card radius. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule { border-radius: var(--surux-radius-menu); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule :is( .btn.surux-button.surux-command-button, .surux-command-overflow-trigger, .surux-button-tone-warning, .surux-button-tone-destructive ), :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule :is( .btn.surux-button.surux-command-button, .surux-command-overflow-trigger, .surux-button-tone-warning, .surux-button-tone-destructive ):is(:hover, :focus-visible, :active, .surux-button-pressed, [aria-pressed="true"]) { border-radius: var(--surux-radius-control); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-actions-menu[data-surux-row-desktop] .surux-row-more > .surux-command-overflow-panel { --surux-row-action-icon-radius: var(--surux-radius-control); border-radius: var(--surux-radius-menu); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary { border-radius: var(--surux-radius-card); } /* Breadcrumb is one machined key. The pill, the 20px Back knob, the caret end and the hover and focus fills use the control radius. The fork uses the menu radius. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-pill { border-radius: var(--surux-radius-control); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-knob { border-radius: var(--surux-radius-control); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-caret { border-radius: 0 var(--surux-radius-control) var(--surux-radius-control) 0; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-pill .surux-breadcrumb-back:is(:hover, :focus-visible) { border-radius: var(--surux-radius-control) 0 0 var(--surux-radius-control); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-pill .surux-breadcrumb-caret:is(:hover, :focus-visible, [aria-expanded="true"]) { border-radius: 0 var(--surux-radius-control) var(--surux-radius-control) 0; } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-back:is(:hover, :focus-visible) .surux-breadcrumb-knob { border-radius: var(--surux-radius-control); } :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-breadcrumb-fork { border-radius: var(--surux-radius-menu); } } /* TR-0000982. The priority edge is inside the sheet, under the rim and stitch, following the radius. */ :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) .surux-workflow-card-surface::before { border-start-start-radius: inherit; border-end-start-radius: inherit; inset-inline-start: 0; } @media screen and (forced-colors: none) { :is(html, [data-surux-preference-preview])[data-surux-surface-style="skeuo"]:not([data-surux-contrast="high"]) { --surux-metric-tile-bg: var(--surux-surface); --surux-metric-tile-edge: var(--surux-skeuo-edge, var(--surux-border)); --surux-metric-tile-shadow: inset 0 1px 0 var(--surux-skeuo-specular, transparent), 0 1px 1px var(--surux-skeuo-cast, transparent); --surux-metric-tile-radius: var(--surux-radius-md, .5rem); --surux-metric-rail-bg: var(--surux-surface); } }