mirror of
https://github.com/agentscope-ai/ReMe.git
synced 2026-08-28 05:25:04 +00:00
b8f48c8004
* feat(web): add the ReMe workspace frontend * fix(web): use public npm registry in lockfile * fix(web): address workspace review feedback * fix(web): protect drafts and report file limits * fix(web): finish chat streams after tab switches * feat(web): rename frontend to ReMe Studio
384 lines
7.5 KiB
CSS
384 lines
7.5 KiB
CSS
.view {
|
|
--graph-node: color-mix(in srgb, var(--muted) 70%, var(--surface));
|
|
--graph-edge: var(--muted);
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--ink);
|
|
background: var(--bg);
|
|
}
|
|
.toolbar {
|
|
min-height: 58px;
|
|
padding: 9px 14px 9px 20px;
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.toolbar > div:first-child {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
.toolbar strong {
|
|
font-size: 14px;
|
|
font-weight: 680;
|
|
}
|
|
.toolbar span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
.actions {
|
|
padding: 3px;
|
|
display: flex;
|
|
gap: 2px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--panel);
|
|
}
|
|
.actions button {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.actions button:hover {
|
|
color: var(--accent);
|
|
background: var(--soft);
|
|
}
|
|
.content {
|
|
position: relative;
|
|
min-height: 0;
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.withDetails {
|
|
grid-template-columns: minmax(0, 1fr) clamp(220px, 22%, 290px);
|
|
}
|
|
.canvas {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: radial-gradient(
|
|
circle at 50% 45%,
|
|
color-mix(in srgb, var(--accent) 8%, transparent),
|
|
transparent 48%
|
|
),
|
|
radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--line) 58%, transparent) 0.7px,
|
|
transparent 0.9px
|
|
);
|
|
background-color: var(--surface);
|
|
background-size:
|
|
auto,
|
|
22px 22px;
|
|
}
|
|
.canvas svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.canvas marker path {
|
|
fill: color-mix(in srgb, var(--graph-edge) 45%, transparent);
|
|
}
|
|
.orbits {
|
|
pointer-events: none;
|
|
}
|
|
.orbits circle {
|
|
fill: none;
|
|
stroke: color-mix(in srgb, var(--graph-edge) 28%, transparent);
|
|
stroke-dasharray: 3 9;
|
|
stroke-width: 1.1;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
.orbits circle:last-child {
|
|
stroke-dasharray: 2 10;
|
|
opacity: 0.72;
|
|
}
|
|
.edges path {
|
|
fill: none;
|
|
stroke: color-mix(in srgb, var(--graph-edge) 26%, transparent);
|
|
stroke-linecap: round;
|
|
stroke-width: 0.9;
|
|
transition:
|
|
opacity 140ms,
|
|
stroke 140ms,
|
|
stroke-width 140ms;
|
|
}
|
|
.edges .edgeActive {
|
|
stroke: color-mix(in srgb, var(--accent) 72%, var(--ink));
|
|
stroke-width: 2.1;
|
|
filter: drop-shadow(
|
|
0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent)
|
|
);
|
|
}
|
|
.node {
|
|
cursor: pointer;
|
|
outline: none;
|
|
touch-action: none;
|
|
transition:
|
|
opacity 140ms,
|
|
transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.node circle {
|
|
transition:
|
|
fill 140ms,
|
|
filter 180ms,
|
|
stroke 140ms,
|
|
transform 140ms;
|
|
}
|
|
.halo {
|
|
fill: transparent;
|
|
opacity: 0;
|
|
stroke: color-mix(in srgb, var(--accent) 44%, transparent);
|
|
stroke-width: 2;
|
|
}
|
|
.dot {
|
|
fill: var(--graph-node);
|
|
stroke: color-mix(in srgb, var(--ink) 55%, var(--muted));
|
|
stroke-width: 1;
|
|
}
|
|
.node:hover .dot,
|
|
.node:focus-visible .dot {
|
|
stroke: var(--accent);
|
|
transform: scale(1.4);
|
|
}
|
|
.hub .dot {
|
|
fill: color-mix(in srgb, var(--accent) 72%, var(--ink));
|
|
stroke: color-mix(in srgb, var(--accent) 68%, var(--ink));
|
|
}
|
|
.root .dot {
|
|
fill: var(--accent);
|
|
stroke: color-mix(in srgb, var(--accent) 65%, var(--ink));
|
|
stroke-width: 1.8;
|
|
filter: drop-shadow(
|
|
0 2px 5px color-mix(in srgb, var(--accent) 30%, transparent)
|
|
);
|
|
}
|
|
.root .halo {
|
|
opacity: 0.25;
|
|
}
|
|
.active .halo {
|
|
opacity: 1;
|
|
}
|
|
.active .dot {
|
|
fill: var(--accent);
|
|
stroke: color-mix(in srgb, var(--accent) 65%, var(--ink));
|
|
stroke-width: 1.8;
|
|
filter: drop-shadow(
|
|
0 3px 6px color-mix(in srgb, var(--accent) 38%, transparent)
|
|
);
|
|
transform: scale(1.32);
|
|
}
|
|
.related .halo {
|
|
opacity: 0.42;
|
|
}
|
|
.dragging {
|
|
cursor: grabbing;
|
|
transition: none;
|
|
}
|
|
.dragging .halo {
|
|
opacity: 1;
|
|
stroke-width: 3;
|
|
}
|
|
.muted {
|
|
opacity: 0.22;
|
|
}
|
|
.labels {
|
|
pointer-events: none;
|
|
}
|
|
.labels text {
|
|
fill: color-mix(in srgb, var(--ink) 72%, var(--muted));
|
|
font-size: 10.5px;
|
|
font-weight: 570;
|
|
paint-order: stroke;
|
|
stroke: var(--surface);
|
|
stroke-linejoin: round;
|
|
stroke-width: 3px;
|
|
}
|
|
.labels .activeLabel {
|
|
fill: #fff;
|
|
stroke: var(--accent);
|
|
stroke-width: 7px;
|
|
font-size: 11px;
|
|
font-weight: 680;
|
|
}
|
|
.legend {
|
|
position: absolute;
|
|
left: 14px;
|
|
bottom: 12px;
|
|
padding: 7px 10px;
|
|
display: flex;
|
|
gap: 13px;
|
|
border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
|
|
border-radius: 9px;
|
|
color: var(--muted);
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
font-size: 10px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.legend span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.legend i {
|
|
width: 9px;
|
|
height: 9px;
|
|
border: 1px solid var(--muted);
|
|
border-radius: 50%;
|
|
background: var(--graph-node);
|
|
}
|
|
.legend b {
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.details {
|
|
min-width: 0;
|
|
padding: 20px 17px;
|
|
overflow: auto;
|
|
border-left: 1px solid var(--line);
|
|
background: var(--panel);
|
|
}
|
|
.details h2 {
|
|
margin: 10px 0 5px;
|
|
overflow-wrap: anywhere;
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
}
|
|
.details > code {
|
|
display: block;
|
|
overflow-wrap: anywhere;
|
|
color: var(--muted);
|
|
font: 10px var(--mono);
|
|
}
|
|
.details > p {
|
|
margin: 15px 0 0;
|
|
color: color-mix(in srgb, var(--ink) 76%, var(--muted));
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
.status {
|
|
width: fit-content;
|
|
padding: 3px 7px;
|
|
border-radius: 999px;
|
|
color: color-mix(in srgb, var(--accent) 70%, var(--ink));
|
|
background: var(--soft);
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
}
|
|
.openFile {
|
|
width: 100%;
|
|
min-height: 34px;
|
|
margin-top: 16px;
|
|
padding: 7px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
|
|
border-radius: 9px;
|
|
color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
}
|
|
.openFile:hover {
|
|
color: #fff;
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
}
|
|
.links {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
.links > strong {
|
|
margin-bottom: 2px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
.links button {
|
|
min-width: 0;
|
|
padding: 7px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
color: var(--ink);
|
|
background: color-mix(in srgb, var(--bg) 68%, transparent);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.links button:hover {
|
|
border-color: var(--line);
|
|
background: var(--bg);
|
|
}
|
|
.links button span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.links button small {
|
|
flex: none;
|
|
color: var(--accent);
|
|
font-size: 10px;
|
|
}
|
|
.state {
|
|
min-height: 220px;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
background: var(--bg);
|
|
font-size: 12px;
|
|
}
|
|
.error {
|
|
color: var(--danger);
|
|
}
|
|
@media (max-width: 720px) {
|
|
.withDetails {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.details {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
width: min(260px, calc(100% - 20px));
|
|
max-height: 45%;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
box-shadow: 0 12px 32px rgba(35, 25, 18, 0.18);
|
|
}
|
|
.legend {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.node,
|
|
.edges path {
|
|
transition: none;
|
|
}
|
|
}
|