diff --git a/launcher/src/components/Rail.svelte b/launcher/src/components/Rail.svelte
index 9a73614..d93c25e 100644
--- a/launcher/src/components/Rail.svelte
+++ b/launcher/src/components/Rail.svelte
@@ -59,30 +59,31 @@
diff --git a/launcher/src/pages/Login.svelte b/launcher/src/pages/Login.svelte
index fd6360c..03a4488 100644
--- a/launcher/src/pages/Login.svelte
+++ b/launcher/src/pages/Login.svelte
@@ -7,7 +7,7 @@
diff --git a/launcher/src/pages/Settings.svelte b/launcher/src/pages/Settings.svelte
index d337e47..ecb9b05 100644
--- a/launcher/src/pages/Settings.svelte
+++ b/launcher/src/pages/Settings.svelte
@@ -343,7 +343,7 @@
-
{b?.name ?? 'ScopeNet'} LauncherVersion {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}
+
{b?.name ?? 'SCOPENET'} LauncherVersion {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}
{#if app.update}
@@ -365,27 +365,27 @@
diff --git a/panel/web/src/app.css b/panel/web/src/app.css
index ab3620f..59bc7dc 100644
--- a/panel/web/src/app.css
+++ b/panel/web/src/app.css
@@ -1,24 +1,24 @@
:root {
- --bg: #090a12;
- --bg-2: #0e1019;
- --surface: #12141f;
- --surface-2: #181b29;
- --surface-3: #20243a;
+ --bg: #0d0e12;
+ --bg-2: #111217;
+ --surface: #16181e;
+ --surface-2: #1c1e25;
+ --surface-3: #25272f;
--line: rgba(255, 255, 255, 0.07);
- --line-strong: rgba(255, 255, 255, 0.13);
- --text: #eef0ff;
- --text-2: #b7bbdb;
- --muted: #7d82a8;
- --accent: #8b6cff;
- --accent-2: #22d3ee;
- --accent-soft: rgba(139, 108, 255, 0.14);
- --good: #34d399;
- --warn: #fbbf24;
- --bad: #f43f5e;
- --radius: 14px;
- --radius-sm: 9px;
- --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
- --font: 'Outfit Variable', system-ui, sans-serif;
+ --line-strong: rgba(255, 255, 255, 0.12);
+ --text: #ecedf1;
+ --text-2: #b4b7c0;
+ --muted: #8b8f9a;
+ --accent: #6d6af5;
+ --accent-2: #8b88f8;
+ --accent-soft: rgba(109, 106, 245, 0.14);
+ --good: #3fb97c;
+ --warn: #e2a336;
+ --bad: #e5484d;
+ --radius: 10px;
+ --radius-sm: 7px;
+ --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
+ --font: 'Inter Variable', system-ui, sans-serif;
--mono: 'JetBrains Mono Variable', ui-monospace, monospace;
color-scheme: dark;
}
@@ -34,17 +34,11 @@ body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
- font-size: 15px;
+ font-size: 14.5px;
-webkit-font-smoothing: antialiased;
}
-body {
- background:
- radial-gradient(1200px 600px at 110% -10%, rgba(139, 108, 255, 0.12), transparent 60%),
- radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, 0.07), transparent 60%),
- var(--bg);
- background-attachment: fixed;
-}
+body { background: var(--bg); }
a {
color: var(--accent-2);
@@ -53,11 +47,11 @@ a {
h1, h2, h3, h4 {
margin: 0;
- font-weight: 650;
+ font-weight: 600;
letter-spacing: -0.01em;
}
-h1 { font-size: 1.75rem; }
+h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
@@ -69,7 +63,7 @@ code, .mono {
}
::selection {
- background: rgba(139, 108, 255, 0.4);
+ background: rgba(109, 106, 245, 0.4);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
@@ -109,20 +103,16 @@ code, .mono {
.tiny { font-size: 0.75rem; }
.card {
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)), var(--surface);
+ background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
}
.card.hover {
- transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
-}
-.card.hover:hover {
- border-color: var(--line-strong);
- transform: translateY(-2px);
- box-shadow: var(--shadow);
+ transition: border-color 0.15s;
}
+.card.hover:hover { border-color: var(--line-strong); }
.section-title {
display: flex;
@@ -151,29 +141,28 @@ button, .btn {
align-items: center;
justify-content: center;
gap: 8px;
- font-weight: 550;
- transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s, opacity 0.15s;
+ font-weight: 520;
+ transition: background 0.15s, border-color 0.15s, opacity 0.15s;
white-space: nowrap;
}
button:hover { background: var(--surface-3); }
-button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
-button.primary {
- background: linear-gradient(135deg, var(--accent), #6a4cf0);
+button.primary, a.btn.primary {
+ background: var(--accent);
border-color: transparent;
- box-shadow: 0 8px 24px -10px rgba(139, 108, 255, 0.8);
+ color: white;
}
-button.primary:hover { filter: brightness(1.1); }
+button.primary:hover, a.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
button.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
-button.danger { color: #ff8a9e; border-color: rgba(244, 63, 94, 0.3); background: rgba(244, 63, 94, 0.08); }
-button.danger:hover { background: rgba(244, 63, 94, 0.16); }
+button.danger { color: #f2999c; border-color: rgba(229, 72, 77, 0.3); background: rgba(229, 72, 77, 0.08); }
+button.danger:hover { background: rgba(229, 72, 77, 0.15); }
button.icon { padding: 8px; }
button.sm { padding: 6px 11px; font-size: 0.85rem; }
@@ -194,7 +183,10 @@ select { appearance: none; background-image: linear-gradient(45deg, transparent
input[type='color'] { padding: 0; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; overflow: hidden; }
input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
input[type='color']::-webkit-color-swatch { border: none; }
-input[type='range'] { padding: 0; accent-color: var(--accent); border: none; background: transparent; }
+input[type='range'] { -webkit-appearance: none; appearance: none; padding: 0; height: 18px; border: none; background: transparent; cursor: pointer; }
+input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
+input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
+input[type='range']:hover, input[type='range']:focus { background: transparent; }
input[type='checkbox'] { width: auto; accent-color: var(--accent); }
label.field {
@@ -212,15 +204,15 @@ label.field .help { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
align-items: center;
gap: 5px;
padding: 3px 9px;
- border-radius: 999px;
+ border-radius: 5px;
font-size: 0.75rem;
- font-weight: 600;
+ font-weight: 520;
background: rgba(255, 255, 255, 0.06);
color: var(--text-2);
border: 1px solid var(--line);
white-space: nowrap;
}
-.badge.accent { background: var(--accent-soft); color: #c4b5ff; border-color: rgba(139, 108, 255, 0.3); }
+.badge.accent { background: var(--accent-soft); color: #b9b7fb; border-color: rgba(109, 106, 245, 0.28); }
.badge.good { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.25); }
.badge.warn { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); }
.badge.bad { background: rgba(244, 63, 94, 0.12); color: #fda4af; border-color: rgba(244, 63, 94, 0.25); }
@@ -241,7 +233,7 @@ label.field .help { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
color: var(--muted);
font-size: 0.88rem;
}
-.segmented button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
+.segmented button.active { background: var(--surface-3); color: var(--text); }
.tabs {
display: flex;
@@ -271,8 +263,6 @@ table.table {
color: var(--muted);
font-weight: 500;
font-size: 0.78rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
}
@@ -304,7 +294,7 @@ table.table {
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
-@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
.page { padding: 20px 16px 48px; }
diff --git a/panel/web/src/components/BarChart.svelte b/panel/web/src/components/BarChart.svelte
index c3abb3b..038541f 100644
--- a/panel/web/src/components/BarChart.svelte
+++ b/panel/web/src/components/BarChart.svelte
@@ -66,7 +66,7 @@
svg { width: 100%; height: auto; display: block; overflow: visible; }
.grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
- .bar { fill: #8b6cff; transition: opacity 0.15s; }
+ .bar { fill: #6d6af5; transition: opacity 0.15s; }
.bar.dim { opacity: 0.4; }
.tip {
position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; background: var(--surface-3);
diff --git a/panel/web/src/components/LauncherPreview.svelte b/panel/web/src/components/LauncherPreview.svelte
index bfa00dc..8613e46 100644
--- a/panel/web/src/components/LauncherPreview.svelte
+++ b/panel/web/src/components/LauncherPreview.svelte
@@ -1,26 +1,22 @@
-
- {#if b.background.kind === 'video' && b.background.url}
-
-
+ {#if media}
+
+ {#if b.background.kind === 'video'}
+
+
+ {:else}
+
+ {/if}
+
+
{/if}
-
-
-
- {#if b.logo_url}

{:else}
{/if}
-
{b.name}
-
-
-
-
-
- {instanceName.slice(0, 1)}
- C
- V
-
-
-
-
-
-
-
-
1.21.1Fabric
-
{instanceName}
-
{b.tagline}
+
+ {#if b.logo_url}

{:else}
{/if}
+
{b.name}
-
-
- {#if b.features.server_status}
-
42/100 online
+
+
+ {instanceName.slice(0, 2).toUpperCase()}
+ CB
+ CA
+
+
+
+
+
+
+
+
1.21.1Fabric
+
{instanceName}
+
{b.tagline}
+
+
Play
+ {#if b.features.server_status}
42/100 online{/if}
+
+
+ {#if b.features.news && news.length}
+
+
News
+ {#each news as n}
+
+ {#if n.image_url}

{/if}
+
+ {#if n.tag}{n.tag}{/if}
+ {n.title || 'Untitled'}
+ {n.body}
+
+
+ {/each}
+
{/if}
- {#if b.features.news && news.length}
-
-
News
- {#each news as n}
-
- {#if n.image_url}

{/if}
-
- {#if n.tag}{n.tag}{/if}
- {n.title || 'Untitled'}
- {n.body}
-
-
- {/each}
-
- {/if}
-
diff --git a/panel/web/src/components/Modal.svelte b/panel/web/src/components/Modal.svelte
index 1952d2f..8882f45 100644
--- a/panel/web/src/components/Modal.svelte
+++ b/panel/web/src/components/Modal.svelte
@@ -28,17 +28,17 @@
diff --git a/panel/web/src/components/Sidebar.svelte b/panel/web/src/components/Sidebar.svelte
index c6a4613..3b3a7ad 100644
--- a/panel/web/src/components/Sidebar.svelte
+++ b/panel/web/src/components/Sidebar.svelte
@@ -4,7 +4,7 @@
import { logout, session } from '../lib/session.svelte';
import Avatar from './Avatar.svelte';
- let { brandName = 'ScopeNet', logo = null }: { brandName?: string; logo?: string | null } = $props();
+ let { brandName = 'SCOPENET', logo = null }: { brandName?: string; logo?: string | null } = $props();
const items = [
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -54,12 +54,12 @@
diff --git a/panel/web/src/pages/Instances.svelte b/panel/web/src/pages/Instances.svelte
index c46db82..4e347a7 100644
--- a/panel/web/src/pages/Instances.svelte
+++ b/panel/web/src/pages/Instances.svelte
@@ -126,7 +126,7 @@
.inst { padding: 0; overflow: hidden; color: var(--text); display: flex; flex-direction: column; }
.inst.disabled { opacity: 0.6; }
.banner {
- height: 110px; background: radial-gradient(120% 120% at 100% 0%, rgba(139, 108, 255, 0.45), transparent 60%), radial-gradient(100% 100% at 0% 100%, rgba(34, 211, 238, 0.25), transparent 60%), var(--surface-2);
+ height: 96px; background: var(--surface-2); border-bottom: 1px solid var(--line);
background-size: cover; background-position: center; position: relative;
}
.badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
diff --git a/panel/web/src/pages/Login.svelte b/panel/web/src/pages/Login.svelte
index 5aebce4..9c64428 100644
--- a/panel/web/src/pages/Login.svelte
+++ b/panel/web/src/pages/Login.svelte
@@ -26,8 +26,6 @@