mirror of
https://gitcode.com/JianFeeeee/ModelRouter.git
synced 2026-09-20 00:48:00 +00:00
599 lines
11 KiB
CSS
599 lines
11 KiB
CSS
/* =====================================================================
|
|
ModelRouter Desktop GUI — Clash-Verge-style shell
|
|
Content area = full-screen iframe embedding the real WebUI 1:1.
|
|
Palette mirrors the WebUI (sakura/frost/glassmorphism).
|
|
===================================================================== */
|
|
:root {
|
|
--primary: #ff7fac;
|
|
--primary-h: #f33b7c;
|
|
--primary-50: #fff0f5;
|
|
--primary-100: #ffe4e9;
|
|
--primary-200: #ffcdd9;
|
|
--primary-300: #ff9eb5;
|
|
--primary-400: #ff7fac;
|
|
--primary-500: #f33b7c;
|
|
--secondary: #88c0d0;
|
|
--secondary-h: #4c8dae;
|
|
--danger: #db3694;
|
|
--ok: #17a964;
|
|
--warn: #b7791f;
|
|
--bg-s1: #eef2ff;
|
|
--bg-s2: #ffffff;
|
|
--bg-s3: #ffe9f0;
|
|
--card: rgba(255, 255, 255, 0.62);
|
|
--card-solid: #fff;
|
|
--line: rgba(255, 127, 172, 0.18);
|
|
--line-strong: rgba(120, 90, 150, 0.22);
|
|
--fg: #3b3350;
|
|
--muted: #7c7a95;
|
|
--blob1: rgba(255, 127, 172, 0.45);
|
|
--blob2: rgba(136, 192, 208, 0.42);
|
|
--blob3: rgba(244, 114, 182, 0.3);
|
|
--sh-sm: 0 1px 2px rgba(70, 50, 110, 0.06);
|
|
--sh-md: 0 6px 20px rgba(120, 90, 160, 0.13);
|
|
--sh-lg: 0 18px 46px rgba(120, 90, 160, 0.22);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
html[data-theme="dark"] {
|
|
--primary: #f54180;
|
|
--primary-h: #f871a0;
|
|
--primary-50: #310413;
|
|
--primary-100: #610726;
|
|
--primary-200: #920b3a;
|
|
--primary-300: #c20e4d;
|
|
--primary-400: #f31260;
|
|
--primary-500: #f54180;
|
|
--secondary: #5e9fbf;
|
|
--secondary-h: #88c0d0;
|
|
--danger: #db3694;
|
|
--ok: #4f7cff;
|
|
--warn: #e0b25c;
|
|
--bg-s1: #14121c;
|
|
--bg-s2: #1a1824;
|
|
--bg-s3: #221a28;
|
|
--card: rgba(34, 31, 50, 0.55);
|
|
--card-solid: #241f38;
|
|
--line: rgba(255, 127, 172, 0.16);
|
|
--line-strong: rgba(200, 180, 235, 0.18);
|
|
--fg: #ece6f5;
|
|
--muted: #a09db8;
|
|
--blob1: rgba(255, 79, 160, 0.32);
|
|
--blob2: rgba(100, 180, 215, 0.26);
|
|
--blob3: rgba(219, 54, 148, 0.22);
|
|
--sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
--sh-md: 0 8px 26px rgba(0, 0, 0, 0.45);
|
|
--sh-lg: 0 20px 52px rgba(0, 0, 0, 0.55);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
color: var(--fg);
|
|
overflow: hidden;
|
|
font:
|
|
13px / 1.5 "Quicksand",
|
|
"Nunito",
|
|
"Inter",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
"PingFang SC",
|
|
"Microsoft YaHei",
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
background: var(--bg-s1);
|
|
}
|
|
button {
|
|
font: inherit;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
input {
|
|
font: inherit;
|
|
color: var(--fg);
|
|
}
|
|
::selection {
|
|
background: #ffcdba;
|
|
color: #fff;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 182, 193, 0.45);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* animated gradient-mesh background */
|
|
#bgfx {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -10;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, var(--bg-s1), var(--bg-s2), var(--bg-s3));
|
|
}
|
|
#bgfx i {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(64px);
|
|
will-change: transform;
|
|
opacity: 0.6;
|
|
}
|
|
#bgfx .b1 {
|
|
top: -10%;
|
|
left: -8%;
|
|
width: 560px;
|
|
height: 560px;
|
|
background: var(--blob1);
|
|
animation: drift1 30s ease-in-out infinite alternate;
|
|
}
|
|
#bgfx .b2 {
|
|
top: 16%;
|
|
right: -10%;
|
|
width: 440px;
|
|
height: 440px;
|
|
background: var(--blob2);
|
|
animation: drift2 36s ease-in-out infinite alternate;
|
|
}
|
|
#bgfx .b3 {
|
|
bottom: -12%;
|
|
left: 24%;
|
|
width: 620px;
|
|
height: 620px;
|
|
background: var(--blob3);
|
|
animation: drift3 42s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes drift1 {
|
|
from {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
to {
|
|
transform: translate(30px, -20px) scale(1.05);
|
|
}
|
|
}
|
|
@keyframes drift2 {
|
|
from {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
to {
|
|
transform: translate(-25px, 18px) scale(1.03);
|
|
}
|
|
}
|
|
@keyframes drift3 {
|
|
from {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
to {
|
|
transform: translate(18px, 25px) scale(1.04);
|
|
}
|
|
}
|
|
|
|
/* ---- frameless titlebar ---- */
|
|
.titlebar {
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px 0 14px;
|
|
-webkit-app-region: drag;
|
|
user-select: none;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.5),
|
|
rgba(255, 255, 255, 0.16)
|
|
);
|
|
backdrop-filter: blur(14px) saturate(1.4);
|
|
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
|
border-bottom: 1px solid var(--line);
|
|
position: relative;
|
|
z-index: 30;
|
|
}
|
|
html[data-theme="dark"] .titlebar {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(26, 23, 38, 0.7),
|
|
rgba(26, 23, 38, 0.42)
|
|
);
|
|
}
|
|
.titlebar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
.tb-logo {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
#3f6ef5,
|
|
#6a8ffb
|
|
); /* matches site favicon */
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.tb-title {
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
color: var(--fg);
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #c8c6d2;
|
|
}
|
|
.status-dot.ok {
|
|
background: var(--ok);
|
|
box-shadow: 0 0 8px rgba(23, 169, 100, 0.55);
|
|
}
|
|
.status-dot.bad {
|
|
background: var(--danger);
|
|
}
|
|
.titlebar-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 36px;
|
|
-webkit-app-region: no-drag;
|
|
gap: 2px;
|
|
}
|
|
.tb-btn {
|
|
width: 34px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
color: var(--muted);
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.tb-btn:hover {
|
|
background: var(--primary-100);
|
|
color: var(--fg);
|
|
}
|
|
.tb-btn.tb-close:hover {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ---- content area ---- */
|
|
#app {
|
|
position: absolute;
|
|
inset: 36px 0 0 0;
|
|
display: flex;
|
|
}
|
|
#rail {
|
|
flex: 0 0 56px;
|
|
width: 56px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 0;
|
|
background: var(--card2, rgba(255, 255, 255, 0.45));
|
|
border-right: 1px solid var(--line);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.rail-gap {
|
|
flex: 1;
|
|
}
|
|
.rail-btn {
|
|
position: relative;
|
|
width: 38px;
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 11px;
|
|
color: var(--muted);
|
|
transition: all 0.15s;
|
|
}
|
|
.rail-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.rail-btn:hover {
|
|
color: var(--fg);
|
|
background: var(--primary-100);
|
|
}
|
|
.rail-btn.active {
|
|
color: var(--primary-h);
|
|
background: var(--primary-100);
|
|
}
|
|
/* toggle status dot (top-right corner of the button) */
|
|
.rail-dot {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #c8c6d2;
|
|
border: 1.5px solid var(--card-solid, #fff);
|
|
box-sizing: content-box;
|
|
transition: background 0.15s;
|
|
}
|
|
.rail-dot.on {
|
|
background: var(--ok, #17a964);
|
|
box-shadow: 0 0 6px rgba(23, 169, 100, 0.6);
|
|
}
|
|
.theme-ic {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.theme-ic svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
/* content column: iframe sits to the right of the rail */
|
|
.app-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
.webui-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: #fff;
|
|
}
|
|
html[data-theme="dark"] .webui-frame {
|
|
background: #1a1824;
|
|
}
|
|
|
|
/* ---- offline placeholder ---- */
|
|
.offline {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
.off-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 38px 46px;
|
|
background: var(--card);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 20px;
|
|
box-shadow: var(--sh-lg);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
.off-logo {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 15px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
#3f6ef5,
|
|
#6a8ffb
|
|
); /* matches site favicon */
|
|
color: #fff;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--sh-md);
|
|
}
|
|
.off-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
}
|
|
.off-sub {
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
max-width: 340px;
|
|
text-align: center;
|
|
}
|
|
.off-card button {
|
|
padding: 10px 26px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
margin-top: 6px;
|
|
}
|
|
.off-card .primary {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
.off-card .primary:hover {
|
|
background: var(--primary-h);
|
|
}
|
|
|
|
/* loading spinner */
|
|
.console-loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
z-index: 5;
|
|
}
|
|
.spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--primary-100);
|
|
border-top-color: var(--primary-h);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ---- settings overlay ---- */
|
|
.overlay {
|
|
position: absolute;
|
|
inset: 36px 0 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 40;
|
|
background: rgba(30, 24, 48, 0.18);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
html[data-theme="dark"] .overlay {
|
|
background: rgba(10, 8, 18, 0.5);
|
|
}
|
|
.overlay-card {
|
|
width: 400px;
|
|
max-width: 92%;
|
|
background: var(--card-solid);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 18px;
|
|
box-shadow: var(--sh-lg);
|
|
padding: 22px 24px;
|
|
animation: popIn 0.18s var(--ease-spring);
|
|
}
|
|
@keyframes popIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
.overlay-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
.overlay-head h2 {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
}
|
|
.form .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.form .row label {
|
|
flex: 0 0 110px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.form .row .toggle {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: var(--fg);
|
|
font-weight: 500;
|
|
}
|
|
.form .row .toggle input {
|
|
accent-color: var(--primary);
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.form .row .hint {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.form input[type="number"] {
|
|
width: 120px;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 8px;
|
|
background: var(--bg-s2);
|
|
outline: none;
|
|
}
|
|
.form input[type="number"]:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-100);
|
|
}
|
|
.form .actions {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 9px;
|
|
border-bottom: none;
|
|
padding-top: 12px;
|
|
}
|
|
.form .actions.right {
|
|
justify-content: flex-end;
|
|
}
|
|
.form .actions button {
|
|
padding: 9px 18px;
|
|
border-radius: 9px;
|
|
font-weight: 600;
|
|
transition: all 0.15s;
|
|
}
|
|
.form .actions .primary {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
.form .actions .primary:hover {
|
|
background: var(--primary-h);
|
|
}
|
|
.form .actions .ghost {
|
|
background: var(--bg-s2);
|
|
border: 1px solid var(--line-strong);
|
|
color: var(--muted);
|
|
}
|
|
.form .actions .ghost:hover {
|
|
background: var(--primary-50);
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* ---- toast ---- */
|
|
#toast {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
z-index: 200;
|
|
padding: 11px 18px;
|
|
border-radius: 12px;
|
|
background: var(--card-solid);
|
|
color: var(--fg);
|
|
font-size: 13px;
|
|
box-shadow: var(--sh-lg);
|
|
border: 1px solid var(--line);
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
pointer-events: none;
|
|
transition: all 0.25s var(--ease-spring);
|
|
}
|
|
#toast.show {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
#toast.err {
|
|
border-color: var(--danger);
|
|
}
|