Skip to content

Commit c9b3358

Browse files
steipetesteipete
authored
improve(ui): flatten sessions page surfaces (#102760)
Drops the decorative layer from the sessions roster per maintainer feedback: overview tiles, the drawer hero, detail sections, stat cards, checkpoint cards, and the goal chip become flat token surfaces (no gradients, no inset highlight shadows, no translucent color-mix glass); kind avatars and overview icon chips lose their nested borders and read as flat tints; the skeleton shimmer gradient becomes a plain opacity pulse. Focus rings, the drag-drop target outline, and the live status dot ring stay - those are signal, not decoration.
1 parent 1690afe commit c9b3358

1 file changed

Lines changed: 21 additions & 38 deletions

File tree

‎ui/src/styles/sessions.css‎

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,8 @@
4747
gap: 11px;
4848
min-width: 0;
4949
padding: 11px 13px;
50-
background:
51-
linear-gradient(180deg, var(--card-highlight), transparent 55%),
52-
color-mix(in srgb, var(--card) 92%, transparent);
53-
border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
50+
background: var(--bg-elevated);
51+
border: 1px solid var(--border);
5452
border-radius: var(--radius-md);
5553
}
5654

@@ -62,7 +60,6 @@
6260
flex: 0 0 auto;
6361
color: var(--muted);
6462
background: var(--bg-hover);
65-
border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
6663
border-radius: var(--radius-sm);
6764
}
6865

@@ -115,7 +112,6 @@
115112

116113
.sessions-overview__tile--live.sessions-overview__tile--active .sessions-overview__icon {
117114
background: var(--ok-subtle);
118-
border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
119115
}
120116

121117
.sessions-overview__tile--unread.sessions-overview__tile--active .sessions-overview__icon,
@@ -125,7 +121,6 @@
125121

126122
.sessions-overview__tile--unread.sessions-overview__tile--active .sessions-overview__icon {
127123
background: var(--accent-2-subtle);
128-
border-color: color-mix(in srgb, var(--accent-2) 28%, var(--border));
129124
}
130125

131126
/* --- Toolbar: search + filters + grouping in one strip --- */
@@ -410,7 +405,6 @@
410405
flex: 0 0 auto;
411406
color: var(--muted);
412407
background: var(--bg-hover);
413-
border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
414408
border-radius: var(--radius-sm);
415409
}
416410

@@ -427,25 +421,21 @@
427421
.session-avatar--cron {
428422
color: var(--ok);
429423
background: var(--ok-subtle);
430-
border-color: color-mix(in srgb, var(--ok) 22%, var(--border));
431424
}
432425

433426
.session-avatar--direct {
434427
color: var(--accent-2);
435428
background: var(--accent-2-subtle);
436-
border-color: color-mix(in srgb, var(--accent-2) 22%, var(--border));
437429
}
438430

439431
.session-avatar--group {
440432
color: var(--info);
441433
background: rgba(59, 130, 246, 0.1);
442-
border-color: color-mix(in srgb, var(--info) 22%, var(--border));
443434
}
444435

445436
.session-avatar--global {
446437
color: var(--warn);
447438
background: var(--warn-subtle);
448-
border-color: color-mix(in srgb, var(--warn) 22%, var(--border));
449439
}
450440

451441
.session-avatar__status {
@@ -627,8 +617,8 @@
627617
box-sizing: border-box;
628618
padding: 3px 7px;
629619
color: color-mix(in srgb, var(--text) 78%, var(--muted));
630-
background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
631-
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
620+
background: var(--bg-elevated);
621+
border: 1px solid var(--border);
632622
border-radius: var(--radius-sm);
633623
font-size: 12px;
634624
line-height: 1.2;
@@ -696,15 +686,9 @@
696686
width: 72%;
697687
max-width: 150px;
698688
height: 12px;
699-
background: linear-gradient(
700-
90deg,
701-
var(--bg-hover) 25%,
702-
color-mix(in srgb, var(--bg-hover) 55%, var(--border-strong)) 50%,
703-
var(--bg-hover) 75%
704-
);
705-
background-size: 200% 100%;
689+
background: var(--bg-hover);
706690
border-radius: var(--radius-full);
707-
animation: session-skeleton-shimmer 1.4s ease-in-out infinite;
691+
animation: session-skeleton-pulse 1.4s ease-in-out infinite;
708692
}
709693

710694
.session-skeleton--key {
@@ -713,12 +697,13 @@
713697
height: 14px;
714698
}
715699

716-
@keyframes session-skeleton-shimmer {
717-
from {
718-
background-position: 200% 0;
700+
@keyframes session-skeleton-pulse {
701+
0%,
702+
100% {
703+
opacity: 1;
719704
}
720-
to {
721-
background-position: -200% 0;
705+
50% {
706+
opacity: 0.45;
722707
}
723708
}
724709

@@ -771,7 +756,7 @@
771756
width: 84px;
772757
height: 3px;
773758
overflow: hidden;
774-
background: color-mix(in srgb, var(--border-strong) 55%, transparent);
759+
background: var(--bg-hover);
775760
border-radius: var(--radius-full);
776761
}
777762

@@ -968,8 +953,7 @@
968953
/* --- Row drawer: overrides, stats, compaction history --- */
969954
.session-details-row td {
970955
padding: 0;
971-
background:
972-
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 34%), var(--bg-accent);
956+
background: var(--bg-accent);
973957
}
974958

975959
.session-details-panel {
@@ -985,10 +969,9 @@
985969
justify-content: space-between;
986970
gap: 14px;
987971
padding: 14px;
988-
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
972+
border: 1px solid var(--border);
989973
border-radius: var(--radius-md);
990-
background: color-mix(in srgb, var(--card) 90%, transparent);
991-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
974+
background: var(--card);
992975
}
993976

994977
.session-details-panel__badges {
@@ -1026,9 +1009,9 @@
10261009
display: grid;
10271010
gap: 10px;
10281011
padding: 14px;
1029-
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
1012+
border: 1px solid var(--border);
10301013
border-radius: var(--radius-md);
1031-
background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
1014+
background: var(--bg-elevated);
10321015
}
10331016

10341017
.session-details-section__header {
@@ -1095,9 +1078,9 @@ input.session-override-field__control {
10951078
.session-detail-stat {
10961079
min-width: 0;
10971080
padding: 11px 12px;
1098-
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
1081+
border: 1px solid var(--border);
10991082
border-radius: var(--radius-sm);
1100-
background: color-mix(in srgb, var(--card) 86%, transparent);
1083+
background: var(--card);
11011084
}
11021085

11031086
.session-detail-stat__label {
@@ -1135,7 +1118,7 @@ input.session-override-field__control {
11351118
padding: 12px;
11361119
border: 1px solid var(--border);
11371120
border-radius: var(--radius-md);
1138-
background: color-mix(in srgb, var(--card) 92%, transparent);
1121+
background: var(--card);
11391122
}
11401123

11411124
.session-checkpoint-card__header {

0 commit comments

Comments
 (0)