josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Repaint theme blue with larger typography

Browse Source 
Swap the cherry-red primary for the logo's blue, bump body 13→15px
and h1 32→40px, and add semantic tokens (--bg-*, --accent-*, --text-*)
so future palette shifts are a single-file edit. Cherry-red survives
only for danger states and the brand cherry mark.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
josh
2026-09-12 12:29:02 -04:00
co-authored by Claude Opus 4.7
parent c3c799a409
commit 47051dc79a
15 changed files with 499 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/servers/[name]/+page.svelte
+110 -110
View File
@@ -453,11 +453,11 @@
<style>
.hero {
background:
linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
border: 1px solid var(--cherry-700);
linear-gradient(180deg, var(--bg-card) 0%, var(--bg-nav) 100%);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 24px 28px;
margin-bottom: 20px;
padding: var(--pad-panel) 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-panel);
position: relative;
overflow: hidden;
@@ -467,27 +467,27 @@
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--cherry-500), var(--spark-500), transparent);
background: linear-gradient(90deg, transparent, var(--accent), var(--spark-500), transparent);
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
gap: 24px;
}
.name-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.name-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
h1 {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
font-size: var(--text-2xl);
letter-spacing: 1.5px;
color: var(--cream);
line-height: 1;
line-height: var(--leading-tight);
}
.player-block { text-align: right; }
.player-count {
font-family: var(--font-mono);
font-size: 40px;
font-size: 48px;
font-weight: 500;
color: var(--ink-500);
line-height: 1;
@@ -498,25 +498,25 @@
}
.player-label {
font-family: var(--font-body);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-500);
margin-top: 4px;
margin-top: 6px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--cherry-700);
font-size: 13px;
gap: 24px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: var(--text-base);
}
.pair { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
.pair { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }
.pair .k {
color: var(--ink-500);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
@@ -526,19 +526,19 @@
.v.health-offline { color: var(--danger-500); }
.panel {
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
background: var(--bg-nav);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 18px 20px;
margin-bottom: 16px;
padding: var(--pad-card);
margin-bottom: 20px;
}
.diag { border-color: rgba(255, 48, 80, 0.35); }
.diag h2 { color: var(--danger-500); }
h2 {
margin: 0 0 12px;
margin: 0 0 14px;
font-family: var(--font-body);
font-size: 11px;
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
@@ -546,22 +546,22 @@
}
.stats, .diag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.stat {
background: var(--cherry-875);
border: 1px solid var(--cherry-700);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 12px;
padding: 12px 14px;
}
.stat .k {
color: var(--ink-500);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
.stat .v { color: var(--ink-100); margin-top: 4px; font-size: 13px; word-break: break-word; }
.stat .v { color: var(--ink-100); margin-top: 6px; font-size: var(--text-base); word-break: break-word; }
.mono { font-family: var(--font-mono); }
.flag-ok { color: var(--spark-500); }
.flag-bad { color: var(--danger-500); }
@@ -569,18 +569,18 @@
.reason-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 10px 14px;
gap: 12px;
margin-top: 16px;
padding: 12px 16px;
background: rgba(255, 48, 80, 0.08);
border: 1px solid rgba(255, 48, 80, 0.25);
border-radius: var(--r-sm);
}
.reason-tag {
padding: 2px 8px;
padding: 3px 10px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid transparent;
@@ -590,86 +590,86 @@
.reason-no-port { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
.reason-timeout { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
.reason-send-error { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
.reason-bad-reply { background: rgba(242, 230, 200, 0.1); border-color: rgba(242, 230, 200, 0.3); color: var(--cream); }
.reason-no-players { background: rgba(242, 230, 200, 0.1); border-color: rgba(242, 230, 200, 0.3); color: var(--cream); }
.reason-legacy { background: var(--cherry-875); border-color: var(--cherry-700); color: var(--ink-300); }
.reason-bad-reply { background: rgba(124, 192, 245, 0.10); border-color: rgba(124, 192, 245, 0.28); color: var(--cream); }
.reason-no-players { background: rgba(124, 192, 245, 0.10); border-color: rgba(124, 192, 245, 0.28); color: var(--cream); }
.reason-legacy { background: var(--bg-card); border-color: var(--border); color: var(--ink-300); }
.reason-detail {
color: var(--ink-100);
font-family: var(--font-mono);
font-size: 12px;
font-size: var(--text-mono);
}
.hint {
margin-top: 10px;
padding: 8px 14px;
margin-top: 12px;
padding: 10px 16px;
font-family: var(--font-body);
font-size: 12px;
font-size: var(--text-sm);
color: var(--cream-dim);
background: var(--cherry-875);
border-left: 3px solid var(--spark-500);
background: var(--bg-card);
border-left: 3px solid var(--accent);
border-radius: var(--r-sm);
}
.probe-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
gap: 14px;
margin-top: 16px;
}
.probe-btn {
background: var(--cherry-875);
background: var(--bg-card);
color: var(--cream);
border: 1px solid var(--spark-500);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
padding: 7px 14px;
padding: 10px 18px;
font-family: var(--font-body);
font-size: 12px;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: box-shadow 0.15s, background 0.15s;
}
.probe-btn:hover:not(:disabled) {
box-shadow: var(--spark-glow);
background: var(--cherry-825);
box-shadow: var(--accent-glow);
background: var(--bg-card-hi);
}
.probe-btn:disabled { opacity: 0.5; cursor: default; }
.probe-hint {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 11px;
font-size: var(--text-mono-sm);
}
.probe-result {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px 14px;
gap: 12px;
margin-top: 14px;
padding: 12px 16px;
border-radius: var(--r-sm);
border: 1px solid transparent;
}
.probe-ok {
background: rgba(34, 224, 255, 0.08);
border-color: rgba(34, 224, 255, 0.3);
background: rgba(124, 212, 255, 0.08);
border-color: rgba(124, 212, 255, 0.3);
}
.probe-bad {
background: rgba(255, 48, 80, 0.08);
border-color: rgba(255, 48, 80, 0.25);
}
.probe-tag {
padding: 2px 8px;
padding: 3px 10px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid transparent;
flex-shrink: 0;
}
.probe-tag.ok {
background: rgba(34, 224, 255, 0.15);
border-color: rgba(34, 224, 255, 0.4);
background: rgba(124, 212, 255, 0.15);
border-color: rgba(124, 212, 255, 0.4);
color: var(--spark-500);
}
.probe-tag.bad {
@@ -680,25 +680,25 @@
.probe-detail {
color: var(--ink-100);
font-family: var(--font-mono);
font-size: 12px;
font-size: var(--text-mono);
}
.probe-detail strong { color: var(--spark-500); }
.probe-url {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 8px;
padding: 6px 12px;
background: var(--cherry-875);
gap: 10px;
margin-top: 10px;
padding: 8px 14px;
background: var(--bg-card);
border-radius: var(--r-sm);
border: 1px solid var(--cherry-700);
font-size: 11px;
border: 1px solid var(--border);
font-size: var(--text-mono-sm);
}
.probe-url .k {
color: var(--ink-500);
font-family: var(--font-body);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
@@ -710,30 +710,30 @@
.net-table {
width: 100%;
margin-top: 14px;
margin-top: 16px;
border-collapse: separate;
border-spacing: 0;
background: var(--cherry-975);
border: 1px solid var(--cherry-700);
background: var(--bg-page);
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
font-size: 12px;
font-size: var(--text-mono);
}
.net-table thead th {
text-align: left;
padding: 8px 12px;
padding: 10px 14px;
font-family: var(--font-body);
font-size: 10px;
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ink-500);
border-bottom: 1px solid var(--cherry-700);
background: var(--cherry-925);
border-bottom: 1px solid var(--border);
background: var(--bg-nav);
}
.net-table tbody td {
padding: 8px 12px;
border-bottom: 1px solid rgba(74, 15, 30, 0.4);
padding: 10px 14px;
border-bottom: 1px solid rgba(30, 50, 96, 0.5);
color: var(--ink-100);
vertical-align: top;
}
@@ -742,24 +742,24 @@
.net-table .num { text-align: right; }
.net-table .detail-cell {
color: var(--ink-300);
font-size: 11px;
font-size: var(--text-mono-sm);
word-break: break-word;
max-width: 320px;
}
.net-tag {
display: inline-block;
padding: 2px 8px;
padding: 3px 10px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid transparent;
}
.net-connected {
background: rgba(34, 224, 255, 0.15);
border-color: rgba(34, 224, 255, 0.4);
background: rgba(124, 212, 255, 0.15);
border-color: rgba(124, 212, 255, 0.4);
color: var(--spark-500);
}
.net-refused {
@@ -774,40 +774,40 @@
}
.net-meta {
margin-top: 10px;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
font-size: var(--text-mono-sm);
color: var(--ink-500);
}
.net-meta code {
color: var(--cream);
background: var(--cherry-875);
padding: 1px 6px;
background: var(--bg-card);
padding: 2px 8px;
border-radius: var(--r-sm);
}
.snippet-details {
margin-top: 10px;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
font-size: var(--text-mono-sm);
}
.snippet-details summary {
color: var(--ink-500);
cursor: pointer;
padding: 4px 0;
padding: 6px 0;
}
.snippet-details summary:hover { color: var(--ink-100); }
.snippet {
margin: 10px 0 0;
padding: 12px 14px;
background: var(--cherry-975);
border: 1px solid var(--cherry-700);
margin: 12px 0 0;
padding: 14px 16px;
background: var(--bg-page);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--ink-300);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
max-height: 400px;
font-size: var(--text-mono-sm);
line-height: var(--leading-mono);
max-height: 440px;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
@@ -815,19 +815,19 @@
.row {
display: grid;
grid-template-columns: 200px 160px 100px 120px 1fr;
gap: 12px;
padding: 10px 14px;
background: var(--cherry-875);
border: 1px solid var(--cherry-700);
grid-template-columns: 220px 180px 110px 130px 1fr;
gap: 14px;
padding: 12px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin: 4px 0;
margin: 6px 0;
color: var(--ink-100);
text-decoration: none;
font-size: 12px;
font-size: var(--text-mono);
font-family: var(--font-mono);
}
.row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
.row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
.row-done { border-left: 3px solid var(--spark-500); }
.row-failed { border-left: 3px solid var(--danger-500); }
.row-pending { border-left: 3px solid var(--amber-500); }
@@ -841,6 +841,6 @@
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
font-size: var(--text-base);
}
</style>