daggerheart/styles/less/global/sheet.less

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

// Theme handling
.appTheme({
    background: @dark-blue-90;
    backdrop-filter: blur(8px);
}, {
    background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
});

body.game:is(.performance-low, .noblur) {
    .themed.theme-dark .application.daggerheart.sheet.dh-style,
    .themed.theme-dark.application.daggerheart.sheet.dh-style,
    &.theme-dark .application.daggerheart {
        background: @dark-blue;
    };
}

.application.sheet.dh-style {
    border-radius: 10px;

    // Window header styles
    .window-header {
        position: absolute;
        width: 100%;
        height: var(--header-height);
        background: transparent;
        border-bottom: none;
        justify-content: end;

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

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

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

    // Window content transitions
    .window-content {
        padding: 0;
        position: relative;
        min-height: -webkit-fill-available;
        transition: opacity 0.3s ease;
        padding-bottom: 20px;

        .tab {
            padding: 0 10px;

            &.changes {
                fieldset {
                    gap: 0;
                    padding-top: .5rem;

                    header {
                        width: 100%;
                        scrollbar-gutter: stable;
                        overflow: hidden auto;
                    }

                    header, ol {
                        grid-template-columns: 12fr 7fr 7fr 4fr 1fr;
                    }

                    // &.conditional {
                    //     header, ol {
                    //         grid-template-columns: 12fr 7fr 10fr 3fr;
                    //         scrollbar-gutter: unset;
                    //         overflow: unset;
                    //     }
                    // }
                }
            }
        }
    }

    // Minimized states
    &.minimized .window-content {
        opacity: 0;
        transition-duration: 0.1s;
    }

    &:not(.minimized) {
        .window-title,
        .window-icon {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .window-content {
            opacity: 1;
        }
    }
}