guify/src/components/public/interval.css

A simple GUI for inspecting and changing JS variables

@import "../variables.css";

:root {
    --interval-track-color: var(--color-component-background);
    --interval-thumb-color: var(--color-component-foreground);
    --interval-thumb-highlight: var(--color-component-active);

    --interval-track-color-disabled: var(--color-component-background-disabled);
    --interval-thumb-color-disabled: var(--color-text-disabled);
}

.guify-interval {
    -webkit-appearance: none;
    position: absolute;
    height: var(--size-component-height);
    margin: 0px 0;
    width: 33%;
    left: 54.5%;
    background-color: var(--interval-track-color);
    cursor: ew-resize;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.guify-interval-handle {
    background-color: var(--interval-thumb-color);
    position: absolute;
    height: var(--size-component-height);
    min-width: 1px;
}
.guify-interval-handle:focus {
    background: var(--interval-thumb-highlight);
}

.disabled .guify-interval {
    pointer-events: none;
    background-color: var(--interval-track-color-disabled);
}

.disabled .guify-interval .guify-interval-handle {
    background: var(--interval-thumb-color-disabled);
}