daggerheart/styles/less/global/dialog.less

@import '../utils/colors.less';
@import '../utils/fonts.less';
@import '../utils/mixin.less';

.appTheme({
    &.dialog {
        background-image: url('../assets/parchments/dh-parchment-dark.png');
        background-repeat: no-repeat;
        background-position: center;
    }
}, {
    &.dialog {
        background-image: url('../assets/parchments/dh-parchment-light.png');
        background-repeat: no-repeat;
        background-position: center;
    }
});

.application.dialog.dh-style {
    border: none;

    .window-header {
        background: transparent;
        border-bottom: none;
        color: light-dark(@dark-blue, @beige);

        h1 {
            color: light-dark(@dark-blue, @beige);
            font-family: @font-body;
        }

        button {
            color: light-dark(@dark-blue, @beige);
            background: light-dark(transparent, @deep-black);
            border: 1px solid light-dark(@dark-blue, transparent);
            padding: 0;

            &:hover {
                border: 1px solid light-dark(@dark-blue, @golden);
                color: light-dark(@dark-blue, @golden);
            }
        }
    }

    .submit-btn {
        width: 100%;
        height: 38px;
    }

    .formula-label {
        font-family: @font-body;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;
        white-space: nowrap;
        color: light-dark(@dark, @beige);
    }

    .damage-formula {
        display: flex;
        justify-content: space-between;
        .damage-details {
            font-style: italic;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }

    &.two-big-buttons {
        .window-content {
            padding-top: 0;

            .form-footer {
                display: grid;
                grid-auto-columns: 1fr;
                grid-auto-flow: column;
            }

            button[type='submit'] {
                gap: 5px;
                flex-direction: row;
                font-family: @font-body;
                font-weight: bold;
                font-size: var(--font-size-14);
                height: 40px;
                white-space: nowrap;

                i {
                    font-size: var(--font-size-16);
                }
            }
        }
    }
}