97 lines
7.5 KiB
CSS
97 lines
7.5 KiB
CSS
.system-card { margin-top: 20px; }
|
|
/* 导航保持在视口内，长设置页只滚动右侧内容。 */
|
|
body { min-width: 0; }
|
|
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
|
|
.workspace { min-width: 0; }
|
|
.topbar-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
.system-grid strong, .node-selector-copy { min-width: 0; overflow-wrap: anywhere; }
|
|
@media (max-width: 720px) { .system-grid { grid-template-columns: minmax(90px, 32%) 1fr; } }
|
|
.system-card .info-heading { margin-bottom: 15px; }
|
|
.system-grid { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid #edf1f7; font-size: 12px; }
|
|
.system-grid span { color: #8292a8; }
|
|
.system-grid strong { font-weight: 600; color: #354969; }
|
|
.server-address { overflow-wrap: anywhere; color: #415574; font-size: 13px; margin: 0 0 11px; }
|
|
.service-state { display: inline-block; padding: 6px 9px; border-radius: 6px; background: #f2f5fa; color: #71819a; font-size: 11px; }
|
|
.service-state.reachable { background: #ebf8f2; color: #168861; }
|
|
.service-state.error { background: #fff1f0; color: #b34444; }
|
|
.system-card .input-row .save-button { background: #edf4ff; color: #3476f5; }
|
|
.system-card .input-row .save-button:hover { background: #dbe9ff; }
|
|
.input-row .save-button { background: #edf4ff; color: #3476f5; }
|
|
.http-warning { background: #fff7e6; color: #a0691b; border: 1px solid #fae5be; border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.6; }
|
|
.saved-address { color: #168861; font-size: 12px; margin: 9px 0 0; overflow-wrap: anywhere; }
|
|
.power-display { border: 0; cursor: pointer; position: relative; z-index: 1; }
|
|
.power-display:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-2px); }
|
|
.power-display:focus-visible { outline: 3px solid #144db6; outline-offset: 4px; }
|
|
.connection-guide { margin: -11px 0 20px; padding: 11px 13px; border: 1px solid #dae7ff; border-radius: 9px; background: #f3f7ff; color: #43618f; font-size: 12px; line-height: 1.6; }
|
|
.connection-guide button { display: block; padding: 3px 0 0; background: none; border: 0; color: #306eee; font-weight: 600; }
|
|
|
|
/* ---- 登录页 ---- */
|
|
.login-shell { min-height: 100vh; align-items: stretch; justify-content: center; padding: 30px; background: #f0f4fb; }
|
|
.login-intro { width: min(43%, 430px); min-height: 640px; padding: 36px; display: flex; flex-direction: column; color: white; border-radius: 24px 0 0 24px; background: radial-gradient(circle at 15% 75%, #5989ef 0, transparent 40%), linear-gradient(150deg, #1648b4, #2769dc 65%, #4382eb); position: relative; overflow: hidden; }
|
|
.login-intro::after { content: ''; position: absolute; width: 300px; height: 300px; right: -140px; top: 22%; border: 1px solid #ffffff3a; border-radius: 50%; box-shadow: 0 0 0 42px #ffffff09, 0 0 0 86px #ffffff08; pointer-events: none; }
|
|
.login-brand { display: flex; align-items: center; gap: 11px; font-size: 20px; letter-spacing: -.04em; position: relative; z-index: 1; }
|
|
.login-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #ffffff2b; }
|
|
.login-intro-content { margin: auto 0; position: relative; z-index: 1; }
|
|
.login-eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .15em; color: #bdd4ff; }
|
|
.login-intro h2 { margin: 19px 0 16px; font-size: clamp(27px, 3vw, 37px); line-height: 1.25; letter-spacing: -.04em; }
|
|
.login-intro p { max-width: 280px; color: #dce9ff; line-height: 1.8; font-size: 13px; }
|
|
.login-feature { margin-top: 46px; padding: 13px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid #ffffff46; font-size: 12px; color: #eaf2ff; }
|
|
.login-intro-foot { font-size: 10px; letter-spacing: .16em; color: #c6d9ff; }
|
|
.login-card { width: min(57%, 550px); min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: white; border: 1px solid #e8edf5; border-left: 0; border-radius: 0 24px 24px 0; box-shadow: 0 22px 55px #1d488915; padding: 42px clamp(30px, 5vw, 68px); }
|
|
.login-card-head { display: flex; align-items: center; justify-content: space-between; color: #3574e9; }
|
|
.login-step { border-radius: 100px; background: #eff5ff; padding: 7px 12px; font-size: 11px; font-weight: 700; }
|
|
.login-card-icon { color: #3476f5; }
|
|
.login-card h1 { font-size: 26px; margin: 24px 0 6px; }
|
|
.login-description { margin: 0; font-size: 12px; color: #8391a6; }
|
|
.login-form { display: grid; gap: 4px; margin-top: 20px; }
|
|
.login-form label { font-size: 12px; font-weight: 700; color: #4f6078; margin: 10px 0 5px; }
|
|
.login-form .input-row input { height: 43px; background: #fbfcff; font-size: 13px; }
|
|
.login-submit { margin-top: 23px; height: 46px; border: 0; border-radius: 10px; background: #3476f5; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px #3476f533; }
|
|
.login-submit:hover { background: #205ed9; }
|
|
.login-submit:disabled { opacity: .6; cursor: wait; }
|
|
.login-footnote { margin: 11px 0 0; text-align: center; font-size: 11px; color: #94a1b2; }
|
|
@media (max-width: 780px) {
|
|
.login-shell { padding: 18px; }
|
|
.login-intro { width: 34%; padding: 25px; }
|
|
.login-card { width: 66%; padding: 32px; }
|
|
.login-intro h2 { font-size: 26px; }
|
|
.login-feature { line-height: 1.5; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
.login-shell { display: block; padding: 12px; }
|
|
.login-intro { width: 100%; min-height: auto; padding: 15px 22px; border-radius: 18px 18px 0 0; }
|
|
.login-intro-content, .login-intro-foot { display: none; }
|
|
.login-card { width: 100%; border-left: 1px solid #e8edf5; border-radius: 0 0 18px 18px; padding: 25px; }
|
|
}
|
|
.install-guide { padding: 14px; border: 1px solid #dae7ff; border-radius: 10px; background: #f5f8ff; font-size: 12px; color: #354969; }
|
|
.install-guide p { margin: 7px 0 12px; line-height: 1.6; overflow-wrap: anywhere; }
|
|
.probe-guide { margin-top: 15px; }
|
|
.secondary-action:disabled { opacity: .55; cursor: not-allowed; }
|
|
|
|
/* ---- 连接状态 ---- */
|
|
.power-display.on { background: linear-gradient(145deg, #2fce88, #17a268); box-shadow: 0 16px 30px #17a26849, inset 0 1px 2px #ffffff66; }
|
|
.power-display.busy { animation: pulse 1.4s ease-in-out infinite; }
|
|
.power-display:disabled { opacity: .6; cursor: not-allowed; }
|
|
.power-display.busy:disabled { cursor: progress; }
|
|
.connection-guide .secondary-action { display: inline-flex; align-items: center; margin: 9px 0 0; border: 1px solid #d9e6ff; border-radius: 9px; background: #e8f0ff; color: #285fd0; padding: 9px 12px; cursor: pointer; }
|
|
.connection-guide .secondary-action:disabled { cursor: not-allowed; }
|
|
.app-proxy-guide p { margin: 6px 0; }
|
|
.app-proxy-guide small { display: block; margin-top: 7px; }
|
|
@keyframes pulse { 50% { transform: scale(.96); } }
|
|
.preview-pill.online { border-color: #bdebd6; background: #ebf8f2; color: #168861; }
|
|
.traffic-grid { display: flex; justify-content: center; gap: 18px; margin: -8px 0 18px; font-size: 11px; color: #63738a; }
|
|
.node-switch { color: #3977e8; font-size: 11px; white-space: nowrap; }
|
|
.node-selector { cursor: pointer; }
|
|
.node-selector:hover { background: #f3f7ff; }
|
|
|
|
/* ---- 线路卡片 ---- */
|
|
.line-card { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
|
|
.line-info { flex: 1; min-width: 0; }
|
|
.line-info h2 { display: flex; align-items: center; gap: 8px; }
|
|
.line-current { font-size: 10px; font-style: normal; color: #168861; background: #ebf8f2; border-radius: 100px; padding: 3px 8px; }
|
|
|
|
/* ---- 设备列表 ---- */
|
|
.device-platform { color: #93a1b4; font-weight: 400; }
|
|
.revoke-button { padding: 7px 12px; font-size: 11px; color: #b34444; border-color: #f3d2d0; background: #fff7f6; }
|
|
.revoke-button:hover { background: #ffe9e7; }
|