/* * Admin panel sidebar. * Plain CSS registered with FilamentAsset (AppServiceProvider), no build step needed: * after editing, run `php artisan filament:assets`. * Filament's own styles live in @layer components, so these unlayered rules win without !important. * Only Filament's stable fi-* classes and its CSS variables are used, so it follows the panel colors. */ :root { --sidebar-border: var(--gray-200); --sidebar-hover: var(--gray-100); --sidebar-active-bg: color-mix(in oklab, var(--primary-500) 10%, transparent); --sidebar-active-bar: var(--primary-500); --sidebar-group-label: var(--gray-400); --sidebar-item-icon: var(--gray-400); --sidebar-item-text: var(--gray-700); /* Heroicon cog-6-tooth (outline), used as a mask so it takes the text color */ --sidebar-settings-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20fill%3D%27none%27%20viewBox%3D%270%200%2024%2024%27%20stroke-width%3D%271.5%27%20stroke%3D%27black%27%3E%3Cpath%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20d%3D%27M9.594%203.94c.09-.542.56-.94%201.11-.94h2.593c.55%200%201.02.398%201.11.94l.213%201.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257%201.075.124l1.217-.456a1.125%201.125%200%200%201%201.37.49l1.296%202.247a1.125%201.125%200%200%201-.26%201.431l-1.003.827c-.293.241-.438.613-.43.992a7.723%207.723%200%200%201%200%20.255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26%201.43l-1.298%202.247a1.125%201.125%200%200%201-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47%206.47%200%200%201-.22.128c-.331.183-.581.495-.644.869l-.213%201.281c-.09.543-.56.94-1.11.94h-2.594c-.55%200-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52%206.52%200%200%201-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125%201.125%200%200%201-1.369-.49l-1.297-2.247a1.125%201.125%200%200%201%20.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932%206.932%200%200%201%200-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125%201.125%200%200%201-.26-1.43l1.297-2.247a1.125%201.125%200%200%201%201.37-.491l1.216.456c.356.133.751.072%201.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z%27%2F%3E%3Cpath%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20d%3D%27M15%2012a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z%27%2F%3E%3C%2Fsvg%3E"); } .dark { --sidebar-border: color-mix(in oklab, white 8%, transparent); --sidebar-hover: color-mix(in oklab, white 5%, transparent); --sidebar-active-bg: color-mix(in oklab, var(--primary-400) 12%, transparent); --sidebar-active-bar: var(--primary-400); --sidebar-group-label: var(--gray-500); --sidebar-item-icon: var(--gray-500); --sidebar-item-text: var(--gray-200); } /* Frame */ .fi-sidebar { border-inline-end: 1px solid var(--sidebar-border); } /* Compact spacing and a nav that fills the height, so Configuración can sit at the bottom */ .fi-sidebar-nav { padding-inline: 0.75rem; padding-block: 1rem; row-gap: 0; } .fi-sidebar-nav-groups { flex: 1 0 auto; margin-inline: 0; row-gap: 1.25rem; } /* Group headings: small, uppercase, muted */ .fi-sidebar-group { row-gap: 0.25rem; } .fi-sidebar-group-btn { padding: 0 0.625rem 0.25rem; } .fi-sidebar-group-label { font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sidebar-group-label); } /* Items */ .fi-sidebar-group-items { row-gap: 0.125rem; } .fi-sidebar-item-btn { justify-content: flex-start; column-gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; } .fi-sidebar-item-btn > .fi-icon { width: 1.25rem; height: 1.25rem; } .fi-sidebar-item-label { font-size: 0.875rem; font-weight: 500; } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background-color: var(--sidebar-hover); } /* Active item: tinted background plus an accent bar on the sidebar edge */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover { background-color: var(--sidebar-active-bg); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { content: ""; position: absolute; inset-block: 0.375rem; inset-inline-start: -0.75rem; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background-color: var(--sidebar-active-bar); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { font-weight: 600; } /* Configuración: pinned to the bottom, separated from the day-to-day sections */ .fi-sidebar-group[data-group-label="Configuración"] { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--sidebar-border); } /* Its heading behaves like a regular menu entry (cog icon + label + chevron) that expands the settings */ .fi-sidebar-group[data-group-label="Configuración"] > .fi-sidebar-group-btn { column-gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; transition: background-color 75ms; } .fi-sidebar-group[data-group-label="Configuración"] > .fi-sidebar-group-btn:hover { background-color: var(--sidebar-hover); } .fi-sidebar-group[data-group-label="Configuración"] > .fi-sidebar-group-btn::before { content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; background-color: var(--sidebar-item-icon); -webkit-mask: var(--sidebar-settings-icon) center / contain no-repeat; mask: var(--sidebar-settings-icon) center / contain no-repeat; } .fi-sidebar-group[data-group-label="Configuración"] .fi-sidebar-group-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--sidebar-item-text); } /* Settings entries are indented under the heading so they read as its submenu */ .fi-sidebar-group[data-group-label="Configuración"] > .fi-sidebar-group-items { padding-inline-start: 0.75rem; } /* Keeps the active bar on the sidebar edge despite the submenu indent */ .fi-sidebar-group[data-group-label="Configuración"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { inset-inline-start: -1.5rem; }