Add shared frontend primitive components
This commit is contained in:
@@ -721,6 +721,234 @@ pre,
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.ui-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.68rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-chip);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ui-status-chip.is-accent {
|
||||
border-color: color-mix(in srgb, var(--accent-4) 42%, var(--border-subtle));
|
||||
background: color-mix(in srgb, var(--accent-3) 16%, var(--surface-chip));
|
||||
color: var(--accent-5);
|
||||
}
|
||||
|
||||
.ui-status-chip.is-success {
|
||||
border-color: color-mix(in srgb, var(--success-4) 36%, var(--border-subtle));
|
||||
background: color-mix(in srgb, var(--success-3) 14%, var(--surface-chip));
|
||||
color: var(--success-5);
|
||||
}
|
||||
|
||||
.ui-status-chip.is-warning {
|
||||
border-color: color-mix(in srgb, var(--warning-4) 36%, var(--border-subtle));
|
||||
background: color-mix(in srgb, var(--warning-3) 14%, var(--surface-chip));
|
||||
color: var(--warning-5);
|
||||
}
|
||||
|
||||
.ui-status-chip.is-danger {
|
||||
border-color: color-mix(in srgb, var(--danger-4) 36%, var(--border-subtle));
|
||||
background: color-mix(in srgb, var(--danger-3) 14%, var(--surface-chip));
|
||||
color: var(--danger-5);
|
||||
}
|
||||
|
||||
.ui-status-chip.is-info {
|
||||
border-color: color-mix(in srgb, var(--info-4) 36%, var(--border-subtle));
|
||||
background: color-mix(in srgb, var(--info-3) 14%, var(--surface-chip));
|
||||
color: var(--info-5);
|
||||
}
|
||||
|
||||
.ui-status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ui-status-indicator-dot {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--border-strong);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
|
||||
}
|
||||
|
||||
.ui-status-indicator.is-accent {
|
||||
color: var(--accent-5);
|
||||
}
|
||||
|
||||
.ui-status-indicator.is-success {
|
||||
color: var(--success-5);
|
||||
}
|
||||
|
||||
.ui-status-indicator.is-warning {
|
||||
color: var(--warning-5);
|
||||
}
|
||||
|
||||
.ui-status-indicator.is-danger {
|
||||
color: var(--danger-5);
|
||||
}
|
||||
|
||||
.ui-status-indicator.is-info {
|
||||
color: var(--info-5);
|
||||
}
|
||||
|
||||
.app-bar-action-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
|
||||
color: var(--text-strong);
|
||||
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.app-bar-action-button:hover:not(:disabled) {
|
||||
border-color: var(--border-strong);
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.app-bar-action-button:disabled {
|
||||
opacity: 0.78;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.segmented-tabs {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
|
||||
}
|
||||
|
||||
.segmented-tabs-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.segmented-tabs-button.is-selected {
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text-strong);
|
||||
box-shadow: 0 10px 24px -18px var(--shadow-strong);
|
||||
}
|
||||
|
||||
.segmented-tabs-badge {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.inspector-section {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
|
||||
box-shadow: 0 16px 36px -32px var(--shadow-strong);
|
||||
}
|
||||
|
||||
.inspector-section-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.inspector-section-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.inspector-section-copy {
|
||||
margin: 0.2rem 0 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.inspector-section-body {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.surface-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
border: none;
|
||||
background: rgba(15, 17, 23, 0.48);
|
||||
}
|
||||
|
||||
.surface-drawer {
|
||||
position: fixed;
|
||||
z-index: 95;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-elevated);
|
||||
box-shadow: 0 24px 54px -28px var(--shadow-strong);
|
||||
}
|
||||
|
||||
.surface-drawer.is-end {
|
||||
top: calc(var(--shell-header-height) + 1rem);
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: min(24rem, calc(100vw - 2rem));
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
.surface-drawer.is-bottom {
|
||||
right: 0.75rem;
|
||||
bottom: calc(var(--shell-mobile-nav-height) + 0.75rem);
|
||||
left: 0.75rem;
|
||||
max-height: min(70vh, 36rem);
|
||||
border-radius: 1.25rem 1.25rem 0 0;
|
||||
}
|
||||
|
||||
.surface-drawer-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.surface-drawer-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.surface-drawer-header-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.surface-drawer-body {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 0 1rem 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.details-block {
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user