uxui.css

/* License: GPL3 */
/* uxui.css */


/* Basic settings while developing */
*
{
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
}
ul
{
    list-style: none;
}
body, 
.dialog-container
{
    background-color: #EEEEEE;
}
button
{
    box-shadow: 0.5em 0.5em black;
    border-radius: 0px;
    border-width: 0px;
}


/** UI **/
/* Colors palette */
:root
{
    --tp-foreground-black: #000000;
    --tp-foreground-blue: #000aad;
    --tp-foreground-green-dark: #008e00;
    --tp-foreground-turqoise: #0099aa;
    --tp-foreground-red: #b51000;
    --tp-foreground-magenta: #b31bac;
    --tp-foreground-brown: #af5800;
    --tp-foreground-grey: #aaaaaa;
    --tp-foreground-grey-dark: #555555;
    --tp-foreground-blue-light: #525fff;
    --tp-foreground-green: #4be352;
    --tp-foreground-cyan: #49eeff;
    --tp-foreground-red-light: #ff6552;
    --tp-foreground-magenta-light: #ff70ff;
    --tp-foreground-yellow: #fff451;
    --tp-foreground-white: #ffffff;
    
    --tp-background-black: #000000;
    --tp-background-blue: #000aad;
    --tp-background-green-dark: #008e00;
    --tp-background-turqoise: #0099aa;
    --tp-background-red: #b51000;
    --tp-background-magenta: #b31bac;
    --tp-background-brown: #af5800;
    --tp-background-grey: #aaaaaa;

    --tp-shadow-black: rgba(0, 0, 0, 0.90);
}

/* Scroll bars thumbs are blue and tracks are turqoise */
*
{
    scrollbar-color: var(--tp-foreground-blue) var(--tp-background-turqoise);
}
/* Frame legend lines style is double */
.frame
{
    border-style: double;
    border-width: 4px;
}
/* Outline in textarea is disabled */
textarea
{
    outline: none;
    overflow: hidden;
}
/* Can't select frame titles and menus */
.menu ul li,
legend,
.dialog
{
    user-select: none;
}


/* MENUS */
/* Grey background */
.menu
{
    background-color: var(--tp-background-grey);
}
/* Black text */
.menu
{
    color: var(--tp-foreground-black);
}
/* Red text for shortcut */
.menu .shortcut
{
    color: var(--tp-foreground-red);
}
/* Dark green background when active or focused */
.menu ul li:active,
.menu ul li:focus
{
    background-color: var(--tp-background-green-dark);
}
/* Dark grey text when disabled */
.menu ul li.disabled,
.menu ul li.disabled .shortcut
{
    color: var(--tp-foreground-grey-dark);
}


/* EDITOR */
/* Text in the editor is yellow */
body,
textarea
{
    color: var(--tp-foreground-yellow);
}
/* Text and border in the active frame legend is white */
fieldset
{
    color: var(--tp-foreground-white);
    border-color: var(--tp-foreground-white);
}
/* Background in the editor and in the active frame legend is blue. */
body,
textarea,
.frame
{
    background-color: var(--tp-background-blue);
}
/* Text in selection is blue */
textarea::selection
{
    color: var(--tp-foreground-blue);
}
/* Background in selection is grey */
textarea::selection
{
    background-color: var(--tp-background-grey);
}


/* DIALOGS */
/* Background in dialogs is grey */
.dialog-container,
.dialog-container fieldset,
.dialog
{
    background-color: var(--tp-background-grey);
}
/* Text in dialogs is black */
.dialog
{
    color: var(--tp-foreground-black);
}
/* Dialog container casts a transparent black shadow */
.dialog-container
{
    box-shadow: 1em 1em var(--tp-shadow-black);
}
/* Frame legend is white */
.dialog-container legend
{
    color: var(--tp-foreground-white);
}
/* The outline of dialog buttons is disabled */
.dialog-container button:focus
{
    outline: none;
}
/* Background in dialog buttons is dark green */
.dialog-container button
{
    background-color: var(--tp-background-green-dark);
}
/* Text in dialog buttons is black */
.dialog-container button
{
    color: var(--tp-foreground-black);
}
/* Text in dialog default button is cyan */
.dialog-container button.default
{
    color: var(--tp-foreground-cyan);
}
/* Text in focused dialog button is white */
.dialog-container button:focus
{
    color: var(--tp-foreground-white)
}
/* Text in disabled dialog button is dark grey */
.dialog-container button.disabled
{
    color: var(--tp-foreground-grey-dark);
}
/* Background in disabled dialog button is grey */
.dialog-container button.disabled
{
    background-color: var(--tp-background-grey);
}
/* Dialog buttons cast a black shadow, even when clicked as disabled  */
.dialog-container button,
.dialog-container button.disabled:active
{
    box-shadow: 0.5em 0.5em black;
    border-radius: 0px;
    border-width: 0px;
}
/* When a button is pressed, the shadow disappears */
.dialog-container button:active
{
    box-shadow: 0 0;
}
/* When a button is pressed, it moves to the right by 0.5em */
.dialog-container button:active
{
    transform: translateX(0.5em);
}
/* Disabled dialog buttons don't animate when pressed */
.dialog-container button.disabled:active
{
    transform: none;
}