roll20-character-sheets/Ars_Magica_5th/source/elements/_elements.scss

@forward 'colors.scss';
@use 'colors.scss';

.ui-dialog .tab-content .charsheet {

    .flexrow {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    .flexcol {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    // modal window and button styling

    // mke the top-level .charsheet div the default root of position: absolute; elements
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    --color-kmodal-background: rgba(0, 0, 0, .9);

    .kmodal__container {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .kmodal__button {
        all: initial;
        display: flex;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

    .kmodal__checkbox {
        display: none;
    }

    .kmodal__outer {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: left;
        background: var(--color-kmodal-background);
        transition: opacity .25s ease;
        z-index: 999;
    }

    .kmodal__background {
        all: initial;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: pointer;
    }

    .kmodal__inner {
        position: absolute;
        top: -20%;
        right: 0;
        bottom: 0;
        left: 0;
        width: 90%;
        margin: auto;
        overflow: auto;
        background: #fff;
        border-radius: 5px;
        padding: 1em 2em;
        height: 90%;
        transition: opacity .25s ease;
    }


    .kmodal__close {
        position: absolute;
        right: 1em;
        top: 1em;
        width: 1.1em;
        height: 1.1em;
        cursor: pointer;
    }

    .kmodal__close:after,
    .kmodal__close:before {
        content: '';
        position: absolute;
        width: 2px;
        height: 1.5em;
        background: #ccc;
        display: block;
        transform: rotate(45deg);
        left: 50%;
        margin: -3px 0 0 -1px;
        top: 0;
    }

    .kmodal__close:hover:after,
    .kmodal__close:hover:before {
        background: #aaa;
    }

    .kmodal__close:before {
        transform: rotate(-45deg);
    }

    .kmodal__checkbox:not(:checked)+.kmodal__outer {
        display: none;
    }

    .kmodal__checkbox:checked+.kmodal__outer {
        opacity: 1;
        visibility: visible;
    }

    .kmodal__checkbox:checked+.kmodal__outer .kmodal__inner {
        top: 0;
    }
}