2265 lines
48 KiB
CSS
2265 lines
48 KiB
CSS
@layer components {
|
|
::selection {
|
|
color: var(--lumi-button-text);
|
|
background: var(--lumi-primary);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: var(--lumi-focus-size) solid color-mix(in srgb, var(--lumi-focus) 78%, transparent);
|
|
outline-offset: var(--lumi-focus-offset);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
color: var(--lumi-text);
|
|
font-family: var(--lumi-font-display);
|
|
line-height: 1.18;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(clamp(1.75rem, 4vw, 2.55rem) * var(--lumi-heading-scale));
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(clamp(1.25rem, 2.5vw, 1.6rem) * var(--lumi-heading-scale));
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
p {
|
|
max-width: 75ch;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-block;
|
|
margin-bottom: var(--lumi-space-1);
|
|
color: var(--lumi-primary);
|
|
font: 700 0.75rem/1 var(--lumi-font-display);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
a {
|
|
color: var(--lumi-link);
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--lumi-font-mono);
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(1.5rem, 5vw, 3.5rem);
|
|
border: 1px solid color-mix(in srgb, var(--lumi-primary) 25%, var(--lumi-border));
|
|
border-radius: var(--lumi-radius-lg);
|
|
background:
|
|
linear-gradient(125deg, color-mix(in srgb, var(--lumi-primary) 18%, transparent), transparent 56%),
|
|
linear-gradient(310deg, color-mix(in srgb, var(--lumi-accent) 17%, transparent), transparent 50%),
|
|
var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
animation: none;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 14rem;
|
|
height: 14rem;
|
|
right: -6rem;
|
|
top: -7rem;
|
|
border: 2.5rem solid color-mix(in srgb, var(--lumi-primary) 10%, transparent);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 18ch;
|
|
margin-bottom: var(--lumi-space-3);
|
|
}
|
|
|
|
.hero > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.homepage-dynamic-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
|
|
align-items: center;
|
|
gap: var(--lumi-space-5);
|
|
}
|
|
|
|
.homepage-hero-media {
|
|
width: 100%;
|
|
min-height: 18rem;
|
|
aspect-ratio: 16 / 9;
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.homepage-hero-embed-grid {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.homepage-hero-embed-grid.has-secondary {
|
|
grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.homepage-hero-embed-grid .homepage-hero-media {
|
|
min-height: 25rem;
|
|
}
|
|
|
|
.homepage-hero-chat {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.homepage-discord-card {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: var(--lumi-space-4);
|
|
padding: var(--lumi-space-4);
|
|
overflow: auto;
|
|
}
|
|
|
|
.homepage-discord-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.homepage-discord-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-accent);
|
|
color: var(--lumi-accent-contrast);
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.homepage-discord-card small,
|
|
.homepage-discord-label {
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.homepage-discord-label {
|
|
display: block;
|
|
margin-bottom: var(--lumi-space-2);
|
|
font-size: 0.85rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.homepage-discord-pills,
|
|
.homepage-discord-members {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.homepage-discord-pills span,
|
|
.homepage-discord-members span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-2);
|
|
padding: var(--lumi-space-2);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: color-mix(in srgb, var(--lumi-surface) 80%, transparent);
|
|
}
|
|
|
|
.homepage-discord-members img {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.homepage-link-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.homepage-link-button {
|
|
flex: 1 1 14rem;
|
|
min-height: var(--lumi-control-height);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
color: var(--lumi-text);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.homepage-link-button:hover {
|
|
border-color: color-mix(in srgb, var(--lumi-primary) 38%, var(--lumi-border));
|
|
background: var(--lumi-surface-raised);
|
|
}
|
|
|
|
.homepage-link-button img,
|
|
.homepage-link-button > span:first-child {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
flex: 0 0 auto;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.homepage-link-button small {
|
|
display: block;
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.card,
|
|
.panel,
|
|
.lumi-panel {
|
|
padding: clamp(1rem, 2vw, 1.5rem);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: color-mix(in srgb, var(--lumi-surface) 97%, transparent);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
animation: none;
|
|
}
|
|
|
|
.grid .card {
|
|
height: 100%;
|
|
}
|
|
|
|
.card .card {
|
|
background: var(--lumi-surface-subtle);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card > :last-child,
|
|
.panel > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card > .page-header + *,
|
|
.card > .section-header + *,
|
|
.card > h1 + *,
|
|
.card > h2 + *,
|
|
.card > h3 + * {
|
|
margin-top: var(--lumi-space-3);
|
|
}
|
|
|
|
.card > form + *,
|
|
.card > .table-wrap + *,
|
|
.card > details + * {
|
|
margin-top: var(--lumi-space-4);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.section-header > div:first-child {
|
|
min-width: min(100%, 18rem);
|
|
}
|
|
|
|
.section-header :is(h1, h2, h3, p),
|
|
.page-header :is(h1, h2, h3, p) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-header :is(h1, h2, h3) + p,
|
|
.page-header :is(h1, h2, h3) + p {
|
|
margin-top: var(--lumi-space-1);
|
|
}
|
|
|
|
section.card:has(> table.table) {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.button,
|
|
button.button,
|
|
input[type="submit"].button {
|
|
min-height: var(--lumi-control-height);
|
|
width: max-content;
|
|
max-width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--lumi-space-2);
|
|
padding: 0.65rem 1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-button-bg);
|
|
color: var(--lumi-button-text);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
font: 700 0.925rem/1 var(--lumi-font-body);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition:
|
|
transform var(--lumi-transition),
|
|
background var(--lumi-transition),
|
|
border-color var(--lumi-transition),
|
|
box-shadow var(--lumi-transition);
|
|
}
|
|
|
|
.button:hover:not(:disabled):not(.disabled) {
|
|
background: var(--lumi-button-hover);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button:active:not(:disabled):not(.disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.button.subtle,
|
|
.button.secondary {
|
|
border-color: var(--lumi-border);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button.subtle:hover:not(:disabled):not(.disabled),
|
|
.button.secondary:hover:not(:disabled):not(.disabled) {
|
|
border-color: color-mix(in srgb, var(--lumi-primary) 38%, var(--lumi-border));
|
|
background: var(--lumi-surface-raised);
|
|
}
|
|
|
|
.button.danger {
|
|
background: var(--lumi-danger);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button.danger:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--lumi-danger) 84%, black);
|
|
}
|
|
|
|
.button:disabled,
|
|
.button.disabled,
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
border-color: var(--lumi-border);
|
|
background: var(--lumi-field-disabled-bg);
|
|
color: var(--lumi-text-muted);
|
|
opacity: 1;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.lumi-state-btn {
|
|
position: relative;
|
|
width: max-content;
|
|
}
|
|
|
|
.lumi-state-btn[aria-busy="true"] {
|
|
cursor: progress;
|
|
}
|
|
|
|
.lumi-state-btn-content {
|
|
width: max-content;
|
|
max-width: 100%;
|
|
display: grid;
|
|
grid-template-areas: "stack";
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
.lumi-state-btn [data-state-view] {
|
|
grid-area: stack;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--lumi-space-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lumi-state-btn [data-state-view][data-state-hidden="true"] {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lumi-state-btn [data-state-view][data-state-hidden="false"] {
|
|
visibility: visible;
|
|
}
|
|
|
|
.button.full,
|
|
.lumi-state-btn.full {
|
|
width: 100%;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
align-items: center;
|
|
}
|
|
|
|
.form-actions,
|
|
.table-actions,
|
|
.filter-actions,
|
|
.action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.form-actions {
|
|
padding-top: var(--lumi-space-1);
|
|
}
|
|
|
|
.form-grid > .form-actions {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.table-actions form,
|
|
.form-actions form,
|
|
.action-row form {
|
|
margin: 0;
|
|
}
|
|
|
|
.table-sort-button {
|
|
appearance: none;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: inherit;
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-sort-button:focus-visible {
|
|
border-radius: var(--lumi-radius-sm);
|
|
outline: 2px solid var(--lumi-focus);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.form-grid .field.button-group,
|
|
.field.button-group {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.button-group.centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
.button-group .button,
|
|
.button-group button.button,
|
|
.button-group input[type="submit"].button,
|
|
.button-group .lumi-state-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.lumi-user-lookup {
|
|
position: relative;
|
|
}
|
|
|
|
.lumi-user-lookup-results {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: calc(100% + 0.25rem);
|
|
left: 0;
|
|
right: 0;
|
|
max-height: 15rem;
|
|
overflow: auto;
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-card);
|
|
box-shadow: var(--lumi-shadow-lg);
|
|
}
|
|
|
|
.lumi-user-lookup-result {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--lumi-border);
|
|
background: transparent;
|
|
color: var(--lumi-ink);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lumi-user-lookup-result:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.lumi-user-lookup-result:hover,
|
|
.lumi-user-lookup-result:focus {
|
|
background: var(--lumi-surface-2);
|
|
}
|
|
|
|
.lumi-user-lookup-preview {
|
|
margin-top: var(--lumi-space-1);
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-2);
|
|
color: var(--lumi-muted);
|
|
font-size: 0.85rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lumi-state-btn-spinner {
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 0.14em solid color-mix(in srgb, currentColor 28%, transparent);
|
|
border-top-color: currentColor;
|
|
border-radius: 50%;
|
|
animation: lumi-state-spin 750ms linear infinite;
|
|
}
|
|
|
|
.icon-button {
|
|
width: var(--lumi-control-height);
|
|
height: var(--lumi-control-height);
|
|
min-width: var(--lumi-control-height);
|
|
border-color: var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
transition: background var(--lumi-transition), transform var(--lumi-transition);
|
|
}
|
|
|
|
.icon-button:hover {
|
|
background: var(--lumi-surface-raised);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.link {
|
|
color: var(--lumi-link);
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(in srgb, var(--lumi-link) 35%, transparent);
|
|
text-underline-offset: 0.22em;
|
|
}
|
|
|
|
.link:hover {
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: start;
|
|
gap: var(--lumi-space-4);
|
|
}
|
|
|
|
.form-grid .field {
|
|
min-width: 0;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.input-action-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(14rem, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.input-action-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.input-action-form .field {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.input-action-form > :is(.button, button.button, .lumi-state-btn),
|
|
.form-grid > :is(.button, button.button, .lumi-state-btn) {
|
|
align-self: end;
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 0;
|
|
}
|
|
|
|
.lumi-field-group {
|
|
grid-column: 1 / -1;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: var(--lumi-space-4);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: color-mix(in srgb, var(--lumi-surface-subtle) 72%, transparent);
|
|
}
|
|
|
|
.lumi-field-group > legend {
|
|
max-width: calc(100% - var(--lumi-space-4));
|
|
padding: 0.35rem 0.7rem;
|
|
border: 1px solid color-mix(in srgb, var(--lumi-primary) 32%, var(--lumi-border));
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface);
|
|
color: var(--lumi-text);
|
|
font: 800 0.95rem/1.25 var(--lumi-font-display);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
}
|
|
|
|
.lumi-field-group-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: start;
|
|
gap: var(--lumi-space-4);
|
|
margin-top: var(--lumi-space-2);
|
|
}
|
|
|
|
.lumi-field-group > .hint:first-of-type,
|
|
.lumi-field-group-intro {
|
|
margin-top: var(--lumi-space-1);
|
|
}
|
|
|
|
.lumi-field-group > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.lumi-field-group > .homepage-builder,
|
|
.lumi-field-group > .custom-placeholder-list {
|
|
margin-top: var(--lumi-space-4);
|
|
}
|
|
|
|
.lumi-field-group > .homepage-builder + .homepage-builder {
|
|
padding-top: var(--lumi-space-4);
|
|
border-top: 1px solid var(--lumi-border);
|
|
}
|
|
|
|
.lumi-subsection-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-3);
|
|
margin: var(--lumi-space-2) 0 0;
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.82rem;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.lumi-subsection-title::after {
|
|
content: "";
|
|
min-width: var(--lumi-space-5);
|
|
height: 1px;
|
|
flex: 1;
|
|
background: var(--lumi-border);
|
|
}
|
|
|
|
.input-action-row input[type="file"],
|
|
.input-action-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.field > label:first-child,
|
|
fieldset > legend {
|
|
color: var(--lumi-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
|
|
select,
|
|
textarea,
|
|
.table-search {
|
|
width: 100%;
|
|
min-height: var(--lumi-control-height);
|
|
padding: 0.65rem 0.8rem;
|
|
border: 1px solid var(--lumi-input-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-input-bg);
|
|
color: var(--lumi-input-text);
|
|
font: inherit;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
|
|
transition: border-color var(--lumi-transition), box-shadow var(--lumi-transition);
|
|
}
|
|
|
|
textarea {
|
|
min-height: 7rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
input:hover,
|
|
select:hover,
|
|
textarea:hover {
|
|
border-color: var(--lumi-field-hover-border);
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
border-color: var(--lumi-field-focus-border);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lumi-focus) 22%, transparent);
|
|
}
|
|
|
|
input[aria-invalid="true"],
|
|
select[aria-invalid="true"],
|
|
textarea[aria-invalid="true"] {
|
|
border-color: var(--lumi-field-invalid-border);
|
|
background: var(--lumi-field-invalid-bg);
|
|
}
|
|
|
|
input:disabled,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
background: var(--lumi-field-disabled-bg);
|
|
}
|
|
|
|
input:read-only,
|
|
textarea:read-only {
|
|
background: var(--lumi-field-readonly-bg);
|
|
}
|
|
|
|
.field-error {
|
|
display: block;
|
|
color: var(--lumi-danger);
|
|
font-size: var(--lumi-font-size-sm);
|
|
font-weight: var(--lumi-weight-bold);
|
|
}
|
|
|
|
.field-error::before {
|
|
content: "! ";
|
|
}
|
|
|
|
.lumi-form-error-summary {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
accent-color: var(--lumi-primary);
|
|
}
|
|
|
|
input[type="color"] {
|
|
min-width: 3.5rem;
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
}
|
|
|
|
.hint,
|
|
.command-subtitle,
|
|
.table-note,
|
|
.table-page-label {
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.hint,
|
|
.table-note {
|
|
margin-block: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.table-wrap {
|
|
width: 100%;
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
overflow: auto;
|
|
}
|
|
|
|
.table {
|
|
min-width: 42rem;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 0.8rem 0.9rem;
|
|
}
|
|
|
|
.table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--lumi-table-header-bg);
|
|
color: var(--lumi-text-muted);
|
|
font: 700 0.75rem/1.3 var(--lumi-font-display);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.table tbody tr {
|
|
transition: background var(--lumi-transition);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--lumi-table-row-hover);
|
|
}
|
|
|
|
.table tbody tr[aria-selected="true"] { background: var(--lumi-table-row-selected); }
|
|
|
|
.table tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.table td .table-actions {
|
|
min-width: max-content;
|
|
}
|
|
|
|
.command-actions {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.badge,
|
|
.pill,
|
|
.status-indicator,
|
|
.level-pill,
|
|
.origin-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 1.65rem;
|
|
border-radius: var(--lumi-radius-pill);
|
|
}
|
|
|
|
:where(.badge:not(.discord, .both, .twitch, .kick, .youtube, .success, .warning, .danger, .info, .muted)) {
|
|
padding-inline: var(--lumi-space-2);
|
|
border: 1px solid var(--lumi-border);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.status-indicator::before {
|
|
content: "";
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
margin-right: var(--lumi-space-2);
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.status-success {
|
|
color: var(--lumi-success);
|
|
}
|
|
|
|
.badge.success {
|
|
color: var(--lumi-text);
|
|
background: color-mix(in srgb, var(--lumi-success) 12%, var(--lumi-surface));
|
|
border: 1px solid color-mix(in srgb, var(--lumi-success) 35%, var(--lumi-border));
|
|
padding: 0 var(--lumi-space-2);
|
|
}
|
|
|
|
.badge.warning {
|
|
color: var(--lumi-text);
|
|
background: color-mix(in srgb, var(--lumi-warning) 12%, var(--lumi-surface));
|
|
border: 1px solid color-mix(in srgb, var(--lumi-warning) 35%, var(--lumi-border));
|
|
padding: 0 var(--lumi-space-2);
|
|
}
|
|
|
|
.badge.danger {
|
|
color: var(--lumi-text);
|
|
background: color-mix(in srgb, var(--lumi-danger) 12%, var(--lumi-surface));
|
|
border: 1px solid color-mix(in srgb, var(--lumi-danger) 35%, var(--lumi-border));
|
|
padding: 0 var(--lumi-space-2);
|
|
}
|
|
|
|
.badge.info {
|
|
color: var(--lumi-text);
|
|
background: color-mix(in srgb, var(--lumi-info) 12%, var(--lumi-surface));
|
|
border: 1px solid color-mix(in srgb, var(--lumi-info) 35%, var(--lumi-border));
|
|
padding: 0 var(--lumi-space-2);
|
|
}
|
|
|
|
.badge.muted {
|
|
color: var(--lumi-text-muted);
|
|
background: var(--lumi-surface-subtle);
|
|
border: 1px solid var(--lumi-border);
|
|
padding: 0 var(--lumi-space-2);
|
|
}
|
|
|
|
.status-warning {
|
|
color: var(--lumi-warning);
|
|
}
|
|
|
|
.status-danger {
|
|
color: var(--lumi-danger);
|
|
}
|
|
|
|
.flash,
|
|
.alert,
|
|
.callout {
|
|
padding: var(--lumi-space-3) var(--lumi-space-4);
|
|
border: 1px solid var(--lumi-border);
|
|
border-left-width: 4px;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.callout > strong:first-child,
|
|
.alert > strong:first-child {
|
|
display: block;
|
|
margin-bottom: var(--lumi-space-1);
|
|
}
|
|
|
|
.flash.success,
|
|
.alert.success,
|
|
.callout.success {
|
|
border-color: color-mix(in srgb, var(--lumi-success) 45%, var(--lumi-border));
|
|
border-left-color: var(--lumi-success);
|
|
background: color-mix(in srgb, var(--lumi-success) 10%, var(--lumi-surface));
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.flash.error,
|
|
.alert.danger,
|
|
.callout.danger {
|
|
border-color: color-mix(in srgb, var(--lumi-danger) 45%, var(--lumi-border));
|
|
border-left-color: var(--lumi-danger);
|
|
background: color-mix(in srgb, var(--lumi-danger) 10%, var(--lumi-surface));
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.flash.info,
|
|
.alert.info {
|
|
border-left-color: var(--lumi-info);
|
|
background: color-mix(in srgb, var(--lumi-info) 9%, var(--lumi-surface));
|
|
}
|
|
|
|
.is-unsaved {
|
|
border-color: var(--lumi-color-unsaved-border) !important;
|
|
background: var(--lumi-color-unsaved-bg) !important;
|
|
color: var(--lumi-color-unsaved-text);
|
|
box-shadow: 0 0 0 2px var(--lumi-color-unsaved-ring);
|
|
}
|
|
|
|
.lumi-savebar {
|
|
position: fixed;
|
|
top: var(--lumi-space-3);
|
|
left: 50%;
|
|
z-index: var(--lumi-z-savebar);
|
|
width: min(42rem, calc(100vw - 2rem));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-savebar-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-savebar-bg);
|
|
box-shadow: var(--lumi-savebar-shadow);
|
|
backdrop-filter: blur(18px);
|
|
transform: translate(-50%, 0);
|
|
transition: opacity var(--lumi-transition), transform var(--lumi-transition);
|
|
}
|
|
|
|
.lumi-savebar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.lumi-savebar[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.lumi-savebar.has-error {
|
|
border-color: var(--lumi-danger);
|
|
}
|
|
|
|
.lumi-savebar.has-success { border-color: var(--lumi-success-border); }
|
|
|
|
.lumi-event-notices {
|
|
position: fixed;
|
|
right: var(--lumi-space-4);
|
|
bottom: var(--lumi-space-4);
|
|
z-index: var(--lumi-z-notice);
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
width: min(24rem, calc(100vw - 2rem));
|
|
}
|
|
|
|
.lumi-event-notice,
|
|
.lumi-refresh-prompt {
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
}
|
|
|
|
.lumi-event-notice.warning {
|
|
border-color: color-mix(in srgb, var(--lumi-warning) 50%, var(--lumi-border));
|
|
}
|
|
|
|
.lumi-event-notice.danger {
|
|
border-color: color-mix(in srgb, var(--lumi-danger) 55%, var(--lumi-border));
|
|
}
|
|
|
|
.lumi-refresh-prompt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.lumi-expandable-settings {
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
overflow: clip;
|
|
}
|
|
|
|
.lumi-expandable-settings + .lumi-expandable-settings {
|
|
margin-top: var(--lumi-space-3);
|
|
}
|
|
|
|
.lumi-expandable-settings summary {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--lumi-space-3);
|
|
align-items: center;
|
|
padding: var(--lumi-space-3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lumi-expandable-settings summary:hover {
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.lumi-expandable-settings summary strong:first-child {
|
|
color: var(--lumi-text);
|
|
font-family: var(--lumi-font-display);
|
|
}
|
|
|
|
.lumi-expandable-settings[open] summary {
|
|
border-bottom: 1px solid var(--lumi-border);
|
|
}
|
|
|
|
.lumi-expandable-body {
|
|
padding: var(--lumi-space-4);
|
|
}
|
|
|
|
.lumi-preview-line {
|
|
color: var(--lumi-text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.content.is-soft-loading {
|
|
opacity: 0.55;
|
|
transition: opacity 90ms ease;
|
|
}
|
|
|
|
.content.is-soft-loaded {
|
|
animation: lumi-soft-in 140ms ease;
|
|
}
|
|
|
|
.list li {
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.homepage-json-source {
|
|
display: none;
|
|
}
|
|
|
|
.homepage-builder {
|
|
display: grid;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.command-random-replies {
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
margin-bottom: var(--lumi-space-2);
|
|
}
|
|
|
|
.command-random-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(12rem, 1fr) minmax(6rem, 0.2fr) minmax(8rem, 0.25fr) auto;
|
|
gap: var(--lumi-space-2);
|
|
align-items: end;
|
|
}
|
|
|
|
.command-conditional-row {
|
|
grid-template-columns: minmax(10rem, 0.35fr) minmax(16rem, 1fr) auto;
|
|
}
|
|
|
|
.command-policy-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--lumi-space-4);
|
|
}
|
|
|
|
.command-policy-section {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: var(--lumi-space-3);
|
|
margin: 0;
|
|
padding: var(--lumi-space-4);
|
|
border: 1px solid var(--lumi-border-strong);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
box-shadow: inset 0 3px 0 color-mix(in srgb, var(--lumi-accent) 32%, transparent);
|
|
}
|
|
|
|
.command-policy-section legend {
|
|
padding: 0 var(--lumi-space-2);
|
|
color: var(--lumi-text);
|
|
font-weight: 750;
|
|
}
|
|
|
|
.command-policy-values[hidden],
|
|
.command-policy-inherited[hidden],
|
|
.command-policy-no-results[hidden],
|
|
.command-policy-suggestions[hidden],
|
|
[data-policy-item][hidden],
|
|
[data-subscriber-tier][hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.command-policy-values {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.command-policy-inherited {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
padding: var(--lumi-space-3);
|
|
border-left: 3px solid var(--lumi-accent);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
.command-policy-inherited span {
|
|
color: var(--lumi-text-muted);
|
|
font-size: var(--lumi-font-size-sm);
|
|
}
|
|
|
|
.command-policy-item > form,
|
|
.command-policy-item > .command-policy-editor {
|
|
margin-top: var(--lumi-space-3);
|
|
}
|
|
|
|
.command-policy-item[open] {
|
|
border-color: var(--lumi-border-strong);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
.command-policy-item[open] > summary {
|
|
border-bottom: 1px solid var(--lumi-border);
|
|
}
|
|
|
|
.command-policy-item.is-default-group {
|
|
border-color: color-mix(in srgb, var(--lumi-accent) 58%, var(--lumi-border));
|
|
}
|
|
|
|
.command-policy-summary-copy {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
min-width: 0;
|
|
}
|
|
|
|
.command-policy-title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.command-policy-toolbar {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(15rem, 2fr) minmax(12rem, 1fr) auto;
|
|
gap: var(--lumi-space-3);
|
|
align-items: end;
|
|
margin-bottom: var(--lumi-space-4);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.command-policy-command-toolbar {
|
|
grid-template-columns: minmax(16rem, 2fr) repeat(2, minmax(11rem, 1fr)) auto;
|
|
}
|
|
|
|
.command-policy-search {
|
|
position: relative;
|
|
}
|
|
|
|
.command-policy-suggestions {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: calc(100% + var(--lumi-space-1));
|
|
left: 0;
|
|
right: 0;
|
|
display: grid;
|
|
overflow: hidden;
|
|
border: 1px solid var(--lumi-border-strong);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-raised);
|
|
box-shadow: var(--lumi-shadow-lg);
|
|
}
|
|
|
|
.command-policy-suggestions button {
|
|
width: 100%;
|
|
padding: var(--lumi-space-2) var(--lumi-space-3);
|
|
border: 0;
|
|
border-bottom: 1px solid var(--lumi-border);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--lumi-text);
|
|
text-align: left;
|
|
}
|
|
|
|
.command-policy-suggestions button:hover,
|
|
.command-policy-suggestions button:focus-visible {
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.command-policy-result-count {
|
|
align-self: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.command-policy-savebar {
|
|
position: sticky;
|
|
z-index: 8;
|
|
top: var(--lumi-space-2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--lumi-space-3);
|
|
margin-bottom: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border-strong);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-raised);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
}
|
|
|
|
.command-policy-savebar > span:first-child {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
}
|
|
|
|
.command-policy-savebar.is-bottom {
|
|
position: static;
|
|
margin-top: var(--lumi-space-4);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.command-policy-groups {
|
|
padding: var(--lumi-space-4);
|
|
border-color: var(--lumi-border-strong);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.command-policy-no-results {
|
|
padding: var(--lumi-space-4);
|
|
border: 1px dashed var(--lumi-border-strong);
|
|
border-radius: var(--lumi-radius-md);
|
|
color: var(--lumi-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.command-rng-range {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(8rem, 1fr));
|
|
gap: var(--lumi-space-2);
|
|
max-width: 28rem;
|
|
}
|
|
|
|
.custom-placeholder-list {
|
|
display: grid;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.custom-placeholder-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--lumi-space-2);
|
|
align-items: end;
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.input-prefix {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.input-prefix > span {
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0 var(--lumi-space-2);
|
|
border: 1px solid var(--lumi-border);
|
|
border-right: 0;
|
|
border-radius: var(--lumi-radius-sm) 0 0 var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-2);
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.input-prefix > input {
|
|
min-width: 0;
|
|
border-radius: 0 var(--lumi-radius-sm) var(--lumi-radius-sm) 0;
|
|
}
|
|
|
|
.homepage-builder-list {
|
|
display: grid;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.homepage-builder-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.homepage-builder-row-header,
|
|
.homepage-builder-actions {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.homepage-builder-field {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.homepage-builder-field:has(input[type="checkbox"]) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.homepage-builder-field span {
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.homepage-builder-field[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.homepage-builder-preview {
|
|
grid-column: 1 / -1;
|
|
margin: 0;
|
|
}
|
|
|
|
.homepage-builder-preview.hero {
|
|
min-height: 8rem;
|
|
display: grid;
|
|
align-content: center;
|
|
gap: var(--lumi-space-2);
|
|
padding: var(--lumi-space-4);
|
|
}
|
|
|
|
.homepage-builder-preview small,
|
|
.homepage-builder-preview .hint {
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.homepage-builder-validation {
|
|
grid-column: 1 / -1;
|
|
padding: var(--lumi-space-2) var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface);
|
|
color: var(--lumi-text-muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.homepage-builder-validation.success {
|
|
border-color: color-mix(in srgb, var(--lumi-success) 50%, var(--lumi-border));
|
|
}
|
|
|
|
.homepage-builder-validation.danger {
|
|
border-color: color-mix(in srgb, var(--lumi-danger) 55%, var(--lumi-border));
|
|
color: var(--lumi-danger);
|
|
}
|
|
|
|
.homepage-builder-preview-media {
|
|
width: 100%;
|
|
min-height: 12rem;
|
|
max-height: 24rem;
|
|
border: 0;
|
|
border-radius: var(--lumi-radius-md);
|
|
object-fit: cover;
|
|
background: var(--lumi-surface-2);
|
|
}
|
|
|
|
.homepage-hero-error {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: var(--lumi-space-2);
|
|
min-height: 12rem;
|
|
padding: var(--lumi-space-4);
|
|
border: 1px dashed color-mix(in srgb, var(--lumi-warning) 55%, var(--lumi-border));
|
|
color: var(--lumi-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.homepage-hero-error img {
|
|
max-width: 100%;
|
|
max-height: 12rem;
|
|
border-radius: var(--lumi-radius-sm);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.update-recovery-banner {
|
|
border-left: 4px solid var(--lumi-danger);
|
|
}
|
|
|
|
.update-notice-stack {
|
|
position: fixed;
|
|
top: var(--lumi-space-4);
|
|
left: 50%;
|
|
z-index: 120;
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
width: min(42rem, calc(100vw - 2rem));
|
|
pointer-events: none;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.update-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.update-notice.success {
|
|
border-color: color-mix(in srgb, var(--lumi-success) 50%, var(--lumi-border));
|
|
}
|
|
|
|
.update-notice.warning {
|
|
border-color: color-mix(in srgb, var(--lumi-warning) 50%, var(--lumi-border));
|
|
}
|
|
|
|
.update-notice.danger {
|
|
border-color: color-mix(in srgb, var(--lumi-danger) 55%, var(--lumi-border));
|
|
}
|
|
|
|
.update-detail-grid {
|
|
display: grid;
|
|
gap: var(--lumi-space-4);
|
|
}
|
|
|
|
.update-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.update-meta-grid > div {
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-2);
|
|
}
|
|
|
|
.update-meta-grid span {
|
|
display: block;
|
|
margin-bottom: var(--lumi-space-1);
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.plugin-update-list,
|
|
.plugin-update-row {
|
|
display: grid;
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.update-changelog {
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.update-changelog li {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
.update-progress-log {
|
|
display: grid;
|
|
gap: var(--lumi-space-2);
|
|
max-height: 18rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.update-progress-entry {
|
|
padding: var(--lumi-space-2) var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-left: 3px solid var(--lumi-accent);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-2);
|
|
}
|
|
|
|
.update-progress-entry.success {
|
|
border-left-color: var(--lumi-success);
|
|
}
|
|
|
|
.update-progress-entry.danger {
|
|
border-left-color: var(--lumi-danger);
|
|
}
|
|
|
|
.dashboard-metric-grid,
|
|
.dashboard-chart-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
gap: var(--lumi-space-3);
|
|
}
|
|
|
|
.dashboard-metric-grid {
|
|
margin-top: var(--lumi-space-4);
|
|
}
|
|
|
|
.dashboard-scope-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
margin-top: var(--lumi-space-3);
|
|
}
|
|
|
|
.dashboard-scope-tabs .button.active {
|
|
background: var(--lumi-primary);
|
|
color: var(--lumi-on-primary);
|
|
}
|
|
|
|
.dashboard-metric-grid > div,
|
|
.dashboard-chart-card {
|
|
min-width: 0;
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.dashboard-metric-grid span,
|
|
.dashboard-chart-card figcaption {
|
|
display: block;
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dashboard-metric-grid strong {
|
|
display: block;
|
|
margin-top: var(--lumi-space-1);
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.dashboard-chart-grid {
|
|
margin-top: var(--lumi-space-4);
|
|
}
|
|
|
|
.dashboard-chart-card {
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-chart-card svg {
|
|
width: 100%;
|
|
min-height: 9rem;
|
|
margin-top: var(--lumi-space-2);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
.dashboard-chart-card svg a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashboard-chart-card svg a:hover rect {
|
|
filter: brightness(0.92);
|
|
}
|
|
|
|
.dashboard-log-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
margin-top: var(--lumi-space-3);
|
|
}
|
|
|
|
.dashboard-log-summary a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.update-action-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--lumi-space-2);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.update-action-row > form {
|
|
margin: 0;
|
|
}
|
|
|
|
.log-controls label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--lumi-space-1);
|
|
min-width: 9rem;
|
|
}
|
|
|
|
.log-controls {
|
|
justify-content: flex-start;
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.log-controls .filter-actions {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.log-controls label:first-child {
|
|
flex: 1 1 16rem;
|
|
min-width: min(18rem, 100%);
|
|
}
|
|
|
|
.log-controls label > span {
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.log-controls .button,
|
|
.log-controls button {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
@media (min-width: 901px) {
|
|
.update-action-row .button {
|
|
padding-left: 7.5px;
|
|
padding-right: 7.5px;
|
|
}
|
|
}
|
|
|
|
.modal-backdrop {
|
|
padding: var(--lumi-space-4);
|
|
z-index: var(--lumi-z-dialog);
|
|
background: var(--lumi-dialog-scrim);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.modal {
|
|
width: min(42rem, 100%);
|
|
max-height: min(48rem, calc(100vh - 2rem));
|
|
overflow-y: auto;
|
|
padding: var(--lumi-space-5);
|
|
border-radius: var(--lumi-radius-lg);
|
|
background: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-lg);
|
|
}
|
|
|
|
.modal.feedback-modal {
|
|
width: min(50vw, 60rem);
|
|
min-width: min(92vw, 45rem);
|
|
max-height: 75vh;
|
|
}
|
|
|
|
.modal.feedback-export-modal {
|
|
width: min(72rem, 92vw);
|
|
max-height: min(82vh, 60rem);
|
|
}
|
|
|
|
.modal.okf-entry-modal-dialog {
|
|
width: min(72rem, 94vw);
|
|
max-height: min(86vh, 62rem);
|
|
}
|
|
|
|
.modal.okf-entry-fullscreen-modal {
|
|
width: min(96vw, 118rem);
|
|
max-height: calc(100dvh - (var(--lumi-space-4) * 2));
|
|
min-height: calc(100dvh - (var(--lumi-space-4) * 2));
|
|
}
|
|
|
|
input.okf-text-suggestion::-webkit-calendar-picker-indicator {
|
|
display: none !important;
|
|
}
|
|
|
|
input.okf-text-suggestion {
|
|
appearance: textfield;
|
|
}
|
|
|
|
.lumi-placeholder-suggest {
|
|
position: fixed;
|
|
z-index: 2400;
|
|
display: grid;
|
|
gap: 2px;
|
|
max-height: min(15rem, 50vh);
|
|
overflow: auto;
|
|
padding: var(--lumi-space-2);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-raised);
|
|
box-shadow: var(--lumi-shadow-lg);
|
|
}
|
|
|
|
.lumi-placeholder-suggest[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.lumi-placeholder-suggest-item {
|
|
width: 100%;
|
|
padding: var(--lumi-space-2) var(--lumi-space-3);
|
|
border: 0;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: transparent;
|
|
color: var(--lumi-text);
|
|
font-family: var(--lumi-font-mono);
|
|
font-size: 0.9rem;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lumi-placeholder-suggest-item:hover,
|
|
.lumi-placeholder-suggest-item[aria-selected="true"] {
|
|
background: color-mix(in srgb, var(--lumi-primary) 18%, transparent);
|
|
}
|
|
|
|
.lumi-placeholder-suggest-expand {
|
|
margin-top: var(--lumi-space-1);
|
|
border-top: 1px solid var(--lumi-border);
|
|
color: var(--lumi-primary);
|
|
font-family: var(--lumi-font-display);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.lumi-placeholder-tree-dialog {
|
|
width: min(58rem, 94vw);
|
|
max-height: min(82vh, 54rem);
|
|
}
|
|
|
|
.lumi-placeholder-tree {
|
|
display: grid;
|
|
gap: var(--lumi-space-1);
|
|
max-height: min(54vh, 34rem);
|
|
overflow: auto;
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.lumi-placeholder-tree-branch,
|
|
.lumi-placeholder-tree-leaf {
|
|
font-family: var(--lumi-font-mono);
|
|
}
|
|
|
|
.lumi-placeholder-tree-branch > summary,
|
|
.lumi-placeholder-tree-leaf {
|
|
min-height: 2.25rem;
|
|
padding: var(--lumi-space-2) var(--lumi-space-3);
|
|
padding-left: calc(var(--lumi-space-3) + (var(--placeholder-depth, 0) * 1.15rem));
|
|
border-radius: var(--lumi-radius-sm);
|
|
}
|
|
|
|
.lumi-placeholder-tree-branch > summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lumi-placeholder-tree-leaf {
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--lumi-text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lumi-placeholder-tree-token {
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.lumi-placeholder-tree-muted-token {
|
|
color: var(--lumi-text-muted);
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.lumi-placeholder-tree-leaf:hover,
|
|
.lumi-placeholder-tree-branch > summary:hover {
|
|
background: color-mix(in srgb, var(--lumi-primary) 14%, transparent);
|
|
}
|
|
|
|
.lumi-placeholder-tree-branch.is-muted > summary,
|
|
.lumi-placeholder-tree-leaf.is-muted {
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.placeholder-invalid {
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--lumi-danger) 10%, transparent), color-mix(in srgb, var(--lumi-danger) 10%, transparent)),
|
|
var(--lumi-surface) !important;
|
|
}
|
|
|
|
.feedback-modal .modal-actions {
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
.feedback-export-modal textarea {
|
|
width: 100%;
|
|
min-height: min(52vh, 34rem);
|
|
font-family: var(--lumi-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
|
|
white-space: pre;
|
|
}
|
|
|
|
.feedback-export-toolbar,
|
|
.feedback-export-modal .modal-actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.feedback-export-select {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.compact-field {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--lumi-space-2);
|
|
color: var(--lumi-text-muted);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.compact-field input {
|
|
width: 8rem;
|
|
}
|
|
|
|
.modal-header h2,
|
|
.modal-header h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabs,
|
|
.ai-tabs {
|
|
display: flex;
|
|
gap: var(--lumi-space-1);
|
|
padding: var(--lumi-space-1);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tabs a,
|
|
.ai-tabs a {
|
|
min-height: 2.4rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.45rem 0.8rem;
|
|
border-radius: var(--lumi-radius-sm);
|
|
color: var(--lumi-text-muted);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabs a:hover,
|
|
.tabs a[aria-current="page"],
|
|
.ai-tabs a:hover {
|
|
background: var(--lumi-surface);
|
|
color: var(--lumi-text);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
}
|
|
|
|
details {
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
details > summary {
|
|
border-radius: var(--lumi-radius-sm);
|
|
}
|
|
|
|
details > summary:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, var(--lumi-focus) 78%, transparent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.empty-state,
|
|
.loading-state,
|
|
.error-state,
|
|
.partial-state,
|
|
.offline-state,
|
|
.permission-state {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 10rem;
|
|
padding: var(--lumi-space-6);
|
|
border: 1px dashed var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.error-state { border-color: var(--lumi-danger-border); background: var(--lumi-danger-bg); }
|
|
.partial-state { border-color: var(--lumi-warning-border); background: var(--lumi-warning-bg); }
|
|
.offline-state { border-color: var(--lumi-info-border); background: var(--lumi-info-bg); }
|
|
.permission-state { border-style: solid; }
|
|
|
|
.loading-state::before {
|
|
content: "";
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
border: 3px solid var(--lumi-border);
|
|
border-top-color: var(--lumi-primary);
|
|
border-radius: 50%;
|
|
animation: lumi-spin 0.75s linear infinite;
|
|
}
|
|
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip]:hover::after,
|
|
[data-tooltip]:focus-visible::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.5rem);
|
|
z-index: 100;
|
|
width: max-content;
|
|
max-width: 18rem;
|
|
padding: 0.4rem 0.55rem;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-text);
|
|
color: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
font-size: 0.8rem;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@keyframes lumi-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes lumi-state-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes lumi-soft-in {
|
|
from {
|
|
opacity: 0.45;
|
|
transform: translateY(0.25rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.command-policy-grid,
|
|
.command-policy-toolbar,
|
|
.command-policy-command-toolbar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.command-policy-savebar {
|
|
position: static;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.command-policy-savebar .button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
[data-update-snapshot-table],
|
|
[data-update-snapshot-table] tbody {
|
|
display: block;
|
|
}
|
|
|
|
[data-update-snapshot-table] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-update-snapshot-table] thead {
|
|
display: none;
|
|
}
|
|
|
|
[data-update-snapshot-table] tbody > tr {
|
|
display: block;
|
|
margin-block: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
[data-update-snapshot-table] tbody > tr > td {
|
|
display: grid;
|
|
grid-template-columns: minmax(5rem, 0.35fr) minmax(0, 1fr);
|
|
gap: var(--lumi-space-3);
|
|
min-width: 0;
|
|
padding: var(--lumi-space-2) 0;
|
|
border: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
[data-update-snapshot-table] tbody > tr > td::before {
|
|
content: attr(data-label);
|
|
color: var(--lumi-text-muted);
|
|
font-size: var(--lumi-font-size-sm);
|
|
font-weight: 700;
|
|
}
|
|
|
|
[data-command-list-section] .table-wrap {
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-command-list-section] table,
|
|
[data-command-list-section] tbody {
|
|
display: block;
|
|
}
|
|
|
|
[data-command-list-section] table {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-command-list-section] thead {
|
|
display: none;
|
|
}
|
|
|
|
[data-command-list-section] tbody > tr:not(.edit-row) {
|
|
display: block;
|
|
margin-block: var(--lumi-space-3);
|
|
padding: var(--lumi-space-3);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
}
|
|
|
|
[data-command-list-section] tbody > tr:not(.edit-row) > td {
|
|
display: grid;
|
|
grid-template-columns: minmax(5rem, 0.35fr) minmax(0, 1fr);
|
|
gap: var(--lumi-space-3);
|
|
min-width: 0;
|
|
padding: var(--lumi-space-2) 0;
|
|
border: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
[data-command-list-section] tbody > tr:not(.edit-row) > td::before {
|
|
content: attr(data-label);
|
|
color: var(--lumi-text-muted);
|
|
font-size: var(--lumi-font-size-sm);
|
|
font-weight: 700;
|
|
}
|
|
|
|
[data-command-list-section] .table td .command-actions,
|
|
[data-command-list-section] .table td .table-actions {
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(clamp(1.45rem, 8vw, 2rem) * var(--lumi-heading-scale));
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(clamp(1.15rem, 6vw, 1.45rem) * var(--lumi-heading-scale));
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.lumi-field-group-grid,
|
|
.input-action-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.lumi-field-group {
|
|
grid-column: auto;
|
|
padding: var(--lumi-space-3);
|
|
}
|
|
|
|
.form-grid .field.full,
|
|
.form-grid h2 {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.card,
|
|
.panel,
|
|
.lumi-panel,
|
|
.modal {
|
|
padding: var(--lumi-space-3);
|
|
}
|
|
|
|
.feedback-modal-backdrop {
|
|
align-items: stretch;
|
|
padding: var(--lumi-space-2);
|
|
}
|
|
|
|
.modal.feedback-modal {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-height: calc(100dvh - (var(--lumi-space-2) * 2));
|
|
min-height: calc(100dvh - (var(--lumi-space-2) * 2));
|
|
padding: var(--lumi-space-3);
|
|
}
|
|
|
|
.modal.okf-entry-fullscreen-modal {
|
|
width: 100%;
|
|
max-height: calc(100dvh - (var(--lumi-space-2) * 2));
|
|
min-height: calc(100dvh - (var(--lumi-space-2) * 2));
|
|
padding: var(--lumi-space-3);
|
|
}
|
|
|
|
.hero {
|
|
padding: var(--lumi-space-4);
|
|
}
|
|
|
|
.hero::after {
|
|
width: 9rem;
|
|
height: 9rem;
|
|
right: -5rem;
|
|
top: -5rem;
|
|
}
|
|
|
|
.homepage-dynamic-hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.homepage-hero-embed-grid.has-secondary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.command-random-row,
|
|
.command-rng-range,
|
|
.custom-placeholder-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.homepage-hero-media {
|
|
min-height: 12rem;
|
|
}
|
|
|
|
.button,
|
|
button.button,
|
|
input[type="submit"].button,
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
|
|
select,
|
|
textarea,
|
|
.table-search {
|
|
min-height: min(var(--lumi-control-height), 2.5rem);
|
|
}
|
|
|
|
.button,
|
|
button.button,
|
|
input[type="submit"].button {
|
|
padding: 0.55rem 0.8rem;
|
|
}
|
|
|
|
.lumi-savebar,
|
|
.lumi-refresh-prompt {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.lumi-event-notices {
|
|
right: var(--lumi-space-3);
|
|
bottom: var(--lumi-space-3);
|
|
}
|
|
|
|
.table-tools,
|
|
.table-controls,
|
|
.log-controls {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-tools > *,
|
|
.table-controls > *,
|
|
.log-controls > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.input-action-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.homepage-builder-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.list li {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
}
|