feat(stats): polish rankings page
This commit is contained in:
Adam
@@ -67,6 +67,9 @@
|
||||
--stats-dot: #d4d4d4;
|
||||
--stats-hero-muted: #5c5c5c;
|
||||
--stats-hero-pattern: #eeeeee;
|
||||
--stats-logo-bg: #161616;
|
||||
--stats-logo-fill: #454545;
|
||||
--stats-logo-stroke: #e2e2e2;
|
||||
--stats-page-padding: 5rem;
|
||||
--stats-section-padding: 6rem;
|
||||
min-height: 100vh;
|
||||
@@ -343,7 +346,7 @@
|
||||
gap: 56px;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
padding: 112px 0 24px;
|
||||
padding: 112px clamp(32px, 4vw, 48px) 24px;
|
||||
color: var(--stats-text);
|
||||
font-family:
|
||||
"IBM Plex Mono",
|
||||
@@ -364,9 +367,10 @@
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="footer-mark"] [data-slot="brand-mark"] {
|
||||
width: 24px;
|
||||
height: 30px;
|
||||
[data-page="stats"] [data-slot="footer-mark"] [data-slot="opencode-mark"] {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="footer-column"] {
|
||||
@@ -415,10 +419,19 @@
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--stats-line);
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
background: var(--stats-bg);
|
||||
color: var(--stats-text) !important;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-button"]:hover {
|
||||
@@ -426,6 +439,176 @@
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-button"]:focus-visible,
|
||||
[data-page="stats"] [data-component="subscribe-modal"] button:focus-visible,
|
||||
[data-page="stats"] [data-component="subscribe-modal"] input:focus-visible {
|
||||
outline: 2px solid var(--stats-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="subscribe-modal"] {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
color: var(--stats-text);
|
||||
font-family:
|
||||
"IBM Plex Mono",
|
||||
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-scrim"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #00000066;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-panel"] {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(374px, calc(100vw - 16px));
|
||||
overflow: hidden;
|
||||
background: var(--stats-layer);
|
||||
box-shadow:
|
||||
0 0 0 0.5px #00000024,
|
||||
0 16px 32px #0000001f,
|
||||
0 8px 16px #00000014;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-brand"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 122px;
|
||||
background: #242424;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-logo"] {
|
||||
display: block;
|
||||
width: 234px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-close"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-close"]:hover {
|
||||
background: #ffffff1a;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-body"] {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
padding: 24px 12px 12px;
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-intro"] {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-intro"] h2 {
|
||||
color: var(--stats-text);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="modal-intro"] p {
|
||||
color: var(--stats-muted);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] input,
|
||||
[data-page="stats"] [data-slot="subscribe-form"] button {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] input {
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-bg);
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] input::placeholder {
|
||||
color: var(--stats-faint);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: #242424;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-form"] button:disabled {
|
||||
cursor: progress;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-feedback"]:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-feedback"] p {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="success"] {
|
||||
color: #198b43;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="error"] {
|
||||
color: #b82d35;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="footer-pattern"] {
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
@@ -470,30 +653,6 @@
|
||||
background: #198b43;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="theme-toggle"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
padding: 2px;
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="theme-toggle"] button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: var(--stats-muted);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="theme-toggle"] button[data-active="true"] {
|
||||
color: var(--stats-text);
|
||||
background: var(--stats-bg);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="content"] a {
|
||||
color: var(--stats-text);
|
||||
text-decoration: none;
|
||||
@@ -1373,6 +1532,10 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="section-bridge"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="section-title"] {
|
||||
max-width: 1200px;
|
||||
margin-bottom: 40px;
|
||||
@@ -1779,7 +1942,7 @@
|
||||
background: transparent;
|
||||
color: var(--stats-text);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -1804,6 +1967,7 @@
|
||||
overflow: hidden;
|
||||
color: var(--stats-muted);
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1907,7 +2071,7 @@
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="live-filter"] {
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0;
|
||||
@@ -1960,6 +2124,9 @@
|
||||
--stats-dot: #303030;
|
||||
--stats-hero-muted: #808080;
|
||||
--stats-hero-pattern: #303030;
|
||||
--stats-logo-bg: #f1ecec;
|
||||
--stats-logo-fill: #b7b1b1;
|
||||
--stats-logo-stroke: #211e1e;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="chart-tooltip"] {
|
||||
@@ -2040,6 +2207,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
[data-page="stats"] [data-component="footer"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 74rem) {
|
||||
[data-page="stats"] [data-section="top-models"],
|
||||
[data-page="stats"] [data-section="leaderboard"],
|
||||
|
||||
Reference in New Issue
Block a user