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
@@ -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; }
|
||||
|
||||
Reference in new issue
Block a user