29 lines
1.8 KiB
CSS
29 lines
1.8 KiB
CSS
:root { font-family: system-ui, sans-serif; font-size: 16px; }
|
|
.keluna-column { display: flex; flex-direction: column; gap: 1rem; }
|
|
h1, p { margin: 0; }
|
|
button { align-self: flex-start; font: inherit; padding: .65rem 1.1rem; cursor: pointer; }
|
|
|
|
/* Typed component defaults; [hidden] must win over authored layout display rules. */
|
|
[hidden] { display: none !important; }
|
|
.kl-vertical { display: flex; flex-direction: column; gap: 1rem; }
|
|
.kl-horizontal { display: flex; gap: 1rem; align-items: flex-start; }
|
|
.kl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
|
|
.kl-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
|
|
.kl-label { font-size: .88rem; font-weight: 600; }
|
|
.kl-input { font: inherit; min-width: 0; width: 100%; box-sizing: border-box; }
|
|
input.kl-input:not([type="checkbox"]):not([type="range"]), select.kl-input, textarea.kl-input {
|
|
border: 1px solid #adb6bf; border-radius: 6px; padding: .6rem .7rem; background: Canvas; color: CanvasText;
|
|
}
|
|
.kl-input[aria-invalid="true"] { border-color: #bd3434 !important; }
|
|
.kl-input:focus-visible, .kl-button:focus-visible { outline: 2px solid #327ca8; outline-offset: 2px; }
|
|
.kl-helper { color: #64707b; font-size: .75rem; }
|
|
.kl-error { color: #b12424; font-size: .75rem; }
|
|
.kl-helper:empty, .kl-error:empty { display: none; }
|
|
.kl-checkbox { display: grid; grid-template-columns: 20px 1fr; align-items: start; }
|
|
.kl-checkbox input { grid-column: 1; grid-row: 1; width: 16px; height: 16px; margin: .15rem 0; }
|
|
.kl-checkbox .kl-label { grid-column: 2; grid-row: 1; font-weight: 400; }
|
|
.kl-checkbox .kl-error, .kl-checkbox .kl-helper { grid-column: 2; }
|
|
.kl-radio-option { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; font-weight: 400; }
|
|
.kl-radio-option input { width: auto; }
|
|
@media (max-width: 640px) { .kl-form { grid-template-columns: 1fr; } }
|