node-red-contrib-uibuilder/front-end/uib-styles.css

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.

/** Default Styles for uibuilder
 * see https://css-tricks.com/a-complete-guide-to-custom-properties/ for details on using custom css properties
 * 
 * @version: 1.17 2022-12-30
 * @author: Julian Knight (TotallyInformation)
 * @license: Apache 2.0
 * @created: 2022-05-02
 *
 * NOTES:
 * - Watch out for the order of loading of style sheets!
 * - uibuilder attempts to auto-load this sheet BUT you may need to do it manually to get the right order.
 * - Include in your index.css file as `@import url("./uib-styles.css");`
 */

 /* :root applies to everything */
:root {
    --uib-color-light: 201, 209, 217; /* hsl(210, 17%, 82%) */
    --uib-color-light-30: 201, 209, 217, 0.3;
    --uib-color-dark:  36, 36, 36;
    --uib-color-medium-dark:  56, 56, 56;
    --uib-color-info:  23, 162, 184; /* Cyan  */
    --uib-color-warn:  255, 193, 7;  /* Amber */
    --uib-color-error: 220, 53, 69;  /* Red   */
    --uib-color-primary:   0, 123, 255;   /* Blue  */
    --uib-color-secondary: 108, 117, 125; /* Grey  */
    --uib-color-success:   40, 167, 69;   /* Green */
    /* Use these for lightening backgrounds using background-blend-mode: lighten; */
    --uib-lum-22: hsl(0, 0%, 22%);
    --uib-lum-28: hsl(0, 0%, 28%);
    --uib-lum-78: hsl(0, 0%, 78%);
    --uib-lum-72: hsl(0, 0%, 72%);

    --uib-color-fg: var(--uib-color-dark);
    --uib-color-bg: var(--uib-color-light-30);
}

/* If the browser reports it, we can adjust for light/dark theme preferences
 * See https://stackoverflow.com/a/57795495 for use with JavaScript
 */
@media (prefers-color-scheme: light) {
    :root {
        --uib-color-scheme: light;
        --uib-color-fg: var(--uib-color-dark);
        --uib-color-fg-lighter: var(--uib-color-medium-dark);
        --uib-color-bg: var(--uib-color-light-30);
        --uib-color-bg-lighter: var(--uib-color-light);
        --uib-lum-lighten: linear-gradient(var(--uib-lum-72),var(--uib-lum-78),var(--uib-lum-72));
        --uib-border: rgb(var(--uib-color-dark));
        --uib-link: blue; /*-webkit-link;*/
        --uib-link-visited: purple;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --uib-color-scheme: dark;
        --uib-color-fg: var(--uib-color-light);
        --uib-color-fg-lighter: var(--uib-color-light);
        --uib-color-bg: var(--uib-color-dark);
        --uib-color-bg-lighter: var(--uib-color-medium-dark);
        --uib-lum-lighten: linear-gradient(var(--uib-lum-22),var(--uib-lum-28),var(--uib-lum-22));
        --uib-border: rgb(var(--uib-color-light));
        --uib-link: rgb(135, 206, 250);
        --uib-link-visited: rgb(109, 75, 141);
    }
}

/*#region --- Basic reset --- */

/* * {
    margin: 0;
    padding: 0;
} */
html {
    line-height: 1.5;
    font-size: 100%;
}
body {
    margin-left: 1rem;
    margin-right: 1rem;
    /* padding: 0.3rem; */
    font-family: sans-serif;
    background-color: rgb(var(--uib-color-bg));
    color: rgb(var(--uib-color-fg));
}
h1, h2, h3, h4, h5, h6, heading {
    line-height: 1.3;
}
img, picture, video, canvas, svg {
    /* display: block; */
    object-fit: cover;
    vertical-align: bottom;
    max-width: 100%;
    background-color: grey;
}
p, h1, h2, h3, h4, h5, h6, heading, li, dl, dt, blockquote {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
}
div > p {
    margin-left: 1rem;
    margin-right: 1rem;
}
button, input[type="button" i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: .5rem 1rem;
    text-decoration: none;
    background-color: rgb(var(--uib-color-info));
    color: rgb(var(--uib-color-dark));
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.1;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, transform 150ms ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 8px;
    /* box-shadow: 0 3px 5px rgb(var(--uib-color-fg), 0.5); */
    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 {
    background-color: rgb(var(--uib-color-info), .5);
}

button:focus, input[type="button" i]:focus {
    outline: 1px solid rgb(var(--uib-color-fg));
    outline-offset: -4px;
}

button:active, input[type="button" i]:active {
    transform: scale(0.97);
}
table {
    border-collapse: collapse;
    border: 1px solid var(--uib-border);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
thead th {
    color: rgb(var(--uib-color-bg-lighter));
    background: rgb(var(--uib-color-fg-lighter));
}
th, td {
    padding: .5rem;
}
input, button, textarea, select {
    font: inherit;
}
a:link {
    color: var(--uib-link);
}
a:visited {
    color: var(--uib-link-visited);
}

/*#region --- Basic reset --- */

/*#region -- Toasts - Readable pop-over notifications -- */

.uib-toaster {
    /* all: unset;  */
    position:absolute; 
    top:0; left:0; min-width:100vw; min-height:100vh; 
    background: rgb(var(--uib-color-bg), .3);
    -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;
}
.uib-toast {
    /* all: unset;  */
    border:2px solid rgb(var(--uib-color-fg)); 
    background-color: rgb(var(--uib-color-bg), 1);
    color: rgb(var(--uib-color-fg));
    box-shadow: 10px 10px 15px rgb(var(--uib-color-dark));
    /* filter: drop-shadow(16px 16px 10px RGB(var(--uib-color-dark))); */
    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto; 
    padding:1em; margin-bottom:.5em; margin-top:.5em;
    z-index:999;
}
.uib-toast.info {
    background-color: rgb(var(--uib-color-info), 1);
    color: rgb(var(--uib-color-dark));
}
.uib-toast.warn {
    background-color: rgb(var(--uib-color-warn), 1);
    color: rgb(var(--uib-color-dark));
}
.uib-toast.error {
    background-color: rgb(var(--uib-color-error), 1);
    color: rgb(var(--uib-color-light));
}
.uib-toast.primary {
    background-color: rgb(var(--uib-color-primary), 1);
    color: rgb(var(--uib-color-light));
}
.uib-toast.secondary {
    background-color: rgb(var(--uib-color-secondary), 1);
    color: rgb(var(--uib-color-light));
}
.uib-toast.success {
    background-color: rgb(var(--uib-color-success), 1);
    color: rgb(var(--uib-color-dark));
}

.uib-toast-head {font-weight:bold}

/*#endregion -- Toasts - Readable pop-over notifications -- */

/* Info table (used by instance details/debug page) */
.uib-info-tb {
    border-collapse: collapse;
    border: 1px solid var(--uib-border);
}
.uib-info-tb thead th {
    color: rgb(var(--uib-color-bg-lighter));
    background: rgb(var(--uib-color-fg-lighter));
}

.uib-info-tb th, .uib-info-tb td {
    padding: .5rem;
}
.uib-info-tb th {
    text-align: left;
}
.uib-info-tb tbody tr:nth-child(even) {
    color: rgb(var(--uib-color-fg));
    background: var(--uib-lum-lighten);
    background-blend-mode: lighten;
}



/*#region  Colours for Syntax Highlighted pre's */
.syntax-highlight {
    color:white;
    display:block;
    background-color:black;
    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;}
/*#endregion */