Skip to content

Instantly share code, notes, and snippets.

@joaopaulolndev

joaopaulolndev/gist:1d87a2c966cb57e73127a25a76640512

Created April 8, 2025 20:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joaopaulolndev/1d87a2c966cb57e73127a25a76640512 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joaopaulolndev/1d87a2c966cb57e73127a25a76640512 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joaopaulolndev created this gist Apr 8, 2025.
    259 changes: 259 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,259 @@
    @import '/vendor/filament/filament/resources/css/theme.css';

    @config 'tailwind.config.js';

    body {
    /* @apply !bg-primary-50 dark:!bg-gray-950;*/
    }

    .fi-sidebar {
    /* @apply bg-white border-r shadow-sm p-4 !important; */
    @apply p-4 !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-primary-950/70 text-white dark:text-white;
    /*@apply bg-[#D9D9D9] dark:bg-gray-800/70 hover:bg-[#CCCCCC] dark:hover:bg-gray-800/70 dark:text-white;*/
    }

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

    .fi-sidebar-item-active svg {
    @apply text-white dark:text-white;
    /*@apply text-gray-800 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-primary-100 dark:hover:bg-primary-800/50 dark:hover:text-white;
    }

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

    .fi-main-ctn {
    /* @apply !h-screen; */
    @apply md:mr-6 ml-6;
    }

    .fi-topbar {
    @apply relative;
    }

    .fi-topbar nav {
    /*@apply bg-primary-50 dark:bg-gray-950 ring-0 shadow-none;*/
    }

    .fi-main {
    @apply bg-white dark:bg-gray-800 rounded-3xl shadow !overflow-y-auto flex-grow;
    }

    /*
    .fi-fo-tabs {
    @apply ring-2 ring-primary-50 dark:!ring-gray-950 border border-primary-100 dark:border-gray-900 shadow-none;
    }
    */

    /** add to reduce space between sidebar and main content */
    .fi-main-ctn {
    margin-left: 0 !important;
    }

    /** Saade Theme **/
    html:not(:has(.fi-topbar-with-navigation)) {
    .fi-topbar {
    @apply relative;

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

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

    &:not(.dark) {
    .fi-topbar nav {
    @apply !bg-transparent;
    }

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

    &.dark {
    .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;
    }
    }
    }
    }
    }

    /** Hide User Menu and Global Search * /
    .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;
    }
    */
    /** End Hide User Menu and Global Search */

    /* login page */
    .fi-simple-main {
    @apply m-0 p-0 max-w-full shadow-none !important;
    }


    /* Minimalist Tabs */
    .fi-fo-tabs.fi-contained, .fi-in-tabs.fi-contained {
    @apply bg-transparent dark:bg-transparent rounded-none shadow-none ring-0;

    .fi-tabs {
    @apply px-0 gap-x-3 shadow-[inset_0_-1px_theme(colors.gray.200)] dark:shadow-[inset_0_-1px_theme(colors.gray.700)];

    &.fi-contained {
    @apply border-b-0 px-0 py-0;
    }
    }

    .fi-tabs-item {
    @apply pb-4 rounded-none transition ease-in-out duration-300;

    &.fi-active {
    box-shadow: inset 0px -2px 0px 0px theme('colors.primary.600');
    @apply dark:bg-transparent bg-transparent;
    }
    }

    .fi-fo-tabs-tab:not(.invisible), .fi-in-tabs-tab:not(.invisible) {
    @apply bg-white rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 mt-6;
    }
    }

    .fi-fo-tabs:not(.fi-contained), .fi-in-tabs:not(.is-contained), .fi-resource-relation-managers, div:has(> .fi-ta):has(> .fi-tabs) {
    .fi-tabs {
    @apply px-0 gap-x-3 shadow-[inset_0_-1px_theme(colors.gray.200)] dark:shadow-[inset_0_-1px_theme(colors.gray.700)] w-full bg-transparent rounded-none ring-0 border-b-0 px-0 py-0;
    }

    .fi-tabs-item {
    @apply pb-4 rounded-none transition ease-in-out duration-300 hover:bg-transparent;

    &.fi-active {
    box-shadow: inset 0px -2px 0px 0px theme('colors.primary.600');
    @apply dark:bg-transparent bg-transparent;
    }
    }
    }

    /* remove padding from topbar */
    .fi-topbar > nav {
    padding-right: 10px !important;
    }

    .left-shadow {
    box-shadow: -30px 0 15px -15px #00000040;
    }

    /** fix global search bug */
    .bg-black {
    --tw-bg-opacity: 0.6 !important;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    }

    /** hide collapse custom section */
    .custom-section .fi-section-content-ctn {
    @apply hidden;
    }

    /** Custom Textarea Counter */

    .textarea-counter {
    @apply flex flex-col relative w-full;
    }

    .textarea-counter .counter {
    @apply absolute px-2 py-1 text-xs rounded right-2 bottom-2 w-[36px] text-right font-bold;
    }

    .textarea-counter .label {
    @apply text-sm font-medium leading-6 text-gray-950 dark:text-white py-2;
    }

    .textarea-counter .danger {
    @apply text-danger-400;
    }

    .textarea-counter .success{
    @apply text-primary-400;
    }

    .fi-btn-color-primary {
    /*@apply bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500;*/
    }