@public-ui/theme-bwst 2.2.11 → 2.2.13-414974dfef358e0b2883d8e781bf77fa726d3b61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +566 -94
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +566 -94
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -14
package/dist/index.mjs
CHANGED
|
@@ -362,11 +362,7 @@ var loglevel = {exports: {}};
|
|
|
362
362
|
}));
|
|
363
363
|
}(loglevel));
|
|
364
364
|
|
|
365
|
-
const
|
|
366
|
-
|
|
367
|
-
/*!
|
|
368
|
-
* KoliBri - The accessible HTML-Standard
|
|
369
|
-
*/
|
|
365
|
+
const I=(t,e)=>s=>s(t,e),P=(t,e)=>s=>s(t,e,{append:false}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===true,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let N=()=>{Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const X=(t,e)=>{let s=e.match(W);if(Array.isArray(s)){s=s.filter(o=>q.test(o));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}w.add(t);},y=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);return s instanceof Map&&s.has(e)?s.get(e):""},Z=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},ee=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const o=new CSSStyleSheet;o.replaceSync(a),s.push(o);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,o)=>{if(typeof a!="string"||a.length===0)return;const r=document.createElement("style");switch(r.dataset.themingFallback="",o){case 4:r.dataset.themingBaseA11y="";break;case 3:r.dataset.themingBaseGlobal="";break;case 2:r.dataset.themingBaseComponent="";break;case 1:r.dataset.themingCustomGlobal="";break;case 0:r.dataset.themingCustomComponent="";break;default:r.dataset.themingUnknown="";break}r.innerHTML=a,t.insertBefore(r,t.firstChild);});}},te=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let o;try{o=[...Array.from(t.adoptedStyleSheets)];}catch{o=[];}s?.mode==="before"?(a.reverse().forEach(r=>e.unshift(r.innerHTML)),o.reverse().forEach(r=>e.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>e.push(r.innerHTML)),o.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},se=(t,e,s)=>{const a=e.name||"default";let o;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");o=t.shadowRoot;}catch{o=t;}if(n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))v(t,o,n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const r=y(a,"PROPERTIES"),i=y(a,"GLOBAL"),c=y(a,t.tagName);w.has(a)===false&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===true&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&n$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),v(t,o,m,s);}},v=(t,e,s,a)=>{const o=performance.now();if(Z(e),ee(e,s),H(t),a(),n$1.A11yUi.PERFORMANCE_MEASURES.has(t.tagName)){const r=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);r.count+=1,r.totalTime+=performance.now()-o;}else n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:performance.now()-o});},L=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:a}=e;se(t,a,s),H(t);}};const oe={attributes:true,attributeFilter:[],childList:false,subtree:false},R=J?new MutationObserver((t,e)=>{for(const s of t){const a=s.target;a.classList.contains("hydrated")&&(L(a),e.observe(a,oe));}}):null;R&&(N=()=>{});const H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),N();};class ie{Prefix;Key;Tag;createTheme=(e,s)=>P(e,s);createTranslation=(e,s)=>I(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
|
|
370
366
|
|
|
371
367
|
var KeyEnum;
|
|
372
368
|
(function (KeyEnum) {
|
|
@@ -456,94 +452,571 @@ var TagEnum;
|
|
|
456
452
|
TagEnum[TagEnum["tree"] = 54] = "tree";
|
|
457
453
|
TagEnum[TagEnum["tree-item"] = 55] = "tree-item";
|
|
458
454
|
})(TagEnum || (TagEnum = {}));
|
|
455
|
+
let DEV_MODE = false;
|
|
456
|
+
const getDevMode = () => DEV_MODE === true;
|
|
457
|
+
const LOG_STYLE = 'color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000';
|
|
458
|
+
const mapToArray = (msg) => {
|
|
459
|
+
return Array.isArray(msg) ? msg : [msg];
|
|
460
|
+
};
|
|
461
|
+
const getLogLabel = (label) => {
|
|
462
|
+
return `%c${label}`;
|
|
463
|
+
};
|
|
464
|
+
const handleClassifier = (label, classifier) => {
|
|
465
|
+
if (typeof classifier === 'string' && classifier.length > 0) {
|
|
466
|
+
return `${getLogLabel(label)} | ${classifier}`;
|
|
467
|
+
}
|
|
468
|
+
else {
|
|
469
|
+
return getLogLabel(label);
|
|
470
|
+
}
|
|
471
|
+
};
|
|
472
|
+
const getShield = (label, options) => {
|
|
473
|
+
return [handleClassifier(label, options === null || options === void 0 ? void 0 : options.classifier), `${LOG_STYLE};${(options === null || options === void 0 ? void 0 : options.overwriteStyle) || ''}`];
|
|
474
|
+
};
|
|
475
|
+
const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
|
|
476
|
+
class Logger {
|
|
477
|
+
constructor(label, devMode) {
|
|
478
|
+
this.label = label;
|
|
479
|
+
this.devMode = devMode;
|
|
480
|
+
}
|
|
481
|
+
debug(msg, options) {
|
|
482
|
+
if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
|
|
483
|
+
console.debug(...getShield(this.label, options), ...mapToArray(msg));
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
info(msg, options) {
|
|
487
|
+
if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
|
|
488
|
+
console.info(...getShield(this.label, options), ...mapToArray(msg));
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
trace(msg, options) {
|
|
492
|
+
if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
|
|
493
|
+
console.trace(...getShield(this.label, options), ...mapToArray(msg));
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
warn(msg, options) {
|
|
497
|
+
if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
|
|
498
|
+
console.warn(...getShield(this.label, options), ...mapToArray(msg));
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
error(msg, options) {
|
|
502
|
+
console.error(...getShield(this.label, options), ...mapToArray(msg));
|
|
503
|
+
}
|
|
504
|
+
throw(msg, options) {
|
|
505
|
+
if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
|
|
506
|
+
throw new Error(...getShield(this.label, options), ...mapToArray(msg));
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
const Log = new Logger('KoliBri', getDevMode);
|
|
511
|
+
const devCache = new Set();
|
|
512
|
+
const devHint = (msg, options) => {
|
|
513
|
+
if (devCache.has(msg) === false || false) {
|
|
514
|
+
devCache.add(msg);
|
|
515
|
+
Log.debug([msg].concat([]), {
|
|
516
|
+
classifier: `💻 dev`,
|
|
517
|
+
forceLog: false,
|
|
518
|
+
overwriteStyle: '; background-color: #f09',
|
|
519
|
+
});
|
|
520
|
+
}
|
|
521
|
+
};
|
|
522
|
+
devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
|
|
523
|
+
|
|
524
|
+
var rgbaConvert = {exports: {}};
|
|
525
|
+
|
|
526
|
+
rgbaConvert.exports = arr;
|
|
527
|
+
rgbaConvert.exports.arr = arr;
|
|
528
|
+
rgbaConvert.exports.obj = obj;
|
|
529
|
+
rgbaConvert.exports.css = css;
|
|
530
|
+
rgbaConvert.exports.hex = hex;
|
|
531
|
+
rgbaConvert.exports.num = num;
|
|
532
|
+
|
|
533
|
+
function arr(data) {
|
|
534
|
+
var a = parse(data);
|
|
535
|
+
if (a.length == 3) {
|
|
536
|
+
return a.concat(255)
|
|
537
|
+
} else {
|
|
538
|
+
a[3] = Math.round(a[3]);
|
|
539
|
+
return a
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
function obj(data) {
|
|
544
|
+
var a = parse(data);
|
|
545
|
+
return {
|
|
546
|
+
r: a[0],
|
|
547
|
+
g: a[1],
|
|
548
|
+
b: a[2],
|
|
549
|
+
a: a.length == 3
|
|
550
|
+
? 255
|
|
551
|
+
: Math.round(a[3])
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
function css(data) {
|
|
556
|
+
var a = parse(data);
|
|
557
|
+
if (a.length == 3) a.push(255);
|
|
558
|
+
|
|
559
|
+
return a[3] == 255
|
|
560
|
+
? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
|
|
561
|
+
: a[3] == 0
|
|
562
|
+
? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
|
|
563
|
+
: 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
function hex(data) {
|
|
567
|
+
var a = parse(data);
|
|
568
|
+
if (a.length == 3) a.push(255);
|
|
569
|
+
var opaque = a[3] == 255;
|
|
570
|
+
var r = num2hex(a[0]);
|
|
571
|
+
var g = num2hex(a[1]);
|
|
572
|
+
var b = num2hex(a[2]);
|
|
573
|
+
var a = num2hex(Math.round(a[3]));
|
|
574
|
+
var is = isshort(r, g, b, a);
|
|
575
|
+
if (opaque) {
|
|
576
|
+
return is
|
|
577
|
+
? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
|
|
578
|
+
: '#' + r + g + b
|
|
579
|
+
}
|
|
580
|
+
return is
|
|
581
|
+
? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
|
|
582
|
+
: '#' + r + g + b + a
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
function num(data) {
|
|
586
|
+
var a = parse(data);
|
|
587
|
+
if (a.length == 3) a.push(255);
|
|
588
|
+
else a[3] = Math.round(a[3]);
|
|
589
|
+
return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
function parse(data) {
|
|
593
|
+
if (typeof data == 'string') {
|
|
594
|
+
data = data.toLowerCase();
|
|
595
|
+
return name(data)
|
|
596
|
+
|| hex3(data)
|
|
597
|
+
|| hex6(data)
|
|
598
|
+
|| rgb(data)
|
|
599
|
+
|| rgba(data)
|
|
600
|
+
|| [0, 0, 0, 255]
|
|
601
|
+
}
|
|
602
|
+
return object(data)
|
|
603
|
+
|| array(data)
|
|
604
|
+
|| number(data)
|
|
605
|
+
|| [0, 0, 0, 255]
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
function num2hex(num) {
|
|
609
|
+
var s = num.toString(16);
|
|
610
|
+
return s.length == 1
|
|
611
|
+
? '0' + s
|
|
612
|
+
: s
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
function isshort(r, g, b, a) {
|
|
616
|
+
var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
|
|
617
|
+
'77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
|
|
618
|
+
return h.indexOf(r) != -1
|
|
619
|
+
&& h.indexOf(g) != -1
|
|
620
|
+
&& h.indexOf(b) != -1
|
|
621
|
+
&& h.indexOf(a) != -1
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
function name(str) {
|
|
625
|
+
if (str == 'red') return [255, 0, 0]
|
|
626
|
+
if (str == 'green') return [0, 255, 0]
|
|
627
|
+
if (str == 'blue') return [0, 0, 255]
|
|
628
|
+
if (str == 'black') return [0, 0, 0]
|
|
629
|
+
if (str == 'white') return [255, 255, 255]
|
|
630
|
+
if (str == 'cyan') return [0, 255, 255]
|
|
631
|
+
if (str == 'gray') return [128, 128, 128]
|
|
632
|
+
if (str == 'grey') return [128, 128, 128]
|
|
633
|
+
if (str == 'magenta') return [255, 0, 255]
|
|
634
|
+
// ok, not the real css `pink` but my personal `magenta` alias
|
|
635
|
+
// `pink` is simpler than `fuchsia`, whatever...
|
|
636
|
+
if (str == 'pink') return [255, 0, 255]
|
|
637
|
+
if (str == 'yellow') return [255, 255, 0]
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
function hex2num(str) {
|
|
641
|
+
return str.length == 1
|
|
642
|
+
? parseInt(str + str, 16)
|
|
643
|
+
: parseInt(str, 16)
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
function hex3(str) {
|
|
647
|
+
var s = str.replace(/^#/,'');
|
|
648
|
+
var l = s.length;
|
|
649
|
+
if (l == 3 || l == 4) {
|
|
650
|
+
var r = hex2num(s[0]);
|
|
651
|
+
var g = hex2num(s[1]);
|
|
652
|
+
var b = hex2num(s[2]);
|
|
653
|
+
var a = l == 3
|
|
654
|
+
? 255
|
|
655
|
+
: hex2num(s[3]);
|
|
656
|
+
|
|
657
|
+
if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
|
|
658
|
+
|
|
659
|
+
return [r, g, b, a]
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
function hex6(str) {
|
|
664
|
+
var s = str.replace(/^#/,'');
|
|
665
|
+
var l = s.length;
|
|
666
|
+
if (l == 6 || l == 8) {
|
|
667
|
+
var r = hex2num(s.slice(0, 2));
|
|
668
|
+
var g = hex2num(s.slice(2, 4));
|
|
669
|
+
var b = hex2num(s.slice(4, 6));
|
|
670
|
+
var a = l == 6
|
|
671
|
+
? 255
|
|
672
|
+
: hex2num(s.slice(6, 8));
|
|
673
|
+
|
|
674
|
+
if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
|
|
675
|
+
|
|
676
|
+
return [r, g, b, a]
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
function getnum(val, integer) {
|
|
681
|
+
if (typeof val != 'number') return -1
|
|
682
|
+
if (integer === true && Math.floor(val) !== val) return -1
|
|
683
|
+
return val >= 0 && val <= 255
|
|
684
|
+
? val
|
|
685
|
+
: -1
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
function object(obj) {
|
|
689
|
+
if (Object.prototype.toString.call(obj) === '[object Object]'
|
|
690
|
+
&& Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
|
|
691
|
+
var r = getnum(obj.r != undefined ? obj.r : obj.red != undefined ? obj.red : 0, true);
|
|
692
|
+
var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0, true);
|
|
693
|
+
var b = getnum(obj.b != undefined ? obj.b : obj.blue != undefined ? obj.blue : 0, true);
|
|
694
|
+
var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
|
|
695
|
+
if (r != -1 && g != -1 && b != -1 && a != -1) {
|
|
696
|
+
return [r, g, b, a]
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
function array(arr) {
|
|
702
|
+
if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
|
|
703
|
+
var r = getnum(arr[0], true);
|
|
704
|
+
var g = getnum(arr[1], true);
|
|
705
|
+
var b = getnum(arr[2], true);
|
|
706
|
+
var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
|
|
707
|
+
if (r != -1 && g != -1 && b != -1 && a != -1) {
|
|
708
|
+
return [r, g, b, a]
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
function number(num) {
|
|
714
|
+
if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
|
|
715
|
+
var a = num >> 24 & 255;
|
|
716
|
+
var r = num >> 16 & 255;
|
|
717
|
+
var g = num >> 8 & 255;
|
|
718
|
+
var b = num & 255;
|
|
719
|
+
return [r, g, b, a]
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
function rgb(str) {
|
|
724
|
+
if (str.substr(0, 4) == 'rgb(') {
|
|
725
|
+
str = str.match(/^rgb\(([^)]+)\)/)[1];
|
|
726
|
+
var t = str.split(/ *, */).map(Number);
|
|
727
|
+
var r = getnum(t[0], true);
|
|
728
|
+
var g = getnum(t[1], true);
|
|
729
|
+
var b = getnum(t[2], true);
|
|
730
|
+
if (r != -1 && g != -1 && b != -1) {
|
|
731
|
+
return [r, g, b, 255]
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
function rgba(str) {
|
|
737
|
+
if (str.substr(0, 5) == 'rgba(') {
|
|
738
|
+
str = str.match(/^rgba\(([^)]+)\)/)[1];
|
|
739
|
+
var t = str.split(/ *, */).map(Number);
|
|
740
|
+
var r = getnum(t[0], true);
|
|
741
|
+
var g = getnum(t[1], true);
|
|
742
|
+
var b = getnum(t[2], true);
|
|
743
|
+
var a = getnum(t[3] * 255);
|
|
744
|
+
if (r != -1 && g != -1 && b != -1 && a != -1) {
|
|
745
|
+
return [r, g, b, a]
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
let processEnv = 'development';
|
|
751
|
+
try {
|
|
752
|
+
processEnv = "production";
|
|
753
|
+
}
|
|
754
|
+
catch (e) {
|
|
755
|
+
processEnv = 'production';
|
|
756
|
+
}
|
|
757
|
+
new Event('StateChange');
|
|
758
|
+
|
|
759
|
+
var KoliBriProgressVariantEnum;
|
|
760
|
+
(function (KoliBriProgressVariantEnum) {
|
|
761
|
+
KoliBriProgressVariantEnum["bar"] = "bar";
|
|
762
|
+
KoliBriProgressVariantEnum["cycle"] = "cycle";
|
|
763
|
+
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
764
|
+
|
|
765
|
+
const KoliBri = new ie('kol', KeyEnum, TagEnum);
|
|
459
766
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
var css_248z$u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n grid-template-areas: unset;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2;\n }\n :host .kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n :host input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n display: block;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
767
|
+
/*!
|
|
768
|
+
* KoliBri - The accessible HTML-Standard
|
|
769
|
+
*/
|
|
770
|
+
var Bundesministerium;
|
|
771
|
+
(function (Bundesministerium) {
|
|
772
|
+
Bundesministerium["Die Bundesregierung"] = "BReg";
|
|
773
|
+
Bundesministerium["Bundesministerium der Finanzen"] = "BMF";
|
|
774
|
+
Bundesministerium["Bundesministerium des Innern, f\u00FCr Bau und Heimat"] = "BMI";
|
|
775
|
+
Bundesministerium["Ausw\u00E4rtiges Amt"] = "AA";
|
|
776
|
+
Bundesministerium["Bundesministerium f\u00FCr Wirtschaft und Energie"] = "BMWi";
|
|
777
|
+
Bundesministerium["Bundesministerium der Justiz und f\u00FCr Verbraucherschutz"] = "BMJV";
|
|
778
|
+
Bundesministerium["Bundesministerium f\u00FCr Arbeit und Soziales"] = "BMAS";
|
|
779
|
+
Bundesministerium["Bundesministerium der Verteidigung"] = "BMVg";
|
|
780
|
+
Bundesministerium["Bundesministerium f\u00FCr Ern\u00E4hrung und Landwirtschaft"] = "BMEL";
|
|
781
|
+
Bundesministerium["Bundesministerium f\u00FCr Familie, Senioren, Frauen und Jugend"] = "BMFSFJ";
|
|
782
|
+
Bundesministerium["Bundesministerium f\u00FCr Gesundheit"] = "BMG";
|
|
783
|
+
Bundesministerium["Bundesministerium f\u00FCr Verkehr und digitale Infrastruktur"] = "BMVI";
|
|
784
|
+
Bundesministerium["Bundesministerium f\u00FCr Umwelt, Naturschutz und nukleare Sicherheit"] = "BMU";
|
|
785
|
+
Bundesministerium["Bundesministerium f\u00FCr Bildung und Forschung"] = "BMBF";
|
|
786
|
+
Bundesministerium["Bundesministerium f\u00FCr wirtschaftliche Zusammenarbeit und Entwicklung"] = "BMZ";
|
|
787
|
+
})(Bundesministerium || (Bundesministerium = {}));
|
|
788
|
+
var Bundesamt;
|
|
789
|
+
(function (Bundesamt) {
|
|
790
|
+
Bundesamt["Beschaffungsamt des Bundesministeriums des Innern"] = "BeschA";
|
|
791
|
+
Bundesamt["Bundesamt f\u00FCr Ausr\u00FCstung, Informationstechnik und Nutzung der Bundeswehr"] = "BAAINBw";
|
|
792
|
+
Bundesamt["Bundesamt f\u00FCr \u00E4u\u00DFere Restitutionen"] = "BAR";
|
|
793
|
+
Bundesamt["Bundesamt f\u00FCr Bauwesen und Raumordnung"] = "BBR";
|
|
794
|
+
Bundesamt["Bundesamt f\u00FCr Bev\u00F6lkerungsschutz und Katastrophenhilfe"] = "BBK";
|
|
795
|
+
Bundesamt["Bundesamt f\u00FCr Familie und zivilgesellschaftliche Aufgaben"] = "BAFzA";
|
|
796
|
+
Bundesamt["Bundesamt f\u00FCr G\u00FCterverkehr"] = "BAG";
|
|
797
|
+
Bundesamt["Bundesamt f\u00FCr Justiz"] = "BfJ";
|
|
798
|
+
Bundesamt["Bundesamt f\u00FCr Kartographie und Geod\u00E4sie"] = "BKG";
|
|
799
|
+
Bundesamt["Bundesamt f\u00FCr kerntechnische Entsorgungssicherheit"] = "BASE";
|
|
800
|
+
Bundesamt["Bundesamt f\u00FCr Migration und Fl\u00FCchtlinge"] = "BAMF";
|
|
801
|
+
Bundesamt["Bundesamt f\u00FCr Sicherheit in der Informationstechnik"] = "BSI";
|
|
802
|
+
Bundesamt["Bundesamt f\u00FCr Verbraucherschutz und Lebensmittelsicherheit"] = "BVL";
|
|
803
|
+
Bundesamt["Bundesamt f\u00FCr Verfassungsschutz"] = "BfV";
|
|
804
|
+
Bundesamt["Bundesamt f\u00FCr Wirtschaft und Ausfuhrkontrolle"] = "BAFA";
|
|
805
|
+
Bundesamt["Bundesamt f\u00FCr zentrale Dienste und offene Verm\u00F6gensfragen"] = "BADV";
|
|
806
|
+
Bundesamt["Bundesanstalt f\u00FCr Verwaltungsdienstleistungen"] = "BAV";
|
|
807
|
+
Bundesamt["Bundesarchiv"] = "BArch";
|
|
808
|
+
Bundesamt["Bundesaufsichtsamt f\u00FCr Flugsicherung"] = "BAF";
|
|
809
|
+
Bundesamt["Bundesausgleichsamt"] = "BAA";
|
|
810
|
+
Bundesamt["Bundeskartellamt"] = "BKartA";
|
|
811
|
+
Bundesamt["Bundeskriminalamt"] = "BKA";
|
|
812
|
+
Bundesamt["Bundesnachrichtendienst"] = "BND";
|
|
813
|
+
Bundesamt["Bundesnetzagentur f\u00FCr Elektrizit\u00E4t, Gas, Telekommunikation, Post und Eisenbahnen"] = "BNetzA";
|
|
814
|
+
Bundesamt["Bundespolizeipr\u00E4sidium"] = "BPOLP";
|
|
815
|
+
Bundesamt["Bundespr\u00FCfstelle f\u00FCr jugendgef\u00E4hrdende Medien"] = "BPjM";
|
|
816
|
+
Bundesamt["Bundessortenamt"] = "BSA";
|
|
817
|
+
Bundesamt["Bundessprachenamt"] = "BSprA";
|
|
818
|
+
Bundesamt["Bundesamt f\u00FCr Soziale Sicherung"] = "BAS";
|
|
819
|
+
Bundesamt["Bundesverwaltungsamt"] = "BVA";
|
|
820
|
+
Bundesamt["Bundeszentralamt f\u00FCr Steuern"] = "BZSt";
|
|
821
|
+
Bundesamt["Deutsches Patent- und Markenamt"] = "DPMA";
|
|
822
|
+
Bundesamt["Eisenbahn-Bundesamt"] = "EBA";
|
|
823
|
+
Bundesamt["Generalzolldirektion"] = "GZD";
|
|
824
|
+
Bundesamt["Milit\u00E4rischer Abschirmdienst"] = "MAD";
|
|
825
|
+
Bundesamt["Zentrale Stelle f\u00FCr Informationstechnik im Sicherheitsbereich"] = "ZITiS";
|
|
826
|
+
})(Bundesamt || (Bundesamt = {}));
|
|
827
|
+
var Bundesanstalt;
|
|
828
|
+
(function (Bundesanstalt) {
|
|
829
|
+
Bundesanstalt["Informationstechnikzentrum Bund"] = "ITZBund";
|
|
830
|
+
Bundesanstalt["Bundesanstalt f\u00FCr den Digitalfunk der Beh\u00F6rden und Organisationen mit Sicherheitsaufgaben"] = "BDBOS";
|
|
831
|
+
Bundesanstalt["Bundesanstalt f\u00FCr Landwirtschaft und Ern\u00E4hrung"] = "BLE";
|
|
832
|
+
Bundesanstalt["Bundesanstalt Technisches Hilfswerk"] = "THW";
|
|
833
|
+
Bundesanstalt["Bundesinstitut f\u00FCr Arzneimittel und Medizinprodukte"] = "BfArM";
|
|
834
|
+
Bundesanstalt["Bundesinstitut f\u00FCr Bev\u00F6lkerungsforschung"] = "BiB";
|
|
835
|
+
Bundesanstalt["Bundesinstitut f\u00FCr Sportwissenschaft"] = "BISp";
|
|
836
|
+
})(Bundesanstalt || (Bundesanstalt = {}));
|
|
837
|
+
const BUND_LOGO_TEXT_MAP = new Map();
|
|
838
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Die Bundesregierung'], ['Die', 'Bundesregierung']);
|
|
839
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Finanzen'], ['Bundesministerium', 'der Finanzen']);
|
|
840
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium des Innern, für Bau und Heimat'], ['Bundesministerium', 'des Inneren, für Bau', 'und Heimat']);
|
|
841
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Auswärtiges Amt'], ['Auswärtiges Amt']);
|
|
842
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Wirtschaft und Energie'], ['Bundesministerium', 'für Wirtschaft', 'und Energie']);
|
|
843
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Justiz und für Verbraucherschutz'], [
|
|
844
|
+
'Bundesministerium',
|
|
845
|
+
'der Justiz und',
|
|
846
|
+
'für Verbraucherschutz',
|
|
847
|
+
]);
|
|
848
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Arbeit und Soziales'], ['Bundesministerium', 'für Arbeit und Soziales']);
|
|
849
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Verteidigung'], ['Bundesministerium', 'der Verteidigung']);
|
|
850
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Bildung und Forschung'], ['Bundesministerium', 'für Bildung', 'und Forschung']);
|
|
851
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Ernährung und Landwirtschaft'], ['Bundesministerium', 'für Ernährung', 'und Landwirtschaft']);
|
|
852
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Familie, Senioren, Frauen und Jugend'], [
|
|
853
|
+
'Bundesministerium',
|
|
854
|
+
'für Familie, Senioren, Frauen',
|
|
855
|
+
'und Jugend',
|
|
856
|
+
]);
|
|
857
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Gesundheit'], ['Bundesministerium', 'für Gesundheit']);
|
|
858
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Umwelt, Naturschutz und nukleare Sicherheit'], [
|
|
859
|
+
'Bundesministerium',
|
|
860
|
+
'für Umwelt, Naturschutz',
|
|
861
|
+
'und nukleare Sicherheit',
|
|
862
|
+
]);
|
|
863
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Verkehr und digitale Infrastruktur'], [
|
|
864
|
+
'Bundesministerium',
|
|
865
|
+
'für Verkehr und',
|
|
866
|
+
'digitale Infrastruktur',
|
|
867
|
+
]);
|
|
868
|
+
BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für wirtschaftliche Zusammenarbeit und Entwicklung'], [
|
|
869
|
+
'Bundesministerium',
|
|
870
|
+
'für wirtschaftliche Zusammenarbeit',
|
|
871
|
+
'und Entwicklung',
|
|
872
|
+
]);
|
|
873
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Beschaffungsamt des Bundesministeriums des Innern'], ['Beschaffungsamt', 'des Bundesministeriums', 'des Innern']);
|
|
874
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Ausrüstung, Informationstechnik und Nutzung der Bundeswehr'], []);
|
|
875
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für äußere Restitutionen'], []);
|
|
876
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Bauwesen und Raumordnung'], []);
|
|
877
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Bevölkerungsschutz und Katastrophenhilfe'], ['Bundesamt', 'für Bevölkerungsschutz', 'und Katastrophenhilfe']);
|
|
878
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Familie und zivilgesellschaftliche Aufgaben'], [
|
|
879
|
+
'Bundesamt',
|
|
880
|
+
'für Familie und',
|
|
881
|
+
'zivilgesellschaftliche Aufgaben',
|
|
882
|
+
]);
|
|
883
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Güterverkehr'], ['Bundesamt', 'für Güterverkehr']);
|
|
884
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Justiz'], ['Bundesamt für', 'Justiz']);
|
|
885
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Kartographie und Geodäsie'], ['Bundesamt für', 'Kartographie und Geodäsie']);
|
|
886
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für kerntechnische Entsorgungssicherheit'], ['Bundesamt für', 'kerntechnische', 'Entsorgungssicherheit']);
|
|
887
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Migration und Flüchtlinge'], ['Bundesamt', 'für Migration', 'und Flüchtlinge']);
|
|
888
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Sicherheit in der Informationstechnik'], ['Bundesamt', 'für Sicherheit in der', 'Informationstechnik']);
|
|
889
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Verbraucherschutz und Lebensmittelsicherheit'], [
|
|
890
|
+
'Bundesamt für',
|
|
891
|
+
'Verbraucherschutz und',
|
|
892
|
+
'Lebensmittelsicherheit',
|
|
893
|
+
]);
|
|
894
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Verfassungsschutz'], ['Bundesamt für', 'Verfassungsschutz']);
|
|
895
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Wirtschaft und Ausfuhrkontrolle'], ['Bundesamt', 'für Wirtschaft', 'Ausfuhrkontrolle']);
|
|
896
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für zentrale Dienste und offene Vermögensfragen'], [
|
|
897
|
+
'Bundesamt',
|
|
898
|
+
'für zentrale Dienste und',
|
|
899
|
+
'offene Vermögensfragen',
|
|
900
|
+
]);
|
|
901
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesanstalt für Verwaltungsdienstleistungen'], ['Bundesanstalt', 'für Verwaltungsdienstleistungen']);
|
|
902
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesarchiv'], ['Das', 'Bundesarchiv']);
|
|
903
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesaufsichtsamt für Flugsicherung'], ['Bundesaufsichtsamt', 'für Flugsicherung']);
|
|
904
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesausgleichsamt'], ['Bundesausgleichsamt']);
|
|
905
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeskartellamt'], ['Bundeskartellamt']);
|
|
906
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeskriminalamt'], ['Bundeskriminalamt']);
|
|
907
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesnachrichtendienst'], ['Bundesnachrichtendienst']);
|
|
908
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen'], ['Bundesnetzagentur']);
|
|
909
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundespolizeipräsidium'], ['Bundespolizeipräsidium']);
|
|
910
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesprüfstelle für jugendgefährdende Medien'], ['Bundesprüfstelle', 'für jugendgefährdende', 'Medien']);
|
|
911
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundessortenamt'], ['Bundessortenamt']);
|
|
912
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundessprachenamt'], ['Bundessprachenamt']);
|
|
913
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Soziale Sicherung'], ['Bundesamt', 'für Soziale Sicherung']);
|
|
914
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesverwaltungsamt'], ['Bundesverwaltungsamt']);
|
|
915
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeszentralamt für Steuern'], ['Bundeszentralamt', 'für Steuern']);
|
|
916
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Deutsches Patent- und Markenamt'], ['Deutsches', 'Patent- und Markenamt']);
|
|
917
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Eisenbahn-Bundesamt'], ['Eisenbahn-Bundesamt']);
|
|
918
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Generalzolldirektion'], ['Generalzolldirektion']);
|
|
919
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Militärischer Abschirmdienst'], ['Bundesamt für den', 'Militärischen Abschirmdienst']);
|
|
920
|
+
BUND_LOGO_TEXT_MAP.set(Bundesamt['Zentrale Stelle für Informationstechnik im Sicherheitsbereich'], [
|
|
921
|
+
'Zentrale Stelle',
|
|
922
|
+
'für Informationstechnik',
|
|
923
|
+
'im Sicherheitsbereich',
|
|
924
|
+
]);
|
|
925
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Informationstechnikzentrum Bund'], ['Informations', 'Technik', 'Zentrum Bund']);
|
|
926
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt für den Digitalfunk der Behörden und Organisationen mit Sicherheitsaufgaben'], [
|
|
927
|
+
'Bundesanstalt',
|
|
928
|
+
'für den Digitalfunk der Behörden und',
|
|
929
|
+
'Organisationen mit Sicherheitsaufgaben',
|
|
930
|
+
]);
|
|
931
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt für Landwirtschaft und Ernährung'], ['Bundesanstalt für', 'Landwirtschaft und Ernährung']);
|
|
932
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt Technisches Hilfswerk'], ['Bundesanstalt', 'Technisches Hilfswerk']);
|
|
933
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Medizinprodukte'], ['Bundesinstitut', 'für Arzneimittel', 'und Medizinprodukte']);
|
|
934
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
935
|
+
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
936
|
+
|
|
937
|
+
var css_248z$J = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgb(8, 35, 48, 0.24);\n --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\n }\n :host {\n font-size: var(--font-size);\n }\n :host * {\n font-family: var(--font-family);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus-visible,\n button[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
|
|
938
|
+
|
|
939
|
+
var css_248z$I = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
|
|
940
|
+
|
|
941
|
+
var css_248z$H = "@layer kol-theme-component {\n .accordion__content {\n padding-left: calc(36rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n }\n :host > div > .kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc {\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc > span {\n gap: 0.5em;\n }\n button:focus {\n outline: none;\n }\n :host > .accordion:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .icon {\n color: var(--color-primary);\n }\n}";
|
|
942
|
+
|
|
943
|
+
var css_248z$G = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
944
|
+
|
|
945
|
+
var css_248z$F = "@layer kol-theme-component {\n .initials {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
946
|
+
|
|
947
|
+
var css_248z$E = "@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n :host > span .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc > span {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
948
|
+
|
|
949
|
+
var css_248z$D = "@layer kol-theme-component {\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li > :is(span, .kol-link) {\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n}";
|
|
950
|
+
|
|
951
|
+
var css_248z$C = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
|
|
952
|
+
|
|
953
|
+
var css_248z$B = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
954
|
+
|
|
955
|
+
var css_248z$A = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n}";
|
|
956
|
+
|
|
957
|
+
var css_248z$z = "@layer kol-theme-component {\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .kol-heading-wc {\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
958
|
+
|
|
959
|
+
var css_248z$y = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
960
|
+
|
|
961
|
+
var css_248z$x = "@layer kol-theme-component {\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
962
|
+
|
|
963
|
+
var css_248z$w = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n :host {\n display: block;\n }\n .mandatory-fields-hint {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
964
|
+
|
|
965
|
+
var css_248z$v = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
966
|
+
|
|
967
|
+
var css_248z$u = "@layer kol-theme-component {\n kol-indented-text-wc > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
968
|
+
|
|
969
|
+
var css_248z$t = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n grid-template-areas: unset;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2;\n }\n :host .kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n :host input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n display: block;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
|
|
970
|
+
|
|
971
|
+
var css_248z$s = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
972
|
+
|
|
973
|
+
var css_248z$r = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
974
|
+
|
|
975
|
+
var css_248z$q = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
503
976
|
|
|
504
|
-
var css_248z$p = "@layer kol-theme-component {\n :host
|
|
977
|
+
var css_248z$p = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
505
978
|
|
|
506
|
-
var css_248z$o = "@layer kol-theme-component {\n :host
|
|
979
|
+
var css_248z$o = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
507
980
|
|
|
508
|
-
var css_248z$n = "@layer kol-theme-component {\n :host
|
|
981
|
+
var css_248z$n = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
509
982
|
|
|
510
|
-
var css_248z$m = "@layer kol-theme-component {\n :host
|
|
983
|
+
var css_248z$m = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0px;\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n padding: calc(0rem / var(--kolibri-root-font-size, 16));\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 1;\n }\n fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset .kol-input {\n order: 3;\n }\n fieldset.error {\n border-left: 3px solid var(--color-danger);\n color: var(--color-danger);\n font-weight: 700;\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error .kol-alert-wc.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
|
|
511
984
|
|
|
512
|
-
var css_248z$l = "@layer kol-theme-component {\n :host
|
|
985
|
+
var css_248z$l = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input input[type=range] {\n appearance: none;\n background-color: var(--color-mute-variant);\n border: 1px solid var(--border-color);\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input input[type=range]::-webkit-slider-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n .kol-input input[type=range]::-moz-range-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n /*\t.kol-input input[type=range]::-webkit-slider-runnable-track {\n \tappearance: none;\n \tbox-shadow: none;\n \tborder: none;\n \tbackground: transparent;\n }*/\n}";
|
|
513
986
|
|
|
514
|
-
var css_248z$k = "@layer kol-theme-component {\n :host {\n font-
|
|
987
|
+
var css_248z$k = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
515
988
|
|
|
516
|
-
var css_248z$j = "@layer kol-theme-component {\n :
|
|
989
|
+
var css_248z$j = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
|
|
517
990
|
|
|
518
991
|
var css_248z$i = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
|
|
519
992
|
|
|
520
993
|
var css_248z$h = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
521
994
|
|
|
522
|
-
var css_248z$g = "@layer kol-theme-component {\n
|
|
995
|
+
var css_248z$g = "@layer kol-theme-component {\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n .toggle-button :is(a, button) > .kol-span-wc,\n .toggle-button :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .toggle-button :is(a, button):active > .kol-span-wc,\n .toggle-button :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .toggle-button :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n}";
|
|
523
996
|
|
|
524
|
-
var css_248z$f = "@layer kol-theme-component {\n
|
|
997
|
+
var css_248z$f = "@layer kol-theme-component {\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
|
|
525
998
|
|
|
526
999
|
var css_248z$e = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n}";
|
|
527
1000
|
|
|
528
|
-
var css_248z$d = "@layer kol-theme-component {\n :host
|
|
1001
|
+
var css_248z$d = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
|
|
529
1002
|
|
|
530
|
-
var css_248z$c = "@layer kol-theme-component {\n :host
|
|
1003
|
+
var css_248z$c = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
531
1004
|
|
|
532
|
-
var css_248z$b = "@layer kol-theme-component {\n :host
|
|
1005
|
+
var css_248z$b = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
533
1006
|
|
|
534
|
-
var css_248z$a = "@layer kol-theme-component {\n
|
|
1007
|
+
var css_248z$a = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
|
|
535
1008
|
|
|
536
1009
|
var css_248z$9 = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n background-color: #fc0;\n }\n .dot > span:nth-child(2) {\n background-color: red;\n }\n .dot > span:nth-child(4) {\n background-color: #666;\n }\n /* Override colors for cycle animation */\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n}";
|
|
537
1010
|
|
|
538
|
-
var css_248z$8 = "@layer kol-theme-component {\n :host {\n
|
|
1011
|
+
var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
539
1012
|
|
|
540
|
-
var css_248z$7 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n
|
|
1013
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
541
1014
|
|
|
542
|
-
var css_248z$6 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n
|
|
1015
|
+
var css_248z$6 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
543
1016
|
|
|
544
|
-
var css_248z$5 = "@layer kol-theme-component {\n :host
|
|
1017
|
+
var css_248z$5 = "@layer kol-theme-component {\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 400;\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border: var(--border-width) solid transparent;\n border-radius: var(--border-radius);\n border-bottom-width: var(--border-width);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n position: relative;\n top: var(--border-width);\n box-shadow: none;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n position: absolute;\n top: 0;\n content: \"\";\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n background-color: var(--color-primary);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n left: 0;\n right: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n content: \" \";\n background-color: var(--page-bg);\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
|
|
545
1018
|
|
|
546
|
-
var css_248z$4 = "@layer kol-theme-component {\n :host
|
|
1019
|
+
var css_248z$4 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
547
1020
|
|
|
548
1021
|
var css_248z$3 = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
549
1022
|
|
|
@@ -551,36 +1024,35 @@ var css_248z$2 = "@layer kol-theme-component {\n .tree ul {\n border: 2px so
|
|
|
551
1024
|
|
|
552
1025
|
var css_248z$1 = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n color: var(--color-text);\n text-align: left;\n }\n .tree-link a .toggle-button:hover .toggle-button-icon::part(icon) {\n transform: scale(1.6);\n }\n .tree-link a .text {\n text-decoration: none;\n }\n}";
|
|
553
1026
|
|
|
554
|
-
var css_248z = "@layer kol-theme-component {\n :
|
|
1027
|
+
var css_248z = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
|
|
555
1028
|
|
|
556
1029
|
const BWSt = KoliBri.createTheme('bwst', {
|
|
557
|
-
GLOBAL: css_248z$
|
|
558
|
-
'KOL-ABBR': css_248z$
|
|
559
|
-
'KOL-ACCORDION': css_248z$
|
|
560
|
-
'KOL-ALERT': css_248z$
|
|
561
|
-
'KOL-AVATAR': css_248z$
|
|
562
|
-
'KOL-BADGE': css_248z$
|
|
563
|
-
'KOL-BREADCRUMB': css_248z$
|
|
564
|
-
'KOL-BUTTON': css_248z$
|
|
565
|
-
'KOL-BUTTON-GROUP': css_248z$
|
|
566
|
-
'KOL-BUTTON-LINK': css_248z$
|
|
567
|
-
'KOL-CARD': css_248z$
|
|
568
|
-
'KOL-COMBOBOX': css_248z$
|
|
569
|
-
'KOL-DETAILS': css_248z$
|
|
570
|
-
'KOL-FORM': css_248z$
|
|
571
|
-
'KOL-HEADING': css_248z$
|
|
572
|
-
'KOL-INDENTED-TEXT': css_248z$
|
|
573
|
-
'KOL-INPUT-CHECKBOX': css_248z$
|
|
574
|
-
'KOL-INPUT-COLOR': css_248z$
|
|
575
|
-
'KOL-INPUT-DATE': css_248z$
|
|
576
|
-
'KOL-INPUT-EMAIL': css_248z$
|
|
577
|
-
'KOL-INPUT-FILE': css_248z$
|
|
578
|
-
'KOL-INPUT-NUMBER': css_248z$
|
|
579
|
-
'KOL-INPUT-PASSWORD': css_248z$
|
|
580
|
-
'KOL-INPUT-RADIO': css_248z$
|
|
581
|
-
'KOL-INPUT-RANGE': css_248z$
|
|
582
|
-
'KOL-INPUT-TEXT': css_248z$
|
|
583
|
-
'KOL-KOLIBRI': css_248z$k,
|
|
1030
|
+
GLOBAL: css_248z$J,
|
|
1031
|
+
'KOL-ABBR': css_248z$I,
|
|
1032
|
+
'KOL-ACCORDION': css_248z$H,
|
|
1033
|
+
'KOL-ALERT': css_248z$G,
|
|
1034
|
+
'KOL-AVATAR': css_248z$F,
|
|
1035
|
+
'KOL-BADGE': css_248z$E,
|
|
1036
|
+
'KOL-BREADCRUMB': css_248z$D,
|
|
1037
|
+
'KOL-BUTTON': css_248z$C,
|
|
1038
|
+
'KOL-BUTTON-GROUP': css_248z$B,
|
|
1039
|
+
'KOL-BUTTON-LINK': css_248z$A,
|
|
1040
|
+
'KOL-CARD': css_248z$z,
|
|
1041
|
+
'KOL-COMBOBOX': css_248z$y,
|
|
1042
|
+
'KOL-DETAILS': css_248z$x,
|
|
1043
|
+
'KOL-FORM': css_248z$w,
|
|
1044
|
+
'KOL-HEADING': css_248z$v,
|
|
1045
|
+
'KOL-INDENTED-TEXT': css_248z$u,
|
|
1046
|
+
'KOL-INPUT-CHECKBOX': css_248z$t,
|
|
1047
|
+
'KOL-INPUT-COLOR': css_248z$s,
|
|
1048
|
+
'KOL-INPUT-DATE': css_248z$r,
|
|
1049
|
+
'KOL-INPUT-EMAIL': css_248z$q,
|
|
1050
|
+
'KOL-INPUT-FILE': css_248z$p,
|
|
1051
|
+
'KOL-INPUT-NUMBER': css_248z$o,
|
|
1052
|
+
'KOL-INPUT-PASSWORD': css_248z$n,
|
|
1053
|
+
'KOL-INPUT-RADIO': css_248z$m,
|
|
1054
|
+
'KOL-INPUT-RANGE': css_248z$l,
|
|
1055
|
+
'KOL-INPUT-TEXT': css_248z$k,
|
|
584
1056
|
'KOL-LINK': css_248z$i,
|
|
585
1057
|
'KOL-LINK-BUTTON': css_248z$j,
|
|
586
1058
|
'KOL-MODAL': css_248z$h,
|