1237 lines
23 KiB
CSS
1237 lines
23 KiB
CSS
:root {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
|
|
"Microsoft YaHei", sans-serif;
|
|
color: #eaf2ff;
|
|
background: #050a13;
|
|
font-synthesis: none;
|
|
--bg: #050a13;
|
|
--panel: rgba(9, 23, 41, 0.78);
|
|
--panel2: rgba(12, 30, 52, 0.68);
|
|
--line: rgba(151, 191, 230, 0.18);
|
|
--muted: #92a8be;
|
|
--text: #eaf2ff;
|
|
--gold: #f0c56b;
|
|
--blue: #69b9f3;
|
|
--green: #76d99c;
|
|
--danger: #ff8f93;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-width: 760px;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(ellipse at 55% 35%, #0b3151 0, transparent 33%),
|
|
linear-gradient(180deg, #06101f 0%, #071628 54%, #030911 100%);
|
|
}
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
color: inherit;
|
|
}
|
|
.app-shell {
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template: 48px 1fr/244px 1fr;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(2, 9, 19, 0.22),
|
|
rgba(2, 8, 15, 0.7)
|
|
);
|
|
position: relative;
|
|
}
|
|
.app-shell:after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 48px 0 0 244px;
|
|
pointer-events: none;
|
|
opacity: 0.26;
|
|
background-image:
|
|
radial-gradient(circle at 12% 14%, #fff 0 1px, transparent 1.5px),
|
|
radial-gradient(circle at 74% 8%, #badaff 0 1px, transparent 1.5px),
|
|
radial-gradient(circle at 52% 26%, #fff 0 1px, transparent 1.5px);
|
|
background-size:
|
|
260px 230px,
|
|
340px 290px,
|
|
440px 360px;
|
|
}
|
|
.titlebar {
|
|
grid-column: 1/-1;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(3, 11, 22, 0.82);
|
|
backdrop-filter: blur(24px);
|
|
z-index: 5;
|
|
}
|
|
.traffic {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-left: 18px;
|
|
}
|
|
.traffic i {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #ff6259;
|
|
}
|
|
.traffic i:nth-child(2) {
|
|
background: #ffbd2e;
|
|
}
|
|
.traffic i:nth-child(3) {
|
|
background: #28c941;
|
|
}
|
|
.titlebar > span {
|
|
font-size: 14px;
|
|
font-weight: 560;
|
|
}
|
|
.titlebar .version {
|
|
justify-self: end;
|
|
margin-right: 18px;
|
|
color: #738aa0;
|
|
font-size: 11px;
|
|
}
|
|
.rail {
|
|
grid-row: 2;
|
|
padding: 26px 14px 18px;
|
|
border-right: 1px solid var(--line);
|
|
background: rgba(3, 11, 22, 0.68);
|
|
backdrop-filter: blur(22px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 3;
|
|
}
|
|
.brand-orbit {
|
|
height: 96px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.brand-orbit span,
|
|
.lake-mark {
|
|
display: block;
|
|
width: 54px;
|
|
height: 54px;
|
|
border: 1px solid rgba(240, 197, 107, 0.7);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 22px rgba(240, 197, 107, 0.17),
|
|
inset 0 0 18px rgba(240, 197, 107, 0.09);
|
|
position: relative;
|
|
}
|
|
.brand-orbit span:before,
|
|
.lake-mark:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 26px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
|
box-shadow: 0 5px 7px rgba(240, 197, 107, 0.55);
|
|
}
|
|
.brand-orbit span:after,
|
|
.lake-mark:after {
|
|
content: "✦";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #f8d98c;
|
|
text-shadow: 0 0 13px var(--gold);
|
|
}
|
|
nav {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 14px;
|
|
}
|
|
nav button {
|
|
border: 0;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
color: #b8c7d7;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
nav button svg {
|
|
width: 21px;
|
|
height: 21px;
|
|
}
|
|
nav button:hover {
|
|
background: rgba(255, 255, 255, 0.045);
|
|
color: #fff;
|
|
}
|
|
nav button.active {
|
|
color: #f7dc9a;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(153, 103, 26, 0.38),
|
|
rgba(255, 255, 255, 0.025)
|
|
);
|
|
box-shadow: inset 2px 0 var(--gold);
|
|
}
|
|
.channel-mini {
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 11px;
|
|
}
|
|
.mini-lake {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle at 50% 58%,
|
|
#e5c477 0 2%,
|
|
#236b8f 5%,
|
|
#08182c 42%,
|
|
#020811 70%
|
|
);
|
|
box-shadow: 0 0 14px rgba(105, 185, 243, 0.3);
|
|
}
|
|
.channel-mini strong,
|
|
.channel-mini small {
|
|
display: block;
|
|
}
|
|
.channel-mini strong {
|
|
font-size: 13px;
|
|
}
|
|
.channel-mini small {
|
|
font-size: 9px;
|
|
color: #70879d;
|
|
margin-top: 3px;
|
|
}
|
|
main {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
overflow: auto;
|
|
z-index: 1;
|
|
}
|
|
.page {
|
|
width: min(1240px, 100%);
|
|
min-height: calc(100vh - 48px);
|
|
margin: auto;
|
|
padding: 38px 40px 30px;
|
|
}
|
|
.page > header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 25px;
|
|
}
|
|
.page h1 {
|
|
font-size: 30px;
|
|
line-height: 1.2;
|
|
margin: 0 0 8px;
|
|
font-weight: 650;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.page header p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.page button,
|
|
.portal a {
|
|
border: 1px solid rgba(240, 197, 107, 0.55);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(194, 142, 51, 0.35),
|
|
rgba(114, 72, 19, 0.45)
|
|
);
|
|
border-radius: 10px;
|
|
padding: 10px 16px;
|
|
font-size: 13px;
|
|
font-weight: 580;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.page button:hover,
|
|
.portal a:hover {
|
|
filter: brightness(1.18);
|
|
}
|
|
.page button.soft {
|
|
border-color: var(--line);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.conversation {
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(7, 27, 48, 0.68),
|
|
rgba(6, 18, 34, 0.74)
|
|
);
|
|
overflow: hidden;
|
|
min-height: 230px;
|
|
}
|
|
.channel-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 250px;
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.channel-primary {
|
|
min-width: 0;
|
|
}
|
|
.channel-context {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.channel-context article {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: rgba(6, 20, 36, 0.74);
|
|
padding: 19px;
|
|
}
|
|
.channel-context h2 {
|
|
color: #b8cadb;
|
|
font-size: 13px;
|
|
margin: 0 0 17px;
|
|
}
|
|
.channel-context strong {
|
|
font-size: 14px;
|
|
font-weight: 620;
|
|
}
|
|
.channel-context p {
|
|
color: #7f97ad;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
margin: 7px 0 0;
|
|
}
|
|
.channel-context .path {
|
|
word-break: break-all;
|
|
}
|
|
.welcome {
|
|
text-align: center;
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: center;
|
|
min-height: 210px;
|
|
padding: 25px;
|
|
color: var(--muted);
|
|
}
|
|
.welcome h2 {
|
|
font-size: 18px;
|
|
color: var(--text);
|
|
margin: 14px 0 6px;
|
|
}
|
|
.welcome p {
|
|
max-width: 500px;
|
|
line-height: 1.7;
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
.welcome svg {
|
|
width: 34px;
|
|
color: var(--blue);
|
|
}
|
|
.conversation article {
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr;
|
|
padding: 20px 24px;
|
|
border-top: 1px solid rgba(151, 191, 230, 0.11);
|
|
}
|
|
.conversation article span {
|
|
font-size: 12px;
|
|
color: var(--blue);
|
|
font-weight: 650;
|
|
}
|
|
.conversation article.persona span {
|
|
color: #c5a6ff;
|
|
}
|
|
.conversation article.external-ai span {
|
|
color: #72d6ca;
|
|
}
|
|
.conversation article p {
|
|
margin: 0;
|
|
line-height: 1.7;
|
|
font-size: 15px;
|
|
}
|
|
.receipt-stream {
|
|
margin-top: 18px;
|
|
padding: 18px 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: rgba(4, 16, 30, 0.74);
|
|
}
|
|
.approval-queue {
|
|
margin-top: 18px;
|
|
padding: 18px 20px;
|
|
border: 1px solid rgba(240, 197, 107, 0.38);
|
|
border-radius: 18px;
|
|
background: rgba(40, 29, 12, 0.36);
|
|
}
|
|
.approval-queue > h2 {
|
|
margin: 0 0 12px;
|
|
color: #f4d895;
|
|
font-size: 13px;
|
|
}
|
|
.approval-queue article {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 12px 13px;
|
|
border-radius: 11px;
|
|
background: rgba(6, 18, 32, 0.7);
|
|
}
|
|
.approval-queue article + article {
|
|
margin-top: 8px;
|
|
}
|
|
.approval-queue strong {
|
|
font-size: 13px;
|
|
}
|
|
.approval-queue p {
|
|
margin: 5px 0;
|
|
color: #b7c8d8;
|
|
font-size: 11px;
|
|
}
|
|
.approval-queue small {
|
|
color: #6f879e;
|
|
font-size: 9px;
|
|
}
|
|
.approval-queue article > div:last-child {
|
|
display: flex;
|
|
flex: none;
|
|
gap: 7px;
|
|
}
|
|
.receipt-stream h2 {
|
|
font-size: 13px;
|
|
font-weight: 570;
|
|
color: #b8cadb;
|
|
margin: 0 0 12px;
|
|
}
|
|
.receipt {
|
|
display: grid;
|
|
grid-template-columns: 90px 120px 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
margin-top: 7px;
|
|
border-radius: 10px;
|
|
background: rgba(12, 34, 56, 0.7);
|
|
font-size: 12px;
|
|
}
|
|
.receipt .kind {
|
|
color: #63d6cc;
|
|
font-weight: 650;
|
|
}
|
|
.receipt strong {
|
|
font-weight: 600;
|
|
}
|
|
.receipt p {
|
|
margin: 0;
|
|
color: #aabbd0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.receipt time {
|
|
color: #6f879e;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.receipt.agent_action .kind {
|
|
color: var(--gold);
|
|
}
|
|
.receipt.system_receipt .kind {
|
|
color: var(--green);
|
|
}
|
|
.empty {
|
|
color: #7890a8;
|
|
font-size: 13px;
|
|
}
|
|
.composer {
|
|
margin-top: 18px;
|
|
border: 1px solid rgba(179, 210, 239, 0.3);
|
|
border-radius: 18px;
|
|
background: rgba(10, 26, 46, 0.78);
|
|
padding: 14px 16px 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: end;
|
|
}
|
|
.composer textarea {
|
|
resize: none;
|
|
height: 62px;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
color: #eaf2ff;
|
|
font-size: 15px;
|
|
padding: 7px;
|
|
}
|
|
.composer textarea::placeholder {
|
|
color: #6f8298;
|
|
}
|
|
.composer button {
|
|
border-radius: 50%;
|
|
width: 42px;
|
|
height: 42px;
|
|
padding: 0;
|
|
font-size: 22px;
|
|
}
|
|
.composer small {
|
|
grid-column: 1/-1;
|
|
color: #5f7489;
|
|
font-size: 10px;
|
|
padding: 5px 7px 0;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
gap: 9px;
|
|
}
|
|
.knowledge-workspace {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr;
|
|
min-height: 650px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
background: rgba(5, 17, 31, 0.76);
|
|
}
|
|
.knowledge-workspace.complete {
|
|
grid-template-columns: 260px minmax(0, 1fr) 232px;
|
|
height: min(720px, calc(100vh - 175px));
|
|
min-height: 560px;
|
|
}
|
|
.knowledge-workspace.complete.inspector-closed {
|
|
grid-template-columns: 260px minmax(0, 1fr);
|
|
}
|
|
.knowledge-browser {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
.browser-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 2px 13px;
|
|
}
|
|
.browser-title strong {
|
|
font-size: 12px;
|
|
color: #cad8e6;
|
|
}
|
|
.browser-title span {
|
|
font-size: 10px;
|
|
color: #6f879e;
|
|
}
|
|
.knowledge-tree {
|
|
padding: 9px 0 18px;
|
|
}
|
|
.tree-branch {
|
|
position: relative;
|
|
}
|
|
.tree-folder,
|
|
.tree-document {
|
|
width: 100%;
|
|
min-height: 38px;
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 7px;
|
|
border: 0 !important;
|
|
border-radius: 8px !important;
|
|
background: transparent !important;
|
|
color: #8fa5ba;
|
|
text-align: left;
|
|
}
|
|
.tree-folder {
|
|
grid-template-columns: 13px 18px minmax(0, 1fr) auto;
|
|
font-size: 13px;
|
|
font-weight: 590;
|
|
}
|
|
.tree-document {
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
font-size: 12.5px;
|
|
font-weight: 480;
|
|
}
|
|
.tree-folder svg,
|
|
.tree-document svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #78bce6;
|
|
}
|
|
.tree-folder span,
|
|
.tree-document span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.tree-folder em {
|
|
padding-right: 7px;
|
|
color: #617a91;
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
}
|
|
.tree-folder:hover,
|
|
.tree-document:hover,
|
|
.tree-document.active {
|
|
color: #eef6ff;
|
|
background: rgba(78, 144, 194, 0.12) !important;
|
|
}
|
|
.tree-document.active {
|
|
box-shadow: inset 2px 0 #74bee9;
|
|
}
|
|
.tree-chevron {
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 18px;
|
|
transition: transform 0.14s ease;
|
|
}
|
|
.tree-chevron.open {
|
|
transform: rotate(90deg);
|
|
}
|
|
.knowledge-workspace > aside {
|
|
border-right: 1px solid var(--line);
|
|
padding: 13px;
|
|
background: rgba(3, 12, 24, 0.55);
|
|
}
|
|
.knowledge-workspace > aside > input,
|
|
.settings-list input {
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.045);
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
color: #fff;
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
}
|
|
.knowledge-workspace > aside > button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
text-align: left;
|
|
margin-top: 7px;
|
|
padding: 11px 12px;
|
|
}
|
|
.knowledge-workspace > aside > button.selected {
|
|
background: rgba(73, 141, 194, 0.15);
|
|
box-shadow: inset 2px 0 #74bee9;
|
|
}
|
|
.knowledge-workspace > aside strong {
|
|
font-size: 13px;
|
|
}
|
|
.knowledge-workspace > aside small {
|
|
color: #6e879e;
|
|
margin-top: 5px;
|
|
font-size: 10px;
|
|
}
|
|
.knowledge-workspace > section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
.editor-tools {
|
|
height: 55px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.editor-tools > span {
|
|
flex: 1;
|
|
}
|
|
.editor-tools button {
|
|
padding: 7px 11px;
|
|
border-color: var(--line);
|
|
background: transparent;
|
|
}
|
|
.editor-tools button.danger {
|
|
color: var(--danger);
|
|
}
|
|
.editor {
|
|
flex: 1;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 32px 38px;
|
|
background: rgba(1, 8, 17, 0.24);
|
|
color: #dce8f5;
|
|
line-height: 1.8;
|
|
font-family: "SFMono-Regular", Menlo, monospace;
|
|
font-size: 14px;
|
|
}
|
|
.document-workspace {
|
|
min-height: 0;
|
|
}
|
|
.document-scroll {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 42px clamp(28px, 5vw, 70px) 70px;
|
|
}
|
|
.reader-heading {
|
|
padding-bottom: 25px;
|
|
margin-bottom: 25px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.reader-heading h1 {
|
|
font-size: 34px;
|
|
margin: 0 0 10px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.reader-heading p {
|
|
color: #8097ad;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
.meta-tags {
|
|
display: flex;
|
|
gap: 7px;
|
|
margin-top: 14px;
|
|
}
|
|
.meta-tags span {
|
|
padding: 4px 8px;
|
|
border-radius: 7px;
|
|
color: #b8d8ef;
|
|
background: rgba(71, 139, 188, 0.14);
|
|
font-size: 10px;
|
|
}
|
|
.meta-tags .tag-sky {
|
|
color: #a9dcff;
|
|
background: rgba(57, 145, 205, 0.18);
|
|
}
|
|
.meta-tags .tag-violet {
|
|
color: #d3b8ff;
|
|
background: rgba(128, 79, 190, 0.2);
|
|
}
|
|
.meta-tags .tag-amber {
|
|
color: #f6d28a;
|
|
background: rgba(188, 130, 35, 0.2);
|
|
}
|
|
.meta-tags .tag-mint {
|
|
color: #9fe2ba;
|
|
background: rgba(48, 148, 91, 0.2);
|
|
}
|
|
.meta-tags .tag-rose {
|
|
color: #ffb2ba;
|
|
background: rgba(185, 65, 81, 0.2);
|
|
}
|
|
.meta-properties {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
margin-top: 10px;
|
|
}
|
|
.meta-properties span {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
color: #93a9bd;
|
|
background: rgba(255, 255, 255, 0.035);
|
|
font-size: 10px;
|
|
}
|
|
.meta-properties b {
|
|
color: #c5d4e1;
|
|
font-weight: 620;
|
|
}
|
|
.markdown-document {
|
|
color: #cbd8e6;
|
|
font-size: 15px;
|
|
line-height: 1.9;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.markdown-document h1,
|
|
.markdown-document h2,
|
|
.markdown-document h3,
|
|
.markdown-document h4 {
|
|
color: #f0f5fb;
|
|
line-height: 1.35;
|
|
scroll-margin-top: 24px;
|
|
}
|
|
.markdown-document h1 {
|
|
font-size: 28px;
|
|
margin: 1.4em 0 0.6em;
|
|
}
|
|
.markdown-document h2 {
|
|
font-size: 22px;
|
|
margin: 1.7em 0 0.55em;
|
|
}
|
|
.markdown-document h3 {
|
|
font-size: 18px;
|
|
margin: 1.5em 0 0.5em;
|
|
}
|
|
.markdown-document p {
|
|
margin: 0 0 1.1em;
|
|
}
|
|
.markdown-document a,
|
|
.markdown-document .wiki-link {
|
|
color: #84c9f3;
|
|
}
|
|
.markdown-document .wiki-link {
|
|
display: inline;
|
|
border: 0;
|
|
padding: 0 2px;
|
|
background: transparent;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
.markdown-document blockquote.callout {
|
|
margin: 1.3em 0;
|
|
padding: 14px 17px;
|
|
border-left: 3px solid #74bee9;
|
|
border-radius: 0 10px 10px 0;
|
|
background: rgba(72, 137, 181, 0.1);
|
|
}
|
|
.markdown-document blockquote.callout-amber {
|
|
border-left-color: var(--gold);
|
|
background: rgba(205, 153, 64, 0.1);
|
|
}
|
|
.markdown-document blockquote.callout-rose {
|
|
border-left-color: #df8991;
|
|
background: rgba(190, 83, 94, 0.1);
|
|
}
|
|
.markdown-document blockquote.callout-mint {
|
|
border-left-color: var(--green);
|
|
background: rgba(81, 170, 119, 0.1);
|
|
}
|
|
.markdown-document pre {
|
|
overflow: auto;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: rgba(1, 7, 14, 0.65);
|
|
}
|
|
.markdown-document code {
|
|
font-family: "SFMono-Regular", Menlo, monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
.markdown-document table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.4em 0;
|
|
}
|
|
.markdown-document th,
|
|
.markdown-document td {
|
|
padding: 9px 11px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
.markdown-document img {
|
|
max-width: 100%;
|
|
border-radius: 12px;
|
|
}
|
|
.heading-flash {
|
|
animation: headingFlash 1.2s ease;
|
|
}
|
|
@keyframes headingFlash {
|
|
0% {
|
|
color: var(--gold);
|
|
text-shadow: 0 0 18px rgba(240, 197, 107, 0.4);
|
|
}
|
|
}
|
|
.document-inspector {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border-left: 1px solid var(--line);
|
|
border-right: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.document-inspector > header {
|
|
padding: 18px 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.document-inspector > header strong,
|
|
.document-inspector > header span {
|
|
display: block;
|
|
}
|
|
.document-inspector > header strong {
|
|
font-size: 13px;
|
|
}
|
|
.document-inspector > header span {
|
|
color: #72899f;
|
|
font-size: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
.outline-list {
|
|
padding: 10px 8px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.outline-list button {
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
text-align: left;
|
|
color: #9fb2c5;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
padding-block: 7px;
|
|
}
|
|
.outline-list button.active {
|
|
color: #f5d791;
|
|
background: rgba(198, 146, 49, 0.12);
|
|
box-shadow: inset 2px 0 var(--gold);
|
|
}
|
|
.outline-list p {
|
|
color: #72899f;
|
|
font-size: 11px;
|
|
padding: 8px;
|
|
}
|
|
.document-evidence {
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
}
|
|
.document-evidence div {
|
|
margin-bottom: 13px;
|
|
}
|
|
.document-evidence dt {
|
|
color: #6f879e;
|
|
font-size: 10px;
|
|
}
|
|
.document-evidence dd {
|
|
color: #bdcddd;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
margin: 4px 0 0;
|
|
word-break: break-all;
|
|
}
|
|
.split-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
.split-list > div,
|
|
.settings-list article,
|
|
.portal {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: rgba(8, 24, 42, 0.72);
|
|
padding: 25px;
|
|
}
|
|
.split-list h2,
|
|
.settings-list h2 {
|
|
font-size: 17px;
|
|
margin: 0 0 8px;
|
|
}
|
|
.split-list p,
|
|
.settings-list p,
|
|
.portal p {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
.split-list span {
|
|
display: block;
|
|
color: #6f879e;
|
|
margin-top: 30px;
|
|
font-size: 12px;
|
|
}
|
|
.timeline-list {
|
|
display: grid;
|
|
gap: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.timeline-list article {
|
|
display: grid;
|
|
grid-template-columns: 170px 1fr;
|
|
gap: 25px;
|
|
padding: 20px 4px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.timeline-list time {
|
|
color: #71869b;
|
|
font-size: 12px;
|
|
}
|
|
.timeline-list strong {
|
|
font-size: 14px;
|
|
}
|
|
.timeline-list p {
|
|
color: #9eb0c2;
|
|
margin: 7px 0 0;
|
|
font-size: 13px;
|
|
}
|
|
.portal {
|
|
text-align: center;
|
|
min-height: 360px;
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: center;
|
|
}
|
|
.portal h2 {
|
|
font-size: 22px;
|
|
margin: 18px 0 2px;
|
|
}
|
|
.portal p {
|
|
max-width: 570px;
|
|
}
|
|
.portal-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
.portal .origin-light {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
.origin-light {
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
#fff7c9 0 2%,
|
|
#f2c76c 3%,
|
|
rgba(105, 185, 243, 0.55) 10%,
|
|
rgba(24, 71, 105, 0.24) 38%,
|
|
transparent 70%
|
|
);
|
|
box-shadow: 0 0 70px rgba(105, 185, 243, 0.16);
|
|
}
|
|
.settings-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.settings-list article {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 19px 22px;
|
|
}
|
|
.settings-list h2 {
|
|
font-size: 14px;
|
|
}
|
|
.settings-list p {
|
|
margin: 0;
|
|
word-break: break-all;
|
|
}
|
|
.status {
|
|
font-size: 11px;
|
|
color: #8ebde0;
|
|
}
|
|
.status.ok {
|
|
color: var(--green);
|
|
}
|
|
.settings-list .bridge {
|
|
align-items: flex-end;
|
|
}
|
|
.bridge > div:last-child {
|
|
display: flex;
|
|
gap: 8px;
|
|
min-width: 370px;
|
|
}
|
|
.onboard {
|
|
height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 50% 70%,
|
|
rgba(22, 92, 126, 0.45),
|
|
transparent 37%
|
|
),
|
|
linear-gradient(#06101f, #03070e);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.onboard section {
|
|
z-index: 2;
|
|
width: min(520px, 80vw);
|
|
text-align: center;
|
|
display: grid;
|
|
justify-items: center;
|
|
}
|
|
.onboard .origin-light {
|
|
width: 118px;
|
|
height: 118px;
|
|
}
|
|
.onboard h1 {
|
|
font-size: 32px;
|
|
margin: 20px 0 9px;
|
|
}
|
|
.onboard p {
|
|
color: #9db0c4;
|
|
line-height: 1.8;
|
|
margin: 0 0 26px;
|
|
}
|
|
.onboard label {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
color: #a9bed1;
|
|
}
|
|
.onboard input {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 8px 0 14px;
|
|
padding: 15px 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(164, 201, 235, 0.27);
|
|
background: rgba(6, 19, 35, 0.85);
|
|
color: #fff;
|
|
outline: 0;
|
|
font-size: 15px;
|
|
}
|
|
.onboard button {
|
|
border: 1px solid rgba(240, 197, 107, 0.65);
|
|
border-radius: 11px;
|
|
background: linear-gradient(#bd8e3c, #7f561d);
|
|
color: #fff;
|
|
padding: 12px 22px;
|
|
font-weight: 650;
|
|
}
|
|
.onboard footer {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
color: #5e7488;
|
|
font-size: 11px;
|
|
}
|
|
.stars {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.45;
|
|
background-image:
|
|
radial-gradient(circle at 15% 20%, #fff 0 1px, transparent 1.5px),
|
|
radial-gradient(circle at 70% 12%, #fff 0 1px, transparent 1.5px),
|
|
radial-gradient(circle at 42% 39%, #9fd7ff 0 1px, transparent 1.5px);
|
|
background-size:
|
|
270px 230px,
|
|
390px 310px,
|
|
520px 440px;
|
|
}
|
|
.boot {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
color: #b9cadb;
|
|
}
|
|
.toast {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
background: #18263a;
|
|
border: 1px solid rgba(255, 143, 147, 0.45);
|
|
border-radius: 12px;
|
|
padding: 13px 15px;
|
|
z-index: 10;
|
|
max-width: 520px;
|
|
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
|
|
font-size: 12px;
|
|
}
|
|
.toast button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: #ffb1b4;
|
|
margin-left: 15px;
|
|
}
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 48px 0 0;
|
|
background: rgba(1, 5, 11, 0.7);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 20;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.modal {
|
|
width: min(430px, 80vw);
|
|
border: 1px solid rgba(164, 201, 235, 0.25);
|
|
border-radius: 18px;
|
|
background: #09182a;
|
|
padding: 25px;
|
|
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
|
|
}
|
|
.modal h2 {
|
|
font-size: 20px;
|
|
margin: 0 0 7px;
|
|
}
|
|
.modal p {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
margin: 0 0 20px;
|
|
}
|
|
.modal label {
|
|
display: block;
|
|
color: #aabed2;
|
|
font-size: 12px;
|
|
}
|
|
.modal input {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 8px 0 22px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
padding: 12px 13px;
|
|
outline: none;
|
|
}
|
|
.modal > div {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.app-shell {
|
|
grid-template-columns: 72px 1fr;
|
|
}
|
|
.rail {
|
|
padding-inline: 8px;
|
|
}
|
|
.brand-orbit {
|
|
height: 62px;
|
|
}
|
|
.brand-orbit span {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
.rail nav button {
|
|
justify-content: center;
|
|
padding: 12px;
|
|
}
|
|
.rail nav span,
|
|
.channel-mini > div:last-child {
|
|
display: none;
|
|
}
|
|
.channel-mini {
|
|
justify-content: center;
|
|
}
|
|
.app-shell:after {
|
|
inset-left: 72px;
|
|
}
|
|
.page {
|
|
padding: 26px 22px;
|
|
}
|
|
.receipt {
|
|
grid-template-columns: 88px 1fr;
|
|
}
|
|
.receipt p {
|
|
display: none;
|
|
}
|
|
.knowledge-workspace {
|
|
grid-template-columns: 210px 1fr;
|
|
}
|
|
.knowledge-workspace.complete,
|
|
.knowledge-workspace.complete.inspector-closed {
|
|
grid-template-columns: 210px minmax(0, 1fr);
|
|
}
|
|
.document-inspector {
|
|
display: none;
|
|
}
|
|
.split-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.channel-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.channel-context {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|