node-red-contrib-uibuilder/front-end/uib-brand.min.css.map

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

{"version":3,"mappings":"AAwCA,s/MAAA,mCAAA,sEA0TA,oCACI,8FAAA,mCAAA,2DAKJ,mCACI,6bAAA,mCAAA,2DAoBJ,kcAAA,mCAAA,+DAmBA,wDAIA,wEAIA,8DAIA,8DAIA,8DAIA,8DAIA,8DAIA,qCAGA,0EAIA,0FAIA,gFAIA,gGAIA,sFAIA,8GAIA,+FAIA,+HAIA,oEAIA,0EASA,uCAIA,wEAIA,uCACI,kEAKJ,kHAQA,sIAOA,0EAIA,iCAGA,8IAQA,iIAMA,iFAIA,+bAAA,6cAAA,4cAAA,6cAAA,qdAAA,+cAuBA,sDAAA,oEAAA,mEAAA,oEAGA,mCAAA,iDAAA,gDAAA,iDAGA,wDAIA,gFAKA,oBAGA,8DAKA,gMAQA,yHAKA,oHAMA,yJAMA,gCAIA,sBAKA,sCAGA,qCAIA,4EAOA,kIAOA,mFAKA,kFAKA,2IAAA,gJAQA,kDAIA,yGAMA,yCAKA,sEASA,4IAUA,2CAIA,8EAQA,qJAOA,qQAaA,0DAAA,mEAAA,uEAAA,wEAKA,+DAAA,4DAIA,oDAGA,6DAKA,wCAIA,+CAIA,sCAGA,uDAIA,wCAIA,0BACI,qCAIA,6CAGA,sCAQJ,kEAKA,mFAIA,mEAUA,gGAMA,2EAKA,uIAQA,sCAIA,qIAWA,iEAIA,oHAOA,yBACI,wDASJ,sTAAA,6SAAA,iTAAA,wSAKA,8FAKA,gGAKA,sFASA,mEAGA,iCAMA,+HAOA,oFAKA,yDAIA,qEAMA,yDAKA,6EAOA,sCAIA,sBAIA,iGAOA,8BAGA,gCAcA,yGAOA,uHAQA,+BAIA,0EAMA,oCAQA,4PASA,yRAsBA,4BAKA,uHAMA,iCAGA,iEASA,6BAIA,6EAKA,6EAMA,6EAKA,kHAMA,6BAIA,iDASA,qCAGA,oFAKA,gDAGA,2CAIA,iOAaA,qCACA,wCACA,wCACA,yCACA,sCACA","sources":["."],"sourcesContent":["/** Default Styles for uibuilder - Light & Dark options ...\n *\n * TODO: Add darker/lighter shades for variant colours for headers, etc.\n *\n * Recommended @media breakpoints:\n * Tablet:        48em @ 16pt   = 768px\n * Tablet Wide:   62em @ 16pt   = 992px\n *\n * Mobile Small:  30em @ 16pt   = 480px\n * Mobile Medium: 37.5em @ 16pt = 600px\n * Mobile Large:  48em @ 16pt   = 768px\n *\n * \n * https://css-tricks.com/a-complete-guide-to-custom-properties/ for details on using custom css properties\n * https://una.im/css-color-theming/ for more on color theory calculations\n * https://web.dev/building-a-color-scheme/ is the basis for this style\n * https://unifyned.com/colors.html extends the above\n * https://chromatichq.com/insights/understanding-and-using-hsl-your-css gives calculations for the color wheel\n *\n * @version: 2024-12-30\n * @author: Julian Knight (TotallyInformation)\n * @license: Apache 2.0\n * @created: 2022-05-02\n *\n * USAGE:\n * - https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/uib-brand-css\n * - Reference directly or via import in own CSS\n * - Will auto pick up browser preference for light/dark if set\n * - Or manually set with `class=\"light\"` or `class=\"dark\"` on the html tag\n * - Or create a manual switcher feature - see css-test.html or brand-test.html for examples\n * - A simple CSS reset is provided to get reasonably looking HTML in any browser\n * - Some special classes are provided - see the \"Recommended surfaces\" section\n * - Lots of css variables provided for use in your own CSS or in web components\n * NOTES:\n * - Watch out for the order of loading of style sheets!\n * - uibuilder attempts to auto-load this sheet BUT you may need to do it manually to get the right order.\n * - Include in your index.css file as `@import url(\"./uib-brand.min.css\");`\n */\n\n/* :root applies to everything, :root.light is for manually selected light mode */\n:root, :root.light {\n    color-scheme: light dark;\n    --mode: light;\n\n    /* Create a checkable var - helps web components know if this stylesheet is loaded\n     * Use this from general code: \n     *    window.getComputedStyle(document.documentElement, null).getPropertyValue('--uib-css') === 'uib-brand'\n     * Or this from within the component code:\n     *    window.getComputedStyle(this, null).getPropertyValue('--uib-css') === 'uib-brand'\n     * NOTE: no space between : and text!\n     */\n    --uib-css: uib-brand;\n    /* Sans-serif is much easier to read on-screen */\n    /* --font-family: sans-serif; */\n    --font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\n    --brand-hue: 200;\n    --text-hue: var(--brand-hue);\n    --surface-hue: var(--brand-hue);\n    --complementary-offset: 180;\n    --accent-offset: 30; /* 30=Split complementary, 60=Triadic */\n\n    --saturation-bias: 0;\n    --light-saturation: .66;\n    --dark-saturation: calc(var(--light-saturation) * .6);\n    --saturation-value: var(--light-saturation);\n    --saturation: calc(var(--saturation-value) + var(--saturation-bias));\n\n    --lightness-bias: 0;\n    --light-lightness: .57;\n    --dark-lightness: calc(var(--light-lightness) * .75);\n    --lightness-value: var(--light-lightness);\n    --lightness: calc(var(--lightness-value) + var(--lightness-bias));\n\n    --base-margin: 1rem;\n    --max-width: 64rem;\n\n    --border-radius: 0.5rem; /*8px;*/\n    --border-pad: 0.5rem;\n    --border-margin: 0;\n\n    /* For the .grid-fit class, the minimum child element size */\n    --grid-fit-min: 15rem;\n\n    /* For nicer emoji's use this as the font-family */\n    --emoji-fonts: \"Twemoji Mozilla\", \"Apple Color Emoji\", \"Segoe UI Emoji\",\n        \"Segoe UI Symbol\", \"Noto Color Emoji\", \"EmojiOne Color\", \"Android Emoji\",\n        sans-serif;\n\n    /*#region --- Brand --- */\n    --brand: hsl(\n        var(--brand-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    /*#endregion --- --- */\n\n    /*#region --- Shadows https://shadows.brumm.af/ --- */\n    --surface-shadow-light: var(--brand-hue) 10% 20%;\n    --shadow-strength-light: .02;\n\n    --surface-shadow-dark: var(--brand-hue) 30% 30%;\n    --shadow-strength-dark: .1;\n\n    --surface-shadow: var(--surface-shadow-light);\n    --shadow-strength: var(--shadow-strength-light);\n\n    --shadow1:\n        0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),\n        0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),\n        0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),\n        0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),\n        0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),\n        0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))\n    ;\n\n    --shadow2: \n        0.2px 0.3px 0.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .031)),\n        0.5px 0.7px 0.7px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .053)),\n        1px 1.3px 1.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .07)),\n        1.8px 2.2px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .087)),\n        3.3px 4.2px 4.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .109)),\n        8px 10px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .16))\n    ;\n\n    --shadow: var(--shadow1);\n  \n    /*#endregion --- --- */\n\n    /*#region --- Text --- */\n    --text-saturation: .2;\n    --text-bias: 0;\n    --light-text-lightness: .1;\n    --light-text-factor: 1;\n    --dark-text-lightness: .9;\n    --dark-text-factor: -1;\n\n    --text-factor: var(--light-text-factor);\n    --text-lightness: var(--light-text-lightness);\n\n    --text1: hsl(\n        var(--text-hue)\n        calc(100% * var(--text-saturation))\n        calc(\n            100% * (var(--text-lightness)\n            + (0 * var(--text-factor) * .2)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text2: hsl(\n        var(--text-hue)\n        calc(100% * (var(--text-saturation) / 2))\n        calc(\n            100% * (var(--text-lightness)\n            + (1 * var(--text-factor) * .2)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text3: hsl(\n        var(--text-hue)\n        calc(100% * (var(--text-saturation) / 2))\n        calc(\n            100% * (var(--text-lightness)\n            + (1 * var(--text-factor) * .4)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text4: hsl(\n        var(--text-hue) \n        10% \n        calc(\n            50% \n            - (100% * var(--text-factor) * var(--text-bias)))\n        / calc(25% + (100% * var(--text-bias)))\n    );\n    /*#endregion --- --- */\n\n    /*#region --- Surfaces --- */\n    --surfaces-saturation: .1;\n    --surfaces-bias: 0;\n    --light-surfaces-lightness: .95;\n    --light-surfaces-factor: 1;\n    --dark-surfaces-lightness: .1;\n    --dark-surfaces-factor: -1;\n\n    --surfaces-factor: var(--light-surfaces-factor);\n    --surfaces-lightness: var(--light-surfaces-lightness);\n    \n    --surface1: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .00)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface2: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .05)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface3: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .10)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface4: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .15)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface5: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .20)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    /*#endregion --- --- */\n\n    /*#region === INFO === */\n    --info-hue: 203;\n    --info-saturation-bias: 0;\n    --info-lightness-bias: 0;\n    \n    --info-hsl: var(--info-hue)\n                calc(100% * (var(--saturation) + var(--info-saturation-bias)))\n                calc(100% * (var(--lightness) + var(--info-lightness-bias)));\n\n    --info: hsl( var(--info-hsl) );\n    --info-intense: hsl(\n        var(--info-hue) 100% 50%\n    );\n    /*#endregion --- --- */\n    \n    /*#region === SUCCESS === */\n    --success-hue: 120;\n    --success-saturation-bias: 0;\n    --success-lightness-bias: 0;\n    \n    --success: hsl(\n        var(--success-hue)\n        calc(100% * (var(--saturation) + var(--success-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--success-lightness-bias)))\n    );\n    --success-intense: hsl(\n        var(--success-hue) 100% 50%\n    );\n    /*#endregion --- --- */\n    \n    /*#region === WARNING === */\n    --warning-hue: 40;\n    --warning-saturation-bias: 0;\n    --warning-lightness-bias: 0;\n    \n    --warning: hsl(\n        var(--warning-hue)\n        calc(100% * (var(--saturation) + var(--warning-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--warning-lightness-bias)))\n    );\n    --warning-intense: hsl(\n        var(--warning-hue) 100% 50%\n    );\n    --warn: var(--warning);\n    /*#endregion --- --- */\n    \n    /*#region === FAILURE === */\n    --failure-hue: 2;\n    --failure-saturation-bias: 0;\n    --failure-lightness-bias: 0;\n    \n    --failure: hsl(\n        var(--failure-hue)\n        calc(100% * (var(--saturation) + var(--failure-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--failure-lightness-bias)))\n    );\n    --failure-intense: hsl(\n        var(--failure-hue) 100% 50%\n    );\n    --error: var(--failure);\n    --danger: var(--failure);\n    /*#endregion --- --- */\n    \n    /*#region === Complementary ACCENT === */\n    --complementary-hue: calc(var(--brand-hue) + var(--complementary-offset));\n\n    --complementary-fg: hsl(\n        var(--brand-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --complementary-bg: hsl(\n        var(--complementary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --complementary: hsl(\n        calc(var(--complementary-hue))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    /*#endregion --- --- */\n    \n    /*#region === PRIMARY ACCENT === */\n    --primary-hue: calc(var(--brand-hue) + var(--complementary-offset) + var(--accent-offset));\n\n    --primary-fg: hsl(\n        calc(var(--primary-hue) + var(--complementary-offset))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --primary-bg: hsl(\n        var(--primary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --primary: var(--primary-bg);\n    /*#endregion --- --- */\n    \n    /*#region === SECONDARY ACCENT === */\n    --secondary-hue: calc(var(--brand-hue) + var(--complementary-offset) - var(--accent-offset));\n    \n    --secondary-fg: hsl(\n        calc(var(--secondary-hue) + var(--complementary-offset))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --secondary-bg: hsl(\n        var(--secondary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --secondary: var(--secondary-bg);\n    /*#endregion --- --- */\n}\n\n/* If the browser reports it, we can adjust for light/dark theme preferences\n * See https://stackoverflow.com/a/57795495 for use with JavaScript\n */\n@media (prefers-color-scheme: light) {\n    :root {\n        color-scheme: light dark;\n        --mode: light;\n    }\n}\n@media (prefers-color-scheme: dark) {\n    :root {\n        /* ---- Active Theme (Dark) ---- */\n        color-scheme: dark light;\n        --mode: dark;\n\n        --saturation-value: var(--dark-saturation);\n        --lightness-value: var(--dark-lightness);\n        \n        --surface-shadow: var(--surface-shadow-dark);\n        --shadow-strength: var(--shadow-strength-dark);\n        \n        --text-factor: var(--dark-text-factor);\n        --text-lightness: var(--dark-text-lightness);\n\n        --surfaces-factor: var(--dark-surfaces-factor);\n        --surfaces-lightness: var(--dark-surfaces-lightness);\n    }\n}\n\n/* Or if the user manually requests a dark colour theme by setting class=\"dark\" on html tag */\n:root.dark {\n    color-scheme: dark light;\n    --mode: dark;\n\n    --saturation-value: var(--dark-saturation);\n    --lightness-value: var(--dark-lightness);\n    \n    --surface-shadow: var(--surface-shadow-dark);\n    --shadow-strength: var(--shadow-strength-dark);\n\n    --text-factor: var(--dark-text-factor);\n    --text-lightness: var(--dark-text-lightness);\n\n    --surfaces-factor: var(--dark-surfaces-factor);\n    --surfaces-lightness: var(--dark-surfaces-lightness);\n}\n\n/*#region --- Surface & std colour classes --- */\n\n.brand {\n    color: var(--text1);\n    background-color: var(--brand);\n}\n.complementary {\n    color: var(--text1);\n    background-color: var(--complementary);\n}\n.surface1 {\n    background-color: var(--surface1);\n    color: var(--text2);\n}\n.surface2 {\n    background-color: var(--surface2);\n    color: var(--text2);\n}\n.surface3 {\n    background-color: var(--surface3);\n    color: var(--text1);\n}\n.surface4 {\n    background-color: var(--surface4);\n    color: var(--text1);\n}\n.surface5 {\n    background-color: var(--surface5);\n    color: var(--text1);\n}\n.rad-shadow {\n    box-shadow: var(--shadow);\n}\n.info {\n    color: var(--text1) !important;\n    background-color: var(--info) !important;\n}\n.info-intense {\n    color: var(--text1) !important;\n    background-color: var(--info-intense) !important;\n}\n.success {\n    color: var(--text1) !important;\n    background-color: var(--success) !important;\n}\n.success-intense {\n    color: var(--text1) !important;\n    background-color: var(--success-intense) !important;\n}\n.warning, .warn {\n    color: var(--text1) !important;\n    background-color: var(--warning) !important;\n}\n.warning-intense, .warn-intense {\n    color: var(--text1) !important;\n    background-color: var(--warning-intense) !important;\n}\n.failure, .error, .danger {\n    color: var(--text1) !important;\n    background-color: var(--failure) !important;\n}\n.failure-intense, .error-intense, .danger-intense {\n    color: var(--text1) !important;\n    background-color: var(--failure-intense) !important;\n}\n.primary {\n    color: var(--primary-fg);\n    background-color: var(--primary-bg);\n}\n.secondary {\n    color: var(--secondary-fg);\n    background-color: var(--secondary-bg);\n}\n\n/*#endregion --- --- --- --- */\n\n/*#region --- Basic reset --- */\n\n*, *::before, *::after {\n    box-sizing: border-box;\n    /* margin: 0; */\n}\n*:focus-visible {\n    outline: 2px solid var(--secondary-fg);\n    outline-offset: 2px;\n}\n@supports not selector(:focus-visible) {\n    *:focus {\n        outline: 1px solid var(--secondary-fg);\n        outline-offset: -4px;\n    }\n}\nhtml {\n    line-height: 1.5; /* Accessible line-height */\n    font-size: 100%;\n    background-color: var(--surface1);\n    color: var(--text2);\n    accent-color: var(--brand);\n}\n\nbody {\n    margin-left: var(--base-margin);\n    margin-right: var(--base-margin);\n    /* padding: 0.3rem; */\n    font-family: var(--font-family);\n    -webkit-font-smoothing: antialiased; /* Improve text rendering */\n}\nh1, h2, h3, h4, h5, h6, heading {\n    line-height: calc(1em + 0.5rem); /* dynamic heights for headings */\n    text-wrap: balance;\n}\np, li, figcaption {\n    text-wrap: pretty;\n}\nimg, picture, video, canvas, svg {\n    /* display: block; */\n    object-fit: cover;\n    vertical-align: bottom;\n    max-width: 100%;\n    background-color: var(--surface2);\n    margin:var(--base-margin);\n}\np, h1, h2, h3, h4, h5, h6, heading, li, dl, dt, blockquote {\n    overflow-wrap: break-word;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n    word-break: break-word;\n}\ndiv > p, div > article {\n    margin-left: var(--base-margin);\n    margin-right: var(--base-margin);\n}\nbutton, input[type=\"button\" i], input[type=\"reset\" i], input[type=\"submit\" i], ::file-selector-button {\n    /* display: inline-flex; */\n    align-items: center;\n    justify-content: center;\n    border: none;\n    padding: .5rem 1rem;\n    text-decoration: none;\n    background-color: var(--info);\n    color: var(--text1);\n    font-family: inherit;\n    font-size: 1rem;\n    line-height: 1.1;\n    cursor: pointer;\n    text-align: center;\n    transition: background 250ms ease-in-out, transform 150ms ease;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: var(--border-radius);\n    /* box-shadow: 0 3px 5px rgb(var(--uib-color-fg), 0.5); */\n    box-shadow: inset 2px 2px 3px rgba(255,255,255, .3),\n                inset -2px -2px 3px rgba(0,0,0, .3);\n}\nbutton:hover, input[type=\"button\" i]:hover, input[type=\"reset\" i]:hover, input[type=\"submit\" i]:hover {\n    background-color: hsl(var(--info-hsl) / .5);\n}\nbutton:active, input[type=\"button\" i]:active, input[type=\"reset\" i]:active, input[type=\"submit\" i]:active {\n    transform: scale(0.97);\n}\ninput, button, textarea, select {\n    font: inherit;\n    min-width: 2em;\n}\nblockquote {\n    border: 1px solid var(--text3);\n    padding: 0.3rem;\n    box-shadow: var(--shadow);\n}\ncode {\n    font-size: 120%;\n}\nheader, footer, main, section, article {\n    /* default prep for container queries */\n    container-type: inline-size;\n}\n/* This lets us use an article like a card display */\narticle {\n    max-width: var(--max-width);\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: 1rem var(--border-margin);\n    background-color: var(--surface3);\n}\narticle > h1::before {\n    font-size: 50%;\n    color: hsl( var(--failure-hue) 100% 50% );\n    content: \"⛔ Do not use H1 headings in articles. \"\n}\narticle > h2, article > h3, article > h4 {\n    margin-block-start: 0;\n    border-bottom: 1px solid var(--text3);\n    padding-block-end: var(--border-pad);\n}\n/* HTML5 section tags - only special format top-level to reduce odd fmts */\nbody > main, body > header, body > footer, body > section {\n    padding-left: var(--base-margin);\n    padding-right: var(--base-margin);\n    max-width: var(--max-width);\n    margin: 0 auto;\n}\nbody > main {\n    display: grid;\n    gap: 1rem;\n}\nfooter {\n    margin-top: 1em;\n}\n/* Put asides inside a main to one side\n   Or, use a section or div to wrap multiple */\nmain > article, main .left {\n    grid-column: 1;\n}\nmain > aside, main .right {\n    grid-column: 2;\n}\n/* Inline blocks in a summary tag */\nsummary > h2, summary > h3, summary > h4, summary > div, summary > p {\n    display: inline-block;\n}\n\n/*#endregion --- Basic reset --- */\n\n/*#region --- Tables --- */\ntable {\n    border-collapse: collapse;\n    border: 1px solid var(--text3);\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n    font-variant-numeric: tabular-nums; /* OpenType: better alignment of numbers */\n}\nthead th, thead td {\n    color: var(--text2);\n    font-weight: bolder;\n    background: var(--surface4);\n}\ntfoot th, tfoot td {\n    color: var(--text2);\n    font-style: italic;\n    background: var(--surface4);\n}\nth[scope=row], tbody th {\n    font-style: italic;\n    color: var(--text2);\n    font-weight:lighter;\n    background: var(--surface4);\n    background-blend-mode: lighten;\n    text-align: left;\n}\nth, td {\n    padding: .5rem;\n    border: 1px solid var(--text4);\n}\ntbody tr:nth-child(even) {\n    color: var(--text2);\n    background-color: var(--surface3);\n    background-blend-mode: lighten;\n}\n/* In case you want to use an hr in a table, reduced top/bottom margins */\ntd hr {\n    margin-top:0.5em;\n    margin-bottom:0.5em;\n}\n/* Extra line spacing for <br> in tables, mainly for use in markdown */\ntd br, th br {\n    display:block;\n    content:\"\";\n    margin-top:0.8em;\n    line-height:190%;\n}\n/*#endregion --- Tables --- */\n\n/*#region --- Forms --- */\nform {\n    border: 1px solid var(--text3);\n    margin: 0.5rem;\n    padding: 0.5rem;\n    border-radius: var(--border-radius);\n    display: flex;\n    gap: 1em;\n    flex-direction: column;\n}\n\ninput[type=\"color\"] {\n    width: 100%;\n    height: 2.5rem;\n}\ninput:invalid, textarea:invalid, select:invalid {\n    /* outline: 2px solid var(--failure); */\n    border: 2px solid var(--failure);\n}\n/* input:valid, textarea:valid, select:valid {\n    border: 3px solid var(--success);\n} */\n/* at any level of nesting */\nform input, form textarea, form select, form fieldset, form output {\n    /* width: 75%; */\n    flex: 2;\n    border-radius: var(--border-radius);\n    padding:0.2rem;\n    border: 1px solid var(--text3);\n}\nform select {\n    cursor: pointer;\n    transition: background 250ms ease-in-out, transform 150ms ease;\n    box-shadow: inset 1px 1px 2px rgba(255,255,255, .3),\n                inset -1px -1px 2px rgba(0,0,0, .3);\n    background-color: \n        /* var(--brand); */\n        hsl(\n            var(--brand-hue)\n            calc(60% * var(--saturation))\n            calc(100% * var(--lightness))\n        );\n}\nform button, input[type=\"button\" i], form input[type=\"reset\" i], form input[type=\"submit\" i] {\n    width:auto;\n    margin-left: .2em;\n    margin-right: .2em;\n}\nform input[type=\"checkbox\" i], form input[type=\"radio\" i] {\n    height:1.5em;\n    vertical-align: middle;\n}\nform:invalid button {\n    background-color: var(--warning);\n}\nform label {\n    flex: 1;\n    vertical-align: middle;\n    display: inline-block;\n}\nform label[required]::after {\n    content: \" *\"\n}\n/* first level only */\nform > div {\n    display: inherit;\n    vertical-align: middle;\n}\nform > div:focus-within {\n    font-weight: bold;\n}\nform > label {\n    align-self: center;\n    text-transform: capitalize;\n}\nform > label:focus-within {\n    font-weight: bold;\n}\n/* Small screen (37.5em @ 16pt is about 600px) */\n@media all and (max-width: 37.5em) {\n    form, form * {\n        display:block;\n        width:100%;\n    }\n    form > label, form > div.btn-row {\n        margin-top: .8rem;\n    }\n    form > :not(label) {\n        margin-bottom: 0.5rem;\n    }\n}\n\n/*#endregion --- Forms --- */\n\n/*#region --- Menus --- */\nnav a {\n    text-decoration: none;\n    color: inherit;\n    background-color: inherit;\n}\nnav li:not([aria-current]):hover {\n    text-decoration: underline;\n    filter: brightness(120%);\n}\nnav [aria-current=page] {\n\tfont-weight: bolder;\n    filter: brightness(130%);\n}\n\n/*#region -- Horizontal menu -- */\n/* nav.horizontal {\n    display: inline-block;\n    padding: 0.5rem;\n} */\nnav.horizontal {\n    display: flex;\n    padding: 0 0.1rem;\n    align-items: center;\n    background-color: var(--surface3);\n}\nnav.horizontal > h2 { /* Menu heading */\n    font-size: inherit;\n    font-weight: inherit;\n    padding-left: 0.5rem;\n}\nnav.horizontal [role=\"menubar\"], nav.horizontal ul { /* ul */\n    display: flex;\n    flex: 2;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    justify-content: flex-start;\n}\nnav.horizontal li { /* [role=\"menuitem\"], [data-route], li */\n    padding: 0.2rem 0.4rem;\n}\n/* Search form */\nnav.horizontal form {\n    flex: 1;\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n    align-items: center;\n    border: none;\n    margin: inherit;\n    padding: inherit;\n    gap: .2rem;\n}\nnav.horizontal input[type=\"search\"] {\n    flex: 3;\n    filter: brightness(120%);\n}\nnav.horizontal input[type=\"submit\"] {\n    flex: 1;\n    font-size: large;\n    font-weight: bolder;\n    filter: brightness(120%);\n    padding: .5rem 0;\n}\n@media all and (max-width: 600px) {\n    nav.horizontal, nav.horizontal ul {\n        /* On small screens, we are no longer using row direction but column */\n        flex-direction: column;\n    }\n}\n/*#endregion -- ---- -- */\n/*#endregion --- Menus --- */\n\n/*#region --- Lists --- */\n.checklist {\n    margin-inline-start: var(--base-margin);\n    margin-inline-end: var(--base-margin);\n    padding-inline-start: .2rem;\n}\nli.check, li.completed {\n    list-style-type: \"✅\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\nli.uncheck, li.unstarted {\n    list-style-type: \"❌\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\nli.started {\n    list-style-type: \"✔️\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\n/*#endregion --- Lists --- */\n\n/*#region ---- Utility ---- */\n\n.animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes pulse {\n    50% {\n        opacity: .5;\n    }\n}\n\n.border {\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: var(--border-margin);\n}\n\n.box {\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: 0.5rem;\n}\n.box h2, .box h3, .box h4, .box h5, .box h6 {\n    margin-top: 0.5rem;\n}\n\n.centre, .center {\n    margin-left:auto;\n    margin-right: auto;\n    text-align: center;\n}\n\n.compact {\n    margin: 0;\n    padding-top: 0.2rem;\n    padding-bottom: 0.2rem;\n}\nbutton.compact {\n    padding: 2px 5px;\n    border-radius: 0;\n    background: inherit;\n    margin: 2px;\n}\n\n.emoji { /* Nicer, cross-platform emoji's */\n    font-family: var(--emoji-fonts);\n}\n\n.noborder {\n    border: none;\n}\n\n.status-side-panel {\n    border-radius: 9999px;\n    width: .5rem;\n    height: 100%;\n    background-color: var(--surface1);\n}\n\n.text-larger {\n    font-size: larger;\n}\n.text-smaller {\n    font-size: smaller;\n}\n\n/** These are useful for things like buttons.\n * Default to 5em in size but are easily customised\n * using CSS variables.\n * @example\n *   <button class=\"square\" style=\"--sq: 10em;\">Square</button>\n *   <button class=\"round\" style=\"--dia: 10em;\">Round</button>\n *   <button class=\"square\" style=\"--sq: 10em;--sqw: 20em;\">Rectangle</button>\n *   <button class=\"round\" style=\"--dia: 10em;--roundw: 20em;\">Oval</button>\n */\n/* Make something square or rectangular. */\n.square {\n    --sq: 5em;\n    width: var(--sqw, var(--sq));\n    height: var(--sqh, var(--sq));\n    border-radius: calc(var(--sq) * 0.1);\n}\n/* Make something circular, oval or pill-shaped */\n.round {\n    --dia: 5em;\n    width: var(--roundw, var(--dia));\n    height: var(--roundh, var(--dia));\n    border-radius: var(--roundb, var(--dia));\n}\n\n/* Apply to headings where you want a sub-title */\n.with-subtitle {\n    margin-bottom: 0;\n}\n/* Add the subtitle as a div with the Aria role */\n[role=\"doc-subtitle\"] {\n    font-size: smaller;\n    font-style: italic;\n    margin-bottom: 1em;\n}\n\n.uppercase {\n    text-transform: uppercase;\n}\n\n/*#endregion ---- Utility ---- */\n\n/*#region -- Toasts/Notifications/Alerts - Readable pop-over notifications -- */\n\n.toaster {\n    /* all: unset;  */\n    position:absolute; \n    top:0; left:0; min-width:100vw; min-height:100vh; \n    -webkit-backdrop-filter: grayscale(60%) blur(10px);\n    backdrop-filter: grayscale(60%) blur(10px);\n    display:flex; flex-direction:column; justify-content:center; align-items:center;\n    z-index:998;\n}\n.toast {\n    /* all: unset;  */\n    border: 4px solid var(--text3);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow2);\n    background-clip: border-box;\n    box-sizing: border-box;\n    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto;\n    padding:1em; margin-bottom:.5em; margin-top:.5em;\n    z-index:999;\n}\n.toast.alert {\n    /* all: unset;  */\n    border: 4px solid var(--text3);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow2);\n    background-clip: border-box;\n    box-sizing: border-box;\n    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto; \n    padding:1em; margin-bottom:.5em; margin-top:.5em;\n    z-index:999;\n}\n.toast-head {font-weight:bold}\n\n/*#endregion -- Toasts/Notifications/Alerts - Readable pop-over notifications -- */\n\n/*#region ---- Status Grid ---- */\n.status-grid {\n    display:grid;\n    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));\n    gap:0.5rem;\n    list-style-position: inside;\n}\n.status-heading {\n  grid-column: 1/-1;\n}\n.status-link {\n  display:contents;\n  color:inherit;\n  text-decoration:none;\n}\n/*#endregion ---- ---- ---- */\n\n/*#region ---- Flex/Grid Layouts ---- */\n\n.grid {\n    display:grid;\n    gap:0.5rem;\n}\n.grid-2 {\n    display:grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap:0.5rem;\n}\n.grid-3 {\n    display:grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */\n    gap:0.5rem;\n}\n.grid-4 {\n    display:grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap:0.5rem;\n}\n.grid-fit {\n    display: grid;\n    gap: 0.5rem;\n    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-fit-min), 100%), 1fr));\n}\n\n.flex {\n    display: flex;\n    gap:0.5rem;\n}\n.flex-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    gap:0.5rem;\n}\n\n/*#endregion ---- ---- ---- */\n\n/*#region for Syntax Highlighted pre's */\n#uib_last_msg_wrap {\n    position:relative;\n}\n#uib_last_msg_wrap > button {\n    display:none;\n    position:absolute;\n    color:hsl(0,0%,50%,.5);\n}\n#uib_last_msg_wrap:hover > button {\n    display:initial;\n}\n#uib_last_msg_wrap > button:hover {\n    color:hsl(0,0%,50%,1);\n}\n\n.syntax-highlight {\n    color:white;\n    display:block;\n    background-color:black;\n    padding:5px 10px;\n    font-family: Consolas, \"ui-monospace\", \"Lucida Console\", monospace;\n    font-size: smaller;\n    white-space: pre;\n    width: 99%;\n    height: 22em;\n    overflow: auto;\n    resize: both;\n}\n.syntax-highlight > .key {color:#ffbf35}\n.syntax-highlight > .string {color:#5dff39;}\n.syntax-highlight > .number {color:#70aeff;}\n.syntax-highlight > .boolean {color:#b993ff;}\n.syntax-highlight > .null {color:#93ffe4;}\n.syntax-highlight > .undefined {color:#ff93c9;}\n/*#endregion */\n"],"names":[],"file":"uib-brand.min.css"}