Filament Custom Theme

theme.css

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

html:not(:has(.fi-topbar-with-navigation)) {
    .fi-sidebar,
    .fi-sidebar-header,
    aside {
        @apply !ring-0 !shadow-none;
    }

    .fi-topbar {
        @apply relative;

        nav {
            @apply !shadow-none !ring-0;

            &::-webkit-scrollbar {
                @apply w-0;
            }
        }
    }

    &:not(.dark) {
        .fi-sidebar {
            @apply !bg-white !ring-1 !ring-gray-950/5;
        }

        .fi-sidebar-nav {
            @apply !bg-white;
        }

        .fi-topbar nav {
            @apply !bg-transparent;
        }

        .fi-modal-window {
            @apply !bg-gray-50;
        }
    }

    &.dark {
        .fi-sidebar {
            @apply !bg-gray-900 !ring-white/10;
        }

        .fi-topbar nav {
            @apply !bg-gray-950;
        }

        .fi-modal-window {
            @apply !bg-gray-950;
        }
    }
}

html {
    &:not(.dark) {
        body {
            @apply !bg-gray-50;
        }

        .filepond--image-preview,
        .filepond--item-panel {
            @apply bg-gray-100;
        }
    }

    &.dark {
        .filepond--image-preview,
        .filepond--item-panel {
            @apply bg-gray-800;
        }
    }
}

[x-sortable-handle] button {
    @apply cursor-grab active:cursor-grabbing;
}

.fi-section {
    .fi-section-content-ctn {
        @apply !border-none;
    }
}

/* Quando usar um component Tabs dentro de um Builder, o Builder fica compacto */
.fi-fo-builder {
    &[tabs] {
        .fi-fo-builder-item {
            .fi-fo-builder-item-content {
                @apply !p-0;

                .fi-fo-tabs {
                    @apply !ring-0 !rounded-t-none;
                }
            }
        }
    }
}