@scidian/osui/css/data.css

Lightweight JavaScript UI library.

/********** Property List **********/

.osui-property-list {
    width: 100%;
}

/* --- HEADER --- */

.osui-property-header-title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - 0.3em);
    min-height: calc(var(--row-height) + (var(--border-micro) * 2));
    overflow: hidden;

    cursor: default;
    color: rgba(var(--text-light), 1.0);
    background-color: rgba(var(--icon), 0.35);

    box-shadow: inset 0 0 var(--pad-small) 0 rgba(var(--midlight), 0.5); /* inner-glow */
    text-shadow: var(--minus) var(--pixel) rgba(var(--shadow), 0.5);

    border: solid var(--border-small) rgba(var(--shadow), 0.65);
    border-radius: var(--radius-large);
    padding: var(--pad-micro) var(--pad-medium); /* vertical horizontal */
    margin-left: var(--pad-x-small);
    margin-top: var(--pad-x-small);
}

.osui-property-header-icon > * {
    filter: var(--drop-shadow);
}

.osui-property-header-icon {
    flex-grow: 0;
    flex-shrink: 0;

    position: relative;
    display: flex;
    margin: 0.15em;
    height: calc(var(--arrow-size) * 3.5);
    min-height: calc(var(--arrow-size) * 3.5);
    width: calc(var(--arrow-size) * 3.5);
    min-width: calc(var(--arrow-size) * 3.5);
}

.osui-property-header-text {
    flex-grow: 1;
    flex-shrink: 2;
    color: rgba(var(--text-light), 1.0);
    font-size: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.5em;
}

/* --- ROW --- */

.osui-property-row {
    position: relative;
    min-height: var(--row-height);
}

.osui-property-row:hover .osui-property-left {
    color: rgba(var(--highlight), 0.8);
}

.osui-property-row:hover .osui-property-left .osui-image {
    filter: brightness(250%);
}

.osui-property-space {
    flex: 0 0 auto;
    min-width: 0.2em;
}

.osui-property-left {
    --left-property-width: 50%;

    width: var(--left-property-width) !important;

    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding-left: var(--pad-medium);
    height: 100%;
    min-height: var(--row-height);
    text-align: left;
    text-transform: capitalize;
}
.osui-left-tab-spacing {
    padding-left: 1em;
}

.osui-property-right {
    --right-property-width: 50%;

    width: calc(var(--right-property-width) - var(--pad-small)) !important;

    flex-shrink: 0;
    margin: auto;
    margin-right: var(--pad-small) !important;
    justify-content: left;
    text-align: left;
    height: 100%;
    min-height: var(--row-height);
}

.osui-property-full {
    margin: auto;
    margin-right: var(--pad-small) !important;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: var(--row-height);
    width: calc(100% - var(--pad-small)) !important;
}

.osui-property-full > *:not(.osui-property-space) {
    flex: 1 1 auto;
    min-height: var(--row-height);
    min-width: 0;
    margin: auto;
    height: 100%;
}

/* --- RIGHT SIDE OF ROW --- */

.osui-property-right .osui-number:not(.osui-property-tiny-row),
.osui-property-right > *:not(.osui-property-tiny-row):not(.osui-property-button):not(.osui-property-space) {
    flex: 1 1 auto;
    min-height: var(--row-height);
    min-width: 0;
    margin: auto;
    text-align: left;
    height: 100%;
}

.osui-property-right > .osui-button:not(.osui-property-tiny-row):not(.osui-property-button):not(.osui-menu-button) {
    text-align: center;
}

/* Right side of Property Box flex fill when using multiple controls */
.osui-property-tiny-row {
    --min-width: 2em;

    flex: 2 2 var(--min-width);
    min-height: var(--row-height);
    min-width: var(--min-width);
    height: 100%;
}

/* --- BUTTON --- */
/* Button appearing in right column of Property List, fixed size */
.osui-property-button {
    position: relative;
    min-height: var(--row-height);
    min-width: 2.1em;
}

/* Button appearing in right column of Property List, flex box */
.osui-property-button-flex {
    flex: 1 1 auto;
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0 0.05em;
    padding: 0 0.1em;
    height: var(--row-height);
    white-space: nowrap;
}

/********** Tree List **********/

.osui-tree-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    overflow: hidden;
    margin: calc(var(--pad-small) * 1.3);

    color: rgba(var(--text), 1.0);
    background-color: rgba(var(--background-dark), 0.25);
    border: 0;
    border-radius: var(--radius-small);
    outline: solid var(--border-small) rgba(var(--shadow), 0.35);
    box-shadow: inset 0 0 var(--pad-small) 0 rgba(var(--midlight), 0.5); /* inner-glow */

    cursor: default;
}

/********** Tree List Option **********/

.osui-tree-list .osui-option {
    position: relative;
    text-align: left;
    border: var(--border-small) solid transparent;
    padding: var(--pad-x-small);
    width: 100%;
    white-space: nowrap;
}
.osui-tree-list .osui-option:hover:not(.osui-no-select) {
    color: rgba(var(--text-light), 1.0);
    background-color: rgba(var(--background-dark), 0.2);
}

.osui-tree-list .osui-option.osui-active:not(.osui-no-select) {
    color: rgba(var(--highlight), 1.0);
    background-color: rgba(var(--icon-light), 0.4);
    border-top: var(--border-small) solid rgba(var(--shadow), 0.25);
    border-bottom: var(--border-small) solid rgba(var(--shadow), 0.25);
    border-radius: var(--radius-small);
}
.osui-tree-list .osui-option.osui-active-top:not(.osui-no-select) {
    border-bottom: var(--border-small) solid transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.osui-tree-list .osui-option.osui-active-bottom:not(.osui-no-select) {
    border-top: var(--border-small) solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.osui-tree-list .osui-option.osui-drag:not(.osui-active) {
    border: var(--border-small) solid rgba(var(--icon-light), 1.0);
    border-radius: var(--radius-small);
}
.osui-tree-list .osui-option.osui-drag-top:not(.osui-active) {
    border-top: var(--border-small) solid rgba(var(--icon-light), 1.0);
}
.osui-tree-list .osui-option.osui-drag-bottom:not(.osui-active) {
    border-bottom: var(--border-small) solid rgba(var(--icon-light), 1.0);
}

/********** Tree List Opener **********/

.osui-tree-list .osui-opener {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.25em;

    vertical-align: top;
    text-align: center;
}

.osui-tree-list .osui-opener.osui-is-open:after {
    content: '-';
}

.osui-tree-list .osui-opener.osui-is-closed:after {
    content: '+';
}

/********** Drag Image **********/

.osui-drag-image {
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: var(--radius-small);
    z-index: 100000; /* Drag Clone */
}