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

Easily create data-driven web UI's for Node-RED using any (or no) front-end library.

:root,:root.light{color-scheme:light dark;--mode:light;--uib-css:uib-brand;--font-family:sans-serif;--brand-hue:200;--text-hue:var(--brand-hue);--surface-hue:var(--brand-hue);--complementary-offset:180;--accent-offset:30;--saturation-bias:0;--light-saturation:.66;--dark-saturation:calc(var(--light-saturation) * .6);--saturation-value:var(--light-saturation);--saturation:calc(var(--saturation-value) + var(--saturation-bias));--lightness-bias:0;--light-lightness:.57;--dark-lightness:calc(var(--light-lightness) * .75);--lightness-value:var(--light-lightness);--lightness:calc(var(--lightness-value) + var(--lightness-bias));--base-margin:1rem;--max-width:64rem;--border-radius:0.5rem;--border-pad:0.5rem;--border-margin:0;--grid-fit-min:15rem;--emoji-fonts:"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;--brand:hsl(
        var(--brand-hue)
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--surface-shadow-light:var(--brand-hue) 10% 20%;--shadow-strength-light:.02;--surface-shadow-dark:var(--brand-hue) 30% 30%;--shadow-strength-dark:.1;--surface-shadow:var(--surface-shadow-light);--shadow-strength:var(--shadow-strength-light);--shadow1:0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));--shadow2:0.2px 0.3px 0.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .031)),0.5px 0.7px 0.7px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .053)),1px 1.3px 1.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .07)),1.8px 2.2px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .087)),3.3px 4.2px 4.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .109)),8px 10px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .16));--shadow:var(--shadow1);--text-saturation:.2;--text-bias:0;--light-text-lightness:.1;--light-text-factor:1;--dark-text-lightness:.9;--dark-text-factor:-1;--text-factor:var(--light-text-factor);--text-lightness:var(--light-text-lightness);--text1:hsl(
        var(--text-hue)
        calc(100% * var(--text-saturation))
        calc(
            100% * (var(--text-lightness)
            + (0 * var(--text-factor) * .2)
            - (var(--text-factor) * var(--text-bias)))
        )
    );--text2:hsl(
        var(--text-hue)
        calc(100% * (var(--text-saturation) / 2))
        calc(
            100% * (var(--text-lightness)
            + (1 * var(--text-factor) * .2)
            - (var(--text-factor) * var(--text-bias)))
        )
    );--text3:hsl(
        var(--text-hue)
        calc(100% * (var(--text-saturation) / 2))
        calc(
            100% * (var(--text-lightness)
            + (1 * var(--text-factor) * .4)
            - (var(--text-factor) * var(--text-bias)))
        )
    );--text4:hsl(
        var(--text-hue) 
        10% 
        calc(
            50% 
            - (100% * var(--text-factor) * var(--text-bias)))
        / calc(25% + (100% * var(--text-bias)))
    );--surfaces-saturation:.1;--surfaces-bias:0;--light-surfaces-lightness:.95;--light-surfaces-factor:1;--dark-surfaces-lightness:.1;--dark-surfaces-factor:-1;--surfaces-factor:var(--light-surfaces-factor);--surfaces-lightness:var(--light-surfaces-lightness);--surface1:hsl(
        var(--surface-hue)
        calc(100% * var(--surfaces-saturation))
        calc(
            100% * (var(--surfaces-lightness)
            - (var(--surfaces-factor) * .00)
            + (var(--surfaces-factor) * var(--surfaces-bias)))
        )
    );--surface2:hsl(
        var(--surface-hue)
        calc(100% * var(--surfaces-saturation))
        calc(
            100% * (var(--surfaces-lightness)
            - (var(--surfaces-factor) * .05)
            + (var(--surfaces-factor) * var(--surfaces-bias)))
        )
    );--surface3:hsl(
        var(--surface-hue)
        calc(100% * var(--surfaces-saturation))
        calc(
            100% * (var(--surfaces-lightness)
            - (var(--surfaces-factor) * .10)
            + (var(--surfaces-factor) * var(--surfaces-bias)))
        )
    );--surface4:hsl(
        var(--surface-hue)
        calc(100% * var(--surfaces-saturation))
        calc(
            100% * (var(--surfaces-lightness)
            - (var(--surfaces-factor) * .15)
            + (var(--surfaces-factor) * var(--surfaces-bias)))
        )
    );--surface5:hsl(
        var(--surface-hue)
        calc(100% * var(--surfaces-saturation))
        calc(
            100% * (var(--surfaces-lightness)
            - (var(--surfaces-factor) * .20)
            + (var(--surfaces-factor) * var(--surfaces-bias)))
        )
    );--info-hue:203;--info-saturation-bias:0;--info-lightness-bias:0;--info-hsl:var(--info-hue) calc(100% * (var(--saturation) + var(--info-saturation-bias))) calc(100% * (var(--lightness) + var(--info-lightness-bias)));--info:hsl( var(--info-hsl) );--info-intense:hsl(
        var(--info-hue) 100% 50%
    );--success-hue:120;--success-saturation-bias:0;--success-lightness-bias:0;--success:hsl(
        var(--success-hue)
        calc(100% * (var(--saturation) + var(--success-saturation-bias)))
        calc(100% * (var(--lightness) + var(--success-lightness-bias)))
    );--success-intense:hsl(
        var(--success-hue) 100% 50%
    );--warning-hue:40;--warning-saturation-bias:0;--warning-lightness-bias:0;--warning:hsl(
        var(--warning-hue)
        calc(100% * (var(--saturation) + var(--warning-saturation-bias)))
        calc(100% * (var(--lightness) + var(--warning-lightness-bias)))
    );--warning-intense:hsl(
        var(--warning-hue) 100% 50%
    );--warn:var(--warning);--failure-hue:2;--failure-saturation-bias:0;--failure-lightness-bias:0;--failure:hsl(
        var(--failure-hue)
        calc(100% * (var(--saturation) + var(--failure-saturation-bias)))
        calc(100% * (var(--lightness) + var(--failure-lightness-bias)))
    );--failure-intense:hsl(
        var(--failure-hue) 100% 50%
    );--error:var(--failure);--danger:var(--failure);--complementary-hue:calc(var(--brand-hue) + var(--complementary-offset));--complementary-fg:hsl(
        var(--brand-hue)
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--complementary-bg:hsl(
        var(--complementary-hue)
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--complementary:hsl(
        calc(var(--complementary-hue))
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--primary-hue:calc(var(--brand-hue) + var(--complementary-offset) + var(--accent-offset));--primary-fg:hsl(
        calc(var(--primary-hue) + var(--complementary-offset))
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--primary-bg:hsl(
        var(--primary-hue)
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--primary:var(--primary-bg);--secondary-hue:calc(var(--brand-hue) + var(--complementary-offset) - var(--accent-offset));--secondary-fg:hsl(
        calc(var(--secondary-hue) + var(--complementary-offset))
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--secondary-bg:hsl(
        var(--secondary-hue)
        calc(100% * var(--saturation))
        calc(100% * var(--lightness))
    );--secondary:var(--secondary-bg)}@media (prefers-color-scheme:light){:root{color-scheme:light dark;--mode:light}}@media (prefers-color-scheme:dark){:root{color-scheme:dark light;--mode:dark;--saturation-value:var(--dark-saturation);--lightness-value:var(--dark-lightness);--surface-shadow:var(--surface-shadow-dark);--shadow-strength:var(--shadow-strength-dark);--text-factor:var(--dark-text-factor);--text-lightness:var(--dark-text-lightness);--surfaces-factor:var(--dark-surfaces-factor);--surfaces-lightness:var(--dark-surfaces-lightness)}}:root.dark{color-scheme:dark light;--mode:dark;--saturation-value:var(--dark-saturation);--lightness-value:var(--dark-lightness);--surface-shadow:var(--surface-shadow-dark);--shadow-strength:var(--shadow-strength-dark);--text-factor:var(--dark-text-factor);--text-lightness:var(--dark-text-lightness);--surfaces-factor:var(--dark-surfaces-factor);--surfaces-lightness:var(--dark-surfaces-lightness)}.brand{color:var(--text1);background-color:var(--brand)}.complementary{color:var(--text1);background-color:var(--complementary)}.surface1{background-color:var(--surface1);color:var(--text2)}.surface2{background-color:var(--surface2);color:var(--text2)}.surface3{background-color:var(--surface3);color:var(--text1)}.surface4{background-color:var(--surface4);color:var(--text1)}.surface5{background-color:var(--surface5);color:var(--text1)}.rad-shadow{box-shadow:var(--shadow)}.info{color:var(--text1)!important;background-color:var(--info)!important}.info-intense{color:var(--text1)!important;background-color:var(--info-intense)!important}.success{color:var(--text1)!important;background-color:var(--success)!important}.success-intense{color:var(--text1)!important;background-color:var(--success-intense)!important}.warn,.warning{color:var(--text1)!important;background-color:var(--warning)!important}.warn-intense,.warning-intense{color:var(--text1)!important;background-color:var(--warning-intense)!important}.danger,.error,.failure{color:var(--text1)!important;background-color:var(--failure)!important}.danger-intense,.error-intense,.failure-intense{color:var(--text1)!important;background-color:var(--failure-intense)!important}.primary{color:var(--primary-fg);background-color:var(--primary-bg)}.secondary{color:var(--secondary-fg);background-color:var(--secondary-bg)}*,::after,::before{box-sizing:border-box}:focus-visible{outline:2px solid var(--secondary-fg);outline-offset:2px}@supports not selector(:focus-visible){:focus{outline:1px solid var(--secondary-fg);outline-offset:-4px}}html{line-height:1.5;font-size:100%;background-color:var(--surface1);color:var(--text2);accent-color:var(--brand)}body{margin-left:var(--base-margin);margin-right:var(--base-margin);font-family:var(--font-family)}h1,h2,h3,h4,h5,h6,heading{line-height:1.3}canvas,img,picture,svg,video{object-fit:cover;vertical-align:bottom;max-width:100%;background-color:var(--surface2);margin:var(--base-margin)}blockquote,dl,dt,h1,h2,h3,h4,h5,h6,heading,li,p{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;word-break:break-word}div>article,div>p{margin-left:var(--base-margin);margin-right:var(--base-margin)}::file-selector-button,button,input[type=button i],input[type=reset i],input[type=submit i]{align-items:center;justify-content:center;border:none;padding:.5rem 1rem;text-decoration:none;background-color:var(--info);color:var(--text1);font-family:inherit;font-size:1rem;line-height:1.1;cursor:pointer;text-align:center;transition:background 250ms ease-in-out,transform 150ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--border-radius);box-shadow:inset 2px 2px 3px rgba(255,255,255,.3),inset -2px -2px 3px rgba(0,0,0,.3)}button:hover,input[type=button i]:hover,input[type=reset i]:hover,input[type=submit i]:hover{background-color:hsl(var(--info-hsl) / .5)}button:active,input[type=button i]:active,input[type=reset i]:active,input[type=submit i]:active{transform:scale(.97)}button,input,select,textarea{font:inherit;min-width:2em}blockquote{border:1px solid var(--text3);padding:.3rem;box-shadow:var(--shadow)}code{font-size:120%}article{max-width:var(--max-width);border:1px solid var(--text3);border-radius:var(--border-radius);padding:var(--border-pad);margin:1rem var(--border-margin);background-color:var(--surface3)}article>h1::before{font-size:50%;color:hsl(var(--failure-hue) 100% 50%);content:"⛔ Do not use H1 headings in articles. "}article>h2,article>h3,article>h4{margin-block-start:0;border-bottom:1px solid var(--text3);padding-block-end:var(--border-pad)}body>footer,body>header,body>main,body>section{padding-left:var(--base-margin);padding-right:var(--base-margin);max-width:var(--max-width);margin:0 auto}body>main{display:grid;gap:1rem}footer{margin-top:1em}main .left,main>article{grid-column:1}main .right,main>aside{grid-column:2}summary>div,summary>h2,summary>h3,summary>h4,summary>p{display:inline-block}table{border-collapse:collapse;border:1px solid var(--text3);margin-top:1rem;margin-bottom:1rem}thead td,thead th{color:var(--text2);font-weight:bolder;background:var(--surface4)}tfoot td,tfoot th{color:var(--text2);font-style:italic;background:var(--surface4)}tbody th,th[scope=row]{font-style:italic;color:var(--text2);font-weight:lighter;background:var(--surface4);background-blend-mode:lighten;text-align:left}td,th{padding:.5rem;border:1px solid var(--text4)}tbody tr:nth-child(even){color:var(--text2);background-color:var(--surface3);background-blend-mode:lighten}td hr{margin-top:.5em;margin-bottom:.5em}td br,th br{display:block;content:"";margin-top:.8em;line-height:190%}form{border:1px solid var(--text3);margin:.5rem;padding:.5rem;border-radius:var(--border-radius);display:flex;gap:1em;flex-direction:column}input[type=color]{width:100%;height:2.5rem}input:invalid,select:invalid,textarea:invalid{border:2px solid var(--failure)}form fieldset,form input,form output,form select,form textarea{flex:2;border-radius:var(--border-radius);padding:.2rem;border:1px solid var(--text3)}form select{cursor:pointer;transition:background 250ms ease-in-out,transform 150ms ease;box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset -1px -1px 2px rgba(0,0,0,.3);background-color:hsl(var(--brand-hue) calc(60% * var(--saturation)) calc(100% * var(--lightness)))}form button,form input[type=reset i],form input[type=submit i],input[type=button i]{width:auto;margin-left:.2em;margin-right:.2em}form input[type=checkbox i],form input[type=radio i]{height:1.5em;vertical-align:middle}form:invalid button{background-color:var(--warning)}form label{flex:1;vertical-align:middle;display:inline-block}form label[required]::after{content:" *"}form>div{display:inherit;vertical-align:middle}form>div:focus-within{font-weight:700}form>label{align-self:center;text-transform:capitalize}form>label:focus-within{font-weight:700}@media all and (max-width:600px){form,form *{display:block;width:100%}form>div.btn-row,form>label{margin-top:.8rem}form>:not(label){margin-bottom:.5rem}}nav a{text-decoration:none;color:inherit;background-color:inherit}nav li:not([aria-current]):hover{text-decoration:underline;filter:brightness(120%)}nav [aria-current=page]{font-weight:bolder;filter:brightness(130%)}nav.horizontal{display:flex;padding:0 .1rem;align-items:center;background-color:var(--surface3)}nav.horizontal>h2{font-size:inherit;font-weight:inherit;padding-left:.5rem}nav.horizontal [role=menubar],nav.horizontal ul{display:flex;flex:2;list-style-type:none;margin:0;padding:0;justify-content:flex-start}nav.horizontal li{padding:.2rem .4rem}nav.horizontal form{flex:1;display:inline-flex;flex-wrap:nowrap;flex-direction:row;align-items:center;border:none;margin:inherit;padding:inherit;gap:.2rem}nav.horizontal input[type=search]{flex:3;filter:brightness(120%)}nav.horizontal input[type=submit]{flex:1;font-size:large;font-weight:bolder;filter:brightness(120%);padding:.5rem 0}@media all and (max-width:600px){nav.horizontal,nav.horizontal ul{flex-direction:column}}.checklist{margin-inline-start:var(--base-margin);margin-inline-end:var(--base-margin);padding-inline-start:.2rem}li.check,li.completed{list-style-type:"✅";padding-left:.4rem;font-family:var(--emoji-fonts)}li.uncheck,li.unstarted{list-style-type:"❌";padding-left:.4rem;font-family:var(--emoji-fonts)}li.started{list-style-type:"✔️";padding-left:.4rem;font-family:var(--emoji-fonts)}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{50%{opacity:.5}}.border{border:1px solid var(--text3);border-radius:var(--border-radius);padding:var(--border-pad);margin:var(--border-margin)}.box{border:1px solid var(--text3);border-radius:var(--border-radius);padding:.5rem}.box h2,.box h3,.box h4,.box h5,.box h6{margin-top:.5rem}.center,.centre{margin-left:auto;margin-right:auto;text-align:center}.compact{margin:0;padding-top:.2rem;padding-bottom:.2rem}button.compact{padding:2px 5px;border-radius:0;background:inherit;margin:2px}.emoji{font-family:var(--emoji-fonts)}.noborder{border:none}.status-side-panel{border-radius:9999px;width:.5rem;height:100%;background-color:var(--surface1)}.text-larger{font-size:larger}.text-smaller{font-size:smaller}.with-subtitle{margin-bottom:0}[role=doc-subtitle]{font-size:smaller;font-style:italic;margin-bottom:1em}.uppercase{text-transform:uppercase}.toaster{position:absolute;top:0;left:0;min-width:100vw;min-height:100vh;-webkit-backdrop-filter:grayscale(60%) blur(10px);backdrop-filter:grayscale(60%) blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:998}.toast{border:4px solid var(--text3);border-radius:var(--border-radius);box-shadow:var(--shadow2);background-clip:border-box;box-sizing:border-box;min-width:50vw;max-width:50vw;max-height:50vh;overflow-y:auto;padding:1em;margin-bottom:.5em;margin-top:.5em;z-index:999}.toast.alert{border:4px solid var(--text3);border-radius:var(--border-radius);box-shadow:var(--shadow2);background-clip:border-box;box-sizing:border-box;min-width:50vw;max-width:50vw;max-height:50vh;overflow-y:auto;padding:1em;margin-bottom:.5em;margin-top:.5em;z-index:999}.toast-head{font-weight:700}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:.5rem;list-style-position:inside}.status-heading{grid-column:1/-1}.status-link{display:contents;color:inherit;text-decoration:none}.grid{display:grid;gap:.5rem}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}.grid-fit{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-fit-min),100%),1fr))}.flex{display:flex;gap:.5rem}.flex-wrap{display:flex;flex-wrap:wrap;gap:.5rem}#uib_last_msg_wrap{position:relative}#uib_last_msg_wrap>button{display:none;position:absolute;color:hsl(0,0%,50%,.5)}#uib_last_msg_wrap:hover>button{display:initial}#uib_last_msg_wrap>button:hover{color:#7f7f7f}.syntax-highlight{color:#fff;display:block;background-color:#000;padding:5px 10px;font-family:Consolas,ui-monospace,"Lucida Console",monospace;font-size:smaller;white-space:pre;width:99%;height:22em;overflow:auto;resize:both}.syntax-highlight>.key{color:#ffbf35}.syntax-highlight>.string{color:#5dff39}.syntax-highlight>.number{color:#70aeff}.syntax-highlight>.boolean{color:#b993ff}.syntax-highlight>.null{color:#93ffe4}.syntax-highlight>.undefined{color:#ff93c9}