tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-13 18:15:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): use solid sidebar pills instead of accent gradients

Browse Source 
Active and nested nav rows are rounded-md with neutral selected fills
and a left accent rail. Remove purple/yellow gradient washes and update
the redesign notes to match.
This commit is contained in:
Andras Bacsai committed 2026-08-04 00:22:33 +02:00
1 parent 1bb54c0ca1
commit ff0590137d
3 files changed
+18 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/utilities.css
+5 -4
View File
@@ -205,7 +205,7 @@
}
@utility menu-item {
@apply relative flex gap-2.5 items-center h-8 px-2.5 w-full text-[13px] font-medium rounded-none truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
@apply relative flex gap-2.5 items-center h-8 px-2.5 w-full text-[13px] font-medium rounded-md truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
}
@utility menu-item-icon {
@apply shrink-0 size-[18px] opacity-90;
@@ -216,7 +216,8 @@
}
@utility menu-item-active {
@apply overflow-visible rounded-none bg-transparent text-black hover:bg-transparent dark:bg-transparent dark:text-fg dark:hover:bg-transparent;
/* Solid selected pill + accent rail (app.css ::before). No accent gradient. */
@apply overflow-hidden rounded-md bg-black/[0.05] text-black hover:bg-black/[0.05] dark:bg-white/[0.06] dark:text-fg dark:hover:bg-white/[0.06];
}
/* Subtle Title-Case section header */
@@ -226,10 +227,10 @@
/* Indented child rows in a collapsible nav group */
@utility menu-subitem {
@apply relative flex gap-2.5 items-center h-8 pl-3 pr-2.5 w-full text-[13px] font-medium rounded-none truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
@apply relative flex gap-2.5 items-center h-8 pl-3 pr-2.5 w-full text-[13px] font-medium rounded-md truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
}
@utility menu-subitem-active {
@apply rounded-none bg-transparent text-black hover:bg-transparent dark:bg-transparent dark:text-fg dark:hover:bg-transparent;
@apply overflow-hidden rounded-md bg-black/[0.05] text-black hover:bg-black/[0.05] dark:bg-white/[0.06] dark:text-fg dark:hover:bg-white/[0.06];
}
@utility sub-menu-wrapper {