Add historical monthly MVP V2 UI and comparison panel

This commit is contained in:
devRaGonSa
2026-03-25 09:48:35 +01:00
parent 9af663c21f
commit 43e1d612af
5 changed files with 642 additions and 18 deletions

View File

@@ -200,6 +200,13 @@
gap: 16px;
}
.historical-mvp-card--v2 {
border-color: rgba(187, 143, 72, 0.26);
background:
radial-gradient(circle at top right, rgba(187, 143, 72, 0.12), transparent 40%),
linear-gradient(180deg, rgba(31, 27, 18, 0.96), rgba(12, 15, 11, 0.98));
}
.historical-mvp-card--rank-1 {
border-color: rgba(210, 182, 118, 0.34);
background:
@@ -235,6 +242,20 @@
line-height: 1.3;
}
.historical-mvp-card__version {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid rgba(187, 143, 72, 0.28);
border-radius: 999px;
color: var(--accent-warm);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-mvp-card__score-label {
margin-bottom: 6px;
color: var(--muted);
@@ -272,6 +293,39 @@
line-height: 1.5;
}
.historical-mvp-card__signals {
display: grid;
gap: 10px;
}
.historical-mvp-card__signal-summary {
color: var(--text-soft);
font-size: 0.9rem;
line-height: 1.5;
}
.historical-mvp-card__signal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.historical-mvp-card__signal-grid article {
padding: 10px 12px;
border: 1px solid rgba(187, 143, 72, 0.14);
border-radius: 14px;
background: rgba(13, 17, 12, 0.42);
}
.historical-mvp-card__signal-grid span {
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-state {
margin: 0 0 16px;
padding: 14px 16px;
@@ -333,6 +387,81 @@
gap: 14px;
}
.historical-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 14px;
}
.historical-comparison-card {
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid rgba(159, 168, 141, 0.16);
border-radius: 18px;
background:
radial-gradient(circle at top right, rgba(183, 201, 125, 0.1), transparent 42%),
linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(12, 15, 11, 0.98));
box-shadow: var(--shadow-soft);
}
.historical-comparison-card__top,
.historical-comparison-card__scores {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.historical-comparison-card__eyebrow,
.historical-comparison-card__delta-label,
.historical-comparison-card__meta span {
margin: 0 0 6px;
color: var(--muted);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.historical-comparison-card__title {
margin: 0;
font-size: 1.08rem;
line-height: 1.35;
}
.historical-comparison-card__delta-value {
color: var(--accent-strong);
font-size: 1.35rem;
line-height: 1;
}
.historical-comparison-card__score-block strong {
display: block;
font-size: 1rem;
}
.historical-comparison-card__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.historical-comparison-card__meta article {
padding: 10px 12px;
border: 1px solid rgba(159, 168, 141, 0.14);
border-radius: 14px;
background: rgba(13, 17, 12, 0.42);
}
.historical-comparison-card__summary {
margin: 0;
padding-top: 12px;
border-top: 1px solid rgba(159, 168, 141, 0.12);
color: var(--text-soft);
font-size: 0.9rem;
line-height: 1.5;
}
.historical-match-card {
display: grid;
gap: 14px;
@@ -401,6 +530,19 @@
grid-template-columns: 1fr;
}
.historical-mvp-card__signal-grid {
grid-template-columns: 1fr;
}
.historical-comparison-card__top,
.historical-comparison-card__scores {
flex-direction: column;
}
.historical-comparison-card__meta {
grid-template-columns: 1fr;
}
.historical-tab {
width: 100%;
}