feat(ux): style guided today workspace
This commit is contained in:
Masterluke77
@@ -0,0 +1,375 @@
|
||||
#today.ux-today-workspace-ready {
|
||||
display: grid;
|
||||
gap: var(--vd-space-5, 20px);
|
||||
}
|
||||
|
||||
#today .ux-today-command {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: clamp(20px, 3vw, 32px);
|
||||
border: 1px solid var(--vd-color-border, var(--border));
|
||||
border-radius: var(--vd-radius-xl, 20px);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface, var(--surface)) 91%, var(--vd-color-accent, var(--accent)) 9%), var(--vd-color-surface, var(--surface)));
|
||||
box-shadow: var(--vd-shadow-sm, 0 8px 26px rgba(15, 23, 42, .07));
|
||||
}
|
||||
|
||||
#today[data-ux-today-priority="attention"] .ux-today-command {
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface, var(--surface)) 89%, var(--vd-color-danger, #c63d35) 11%), var(--vd-color-surface, var(--surface)));
|
||||
}
|
||||
|
||||
#today[data-ux-today-priority="ready"] .ux-today-command {
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface, var(--surface)) 90%, var(--vd-color-success, #16835a) 10%), var(--vd-color-surface, var(--surface)));
|
||||
}
|
||||
|
||||
#today .ux-today-command-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
#today .ux-today-command-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#today .ux-today-date {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--vd-color-accent, var(--accent));
|
||||
font-size: .72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#today .ux-today-command h3 {
|
||||
margin: 0;
|
||||
color: var(--vd-color-text, var(--text));
|
||||
font-size: clamp(1.35rem, 2.4vw, 2rem);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
#today .ux-today-command p {
|
||||
max-width: 760px;
|
||||
margin: 9px 0 0;
|
||||
color: var(--vd-color-text-muted, var(--text-muted));
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
#today .ux-today-command-actions {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#today .ux-today-primary {
|
||||
min-width: 190px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcuts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcut {
|
||||
min-height: 34px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--vd-color-border, var(--border));
|
||||
border-radius: 9px;
|
||||
background: color-mix(in srgb, var(--vd-color-surface, var(--surface)) 86%, transparent);
|
||||
color: var(--vd-color-text-muted, var(--text-muted));
|
||||
font: inherit;
|
||||
font-size: .73rem;
|
||||
font-weight: 720;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcut:hover {
|
||||
border-color: color-mix(in srgb, var(--vd-color-accent, var(--accent)) 44%, var(--vd-color-border, var(--border)));
|
||||
color: var(--vd-color-text, var(--text));
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid button {
|
||||
min-height: 82px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--vd-color-border, var(--border));
|
||||
border-radius: var(--vd-radius-lg, 14px);
|
||||
background: color-mix(in srgb, var(--vd-color-surface, var(--surface)) 88%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid button:hover,
|
||||
#today .ux-today-command .today-summary-grid button.active {
|
||||
border-color: color-mix(in srgb, var(--vd-color-accent, var(--accent)) 48%, var(--vd-color-border, var(--border)));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid strong {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--vd-color-border, var(--border));
|
||||
border-radius: var(--vd-radius-lg, 14px);
|
||||
background: var(--vd-color-surface, var(--surface));
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 48px;
|
||||
padding: 12px 16px;
|
||||
color: var(--vd-color-text, var(--text));
|
||||
cursor: pointer;
|
||||
font-size: .82rem;
|
||||
font-weight: 780;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details > summary::after {
|
||||
content: '▾';
|
||||
color: var(--vd-color-text-muted, var(--text-muted));
|
||||
transition: transform .16s ease;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details[open] > summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details > summary span {
|
||||
margin-left: auto;
|
||||
margin-right: 12px;
|
||||
color: var(--vd-color-text-muted, var(--text-muted));
|
||||
font-size: .72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details .today-filterbar {
|
||||
margin: 0;
|
||||
padding: 0 16px 16px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#today .studio-workspace {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#today .ux-today-flow-contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#today .ux-today-priority-attention {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#today .ux-today-priority-ready {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#today .ux-today-secondary-scheduled {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#today .ux-today-secondary-activity {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
#today.ux-today-no-attention .ux-today-priority-attention {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#today .work-panel {
|
||||
border-radius: var(--vd-radius-lg, 15px);
|
||||
}
|
||||
|
||||
#today.ux-today-has-attention .ux-today-priority-attention {
|
||||
border-color: color-mix(in srgb, var(--vd-color-danger, #c63d35) 45%, var(--vd-color-border, var(--border)));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--vd-color-danger, #c63d35) 10%, transparent);
|
||||
}
|
||||
|
||||
#today .today-ready-panel {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
#today .ux-today-secondary-scheduled,
|
||||
#today .ux-today-secondary-activity {
|
||||
background: color-mix(in srgb, var(--vd-color-surface, var(--surface)) 96%, var(--vd-color-surface-muted, var(--surface-2)) 4%);
|
||||
}
|
||||
|
||||
#today .ux-today-panel-toggle {
|
||||
min-height: 32px;
|
||||
margin-left: auto;
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--vd-color-border, var(--border));
|
||||
border-radius: 8px;
|
||||
background: var(--vd-color-surface, var(--surface));
|
||||
color: var(--vd-color-text-muted, var(--text-muted));
|
||||
font: inherit;
|
||||
font-size: .7rem;
|
||||
font-weight: 720;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#today .ux-today-panel-collapsed {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#today .ux-today-panel-collapsed > :not(.work-panel-header) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#today .studio-layout-v2 {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#today .studio-inspector {
|
||||
position: sticky;
|
||||
top: calc(var(--topbar-height, 72px) + 18px);
|
||||
max-height: calc(100vh - var(--topbar-height, 72px) - 36px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#today .ux-today-inspector-toggle {
|
||||
display: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#today .today-ready-grid,
|
||||
#today .today-activity-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#today .today-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#today .ux-today-command button:focus-visible,
|
||||
#today .ux-today-filter-details summary:focus-visible,
|
||||
#today .ux-today-panel-toggle:focus-visible,
|
||||
#today .ux-today-inspector-toggle:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--vd-color-accent, var(--accent)) 45%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
#today .ux-today-command-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#today .ux-today-command-actions {
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcuts {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#today .studio-layout-v2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#today .ux-today-inspector-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#today .studio-inspector {
|
||||
position: static;
|
||||
display: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
#today.ux-today-inspector-open .studio-inspector {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#today .ux-today-command {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
|
||||
#today .ux-today-command .today-summary-grid button {
|
||||
flex: 0 0 132px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#today .today-filterbar,
|
||||
#today .today-filter-tabs,
|
||||
#today .today-activity-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#today .ux-today-filter-details > summary span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 470px) {
|
||||
#today .ux-today-command-actions,
|
||||
#today .ux-today-primary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#today .ux-today-shortcut {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#today .work-panel-header {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#today *,
|
||||
#today *::before,
|
||||
#today *::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: .01ms !important;
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user