@public-ui/themes 3.0.7-rc.0 → 5.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -1197,7 +1197,7 @@ var css_248z$1P = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1197
1197
|
|
|
1198
1198
|
var css_248z$1O = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-headline--h1 {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .kol-headline--h2 {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .kol-headline--h3 {\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n color: inherit;\n font-style: normal;\n }\n .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n font-weight: 700;\n }\n}";
|
|
1199
1199
|
|
|
1200
|
-
var css_248z$1N = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-form-field--disabled .kol-form-field__input {\n outline: none;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n padding-left: 0.125em;\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-field-control--label-align-left:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n padding-right: calc(6.4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--label-align-right:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n padding-left: calc(6.4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox .kol-input {\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n background-color: white;\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n margin: 0;\n border-width: 2px;\n order: 1;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .kol-checkbox .kol-input:checked, .kol-checkbox .kol-input:indeterminate {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-checkbox .kol-input:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-checkbox .kol-input:focus:hover {\n box-shadow: none;\n }\n .kol-checkbox .kol-input:active {\n box-shadow: none;\n }\n .kol-checkbox .kol-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .kol-checkbox.kol-checkbox--disabled {\n opacity: 0.5;\n }\n .kol-checkbox--variant-default {\n width: initial;\n min-width: initial;\n }\n .kol-checkbox--variant-default .kol-input {\n border-radius: var(--border-radius);\n width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default .kol-icon {\n color: var(--color-light);\n }\n .kol-checkbox--variant-switch .kol-icon {\n left: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\n }\n .kol-checkbox--variant-switch .kol-input {\n background-color: var(--color-subtle);\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n display: block;\n position: relative;\n width: 3.5em;\n min-width: 3.5em;\n height: 1.5em;\n border-width: 0;\n }\n .kol-checkbox--variant-switch .kol-input:focus {\n outline-color: var(--color-primary);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n .kol-checkbox--variant-switch .kol-input:before {\n background-color: white;\n border-radius: 1.25em;\n position: absolute;\n top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\n }\n .kol-checkbox--variant-switch .kol-input:checked {\n background-color: var(--color-primary);\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(2em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(1em);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(2em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(1em, -50%);\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__input, .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n border-style: solid none solid solid;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n height: 100%;\n border-width: 1px 0 1px 1px;\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n border-style: solid solid solid none;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n display: flex;\n padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px 1px 1px 0;\n align-self: stretch;\n justify-self: stretch;\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__label-text {\n margin: auto auto;\n font-weight: 700;\n }\n .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__input, .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)));\n }\n .kol-input-checkbox__field-control--variant-button:focus-within {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n border-style: solid solid solid none;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n border-width: 1px 1px 1px 0;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n border-style: solid none solid solid;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n border-width: 1px 0 1px 1px;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)));\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0);\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--hide-label .kol-field-control__input {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: 1px;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__input {\n opacity: 0.5;\n outline: none;\n }\n}";
|
|
1200
|
+
var css_248z$1N = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-form-field--disabled .kol-form-field__input {\n outline: none;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n padding-left: 0.125em;\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-field-control--label-align-left:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n padding-right: calc(6.4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--label-align-right:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n padding-left: calc(6.4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox .kol-input {\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n background-color: white;\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n margin: 0;\n border-width: 2px;\n order: 1;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .kol-checkbox .kol-input:checked, .kol-checkbox .kol-input:indeterminate {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-checkbox .kol-input:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-checkbox .kol-input:focus:hover {\n box-shadow: none;\n }\n .kol-checkbox .kol-input:active {\n box-shadow: none;\n }\n .kol-checkbox .kol-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .kol-checkbox.kol-checkbox--disabled {\n opacity: 0.5;\n }\n .kol-checkbox--variant-default {\n width: initial;\n min-width: initial;\n }\n .kol-checkbox--variant-default .kol-input {\n border-radius: var(--border-radius);\n width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default .kol-icon {\n color: var(--color-light);\n }\n .kol-checkbox--variant-switch .kol-icon {\n left: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\n }\n .kol-checkbox--variant-switch .kol-input {\n background-color: var(--color-subtle);\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n display: block;\n position: relative;\n width: 3.5em;\n min-width: 3.5em;\n height: 1.5em;\n border-width: 0;\n }\n .kol-checkbox--variant-switch .kol-input:focus {\n outline-color: var(--color-primary);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n border-radius: 1.25em;\n }\n .kol-checkbox--variant-switch .kol-input:before {\n background-color: white;\n border-radius: 1.25em;\n position: absolute;\n top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\n }\n .kol-checkbox--variant-switch .kol-input:checked {\n background-color: var(--color-primary);\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(2em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(1em);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(2em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(1em, -50%);\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__input, .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n border-style: solid none solid solid;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n height: 100%;\n border-width: 1px 0 1px 1px;\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n border-style: solid solid solid none;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n display: flex;\n padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px 1px 1px 0;\n align-self: stretch;\n justify-self: stretch;\n }\n .kol-input-checkbox__field-control--variant-button .kol-field-control__label-text {\n margin: auto auto;\n font-weight: 700;\n }\n .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__input, .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0);\n }\n .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)));\n }\n .kol-input-checkbox__field-control--variant-button:focus-within {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n border-style: solid solid solid none;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n border-width: 1px 1px 1px 0;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n border-style: solid none solid solid;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n border-width: 1px 0 1px 1px;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)));\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n clip-path: inset(calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0);\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--hide-label .kol-field-control__input {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: 1px;\n }\n .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__input {\n opacity: 0.5;\n outline: none;\n }\n}";
|
|
1201
1201
|
|
|
1202
1202
|
var css_248z$1M = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}\n.kol-input-color__inputs-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n background-color: var(--color-light);\n min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid var(--color-subtle);\n}";
|
|
1203
1203
|
|
|
@@ -1223,7 +1223,7 @@ var css_248z$1C = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1223
1223
|
|
|
1224
1224
|
var css_248z$1B = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-link {\n line-height: 1;\n }\n}";
|
|
1225
1225
|
|
|
1226
|
-
var css_248z$1A = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n .kol-nav {\n --kol-nav-item-padding-left: 0;\n --kol-nav-item-padding-right: 16;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n }\n .kol-nav__list--horizontal {\n --kol-nav-item-padding-right: 8;\n gap: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__entry .kol-link:hover .kol-span__label,\n .kol-nav__entry .kol-button:hover .kol-span__label {\n text-decoration: underline;\n }\n .kol-nav__toggle-button .kol-button {\n margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\n
|
|
1226
|
+
var css_248z$1A = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n .kol-nav {\n --kol-nav-item-padding-left: 0;\n --kol-nav-item-padding-right: 16;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n }\n .kol-nav__list--horizontal {\n --kol-nav-item-padding-right: 8;\n gap: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__entry .kol-link:hover .kol-span__label,\n .kol-nav__entry .kol-button:hover .kol-span__label {\n text-decoration: underline;\n }\n .kol-nav__toggle-button .kol-button {\n margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-nav__toggle-button .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n width: unset;\n padding: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n}";
|
|
1227
1227
|
|
|
1228
1228
|
var css_248z$1z = "/* forward the rem function */\n@layer kol-theme-component {\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n}";
|
|
1229
1229
|
|
|
@@ -1239,9 +1239,9 @@ var css_248z$1u = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1239
1239
|
|
|
1240
1240
|
var css_248z$1t = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button {\n border-color: var(--color-primary);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--border-width);\n }\n .kol-split-button__button .kol-button .kol-span {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n .kol-split-button__horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button__secondary-button {\n height: 100%;\n }\n .kol-split-button__secondary-button .kol-span {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-split-button .kol-span {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-split-button .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-split-button .kol-button:focus {\n outline: none;\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n width: unset;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-split-button__button .kol-button__text {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n .kol-split-button__secondary-button .kol-button__text {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n .kol-split-button .kol-button {\n height: 100%;\n }\n .kol-split-button .kol-button__text {\n height: 100%;\n border: none;\n }\n}";
|
|
1241
1241
|
|
|
1242
|
-
var css_248z$1s = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n width: unset;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table, .kol-table__caption {\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--header {\n color: var(--color-primary);\n background-color: var(--color-light);\n font-weight: normal;\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table__spacer {\n display: table-row;\n height: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__spacer-line {\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-width: 0;\n }\n .kol-table__spacer-line--foot {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__spacer-line--head {\n border-top-width: calc(var(--border-width) * 2);\n }\n .kol-table__row--body:nth-child(even) {\n background-color: var(--color-mute);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio {\n border-color: var(--color-subtle);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-primary);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-icon {\n color: var(--color-light);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-primary);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
|
|
1242
|
+
var css_248z$1s = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n width: unset;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
|
|
1243
1243
|
|
|
1244
|
-
var css_248z$1r = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n width: unset;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table, .kol-table__caption {\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--header {\n color: var(--color-primary);\n background-color: var(--color-light);\n font-weight: normal;\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table__spacer {\n display: table-row;\n height: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__spacer-line {\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-width: 0;\n }\n .kol-table__spacer-line--foot {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__spacer-line--head {\n border-top-width: calc(var(--border-width) * 2);\n }\n .kol-table__row--body:nth-child(even) {\n background-color: var(--color-mute);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio {\n border-color: var(--color-subtle);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-primary);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-icon {\n color: var(--color-light);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-primary);\n }\n}";
|
|
1244
|
+
var css_248z$1r = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n width: unset;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n}";
|
|
1245
1245
|
|
|
1246
1246
|
var css_248z$1q = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tabs {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: var(--grid-template-rows);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-display: grid;\n --button-group-order: 1;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: flex;\n --grid-template-rows: 1fr auto;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 1;\n }\n .kol-tabs--align-top {\n --display: flex;\n --grid-template-rows: auto 1fr;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: var(--display);\n gap: var(--button-group-gap);\n order: var(--button-group-order);\n flex-wrap: wrap;\n }\n .kol-tabs .kol-button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: none;\n font-style: normal;\n }\n .kol-tabs .kol-button:hover {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n padding-bottom: 0.25em;\n }\n .kol-tabs .kol-button.selected .kol-span__container {\n border-bottom: 0.25em solid;\n }\n .kol-tabs .kol-button .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__content {\n padding: 0.25em 0;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n .kol-tabs .kol-button-wc {\n width: 100%;\n }\n}";
|
|
1247
1247
|
|