Base webui and backend additions
This commit is contained in:
+168
-9
@@ -1,7 +1,7 @@
|
||||
.app-shell {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
color: #12263a;
|
||||
color: var(--ctp-text);
|
||||
font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,13 +10,16 @@
|
||||
flex-direction: column;
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
background: #f7fafc;
|
||||
border-right: 1px solid #c5d4e0;
|
||||
background: var(--ctp-mantle);
|
||||
border-right: 1px solid var(--ctp-surface0);
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
border-color 160ms ease;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
border-bottom: 1px solid #c5d4e0;
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -25,13 +28,14 @@
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
color: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.version-line {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.4;
|
||||
color: #3a5166;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.version-line + .version-line {
|
||||
@@ -49,7 +53,7 @@
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid #c5d4e0;
|
||||
border-top: 1px solid var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -67,14 +71,21 @@
|
||||
font-size: 0.95rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #e4eef5;
|
||||
background: var(--ctp-mauve-hover);
|
||||
}
|
||||
|
||||
.nav-item:focus-visible {
|
||||
outline: 2px solid var(--ctp-mauve);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
background: #d7e7f2;
|
||||
background: var(--ctp-mauve-muted);
|
||||
color: var(--ctp-mauve);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -96,12 +107,160 @@
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
color: #3a5166;
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.config-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.15rem 0.25rem;
|
||||
border-bottom: 1px solid var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.config-tab {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
background: transparent;
|
||||
color: var(--ctp-subtext1);
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.config-tab:hover {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.config-tab-active {
|
||||
color: var(--ctp-mauve);
|
||||
border-bottom-color: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.config-tab:focus-visible {
|
||||
outline: 2px solid var(--ctp-mauve);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.config-tab-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.config-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.config-field label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
max-width: 16rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.35rem;
|
||||
background: var(--ctp-mantle);
|
||||
color: var(--ctp-text);
|
||||
font: inherit;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-select:focus-visible {
|
||||
outline: 2px solid var(--ctp-mauve);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.config-hint {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.config-empty {
|
||||
margin: 0;
|
||||
max-width: 36rem;
|
||||
line-height: 1.5;
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.config-action-revert,
|
||||
.config-action-save {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.35rem;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 550;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.config-action-revert {
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
background: transparent;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.config-action-revert:hover:not(:disabled) {
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.config-action-save {
|
||||
border: 1px solid var(--ctp-mauve);
|
||||
background: var(--ctp-mauve);
|
||||
color: var(--ctp-base);
|
||||
}
|
||||
|
||||
.config-action-save:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.config-action-revert:disabled,
|
||||
.config-action-save:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.config-action-revert:focus-visible,
|
||||
.config-action-save:focus-visible {
|
||||
outline: 2px solid var(--ctp-mauve);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
Reference in New Issue
Block a user