guify/src/components/public/title.css

A simple GUI for inspecting and changing JS variables

@import "../variables.css";

.guify-title {
    box-sizing: border-box;
    width: 100%;
    display: inline-block;
    height: var(--size-component-height);
    vertical-align: top;
}

.guify-title-text {
    display: inline-block;
    height: var(--size-component-height);
    line-height: var(--size-component-height);
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--color-text-primary);
    color: var(--color-panel-background);
}

/* Disabled style */

.disabled .guify-title-text {
    background-color: var(--color-text-disabled);
}

/* Add a bit of top margin if immediately after another component */

.guify-component-container > .guify-title {
    margin-top: 0.5em;
}