refactor(css): split css files
This commit is contained in:
parent
1dae7e6719
commit
378d72ed94
8 changed files with 1363 additions and 1346 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -18,3 +18,4 @@ session-*.md
|
|||
|
||||
# User defined
|
||||
nosync
|
||||
nogit
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
88
client/src/ui/styles/base.css
Normal file
88
client/src/ui/styles/base.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-3);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.sb-workbench,
|
||||
.ui-workbench {
|
||||
min-height: 100vh;
|
||||
padding: var(--space-6);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 180px),
|
||||
var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.ui-stack--tight {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.ui-cluster {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ui-title {
|
||||
margin: 0;
|
||||
font-size: var(--text-6);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ui-subtitle {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-2);
|
||||
}
|
||||
|
||||
.ui-copy {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.ui-text-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ui-kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 18px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: 3px;
|
||||
background: var(--color-bg-panel);
|
||||
font: 600 var(--text-1) / 1 var(--font-mono);
|
||||
}
|
||||
|
||||
.ui-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
177
client/src/ui/styles/layout.css
Normal file
177
client/src/ui/styles/layout.css
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
.app-shell {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-rail {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-6);
|
||||
min-height: 100vh;
|
||||
padding: var(--space-5);
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: color-mix(in srgb, var(--color-bg-panel) 92%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
padding: var(--space-6);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
align-content: start;
|
||||
background: linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 180px);
|
||||
}
|
||||
|
||||
.nav-rail__brand {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-rail__brand-mark,
|
||||
.nav-rail__link-mark {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-accent-strong);
|
||||
font: 700 var(--text-1) / 1 var(--font-mono);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.nav-rail__link-mark svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-rail__eyebrow,
|
||||
.page-header__eyebrow {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--color-text-soft);
|
||||
font-size: var(--text-1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.nav-rail__title,
|
||||
.page-header__title {
|
||||
margin: 0;
|
||||
font-size: var(--text-6);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-rail__nav {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nav-rail__footer {
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.nav-rail__theme-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-rail__link {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-2);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-rail__link:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.nav-rail__link:focus-visible,
|
||||
.nav-rail__link--active {
|
||||
outline: none;
|
||||
background: var(--color-accent-soft);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent-strong);
|
||||
}
|
||||
|
||||
.ui-split-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 1.1fr) minmax(0, 1.4fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pub-bg-canvas-wrap {
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.pub-bg-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .pub-bg-canvas {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.ui-split-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav-rail {
|
||||
min-height: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.nav-rail__nav {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.ui-split-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.workspace {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
70
client/src/ui/styles/pages.css
Normal file
70
client/src/ui/styles/pages.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.script-editor {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-inset);
|
||||
}
|
||||
|
||||
.script-editor > * {
|
||||
height: 600px !important;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.script-editor .monaco-editor,
|
||||
.script-editor .monaco-editor-background,
|
||||
.script-editor .overflow-guard {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.script-target {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.script-target__primary {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.script-target__secondary {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-1);
|
||||
}
|
||||
|
||||
.api-key-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.api-key-cell__value {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.script-editor {
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
.script-editor > * {
|
||||
height: 520px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.script-editor {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.script-editor > * {
|
||||
height: 420px !important;
|
||||
}
|
||||
}
|
||||
420
client/src/ui/styles/patterns.css
Normal file
420
client/src/ui/styles/patterns.css
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
.ui-panel {
|
||||
min-width: 0;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
box-shadow: var(--shadow-panel);
|
||||
}
|
||||
|
||||
.ui-panel__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.ui-panel__body {
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.ui-panel__header-copy {
|
||||
flex: 1 1 0;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-panel__title,
|
||||
.panel-state__title {
|
||||
margin: 0;
|
||||
font-size: var(--text-5);
|
||||
}
|
||||
|
||||
.ui-command-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
}
|
||||
|
||||
.ui-command-bar__group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-command-bar__hint {
|
||||
color: var(--color-text-soft);
|
||||
font-size: var(--text-1);
|
||||
}
|
||||
|
||||
.ui-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-3);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.summary-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-strip__item {
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
box-shadow: var(--shadow-panel);
|
||||
}
|
||||
|
||||
.summary-strip__label,
|
||||
.summary-strip__hint,
|
||||
.panel-state__description {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.summary-strip__label {
|
||||
font-size: var(--text-2);
|
||||
}
|
||||
|
||||
.summary-strip__value {
|
||||
margin: var(--space-2) 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-strip__hint {
|
||||
font-size: var(--text-1);
|
||||
}
|
||||
|
||||
.page-header__copy {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-header__description {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
.page-header__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ui-form {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.ui-form__section {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.ui-app-page {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.ui-row-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.ui-chip-group {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.ui-section-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.ui-state-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-state {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-6);
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-panel);
|
||||
}
|
||||
|
||||
.meta-cluster {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-2) var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-key {
|
||||
color: var(--color-text-soft);
|
||||
font-size: var(--text-1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
min-width: 0;
|
||||
font-size: var(--text-2);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-data-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-data-grid__shell {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
box-shadow: var(--shadow-panel);
|
||||
}
|
||||
|
||||
.ui-data-grid__table {
|
||||
width: 100%;
|
||||
min-width: 720px;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-2);
|
||||
}
|
||||
|
||||
.ui-data-grid__table th,
|
||||
.ui-data-grid__table td {
|
||||
padding: 0 var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
height: var(--row-height-dense);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-data-grid__table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-bg-panel);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-1);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui-data-grid__row:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.ui-data-grid__row--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-data-grid__cell--mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ui-data-grid__truncate {
|
||||
max-width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-data-grid__status {
|
||||
padding: var(--space-6);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.ui-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui-pagination__cluster {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.ui-pagination__button {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-pagination__button[disabled] {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ui-log-console {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.ui-log-console__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui-log-console__surface {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto minmax(0, 1fr) auto;
|
||||
grid-auto-rows: min-content;
|
||||
overflow: auto;
|
||||
max-height: 420px;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-inset);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-1);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ui-log-console__line {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
min-height: 18px;
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-1);
|
||||
}
|
||||
|
||||
.ui-log-console__line:hover {
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
}
|
||||
|
||||
.ui-log-console__line-number,
|
||||
.ui-log-console__timestamp {
|
||||
color: var(--color-text-soft);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-log-console__message {
|
||||
min-width: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ui-log-console__message--nowrap {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui-log-console__copy {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ui-log-console__copy-button {
|
||||
min-width: auto;
|
||||
min-height: 14px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-1);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-log-console__copy-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.ui-log-console__line:hover .ui-log-console__copy,
|
||||
.ui-log-console__line:focus-within .ui-log-console__copy {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.ui-data-grid__table {
|
||||
min-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.page-header {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.ui-command-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.page-header__actions {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.ui-panel__header {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.ui-data-grid__table {
|
||||
min-width: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ui-panel__header,
|
||||
.ui-panel__body {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.ui-data-grid__table {
|
||||
min-width: 480px;
|
||||
}
|
||||
}
|
||||
447
client/src/ui/styles/primitives.css
Normal file
447
client/src/ui/styles/primitives.css
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
.ui-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-height: var(--control-height-dense);
|
||||
padding: 0 var(--space-4);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-panel);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-button svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.ui-button--icon {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-button__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.ui-button__label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.ui-button:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.ui-button:focus-visible,
|
||||
.ui-input:focus-visible,
|
||||
.ui-textarea:focus-visible,
|
||||
.ui-select__trigger:focus-visible,
|
||||
.ui-tabs__trigger:focus-visible,
|
||||
.ui-pagination__button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.ui-button--primary {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent-strong);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-button--danger {
|
||||
background: var(--color-danger-soft);
|
||||
border-color: var(--color-border-danger);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.ui-button[disabled] {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ui-field {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.ui-field__control-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ui-field__control-fill {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-field__label {
|
||||
font-size: var(--text-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ui-field__hint,
|
||||
.ui-field__description {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-1);
|
||||
}
|
||||
|
||||
.ui-field__error {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--text-1);
|
||||
}
|
||||
|
||||
.ui-field__description--mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ui-input,
|
||||
.ui-textarea,
|
||||
.ui-select__trigger {
|
||||
width: 100%;
|
||||
min-height: var(--control-height-dense);
|
||||
padding: 0 var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui-textarea {
|
||||
min-height: 88px;
|
||||
padding-top: var(--space-3);
|
||||
padding-bottom: var(--space-3);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ui-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 14px;
|
||||
height: fit-content;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
font-size: var(--text-1);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.ui-badge--neutral {
|
||||
background: var(--color-bg-inset);
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.ui-badge--success {
|
||||
background: var(--color-success-soft);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.ui-badge--warning {
|
||||
background: var(--color-warning-soft);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.ui-badge--danger {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.ui-badge--info {
|
||||
background: var(--color-info-soft);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.ui-tabs {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-tabs__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-panel);
|
||||
}
|
||||
|
||||
.ui-tabs__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 28px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 0;
|
||||
border-radius: var(--radius-1);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-tabs__trigger[data-selected] {
|
||||
background: var(--color-accent-soft);
|
||||
color: var(--color-accent-strong);
|
||||
}
|
||||
|
||||
.ui-tabs__content {
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.ui-dialog__overlay,
|
||||
.ui-popover__overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgb(10 14 20 / 0.56);
|
||||
}
|
||||
|
||||
.ui-dialog__content,
|
||||
.ui-popover__content,
|
||||
.ui-dropdown__content,
|
||||
.ui-tooltip__content,
|
||||
.ui-select__content {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-dialog);
|
||||
}
|
||||
|
||||
.ui-dialog__content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: min(720px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 32px);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ui-dialog__header,
|
||||
.ui-dialog__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.ui-dialog__header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.ui-dialog__body {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.ui-dialog__footer {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.ui-dialog__content--compact {
|
||||
width: min(480px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.ui-tooltip__content,
|
||||
.ui-dropdown__content,
|
||||
.ui-popover__content,
|
||||
.ui-select__content {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.ui-dropdown__item,
|
||||
.ui-select__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
min-height: 30px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-dropdown__item svg,
|
||||
.ui-select__item svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.ui-dropdown__item[data-highlighted],
|
||||
.ui-select__item[data-highlighted] {
|
||||
background: var(--color-bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ui-dropdown__separator {
|
||||
margin: var(--space-2) 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.ui-checkbox,
|
||||
.ui-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-checkbox__control,
|
||||
.ui-switch__control {
|
||||
position: relative;
|
||||
flex: none;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.ui-checkbox__control {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ui-checkbox__indicator {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--color-accent);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ui-switch__control {
|
||||
width: 34px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ui-switch__thumb {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-text-soft);
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
.ui-switch__control[data-checked] {
|
||||
background: var(--color-accent-soft);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.ui-switch__control[data-checked] .ui-switch__thumb {
|
||||
transform: translateX(16px);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.ui-select {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.ui-select__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-select__value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-alert {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-left-width: 4px;
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.ui-alert--info {
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.ui-alert--success {
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.ui-alert--warning {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.ui-alert--danger {
|
||||
border-left-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.ui-toast-region {
|
||||
position: fixed;
|
||||
right: var(--space-6);
|
||||
bottom: var(--space-6);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.ui-toast-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.ui-toast {
|
||||
min-width: 280px;
|
||||
max-width: 360px;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--color-bg-elevated);
|
||||
box-shadow: var(--shadow-dialog);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.ui-button--icon {
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.ui-button--icon .ui-button__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.ui-tabs__trigger {
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui-tabs__content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
154
client/src/ui/styles/tokens.css
Normal file
154
client/src/ui/styles/tokens.css
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
--font-ui: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Consolas", monospace;
|
||||
|
||||
--text-1: 11px;
|
||||
--text-2: 12px;
|
||||
--text-3: 13px;
|
||||
--text-4: 14px;
|
||||
--text-5: 16px;
|
||||
--text-6: 18px;
|
||||
|
||||
--space-1: 2px;
|
||||
--space-2: 4px;
|
||||
--space-3: 6px;
|
||||
--space-4: 8px;
|
||||
--space-5: 12px;
|
||||
--space-6: 16px;
|
||||
--space-7: 20px;
|
||||
--space-8: 24px;
|
||||
|
||||
--radius-1: 2px;
|
||||
--radius-2: 4px;
|
||||
--radius-3: 6px;
|
||||
|
||||
--control-height-dense: 30px;
|
||||
--control-height-regular: 36px;
|
||||
--row-height-dense: 34px;
|
||||
--row-height-regular: 40px;
|
||||
|
||||
--color-bg: #f3f4f6;
|
||||
--color-bg-elevated: #ffffff;
|
||||
--color-bg-panel: #fbfbfc;
|
||||
--color-bg-inset: #e8eaee;
|
||||
--color-bg-hover: #eef2f8;
|
||||
|
||||
--color-text: #10131a;
|
||||
--color-text-muted: #5a6472;
|
||||
--color-text-soft: #778092;
|
||||
|
||||
--color-border: #cad1da;
|
||||
--color-border-strong: #98a2b3;
|
||||
--color-border-danger: #cb6f6f;
|
||||
|
||||
--color-accent: #2357d8;
|
||||
--color-accent-strong: #173ea4;
|
||||
--color-accent-soft: #dbe7ff;
|
||||
--color-focus: #2c6bff;
|
||||
--color-success: #1f7a45;
|
||||
--color-success-soft: #daf1e1;
|
||||
--color-warning: #946200;
|
||||
--color-warning-soft: #fff0c2;
|
||||
--color-danger: #b42318;
|
||||
--color-danger-soft: #ffdeda;
|
||||
--color-info-soft: #deebff;
|
||||
|
||||
--shadow-panel: 0 1px 2px rgb(16 24 40 / 0.06);
|
||||
--shadow-dialog: 0 12px 32px rgb(15 23 42 / 0.18);
|
||||
--focus-ring: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg: #111317;
|
||||
--color-bg-elevated: #181b20;
|
||||
--color-bg-panel: #1d2127;
|
||||
--color-bg-inset: #0e1014;
|
||||
--color-bg-hover: #242a33;
|
||||
|
||||
--color-text: #f2f4f8;
|
||||
--color-text-muted: #b5bcc9;
|
||||
--color-text-soft: #929cad;
|
||||
|
||||
--color-border: #353d48;
|
||||
--color-border-strong: #5f6b7a;
|
||||
--color-border-danger: #8c3b3b;
|
||||
|
||||
--color-accent: #79a6ff;
|
||||
--color-accent-strong: #a9c5ff;
|
||||
--color-accent-soft: #162848;
|
||||
--color-focus: #8cb4ff;
|
||||
--color-success: #72d39a;
|
||||
--color-success-soft: #173323;
|
||||
--color-warning: #e7c062;
|
||||
--color-warning-soft: #3f3010;
|
||||
--color-danger: #ff8a80;
|
||||
--color-danger-soft: #431d1f;
|
||||
--color-info-soft: #142840;
|
||||
|
||||
--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35);
|
||||
--shadow-dialog: 0 18px 44px rgb(0 0 0 / 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-bg: #f3f4f6;
|
||||
--color-bg-elevated: #ffffff;
|
||||
--color-bg-panel: #fbfbfc;
|
||||
--color-bg-inset: #e8eaee;
|
||||
--color-bg-hover: #eef2f8;
|
||||
--color-text: #10131a;
|
||||
--color-text-muted: #5a6472;
|
||||
--color-text-soft: #778092;
|
||||
--color-border: #cad1da;
|
||||
--color-border-strong: #98a2b3;
|
||||
--color-border-danger: #cb6f6f;
|
||||
--color-accent: #2357d8;
|
||||
--color-accent-strong: #173ea4;
|
||||
--color-accent-soft: #dbe7ff;
|
||||
--color-focus: #2c6bff;
|
||||
--color-success: #1f7a45;
|
||||
--color-success-soft: #daf1e1;
|
||||
--color-warning: #946200;
|
||||
--color-warning-soft: #fff0c2;
|
||||
--color-danger: #b42318;
|
||||
--color-danger-soft: #ffdeda;
|
||||
--color-info-soft: #deebff;
|
||||
--shadow-panel: 0 1px 2px rgb(16 24 40 / 0.06);
|
||||
--shadow-dialog: 0 12px 32px rgb(15 23 42 / 0.18);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-bg: #111317;
|
||||
--color-bg-elevated: #181b20;
|
||||
--color-bg-panel: #1d2127;
|
||||
--color-bg-inset: #0e1014;
|
||||
--color-bg-hover: #242a33;
|
||||
--color-text: #f2f4f8;
|
||||
--color-text-muted: #b5bcc9;
|
||||
--color-text-soft: #929cad;
|
||||
--color-border: #353d48;
|
||||
--color-border-strong: #5f6b7a;
|
||||
--color-border-danger: #8c3b3b;
|
||||
--color-accent: #79a6ff;
|
||||
--color-accent-strong: #a9c5ff;
|
||||
--color-accent-soft: #162848;
|
||||
--color-focus: #8cb4ff;
|
||||
--color-success: #72d39a;
|
||||
--color-success-soft: #173323;
|
||||
--color-warning: #e7c062;
|
||||
--color-warning-soft: #3f3010;
|
||||
--color-danger: #ff8a80;
|
||||
--color-danger-soft: #431d1f;
|
||||
--color-info-soft: #142840;
|
||||
--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35);
|
||||
--shadow-dialog: 0 18px 44px rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
:root[data-density="regular"] {
|
||||
--control-height-dense: var(--control-height-regular);
|
||||
--row-height-dense: var(--row-height-regular);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue