sakura/resources/assets/less/yuuno/bem/dialogue.less

.dialogues {
    opacity: 0;
}

.dialogues:not(:empty) {
    background: fade(#000, 50%);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483648; // fuck it
    opacity: 1;
    transition: opacity .2s;
}

.dialogue {
    font-family: @cute-font;
    display: inline-block;
    background: #c2affe;
    box-shadow: 0 0 5px #9475B2;
    border: 1px solid #9475B2;
    padding: 4px;
    min-width: 250px;
    border-radius: 2px;

    &__buttons {
        text-align: right;
        border-top: 1px solid #9475b2;
        margin-top: 2px;
        padding-top: 2px;
    }

    &__button {
        font-family: @cute-font;
        background: #b19eed;
        border: 1px solid #9475B2;
        padding: 2px 4px;
        cursor: pointer;
        margin-left: 2px;
        min-width: 50px;
        border-radius: 3px;
        transition: background .2s;

        &:hover {
            background: #c2affe;
        }

        &:active {
            background: #a08ddc;
        }

        &:last-child {
            font-weight: 700;
            min-width: 70px;
        }
    }

    &__dropdown {
        width: 100%;
        box-sizing: border-box;
        background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF;
        border: 1px solid #CCC;
        box-shadow: inset #DDD 0 0 5px;
        padding: 3px 4px;
        vertical-align: middle;

        &-container {
            border-top: 1px solid #9475b2;
            margin-top: 2px;
            padding-top: 2px;
        }
    }

    &__title {
        margin: -4px;
        background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE;
        margin-bottom: 4px;
        padding: 2px 4px;
    }

    &__text {
        white-space: pre;
        padding: 3px 4px;
    }
}