cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): modern-2026 button feel, neutral scrollbar, sticky token

Browse Source 
Friendly/warm direction, modernised:
- Buttons: drop the translateY lift on every variant (it read jittery and
  dated). They now rest on a soft neutral elevation, bloom their warm brand
  glow in on hover, and scale-down 0.98 for a tactile press. Motion uses the
  --motion-base / --ease-standard tokens.
- Scrollbar: neutral padded pill at rest that warms to the accent on hover,
  instead of an always-orange thumb that competed with content.
- page-sticky-header: replace the magic top: -20px (coupled to the content
  gutter) with calc(-1 * var(--space-5)); tokenise its z-index to --z-sticky.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
This commit is contained in:
Claude
2026-06-19 22:57:48 +00:00
parent 4c2efce393
commit 320c4dc257
2 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/styles/ported/buttons.css
+18 -14
View File
@@ -9,27 +9,32 @@
font-size: var(--text-base);
font-weight: var(--weight-medium);
gap: var(--space-2);
transition: all 0.2s ease;
transition: all var(--motion-base) var(--ease-standard);
}
.btn i {
font-size: 15px;
}
/* Filled buttons rest on a soft, neutral elevation; their warm brand glow
blooms in on hover (rather than glowing at rest), and a gentle scale-down
gives a tactile press. The old "translateY lift on every button" is gone —
vertical lift is reserved for cards now, so buttons feel calm, not jittery. */
.btn-primary {
background: var(--color-accent-gradient);
color: var(--color-on-accent);
box-shadow: 0 4px 15px var(--color-accent-shadow);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
box-shadow: 0 4px 14px var(--color-accent-shadow);
filter: brightness(1.05);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 10px var(--color-accent-shadow);
transform: scale(0.98);
box-shadow: var(--shadow-xs);
filter: brightness(0.97);
}
.btn-secondary {
@@ -41,29 +46,28 @@
.btn-secondary:hover {
background-color: var(--color-bg-input-alt);
border-color: var(--color-border-medium);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--color-shadow-sm);
}
.btn-secondary:active {
transform: translateY(0);
transform: scale(0.98);
background-color: var(--color-border);
}
.btn-danger {
background: var(--color-danger-gradient);
color: var(--color-danger-text);
box-shadow: 0 4px 15px var(--color-danger-ring);
box-shadow: var(--shadow-sm);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--color-danger-ring-lg);
box-shadow: 0 4px 14px var(--color-danger-ring);
filter: brightness(1.05);
}
.btn-danger:active {
transform: translateY(0);
box-shadow: 0 2px 10px var(--color-danger-ring);
transform: scale(0.98);
box-shadow: var(--shadow-xs);
filter: brightness(0.97);
}
/* ── State matrix: focus / disabled / loading ───────────────── */
frontend/src/lib/styles/ported/content.css
+19 -8
View File
@@ -1,18 +1,27 @@
/* ── Scrollbar ── */
::-webkit-scrollbar {
width: 6px;
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-surface);
background: transparent;
}
/* Neutral, padded pill that blends in at rest and warms to the brand accent
only on hover — the bar no longer competes with content for attention. */
::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border: 2px solid transparent;
border-radius: var(--radius-full);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-accent);
border-radius: 3px;
background-clip: padding-box;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-accent) var(--color-bg-surface);
scrollbar-color: var(--color-border-medium) transparent;
}
/* Content area */
@@ -50,11 +59,13 @@
.page-sticky-header {
position: sticky;
margin: 0px;
padding: var(--space-2-5) 0px;
top: -20px; /* due to padding top of content-area */
margin: 0;
padding: var(--space-2-5) 0;
/* Cancel .content-area's --space-5 top padding so the header sticks flush;
stays correct if the gutter token ever changes. */
top: calc(-1 * var(--space-5));
background-color: var(--color-bg-page);
z-index: 100; /* ensure header is above image preview */
z-index: var(--z-sticky); /* ensure header is above image preview */
}
.actions-bar {