Restyle to a clean, flat look and rename brand to SCOPENET
- Brand is now SCOPENET everywhere (defaults, UI, installer, docs) - Launcher: solid backgrounds (no animated orbs/grain), flat Play button without gradient/shine/glow, quieter rail with a simple active indicator, smaller type scale, Inter as default font, glass off by default, restyled sliders - Panel: same flat treatment; live preview mirrors the new launcher - New flat scope-reticle logo and app icons - Calmer default palette - Fix: lock the shared cargo cache in the Docker build (amd64/arm64 raced) - Fix: Windows-only clippy lint in sys.rs Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011ARcGWxLx21FwXJ3yfGriS
This commit is contained in:
69 files changed
+378
-426
No files matched your search
@@ -68,6 +68,6 @@
|
||||
main { flex: 1; min-width: 0; min-height: 0; position: relative; }
|
||||
.center { flex: 1; display: grid; place-items: center; color: var(--accent); }
|
||||
.msg { padding: 2rem; max-width: 28rem; display: flex; flex-direction: column; gap: 0.8rem; color: var(--text); }
|
||||
.update { position: fixed; top: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.5rem 0.45rem 1rem; font-size: 0.87rem; border-radius: 99rem; animation: fade-up 0.3s var(--ease); box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.6); }
|
||||
.update :global(svg:first-child) { color: var(--accent-2); }
|
||||
.update { position: fixed; top: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.5rem 0.45rem 1rem; font-size: 0.87rem; border-radius: var(--radius); background: var(--surface); animation: fade 0.2s ease; }
|
||||
.update :global(svg:first-child) { color: var(--accent); }
|
||||
</style>
|
||||
+31
-29
@@ -1,23 +1,23 @@
|
||||
/* Sizes are in rem so the "UI scale" setting scales everything (1rem = 15px at 100%). */
|
||||
:root {
|
||||
--accent: #7c5cff;
|
||||
--accent-2: #22d3ee;
|
||||
--bg: #0b0d17;
|
||||
--surface: #141828;
|
||||
--text: #eef0ff;
|
||||
--muted: #8b90b3;
|
||||
--success: #34d399;
|
||||
--danger: #f43f5e;
|
||||
--warn: #fbbf24;
|
||||
--radius: 14px;
|
||||
--radius-sm: 9px;
|
||||
--font: 'Outfit Variable', system-ui, sans-serif;
|
||||
--accent: #6d6af5;
|
||||
--accent-2: #8b88f8;
|
||||
--bg: #0d0e12;
|
||||
--surface: #16181e;
|
||||
--text: #ecedf1;
|
||||
--muted: #8b8f9a;
|
||||
--success: #3fb97c;
|
||||
--danger: #e5484d;
|
||||
--warn: #e2a336;
|
||||
--radius: 10px;
|
||||
--radius-sm: 7px;
|
||||
--font: 'Inter Variable', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono Variable', ui-monospace, monospace;
|
||||
--line: color-mix(in srgb, var(--text) 8%, transparent);
|
||||
--line-strong: color-mix(in srgb, var(--text) 14%, transparent);
|
||||
--panel: color-mix(in srgb, var(--surface) 62%, transparent);
|
||||
--line: color-mix(in srgb, var(--text) 7%, transparent);
|
||||
--line-strong: color-mix(in srgb, var(--text) 12%, transparent);
|
||||
--panel: color-mix(in srgb, var(--surface) 78%, transparent);
|
||||
--panel-solid: var(--surface);
|
||||
--blur: blur(18px) saturate(1.3);
|
||||
--blur: blur(14px);
|
||||
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
font-size: 15px;
|
||||
color-scheme: dark;
|
||||
@@ -82,23 +82,22 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 560;
|
||||
font-size: 0.93rem;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.1s var(--ease), opacity 0.15s, box-shadow 0.2s;
|
||||
font-weight: 520;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
|
||||
button:active { transform: scale(0.98); }
|
||||
button:active { background: color-mix(in srgb, var(--text) 14%, transparent); }
|
||||
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
|
||||
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), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
|
||||
background: var(--accent);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 0.5rem 1.6rem -0.6rem var(--accent);
|
||||
}
|
||||
button.primary:hover { filter: brightness(1.1); }
|
||||
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
|
||||
button.ghost { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--text) 75%, transparent); }
|
||||
button.ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
|
||||
button.danger { color: color-mix(in srgb, var(--danger) 70%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
|
||||
@@ -122,7 +121,10 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
|
||||
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
|
||||
select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%; background-size: 0.33rem 0.33rem; background-repeat: no-repeat; }
|
||||
select option { background: var(--surface); }
|
||||
input[type='range'] { padding: 0; border: none; background: transparent; accent-color: var(--accent); }
|
||||
input[type='range'] { -webkit-appearance: none; appearance: none; padding: 0; height: 1.2rem; border: none; background: transparent; cursor: pointer; }
|
||||
input[type='range']::-webkit-slider-runnable-track { height: 0.25rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 12%, transparent); }
|
||||
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 0.95rem; height: 0.95rem; margin-top: -0.35rem; 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); }
|
||||
textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
|
||||
|
||||
@@ -130,15 +132,15 @@ label.field { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.
|
||||
.help { font-size: 0.8rem; color: var(--muted); font-weight: 400; line-height: 1.45; }
|
||||
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 620;
|
||||
padding: 0.28rem 0.7rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); backdrop-filter: var(--blur); white-space: nowrap;
|
||||
display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 520;
|
||||
padding: 0.22rem 0.6rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--text) 7%, transparent);
|
||||
color: color-mix(in srgb, var(--text) 80%, transparent); white-space: nowrap;
|
||||
}
|
||||
.chip.accent { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
|
||||
.chip.accent { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
||||
|
||||
.segmented { display: inline-flex; padding: 0.2rem; gap: 0.15rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line-strong); }
|
||||
.segmented button { border: none; background: transparent; padding: 0.45rem 0.9rem; font-size: 0.87rem; color: var(--muted); border-radius: calc(var(--radius-sm) - 2px); }
|
||||
.segmented button.active { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
|
||||
.segmented button.active { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
|
||||
|
||||
.col > .segmented { align-self: flex-start; }
|
||||
.row { display: flex; align-items: center; gap: 0.75rem; }
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
// Full-window backdrop: instance banner → admin background → animated gradient.
|
||||
// Full-window backdrop: instance banner → admin image/video → plain colour.
|
||||
import { abs, app, selectedInstance } from '../lib/store.svelte';
|
||||
|
||||
const b = $derived(app.manifest?.branding);
|
||||
@@ -7,44 +7,30 @@
|
||||
const image = $derived(abs(inst?.banner_url) ?? (b?.background.kind === 'image' ? abs(b.background.url) : null));
|
||||
const video = $derived(!inst?.banner_url && b?.background.kind === 'video' && app.settings?.background_video !== false && !app.running ? abs(b.background.url) : null);
|
||||
const blur = $derived(b?.background.blur ?? 0);
|
||||
const dim = $derived((b?.background.dim ?? 45) / 100);
|
||||
const dim = $derived((b?.background.dim ?? 55) / 100);
|
||||
let hidden = $state(false);
|
||||
</script>
|
||||
|
||||
<svelte:document onvisibilitychange={() => (hidden = document.hidden)} />
|
||||
|
||||
<div class="bg" aria-hidden="true">
|
||||
{#key image ?? video ?? 'gradient'}
|
||||
<div class="layer">
|
||||
{#if video && !hidden}
|
||||
<video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>
|
||||
{:else if image}
|
||||
<div class="img" style:background-image="url("{image}")" style:filter="blur({blur}px)"></div>
|
||||
{:else}
|
||||
<div class="gradient"><span class="o1"></span><span class="o2"></span><span class="o3"></span></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
<div class="shade" style:--dim={dim}></div>
|
||||
<div class="grain"></div>
|
||||
{#if video && !hidden}
|
||||
{#key video}<video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>{/key}
|
||||
<div class="shade" style:--dim={dim}></div>
|
||||
{:else if image}
|
||||
{#key image}<div class="img" style:background-image="url("{image}")" style:filter="blur({blur}px)"></div>{/key}
|
||||
<div class="shade" style:--dim={dim}></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
|
||||
.layer { position: absolute; inset: 0; animation: fade 0.6s ease; }
|
||||
video, .img { position: absolute; inset: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem); object-fit: cover; background-size: cover; background-position: center; }
|
||||
.gradient { position: absolute; inset: 0; }
|
||||
.gradient span { position: absolute; border-radius: 50%; filter: blur(5rem); opacity: 0.55; will-change: transform; }
|
||||
.o1 { width: 55vw; height: 55vw; right: -12vw; top: -22vw; background: var(--accent); animation: drift 22s ease-in-out infinite alternate; }
|
||||
.o2 { width: 45vw; height: 45vw; left: -10vw; bottom: -25vw; background: var(--accent-2); opacity: 0.3 !important; animation: drift 28s ease-in-out infinite alternate-reverse; }
|
||||
.o3 { width: 30vw; height: 30vw; left: 35vw; top: 30vh; background: color-mix(in srgb, var(--accent) 50%, var(--accent-2)); opacity: 0.18 !important; animation: drift 34s ease-in-out infinite alternate; }
|
||||
@keyframes drift { to { transform: translate(-6vw, 5vh) scale(1.15); } }
|
||||
video, .img { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 3rem); object-fit: cover; background-size: cover; background-position: center; animation: fade 0.4s ease; }
|
||||
/* Keep text readable: darken, strongest on the left where the title sits. */
|
||||
.shade {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--bg) calc(var(--dim) * 100% + 30%), transparent) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 45%, transparent 80%),
|
||||
linear-gradient(0deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, transparent 45%),
|
||||
color-mix(in srgb, var(--bg) calc(var(--dim) * 60%), transparent);
|
||||
linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 55%, color-mix(in srgb, var(--bg) calc(var(--dim) * 70%), transparent) 100%),
|
||||
linear-gradient(0deg, var(--bg) 0%, transparent 40%);
|
||||
}
|
||||
.grain { position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||||
</style>
|
||||
@@ -38,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 -1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); overflow: hidden; }
|
||||
.console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: var(--bg); border-color: var(--line-strong); animation: fade 0.15s ease; overflow: hidden; }
|
||||
header { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
|
||||
.search { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); }
|
||||
.search input { width: 10rem; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(6px); animation: fade 0.15s ease; }
|
||||
.modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.7); animation: pop 0.22s var(--ease); }
|
||||
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 70%, transparent); animation: fade 0.12s ease; }
|
||||
.modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.5); animation: pop 0.15s ease; }
|
||||
header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem 0; }
|
||||
.body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
|
||||
footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
|
||||
@keyframes pop { from { opacity: 0; transform: translateY(0.8rem) scale(0.97); } }
|
||||
@keyframes pop { from { opacity: 0; transform: translateY(0.3rem); } }
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Newspaper, Pin, ArrowUpRight } from '@lucide/svelte';
|
||||
import { Pin, ArrowUpRight } from '@lucide/svelte';
|
||||
import { abs } from '../lib/store.svelte';
|
||||
import { niceDate } from '../lib/format';
|
||||
import { openUrl } from '../lib/tauri';
|
||||
@@ -10,10 +10,10 @@
|
||||
</script>
|
||||
|
||||
<section class="news">
|
||||
<h4 class="head"><Newspaper size={14} /> Latest news</h4>
|
||||
<h4 class="head">News</h4>
|
||||
<div class="list">
|
||||
{#each sorted as n, i (n.id)}
|
||||
<article class="card glass" style:animation-delay="{i * 60}ms" class:link={!!n.link}>
|
||||
{#each sorted as n (n.id)}
|
||||
<article class="card glass" class:link={!!n.link}>
|
||||
{#if n.image_url}<img src={abs(n.image_url)} alt="" loading="lazy" />{/if}
|
||||
<div class="body">
|
||||
<div class="meta">
|
||||
@@ -35,16 +35,16 @@
|
||||
|
||||
<style>
|
||||
.news { display: flex; flex-direction: column; min-height: 0; gap: 0.7rem; }
|
||||
.head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 750; padding-left: 0.2rem; }
|
||||
.list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; mask-image: linear-gradient(180deg, black 85%, transparent); padding-bottom: 2rem; }
|
||||
.card { overflow: hidden; flex-shrink: 0; animation: fade-up 0.35s var(--ease) both; transition: border-color 0.2s, transform 0.2s var(--ease); }
|
||||
.head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--muted); font-weight: 560; padding-left: 0.1rem; }
|
||||
.list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; padding-bottom: 1rem; }
|
||||
.card { overflow: hidden; flex-shrink: 0; background: var(--surface); transition: border-color 0.15s; }
|
||||
.card:hover { border-color: var(--line-strong); }
|
||||
.card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
|
||||
.body { padding: 0.85rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.meta { display: flex; align-items: center; gap: 0.4rem; color: var(--accent); }
|
||||
.tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
|
||||
h3 { font-size: 1rem; font-weight: 680; line-height: 1.3; }
|
||||
p { font-size: 0.84rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 68%, transparent); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.meta { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
|
||||
.tag { font-size: 0.72rem; font-weight: 560; color: var(--accent); }
|
||||
h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
|
||||
p { font-size: 0.83rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.more { align-self: flex-start; padding-left: 0; color: var(--accent); margin-top: 0.1rem; }
|
||||
.more:hover { background: transparent; color: var(--text); }
|
||||
</style>
|
||||
@@ -40,13 +40,13 @@
|
||||
{:else if running}
|
||||
<button class="play running" onclick={kill} title="Force-close Minecraft">
|
||||
<span class="pulse"></span>
|
||||
<span class="lbl">PLAYING</span>
|
||||
<span class="lbl">Playing</span>
|
||||
<span class="stop"><Square size={13} fill="currentColor" /> Stop</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="play" onclick={() => play(inst.id)} disabled={otherRunning || noAccount} title={noAccount ? 'Sign in first' : otherRunning ? 'Another instance is running' : 'Ctrl + Enter'}>
|
||||
<Play size={22} fill="currentColor" />
|
||||
<span class="lbl">PLAY</span>
|
||||
<Play size={18} fill="currentColor" />
|
||||
<span class="lbl">Play</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if mine && l.state === 'error'}
|
||||
@@ -59,33 +59,28 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
|
||||
.wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
|
||||
.play {
|
||||
position: relative; overflow: hidden; height: 4.2rem; min-width: 19rem; padding: 0 2.6rem; border: none; border-radius: var(--radius);
|
||||
background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: white; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.12em;
|
||||
box-shadow: 0 1rem 2.6rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.25); gap: 0.8rem;
|
||||
transition: transform 0.2s var(--ease), box-shadow 0.25s, filter 0.2s;
|
||||
height: 3.3rem; min-width: 14rem; padding: 0 2rem; border: none; border-radius: var(--radius);
|
||||
background: var(--accent); color: white; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; gap: 0.65rem;
|
||||
}
|
||||
.play::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s var(--ease); }
|
||||
.play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1.4rem 3rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.3); filter: brightness(1.05); }
|
||||
.play:hover:not(:disabled)::before { transform: translateX(100%); }
|
||||
.play:active:not(:disabled) { transform: translateY(0) scale(0.985); }
|
||||
.play:disabled { filter: grayscale(0.7) brightness(0.7); }
|
||||
.play:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); }
|
||||
.play:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, black); }
|
||||
.play:disabled { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
|
||||
.lbl { position: relative; }
|
||||
.running { background: linear-gradient(120deg, color-mix(in srgb, var(--success) 70%, var(--bg)), color-mix(in srgb, var(--success) 45%, var(--accent-2))); box-shadow: 0 1rem 2.6rem -1rem var(--success); padding: 0 1.6rem 0 2rem; }
|
||||
.pulse { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: white; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: ping 1.6s infinite; }
|
||||
@keyframes ping { 70% { box-shadow: 0 0 0 0.7rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
|
||||
.stop { font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 99rem; background: rgba(0, 0, 0, 0.2); opacity: 0.85; }
|
||||
.running:hover .stop { background: rgba(0, 0, 0, 0.35); opacity: 1; }
|
||||
.progress { width: 28rem; max-width: 100%; padding: 0.95rem 1.1rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; animation: fade-up 0.25s var(--ease); }
|
||||
.running { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); padding: 0 0.6rem 0 1.4rem; }
|
||||
.running:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 22%, var(--surface)); }
|
||||
.pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); }
|
||||
.stop { font-size: 0.8rem; font-weight: 520; letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 8%, transparent); color: color-mix(in srgb, var(--text) 80%, transparent); margin-left: 0.6rem; }
|
||||
.progress { width: 26rem; max-width: 100%; padding: 0.85rem 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--surface); }
|
||||
.top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
|
||||
.stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 620; font-size: 0.95rem; }
|
||||
.bar { height: 0.5rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; position: relative; }
|
||||
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s linear; box-shadow: 0 0 1rem var(--accent); }
|
||||
.bar.indeterminate span { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
|
||||
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
|
||||
.stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 560; font-size: 0.9rem; }
|
||||
.bar { height: 0.3rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; position: relative; }
|
||||
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.2s linear; }
|
||||
.bar.indeterminate span { width: 30% !important; animation: slide 1.3s ease-in-out infinite; }
|
||||
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
|
||||
.meta { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
|
||||
.error { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; max-width: 34rem; font-size: 0.87rem; border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 14%, var(--panel)); line-height: 1.4; }
|
||||
.error { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; max-width: 34rem; font-size: 0.85rem; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); line-height: 1.4; }
|
||||
.error :global(svg) { color: var(--danger); flex-shrink: 0; }
|
||||
.error span { flex: 1; }
|
||||
</style>
|
||||
@@ -59,30 +59,31 @@
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.rail { width: 4.8rem; margin: 0 0 0.8rem 0.8rem; display: flex; flex-direction: column; align-items: center; padding: 0.8rem 0; gap: 0.5rem; border-radius: calc(var(--radius) + 4px); position: relative; z-index: 20; flex-shrink: 0; }
|
||||
.rail { width: 4.4rem; display: flex; flex-direction: column; align-items: center; padding: 0.6rem 0 0.8rem; gap: 0.5rem; border: none; border-right: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); position: relative; z-index: 20; flex-shrink: 0; }
|
||||
.list { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; overflow-y: auto; overflow-x: visible; flex: 1; width: 100%; padding: 0.2rem 0; scrollbar-width: none; }
|
||||
.inst {
|
||||
width: 3.1rem; height: 3.1rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
|
||||
background: color-mix(in srgb, var(--surface) 80%, var(--text) 6%); border-color: var(--line); font-weight: 750; font-size: 0.95rem;
|
||||
transition: transform 0.2s var(--ease), box-shadow 0.2s, border-radius 0.2s;
|
||||
width: 2.9rem; height: 2.9rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
|
||||
background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; font-weight: 600; font-size: 0.85rem;
|
||||
color: color-mix(in srgb, var(--text) 75%, transparent);
|
||||
}
|
||||
.inst img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
|
||||
.inst:hover { transform: translateY(-1px); border-radius: calc(var(--radius) * 0.75); }
|
||||
.inst.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0.5rem 1.5rem -0.5rem var(--accent); color: white; }
|
||||
.inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); box-shadow: 0 0 0.6rem var(--success); }
|
||||
.tip { position: fixed; left: 6.4rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4); z-index: 50; color: var(--text); }
|
||||
.inst:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
|
||||
.inst.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
|
||||
.inst.active::before { content: ''; position: absolute; left: -0.75rem; top: 0.7rem; bottom: 0.7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
|
||||
.inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
|
||||
.tip { position: fixed; left: 5rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; color: var(--text); }
|
||||
.inst:hover .tip { opacity: 1; }
|
||||
.bottom { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
|
||||
.big { width: 2.8rem; height: 2.8rem; position: relative; }
|
||||
.big.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
||||
.dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0.5rem var(--accent-2); }
|
||||
.big { width: 2.6rem; height: 2.6rem; position: relative; }
|
||||
.big.on { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
|
||||
.dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
|
||||
.account { position: relative; margin-top: 0.3rem; }
|
||||
.me { padding: 0.15rem; border-radius: 30%; background: transparent; border-color: transparent; }
|
||||
.me:hover { border-color: var(--accent); background: transparent; }
|
||||
.menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: color-mix(in srgb, var(--surface) 99%, var(--text) 1%); backdrop-filter: none; box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.7); animation: fade-up 0.18s var(--ease); z-index: 60; }
|
||||
.me:hover { border-color: var(--line-strong); background: transparent; }
|
||||
.menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: var(--surface); backdrop-filter: none; border: 1px solid var(--line-strong); box-shadow: 0 0.8rem 2rem -1rem rgba(0, 0, 0, 0.6); animation: fade 0.12s ease; z-index: 60; }
|
||||
.head { padding: 0.2rem 0.5rem 0.4rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
|
||||
.acc { display: flex; align-items: center; gap: 0.2rem; border-radius: var(--radius-sm); }
|
||||
.acc.current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
||||
.acc.current { background: color-mix(in srgb, var(--text) 6%, transparent); }
|
||||
.pick { flex: 1; justify-content: flex-start; background: transparent; border-color: transparent; padding: 0.45rem 0.5rem; gap: 0.65rem; min-width: 0; }
|
||||
.pick :global(svg) { color: var(--accent); }
|
||||
.who { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
|
||||
|
||||
@@ -61,26 +61,25 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.server { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem 0.7rem 0.7rem; min-width: 20rem; max-width: 30rem; }
|
||||
.fav { width: 2.6rem; height: 2.6rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
|
||||
.server { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; min-width: 18rem; max-width: 28rem; height: 2.75rem; background: var(--surface); }
|
||||
.fav { width: 1.8rem; height: 1.8rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
|
||||
.ph { background: color-mix(in srgb, var(--text) 8%, transparent); }
|
||||
.ph.on { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent-2) 60%, transparent)); }
|
||||
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
|
||||
.ph.on { background: color-mix(in srgb, var(--accent) 30%, transparent); }
|
||||
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
|
||||
.name { gap: 0.5rem; }
|
||||
.name strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.state { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.name strong { font-size: 0.85rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.state { font-size: 0.72rem; font-weight: 520; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.state::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
|
||||
.state.online { color: var(--success); }
|
||||
.state.online::before { box-shadow: 0 0 0.5rem var(--success); }
|
||||
.state.off { color: var(--danger); }
|
||||
.motd { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
|
||||
.state.off { color: var(--danger); }
|
||||
.motd { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
|
||||
.motd .b { font-weight: 700; }
|
||||
.motd .i { font-style: italic; }
|
||||
.addr { all: unset; cursor: pointer; font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); }
|
||||
.addr:hover { color: var(--text); }
|
||||
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
|
||||
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
|
||||
.players { display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.players :global(svg) { color: var(--success); }
|
||||
.players :global(svg) { color: var(--muted); }
|
||||
.ping { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.72rem; }
|
||||
.sig { display: inline-flex; align-items: flex-end; gap: 0.1rem; height: 0.7rem; }
|
||||
.sig i { width: 0.18rem; background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 1px; }
|
||||
|
||||
@@ -147,12 +147,12 @@
|
||||
.inp { position: relative; }
|
||||
.inp .ic { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
|
||||
.inp input { padding-left: 2.4rem; }
|
||||
.big { padding: 0.85rem; font-size: 1rem; }
|
||||
.ms { background: #2f2f2f; box-shadow: none; }
|
||||
.ms:hover { background: #3a3a3a; }
|
||||
.big { padding: 0.75rem; font-size: 0.95rem; }
|
||||
.ms { background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-strong); color: var(--text); }
|
||||
.ms:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
|
||||
.switch { align-self: center; color: var(--muted); }
|
||||
.code { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 0.5rem 0; }
|
||||
.usercode { font-family: var(--mono); font-size: 1.7rem; letter-spacing: 0.15em; padding: 0.7rem 1.4rem; font-weight: 700; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
||||
.usercode { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.12em; padding: 0.6rem 1.2rem; font-weight: 600; }
|
||||
.wait { gap: 0.4rem; }
|
||||
.error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
|
||||
.notice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 12%, transparent); }
|
||||
|
||||
@@ -25,9 +25,10 @@
|
||||
|
||||
<style>
|
||||
header { height: 2.6rem; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; position: relative; z-index: 30; flex-shrink: 0; }
|
||||
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.9rem; pointer-events: none; }
|
||||
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.82rem; letter-spacing: 0.08em; pointer-events: none; }
|
||||
.brand img { height: 1.3rem; border-radius: 0.3rem; }
|
||||
.mark { width: 0.95rem; height: 0.95rem; border-radius: 0.3rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0.8rem var(--accent); }
|
||||
.mark { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--accent); position: relative; }
|
||||
.mark::after { content: ''; position: absolute; inset: 0.17rem; border-radius: 50%; background: var(--accent); }
|
||||
.offline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 0.15rem 0.5rem; border-radius: 99rem; pointer-events: auto; }
|
||||
.controls { display: flex; height: 100%; }
|
||||
.ctl { height: 100%; width: 3rem; border: none; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--text) 70%, transparent); padding: 0; }
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<style>
|
||||
.toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: 26rem; }
|
||||
.toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); }
|
||||
.toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 0.6rem 1.5rem -0.8rem rgba(0, 0, 0, 0.5); animation: fade 0.15s ease; }
|
||||
.toast :global(svg) { flex-shrink: 0; margin-top: 0.1rem; }
|
||||
.ok :global(svg) { color: var(--success); }
|
||||
.error :global(svg) { color: var(--danger); }
|
||||
|
||||
@@ -39,16 +39,16 @@ const manifest: Manifest = {
|
||||
user: null,
|
||||
auth: { panel_accounts: true, registration: 'approval', microsoft: true, microsoft_client_id: 'demo', offline_local: true },
|
||||
branding: {
|
||||
name: 'ScopeNet',
|
||||
name: 'SCOPENET',
|
||||
tagline: 'Your worlds, one click away.',
|
||||
logo_url: null,
|
||||
icon_url: null,
|
||||
background: { kind: 'gradient', url: null, blur: 0, dim: 45 },
|
||||
colors: { accent: '#7c5cff', accent_2: '#22d3ee', background: '#0b0d17', surface: '#141828', text: '#eef0ff', muted: '#8b90b3', success: '#34d399', danger: '#f43f5e' },
|
||||
font: 'Outfit',
|
||||
radius: 14,
|
||||
glass: true,
|
||||
version_label: 'ScopeNet',
|
||||
background: { kind: 'gradient', url: null, blur: 0, dim: 55 },
|
||||
colors: { accent: '#6d6af5', accent_2: '#8b88f8', background: '#0d0e12', surface: '#16181e', text: '#ecedf1', muted: '#8b8f9a', success: '#3fb97c', danger: '#e5484d' },
|
||||
font: 'Inter',
|
||||
radius: 10,
|
||||
glass: false,
|
||||
version_label: 'SCOPENET',
|
||||
news: [
|
||||
{ id: '1', title: 'Season 4 is live!', body: 'A brand new world with custom terrain, player shops and weekly events. Join now and claim your spot before the land rush.', image_url: null, link: 'https://example.com', date: '2026-09-26', pinned: true, tag: 'Update' },
|
||||
{ id: '2', title: 'Build contest: Autumn Castles', body: 'Submit your best castle build on the Creative server by October 10th. Top three win VIP for a month.', image_url: null, link: null, date: '2026-09-21', pinned: false, tag: 'Event' },
|
||||
@@ -63,7 +63,7 @@ const manifest: Manifest = {
|
||||
custom_css: '',
|
||||
},
|
||||
instances: [
|
||||
{ id: 'survival-smp', name: 'Survival SMP', description: 'Our main survival world — season 4. Claims, shops & weekend events.', icon_url: null, banner_url: null, mc_version: '1.21.1', loader: 'fabric', loader_version: '0.16.9', revision: 3, server: { name: 'ScopeNet SMP', address: 'play.scopenet.gg', port: 25565, auto_join: true, inject: true }, memory: { min_mb: 2048, max_mb: 6144 }, jvm_args: '', featured: true, source_label: 'Modrinth · Fabulously Optimized 6.2', file_count: 48, total_size: 184_000_000 },
|
||||
{ id: 'survival-smp', name: 'Survival SMP', description: 'Our main survival world — season 4. Claims, shops & weekend events.', icon_url: null, banner_url: null, mc_version: '1.21.1', loader: 'fabric', loader_version: '0.16.9', revision: 3, server: { name: 'SCOPENET SMP', address: 'play.scopenet.gg', port: 25565, auto_join: true, inject: true }, memory: { min_mb: 2048, max_mb: 6144 }, jvm_args: '', featured: true, source_label: 'Modrinth · Fabulously Optimized 6.2', file_count: 48, total_size: 184_000_000 },
|
||||
{ id: 'creative', name: 'Creative Build', description: 'Plots, WorldEdit and weekly build contests.', icon_url: null, banner_url: null, mc_version: '1.20.1', loader: 'vanilla', loader_version: null, revision: 1, server: { name: 'Creative', address: 'creative.scopenet.gg', port: 25565, auto_join: false, inject: true }, memory: { min_mb: 1024, max_mb: 4096 }, jvm_args: '', featured: false, source_label: 'Minecraft 1.20.1', file_count: 0, total_size: 0 },
|
||||
{ id: 'modded', name: 'Create: Above & Beyond', description: 'Factory building with Create and friends.', icon_url: null, banner_url: null, mc_version: '1.20.1', loader: 'forge', loader_version: '1.20.1-47.3.0', revision: 2, server: null, memory: { min_mb: 4096, max_mb: 8192 }, jvm_args: '', featured: false, source_label: 'CurseForge · Create: Above & Beyond 1.4', file_count: 212, total_size: 612_000_000 },
|
||||
],
|
||||
@@ -152,7 +152,7 @@ export async function mockInvoke(cmd: string, args: Record<string, any>): Promis
|
||||
return null;
|
||||
case 'ping_server':
|
||||
await sleep(200);
|
||||
return { online: true, version: 'Paper 1.21.1', players_online: 42, players_max: 100, sample: ['Notch', 'jeb_', 'Dinnerbone'], motd: '§b§lScopeNet §r§7» §fSeason 4 is live!', favicon: null, latency_ms: 23 };
|
||||
return { online: true, version: 'Paper 1.21.1', players_online: 42, players_max: 100, sample: ['Notch', 'jeb_', 'Dinnerbone'], motd: '§b§lSCOPENET §r§7» §fSeason 4 is live!', favicon: null, latency_ms: 23 };
|
||||
case 'instance_local':
|
||||
return { installed: args.instanceId !== 'modded', revision: 3, size: 1_240_000_000 };
|
||||
case 'storage_info':
|
||||
|
||||
@@ -62,20 +62,20 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home { position: relative; height: 100%; display: grid; grid-template-columns: 1fr minmax(17rem, 23rem); grid-template-rows: 1fr auto; gap: 1.5rem 2rem; padding: 1.5rem 1.8rem 1.8rem 2.2rem; }
|
||||
.hero { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: 0.9rem; animation: fade-up 0.45s var(--ease); max-width: 40rem; }
|
||||
.greet { font-size: 0.95rem; }
|
||||
.greet strong { color: var(--text); font-weight: 600; }
|
||||
.home { position: relative; height: 100%; display: grid; grid-template-columns: 1fr minmax(17rem, 22rem); grid-template-rows: 1fr auto; gap: 1.5rem 2.5rem; padding: 2rem 2rem 2rem 2.5rem; }
|
||||
.hero { grid-column: 1; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: 0.75rem; animation: fade 0.3s ease; max-width: 38rem; padding-bottom: 0.5rem; }
|
||||
.greet { font-size: 0.88rem; }
|
||||
.greet strong { color: var(--text); font-weight: 560; }
|
||||
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
|
||||
h1 { font-size: clamp(2.8rem, 6.2vw, 4.8rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-shadow: 0 0.2rem 2rem color-mix(in srgb, var(--bg) 60%, transparent); }
|
||||
.desc { font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 72%, transparent); max-width: 32rem; }
|
||||
.actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.9rem; animation: fade-up 0.5s var(--ease) 0.05s both; }
|
||||
h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
|
||||
.desc { font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 32rem; }
|
||||
.actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease both; }
|
||||
.tools { flex-wrap: wrap; gap: 0.6rem; }
|
||||
.tool { width: 3.1rem; height: 3.1rem; padding: 0; border-radius: var(--radius); color: color-mix(in srgb, var(--text) 80%, transparent); }
|
||||
.tool.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
|
||||
.side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 0; animation: fade-up 0.5s var(--ease) 0.1s both; }
|
||||
.tool { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius); color: color-mix(in srgb, var(--text) 75%, transparent); background: var(--surface); }
|
||||
.tool.on { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
|
||||
.side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 0; animation: fade 0.3s ease both; }
|
||||
.links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
|
||||
.link { padding: 0.55rem 0.8rem; font-size: 0.84rem; border-radius: var(--radius-sm); flex: 1 1 auto; }
|
||||
.link:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); }
|
||||
.link { padding: 0.5rem 0.75rem; font-size: 0.82rem; border-radius: var(--radius-sm); flex: 1 1 auto; background: var(--surface); color: color-mix(in srgb, var(--text) 80%, transparent); }
|
||||
.link:hover { border-color: var(--line-strong); color: var(--text); }
|
||||
@media (max-width: 1060px) { .home { grid-template-columns: 1fr 16rem; } .link span { display: none; } }
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<div class="login">
|
||||
<section class="brand">
|
||||
{#if b?.logo_url}<img src={abs(b.logo_url)} alt="" class="logo" />{:else}<div class="mark"></div>{/if}
|
||||
{#if b?.logo_url}<img src={abs(b.logo_url)} alt="" class="logo" />{/if}
|
||||
<h1>{b?.name}</h1>
|
||||
<p>{b?.tagline}</p>
|
||||
</section>
|
||||
@@ -19,15 +19,13 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login { height: 100%; display: grid; grid-template-columns: 1fr 25rem; align-items: center; gap: 3rem; padding: 2rem 4rem 3rem; }
|
||||
.brand { display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.5s var(--ease); }
|
||||
.logo { width: 5rem; height: 5rem; object-fit: contain; }
|
||||
.mark { width: 4.2rem; height: 4.2rem; border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 1rem 3rem -1rem var(--accent); position: relative; }
|
||||
.mark::after { content: ''; position: absolute; inset: 1.1rem; border-radius: 50%; border: 0.35rem solid rgba(255, 255, 255, 0.9); }
|
||||
h1 { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
|
||||
.brand p { font-size: 1.15rem; color: color-mix(in srgb, var(--text) 70%, transparent); max-width: 26rem; line-height: 1.5; }
|
||||
.card { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 2rem 5rem -2rem rgba(0, 0, 0, 0.6); animation: fade-up 0.5s var(--ease) 0.08s both; }
|
||||
.card h2 { font-size: 1.4rem; }
|
||||
.login { height: 100%; display: grid; grid-template-columns: 1fr 23rem; align-items: center; gap: 4rem; padding: 2rem 4.5rem 3rem; }
|
||||
.brand { display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease; }
|
||||
.logo { width: 3.5rem; height: 3.5rem; object-fit: contain; margin-bottom: 0.5rem; }
|
||||
h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; }
|
||||
.brand p { font-size: 1rem; color: var(--muted); max-width: 26rem; line-height: 1.55; }
|
||||
.card { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface); animation: fade 0.3s ease both; }
|
||||
.card h2 { font-size: 1.2rem; font-weight: 600; }
|
||||
.card > :global(.signin) { margin-top: 0.8rem; }
|
||||
@media (max-width: 900px) { .login { grid-template-columns: 1fr; padding: 2rem; } .brand { display: none; } }
|
||||
</style>
|
||||
@@ -343,7 +343,7 @@
|
||||
<div class="card glass col about">
|
||||
<div class="row">
|
||||
<div class="mark"></div>
|
||||
<div><strong class="big">{b?.name ?? 'ScopeNet'} Launcher</strong><p class="muted small">Version {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}</p></div>
|
||||
<div><strong class="big">{b?.name ?? 'SCOPENET'} Launcher</strong><p class="muted small">Version {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}</p></div>
|
||||
</div>
|
||||
{#if app.update}
|
||||
<div class="update">
|
||||
@@ -365,27 +365,27 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.settings { height: 100%; display: flex; gap: 1rem; padding: 0 1rem 0.8rem 1rem; min-height: 0; }
|
||||
.tabs { width: 14.5rem; flex-shrink: 0; padding: 1.1rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; border-radius: calc(var(--radius) + 4px); }
|
||||
.tabs h2 { font-size: 1.15rem; padding: 0 0.7rem 0.8rem; }
|
||||
.tab { justify-content: flex-start; gap: 0.75rem; background: transparent; border-color: transparent; color: color-mix(in srgb, var(--text) 72%, transparent); padding: 0.62rem 0.75rem; font-weight: 520; position: relative; }
|
||||
.settings { height: 100%; display: flex; min-height: 0; }
|
||||
.tabs { width: 13.5rem; flex-shrink: 0; padding: 1.2rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; border: none; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
|
||||
.tabs h2 { font-size: 0.8rem; font-weight: 560; color: var(--muted); padding: 0 0.75rem 0.7rem; }
|
||||
.tab { justify-content: flex-start; gap: 0.7rem; background: transparent; border-color: transparent; color: var(--muted); padding: 0.55rem 0.75rem; font-weight: 500; position: relative; }
|
||||
.tab:hover { color: var(--text); }
|
||||
.tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
|
||||
.tab.active :global(svg) { color: var(--accent); }
|
||||
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-2); margin-left: auto; box-shadow: 0 0 0.5rem var(--accent-2); }
|
||||
.content { flex: 1; overflow-y: auto; min-width: 0; padding: 0.4rem 0.6rem 2rem 0.6rem; }
|
||||
.pane { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.3s var(--ease); }
|
||||
h1 { font-size: 1.8rem; font-weight: 750; margin-top: 0.4rem; }
|
||||
.lead { color: var(--muted); margin-top: -0.6rem; line-height: 1.5; }
|
||||
.card { padding: 1.1rem 1.2rem; }
|
||||
.tab.active { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
|
||||
.tab.active :global(svg) { color: var(--text); }
|
||||
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); margin-left: auto; }
|
||||
.content { flex: 1; overflow-y: auto; min-width: 0; padding: 1.2rem 2rem 2.5rem; }
|
||||
.pane { max-width: 42rem; display: flex; flex-direction: column; gap: 0.9rem; animation: fade 0.2s ease; }
|
||||
h1 { font-size: 1.4rem; font-weight: 600; }
|
||||
.lead { color: var(--muted); margin-top: -0.5rem; line-height: 1.5; font-size: 0.9rem; margin-bottom: 0.3rem; }
|
||||
.card { padding: 1rem 1.1rem; background: var(--surface); }
|
||||
.card.col { gap: 1rem; }
|
||||
.list { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
|
||||
.acc { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); }
|
||||
.acc.current { background: color-mix(in srgb, var(--accent) 10%, transparent); }
|
||||
.acc.current { background: color-mix(in srgb, var(--text) 5%, transparent); }
|
||||
.who { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
|
||||
.active-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 650; color: var(--accent); padding: 0.3rem 0.6rem; }
|
||||
.add { border-style: dashed; background: transparent; margin: 0.2rem; }
|
||||
.val { color: var(--accent); font-variant-numeric: tabular-nums; }
|
||||
.val { color: var(--text); font-weight: 560; font-variant-numeric: tabular-nums; }
|
||||
.scale { display: flex; justify-content: space-between; }
|
||||
.warn { color: var(--warn); }
|
||||
.link-btn { align-self: flex-start; }
|
||||
@@ -397,32 +397,32 @@
|
||||
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
|
||||
.preset { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.9rem; white-space: normal; text-align: left; background: color-mix(in srgb, var(--bg) 50%, transparent); }
|
||||
.preset :global(svg) { color: var(--muted); margin-bottom: 0.2rem; }
|
||||
.preset.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
||||
.preset.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
||||
.preset.active :global(svg) { color: var(--accent); }
|
||||
.binds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; transition: opacity 0.2s; }
|
||||
.binds.disabled { opacity: 0.55; }
|
||||
.group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; }
|
||||
.group { font-size: 0.8rem; font-weight: 560; color: var(--muted); margin-bottom: 0.4rem; }
|
||||
.bind { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.88rem; }
|
||||
.key { min-width: 7.5rem; padding: 0.4rem 0.7rem; font-size: 0.82rem; font-family: var(--mono); font-weight: 600; background: color-mix(in srgb, var(--bg) 60%, transparent); }
|
||||
.key.changed { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
|
||||
.key.conflict { border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); }
|
||||
.key.capturing { border-color: var(--accent); color: var(--accent); animation: glow 1s ease-in-out infinite alternate; font-family: var(--font); }
|
||||
@keyframes glow { to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } }
|
||||
.key.capturing { border-color: var(--accent); color: var(--accent); font-family: var(--font); }
|
||||
kbd { font-family: var(--mono); font-size: 0.72rem; padding: 0.1rem 0.35rem; border-radius: 0.3rem; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--text) 6%, transparent); }
|
||||
.swatches { display: flex; gap: 0.55rem; flex-wrap: wrap; }
|
||||
.swatch { width: 2.3rem; height: 2.3rem; border-radius: 50%; padding: 0; border: 2px solid transparent; color: white; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
|
||||
.swatch.on { border-color: var(--text); }
|
||||
.picker { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; overflow: hidden; cursor: pointer; display: block; }
|
||||
.picker input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
|
||||
.big { font-size: 1.3rem; }
|
||||
.big { font-size: 1.15rem; font-weight: 600; }
|
||||
.usage { display: flex; height: 0.8rem; border-radius: 99rem; overflow: hidden; gap: 2px; background: color-mix(in srgb, var(--text) 8%, transparent); }
|
||||
.usage span { min-width: 2px; }
|
||||
.u1 { background: var(--accent); }
|
||||
.u2 { background: var(--accent-2); }
|
||||
.u2 { background: color-mix(in srgb, var(--accent) 50%, var(--text)); }
|
||||
.u3 { background: var(--success); }
|
||||
.legend { display: flex; gap: 1.2rem; color: var(--muted); }
|
||||
.legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 0.2rem; margin-right: 0.3rem; vertical-align: -0.05rem; }
|
||||
.about .mark { width: 3.2rem; height: 3.2rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex-shrink: 0; }
|
||||
.about .mark { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 3px solid var(--accent); flex-shrink: 0; position: relative; }
|
||||
.about .mark::after { content: ''; position: absolute; inset: 0.55rem; border-radius: 50%; background: var(--accent); }
|
||||
.update { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
|
||||
.update :global(svg) { color: var(--accent); }
|
||||
.notes { margin: 0; white-space: pre-wrap; font-family: var(--font); font-size: 0.84rem; color: var(--muted); max-height: 12rem; overflow: auto; }
|
||||
|
||||
@@ -36,9 +36,9 @@
|
||||
|
||||
<style>
|
||||
.center { height: 100%; display: grid; place-items: center; padding: 2rem; }
|
||||
.card { width: 100%; max-width: 28rem; padding: 2.2rem; display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.4s var(--ease); box-shadow: 0 2rem 5rem -2rem rgba(0, 0, 0, 0.7); }
|
||||
.icon { width: 3.4rem; height: 3.4rem; border-radius: var(--radius); display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; box-shadow: 0 0.8rem 2rem -0.8rem var(--accent); }
|
||||
h1 { font-size: 1.6rem; }
|
||||
.card { width: 100%; max-width: 27rem; padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; background: var(--surface); animation: fade 0.3s ease; }
|
||||
.icon { width: 2.8rem; height: 2.8rem; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
|
||||
h1 { font-size: 1.35rem; font-weight: 600; }
|
||||
p { line-height: 1.5; font-size: 0.93rem; }
|
||||
.big { padding: 0.85rem; font-size: 1rem; }
|
||||
.error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); }
|
||||
|
||||
Reference in new issue
Block a user