@scidian/osui/css/inputs.css

Lightweight JavaScript UI library.

/********** ELEMENT: <input> (number, text, etc) **********/

.osui-input {
    color: rgba(var(--text), 1);
    background-color: rgba(var(--background-dark), 0.35);
    box-shadow: inset 0 0.075em 0.15em 0 rgba(var(--shadow), 0.35);

    border: var(--border-micro) solid rgba(var(--shadow), 0.5);
    border-radius: var(--radius-large);
    outline: var(--border-micro) solid rgba(var(--shadow), 0.0);
    padding: var(--pad-x-small) var(--pad-smallish);
    vertical-align: middle;
    min-width: 1em;
    text-align: left;
}

.osui-input:hover {
    color: rgba(var(--highlight), 1);
    background-color: rgba(var(--button-dark), 0.5);
}

.osui-input:focus {
    color: rgba(var(--highlight), 1);
    background: rgba(var(--darklight), 1);
    border: var(--border-micro) solid rgb(var(--icon));
    outline: var(--border-micro) solid rgba(var(--shadow), 1.0);
    border-radius: 0;
}

.osui-input.osui-valid-type {
    color: rgba(var(--text), 1);
    box-shadow:
        inset 0 0 0 var(--pixel) rgba(var(--valid), 0.5),
        inset 0 0.075em 0.5em 0 rgba(var(--shadow), 0.5);
    padding-left: var(--pad-medium);
    text-align: left !important;
}

.osui-input.osui-invalid-type {
    color: rgba(var(--text), 0.35);
    box-shadow:
        inset 0 0 0 var(--pixel) rgba(var(--invalid), 0.5),
        inset 0 0.075em 0.5em 0 rgba(var(--shadow), 0.5);
    text-align: center !important;
}

.osui-input.osui-yes-drop {
    color: rgba(var(--valid), 1);
    background: rgba(var(--darklight), 1);
    border-radius: 0;
    border: var(--border-micro) solid rgb(var(--valid));
    /* outline: var(--border-micro) solid rgb(var(--valid)); */
    box-shadow: inset 0 0 0 var(--pixel) rgba(var(--valid), 0.5);
    text-align: center !important;
}

.osui-input.osui-no-drop {
    color: rgba(var(--invalid), 1.0);
    background: rgba(var(--darklight), 1);
    border-radius: 0;
    border: var(--border-micro) solid rgb(var(--invalid));
    /* outline: var(--border-micro) solid rgb(var(--invalid)); */
    box-shadow: inset 0 0 0 var(--pixel) rgba(var(--invalid), 0.5);
    text-align: center !important;
}

/** Hide Arrow Spinners - Chrome, Safari, Edge, Opera */
.osui-input::-webkit-outer-spin-button,
.osui-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/********** ELEMENT: <button> Button **********/

.osui-button {
    /* display: flex; */
    position: relative;

    cursor: pointer;
    pointer-events: all;

    color: rgba(var(--text-light), 1);

    border: var(--border-micro) solid rgba(var(--shadow), 0.75);
    border-radius: var(--radius-large);
    outline: var(--border-small) solid rgba(var(--darklight), 0.0);

    background-color: rgba(var(--button-dark), 0.75);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.5), rgba(var(--icon-dark), 0.5));
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.1);
    text-shadow: var(--minus) var(--pixel) rgba(var(--shadow), 0.5);

    font-size: var(--font-size);
    margin: 0;
    padding: var(--pad-x-small) var(--pad-medium);

    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.osui-button:not(.osui-selected):enabled:hover {
    color: rgba(var(--highlight), 1);
    background-color: rgba(var(--highlight), 0.1);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.7), rgba(var(--icon-dark), 0.7));
}

.osui-button:not(.osui-selected):enabled:active {
    color: rgba(var(--icon), 1);
    background-color: rgba(var(--background-dark), 0.5);
    background-image: none;
    box-shadow: inset 0 var(--pad-micro) var(--pad-x-small) 0 rgba(var(--shadow), 0.75); /* sunk-in-shadow */
}

.osui-button.osui-selected {
    background-color: rgba(var(--shadow), 1.0);
    background-image: linear-gradient(to bottom left, rgba(var(--icon-light), 0.20), rgba(var(--icon), 0.20));
    box-shadow: inset 0 var(--pad-micro) var(--pad-x-small) 0 rgba(var(--shadow), 0.75); /* sunk-in-shadow */
}

.osui-button:disabled {
    pointer-events: none;
}

.osui-button:disabled {
    filter: contrast(75%) grayscale(100%) brightness(50%);
}

/* Little borderless buttons */
.osui-borderless-button {
    user-select: none;
    border: none;
    border-radius: var(--radius-large);
    background: transparent;
    box-shadow: none;
    outline: none;

    min-height: 1.5em;
    min-width: 1.5em;
}

.osui-borderless-button:not(.osui-selected):enabled:hover {
    background-image: linear-gradient(to bottom, rgba(var(--white), 0.1), rgba(var(--white), 0.2));
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) 0 rgba(var(--white), 0.25),
        inset var(--pixel) var(--minus) var(--pixel) 0 rgba(var(--black), 0.25);
}

.osui-borderless-button:not(.osui-selected):enabled:active {
    background-image: linear-gradient(to bottom, rgba(var(--black), 0.2), rgba(var(--black), 0.1));
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) 0 rgba(var(--black), 0.5),
        inset var(--pixel) var(--minus) var(--pixel) 0 rgba(var(--black), 0.5);
}

/********** ELEMENT: <input> Checkbox **********/

/* Container */
.osui-checkbox {
    background: transparent;
    display: inline-block;
    position: relative;
    justify-content: left;
    cursor: pointer;
    margin-left: 0.1em;
}

/* Native Element (holds checkbox value) */
.osui-checkbox-input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Visible Background: Unchecked */
.osui-checkbox-button {
    flex-grow: 0;
    flex-shrink: 0;
    position: absolute;
    color: rgba(var(--text), 1);
    background-image: none;
    background-color: rgba(var(--background-dark), 0.5);
    box-shadow: inset 0 var(--pad-micro) var(--pad-x-small) 0 rgba(var(--shadow), 0.35); /* sunk-in-shadow */
    left: 0;
    top: 50%;
    width: 2.0em;
    height: 1.20em;
    border-radius: 1.0em;
    border: var(--border-micro) solid rgba(var(--shadow), 1.0);
    transform: translateY(-50%);
    transition: transform var(--menu-timing);
}

/* Visible Background: Checked */
.osui-checkbox-input:checked + .osui-checkbox-button {
    --bg-color-light: var(--icon-light);
    --bg-color-dark: var(--icon-dark);
    background-color: rgba(var(--highlight), 0.2);
    background-image: linear-gradient(to bottom, rgba(var(--bg-color-light), 0.7), rgba(var(--bg-color-dark), 0.7));
    border: var(--border-micro) solid rgba(var(--shadow), 1.0);
}

/* Visible Background: Checked & Hover */
.osui-checkbox-input:checked:hover + .osui-checkbox-button {
    background-color: rgba(var(--highlight), 0.5);
}

/* Button: Unchecked */
.osui-checkbox-button:before {
    content: '';
    flex-grow: 0;
    flex-shrink: 0;
    position: absolute;
    left: 0.2em;
    top: 50%;
    width: 0.65em;
    height: 0.65em;
    background-color: rgba(var(--text-light), 0.8);
    border-radius: 1em;
    transform: translate(0, -50%);
    transition: transform var(--menu-timing);
}

/* Button: Checked */
.osui-checkbox-input:checked + .osui-checkbox-button:before {
    /* background-color: rgba(var(--highlight), 0.7); */
    box-shadow: 0px 0px 3px 2px rgba(var(--shadow), 0.5); /* drop shadow */
    transform: translate(0.75em, -50%);
    transition: transform var(--menu-timing);
}

/* Button: Hover, Unchecked */
.osui-checkbox-input:hover + .osui-checkbox-button:before {
    background-color: rgba(var(--highlight), 0.9);
}

/********** CLASS: Drop down buttons and menus **********/

/** Buttons that drop down a 'select' option list  */
.osui-dropdown.osui-selected, .osui-dropdown:not(.osui-selected):enabled:active {
    background-color: rgba(var(--darklight), 1);
    background-image: none;
    border: var(--border-micro) solid rgb(var(--icon));
    outline: var(--border-small) solid rgb(var(--darklight));
    border-radius: 0;
}

/** Color input attached to Button */
.osui-color-input-button {
    position: absolute;
    cursor: pointer;
    margin: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0;
}

/** Div used for a Dropdown Color Button */
.osui-drop-color {
    background-color: #ff0000;
    width: calc(100% - 0.5em);
    height: 1.1em;
    border: var(--border-micro) solid rgba(var(--shadow), 0.75);
    border-radius: var(--radius-small);
}

/********** CLASS: Drop Arrow (adds a little down arrow on right side of element) **********/

.osui-drop-arrow {
    padding-right: 1.4em;
}
.osui-drop-arrow::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    right: 0.65em;
    top: 50%;
    transform: translateY(-25%);
    z-index: 101; /* Drop Arrow */
    border: var(--arrow-size) solid transparent;
    border-color: rgba(var(--text-light)) transparent transparent transparent;
    transition: all var(--menu-timing);
}
.osui-drop-arrow:hover::after, .osui-drop-arrow.osui-selected::after {
    border-color: rgba(var(--highlight)) transparent transparent transparent;
}
.osui-drop-arrow.osui-selected::after {
    transform: translateY(-75%) scale(1.0, -1.0);
}

/********** CLASS: <input> Number **********/

/** Hide Arrow Spinners - Firefox (input[type=number] {}) */
.osui-number {
    -moz-appearance: textfield;
}

.osui-number {
    font-size: 100%;
}

.osui-number-holder {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
}

.osui-number-label-box {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 var(--pad-smallish);
    color: rgba(var(--text-dark), 1);
}

/********** ELEMENT: <input> Slider **********/

.osui-slide-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.osui-tick-marks {
    --divides: 10; /* (max - min) / step */

    position: absolute;
    pointer-events: none;

    width: calc(100% - (var(--pad-large) * 2));
    height: 0.2em;
    left: var(--pad-large);
    top: 1.2em;
    padding: 0;
    margin: 0;

    background-image: repeating-linear-gradient(to right,
        rgba(var(--icon), 0.75) 0 1px, transparent 1px calc((100% - var(--pad-micro)) / var(--divides)));
}

.osui-slider {
    --middle: 0.5; /* (value - min) / (max - min) */

    -webkit-appearance: none;
    position: absolute;
    width: 98%;
    padding: 0;
    height: 0.375em;
    top: calc(50% - 0.375em);

    background: linear-gradient(to right,
        rgba(var(--icon), 0.65) 0%, rgba(var(--icon), 0.65) calc(var(--middle) * 100%),
        rgba(var(--background-dark), 0.5) calc(var(--middle) * 100%), rgba(var(--background-dark), 0.5) 100%);
    border: var(--border-micro) solid transparent;
    border: var(--border-micro) solid rgba(var(--shadow), 1.0);
    border-radius: var(--radius-large);
    outline: var(--border-micro) solid transparent;

    cursor: pointer;
}

.osui-slider:hover, .osui-slider:focus, .osui-slider:active {
    background: linear-gradient(to right,
        rgba(var(--icon-light), 0.65) 0%, rgba(var(--icon-light), 0.65) calc(var(--middle) * 100%),
        rgba(var(--darklight), 0.5) calc(var(--middle) * 100%), rgba(var(--darklight), 0.5) 100%);
    border: var(--border-micro) solid transparent;
    border: var(--border-micro) solid rgba(var(--shadow), 1.0);
    border-radius: var(--radius-large);
    outline: var(--border-micro) solid transparent;
}
.osui-slider:active {
    cursor: ew-resize;
}

/* Safari / Chrome Thumb */
.osui-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1em;
    height: 1.1em;
    border: var(--border-micro) solid rgba(var(--background-dark), 1.0);
    border-radius: 50%;
    background-color: rgba(var(--shadow), 1.0);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.8), rgba(var(--icon-dark), 0.8));
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.1);
}
.osui-slider::-webkit-slider-thumb:hover, .osui-slider::-webkit-slider-thumb:active {
    background-color: rgba(var(--shadow), 1.0);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 1.0), rgba(var(--icon-dark), 1.0));
}
.osui-slider::-webkit-slider-thumb:active { cursor: ew-resize; }

/* Firefox thumb */
.osui-slider::-moz-range-thumb {
    width: 1.1em;
    height: 1.1em;
    border: var(--border-micro) solid rgba(var(--background-dark), 1.0);
    border-radius: 50%;
    background-color: rgba(var(--shadow), 1.0);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.8), rgba(var(--icon-dark), 0.8));
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.1);
}
.osui-slider::-moz-range-thumb:hover, .osui-slider::-moz-range-thumb:active {
    background-color: rgba(var(--shadow), 1.0);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 1.0), rgba(var(--icon-dark), 1.0));
}
.osui-slider::-moz-range-thumb:active { cursor: ew-resize; }

/********** ELEMENT: <textarea> Text Area **********/

.osui-text-area {
    color: rgba(var(--text), 1);
    background-color: rgba(var(--background-dark), 0.35);
    border: var(--pixel) solid rgba(var(--shadow), 1);
    border-radius: var(--radius-large);
    outline: none; /* for macos */
    padding: var(--pad-x-small) var(--pad-smallish);
    tab-size: 4;
    white-space: pre;
    word-wrap: normal;
    vertical-align: top;
}

.osui-text-area:hover {
    color: rgba(var(--highlight), 1);
    background-color: rgba(var(--button-dark), 0.5);
}

.osui-text-area:focus {
    color: rgba(var(--highlight), 1);
    background: rgba(var(--darklight), 1);
    border: var(--border-micro) solid rgb(var(--icon));
    outline: var(--border-micro) solid rgba(var(--shadow), 1.0);
    border-radius: 0;
}

.osui-text-area::-webkit-scrollbar {
    height: 0.4em;
    width: 0.4em;
    background: rgba(var(--shadow), 0.35);
    border-radius: 0.2em;
}

.osui-text-area::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(to left, rgba(var(--text), 1), rgba(var(--text-dark), 1));
    border-radius: 0.2em;
}

.osui-text-area::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(to bottom, rgba(var(--text), 1), rgba(var(--text-dark), 1));
    border-radius: 0.2em;
}

.osui-text-area::-webkit-scrollbar-corner {
    background: rgba(var(--background-dark), 1);
}

.osui-text-area.success {
    border-color: #8b8 !important;
}

.osui-text-area.fail {
    border-color: #f00 !important;
    background-color: rgba(255, 0, 0, 0.05);
}

/********** ELEMENT: <input> Text Box **********/

.osui-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}