refactor(archive): redesign segmented archive experience
This commit is contained in:
@@ -48,6 +48,30 @@
|
||||
--control-soft-bg: rgba(255, 255, 255, 0.08);
|
||||
--control-soft-border: rgba(255, 255, 255, 0.16);
|
||||
--brand-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
|
||||
--archive-shell-bg:
|
||||
linear-gradient(180deg, rgba(22, 38, 58, 0.94), rgba(10, 25, 41, 0.92)),
|
||||
radial-gradient(circle at top right, rgba(59, 173, 212, 0.12), transparent 42%);
|
||||
--archive-shell-border: rgba(148, 198, 228, 0.18);
|
||||
--archive-toolbar-bg:
|
||||
linear-gradient(180deg, rgba(34, 57, 79, 0.82), rgba(22, 40, 58, 0.76)),
|
||||
radial-gradient(circle at top right, rgba(75, 203, 223, 0.1), transparent 48%);
|
||||
--archive-toolbar-border: rgba(148, 198, 228, 0.14);
|
||||
--archive-switcher-bg: rgba(12, 24, 38, 0.34);
|
||||
--archive-switcher-border: rgba(148, 198, 228, 0.12);
|
||||
--archive-switcher-active-bg: rgba(173, 213, 245, 0.14);
|
||||
--archive-row-bg: rgba(255, 255, 255, 0.06);
|
||||
--archive-row-border: rgba(255, 255, 255, 0.05);
|
||||
--archive-row-active-bg: rgba(255, 255, 255, 0.09);
|
||||
--archive-detail-bg:
|
||||
linear-gradient(180deg, rgba(40, 62, 86, 0.88), rgba(24, 41, 60, 0.82)),
|
||||
radial-gradient(circle at top left, rgba(135, 217, 255, 0.12), transparent 42%);
|
||||
--archive-select-bg: rgba(30, 51, 72, 0.84);
|
||||
--archive-select-border: rgba(148, 198, 228, 0.18);
|
||||
--archive-select-focus-bg: rgba(35, 59, 83, 0.94);
|
||||
--archive-mobile-overlay-bg: rgba(6, 14, 24, 0.36);
|
||||
--archive-mobile-top-bg:
|
||||
linear-gradient(180deg, rgba(17, 33, 50, 0.96), rgba(17, 33, 50, 0.78)),
|
||||
radial-gradient(circle at top left, rgba(135, 217, 255, 0.1), transparent 42%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@@ -95,6 +119,30 @@
|
||||
--control-soft-bg: rgba(255, 255, 255, 0.58);
|
||||
--control-soft-border: rgba(123, 153, 182, 0.22);
|
||||
--brand-shadow: 0 10px 24px rgba(82, 111, 138, 0.14);
|
||||
--archive-shell-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 252, 255, 0.72)),
|
||||
radial-gradient(circle at top right, rgba(123, 190, 255, 0.16), transparent 46%);
|
||||
--archive-shell-border: rgba(120, 146, 172, 0.2);
|
||||
--archive-toolbar-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 255, 0.64)),
|
||||
radial-gradient(circle at top right, rgba(106, 203, 219, 0.12), transparent 48%);
|
||||
--archive-toolbar-border: rgba(120, 146, 172, 0.16);
|
||||
--archive-switcher-bg: rgba(255, 255, 255, 0.34);
|
||||
--archive-switcher-border: rgba(120, 146, 172, 0.18);
|
||||
--archive-switcher-active-bg: rgba(255, 255, 255, 0.72);
|
||||
--archive-row-bg: rgba(255, 255, 255, 0.38);
|
||||
--archive-row-border: rgba(120, 146, 172, 0.14);
|
||||
--archive-row-active-bg: rgba(255, 255, 255, 0.56);
|
||||
--archive-detail-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(244, 250, 255, 0.72)),
|
||||
radial-gradient(circle at top left, rgba(141, 205, 255, 0.16), transparent 42%);
|
||||
--archive-select-bg: rgba(255, 255, 255, 0.62);
|
||||
--archive-select-border: rgba(123, 153, 182, 0.2);
|
||||
--archive-select-focus-bg: rgba(255, 255, 255, 0.84);
|
||||
--archive-mobile-overlay-bg: rgba(236, 243, 249, 0.42);
|
||||
--archive-mobile-top-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.84)),
|
||||
radial-gradient(circle at top left, rgba(141, 205, 255, 0.16), transparent 42%);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -104,6 +152,31 @@
|
||||
select {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.mobile-nav .nav-icon {
|
||||
opacity: 1;
|
||||
filter:
|
||||
saturate(2.1)
|
||||
contrast(1.16)
|
||||
brightness(0.76)
|
||||
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
|
||||
drop-shadow(0 0 8px rgba(110, 214, 255, 0.18));
|
||||
}
|
||||
|
||||
.mobile-nav a.active .nav-icon {
|
||||
filter:
|
||||
saturate(2.35)
|
||||
contrast(1.2)
|
||||
brightness(0.68)
|
||||
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.56))
|
||||
drop-shadow(0 0 10px rgba(110, 214, 255, 0.24));
|
||||
}
|
||||
|
||||
.detail-grid--archive-day div {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 249, 255, 0.64));
|
||||
border: 1px solid rgba(126, 156, 184, 0.18);
|
||||
box-shadow: 0 8px 22px rgba(138, 167, 194, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -851,6 +924,10 @@ button:disabled {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.sport-choice-list--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sport-choice {
|
||||
display: block;
|
||||
}
|
||||
@@ -890,6 +967,11 @@ button:disabled {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sport-choice__card--toggle {
|
||||
min-height: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.sport-choice input:checked + .sport-choice__card {
|
||||
border-color: rgba(139, 228, 255, 0.44);
|
||||
background: linear-gradient(180deg, rgba(96, 184, 255, 0.18), rgba(255, 255, 255, 0.08));
|
||||
@@ -1156,6 +1238,399 @@ input[type="range"] {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.archive-page {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.archive-shell {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1.2rem;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
background: var(--archive-shell-bg);
|
||||
border-color: var(--archive-shell-border);
|
||||
}
|
||||
|
||||
.archive-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.archive-header__meta {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.archive-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.85rem 0.95rem;
|
||||
border-radius: 18px;
|
||||
background: var(--archive-toolbar-bg);
|
||||
border: 1px solid var(--archive-toolbar-border);
|
||||
}
|
||||
|
||||
.archive-toolbar--compact {
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.archive-switcher {
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 999px;
|
||||
background: var(--archive-switcher-bg);
|
||||
border: 1px solid var(--archive-switcher-border);
|
||||
}
|
||||
|
||||
.archive-switcher__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.45rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.archive-switcher__item.active {
|
||||
color: var(--text);
|
||||
background: var(--archive-switcher-active-bg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.archive-filter {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.archive-filter label {
|
||||
min-width: 13rem;
|
||||
}
|
||||
|
||||
.archive-filter select {
|
||||
background: var(--archive-select-bg);
|
||||
border-color: var(--archive-select-border);
|
||||
}
|
||||
|
||||
.archive-filter select:focus {
|
||||
background: var(--archive-select-focus-bg);
|
||||
}
|
||||
|
||||
.archive-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.archive-main {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.archive-rows {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.archive-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 18px;
|
||||
background: var(--archive-row-bg);
|
||||
border: 1px solid var(--archive-row-border);
|
||||
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
||||
}
|
||||
|
||||
.archive-row:hover,
|
||||
.archive-row.active {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(139, 228, 255, 0.28);
|
||||
background: var(--archive-row-active-bg);
|
||||
}
|
||||
|
||||
.archive-row__main,
|
||||
.archive-row__meta {
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-row__main strong,
|
||||
.archive-row__title-group strong {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.archive-row__main span,
|
||||
.archive-row__meta span,
|
||||
.archive-row__title-group span,
|
||||
.archive-row__hint {
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.archive-row__meta {
|
||||
justify-items: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.archive-row__meta--stack {
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.archive-row__hint {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.archive-row__title-group span,
|
||||
.archive-row__meta span {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.archive-row--summary {
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.archive-row--summary .archive-row__main {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.archive-row--summary .status-badge {
|
||||
justify-self: end;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.archive-row--week .archive-row__main--week {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.archive-row--week .archive-row__main--week .status-badge,
|
||||
.archive-row--month .archive-row__main--month .status-badge {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.archive-row--month .archive-row__main--month {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.archive-row--summary .archive-row__hint {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.archive-row__title-group {
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 1.7rem;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
border: 1px solid transparent;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-badge--ready {
|
||||
color: #082336;
|
||||
background: rgba(127, 243, 187, 0.92);
|
||||
}
|
||||
|
||||
.status-badge--pending {
|
||||
color: var(--text);
|
||||
background: rgba(139, 228, 255, 0.14);
|
||||
border-color: rgba(139, 228, 255, 0.22);
|
||||
}
|
||||
|
||||
.status-badge--blocked {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.archive-detail {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1.15rem;
|
||||
border-radius: var(--radius-xl);
|
||||
position: sticky;
|
||||
top: 1.25rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background: var(--archive-detail-bg);
|
||||
border-color: var(--archive-shell-border);
|
||||
}
|
||||
|
||||
.archive-detail__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.archive-detail__status-row,
|
||||
.archive-detail__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__single-action form,
|
||||
.archive-detail__actions form {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__single-action {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__week-status {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.archive-detail__status-note {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.archive-detail__status-note p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.archive-mini-list {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.archive-mini-list__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
padding: 0.72rem 0.85rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__panel > *,
|
||||
.archive-detail__top > *,
|
||||
.archive-detail__status-row > *,
|
||||
.archive-detail__actions > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.archive-detail__actions .ghost-link,
|
||||
.archive-detail__actions .ghost-button,
|
||||
.archive-detail__single-action .primary-button {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.archive-detail__status-row .chart-chip {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.archive-detail__single-action .primary-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-grid--archive div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-grid--archive-day {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.detail-grid--archive-day div {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.detail-grid--archive-day dt,
|
||||
.detail-grid--archive-day dd {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-grid--archive-day dd {
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.detail-grid--archive dd,
|
||||
.archive-mini-list__row span,
|
||||
.note-box p {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-grid--archive dd {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.archive-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
@@ -1606,6 +2081,75 @@ input[type="range"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.archive-header,
|
||||
.archive-toolbar,
|
||||
.archive-workspace,
|
||||
.archive-list-header,
|
||||
.archive-row,
|
||||
.archive-row--summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.archive-header,
|
||||
.archive-toolbar,
|
||||
.archive-list-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.archive-workspace {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.archive-row__meta {
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.archive-row--summary .archive-row__main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.archive-row--summary .status-badge {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.archive-row--day {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 0.95rem;
|
||||
}
|
||||
|
||||
.archive-row--day .archive-row__main {
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.archive-row--day .archive-row__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.archive-row--day .archive-row__hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.archive-row--day .archive-row__main strong {
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.archive-row--day .archive-row__main span,
|
||||
.archive-row--day .archive-row__meta span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.archive-detail {
|
||||
scroll-margin-top: 1rem;
|
||||
}
|
||||
|
||||
.calendar-detail {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -1680,4 +2224,19 @@ input[type="range"] {
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.archive-shell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.archive-switcher,
|
||||
.archive-filter,
|
||||
.archive-header__meta {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.archive-filter label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user