feat: refresh workbench visual layout
This commit is contained in:
+111
-68
@@ -1,3 +1,4 @@
|
||||
@import "@fontsource-variable/noto-sans-sc";
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@source "../node_modules/streamdown/dist";
|
||||
@@ -71,24 +72,27 @@
|
||||
background: oklch(94.5% 0.012 250);
|
||||
--canvas-map: oklch(94.5% 0.012 250);
|
||||
--canvas-map-grid: rgba(37, 99, 235, 0.06);
|
||||
--acrylic-navigation: rgba(242, 248, 252, 0.74);
|
||||
--acrylic-panel: rgba(232, 241, 249, 0.58);
|
||||
--acrylic-control: rgba(249, 251, 255, 0.84);
|
||||
--acrylic-panel-blur: 22px;
|
||||
--acrylic-navigation: rgba(234, 243, 250, 0.64);
|
||||
--acrylic-panel: rgba(223, 235, 246, 0.56);
|
||||
--acrylic-control: rgba(242, 248, 253, 0.74);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.2;
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.05);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.22);
|
||||
--acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.06'/%3E%3C/svg%3E");
|
||||
--acrylic-border: rgba(255, 255, 255, 0.58);
|
||||
--acrylic-outline: rgba(71, 85, 105, 0.18);
|
||||
--acrylic-highlight: rgba(255, 255, 255, 0.82);
|
||||
--acrylic-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
|
||||
--surface-dock: oklch(97% 0.006 250);
|
||||
--surface-control: rgba(252, 253, 255, 0.96);
|
||||
--surface-well: rgba(232, 240, 248, 0.2);
|
||||
--surface-reading: rgba(255, 255, 255, 0.985);
|
||||
--glass-transient: rgba(248, 252, 255, 0.88);
|
||||
--acrylic-backdrop-saturation: 1.08;
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.035);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.1);
|
||||
--acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
|
||||
--acrylic-border: rgba(255, 255, 255, 0.52);
|
||||
--acrylic-outline: rgba(63, 83, 108, 0.18);
|
||||
--acrylic-highlight: rgba(255, 255, 255, 0.68);
|
||||
--shadow-navigation: 0 1px 0 rgba(48, 65, 85, 0.14);
|
||||
--shadow-panel: 0 12px 32px rgba(15, 33, 55, 0.14);
|
||||
--shadow-control: 0 6px 18px rgba(15, 33, 55, 0.1);
|
||||
--shadow-transient: 0 14px 34px rgba(15, 33, 55, 0.18);
|
||||
--surface-dock: oklch(96.5% 0.012 248);
|
||||
--surface-control: rgba(239, 246, 252, 0.92);
|
||||
--surface-well: rgba(213, 227, 239, 0.66);
|
||||
--surface-reading: rgba(250, 252, 254, 0.96);
|
||||
--glass-transient: rgba(232, 242, 250, 0.66);
|
||||
--surface-border: oklch(86.5% 0.012 250);
|
||||
--surface-divider: oklch(90.5% 0.009 250);
|
||||
--surface-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
|
||||
@@ -135,35 +139,36 @@
|
||||
}
|
||||
|
||||
[data-basemap-tone="light"] {
|
||||
--acrylic-navigation: rgba(242, 248, 252, 0.68);
|
||||
--acrylic-panel: rgba(232, 241, 249, 0.7);
|
||||
--acrylic-control: rgba(249, 251, 255, 0.78);
|
||||
--acrylic-navigation: rgba(234, 243, 250, 0.64);
|
||||
--acrylic-panel: rgba(223, 235, 246, 0.56);
|
||||
--acrylic-control: rgba(242, 248, 253, 0.74);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 20px;
|
||||
--acrylic-backdrop-saturation: 1.22;
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.04);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.18);
|
||||
--surface-control: rgba(252, 253, 255, 0.95);
|
||||
--surface-well: rgba(232, 240, 248, 0.34);
|
||||
--surface-reading: rgba(255, 255, 255, 0.97);
|
||||
--glass-transient: rgba(238, 247, 253, 0.56);
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.08;
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.1);
|
||||
--surface-control: rgba(239, 246, 252, 0.92);
|
||||
--surface-well: rgba(213, 227, 239, 0.66);
|
||||
--surface-reading: rgba(250, 252, 254, 0.96);
|
||||
--glass-transient: rgba(232, 242, 250, 0.66);
|
||||
}
|
||||
|
||||
[data-basemap-tone="satellite"] {
|
||||
--acrylic-navigation: rgba(242, 248, 252, 0.82);
|
||||
--acrylic-panel: rgba(232, 241, 249, 0.7);
|
||||
--acrylic-control: rgba(250, 252, 255, 0.9);
|
||||
--acrylic-panel-blur: 20px;
|
||||
--acrylic-control-blur: 16px;
|
||||
--acrylic-backdrop-saturation: 1.1;
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.06);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.24);
|
||||
--surface-control: rgba(252, 253, 255, 0.98);
|
||||
--surface-well: rgba(232, 240, 248, 0.28);
|
||||
--surface-reading: rgba(255, 255, 255, 0.99);
|
||||
--glass-transient: rgba(238, 247, 253, 0.72);
|
||||
--acrylic-outline: rgba(71, 85, 105, 0.24);
|
||||
--acrylic-shadow: 0 14px 38px rgba(15, 23, 42, 0.2);
|
||||
--acrylic-navigation: rgba(232, 241, 249, 0.8);
|
||||
--acrylic-panel: rgba(220, 232, 243, 0.72);
|
||||
--acrylic-control: rgba(241, 247, 252, 0.86);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.02;
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.04);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.1);
|
||||
--surface-control: rgba(242, 248, 253, 0.96);
|
||||
--surface-well: rgba(217, 230, 241, 0.78);
|
||||
--surface-reading: rgba(252, 253, 255, 0.985);
|
||||
--glass-transient: rgba(232, 242, 250, 0.76);
|
||||
--acrylic-outline: rgba(43, 63, 86, 0.28);
|
||||
--shadow-panel: 0 14px 36px rgba(7, 18, 32, 0.22);
|
||||
--shadow-control: 0 7px 20px rgba(7, 18, 32, 0.16);
|
||||
--shadow-transient: 0 16px 38px rgba(7, 18, 32, 0.26);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -177,9 +182,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
|
||||
"PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
font-family: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: var(--ink);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -195,8 +198,7 @@ input:focus-visible {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
|
||||
linear-gradient(90deg, var(--canvas-map-grid) 1px, transparent 1px),
|
||||
linear-gradient(var(--canvas-map-grid) 1px, transparent 1px),
|
||||
var(--canvas-map);
|
||||
linear-gradient(var(--canvas-map-grid) 1px, transparent 1px), var(--canvas-map);
|
||||
background-size:
|
||||
auto,
|
||||
68px 68px,
|
||||
@@ -224,28 +226,27 @@ input:focus-visible {
|
||||
border-color: var(--acrylic-border);
|
||||
background-image:
|
||||
linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
|
||||
linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)),
|
||||
var(--acrylic-noise);
|
||||
linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
|
||||
background-blend-mode: exclusion, luminosity, soft-light;
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--acrylic-highlight),
|
||||
0 0 0 1px var(--acrylic-outline),
|
||||
var(--acrylic-shadow);
|
||||
var(--shadow-panel);
|
||||
}
|
||||
|
||||
.acrylic-navigation {
|
||||
background-color: var(--acrylic-navigation);
|
||||
box-shadow:
|
||||
0 1px 0 var(--acrylic-outline),
|
||||
0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
box-shadow: var(--shadow-navigation);
|
||||
backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur))
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.acrylic-panel {
|
||||
background-color: var(--acrylic-panel);
|
||||
backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur))
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.acrylic-control {
|
||||
@@ -253,9 +254,10 @@ input:focus-visible {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
0 0 0 1px rgba(59, 130, 246, 0.14),
|
||||
0 14px 34px rgba(15, 23, 42, 0.13);
|
||||
var(--shadow-control);
|
||||
backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-control-blur))
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@@ -267,10 +269,18 @@ input:focus-visible {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.surface-dock { background-color: var(--surface-dock); }
|
||||
.surface-control { background-color: var(--surface-control); }
|
||||
.surface-well { background-color: var(--surface-well); }
|
||||
.surface-reading { background-color: var(--surface-reading); }
|
||||
.surface-dock {
|
||||
background-color: var(--surface-dock);
|
||||
}
|
||||
.surface-control {
|
||||
background-color: var(--surface-control);
|
||||
}
|
||||
.surface-well {
|
||||
background-color: var(--surface-well);
|
||||
}
|
||||
.surface-reading {
|
||||
background-color: var(--surface-reading);
|
||||
}
|
||||
}
|
||||
|
||||
.glass-transient {
|
||||
@@ -278,9 +288,10 @@ input:focus-visible {
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--acrylic-highlight),
|
||||
0 0 0 1px var(--acrylic-outline),
|
||||
0 10px 28px rgba(15, 23, 42, 0.14);
|
||||
var(--shadow-transient);
|
||||
backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--acrylic-control-blur))
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.material-tone-info {
|
||||
@@ -393,9 +404,7 @@ input:focus-visible {
|
||||
z-index: 1;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
0 10px 24px rgba(15, 23, 42, 0.07);
|
||||
box-shadow: inset 0 -1px 0 var(--surface-divider);
|
||||
}
|
||||
|
||||
.agent-panel-band {
|
||||
@@ -533,12 +542,44 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.scheduled-feed-panel-shell {
|
||||
--scheduled-feed-timeline-width: calc(
|
||||
var(--workbench-condition-width) - 1.5rem - 2px
|
||||
);
|
||||
transition:
|
||||
width 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
max-height 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.scheduled-feed-panel-expanded {
|
||||
width: min(
|
||||
var(--workbench-condition-expanded-width),
|
||||
calc(100vw - var(--workbench-agent-current-width) - 100px)
|
||||
);
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.scheduled-feed-panel-expanded {
|
||||
width: min(
|
||||
var(--workbench-condition-expanded-width-wide),
|
||||
calc(100vw - var(--workbench-agent-current-width) - 100px)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.scheduled-feed-mobile {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.scheduled-feed-mobile .scheduled-feed-detail-scroll {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.mobile-workbench-sheet {
|
||||
overscroll-behavior: contain;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.scheduled-feed-detail-enter {
|
||||
animation: scheduled-feed-detail-show 140ms ease-out 180ms both;
|
||||
will-change: opacity;
|
||||
@@ -554,7 +595,9 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.scheduled-feed-layout-expanded {
|
||||
grid-template-columns: minmax(0, 1fr) 432px;
|
||||
grid-template-columns:
|
||||
minmax(0, 1fr)
|
||||
var(--scheduled-feed-timeline-width);
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user