You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
672 lines
14 KiB
672 lines
14 KiB
/* =========================================================
|
|
Nexo primitives — desktop-first.
|
|
Mobile is an adaptation; baseline assumes ≥1024px.
|
|
Scoped under `.nx-shell` so class names don't leak.
|
|
========================================================= */
|
|
|
|
.nx-shell {
|
|
font-family: var(--nx-font-body);
|
|
font-size: var(--nx-text-base);
|
|
color: var(--nx-fg);
|
|
background: var(--nx-bg);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: 'cv11', 'ss01';
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.nx-shell *,
|
|
.nx-shell *::before,
|
|
.nx-shell *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nx-shell button {
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.nx-shell input,
|
|
.nx-shell textarea,
|
|
.nx-shell select {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.nx-shell :focus {
|
|
outline: none;
|
|
}
|
|
.nx-shell :focus-visible {
|
|
outline: 2px solid var(--nx-accent);
|
|
outline-offset: 2px;
|
|
border-radius: var(--nx-radius-sm);
|
|
}
|
|
|
|
.nx-shell a {
|
|
color: var(--nx-fg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ---------- Type scale helpers ---------- */
|
|
.nx-h1 {
|
|
font-family: var(--nx-font-display);
|
|
font-size: var(--nx-text-3xl);
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
.nx-h2 {
|
|
font-family: var(--nx-font-display);
|
|
font-size: var(--nx-text-2xl);
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
.nx-h3 {
|
|
font-size: var(--nx-text-lg);
|
|
font-weight: 600;
|
|
letter-spacing: -0.005em;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
}
|
|
.nx-eyebrow {
|
|
font-size: var(--nx-text-xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--nx-fg-muted);
|
|
}
|
|
.nx-text-muted {
|
|
color: var(--nx-fg-muted);
|
|
}
|
|
.nx-text-sm {
|
|
font-size: var(--nx-text-sm);
|
|
}
|
|
|
|
/* ---------- Buttons ---------- */
|
|
.nx-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--nx-radius-md);
|
|
font-weight: 500;
|
|
font-size: var(--nx-text-sm);
|
|
letter-spacing: -0.005em;
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--nx-dur-fast) var(--nx-soft-curve),
|
|
border-color var(--nx-dur-fast) var(--nx-soft-curve),
|
|
color var(--nx-dur-fast) var(--nx-soft-curve),
|
|
box-shadow var(--nx-dur-fast) var(--nx-soft-curve);
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
}
|
|
.nx-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nx-btn-primary {
|
|
background: var(--nx-accent);
|
|
color: var(--nx-accent-fg);
|
|
border-color: var(--nx-accent);
|
|
box-shadow: var(--nx-shadow-xs);
|
|
}
|
|
.nx-btn-primary:hover:not(:disabled) {
|
|
background: var(--nx-accent-strong);
|
|
border-color: var(--nx-accent-strong);
|
|
}
|
|
.nx-btn-primary:focus-visible {
|
|
box-shadow: var(--nx-ring-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.nx-btn-secondary {
|
|
background: var(--nx-bg-elevated);
|
|
color: var(--nx-fg);
|
|
border-color: var(--nx-border-strong);
|
|
box-shadow: var(--nx-shadow-xs);
|
|
}
|
|
.nx-btn-secondary:hover:not(:disabled) {
|
|
background: var(--nx-bg-inset);
|
|
border-color: var(--nx-border-strong);
|
|
}
|
|
|
|
.nx-btn-ghost {
|
|
background: transparent;
|
|
color: var(--nx-fg-muted);
|
|
}
|
|
.nx-btn-ghost:hover:not(:disabled) {
|
|
background: var(--nx-bg-inset);
|
|
color: var(--nx-fg);
|
|
}
|
|
|
|
.nx-btn-danger {
|
|
background: var(--nx-danger);
|
|
color: var(--nx-fg-on-accent);
|
|
border-color: var(--nx-danger);
|
|
}
|
|
.nx-btn-danger:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--nx-danger) 90%, black);
|
|
}
|
|
|
|
.nx-btn-block {
|
|
width: 100%;
|
|
}
|
|
.nx-btn-lg {
|
|
height: 44px;
|
|
padding: 0 18px;
|
|
font-size: var(--nx-text-md);
|
|
}
|
|
.nx-btn-sm {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
font-size: var(--nx-text-xs);
|
|
}
|
|
|
|
/* Icon-only square button. Used in toolbars, headers, photo cards. */
|
|
.nx-icon-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--nx-radius-md);
|
|
background: transparent;
|
|
color: var(--nx-fg-muted);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--nx-dur-fast) var(--nx-soft-curve),
|
|
color var(--nx-dur-fast) var(--nx-soft-curve);
|
|
}
|
|
.nx-icon-btn:hover:not(:disabled) {
|
|
background: var(--nx-bg-inset);
|
|
color: var(--nx-fg);
|
|
}
|
|
.nx-icon-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ---------- Form fields ---------- */
|
|
.nx-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin: 0;
|
|
}
|
|
.nx-field-label {
|
|
font-size: var(--nx-text-sm);
|
|
font-weight: 500;
|
|
color: var(--nx-fg);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.nx-field-input,
|
|
.nx-field-textarea,
|
|
.nx-field-select {
|
|
width: 100%;
|
|
min-height: 36px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--nx-border-strong);
|
|
border-radius: var(--nx-radius-md);
|
|
background: var(--nx-bg-elevated);
|
|
color: var(--nx-fg);
|
|
font-size: var(--nx-text-sm);
|
|
transition:
|
|
border-color var(--nx-dur-fast) var(--nx-soft-curve),
|
|
box-shadow var(--nx-dur-fast) var(--nx-soft-curve);
|
|
}
|
|
.nx-field-textarea {
|
|
min-height: 88px;
|
|
resize: vertical;
|
|
line-height: 1.5;
|
|
}
|
|
.nx-field-input:focus,
|
|
.nx-field-textarea:focus,
|
|
.nx-field-select:focus {
|
|
border-color: var(--nx-accent);
|
|
box-shadow: var(--nx-ring-accent);
|
|
outline: none;
|
|
}
|
|
.nx-field-input::placeholder,
|
|
.nx-field-textarea::placeholder {
|
|
color: var(--nx-fg-subtle);
|
|
}
|
|
|
|
.nx-field-input[aria-invalid='true'],
|
|
.nx-field.has-error .nx-field-input,
|
|
.nx-field.has-error .nx-field-textarea,
|
|
.nx-field.has-error .nx-field-select {
|
|
border-color: var(--nx-danger);
|
|
}
|
|
.nx-field.has-error .nx-field-input:focus,
|
|
.nx-field.has-error .nx-field-textarea:focus,
|
|
.nx-field.has-error .nx-field-select:focus {
|
|
box-shadow: var(--nx-ring-danger);
|
|
}
|
|
.nx-field-help {
|
|
font-size: var(--nx-text-xs);
|
|
color: var(--nx-fg-muted);
|
|
margin: 0;
|
|
}
|
|
.nx-field-error {
|
|
font-size: var(--nx-text-xs);
|
|
color: var(--nx-danger);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Strength meter */
|
|
.nx-strength {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 4px;
|
|
}
|
|
.nx-strength-bar {
|
|
height: 3px;
|
|
border-radius: var(--nx-radius-pill);
|
|
background: var(--nx-bg-inset);
|
|
transition: background var(--nx-dur-base) var(--nx-soft-curve);
|
|
}
|
|
.nx-strength-bar.on-1 {
|
|
background: var(--nx-danger);
|
|
}
|
|
.nx-strength-bar.on-2 {
|
|
background: var(--nx-warning);
|
|
}
|
|
.nx-strength-bar.on-3 {
|
|
background: var(--nx-info);
|
|
}
|
|
.nx-strength-bar.on-4 {
|
|
background: var(--nx-success);
|
|
}
|
|
|
|
/* Checkbox */
|
|
.nx-check {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
font-size: var(--nx-text-sm);
|
|
color: var(--nx-fg);
|
|
line-height: 1.5;
|
|
}
|
|
.nx-check input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
.nx-check .box {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 1.5px solid var(--nx-border-strong);
|
|
border-radius: var(--nx-radius-xs);
|
|
background: var(--nx-bg-elevated);
|
|
display: grid;
|
|
place-items: center;
|
|
margin-top: 1px;
|
|
transition: all var(--nx-dur-fast) var(--nx-soft-curve);
|
|
}
|
|
.nx-check input:focus-visible ~ .box {
|
|
box-shadow: var(--nx-ring-accent);
|
|
}
|
|
.nx-check input:checked ~ .box {
|
|
background: var(--nx-accent);
|
|
border-color: var(--nx-accent);
|
|
}
|
|
.nx-check input:checked ~ .box::after {
|
|
content: '';
|
|
width: 9px;
|
|
height: 5px;
|
|
border-left: 2px solid var(--nx-accent-fg);
|
|
border-bottom: 2px solid var(--nx-accent-fg);
|
|
transform: rotate(-45deg) translate(1px, -1px);
|
|
}
|
|
|
|
/* ---------- Banners (alerts / inline status) ---------- */
|
|
.nx-banner {
|
|
background: var(--nx-danger-soft);
|
|
border: 1px solid var(--nx-danger-border);
|
|
color: var(--nx-danger);
|
|
padding: 10px 14px;
|
|
border-radius: var(--nx-radius-md);
|
|
margin: 0;
|
|
font-size: var(--nx-text-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.nx-banner-success {
|
|
background: var(--nx-success-soft);
|
|
border-color: var(--nx-success-border);
|
|
color: var(--nx-success);
|
|
}
|
|
.nx-banner-warning {
|
|
background: var(--nx-warning-soft);
|
|
border-color: var(--nx-warning-border);
|
|
color: var(--nx-warning);
|
|
}
|
|
.nx-banner-info {
|
|
background: var(--nx-info-soft);
|
|
border-color: var(--nx-info-border);
|
|
color: var(--nx-info);
|
|
}
|
|
|
|
/* ---------- Pills (filter chips, intent tags) ---------- */
|
|
.nx-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--nx-border-strong);
|
|
background: var(--nx-bg-elevated);
|
|
color: var(--nx-fg);
|
|
border-radius: var(--nx-radius-pill);
|
|
font-size: var(--nx-text-xs);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--nx-dur-fast) var(--nx-soft-curve);
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
.nx-pill:hover:not([aria-pressed='true']):not([data-active='true']):not(:disabled) {
|
|
border-color: var(--nx-fg-subtle);
|
|
}
|
|
.nx-pill[aria-pressed='true'],
|
|
.nx-pill[data-active='true'] {
|
|
background: var(--nx-accent-soft);
|
|
border-color: var(--nx-accent-border);
|
|
color: var(--nx-accent);
|
|
}
|
|
.nx-pill:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nx-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--nx-border);
|
|
border-radius: var(--nx-radius-sm);
|
|
font-size: var(--nx-text-xs);
|
|
color: var(--nx-fg-muted);
|
|
background: var(--nx-bg-sunken);
|
|
}
|
|
|
|
/* ---------- Card / Panel ---------- */
|
|
.nx-panel {
|
|
background: var(--nx-bg-elevated);
|
|
border: 1px solid var(--nx-border);
|
|
border-radius: var(--nx-radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
.nx-panel-header {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--nx-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.nx-panel-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ---------- Page header (h1 + lede + actions) ---------- */
|
|
.nx-page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 28px 0 20px;
|
|
border-bottom: 1px solid var(--nx-border);
|
|
margin-bottom: 24px;
|
|
}
|
|
.nx-page-header .titles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.nx-page-header .lede {
|
|
font-size: var(--nx-text-sm);
|
|
color: var(--nx-fg-muted);
|
|
margin: 0;
|
|
}
|
|
.nx-page-header .actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---------- Empty state ---------- */
|
|
.nx-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 12px;
|
|
padding: 60px 32px;
|
|
color: var(--nx-fg-muted);
|
|
}
|
|
.nx-empty-art {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--nx-radius-lg);
|
|
background: var(--nx-bg-inset);
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--nx-fg-muted);
|
|
}
|
|
.nx-empty h3 {
|
|
font-size: var(--nx-text-lg);
|
|
font-weight: 600;
|
|
color: var(--nx-fg);
|
|
margin: 0;
|
|
}
|
|
.nx-empty p {
|
|
margin: 0;
|
|
font-size: var(--nx-text-sm);
|
|
max-width: 36ch;
|
|
}
|
|
|
|
/* ---------- Skeletons ---------- */
|
|
.nx-skel {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--nx-bg-inset) 0%,
|
|
color-mix(in srgb, var(--nx-fg) 4%, var(--nx-bg-inset)) 50%,
|
|
var(--nx-bg-inset) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: nx-shimmer 1.6s linear infinite;
|
|
border-radius: var(--nx-radius-md);
|
|
}
|
|
@keyframes nx-shimmer {
|
|
from {
|
|
background-position: 200% 0;
|
|
}
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* ---------- Toast ---------- */
|
|
.nx-toast-host {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: var(--nx-z-toast);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
width: 360px;
|
|
max-width: calc(100vw - 32px);
|
|
}
|
|
.nx-toast {
|
|
pointer-events: auto;
|
|
background: var(--nx-bg-elevated);
|
|
color: var(--nx-fg);
|
|
padding: 12px 14px;
|
|
border-radius: var(--nx-radius-md);
|
|
border: 1px solid var(--nx-border);
|
|
box-shadow: var(--nx-shadow-lg);
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: var(--nx-text-sm);
|
|
animation: nx-toast-in var(--nx-dur-slow) var(--nx-step-curve);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
@keyframes nx-toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.nx-toast .icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--nx-radius-md);
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
background: var(--nx-accent-soft);
|
|
color: var(--nx-accent);
|
|
}
|
|
.nx-toast .body {
|
|
min-width: 0;
|
|
}
|
|
.nx-toast .title {
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.nx-toast .msg {
|
|
color: var(--nx-fg-muted);
|
|
font-size: var(--nx-text-xs);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-top: 2px;
|
|
}
|
|
.nx-toast .close {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--nx-fg-muted);
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--nx-radius-sm);
|
|
}
|
|
.nx-toast .close:hover {
|
|
background: var(--nx-bg-inset);
|
|
color: var(--nx-fg);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.nx-toast-host {
|
|
top: auto;
|
|
bottom: 80px;
|
|
left: 16px;
|
|
right: 16px;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
/* ---------- Modal ---------- */
|
|
.nx-modal-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--nx-bg-overlay);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
z-index: var(--nx-z-modal);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
animation: nx-fade-in var(--nx-dur-base) var(--nx-soft-curve);
|
|
}
|
|
@keyframes nx-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.nx-modal {
|
|
background: var(--nx-bg-elevated);
|
|
border: 1px solid var(--nx-border);
|
|
border-radius: var(--nx-radius-xl);
|
|
box-shadow: var(--nx-shadow-xl);
|
|
max-width: 420px;
|
|
width: 100%;
|
|
padding: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
animation: nx-modal-in var(--nx-dur-slow) var(--nx-step-curve);
|
|
}
|
|
@keyframes nx-modal-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.nx-modal-headline {
|
|
font-family: var(--nx-font-display);
|
|
font-size: var(--nx-text-2xl);
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
.nx-modal-sub {
|
|
color: var(--nx-fg-muted);
|
|
font-size: var(--nx-text-sm);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
.nx-modal-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|