Skip to main content

max / goingson

Platinum wave 3: bevel the containers Tables and the task table take --bevel-raised. Modals, toasts, dropdown menus and context menus compose the bevel with the brutal drop shadow they already carried: the bevel says the panel is a lit object, the shadow says it floats above the page. Scrollbar tracks and the progress trough go inset, and the scrollbar thumb rides raised inside its track, which is the clearest place in the app to read the two against each other. The thumb drops to --radius-xs per the radius map. Tabs and pills join the latching pattern from wave 2: raised at rest, inset when active, replacing the offset shadow that marked the selection before. Four literal borders in the sections opened here move onto --border-width.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-26 23:42 UTC
Signed with PGP, not checked
Commit: 3b4f9f97b7493a5ee2349c5c2aebeb5fec3da3bc
Parent: 30a8a21
1 file changed, +25 insertions, -13 deletions
M src-tauri/frontend/css/styles.css +25 -13
@@ -508,16 +508,18 @@
508 508 border-radius: var(--radius-md);
509 509 font-weight: 600;
510 510 transition: background-color 0.15s ease;
511 + box-shadow: var(--bevel-raised);
511 512 }
512 513
513 514 .ui-mode-desktop .tab:hover {
514 515 background: var(--surface-overlay);
515 516 }
516 517
518 + /* The selected tab is latched down, same inversion as a pressed button. */
517 519 .ui-mode-desktop .tab.active {
518 520 background-color: var(--action);
519 521 color: var(--content-on-action);
520 - box-shadow: var(--shadow-brutal-xs);
522 + box-shadow: var(--bevel-inset);
521 523 }
522 524
523 525 .ui-mode-desktop .tab-icon {
@@ -558,6 +560,7 @@
558 560 font-weight: 600;
559 561 cursor: pointer;
560 562 transition: background-color var(--transition-fast);
563 + box-shadow: var(--bevel-raised);
561 564 }
562 565
563 566 .ui-mode-desktop .pill:hover {
@@ -568,7 +571,7 @@
568 571 background: var(--content);
569 572 color: var(--surface-raised);
570 573 border-color: var(--content);
571 - box-shadow: var(--shadow-brutal-xs);
574 + box-shadow: var(--bevel-inset);
572 575 }
573 576
574 577 /* 8. Main Content & Page Header */
@@ -975,14 +978,14 @@
975 978 border: var(--border-width) solid var(--border);
976 979 border-radius: var(--radius-md);
977 980 overflow: hidden;
978 - box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border);
981 + box-shadow: var(--bevel-raised);
979 982 }
980 983
981 984 .data-table th,
982 985 .data-table td {
983 986 padding: 1rem 1.25rem;
984 987 text-align: left;
985 - border-bottom: 2px solid var(--border);
988 + border-bottom: var(--border-width) solid var(--border);
986 989 }
987 990
988 991 .data-table th {
@@ -1022,7 +1025,7 @@
1022 1025 flex-direction: column;
1023 1026 flex: 1;
1024 1027 min-height: 0;
1025 - box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border);
1028 + box-shadow: var(--bevel-raised);
1026 1029 }
1027 1030
1028 1031 /* Task Grid Column Widths */
@@ -1040,7 +1043,7 @@
1040 1043 /* Task Header Row */
1041 1044 .task-header-row {
1042 1045 background-color: var(--surface-overlay);
1043 - border-bottom: 2px solid var(--border);
1046 + border-bottom: var(--border-width) solid var(--border);
1044 1047 padding: 0 1.25rem;
1045 1048 }
1046 1049
@@ -1064,7 +1067,7 @@
1064 1067 /* Task Row */
1065 1068 .task-row {
1066 1069 padding: 0.75rem 1.25rem;
1067 - border-bottom: 1px solid var(--border);
1070 + border-bottom: var(--border-width) solid var(--border);
1068 1071 transition: background-color 0.15s ease, opacity 0.25s ease, transform 0.25s ease;
1069 1072 cursor: pointer;
1070 1073 }
@@ -1716,7 +1719,7 @@
1716 1719 color: var(--content);
1717 1720 border: var(--border-width) solid var(--border);
1718 1721 border-radius: var(--radius-md);
1719 - box-shadow: var(--shadow-brutal-md);
1722 + box-shadow: var(--bevel-raised), var(--shadow-brutal-md);
1720 1723 z-index: 2000;
1721 1724 font-weight: 600;
1722 1725 display: flex;
@@ -1841,7 +1844,9 @@
1841 1844 background-color: var(--surface-raised);
1842 1845 border: var(--border-width) solid var(--border);
1843 1846 border-radius: var(--radius-lg);
1844 - box-shadow: var(--shadow-brutal-xl);
1847 + /* Floating surfaces carry both: the bevel says the panel is a lit object,
1848 + the drop shadow says it is above the page. */
1849 + box-shadow: var(--bevel-raised), var(--shadow-brutal-xl);
1845 1850 max-width: var(--width-modal);
1846 1851 width: 90%;
1847 1852 /* dvh follows the visible viewport when mobile chrome / keyboard
@@ -3905,7 +3910,7 @@
3905 3910 background: var(--surface-raised);
3906 3911 border: var(--border-width) solid var(--border);
3907 3912 border-radius: var(--radius-md);
3908 - box-shadow: var(--shadow-brutal-md);
3913 + box-shadow: var(--bevel-raised), var(--shadow-brutal-md);
3909 3914 min-width: 160px;
3910 3915 z-index: 100;
3911 3916 }
@@ -3948,7 +3953,7 @@
3948 3953 background: var(--surface-raised);
3949 3954 border: var(--border-width) solid var(--border);
3950 3955 border-radius: var(--radius-sm);
3951 - box-shadow: var(--shadow-brutal-lg);
3956 + box-shadow: var(--bevel-raised), var(--shadow-brutal-lg);
3952 3957 padding: 0.25rem 0;
3953 3958 display: none;
3954 3959 }
@@ -4047,15 +4052,19 @@
4047 4052 height: 12px;
4048 4053 }
4049 4054
4055 + /* The track is a well and the thumb rides in it, which is the clearest
4056 + place in the app to read the bevel pair against each other. */
4050 4057 ::-webkit-scrollbar-track {
4051 4058 background: var(--surface-overlay);
4052 - border-left: 2px solid var(--border);
4059 + border-left: var(--border-width) solid var(--border);
4060 + box-shadow: var(--bevel-inset);
4053 4061 }
4054 4062
4055 4063 ::-webkit-scrollbar-thumb {
4056 4064 background: var(--content-muted);
4057 4065 border: var(--border-width-sm) solid var(--border);
4058 - border-radius: var(--radius-sm);
4066 + border-radius: var(--radius-xs);
4067 + box-shadow: var(--bevel-raised);
4059 4068 }
4060 4069
4061 4070 ::-webkit-scrollbar-thumb:hover {
@@ -4333,11 +4342,14 @@
4333 4342 /* Width controlled by grid, not explicit value */
4334 4343 }
4335 4344
4345 + /* A trough, so it reads inset. The fill inside stays flat: at 10px tall a
4346 + bevel on the bar itself would eat most of its height. */
4336 4347 .progress-bar-container {
4337 4348 width: 100%;
4338 4349 height: 10px;
4339 4350 background: var(--surface-overlay);
4340 4351 border: var(--border-width-sm) solid var(--border);
4352 + box-shadow: var(--bevel-inset);
4341 4353 overflow: hidden;
4342 4354 }
4343 4355