Romulo and Saade Custom Theme

gistfile1.txt

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

@config 'tailwind.config.js';

/** Romulo Theme */
/*
.fi-sidebar {
    @apply bg-white dark:bg-gray-900 border-r dark:border-white/10 shadow-sm p-0 !important;
}

.fi-sidebar-header {
    @apply bg-transparent ring-0 shadow-none !important;
}

.fi-sidebar-item-active a {
    @apply bg-primary-600 dark:bg-primary-950/70 hover:bg-primary-600 dark:hover:bg-gray-950/70 text-white dark:text-white;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-white dark:text-white;
}

.fi-sidebar-item-active svg {
    @apply text-white dark:text-white;
}

.fi-sidebar-item-active .fi-sidebar-item-grouped-border {
    @apply [&>*:last-child]:bg-white;
}

.fi-sidebar-item:not(.fi-sidebar-item-active) a {
    @apply dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 dark:hover:text-white;
}

.fi-sidebar-item:not(.fi-sidebar-item-active):hover a svg {
    @apply dark:text-white;
}*/

.fi-modal-slide-over-window {
    @apply mr-4 mt-6 rounded-xl overflow-hidden;
}

.fi-modal-slide-over-window .fi-modal-content {
    @apply overflow-auto;
}

.fi-modal-slide-over-window .fi-modal-content::-webkit-scrollbar {
    @apply h-2.5 w-2.5;
}

.fi-modal-slide-over-window .fi-modal-content::-webkit-scrollbar-track {
    @apply bg-transparent;
}

.fi-modal-slide-over-window .fi-modal-content::-webkit-scrollbar-thumb {
    @apply bg-transparent;
}

.fi-modal-slide-over-window .fi-modal-content:hover::-webkit-scrollbar-thumb {
    @apply rounded-full;
}

/* Light Theme */
.fi-modal-slide-over-window .fi-modal-content:hover::-webkit-scrollbar-thumb {
    @apply bg-primary-600;
}

.fi-modal-slide-over-window
.fi-modal-content:hover::-webkit-scrollbar-thumb:hover {
    @apply bg-primary-800;
}

/* Dark Theme */
.dark
.fi-modal-slide-over-window
.fi-modal-content:hover::-webkit-scrollbar-thumb {
    @apply bg-gray-600;
}

.dark
.fi-modal-slide-over-window
.fi-modal-content:hover::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

.fi-modal-close-overlay {
    @apply backdrop-blur-sm;
}

.growmax-theme .fi-dropdown-panel {
    @apply !max-w-[16rem];
}
/*
.fi-user-menu {
    @apply hidden;
}

.fi-global-search-results-ctn {
    @apply !w-[calc(100%+2rem)] !start-0;
}

.fi-topbar div:nth-child(3) > .fi-global-search {
    @apply hidden;
}
*/

.fi-sidebar-nav::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    border-radius: 999px;
}

/* Light Theme */
.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(228, 238, 241, 0.69);
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb:hover {
    background: #e4ebec;
}

/* Dark Theme */
.dark .fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    @apply bg-gray-900;
}

.dark .fi-sidebar-nav:hover::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-800;
}

.fi-logo {
    font-size: x-large;
}

/** Saade Theme **/
/*
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;
                }
            }
        }
    }
}
 */