*,
|
*::before,
|
*::after {
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
height: 100%;
|
margin: 0;
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
Arial, sans-serif;
|
color: #e8eaed;
|
background: #0f1115;
|
}
|
|
a {
|
color: #8ab4ff;
|
text-decoration: none;
|
}
|
a:hover {
|
text-decoration: underline;
|
}
|
|
.muted {
|
color: #9aa0a6;
|
font-size: 0.9rem;
|
}
|
|
.error {
|
color: #f28b82;
|
margin: 0.25rem 0 0;
|
}
|
|
.btn {
|
border: 1px solid #3c4043;
|
background: #202124;
|
color: #e8eaed;
|
padding: 0.45rem 0.9rem;
|
border-radius: 6px;
|
cursor: pointer;
|
font-size: 0.95rem;
|
}
|
.btn.primary {
|
background: #1a73e8;
|
border-color: #1a73e8;
|
}
|
.btn.primary:hover {
|
background: #1967d2;
|
}
|
.btn.ghost {
|
background: transparent;
|
}
|
.btn.ghost:hover {
|
background: #303134;
|
}
|
|
.btn.winauth {
|
background: #188038;
|
border-color: #188038;
|
color: #e8eaed;
|
}
|
.btn.winauth:hover {
|
background: #137333;
|
border-color: #137333;
|
}
|
|
.page-login {
|
display: grid;
|
place-items: center;
|
padding: 1rem;
|
}
|
|
.card {
|
width: min(400px, 100%);
|
background: #202124;
|
border: 1px solid #3c4043;
|
border-radius: 12px;
|
padding: 1.5rem 1.75rem 2rem;
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
}
|
|
.card h1 {
|
margin: 0 0 0.35rem;
|
font-size: 1.35rem;
|
}
|
|
.form {
|
display: flex;
|
flex-direction: column;
|
gap: 0.85rem;
|
margin-top: 1rem;
|
}
|
|
.form label span {
|
display: block;
|
font-size: 0.85rem;
|
margin-bottom: 0.25rem;
|
color: #bdc1c6;
|
}
|
|
.form input {
|
width: 100%;
|
padding: 0.55rem 0.65rem;
|
border-radius: 6px;
|
border: 1px solid #3c4043;
|
background: #17181b;
|
color: #e8eaed;
|
}
|
|
.page-login .form .login-submit,
|
.page-login .login-winauth .btn {
|
width: 100%;
|
padding: 0.55rem 0.9rem;
|
font-size: 0.95rem;
|
}
|
|
.login-winauth {
|
margin-top: 1.85rem;
|
}
|
|
.shell {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.topbar,
|
.viewbar {
|
display: flex;
|
align-items: center;
|
gap: 0.75rem;
|
padding: 0.55rem 1rem;
|
border-bottom: 1px solid #3c4043;
|
background: #17181b;
|
flex: 0 0 auto;
|
}
|
|
.brand {
|
font-weight: 600;
|
letter-spacing: 0.02em;
|
}
|
|
.brand-nav {
|
display: flex;
|
align-items: center;
|
gap: 0.35rem;
|
flex-wrap: wrap;
|
}
|
|
.brand-nav a {
|
color: inherit;
|
text-decoration: none;
|
}
|
.brand-nav a:hover {
|
text-decoration: underline;
|
color: #8ab4ff;
|
}
|
|
.brand-sep {
|
color: #5f6368;
|
font-weight: 400;
|
}
|
|
.brand-current {
|
color: #bdc1c6;
|
font-weight: 500;
|
}
|
|
.sr-only {
|
position: absolute;
|
width: 1px;
|
height: 1px;
|
padding: 0;
|
margin: -1px;
|
overflow: hidden;
|
clip: rect(0, 0, 0, 0);
|
white-space: nowrap;
|
border: 0;
|
}
|
|
.userbar {
|
margin-left: auto;
|
display: flex;
|
align-items: center;
|
gap: 0.45rem;
|
}
|
|
.userbar-edit {
|
color: #8ab4ff;
|
font-size: 0.92rem;
|
text-decoration: none;
|
white-space: nowrap;
|
}
|
.userbar-edit:hover {
|
text-decoration: underline;
|
}
|
|
.userbar-sep,
|
.userbar-back {
|
color: #5f6368;
|
font-size: 0.9rem;
|
}
|
|
.userbar-back {
|
text-decoration: none;
|
color: #8ab4ff;
|
white-space: nowrap;
|
}
|
.userbar-back:hover {
|
text-decoration: underline;
|
}
|
|
.username {
|
color: #bdc1c6;
|
font-size: 0.95rem;
|
}
|
|
.home-body {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
padding: 0.75rem 1rem 1rem;
|
gap: 0.75rem;
|
overflow: hidden;
|
}
|
|
.panel {
|
background: #17181b;
|
border: 1px solid #2a2d31;
|
border-radius: 10px;
|
padding: 0.65rem 0.85rem;
|
}
|
|
.panel h2 {
|
margin: 0 0 0.45rem;
|
font-size: 0.95rem;
|
color: #bdc1c6;
|
font-weight: 600;
|
}
|
|
.recent-panel {
|
flex: 0 0 auto;
|
}
|
|
.recent-list {
|
align-items: start;
|
}
|
|
.recent-empty {
|
grid-column: 1 / -1;
|
}
|
|
.catalog-panel {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.catalog {
|
flex: 1;
|
min-height: 0;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
gap: 0.55rem;
|
}
|
|
body.page-home .home-body {
|
overflow-y: auto;
|
overflow-x: hidden;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
body.page-home .catalog-panel {
|
flex: 0 0 auto;
|
min-height: 0;
|
overflow: visible;
|
}
|
|
body.page-home .catalog {
|
flex: 0 0 auto;
|
min-height: 0;
|
overflow: visible;
|
}
|
|
.cat-block {
|
background: #141517;
|
}
|
|
.cat-title {
|
font-size: 0.8rem;
|
color: #9aa0a6;
|
margin-bottom: 0.35rem;
|
}
|
|
.scenario-row {
|
display: flex;
|
flex-direction: column;
|
gap: 0.5rem;
|
align-content: flex-start;
|
}
|
|
.scenario-chip {
|
border: 1px solid #3c4043;
|
border-radius: 8px;
|
padding: 0.4rem 0.5rem;
|
background: #1b1c1f;
|
width: 100%;
|
min-width: 0;
|
}
|
|
.scenario-name {
|
font-size: 0.82rem;
|
font-weight: 600;
|
margin-bottom: 0.3rem;
|
}
|
|
.page-link-grid {
|
display: grid;
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
gap: 0.5rem 0.4rem;
|
}
|
|
.page-link {
|
font-size: 0.78rem;
|
padding: 0.35rem 0.3rem;
|
border-radius: 8px;
|
border: 1px solid #30343a;
|
background: #202124;
|
min-width: 0;
|
}
|
|
.page-tile {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
text-align: center;
|
gap: 0.35rem;
|
text-decoration: none;
|
}
|
.page-tile:hover {
|
text-decoration: none;
|
border-color: #5f6368;
|
background: #252629;
|
}
|
|
.page-thumb {
|
display: block;
|
width: 100%;
|
aspect-ratio: 16 / 9;
|
object-fit: cover;
|
border-radius: 6px;
|
background: #2a2d31;
|
}
|
|
.page-thumb--placeholder {
|
min-height: 3.5rem;
|
}
|
|
.page-link-text {
|
display: block;
|
line-height: 1.25;
|
word-break: break-word;
|
}
|
|
.page-view {
|
margin: 0;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.embed {
|
flex: 1;
|
border: 0;
|
width: 100%;
|
min-height: 0;
|
background: #000;
|
}
|
|
.embed-full {
|
display: block;
|
position: fixed;
|
inset: 0;
|
width: 100vw;
|
height: 100vh;
|
flex: none;
|
min-height: 100vh;
|
}
|
|
.page-view--empty {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 100vh;
|
background: #0f1115;
|
}
|
|
.view-empty-hint {
|
color: #9aa0a6;
|
font-size: 0.95rem;
|
max-width: 24rem;
|
text-align: center;
|
margin: 0 1rem;
|
}
|
|
.view-tabs-stack {
|
position: fixed;
|
inset: 0;
|
width: 100vw;
|
height: 100vh;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
.view-tab-iframe {
|
position: absolute;
|
inset: 0;
|
width: 100%;
|
height: 100%;
|
border: 0;
|
background: #000;
|
z-index: 0;
|
}
|
|
.view-tab-iframe.is-active {
|
z-index: 1;
|
visibility: visible;
|
}
|
|
.view-tab-iframe:not(.is-active) {
|
visibility: hidden;
|
pointer-events: none;
|
}
|
|
/* 场景与页面配置 / 我的场景设置样式（与 Node 版一致，省略其余未用项） */
|
.page-user-scenarios .cfg-body { overflow: auto; }
|
.user-scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
|
.user-scn-card { border: 1px solid #3c4043; border-radius: 10px; background: #1b1c1f; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
|
.user-scn-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #2a2d31; border: 1px solid #2a2d31; }
|
.user-scn-name { font-size: 0.9rem; font-weight: 600; color: #e8eaed; word-break: break-word; }
|
.user-scn-actions { display: flex; justify-content: flex-end; }
|
.user-scn-form { display: flex; flex-direction: column; gap: 0.65rem; }
|
.user-scn-field span { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: #bdc1c6; }
|
.user-scn-field input[type="text"] { width: min(420px, 100%); padding: 0.55rem 0.65rem; border-radius: 6px; border: 1px solid #3c4043; background: #17181b; color: #e8eaed; font-size: 0.82rem; }
|
.user-scn-tip { margin: 0; font-size: 0.84rem; }
|
.user-scn-table-wrap { overflow: auto; border: 1px solid #2a2d31; border-radius: 8px; }
|
.user-scn-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
|
.user-scn-table th, .user-scn-table td { border: 1px solid #2a2d31; padding: 0.35rem 0.45rem; text-align: left; vertical-align: middle; }
|
.user-scn-table thead th { background: #1b1c1f; color: #9aa0a6; font-weight: 600; }
|
.user-scn-table input[type="number"] { width: 6.5rem; padding: 0.3rem 0.4rem; border-radius: 4px; border: 1px solid #3c4043; background: #17181b; color: #e8eaed; font-size: 0.82rem; }
|
.user-scn-submit-row { display: flex; align-items: center; gap: 0.6rem; }
|
.user-scn-msg { font-size: 0.85rem; }
|
.user-scn-msg--ok { color: #81c995; }
|
.user-scn-msg--err { color: #f28b82; }
|
|
