JosLe/code-sinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sandbox/studio: brushed-metal language across the whole rack

Browse Source 
Same metal treatment now applies to the outer hardware frame, the
top/bottom bars and the sub-panels (knobs + seq). Three CSS custom
properties capture the shared visual language so each frame just
plugs them in:

- --metal-specular: vertical gradient with a soft bright band on the
  upper portion
- --metal-brush: very fine repeating horizontal stripes
- --metal-bevel: 4-edge inset shadow set (bright top + dark bottom +
  highlighted left + dark right)

Per-element base colours retain a depth hierarchy: the outer
.hardware is the darkest, top/bottom bars sit slightly brighter, and
.knobs/.seq are the brightest plates so they read as mounted on top.

Drop shadows scaled to scope: .hardware gets a strong 0 8px 32px,
the bars get a small 0 2px 4px, and the sub-panels keep their two
layered drop shadows for depth.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jose Luis Montañes
2026-05-01 18:13:06 +02:00
parent 96d11f7059
commit 29f1a1e58b
1 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/sandbox/studio.html
View File

@@ -29,6 +29,24 @@
--hw-syn-fn: #c8a878;
--hw-syn-id: #b8b0a0;
--hw-syn-op: #6c6660;
/* shared brushed-metal language for all rack frames + sub-panels */
--metal-specular: linear-gradient(180deg,
rgba(255, 248, 230, 0.08) 0%,
rgba(255, 248, 230, 0.03) 28%,
rgba(255, 248, 230, 0) 45%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.10) 100%);
--metal-brush: repeating-linear-gradient(0deg,
rgba(255, 250, 235, 0.018) 0px,
rgba(255, 250, 235, 0.018) 1px,
rgba(0, 0, 0, 0.030) 1px,
rgba(0, 0, 0, 0.030) 2px);
--metal-bevel:
inset 0 1px 0 rgba(255, 248, 230, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.70),
inset 1px 0 0 rgba(255, 248, 230, 0.06),
inset -1px 0 0 rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
@@ -49,16 +67,18 @@
/* ===================================================================== */
.hardware {
position: relative;
/* darker base than the sub-panels so they stand out against it */
background:
radial-gradient(ellipse at 30% 0%, var(--hw-bg-hi) 0%, var(--hw-bg) 50%, var(--hw-bg-lo) 100%);
var(--metal-specular),
var(--metal-brush),
linear-gradient(180deg, #181513 0%, #100c08 60%, #080604 100%);
border: 1px solid var(--hw-edge);
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 220, 180, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
var(--metal-bevel),
inset 0 0 0 1px rgba(232, 160, 80, 0.04),
0 1px 0 rgba(255, 220, 180, 0.02),
0 8px 24px rgba(0, 0, 0, 0.55);
0 8px 32px rgba(0, 0, 0, 0.65),
0 1px 0 rgba(255, 220, 180, 0.04);
padding: 14px;
display: grid;
grid-template-columns: 1fr 220px;
@@ -104,12 +124,14 @@
font-size: 10px;
letter-spacing: 0.08em;
background:
linear-gradient(180deg, #1f1d1a 0%, #14130f 100%);
var(--metal-specular),
var(--metal-brush),
linear-gradient(180deg, #25211d 0%, #16130f 100%);
border: 1px solid var(--hw-edge);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255,220,180,0.05),
inset 0 -1px 0 rgba(0,0,0,0.6);
var(--metal-bevel),
0 2px 4px rgba(0, 0, 0, 0.4);
}
.top-bar > *, .bottom-bar > * { align-self: center; }
.top-bar .btn-group { align-self: stretch; }
@@ -212,36 +234,18 @@
/* Right column */
/* ===================================================================== */
/* shared brushed-metal panel treatment for sub-panels inside the rack.
Applied to .knobs and .seq. Multiple layered backgrounds + bevels. */
/* shared brushed-metal panel treatment for sub-panels inside the rack */
.knobs, .seq {
border: 1px solid var(--hw-edge);
border-radius: 6px;
background:
/* (1) horizontal specular band on the upper portion */
linear-gradient(180deg,
rgba(255, 248, 230, 0.08) 0%,
rgba(255, 248, 230, 0.03) 28%,
rgba(255, 248, 230, 0) 45%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.10) 100%),
/* (2) brushed horizontal stripes — very fine, very subtle */
repeating-linear-gradient(0deg,
rgba(255, 250, 235, 0.018) 0px,
rgba(255, 250, 235, 0.018) 1px,
rgba(0, 0, 0, 0.030) 1px,
rgba(0, 0, 0, 0.030) 2px),
/* (3) base vertical gradient (light from above on dark anodised metal) */
linear-gradient(180deg, #2a2622 0%, #1a1612 55%, #110d09 100%);
var(--metal-specular),
var(--metal-brush),
/* brighter base than .hardware so they read as plates mounted on top */
linear-gradient(180deg, #2c2823 0%, #1a1612 55%, #110d09 100%);
box-shadow:
/* bevel — bright top edge + dark bottom edge + side strokes */
inset 0 1px 0 rgba(255, 248, 230, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.70),
inset 1px 0 0 rgba(255, 248, 230, 0.06),
inset -1px 0 0 rgba(0, 0, 0, 0.45),
/* warm rim light pooling at the very bottom */
var(--metal-bevel),
inset 0 -10px 14px -10px rgba(255, 220, 180, 0.10),
/* drop shadow under the panel for depth */
0 2px 4px rgba(0, 0, 0, 0.45),
0 6px 14px rgba(0, 0, 0, 0.30);
}