styles.css•2.9 kB
:root {
color-scheme: light dark;
font-family: "Segoe UI", Tahoma, sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
body {
margin: 0;
padding: 0;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 1rem;
min-height: 100vh;
}
.panel {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(30, 41, 59, 0.7);
}
.panel__controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
.panel__body {
padding: 1rem;
flex: 1;
overflow: auto;
}
.panel__body--vertical {
display: flex;
flex-direction: column;
gap: 1rem;
}
.panel__row {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: rgba(15, 23, 42, 0.5);
padding: 0.75rem;
border-radius: 8px;
}
.code-editor {
width: 100%;
min-height: 320px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.3);
background: #020617;
color: #e2e8f0;
font-family: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.95rem;
padding: 1rem;
resize: vertical;
}
textarea,
input,
button,
select {
font-family: inherit;
}
textarea,
input,
select {
background: rgba(15, 23, 42, 0.8);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 6px;
padding: 0.5rem;
}
button {
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: none;
background: #38bdf8;
color: #020617;
font-weight: 600;
cursor: pointer;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.status-display {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.status-message {
border-left: 4px solid #38bdf8;
padding: 0.5rem 0.75rem;
background: rgba(15, 23, 42, 0.5);
border-radius: 6px;
}
.status-message--error {
border-color: #f97316;
}
.status-message header {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #94a3b8;
}
.status-message pre {
margin: 0.5rem 0 0;
white-space: pre-wrap;
font-family: inherit;
}
.graph-metrics ul {
list-style: none;
padding: 0;
margin: 0.25rem 0 0;
}
.graph-metrics li {
padding: 0.25rem 0;
}
.error {
color: #f97316;
}
@media (max-width: 960px) {
main {
grid-template-columns: 1fr;
}
}
.health-indicator {
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
font-size: 0.8rem;
}
.health-indicator span {
display: inline-flex;
gap: 0.25rem;
align-items: center;
}