@scidian/osui/css/interactive.css

Lightweight JavaScript UI library.

/***** Panel Button *****/

.osui-panel-button {
    pointer-events: all;
    border: var(--border-small) solid rgb(var(--icon));
    outline: solid var(--border-small) rgba(var(--shadow), 0.2);
    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);
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    filter: none;
    z-index: 101; /* Panel Button */
}

.osui-panel-button:hover {
    opacity: 1.0;
    filter: brightness(125%);
    transition: opacity 0.1s;
}

.osui-panel-button:active {
    box-shadow: inset 0 var(--pad-micro) var(--pad-x-small) 0 rgba(var(--shadow), 0.75); /* sunk-in-shadow */
    filter: brightness(100%);
}

/***** Corner Buttons *****/

.osui-corner-button {
    cursor: pointer;
    border-radius: 50%;
    outline: none;
    opacity: 0;
    overflow: visible;
    transition: background-color 0.1s, opacity 0.25s ease-in-out;
}

/* Enlarge button click area */
.osui-corner-button:before {
    position: absolute;
    content: '';
    top: -0.25em;
    right: -0.25em;
    left: -0.25em;
    bottom: -0.25em;
    outline: none;
}

.osui-corner-button.osui-item-shown {
    opacity: 1.0;
    filter: brightness(100%);
    transition: opacity 0.1s;
}

.osui-corner-button.osui-item-hidden {
    opacity: 0;
    transition: opacity 0.1s;
}

.osui-corner-image {
    outline: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.osui-corner-button:hover .osui-corner-image {
    opacity: 1.0;
}

/***** Resizeable *****/

.osui-resizer {
    position: absolute;
    pointer-events: all;
    opacity: 0.0;                           /* NOTE: Change to 1.0 to see 'Resizers' */
    z-index: 99; /* Resizer */
}

.osui-resizer-left {
    background-color: rgb(255, 0, 0);
    left: 0;
    top: 0;
    width: var(--resize-size);
    height: 100%;
    margin-top: 0;
    cursor: col-resize;
}

.osui-resizer-top-left {
    background-color: rgb(255, 255, 0);
    top: 0;
    left: 0;
    width: var(--resize-size);
    height: var(--resize-size);
    cursor: nwse-resize;
    z-index: 100; /* Resizer Corner */
}

.osui-resizer-top {
    background-color: rgb(0, 255, 0);
    top: 0;
    left: 0;
    width: 100%;
    height: var(--resize-size);
    cursor: row-resize;
}

.osui-resizer-top-right {
    background-color: rgb(0, 255, 255);
    top: 0;
    left: calc(100% - (var(--resize-size)));
    width: var(--resize-size);
    height: var(--resize-size);
    cursor: nesw-resize;
    z-index: 100; /* Resizer Corner */
}

.osui-resizer-right {
    background-color: rgb(0, 0, 255);
    top: 0;
    left: calc(100% - (var(--resize-size)));
    width: var(--resize-size);
    height: 100%;
    cursor: col-resize;
}

.osui-resizer-bottom-right {
    background-color: rgb(255, 0, 255);
    left: calc(100% - (var(--resize-size)));
    width: var(--resize-size);
    height: var(--resize-size);
    top: calc(100% - (var(--resize-size)));
    cursor: nwse-resize;
    z-index: 100; /* Resizer Corner */
}

.osui-resizer-bottom {
    background-color: rgb(255, 255, 255);
    left: 0;
    width: 100%;
    height: var(--resize-size);
    top: calc(100% - (var(--resize-size)));
    cursor: row-resize;
}

.osui-resizer-bottom-left {
    background-color: rgb(0, 0, 0);
    left: 0;
    width: var(--resize-size);
    height: var(--resize-size);
    top: calc(100% - (var(--resize-size)));
    cursor: nesw-resize;
    z-index: 100; /* Resizer Corner */
}