starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refresh the dark dashboard around the coolLabs purple brand.

Browse Source 
Dark mode keeps a black canvas, paints cards at #121212, and tints the sidebar purple-black. Active navigation, secondary buttons, and the view switcher use brand purple; warning yellow stays for real warnings.

Co-authored-by: Andras Bacsai <andrasbacsai@users.noreply.github.com>
This commit is contained in:
Cursor Agent
2026-10-22 07:13:38 +00:00
co-authored by Andras Bacsai
parent 91ea7d851e
commit 8df39bc637
19 changed files with 432 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+270 -23
View File
@@ -39,6 +39,13 @@
--color-coollabs-100: oklch(52.34% 0.287 289.16);
--color-coollabs-200: oklch(43.76% 0.2369 289.82);
--color-coollabs-300: oklch(38.04% 0.2031 290.47);
/* coolLabs brand purple. Primary actions, focus, and active navigation
use these in both themes. Warning yellow is not an accent. */
--color-brand: #6b16ed;
--color-brand-hover: #7317ff;
--color-brand-press: #5a12c7;
--color-brand-depth: #4a0fa3;
--color-brand-light: #a391ff;
--color-coolgray-100: oklch(20.9% 0 0);
--color-coolgray-200: oklch(24.35% 0 0);
--color-coolgray-300: oklch(26.03% 0 0);
@@ -102,7 +109,33 @@
}
.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled) {
--button-depth-color: rgb(255 255 255 / 0.08);
--button-depth-color: rgb(107 22 237 / 0.35);
background-color: rgb(107 22 237 / 0.14);
border-color: rgb(163 145 255 / 0.24);
color: #ece8ff;
}
.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):hover {
background-color: rgb(107 22 237 / 0.18);
border-color: rgb(163 145 255 / 0.34);
}
.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled) svg {
color: var(--color-brand-light);
opacity: 1;
}
.dark .button.button-highlighted:not(:disabled),
.dark .button[isHighlighted]:not(:disabled) {
background: var(--color-brand);
border-color: transparent;
color: #fff;
--button-depth-color: var(--color-brand-depth);
}
.dark .button.button-highlighted:not(:disabled):hover,
.dark .button[isHighlighted]:not(:disabled):hover {
background: var(--color-brand-hover);
}
.button.button-error:not(:disabled) {
@@ -1261,7 +1294,13 @@ html:not(.dark) .application-console-shell[data-console-theme="system"] .termina
}
.dark {
--color-accent: oklch(88.13% 0.1507 91.7);
/* Purple is the accent in dark mode too. Warning yellow stays on
--color-warning for real warnings only (update available, attention). */
--color-accent: var(--color-brand);
/* Cards sit one step above the #0a0a0a canvas. The top bar uses the canvas,
not this color. The sidebar uses --color-sidebar. */
--color-card: #121212;
--color-sidebar: #120e1a;
/* Dark surface ladder in hex (sRGB), not oklch: oklch lightness compresses
to near-black below ~15%, so oklch(15%) rendered as sRGB 11 and cards
could not lift off the content canvas (sRGB 10). These give clear,
@@ -1842,25 +1881,28 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
background: linear-gradient(var(--well-bg), var(--well-bg)), var(--card-underlay);
}
/* Dark mode: top-level cards use the topbar color (see DESIGN.md). */
/* Dark mode: top-level cards are #121212, a step above the canvas. The top bar
matches the canvas instead (see the brand shell below). */
.dark :is(.application-settings-section, .empty-state):not(:is(.application-settings-section, .application-settings-section-body) *) {
background: var(--color-panel);
background: var(--color-card);
box-shadow: none;
}
/* Dark mode: collection tiles, pagination bars, and tables match the cards.
A tile is a card without a well, so it takes the topbar color. A table (a
shell with a header row) takes the topbar color on the header row and the
box content (well) color on the rows. */
A tile is a card without a well. A table (a shell with a header row) takes
the card color on the header row and a darker mix on the rows. */
.dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"] {
background: var(--color-panel);
background-color: var(--color-card) !important;
border-color: rgb(255 255 255 / 0.08) !important;
box-shadow: none;
}
.dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"]:has(> [class~="border-b"]:first-child) {
background: color-mix(in srgb, var(--color-panel) 66%, black);
background: color-mix(in srgb, var(--color-card) 66%, black) !important;
}
.dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"] > [class~="border-b"]:first-child {
background: var(--color-panel);
background: var(--color-card) !important;
}
/* Brief accent ring when a settings nav sub-item scrolls a section into view.
@@ -5552,10 +5594,17 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-a
--button-depth-color: color-mix(in oklab, var(--color-coollabs) 45%, transparent) !important;
}
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon {
color: var(--color-warning);
border-color: color-mix(in oklab, var(--color-warning) 40%, transparent) !important;
--button-depth-color: color-mix(in oklab, var(--color-warning) 35%, transparent) !important;
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon:not(.text-error) {
color: #fff;
border-color: #8a4dff !important;
background: linear-gradient(180deg, var(--color-brand-hover) 0%, var(--color-brand-press) 100%) !important;
--button-depth-color: var(--color-brand-depth) !important;
box-shadow: 0 2px 0 var(--color-brand-depth), 0 0 16px rgb(115 23 255 / 0.50) !important;
}
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active):active .menu-item-icon:not(.text-error) {
transform: translateY(2px);
box-shadow: none !important;
}
/* Danger Zone icons (<x-reicon name="danger">) stay red, also when active. */
@@ -5644,9 +5693,11 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.si
box-shadow: none;
}
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle) .menu-item-icon {
border-color: oklch(100% 0 0 / 0.09);
background: oklch(100% 0 0 / 0.04);
html.dark:where(:not([data-nav-items="flat"])) .app-sidebar :is(.menu-item, .menu-subitem):not(.sidebar-toggle):not(.menu-search):not(.nav-admin):not(.menu-item-active):not(.menu-subitem-active) .menu-item-icon {
border-color: rgb(163 145 255 / 0.13);
background: rgb(107 22 237 / 0.07);
color: #b9adff;
--button-depth-color: rgb(255 255 255 / 0.05);
}
html:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):hover .menu-item-icon,
@@ -5655,10 +5706,17 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-a
background: #fff;
}
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):hover .menu-item-icon,
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon {
border-color: oklch(100% 0 0 / 0.18);
background: oklch(100% 0 0 / 0.08);
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):not(.menu-item-active):not(.menu-subitem-active):hover .menu-item-icon {
border-color: rgb(255 255 255 / 0.14);
background: rgb(255 255 255 / 0.06);
color: #fff;
}
/* Admin stays a neutral tile unless it is the current page. */
html.dark .app-sidebar .nav-admin:not(.menu-item-active) .menu-item-icon {
color: oklch(72% 0 0);
background: rgb(255 255 255 / 0.03);
border-color: rgb(255 255 255 / 0.07);
}
/* Search keeps its original input look while the sidebar is expanded (always on
@@ -5948,6 +6006,188 @@ html.dark .canvas-zoom-max {
}
}
/* Brand shell (dark): black canvas and top bar, purple-black sidebar, scroll hairline.
Light mode keeps the neutral shell. Floating navigation keeps its own frame. */
html.dark .app-sidebar nav.sidebar-nav,
html.dark .mobile-sidebar-sheet [role="dialog"] {
background-color: var(--color-sidebar);
background-image: linear-gradient(180deg, rgb(107 22 237 / 0.09), transparent 520px);
border-right-color: rgb(163 145 255 / 0.10);
--color-nav-text: oklch(80% 0.02 300);
--color-nav-muted: oklch(58% 0.04 300);
}
html.dark .app-topbar-brand {
background-color: var(--color-sidebar);
background-image: radial-gradient(140% 260% at 0% 0%, rgb(107 22 237 / 0.12), transparent 70%);
border-right-color: rgb(163 145 255 / 0.10);
}
html.dark .app-sidebar .sidebar-footer {
background-color: transparent;
}
html.dark .app-sidebar .menu-search {
background-color: rgb(163 145 255 / 0.06) !important;
box-shadow: inset 0 0 0 1px rgb(163 145 255 / 0.10) !important;
}
html.dark .app-sidebar .menu-search:hover {
background-color: rgb(163 145 255 / 0.10) !important;
}
html.dark .app-sidebar .menu-search kbd {
border-color: rgb(163 145 255 / 0.18) !important;
}
html.dark .app-sidebar nav:not(.sidebar-collapsed) .nav-section {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(163 145 255 / 0.55);
opacity: 1;
}
html.dark .app-sidebar .nav-chevron {
transition: opacity 120ms ease;
}
html.dark .app-sidebar .menu-item:not(:hover):not(:focus-visible):not(.menu-item-active) > .nav-chevron {
opacity: 0;
}
html.dark:not([data-nav-style="floating"]) .app-topbar {
background-color: #0a0a0a;
backdrop-filter: none;
transition: background-color 180ms ease;
}
html.dark:not([data-nav-style="floating"]) .app-topbar > div:not(.app-topbar-brand) {
border-bottom-color: transparent;
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar {
background-color: rgb(10 10 10 / 0.72);
backdrop-filter: blur(12px) saturate(140%);
}
html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar > .app-topbar-brand {
background-color: var(--color-sidebar);
}
html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar > div:not(.app-topbar-brand) {
border-bottom-color: rgb(163 145 255 / 0.12);
box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.95), 0 1px 0 rgb(107 22 237 / 0.06);
}
html.dark .view-toggle {
gap: 2px;
padding: 2px;
background-color: rgb(107 22 237 / 0.06);
border-color: rgb(163 145 255 / 0.16);
}
html.dark .view-toggle > :is(a, button) {
color: oklch(80% 0.02 300);
}
html.dark .view-toggle > :is(a, button) svg {
color: var(--color-brand-light);
}
html.dark .view-toggle > :is(a, button):not(.is-selected):hover {
background-color: rgb(107 22 237 / 0.14);
color: #fff;
}
html.dark .view-toggle > .is-selected {
background: linear-gradient(180deg, var(--color-brand-hover), var(--color-brand-press));
color: #fff;
box-shadow: 0 1px 0 var(--color-brand-depth), inset 0 0 0 1px #8a4dff;
}
html.dark .view-toggle > .is-selected svg {
color: #fff;
}
html.dark .view-toggle .bg-coollabs {
background-color: rgb(163 145 255 / 0.18);
color: #d9d0ff;
}
html.dark .resource-glyph {
border-color: rgb(163 145 255 / 0.20);
background: rgb(107 22 237 / 0.10);
color: var(--color-brand-light);
}
html.dark .card-icon-button {
color: var(--color-brand-light);
}
html.dark .card-icon-button:hover {
background-color: rgb(107 22 237 / 0.16);
color: #fff;
}
html.dark .app-main :is(article.group, a.group).rounded-xl {
background-color: var(--color-card) !important;
border-color: rgb(255 255 255 / 0.08) !important;
box-shadow: none;
}
html.dark .app-main :is(article.group, a.group).rounded-xl:hover {
border-color: rgb(163 145 255 / 0.30) !important;
box-shadow: none;
}
.project-card-stats {
color: oklch(40% 0 0);
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-card-stats b {
color: oklch(20% 0 0);
font-weight: 600;
}
.project-card-stats-dot {
margin-inline: 5px;
color: oklch(70% 0 0);
}
html.dark .project-card-stats {
color: oklch(72% 0 0);
}
html.dark .project-card-stats b {
color: #f2f2f2;
}
html.dark .project-card-stats-dot {
color: oklch(45% 0 0);
}
.dark .application-settings-form :is(.input, select, textarea):focus,
.dark .application-settings-form :is(.input, select, textarea):focus-visible,
.dark .application-settings-workspace :is(.input, select, textarea):focus,
.dark .application-settings-workspace :is(.input, select, textarea):focus-visible {
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgb(107 22 237 / 0.25) !important;
}
/* One page of results: the bar is noise. !important beats the flex utility and Alpine x-show. */
.pager[hidden] {
display: none !important;
}
/* Dark mode (both navigation styles): the floating dotted backdrop shows through
see-through surfaces (dark:bg-white/[x] with or without `!`, .button, …). Give the
outermost ones the same color as an opaque mix with the app background, like the
@@ -5979,7 +6219,8 @@ html.dark .canvas-zoom-max {
html.dark .app-main [class*="dark:bg-white/[0.09]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 9%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:bg-white/[0.14]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 14%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:bg-white/[0.1]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
html.dark .app-main :is(.button, .view-toggle):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 6%, var(--color-app)) !important; }
html.dark .app-main .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: rgb(107 22 237 / 0.14) !important; border-color: rgb(163 145 255 / 0.24) !important; color: #ece8ff !important; }
html.dark .app-main .view-toggle:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: rgb(107 22 237 / 0.06) !important; border-color: rgb(163 145 255 / 0.16) !important; }
html.dark .app-main [class*="dark:hover:bg-white/10"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:hover:bg-white/[0.025]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 2.5%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:hover:bg-white/[0.035]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 3.5%, var(--color-app)) !important; }
@@ -5991,7 +6232,13 @@ html.dark .canvas-zoom-max {
html.dark .app-main [class*="dark:hover:bg-white/[0.08]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 8%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:hover:bg-white/[0.12]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 12%, var(--color-app)) !important; }
html.dark .app-main [class*="dark:hover:bg-white/[0.1]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
html.dark .app-main .button:not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
html.dark .app-main .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: rgb(107 22 237 / 0.18) !important; border-color: rgb(163 145 255 / 0.34) !important; }
/* Collection shells are #121212. Same selector as the 5% mix, plus .rounded-xl, so it wins. */
html.dark .app-main [class*="dark:bg-white/[0.05]"].rounded-xl:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) {
background-color: #121212 !important;
border-color: rgb(255 255 255 / 0.08) !important;
}
}
/* Resource menu in the collapsed main sidebar: icons only. */
resources/css/utilities.css
+4 -4
View File
@@ -142,7 +142,7 @@
}
@utility loading-indicator {
@apply text-coollabs dark:text-warning;
@apply text-coollabs dark:text-brand-light;
}
/* Compact icon-only control (gear, chevrons, etc.) */
@@ -162,7 +162,7 @@
/* Active resource tab (used with aria-current="page") */
@utility app-tab-active {
@apply bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20;
@apply bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20;
}
@utility auth-tooltip {
@@ -271,7 +271,7 @@
}
@utility heading-item-active {
@apply text-black rounded-sm dark:bg-coolgray-200 dark:text-warning;
@apply text-black rounded-sm dark:bg-coolgray-200 dark:text-brand-light;
}
@utility icon {
@@ -299,7 +299,7 @@
}
@utility kbd-custom {
@apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-warning;
@apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-brand-light;
}
@utility box {
resources/views/components/backup-tabs.blade.php
+2 -2
View File
@@ -35,7 +35,7 @@
@if ($context === 'service-schedule')
<button type="button" @click="activeSection = '{{ $item['key'] }}'"
:class="activeSection === '{{ $item['key'] }}'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
: 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
{{ $item['label'] }}
@@ -43,7 +43,7 @@
@else
<a @class([
'inline-flex h-8 shrink-0 items-center rounded-md px-3 text-[13px] font-medium transition-colors',
'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25' => $section === $item['key'],
'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25' => $section === $item['key'],
'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg' => $section !== $item['key'],
])
{{ wireNavigate() }} href="{{ route($routes[$item['key']], $parameters) }}">
resources/views/components/canvas-view-toggle.blade.php
+7 -4
View File
@@ -1,6 +1,6 @@
@props(['listUrl' => null, 'canvasUrl' => null, 'onCanvas' => false, 'views' => null])
@php
$idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg';
$idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white';
$canvasItem = 'relative flex h-7.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-[12px] font-medium transition-colors';
$views ??= ['table' => ['Table view', 'unordered-list'], 'grid' => ['Grid view', 'grid']];
// One list view (no table / grid choice): nothing to switch to on the list page.
@@ -22,11 +22,14 @@
List view
</a>
@else
{{-- Only the views you can switch to, with their names; the current one is not shown. --}}
{{-- Every view stays visible. The current one is the selected pill. --}}
@unless ($singleList)
@foreach ($views as $mode => [$label, $icon])
<button type="button" x-on:click="setViewMode(@js($mode))" x-show="viewMode !== @js($mode)" x-cloak
class="{{ $canvasItem }} {{ $idle }}" title="{{ $label }}">
<button type="button" x-on:click="setViewMode(@js($mode))"
class="{{ $canvasItem }}"
:class="viewMode === @js($mode) ? 'is-selected' : @js($idle)"
:aria-pressed="(viewMode === @js($mode)).toString()"
title="{{ $label }}">
<x-reicon :name="$icon" class="size-3.5" />
{{ $label }}
</button>
resources/views/components/client-pagination.blade.php
+1 -1
View File
@@ -9,7 +9,7 @@
'nextDisabled' => 'page >= totalPages',
])
<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
<footer x-bind:hidden="Number(totalPages) <= 1" {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
<div class="flex items-center gap-3">
<span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums" x-text="{{ $summary }}"></span>
<x-page-size-select :model="$pageSizeModel" :storage-key="$storageKey" :options="$options" />
resources/views/components/dashboard/navbar.blade.php
+1 -1
View File
@@ -120,7 +120,7 @@
@foreach ($items as $item)
<a @class([
'app-tab shrink-0',
'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20' => $item['active'],
'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20' => $item['active'],
])
{{ wireNavigate() }} href="{{ route($item['route'], $parameters) }}">
@if ($item['icon'] ?? null)
resources/views/components/deploying-indicator.blade.php
+1 -1
View File
@@ -8,7 +8,7 @@
// Persistent affordance shown while a deploy/start is running. Either re-opens
// the in-page live-log dialog (services/databases, via $wire) or links to the
// running deployment's log page (applications, via href) so the log is never lost.
$deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20';
$deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20';
@endphp
@if ($href)
resources/views/components/navbar.blade.php
+4 -4
View File
@@ -271,7 +271,7 @@
:class="collapsed && 'lg:justify-center lg:px-0'">
<x-reicon :name="$item['icon']" class="menu-item-icon" />
<span class="menu-item-label flex-1 text-left" :class="collapsed && 'lg:hidden'">{{ $item['label'] }}</span>
<x-reicon name="chevron-down" class="size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
<x-reicon name="chevron-down" class="nav-chevron size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
</button>
@else
<a title="{{ $item['label'] }}" href="{{ $item['href'] }}"
@@ -294,9 +294,9 @@
<li x-show="!submenu" @if ($activeSubmenu ?? null) x-cloak @endif @class(['xl:hidden' => $navContext ?? []])
:class="{ 'xl:hidden': navLevel !== -1 }">
<a title="Admin" {{ wireNavigate() }}
class="{{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
class="nav-admin {{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
:class="collapsed && 'lg:justify-center lg:px-0'" href="{{ route('admin.index') }}">
<x-reicon name="fire" class="menu-item-icon text-pink-500" />
<x-reicon name="fire" class="menu-item-icon" />
<span class="menu-item-label" :class="collapsed && 'lg:hidden'">Admin</span>
</a>
</li>
@@ -324,7 +324,7 @@
</ul>
{{-- Sidebar footer (desktop only; mobile uses a temporary slide-over). It stays visible;
only the menu above it scrolls on short or zoomed-in screens. --}}
<div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-app lg:-mx-3 lg:flex lg:px-3">
<div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-transparent lg:-mx-3 lg:flex lg:px-3">
<div class="flex items-center gap-1" :class="collapsed ? 'flex-col justify-center' : 'justify-between'">
<x-top-user-menu sidebar />
<button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
resources/views/components/shared-variables/view-controls.blade.php
+5 -3
View File
@@ -13,12 +13,14 @@
</button>
</div>
{{-- Only the view you can switch to, with its name (as components/canvas-view-toggle.blade.php). --}}
{{-- Every view stays visible. The current one is the selected pill. --}}
<div class="view-toggle w-fit">
@foreach (['list' => ['List view', 'unordered-list'], 'grid' => ['Grid view', 'grid']] as $mode => [$viewLabel, $icon])
<button type="button" @click="viewMode = '{{ $mode }}'; localStorage.setItem('{{ $storageKey }}', '{{ $mode }}')"
x-show="viewMode !== '{{ $mode }}'" x-cloak title="{{ $viewLabel }}"
class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg">
title="{{ $viewLabel }}"
class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium transition-colors"
:class="viewMode === '{{ $mode }}' ? 'is-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white'"
:aria-pressed="(viewMode === '{{ $mode }}').toString()">
<x-reicon :name="$icon" class="size-3.5" />
{{ $viewLabel }}
</button>
resources/views/components/table-pagination.blade.php
+1 -1
View File
@@ -20,7 +20,7 @@
$hasLoading = filled($wireTarget);
@endphp
<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
<footer @if ((int) $lastPage <= 1) hidden @endif {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
<div class="flex items-center gap-3">
<span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums">{{ $from }}–{{ $to }} of {{ $total }}</span>
@isset($pageSize)
resources/views/components/top-breadcrumb.blade.php
+15 -3
View File
@@ -104,15 +104,27 @@
default => null,
};
@endphp
<div class="flex min-w-0 items-center gap-0.5 text-[13px]">
<div class="flex min-w-0 items-center gap-0.5 text-[13px]" data-page-context="{{ $dashboardContext }}"
x-data="{
titleRepeats: false,
syncTitle() {
const expected = this.$el.dataset.pageContext || '';
const heading = document.querySelector('.app-main h1');
const title = heading && heading.offsetHeight > 0 && heading.getBoundingClientRect().top < 140
? heading.textContent.trim()
: '';
this.titleRepeats = expected !== '' && title === expected;
},
}"
x-init="syncTitle()" @livewire:navigated.window="$nextTick(() => syncTitle())">
{{-- Team --}}
<div class="shrink-0" x-data="{ collapsed: false }">
<livewire:switch-team />
</div>
@if (!$currentProject && $dashboardContext)
<span class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
<span
<span x-show="!titleRepeats" x-cloak class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
<span x-show="!titleRepeats" x-cloak
class="flex h-8 min-w-0 items-center truncate px-2 font-semibold text-black opacity-70 dark:text-fg">{{ $dashboardContext }}</span>
@endif
resources/views/layouts/app.blade.php
+8
View File
@@ -19,6 +19,14 @@
this.sidebarReady = true;
});
});
if (!window.__coolifyMarkScrolled) {
window.__coolifyMarkScrolled = () => {
document.documentElement.classList.toggle('is-scrolled', window.scrollY > 2);
};
window.addEventListener('scroll', window.__coolifyMarkScrolled, { passive: true });
document.addEventListener('livewire:navigated', () => requestAnimationFrame(window.__coolifyMarkScrolled));
}
window.__coolifyMarkScrolled();
},
toggleSidebar() {
this.collapsed = !this.collapsed;
resources/views/livewire/dashboard.blade.php
+12 -17
View File
@@ -38,7 +38,7 @@
default => ['Ready', 'success'],
}];
});
$iconButton = 'flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
$iconButton = 'card-icon-button flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black';
// Same look as $iconButton, sized to the 20px section title it sits next to.
$titleIconButton = 'flex size-5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
$tableShell = 'overflow-x-auto rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-white/[0.08] dark:bg-white/[0.05]';
@@ -127,7 +127,7 @@
<div class="flex min-w-0 items-start gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
@if ($project->icon_path)
<img src="{{ project_icon_url($project) }}"
alt="{{ $project->name }} icon"
@@ -150,18 +150,13 @@
</div>
<div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
<div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
<span class="inline-flex items-center gap-1" data-tooltip="Environments"
aria-label="Environments">
<x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
{{ $project->environments->count() }}
</span>
<span class="inline-flex items-center gap-1" data-tooltip="Resources"
aria-label="Resources">
<x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
{{ $resourceCount }}
</span>
</div>
<p class="project-card-stats relative z-10 min-w-0">
<b>{{ $project->environments->count() }}</b>
{{ $project->environments->count() === 1 ? 'environment' : 'environments' }}
<span class="project-card-stats-dot" aria-hidden="true">&middot;</span>
<b>{{ $resourceCount }}</b>
{{ $resourceCount === 1 ? 'resource' : 'resources' }}
</p>
<div class="relative z-10 flex shrink-0 items-center gap-0.5">
@if ($firstEnvironment)
@@ -210,7 +205,7 @@
class="absolute inset-0" aria-label="Open {{ $project->name }}"></a>
<div class="flex min-w-0 items-center gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
@if ($project->icon_path)
<img src="{{ project_icon_url($project) }}" alt="{{ $project->name }} icon"
class="h-full w-full rounded-lg object-cover">
@@ -336,7 +331,7 @@
<div class="relative z-10 flex min-w-0 items-start gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<x-reicon name="servers" class="size-4" />
</div>
<div class="min-w-0 flex-1 self-center">
@@ -380,7 +375,7 @@
class="grid grid-cols-[minmax(0,1fr)_9.5rem] gap-4 @2xl:min-w-[480px] @2xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_9.5rem] hover:no-underline {{ $tableRow }}">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<x-reicon name="servers" class="size-4" />
</div>
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
resources/views/livewire/project/index.blade.php
+11 -16
View File
@@ -89,7 +89,7 @@
:aria-label="`Open ${project.name}`"></a>
<div class="flex items-start gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<template x-if="project.iconUrl">
<img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
</template>
@@ -108,28 +108,23 @@
</div>
<div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
<div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
<span class="inline-flex items-center gap-1" data-tooltip="Environments"
aria-label="Environments">
<x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
<span x-text="project.environmentCount"></span>
</span>
<span class="inline-flex items-center gap-1" data-tooltip="Resources"
aria-label="Resources">
<x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
<span x-text="project.resourceCount"></span>
</span>
</div>
<p class="project-card-stats relative z-10 min-w-0">
<b x-text="project.environmentCount"></b>
<span x-text="Number(project.environmentCount) === 1 ? 'environment' : 'environments'"></span>
<span class="project-card-stats-dot" aria-hidden="true">&middot;</span>
<b x-text="project.resourceCount"></b>
<span x-text="Number(project.resourceCount) === 1 ? 'resource' : 'resources'"></span>
</p>
<div class="relative z-10 flex shrink-0 items-center gap-0.5">
<a x-show="project.addResourceHref" :href="project.addResourceHref"
{{ wireNavigate() }}
class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
title="Add resource" :aria-label="`Add resource to ${project.name}`">
<x-reicon name="plus" class="size-3" />
</a>
<a x-show="project.settingsHref" :href="project.settingsHref" {{ wireNavigate() }}
class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
title="Project settings" :aria-label="`Open settings for ${project.name}`">
<x-reicon name="settings" class="size-3" />
</a>
@@ -159,7 +154,7 @@
class="projects-table-grid group min-h-14 items-center border-b border-neutral-200 px-4 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<template x-if="project.iconUrl">
<img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
</template>
resources/views/livewire/project/shared/scheduled-task/show.blade.php
+1 -1
View File
@@ -4,7 +4,7 @@
@foreach (['general' => 'General', 'executions' => 'Executions', ...(auth()->user()->can('update', $resource) ? ['danger' => 'Danger Zone'] : [])] as $sectionKey => $sectionLabel)
<button type="button" @click="activeSection = '{{ $sectionKey }}'"
:class="activeSection === '{{ $sectionKey }}'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
: 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
{{ $sectionLabel }}
resources/views/livewire/server/index.blade.php
+2 -2
View File
@@ -137,7 +137,7 @@
<div class="relative z-10 flex items-start gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<x-reicon name="servers" class="size-4" />
</div>
<div class="min-w-0 flex-1 self-center">
@@ -199,7 +199,7 @@
])>
<div class="flex min-w-0 items-center gap-3">
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
<x-reicon name="servers" class="size-4" />
</div>
<div class="min-w-0">
resources/views/livewire/subscription/pricing-plans.blade.php
+2 -2
View File
@@ -7,14 +7,14 @@
<button type="button" x-on:click="selected = 'monthly'"
class="app-tab h-6! px-2.5!"
:class="selected === 'monthly'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
: ''">
Monthly
</button>
<button type="button" x-on:click="selected = 'yearly'"
class="app-tab h-6! px-2.5!"
:class="selected === 'yearly'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
: ''">
Yearly
</button>