@public-ui/themes 2.2.14 → 2.2.15-rc.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 +43 -43
- package/dist/index.mjs +43 -43
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -936,7 +936,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
936
936
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
937
937
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
938
938
|
|
|
939
|
-
var css_248z$3p = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgb(8, 35, 48, 0.24);\n --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\n }\n :host {\n font-
|
|
939
|
+
var css_248z$3p = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgb(8, 35, 48, 0.24);\n --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus-visible,\n button[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
|
|
940
940
|
|
|
941
941
|
var css_248z$3o = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
|
|
942
942
|
|
|
@@ -954,15 +954,15 @@ var css_248z$3i = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc
|
|
|
954
954
|
|
|
955
955
|
var css_248z$3h = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
956
956
|
|
|
957
|
-
var css_248z$3g = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
957
|
+
var css_248z$3g = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n}";
|
|
958
958
|
|
|
959
|
-
var css_248z$3f = "@layer kol-theme-component {\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .
|
|
959
|
+
var css_248z$3f = "@layer kol-theme-component {\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host .content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
960
960
|
|
|
961
961
|
var css_248z$3e = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
962
962
|
|
|
963
963
|
var css_248z$3d = "@layer kol-theme-component {\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
964
964
|
|
|
965
|
-
var css_248z$3c = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
965
|
+
var css_248z$3c = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n :host {\n display: block;\n }\n .mandatory-fields-hint {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
966
966
|
|
|
967
967
|
var css_248z$3b = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
968
968
|
|
|
@@ -990,7 +990,7 @@ var css_248z$30 = "@layer kol-theme-component {\n :host .msg {\n border-widt
|
|
|
990
990
|
|
|
991
991
|
var css_248z$2$ = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
|
|
992
992
|
|
|
993
|
-
var css_248z$2_ = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
993
|
+
var css_248z$2_ = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
|
|
994
994
|
|
|
995
995
|
var css_248z$2Z = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
996
996
|
|
|
@@ -1000,7 +1000,7 @@ var css_248z$2X = "@layer kol-theme-component {\n .button:focus {\n outline:
|
|
|
1000
1000
|
|
|
1001
1001
|
var css_248z$2W = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n}";
|
|
1002
1002
|
|
|
1003
|
-
var css_248z$2V = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n
|
|
1003
|
+
var css_248z$2V = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
|
|
1004
1004
|
|
|
1005
1005
|
var css_248z$2U = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
1006
1006
|
|
|
@@ -1012,9 +1012,9 @@ var css_248z$2R = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n
|
|
|
1012
1012
|
|
|
1013
1013
|
var css_248z$2Q = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1014
1014
|
|
|
1015
|
-
var css_248z$2P = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1015
|
+
var css_248z$2P = "@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1016
1016
|
|
|
1017
|
-
var css_248z$2O = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1017
|
+
var css_248z$2O = "@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1018
1018
|
|
|
1019
1019
|
var css_248z$2N = "@layer kol-theme-component {\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 400;\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border: var(--border-width) solid transparent;\n border-radius: var(--border-radius);\n border-bottom-width: var(--border-width);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n position: relative;\n top: var(--border-width);\n box-shadow: none;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n position: absolute;\n top: 0;\n content: \"\";\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n background-color: var(--color-primary);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n left: 0;\n right: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n content: \" \";\n background-color: var(--page-bg);\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
|
|
1020
1020
|
|
|
@@ -1079,7 +1079,7 @@ const BWSt = KoliBri.createTheme('bwst', {
|
|
|
1079
1079
|
|
|
1080
1080
|
var css_248z$2H = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n}";
|
|
1081
1081
|
|
|
1082
|
-
var css_248z$2G = "@layer kol-theme-component {\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading {\n margin: 0;\n }\n .accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button
|
|
1082
|
+
var css_248z$2G = "@layer kol-theme-component {\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .accordion:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading {\n margin: 0;\n }\n .accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .accordion__heading-button button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button button :focus {\n outline: none;\n }\n .accordion__heading-button .kol-icon {\n color: var(--color-primary);\n }\n}";
|
|
1083
1083
|
|
|
1084
1084
|
var css_248z$2F = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
1085
1085
|
|
|
@@ -1091,9 +1091,9 @@ var css_248z$2C = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc
|
|
|
1091
1091
|
|
|
1092
1092
|
var css_248z$2B = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
1093
1093
|
|
|
1094
|
-
var css_248z$2A = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1094
|
+
var css_248z$2A = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n}";
|
|
1095
1095
|
|
|
1096
|
-
var css_248z$2z = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n :host .
|
|
1096
|
+
var css_248z$2z = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n :host .header {\n line-height: 1.75;\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
1097
1097
|
|
|
1098
1098
|
var css_248z$2y = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
1099
1099
|
|
|
@@ -1101,9 +1101,9 @@ var css_248z$2x = "@layer kol-theme-component {\n .details {\n width: 100%;\
|
|
|
1101
1101
|
|
|
1102
1102
|
var css_248z$2w = "@layer kol-theme-component {\n .drawer__wrapper {\n box-shadow: 0 0 4px var(--color-subtle);\n }\n .drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .drawer__wrapper--left.is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .drawer__wrapper--right.is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .drawer__wrapper--top.is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .drawer__wrapper--bottom.is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
|
|
1103
1103
|
|
|
1104
|
-
var css_248z$2v = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1104
|
+
var css_248z$2v = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
1105
1105
|
|
|
1106
|
-
var css_248z$2u = "@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n }\n :host {\n font-
|
|
1106
|
+
var css_248z$2u = "@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
|
|
1107
1107
|
|
|
1108
1108
|
var css_248z$2t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n}";
|
|
1109
1109
|
|
|
@@ -1131,7 +1131,7 @@ var css_248z$2i = "@layer kol-theme-component {\n .msg {\n border-width: 0;\
|
|
|
1131
1131
|
|
|
1132
1132
|
var css_248z$2h = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / 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 :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-text);\n color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n .primary:is(a, button):active > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):active > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost:is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost:is(a, button).small:active > .kol-span-wc > span,\n .ghost:is(a, button).small:hover > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
|
|
1133
1133
|
|
|
1134
|
-
var css_248z$2g = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1134
|
+
var css_248z$2g = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n}";
|
|
1135
1135
|
|
|
1136
1136
|
var css_248z$2f = "@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n .toggle-button :is(a, button) > .kol-span-wc,\n .toggle-button :is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-color: var(--color-light);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border-style: solid;\n box-shadow: none;\n }\n .toggle-button :is(a, button):active > .kol-span-wc,\n .toggle-button :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n}";
|
|
1137
1137
|
|
|
@@ -1149,9 +1149,9 @@ var css_248z$29 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-
|
|
|
1149
1149
|
|
|
1150
1150
|
var css_248z$28 = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / 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 :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-text);\n color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n .primary:is(a, button):active > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):active > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost:is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost:is(a, button).small:active > .kol-span-wc > span,\n .ghost:is(a, button).small:hover > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1151
1151
|
|
|
1152
|
-
var css_248z$27 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n
|
|
1152
|
+
var css_248z$27 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n:host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1153
1153
|
|
|
1154
|
-
var css_248z$26 = "
|
|
1154
|
+
var css_248z$26 = ":host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1155
1155
|
|
|
1156
1156
|
var css_248z$25 = "@layer kol-theme-component {\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
|
|
1157
1157
|
|
|
@@ -1214,7 +1214,7 @@ const DEFAULT = KoliBri.createTheme('default', {
|
|
|
1214
1214
|
|
|
1215
1215
|
var css_248z$1$ = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n lborder: 1px2;\n border-radius: 2px;\n border: 1px solid #626262;\n }\n :host {\n --color-blue: #004494;\n --color-yellow: #ffd617;\n --color-grey: #404040;\n --color-blue-130: #002f67;\n --color-blue-120: #003776;\n --color-blue-110: #003d84;\n --color-blue-100: var(--color-blue);\n --color-blue-75: #4073af;\n --color-blue-50: #bfd0e4;\n --color-blue-25: #bfd0e4;\n --color-blue-5: #f2f5f9;\n --color-yellow-120: #f8ae21;\n --color-yellow-110: #fbc11d;\n --color-yellow-100: var(--color-yellow);\n --color-yellow-75: #ffde39;\n --color-yellow-50: #ffe879;\n --color-yellow-25: #fff4bb;\n --color-grey-100: var(--color-grey);\n --color-grey-75: #707070;\n --color-grey-50: #9f9f9f;\n --color-grey-25: #cfcfcf;\n --color-grey-20: #d9d9d9;\n --color-grey-15: #e3e3e3;\n --color-grey-10: #ebebeb;\n --color-grey-5: #f5f5f5;\n --color-grey-3: #f9f9f9;\n --color-blue-n: #006fb4;\n --color-orange: #f29527;\n --color-green: #467a39;\n --color-red: #da2131;\n --color-red-1xx: #981722;\n --color-black: #000;\n --color-white: #fff;\n --font-family: Arial, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --font-weight: 400;\n --font-weight-bold: 600;\n --line-height-regular: 1.5;\n --line-height-heading: 1.2;\n --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n outline: none;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-heading);\n margin: 0;\n padding: 0;\n }\n p {\n font-weight: var(--font-weight);\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: 0.5em;\n }\n .required label span::after,\n .required legend span::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .badge-text-hint {\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1216
1216
|
|
|
1217
|
-
var css_248z$1_ = "@layer kol-theme-component {\n .accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n }\n .accordion__heading-button button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .accordion__heading-button button span {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .accordion__heading-button button:focus, .accordion__heading-button button:hover {\n background-color: var(--color-grey-25);\n }\n .accordion__heading-button button:focus {\n outline:
|
|
1217
|
+
var css_248z$1_ = "@layer kol-theme-component {\n .accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n }\n .accordion:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: -2px;\n }\n .accordion__heading-button button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .accordion__heading-button button span {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .accordion__heading-button button:focus, .accordion__heading-button button:hover {\n background-color: var(--color-grey-25);\n }\n .accordion__heading-button button:focus {\n outline: none;\n }\n .accordion__heading-button .kol-icon {\n margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: 0;\n margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__content {\n padding: var(--spacing-s) var(--spacing-m);\n }\n}";
|
|
1218
1218
|
|
|
1219
1219
|
var css_248z$1Z = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n}";
|
|
1220
1220
|
|
|
@@ -1226,9 +1226,9 @@ var css_248z$1W = "@layer kol-theme-component {\n a,\n button {\n appearanc
|
|
|
1226
1226
|
|
|
1227
1227
|
var css_248z$1V = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-2xs);\n }\n}";
|
|
1228
1228
|
|
|
1229
|
-
var css_248z$1U = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n :is(a, button):hover .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1229
|
+
var css_248z$1U = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n :is(a, button):hover .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
1230
1230
|
|
|
1231
|
-
var css_248z$1T = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .
|
|
1231
|
+
var css_248z$1T = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .header {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75em;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host .content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n :host .footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > .content + .footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
|
|
1232
1232
|
|
|
1233
1233
|
var css_248z$1S = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: 1px solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
|
|
1234
1234
|
|
|
@@ -1270,7 +1270,7 @@ var css_248z$1A = "@layer kol-theme-component {\n :host {\n display: grid;\n
|
|
|
1270
1270
|
|
|
1271
1271
|
var css_248z$1z = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n}";
|
|
1272
1272
|
|
|
1273
|
-
var css_248z$1y = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0;\n
|
|
1273
|
+
var css_248z$1y = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-grey-25);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-blue-130);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1274
1274
|
|
|
1275
1275
|
var css_248z$1x = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: var(--a11y-min-size);\n border: 1px solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
|
|
1276
1276
|
|
|
@@ -1282,9 +1282,9 @@ var css_248z$1u = "@layer kol-theme-component {\n .cycle {\n padding: calc(2
|
|
|
1282
1282
|
|
|
1283
1283
|
var css_248z$1t = "@layer kol-theme-component {\n :host {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
|
|
1284
1284
|
|
|
1285
|
-
var css_248z$1s = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host
|
|
1285
|
+
var css_248z$1s = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-stateless-wc {\n display: block;\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
|
|
1286
1286
|
|
|
1287
|
-
var css_248z$1r = "@layer kol-theme-component {\n :host
|
|
1287
|
+
var css_248z$1r = "@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-stateless-wc {\n display: block;\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
|
|
1288
1288
|
|
|
1289
1289
|
var css_248z$1q = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .tabs-button-group button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
|
|
1290
1290
|
|
|
@@ -1344,9 +1344,9 @@ const ECL_EC = KoliBri.createTheme('ecl-ec', {
|
|
|
1344
1344
|
'KOL-TREE-ITEM': css_248z$1l,
|
|
1345
1345
|
});
|
|
1346
1346
|
|
|
1347
|
-
var css_248z$1k = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n bborder: 1px2px;\n border: 1px solid #626262;\n }\n :host {\n --color-blue: #0e47cb;\n --color-blue-140: #082b7a;\n --color-blue-130: #082b7a;\n --color-blue-120: #0b39a2;\n --color-blue-110: #0d40b7;\n --color-blue-100: #0e47cb;\n --color-blue-80: #3e6cd5;\n --color-blue-60: #6e91e0;\n --color-blue-40: #9fb5ea;\n --color-blue-20: #cfdaf5;\n --color-blue-10: #e7edfa;\n --color-blue-5: #f3f6fc;\n --color-yellow: #ffcc00;\n --color-yellow-140: #997a00;\n --color-yellow-130: #b38f00;\n --color-yellow-120: #cca300;\n --color-yellow-110: #e6b800;\n --color-yellow-100: #ffcc00;\n --color-yellow-80: #ffd633;\n --color-yellow-60: #ffe066;\n --color-yellow-40: #ffeb99;\n --color-yellow-20: #fff5cc;\n --color-yellow-10: #fffae6;\n --color-yellow-5: #fffcf2;\n --color-grey: #262b38;\n --color-grey-140: #171a22;\n --color-grey-130: #1b1e27;\n --color-grey-120: #1e222d;\n --color-grey-110: #222732;\n --color-grey-100: #262b38;\n --color-grey-80: #515560;\n --color-grey-75: #515560;\n --color-grey-60: #7d8088;\n --color-grey-40: #a8aaaf;\n --color-grey-20: #d4d5d7;\n --color-grey-10: #e9eaeb;\n --color-grey-5: #f4f5f5;\n --color-grey-3: #f9f9f9;\n --color-orange: #ff6200;\n --color-orange-140: #993b00;\n --color-orange-130: #b34500;\n --color-orange-120: #cc4e00;\n --color-orange-110: #e65800;\n --color-orange-100: #e65800;\n --color-orange-80: #ff8133;\n --color-orange-60: #ff914d;\n --color-orange-40: #ffb180;\n --color-orange-20: #ffd0b3;\n --color-orange-10: #ffefe6;\n --color-orange-5: #fff7f2;\n --color-green: #00c991;\n --color-green-140: #007957;\n --color-green-130: #008d66;\n --color-green-120: #008d66;\n --color-green-110: #00b583;\n --color-green-100: #00c991;\n --color-green-80: #00c991;\n --color-green-60: #66dfbd;\n --color-green-40: #99e9d3;\n --color-green-20: #ccf4e9;\n --color-green-10: #e6faf4;\n --color-green-5: #f2fcf9;\n --color-red: #ef0044;\n --color-red-140: #8f0029;\n --color-red-130: #a70030;\n --color-red-120: #bf0036;\n --color-red-110: #d7003d;\n --color-red-100: #ef0044;\n --color-red-80: #f23369;\n --color-red-60: #f5668f;\n --color-red-40: #f999b4;\n --color-red-20: #fcccda;\n --color-red-10: #fde6ec;\n --color-red-5: #fef2f5;\n --color-accent-blue-100: #00e9ff;\n --color-accent-blue-30: #b3f8ff;\n --color-purple: #510dcd;\n --color-purple-140: #31087b;\n --color-purple-130: #390990;\n --color-purple-120: #410aa4;\n --color-purple-110: #490cb9;\n --color-purple-100: #510dcd;\n --color-purple-80: #743dd7;\n --color-purple-60: #976ee1;\n --color-purple-40: #bf9af1;\n --color-purple-20: #dccff5;\n --color-purple-10: #eee7fa;\n --color-purple-5: #eee7fa;\n --color-white: #fff;\n --color-black: #000;\n --font-family: Arial, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n --line-height-regular: 1.5;\n --line-height-heading: 1.2;\n --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n font-
|
|
1347
|
+
var css_248z$1k = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n bborder: 1px2px;\n border: 1px solid #626262;\n }\n :host {\n --color-blue: #0e47cb;\n --color-blue-140: #082b7a;\n --color-blue-130: #082b7a;\n --color-blue-120: #0b39a2;\n --color-blue-110: #0d40b7;\n --color-blue-100: #0e47cb;\n --color-blue-80: #3e6cd5;\n --color-blue-60: #6e91e0;\n --color-blue-40: #9fb5ea;\n --color-blue-20: #cfdaf5;\n --color-blue-10: #e7edfa;\n --color-blue-5: #f3f6fc;\n --color-yellow: #ffcc00;\n --color-yellow-140: #997a00;\n --color-yellow-130: #b38f00;\n --color-yellow-120: #cca300;\n --color-yellow-110: #e6b800;\n --color-yellow-100: #ffcc00;\n --color-yellow-80: #ffd633;\n --color-yellow-60: #ffe066;\n --color-yellow-40: #ffeb99;\n --color-yellow-20: #fff5cc;\n --color-yellow-10: #fffae6;\n --color-yellow-5: #fffcf2;\n --color-grey: #262b38;\n --color-grey-140: #171a22;\n --color-grey-130: #1b1e27;\n --color-grey-120: #1e222d;\n --color-grey-110: #222732;\n --color-grey-100: #262b38;\n --color-grey-80: #515560;\n --color-grey-75: #515560;\n --color-grey-60: #7d8088;\n --color-grey-40: #a8aaaf;\n --color-grey-20: #d4d5d7;\n --color-grey-10: #e9eaeb;\n --color-grey-5: #f4f5f5;\n --color-grey-3: #f9f9f9;\n --color-orange: #ff6200;\n --color-orange-140: #993b00;\n --color-orange-130: #b34500;\n --color-orange-120: #cc4e00;\n --color-orange-110: #e65800;\n --color-orange-100: #e65800;\n --color-orange-80: #ff8133;\n --color-orange-60: #ff914d;\n --color-orange-40: #ffb180;\n --color-orange-20: #ffd0b3;\n --color-orange-10: #ffefe6;\n --color-orange-5: #fff7f2;\n --color-green: #00c991;\n --color-green-140: #007957;\n --color-green-130: #008d66;\n --color-green-120: #008d66;\n --color-green-110: #00b583;\n --color-green-100: #00c991;\n --color-green-80: #00c991;\n --color-green-60: #66dfbd;\n --color-green-40: #99e9d3;\n --color-green-20: #ccf4e9;\n --color-green-10: #e6faf4;\n --color-green-5: #f2fcf9;\n --color-red: #ef0044;\n --color-red-140: #8f0029;\n --color-red-130: #a70030;\n --color-red-120: #bf0036;\n --color-red-110: #d7003d;\n --color-red-100: #ef0044;\n --color-red-80: #f23369;\n --color-red-60: #f5668f;\n --color-red-40: #f999b4;\n --color-red-20: #fcccda;\n --color-red-10: #fde6ec;\n --color-red-5: #fef2f5;\n --color-accent-blue-100: #00e9ff;\n --color-accent-blue-30: #b3f8ff;\n --color-purple: #510dcd;\n --color-purple-140: #31087b;\n --color-purple-130: #390990;\n --color-purple-120: #410aa4;\n --color-purple-110: #490cb9;\n --color-purple-100: #510dcd;\n --color-purple-80: #743dd7;\n --color-purple-60: #976ee1;\n --color-purple-40: #bf9af1;\n --color-purple-20: #dccff5;\n --color-purple-10: #eee7fa;\n --color-purple-5: #eee7fa;\n --color-white: #fff;\n --color-black: #000;\n --font-family: Arial, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n --line-height-regular: 1.5;\n --line-height-heading: 1.2;\n --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n a,\n button {\n outline: none;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-heading);\n margin: 0;\n padding: 0;\n }\n p {\n font-weight: var(--font-weight);\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: 0.5em;\n }\n .required label span::after,\n .required legend span::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n p.l,\n p.lead {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n p,\n p.m,\n p.medium {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n p.s,\n p.small {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n p.xs,\n p.extra-small {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1348
1348
|
|
|
1349
|
-
var css_248z$1j = "@layer kol-theme-component {\n .accordion {\n border-radius: 8px;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n margin: 0;\n
|
|
1349
|
+
var css_248z$1j = "@layer kol-theme-component {\n .accordion {\n border-radius: 8px;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n margin: 0;\n }\n .accordion:focus-within {\n outline: 2px solid #0e47cb;\n outline-offset: -2px;\n }\n .accordion__heading {\n font-size: 2em;\n }\n .accordion__heading-button button {\n border-radius: 8px;\n outline-offset: -1px;\n border: 0;\n border-bottom-color: #cfdaf5;\n border-bottom-style: solid;\n border-bottom-width: 2px;\n color: #171a22;\n position: relative;\n display: block;\n font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n text-align: start;\n width: 100%;\n line-height: 1.2;\n }\n .accordion__heading-button button:focus {\n outline: none;\n }\n .accordion__heading-button button .button-inner > span {\n align-items: baseline;\n }\n .accordion__heading-button button::before {\n background-color: #fc0;\n border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n height: calc(4rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n left: calc(24rem / var(--kolibri-root-font-size, 16));\n top: 0;\n width: 3rem 2;\n }\n .accordion__heading-button .kol-icon {\n margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button .kol-icon::part(icon)::before {\n color: #0e47cb;\n font-weight: 900;\n font-family: \"Font Awesome 6 Free\";\n }\n .accordion__content {\n -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-margin-start: 0;\n border-bottom: 2px solid #cfdaf5;\n border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #515560;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n margin-inline-start: 0;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .open .accordion__heading-button button {\n border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .open .accordion__heading-button .kol-icon::part(icon)::before {\n content: \"\\f077\";\n }\n :not(.open) .accordion__heading-button button .kol-icon::part(icon)::before {\n content: \"\\f078\";\n }\n}";
|
|
1350
1350
|
|
|
1351
1351
|
var css_248z$1i = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n}";
|
|
1352
1352
|
|
|
@@ -1358,7 +1358,7 @@ var css_248z$1f = "@layer kol-theme-component {\n :host > .kol-button-group-wc
|
|
|
1358
1358
|
|
|
1359
1359
|
var css_248z$1e = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
|
|
1360
1360
|
|
|
1361
|
-
var css_248z$1d = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .
|
|
1361
|
+
var css_248z$1d = "@layer kol-theme-component {\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .header {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host .content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n :host .footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > .content + .footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
|
|
1362
1362
|
|
|
1363
1363
|
var css_248z$1c = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: var(--a11y-min-size);\n border: 1pxlid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
|
|
1364
1364
|
|
|
@@ -1412,9 +1412,9 @@ var css_248z$Q = "@layer kol-theme-component {\n .cycle {\n padding: calc(2r
|
|
|
1412
1412
|
|
|
1413
1413
|
var css_248z$P = "@layer kol-theme-component {\n :host {\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n border-radius: 4px;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1414
1414
|
|
|
1415
|
-
var css_248z$O = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host
|
|
1415
|
+
var css_248z$O = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-stateless-wc {\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
|
|
1416
1416
|
|
|
1417
|
-
var css_248z$N = "@layer kol-theme-component {\n :host
|
|
1417
|
+
var css_248z$N = "@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-stateless-wc {\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
|
|
1418
1418
|
|
|
1419
1419
|
var css_248z$M = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .tabs-button-group button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3 px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
|
|
1420
1420
|
|
|
@@ -1473,9 +1473,9 @@ const ECL_EU = KoliBri.createTheme('ecl-eu', {
|
|
|
1473
1473
|
'KOL-TREE-ITEM': css_248z$H,
|
|
1474
1474
|
});
|
|
1475
1475
|
|
|
1476
|
-
var css_248z$G = "@layer kol-theme-global {\n :host {\n --border-color: var(--color-anthrazit);\n --border-radius: 2px;\n --color-anthrazit: #333;\n --color-jade: #f3f7fb;\n --color-weiss: #fff;\n --color-petrol: #007a89;\n --color-achat: #0b4d59;\n --color-teal: #056773;\n --color-fluorit: #66ddec;\n --color-rotton: rgb(188, 0, 0, 1);\n --color-rotton-20: rgb(188, 0, 0, 0.2);\n --color-gras: #138510;\n --color-warn: #f0541e;\n --color-blut: var(--color-rotton);\n --color-input-bg-default: #e8edf2;\n --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n --color-citrin: #d4c912;\n --color-umber: #494500;\n --color-gelb: #fff443;\n --color-lichtgelb: #eeff6c;\n --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n --font-family-sans: Verdana;\n --font-family-serif: \"Times New Roman\";\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: 0.125em;\n --kolibri-spacing: calc(2 * var(--spacing));\n }\n :host {\n font-
|
|
1476
|
+
var css_248z$G = "@layer kol-theme-global {\n :host {\n --border-color: var(--color-anthrazit);\n --border-radius: 2px;\n --color-anthrazit: #333;\n --color-jade: #f3f7fb;\n --color-weiss: #fff;\n --color-petrol: #007a89;\n --color-achat: #0b4d59;\n --color-teal: #056773;\n --color-fluorit: #66ddec;\n --color-rotton: rgb(188, 0, 0, 1);\n --color-rotton-20: rgb(188, 0, 0, 0.2);\n --color-gras: #138510;\n --color-warn: #f0541e;\n --color-blut: var(--color-rotton);\n --color-input-bg-default: #e8edf2;\n --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n --color-citrin: #d4c912;\n --color-umber: #494500;\n --color-gelb: #fff443;\n --color-lichtgelb: #eeff6c;\n --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n --font-family-sans: Verdana;\n --font-family-serif: \"Times New Roman\";\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: 0.125em;\n --kolibri-spacing: calc(2 * var(--spacing));\n }\n :host {\n font-family: var(--font-family-sans);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n a:focus,\n button:focus,\n input:focus,\n select:focus,\n summary:focus,\n textarea:focus {\n cursor: pointer;\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: 0.25em;\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n border-radius: 2px;\n border: 1px solid #626262;\n }\n .badge-text-hint {\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1477
1477
|
|
|
1478
|
-
var css_248z$F = "@layer kol-theme-component {\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n border-color: var(--kolibri-border-color);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n }\n .accordion__heading-button {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n font-weight: 700;\n }\n .accordion__heading-button button {\n line-height: 1.75;\n }\n .accordion__heading-button button {\n font-weight: inherit;\n line-height: inherit;\n cursor: pointer;\n width: 100%;\n margin: 0;\n display: flex;\n gap: 0.5em;\n border: 0;\n align-items: center;\n
|
|
1478
|
+
var css_248z$F = "@layer kol-theme-component {\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n border-color: var(--kolibri-border-color);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n }\n .accordion__heading-button {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n font-weight: 700;\n }\n .accordion__heading-button button {\n line-height: 1.75;\n }\n .accordion__heading-button button {\n font-weight: inherit;\n line-height: inherit;\n cursor: pointer;\n width: 100%;\n margin: 0;\n display: flex;\n gap: 0.5em;\n border: 0;\n align-items: center;\n background-color: transparent;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button .kol-icon::part(icon) {\n color: var(--color-midnight);\n }\n .accordion__heading-button .kol-icon::part(close)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f077\";\n }\n .accordion__heading-button .kol-icon::part(open)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f078\";\n }\n .accordion__heading {\n margin: 0;\n }\n .accordion__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .open .accordion__heading-button button {\n padding-bottom: 0;\n }\n .open .accordion__heading-button .kol-icon {\n width: 1em;\n }\n .open .accordion__content {\n margin: 0;\n }\n}";
|
|
1479
1479
|
|
|
1480
1480
|
var css_248z$E = "@layer kol-theme-component {\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n}";
|
|
1481
1481
|
|
|
@@ -1497,7 +1497,7 @@ var css_248z$w = "@layer kol-theme-component {\n .details__heading-button {\n
|
|
|
1497
1497
|
|
|
1498
1498
|
var css_248z$v = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
|
|
1499
1499
|
|
|
1500
|
-
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc .kol-link-wc a,\n .kol-link-wc .kol-button-wc button {\n text-decoration-line: none;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc a:focus,\n .kol-link-wc a:hover,\n .kol-link-wc button:focus,\n .kol-link-wc button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link-wc a > .kol-span-wc,\n .kol-link-wc button > .kol-span-wc {\n gap: 0.25em;\n }\n .kol-link-wc a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1500
|
+
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc .kol-link-wc a,\n .kol-link-wc .kol-button-wc button {\n text-decoration-line: none;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc a:focus,\n .kol-link-wc a:hover,\n .kol-link-wc button:focus,\n .kol-link-wc button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link-wc a > .kol-span-wc,\n .kol-link-wc button > .kol-span-wc {\n gap: 0.25em;\n }\n .kol-link-wc a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n }\n .kol-link-wc a.skip:focus {\n background-color: white;\n box-shadow: 0 0 8px 8px white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n border-left: 4px solid var(--color-petrol);\n padding: 0.25em 0.5em;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1501
1501
|
|
|
1502
1502
|
var css_248z$t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n margin: 0;\n padding: 0;\n }\n .headline-h1 {\n font-family: var(--font-family-serif);\n font-size: calc(54rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h2 {\n font-family: var(--font-family-serif);\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h3 {\n font-family: var(--font-family-serif);\n font-size: calc(26rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h4 {\n font-family: var(--font-family-serif);\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n .headline-h5 {\n font-family: var(--font-family-serif);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h6 {\n font-family: var(--font-family-sans);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n}";
|
|
1503
1503
|
|
|
@@ -1505,33 +1505,33 @@ var css_248z$s = "@layer kol-theme-component {\n .kol-indented-text-wc > div {\
|
|
|
1505
1505
|
|
|
1506
1506
|
var css_248z$r = "@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-width: 2px;\n border-style: solid;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 2;\n padding-left: calc(4 * var(--spacing));\n }\n .kol-input > .kol-alert-wc.error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n height: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n width: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n min-width: 3.2em;\n width: 3.2em;\n height: 1.7em;\n position: relative;\n }\n .switch input[type=checkbox]:before {\n /* border-radius: 0.25em; */\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n transition: 0.5;\n width: 1.2em;\n height: 1.2em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n background-color: black;\n position: absolute;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n grid-column: span 2;\n font-style: italic;\n color: gray;\n display: block;\n order: 3;\n padding: 0 var(--spacing);\n }\n .button:focus-within {\n border-radius: 32px;\n outline-color: var(--color-achat);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n }\n}";
|
|
1507
1507
|
|
|
1508
|
-
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1508
|
+
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1509
1509
|
|
|
1510
|
-
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1510
|
+
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1511
1511
|
|
|
1512
|
-
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1512
|
+
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1513
1513
|
|
|
1514
|
-
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1514
|
+
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1515
1515
|
|
|
1516
|
-
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1516
|
+
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1517
1517
|
|
|
1518
|
-
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1518
|
+
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1519
1519
|
|
|
1520
1520
|
var css_248z$k = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n label {\n font-weight: normal;\n }\n :host input:focus {\n outline-color: var(--color-achat);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n width: 100%;\n color: var(--color-anthrazit);\n border-color: var(--default-border);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n /* padding: rem(10) rem(14); */\n }\n input:hover {\n border-color: var(--color-achat);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n order: 3;\n }\n .kol-required span::after {\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n }\n fieldset .hint,\n fieldset .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .hint {\n order: 4;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n }\n fieldset.horizontal {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n }\n fieldset legend {\n display: block;\n width: 100%;\n line-height: 1.5;\n }\n .radio-input-wrapper,\n .input {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n align-items: center;\n position: relative;\n }\n .radio-label {\n cursor: pointer;\n display: flex;\n width: 100%;\n }\n .radio-label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n width: calc(12 * var(--spacing));\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n box-shadow: 0 0 1.6px black;\n background-color: var(--color-petrol);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-input-bg-default);\n border-color: #999;\n cursor: not-allowed;\n }\n .kol-alert-wc {\n width: 100%;\n }\n}";
|
|
1521
1521
|
|
|
1522
|
-
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n
|
|
1522
|
+
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1523
1523
|
|
|
1524
1524
|
var css_248z$i = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-radius: var(--border-radius);\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1525
1525
|
|
|
1526
|
-
var css_248z$h = "@layer kol-theme-component {\n .kol-link-wc a,\n .kol-button-wc button {\n text-decoration-line: none;\n }\n a,\n button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n a:focus,\n a:hover,\n button:focus,\n button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n }\n a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n
|
|
1526
|
+
var css_248z$h = "@layer kol-theme-component {\n .kol-link-wc a,\n .kol-button-wc button {\n text-decoration-line: none;\n }\n a,\n button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n a:focus,\n a:hover,\n button:focus,\n button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n }\n a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n z-index: 9999999;\n }\n a.skip:focus {\n background-color: white;\n box-shadow: 0 0 8px 8px white;\n left: unset;\n position: unset;\n }\n}";
|
|
1527
1527
|
|
|
1528
|
-
var css_248z$g = "@layer kol-theme-component {\n :host > div > nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n }\n :host > div > nav ul > li {\n border-radius: var(--border-radius);\n
|
|
1528
|
+
var css_248z$g = "@layer kol-theme-component {\n :host > div > nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n }\n :host > div > nav ul > li {\n border-radius: var(--border-radius);\n padding: 0.125em;\n }\n :host > div > nav ul > li[part*=vertical] + li {\n border-radius: 0;\n border-top: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"vertical selected\"] {\n border-right: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li[part*=horizontal] + li {\n border-radius: 0;\n border-left: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"horizontal selected\"] {\n border-bottom: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li > div {\n height: 100%;\n }\n :host > div > nav .kol-link-wc {\n width: 100%;\n /*height: 100%;font-weight: 600;*/\n display: block;\n }\n :host > div > nav .kol-link-wc a {\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n border: 1px solid transparent;\n grid: flex;\n line-height: 2;\n padding: 0.5em;\n color: white;\n height: 100%;\n -webkit-box-align: center;\n align-items: center;\n display: flex;\n cursor: pointer;\n text-decoration: inherit;\n }\n :host > div > nav .kol-link-wc[exportparts*=selected] a {\n background-color: var(--color-achat);\n font-weight: 700;\n }\n :host > div > nav .kol-link-wc a .kol-icon.mr-2 {\n margin-right: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link-wc a .kol-icon.ml-2 {\n margin-left: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link-wc a:focus,\n :host > div > nav .kol-link-wc a:hover {\n border: 1px solid white;\n background-color: var(--color-fluorit);\n color: var(--color-anthrazit);\n }\n /* compact button */\n :host > div > div:last-child {\n margin-top: 0.5em;\n text-align: center;\n }\n :host > div > nav .kol-link-wc a.text-center {\n display: grid;\n align-items: center;\n justify-items: center;\n }\n /* horizontal */\n ul.flex {\n display: flex;\n }\n li > div > div.absolute {\n position: absolute;\n }\n .kol-span-wc {\n justify-items: baseline;\n }\n .toggle-button :is(a, button) > .kol-span-wc,\n .toggle-button :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n color: var(--color-anthrazit);\n display: grid;\n place-items: center;\n border-radius: 32px;\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-color: transparent;\n }\n .toggle-button :is(a, button):hover > .kol-span-wc,\n .toggle-button :is(a, button):focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1529
1529
|
|
|
1530
1530
|
var css_248z$f = "@layer kol-theme-component {\n .button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n }\n .button-inner {\n background-color: var(--color-weiss);\n border-radius: 32px;\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .hide-label .button-inner {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .button:not(:disabled):hover .button-inner,\n .button:focus .button-inner {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1;\n text-decoration: underline;\n }\n}";
|
|
1531
1531
|
|
|
1532
1532
|
var css_248z$e = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-radius: var(--border-radius);\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n button > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
1533
1533
|
|
|
1534
|
-
var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n
|
|
1534
|
+
var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1535
1535
|
|
|
1536
1536
|
var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n width: 100%;\n }\n select:not(.disabled) select:hover, select:focus-within {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n option {\n min-height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
|
|
1537
1537
|
|
|
@@ -1543,11 +1543,11 @@ var css_248z$9 = "@layer kol-theme-component {\n .cycle {\n padding: calc(2r
|
|
|
1543
1543
|
|
|
1544
1544
|
var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-radius: var(--border-radius);\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1545
1545
|
|
|
1546
|
-
var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n :host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n }\n @media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: 1px solid var(--color-petrol);\n border-width: 0 1px 1px 1px;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n}";
|
|
1546
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n :host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n }\n @media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: 1px solid var(--color-petrol);\n border-width: 0 1px 1px 1px;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n}";
|
|
1547
1547
|
|
|
1548
|
-
var css_248z$6 = "@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: 1px solid var(--color-petrol);\n border-width: 0 1px 1px 1px;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n}";
|
|
1548
|
+
var css_248z$6 = "@layer kol-theme-component {\n :host {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: 1px solid var(--color-petrol);\n border-width: 0 1px 1px 1px;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n}";
|
|
1549
1549
|
|
|
1550
|
-
var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n display: flex;\n background-color: var(--color-petrol);\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n line-height: 1.25;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n
|
|
1550
|
+
var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n display: flex;\n background-color: var(--color-petrol);\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n line-height: 1.25;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin);\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n button.primary,\n button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n outline: 0;\n box-shadow: none;\n }\n .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .close-button button {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n left: -4.25em;\n top: 0.25em;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
1551
1551
|
|
|
1552
1552
|
var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n width: 100%;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:read-only {\n border-color: var(--border-default);\n background-color: var(--background-light-grey);\n }\n}";
|
|
1553
1553
|
|