@public-ui/themes 4.0.0-alpha.5 → 4.0.0-alpha.6
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 +23 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +23 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +10 -10
package/dist/index.cjs
CHANGED
|
@@ -798,9 +798,9 @@ var hasRequiredCjs$1;
|
|
|
798
798
|
function requireCjs$1 () {
|
|
799
799
|
if (hasRequiredCjs$1) return cjs$1;
|
|
800
800
|
hasRequiredCjs$1 = 1;
|
|
801
|
-
(function (exports) {
|
|
802
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
803
|
-
exports.querySelectorAll = void 0;
|
|
801
|
+
(function (exports$1) {
|
|
802
|
+
Object.defineProperty(exports$1, "__esModule", { value: true });
|
|
803
|
+
exports$1.querySelectorAll = void 0;
|
|
804
804
|
const pushNodes = (set, domNodes) => {
|
|
805
805
|
domNodes.forEach((domNode) => {
|
|
806
806
|
if (set.has(domNode) === false) {
|
|
@@ -818,10 +818,10 @@ function requireCjs$1 () {
|
|
|
818
818
|
for (let i = 0; i < nodeList.length; i++) {
|
|
819
819
|
const shadowRoot = nodeList[i].shadowRoot;
|
|
820
820
|
if (typeof shadowRoot === "object" && shadowRoot !== null) {
|
|
821
|
-
pushNodes(domNodes, (0, exports.querySelectorAll)(selector, shadowRoot));
|
|
821
|
+
pushNodes(domNodes, (0, exports$1.querySelectorAll)(selector, shadowRoot));
|
|
822
822
|
}
|
|
823
823
|
else {
|
|
824
|
-
pushNodes(domNodes, (0, exports.querySelectorAll)(selector, nodeList[i]));
|
|
824
|
+
pushNodes(domNodes, (0, exports$1.querySelectorAll)(selector, nodeList[i]));
|
|
825
825
|
}
|
|
826
826
|
}
|
|
827
827
|
return Array.from(domNodes);
|
|
@@ -830,7 +830,7 @@ function requireCjs$1 () {
|
|
|
830
830
|
throw new Error(`The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.`);
|
|
831
831
|
}
|
|
832
832
|
};
|
|
833
|
-
exports.querySelectorAll = querySelectorAll;
|
|
833
|
+
exports$1.querySelectorAll = querySelectorAll;
|
|
834
834
|
|
|
835
835
|
} (cjs$1));
|
|
836
836
|
return cjs$1;
|
|
@@ -845,9 +845,9 @@ var hasRequiredCjs;
|
|
|
845
845
|
function requireCjs () {
|
|
846
846
|
if (hasRequiredCjs) return cjs;
|
|
847
847
|
hasRequiredCjs = 1;
|
|
848
|
-
(function (exports) {
|
|
849
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
850
|
-
exports.querySelector = void 0;
|
|
848
|
+
(function (exports$1) {
|
|
849
|
+
Object.defineProperty(exports$1, "__esModule", { value: true });
|
|
850
|
+
exports$1.querySelector = void 0;
|
|
851
851
|
const querySelector = (selector, node = document) => {
|
|
852
852
|
if (node instanceof Document ||
|
|
853
853
|
node instanceof HTMLElement ||
|
|
@@ -858,10 +858,10 @@ function requireCjs () {
|
|
|
858
858
|
for (let i = 0; i < nodeList.length; i++) {
|
|
859
859
|
const shadowRoot = nodeList[i].shadowRoot;
|
|
860
860
|
if (typeof shadowRoot === "object" && shadowRoot !== null) {
|
|
861
|
-
domNode = (0, exports.querySelector)(selector, shadowRoot);
|
|
861
|
+
domNode = (0, exports$1.querySelector)(selector, shadowRoot);
|
|
862
862
|
}
|
|
863
863
|
else {
|
|
864
|
-
domNode = (0, exports.querySelector)(selector, nodeList[i]);
|
|
864
|
+
domNode = (0, exports$1.querySelector)(selector, nodeList[i]);
|
|
865
865
|
}
|
|
866
866
|
if (domNode !== null) {
|
|
867
867
|
break;
|
|
@@ -874,7 +874,7 @@ function requireCjs () {
|
|
|
874
874
|
throw new Error(`The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.`);
|
|
875
875
|
}
|
|
876
876
|
};
|
|
877
|
-
exports.querySelector = querySelector;
|
|
877
|
+
exports$1.querySelector = querySelector;
|
|
878
878
|
|
|
879
879
|
} (cjs));
|
|
880
880
|
return cjs;
|
|
@@ -986,6 +986,7 @@ var KolEvent;
|
|
|
986
986
|
KolEvent["create"] = "kolCreate";
|
|
987
987
|
KolEvent["focus"] = "kolFocus";
|
|
988
988
|
KolEvent["input"] = "kolInput";
|
|
989
|
+
KolEvent["keydown"] = "kolKeydown";
|
|
989
990
|
KolEvent["mousedown"] = "kolMousedown";
|
|
990
991
|
KolEvent["reset"] = "kolReset";
|
|
991
992
|
KolEvent["select"] = "kolSelect";
|
|
@@ -1177,7 +1178,7 @@ var css_248z$1_ = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1177
1178
|
|
|
1178
1179
|
var css_248z$1Z = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-badge {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .kol-button {\n color: inherit;\n padding: calc(3.2 * 1rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-badge__smart-button .kol-button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-badge__smart-button .kol-button__text {\n padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n }\n .kol-badge__label {\n padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
1179
1180
|
|
|
1180
|
-
var css_248z$1Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-
|
|
1181
|
+
var css_248z$1Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__separator {\n color: var(--color-subtle);\n font-size: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 900;\n }\n .kol-link {\n line-height: 1;\n }\n}";
|
|
1181
1182
|
|
|
1182
1183
|
var css_248z$1X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-button {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-button:focus {\n outline: none;\n --text-border-radius: var(--border-radius);\n --text-outline: calc(var(--border-width) * 2) solid;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n outline: var(--text-outline);\n border-radius: var(--text-border-radius);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n}";
|
|
1183
1184
|
|
|
@@ -1223,7 +1224,7 @@ var css_248z$1D = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1223
1224
|
|
|
1224
1225
|
var css_248z$1C = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: var(--color-light);\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n width: 100%;\n height: 100%;\n }\n .kol-card__header {\n display: block;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .kol-card__content {\n padding: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-card__close-button {\n color: var(--color-primary);\n background: transparent;\n cursor: pointer;\n }\n .kol-card__close-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-card__close-button .kol-button:focus, .kol-card__close-button .kol-button:hover {\n color: var(--color-light);\n background-color: var(--color-danger);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-top-right-radius: var(--border-radius);\n }\n .kol-modal__card {\n box-shadow: 0 0 4px var(--color-subtle);\n border-radius: var(--border-radius);\n }\n}";
|
|
1225
1226
|
|
|
1226
|
-
var css_248z$1B = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n .kol-nav {\n --kol-nav-item-padding-left: 0;\n --kol-nav-item-padding-right: 16;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n }\n .kol-nav__list--horizontal {\n --kol-nav-item-padding-right: 8;\n gap: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__entry .kol-link:hover .kol-span__label,\n .kol-nav__entry .kol-button:hover .kol-span__label {\n text-decoration: underline;\n }\n .kol-nav__toggle-button .kol-button {\n margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\n --text-background-color: var(--color-
|
|
1227
|
+
var css_248z$1B = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n .kol-nav {\n --kol-nav-item-padding-left: 0;\n --kol-nav-item-padding-right: 16;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n }\n .kol-nav__list--horizontal {\n --kol-nav-item-padding-right: 8;\n gap: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__entry .kol-link:hover .kol-span__label,\n .kol-nav__entry .kol-button:hover .kol-span__label {\n text-decoration: underline;\n }\n .kol-nav__toggle-button .kol-button {\n margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-nav__toggle-button .kol-button {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-nav__toggle-button .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n width: unset;\n padding: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n}";
|
|
1227
1228
|
|
|
1228
1229
|
var css_248z$1A = "/* forward the rem function */\n@layer kol-theme-component {\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n}";
|
|
1229
1230
|
|
|
@@ -1314,7 +1315,7 @@ var css_248z$1h = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1314
1315
|
|
|
1315
1316
|
var css_248z$1g = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n .badge-text-hint {\n color: var(--color-text);\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1316
1317
|
|
|
1317
|
-
var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1318
|
+
var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n}";
|
|
1318
1319
|
|
|
1319
1320
|
var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75em;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}";
|
|
1320
1321
|
|
|
@@ -1336,7 +1337,7 @@ var css_248z$16 = "/* forward the rem function */\n@layer kol-theme-component {\
|
|
|
1336
1337
|
|
|
1337
1338
|
var css_248z$15 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
|
|
1338
1339
|
|
|
1339
|
-
var css_248z$14 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1340
|
+
var css_248z$14 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n .kol-button__text {\n white-space: nowrap;\n }\n .kol-input-container {\n padding: 0 0 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--is-dragover {\n border-color: var(--color-blue);\n }\n}";
|
|
1340
1341
|
|
|
1341
1342
|
var css_248z$13 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
|
|
1342
1343
|
|
|
@@ -1354,11 +1355,11 @@ var css_248z$Z = "@layer kol-theme-component {\n .kol-link {\n color: var(--
|
|
|
1354
1355
|
|
|
1355
1356
|
var css_248z$Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75em;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}\n@layer kol-theme-component {\n .kol-modal__card {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
|
|
1356
1357
|
|
|
1357
|
-
var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1358
|
+
var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-nav__toggle-button .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color) !important;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n text-decoration: none !important;\n }\n .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n outline-offset: -2px;\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\n color: var(--color-white);\n border-color: transparent;\n border-style: solid;\n height: 100%;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n justify-items: start;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :is(.kol-button, .kol-link):focus-within .kol-span {\n border-color: var(--color-white);\n }\n :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n text-decoration: underline;\n }\n}";
|
|
1358
1359
|
|
|
1359
1360
|
var css_248z$W = "/* forward the rem function */\n@layer kol-theme-component {\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination {\n display: grid;\n }\n .kol-pagination .kol-button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-black);\n background-color: var(--color-yellow);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n border: 2px solid var(--color-yellow);\n }\n .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: 2px solid var(--color-black);\n outline-offset: -4px;\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-pagination__button--selected .kol-button:not(:disabled) {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n opacity: 1;\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n text-decoration: underline;\n }\n}";
|
|
1360
1361
|
|
|
1361
|
-
var css_248z$V = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1362
|
+
var css_248z$V = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n}";
|
|
1362
1363
|
|
|
1363
1364
|
var css_248z$U = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-progress__bar-progress {\n fill: var(--color-blue-130);\n }\n .kol-progress__cycle-background {\n stroke: var(--color-grey-25);\n }\n .kol-progress__cycle-progress {\n stroke: var(--color-blue-130);\n }\n}";
|
|
1364
1365
|
|
|
@@ -1370,7 +1371,7 @@ var css_248z$R = "/* forward the rem function */\n@layer kol-theme-component {\n
|
|
|
1370
1371
|
|
|
1371
1372
|
var css_248z$Q = "/* forward the rem function */\n@layer kol-theme-component {\n .cycle {\n padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-75);\n }\n}";
|
|
1372
1373
|
|
|
1373
|
-
var css_248z$P = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 0;\n border-width: 2px;\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button .kol-button .kol-span {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n }\n .kol-split-button__horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .kol-split-button .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1374
|
+
var css_248z$P = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 0;\n border-width: 2px;\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button .kol-button .kol-span {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n }\n .kol-split-button__horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .kol-split-button .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-split-button .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-split-button .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-split-button .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-split-button .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-split-button .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-split-button .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-split-button .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-split-button .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-split-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-split-button .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-split-button .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n outline-offset: -6px;\n }\n .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n outline-offset: -2px;\n }\n}";
|
|
1374
1375
|
|
|
1375
1376
|
var css_248z$O = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination {\n display: grid;\n }\n .kol-pagination .kol-button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-black);\n background-color: var(--color-yellow);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n border: 2px solid var(--color-yellow);\n }\n .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: 2px solid var(--color-black);\n outline-offset: -4px;\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-pagination__button--selected .kol-button:not(:disabled) {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n opacity: 1;\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n text-decoration: underline;\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n display: block;\n }\n .kol-table__scroll-container {\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--header {\n color: var(--color-midnight);\n background-color: var(--color-white);\n font-weight: normal;\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n .kol-table__table {\n border-color: var(--color-ice);\n border-style: solid;\n width: 100%;\n border-width: 0;\n border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n border-spacing: 0;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table__selection-input:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n border-color: var(--color-blue);\n outline-offset: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n border-color: var(--color-grey-75);\n display: block;\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
|
|
1376
1377
|
|
|
@@ -1380,9 +1381,9 @@ var css_248z$M = "/* forward the rem function */\n@layer kol-theme-component {\n
|
|
|
1380
1381
|
|
|
1381
1382
|
var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
|
|
1382
1383
|
|
|
1383
|
-
var css_248z$K = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item
|
|
1384
|
+
var css_248z$K = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item .kol-alert--variant-msg {\n border: none;\n }\n .kol-toast-item .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-toast-item .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-toast-item .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-toast-item .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-toast-item .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-toast-item .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item {\n background-color: #fff;\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item__alert {\n display: block;\n }\n}";
|
|
1384
1385
|
|
|
1385
|
-
var css_248z$J = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n
|
|
1386
|
+
var css_248z$J = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n .kol-link {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-link {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-link--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-link--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-link--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-link--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-link--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-link--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-link--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-link--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-link--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-link--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-link--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-link--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-link--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-link__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n .kol-link--hide-label .kol-link__text .kol-span__label {\n display: none;\n }\n .kol-link--secondary:focus .kol-link__text {\n outline-offset: -6px;\n }\n .kol-link--ghost:focus .kol-link__text {\n outline-offset: -2px;\n }\n .kol-toolbar {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n padding: var(--spacing-s);\n border-width: 1px;\n }\n .kol-link {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-link:hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n}";
|
|
1386
1387
|
|
|
1387
1388
|
var css_248z$I = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tree-item__children {\n display: flex;\n flex-direction: column;\n }\n .kol-tree-item__link {\n display: block;\n border: 2px solid transparent;\n }\n .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n background-color: var(--color-sky);\n border: 2px solid var(--color-yellow-120);\n }\n .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n color: var(--color-black);\n }\n .kol-tree-item__link--active {\n background-color: var(--color-yellow);\n font-weight: 700;\n }\n .kol-tree-item__link--active .kol-link {\n color: var(--color-black);\n background-color: var(--color-yellow);\n }\n .kol-tree-item__link .kol-link {\n color: var(--color-black);\n text-align: left;\n }\n .kol-tree-item__link .kol-link:focus {\n color: var(--color-black);\n }\n .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n transform: scale(1.3);\n }\n .kol-tree-item__text {\n text-decoration: none;\n }\n}";
|
|
1388
1389
|
|
|
@@ -1510,7 +1511,7 @@ var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n
|
|
|
1510
1511
|
|
|
1511
1512
|
var css_248z$5 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-red);\n }\n .kol-input-container {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n .kol-input-container:focus-within {\n box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n outline: none;\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
|
|
1512
1513
|
|
|
1513
|
-
var css_248z$4 = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item
|
|
1514
|
+
var css_248z$4 = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item .kol-alert--variant-msg {\n border: none;\n }\n .kol-toast-item .kol-alert--variant-card {\n border-style: solid;\n padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-toast-item .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-toast-item .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-toast-item .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-toast-item .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-toast-item .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__closer .kol-icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item {\n background-color: #fff;\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item__alert {\n display: block;\n }\n .kol-toast-item .heading {\n width: 100%;\n }\n .kol-toast-item .heading .heading-content {\n flex: 1;\n }\n}";
|
|
1514
1515
|
|
|
1515
1516
|
var css_248z$3 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: #3e6cd5;\n }\n .kol-button--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-button--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: #fc0;\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-link {\n --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-link--primary:not(:disabled):hover {\n --text-background-color: #3e6cd5;\n }\n .kol-link--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-link--secondary:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-link--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-link--normal:not(:disabled):hover {\n --text-background-color: #fc0;\n }\n .kol-link--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-link--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-link--ghost:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n .kol-link__text:active, .kol-link__text:not(:disabled):hover {\n box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-link--secondary .kol-link__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n .kol-link--secondary.button:focus-visible .kol-link__text {\n box-shadow: inset 0 0 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-link:focus-visible .kol-link__text {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-link--hide-label .kol-link__text .kol-span__label {\n display: none;\n }\n .kol-toolbar {\n background-color: var(--color-white);\n box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n border-radius: 8px;\n padding: var(--spacing-s);\n }\n .kol-link {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-link:hover {\n --text-background-color: #fc0;\n }\n}";
|
|
1516
1517
|
|