style(ui): use brand accents for dark-mode controls and feedback

This commit is contained in:
Andras Bacsai
2026-10-22 16:34:40 +02:00
parent 61e46da88d
commit 6c6fff5d26
53 changed files with 164 additions and 113 deletions
+71 -20
View File
@@ -415,11 +415,12 @@ select,
position: absolute;
inset: 0;
border-radius: inherit;
--coolbox-loading-color: var(--color-coollabs);
background:
linear-gradient(var(--color-warning), var(--color-warning)),
linear-gradient(var(--color-warning), var(--color-warning)),
linear-gradient(var(--color-warning), var(--color-warning)),
linear-gradient(var(--color-warning), var(--color-warning));
linear-gradient(var(--coolbox-loading-color), var(--coolbox-loading-color)),
linear-gradient(var(--coolbox-loading-color), var(--coolbox-loading-color)),
linear-gradient(var(--coolbox-loading-color), var(--coolbox-loading-color)),
linear-gradient(var(--coolbox-loading-color), var(--coolbox-loading-color));
background-repeat: no-repeat;
animation: coolbox-border-track 2400ms linear infinite;
pointer-events: none;
@@ -436,6 +437,10 @@ select,
z-index: 1;
}
.dark .coolbox-loading::before {
--coolbox-loading-color: var(--color-brand-light);
}
.dark .coolbox-loading::after {
background: var(--color-coolgray-100);
}
@@ -523,7 +528,7 @@ a {
button:focus-visible,
a:focus-visible {
@apply outline-none ring-2 ring-coollabs dark:ring-1 dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100;
@apply outline-none ring-2 ring-coollabs dark:ring-1 dark:ring-brand-light ring-offset-2 dark:ring-offset-coolgray-100;
}
label {
@@ -587,24 +592,24 @@ tr td:first-child {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* Loading feedback uses the higher-contrast warning accent in dark mode. */
/* Loading feedback uses the brand-light accent in dark mode. */
.dark .animate-spin {
color: var(--color-warning) !important;
color: var(--color-brand-light) !important;
}
.dark #nprogress .bar {
background: var(--color-warning) !important;
background: var(--color-brand-light) !important;
}
.dark #nprogress .peg {
box-shadow:
0 0 10px var(--color-warning),
0 0 5px var(--color-warning) !important;
0 0 10px var(--color-brand-light),
0 0 5px var(--color-brand-light) !important;
}
.dark #nprogress .spinner-icon {
border-top-color: var(--color-warning) !important;
border-left-color: var(--color-warning) !important;
border-top-color: var(--color-brand-light) !important;
border-left-color: var(--color-brand-light) !important;
}
html[data-theme="custom"] .loading-indicator,
@@ -1377,6 +1382,11 @@ html[data-theme="custom"] {
--color-coollabs-300: color-mix(in oklab, var(--theme-bright-color) 72%, oklch(0% 0 0));
/* Legacy dark-theme accent utilities use warning as the brand color. */
--color-warning: var(--theme-bright-color);
/* Accent text, icons, and rings (brand-light) follow the picked color in the
readable foreground band. --color-brand stays purple here because the
brand button gradient (hover/press/depth) is not themed; brand fills and
tints are remapped per element below. */
--color-brand-light: var(--theme-fg-on-surface);
--color-accent-foreground: var(--theme-accent-foreground);
--color-app: color-mix(in oklab, var(--theme-base-color) 12%, oklch(14.03% 0.0022 286.11));
--color-panel: color-mix(in oklab, var(--theme-base-color) 14%, oklch(15.48% 0.0021 286.15));
@@ -1519,14 +1529,31 @@ html[data-theme="custom"] :is(
[class~="text-warning"],
[class~="text-accent"],
[class~="dark:text-coollabs"],
[class~="dark:text-warning"]
[class~="dark:text-warning"],
[class~="dark:text-brand-light"]
) {
color: var(--theme-fg-on-surface) !important;
}
/* Brand fills and tints (chips, selected rows, checked boxes, active app tabs)
take the picked color. Scoped to the elements that use them so the purple
brand buttons keep their matching hover/press/depth tokens. */
html[data-theme="custom"] :is(
[class*=":bg-brand"],
[class*=":border-brand"],
.application-heading-actions .app-tab
) {
--color-brand: var(--theme-bright-color);
}
html.dark[data-theme="custom"] [class~="dark:bg-brand"] {
color: var(--theme-accent-foreground) !important;
}
html[data-theme="custom"] [class~="hover:text-coollabs"]:hover,
html[data-theme="custom"] [class~="hover:text-warning"]:hover,
html[data-theme="custom"] [class~="dark:hover:text-warning"]:hover,
html[data-theme="custom"] [class~="dark:hover:text-brand-light"]:hover,
html[data-theme="custom"] [class~="dark:hover:text-coollabs"]:hover {
color: var(--theme-fg-on-surface) !important;
}
@@ -1722,7 +1749,7 @@ html[data-theme="custom"] textarea:disabled {
}
.dark .error-code {
color: var(--color-warning);
color: var(--color-brand-light);
}
.error-code-danger {
@@ -2433,7 +2460,7 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
/*
* Active primary tab styles.
* The base rules above set background/color/box-shadow with higher specificity
* than Tailwind utilities (bg-warning/15, text-warning, ring-*), so active
* than Tailwind utilities (bg-brand/15, text-brand-light, ring-*), so active
* tabs need an explicit override or they look identical to inactive ones.
*/
.application-heading-actions .app-tab[aria-current='page'],
@@ -2451,15 +2478,15 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
.dark .application-heading-actions .app-tab[aria-current='page'],
.dark .application-heading-actions .app-tab.app-tab-active {
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
color: var(--color-warning);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 25%, transparent);
background: color-mix(in srgb, var(--color-brand) 15%, transparent);
color: var(--color-brand-light);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-light) 25%, transparent);
}
.dark .application-heading-actions .app-tab[aria-current='page']:hover,
.dark .application-heading-actions .app-tab.app-tab-active:hover {
background: color-mix(in srgb, var(--color-warning) 20%, transparent);
color: var(--color-warning);
background: color-mix(in srgb, var(--color-brand) 20%, transparent);
color: var(--color-brand-light);
}
.application-heading-actions .relative > button[x-ref='trigger'] {
@@ -5620,6 +5647,20 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-a
--button-depth-color: color-mix(in oklab, var(--color-error) 40%, transparent) !important;
}
/* In dark mode the Danger Zone tile is red-tinted, not the white or purple tile of other items. */
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle) .menu-item-icon.text-error {
color: var(--color-error) !important;
border-color: color-mix(in oklab, var(--color-error) 25%, transparent) !important;
background: color-mix(in oklab, var(--color-error) 8%, transparent) !important;
--button-depth-color: color-mix(in oklab, var(--color-error) 20%, transparent) !important;
}
html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):is(:hover, .menu-item-active, .menu-subitem-active) .menu-item-icon.text-error {
border-color: color-mix(in oklab, var(--color-error) 45%, transparent) !important;
background: color-mix(in oklab, var(--color-error) 15%, transparent) !important;
--button-depth-color: color-mix(in oklab, var(--color-error) 35%, transparent) !important;
}
html:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):focus-visible {
outline: none;
}
@@ -6197,6 +6238,16 @@ html.dark .command-palette {
box-shadow: 0 0 0 1px rgb(163 145 255 / 0.22), var(--shadow-dropdown);
}
/* Sidebar account menu: the purple tint of the sidebar it opens from. */
html.dark .listbox-panel.top-user-menu-panel-sidebar {
background: color-mix(in oklab, #6b16ed 10%, var(--coollabs-elevated));
border-color: rgb(163 145 255 / 0.22);
}
html.dark .top-user-menu-panel-sidebar .listbox-option:hover {
background: rgb(163 145 255 / 0.10);
}
html.dark .command-palette-header {
background: transparent;
}
+4 -4
View File
@@ -49,12 +49,12 @@
}
@utility input-sticky-active {
@apply text-black border-2 border-coollabs dark:border-warning dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs dark:focus:border-warning;
@apply text-black border-2 border-coollabs dark:border-brand-light dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs dark:focus:border-brand-light;
}
/* Focus */
@utility input-focus {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-brand-light focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
}
/* input, select before */
@@ -295,7 +295,7 @@
}
@utility loading {
@apply w-4 dark:text-warning text-coollabs;
@apply w-4 dark:text-brand-light text-coollabs;
}
@utility kbd-custom {
@@ -343,7 +343,7 @@
}
@utility text-helper {
@apply inline-block font-semibold text-coollabs dark:text-warning;
@apply inline-block font-semibold text-coollabs dark:text-brand-light;
}
@utility info-helper {
@@ -84,7 +84,7 @@
<a class="{{ $linkItemClasses }}" target="_blank"
href="{{ getFqdnWithoutPort($domain) }}">
<span
class="shrink-0 rounded-md bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-semibold text-coollabs ring-1 ring-coollabs/20 dark:bg-warning/10 dark:text-warning dark:ring-warning/20">
class="shrink-0 rounded-md bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-semibold text-coollabs ring-1 ring-coollabs/20 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25">
PR #{{ data_get($preview, 'pull_request_id') }}
</span>
<span class="min-w-0 truncate">{{ getFqdnWithoutPort($domain) }}</span>
@@ -99,7 +99,7 @@
<a class="{{ $linkItemClasses }}" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<span
class="shrink-0 rounded-md bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-semibold text-coollabs ring-1 ring-coollabs/20 dark:bg-warning/10 dark:text-warning dark:ring-warning/20">
class="shrink-0 rounded-md bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-semibold text-coollabs ring-1 ring-coollabs/20 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25">
PR #{{ data_get($preview, 'pull_request_id') }}
</span>
<span class="min-w-0 truncate">{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}</span>
@@ -1,6 +1,6 @@
<span {{ $attributes->merge(['class' => 'inline-flex items-center']) }}>
<span role="img" aria-label="Beta" data-tooltip="Beta"
class="inline-flex items-center justify-center p-0.5 rounded-full cursor-help text-coollabs dark:text-warning">
class="inline-flex items-center justify-center p-0.5 rounded-full cursor-help text-coollabs dark:text-brand-light">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-4" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
@@ -6,12 +6,12 @@
@for ($i = 1; $i <= $totalSteps; $i++)
<div @class([
'flex min-h-10 items-center justify-center gap-2 border-r border-neutral-200 px-3 text-[11px] font-medium last:border-r-0 dark:border-white/[0.08]',
'bg-coollabs/[0.07] text-coollabs dark:bg-warning/[0.09] dark:text-warning' => $i === $currentStep,
'bg-coollabs/[0.07] text-coollabs dark:bg-brand/10 dark:text-brand-light' => $i === $currentStep,
'text-neutral-500 dark:text-fg-dim' => $i !== $currentStep,
])>
<span @class([
'flex size-5 items-center justify-center rounded-full border text-[10px] font-semibold',
'border-coollabs/25 bg-coollabs/10 dark:border-warning/25 dark:bg-warning/15' => $i === $currentStep,
'border-coollabs/25 bg-coollabs/10 dark:border-brand-light/25 dark:bg-brand/15' => $i === $currentStep,
'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' => $i < $currentStep,
'border-neutral-200 dark:border-white/[0.1]' => $i > $currentStep,
])>
+3 -3
View File
@@ -24,9 +24,9 @@
],
'info' => [
'icon' => 'info-circle',
'shell' => 'border-coollabs/20 bg-coollabs/[0.055] dark:border-warning/15 dark:bg-warning/[0.045]',
'iconClass' => 'text-coollabs dark:text-warning',
'titleClass' => 'text-coollabs dark:text-warning',
'shell' => 'border-coollabs/20 bg-coollabs/[0.055] dark:border-brand-light/15 dark:bg-brand/[0.06]',
'iconClass' => 'text-coollabs dark:text-brand-light',
'titleClass' => 'text-coollabs dark:text-brand-light',
'textClass' => 'text-neutral-600 dark:text-fg-dim',
],
'success' => [
@@ -9,7 +9,7 @@
$statusClasses = match ($status) {
'success' => 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
'error' => 'border-red-500/25 bg-red-500/10 text-red-600 dark:text-red-400',
'running' => 'border-coollabs/25 bg-coollabs/10 text-coollabs dark:border-warning/25 dark:bg-warning/15 dark:text-warning',
'running' => 'border-coollabs/25 bg-coollabs/10 text-coollabs dark:border-brand-light/25 dark:bg-brand/15 dark:text-brand-light',
'pending' => 'border-neutral-200 text-neutral-400 dark:border-white/[0.1] dark:text-fg-faint',
default => 'border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim',
};
@@ -25,7 +25,7 @@
{{ data_get($diff, 'count') === 1 ? 'change' : 'changes' }} unapplied.
{{ data_get($diff, 'requires_build') ? 'Rebuild required.' : 'Redeploy to apply.' }}
<button type="button"
class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-warning dark:hover:text-warning/80"
class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-brand-light dark:hover:text-brand-light/80"
@click="open = false; $dispatch('open-configuration-diff')">
View changes
<x-reicon name="arrow-right" class="size-2.5" />
@@ -49,8 +49,8 @@
@endif
<span
class="pointer-events-none absolute inset-0 rounded-[5px] border border-neutral-300 bg-white shadow-[inset_0_1px_1px_rgb(0_0_0/0.04)] transition-[color,background-color,border-color,box-shadow] duration-150 ease-out group-hover:border-neutral-400 peer-checked:border-coollabs peer-checked:bg-coollabs peer-focus-visible:ring-2 peer-focus-visible:ring-coollabs/25 peer-focus-visible:ring-offset-2 peer-disabled:opacity-50 dark:border-white/[0.14] dark:bg-white/[0.045] dark:shadow-none dark:group-hover:border-white/[0.22] dark:peer-checked:border-warning dark:peer-checked:bg-warning dark:peer-focus-visible:ring-warning/30 dark:peer-focus-visible:ring-offset-base"></span>
<svg class="pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition-[opacity,transform] peer-checked:scale-100 peer-checked:opacity-100 dark:text-black"
class="pointer-events-none absolute inset-0 rounded-[5px] border border-neutral-300 bg-white shadow-[inset_0_1px_1px_rgb(0_0_0/0.04)] transition-[color,background-color,border-color,box-shadow] duration-150 ease-out group-hover:border-neutral-400 peer-checked:border-coollabs peer-checked:bg-coollabs peer-focus-visible:ring-2 peer-focus-visible:ring-coollabs/25 peer-focus-visible:ring-offset-2 peer-disabled:opacity-50 dark:border-white/[0.14] dark:bg-white/[0.045] dark:shadow-none dark:group-hover:border-white/[0.22] dark:peer-checked:border-brand dark:peer-checked:bg-brand dark:peer-focus-visible:ring-brand-light/30 dark:peer-focus-visible:ring-offset-base"></span>
<svg class="pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition-[opacity,transform] peer-checked:scale-100 peer-checked:opacity-100"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.25 6.15 2.35 2.3 5.15-5" stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" stroke-linejoin="round" />
@@ -276,7 +276,7 @@
<div class="px-2 py-2 text-sm text-neutral-500 dark:text-fg-dim">
<div>No shared variables found in <span class="font-semibold" x-text="currentScope"></span> scope.</div>
<a :href="getScopeUrl(currentScope)"
class="mt-1 inline-block text-xs text-coollabs hover:underline dark:text-warning"
class="mt-1 inline-block text-xs text-coollabs hover:underline dark:text-brand-light"
target="_blank">
Add <span x-text="currentScope"></span> variables →
</a>
@@ -34,7 +34,7 @@
x-model="file" x-bind:disabled="{{ $disabled }}" @blur="file = location" />
<p class="col-span-full text-xs text-neutral-500 dark:text-fg-dim">
Resolved file:
<code class="font-mono text-coollabs dark:text-warning" x-text="directory + location"></code>
<code class="font-mono text-coollabs dark:text-brand-light" x-text="directory + location"></code>
</p>
<x-callout class="col-span-full" x-cloak x-show="repeatsBase" title="Base directory is repeated">
{{ $fileLabel }} is relative to the base directory, so it should not start with
@@ -49,7 +49,7 @@
<span class="truncate">{{ $event['label'] }}</span>
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $event['enabled'],
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $event['enabled'],
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $event['enabled'],
])>
@if ($event['enabled'])
@@ -21,7 +21,7 @@
</p>
@if ($canRestart)
<button type="button"
class="mt-0.5 inline-flex items-center gap-0.5 text-[11px] leading-4 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-warning dark:hover:text-warning/80"
class="mt-0.5 inline-flex items-center gap-0.5 text-[11px] leading-4 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-brand-light dark:hover:text-brand-light/80"
@click="open = false; document.getElementById('server-mobile-restart-proxy-trigger')?.click()">
Restart proxy
<x-reicon name="arrow-right" class="size-2.5" />
@@ -31,7 +31,7 @@
@if ($showUnknownHelper)
<div>
<x-helper
helper="No health check configured. <span class='dark:text-warning text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
helper="No health check configured. <span class='dark:text-brand-light text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-brand-light text-coollabs' target='_blank'>documentation</a>.">
<x-slot:icon>
<x-status-badge status="No healthcheck" type="warning" class="cursor-help" />
</x-slot:icon>
@@ -124,7 +124,7 @@
aria-haspopup="dialog" :aria-expanded="pickerOpen"
class="group block w-full overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
:class="theme === 'custom'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/40'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-brand-light/30 dark:border-brand-light/40'
: ''">
<div class="h-20 border-b border-neutral-200 dark:border-white/[0.07]"
:style="`background: color-mix(in oklab, ${themeColor} 28%, ${customMode === 'light' ? 'oklch(97% 0 0)' : 'oklch(17.35% 0.0020 286.18)'})`">
@@ -153,7 +153,7 @@
@keydown.enter.prevent="setTheme('{{ $option['value'] }}')"
class="group relative overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
:class="theme === '{{ $option['value'] }}'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/40'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-brand-light/30 dark:border-brand-light/40'
: ''">
<div class="h-20 {{ $option['preview'] }} border-b border-neutral-200 dark:border-white/[0.07]">
<div class="flex h-full items-center justify-center">
@@ -195,7 +195,7 @@
<button type="button" @click="setWidth('{{ $option['value'] }}')"
class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
:class="pageWidth === '{{ $option['value'] }}'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/40'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-brand-light/30 dark:border-brand-light/40'
: ''">
<div class="flex h-20 items-center border-b border-neutral-200 bg-neutral-50 px-4 dark:border-white/[0.07] dark:bg-black/15">
<div class="flex h-11 w-full gap-1.5 rounded-md border border-neutral-300 bg-white p-1.5 dark:border-white/15 dark:bg-[#181818]">
@@ -235,7 +235,7 @@
<button type="button" @click="setNavStyle('{{ $option['value'] }}')"
class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
:class="navStyle === '{{ $option['value'] }}'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/40'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-brand-light/30 dark:border-brand-light/40'
: ''">
@php($floating = $option['value'] === 'floating')
<div @class([
@@ -287,7 +287,7 @@
<button type="button" @click="setNavItems('{{ $option['value'] }}')"
class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
:class="navItems === '{{ $option['value'] }}'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/40'
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-brand-light/30 dark:border-brand-light/40'
: ''">
@php($tiles = $option['value'] === '3d')
<div class="flex h-20 flex-col justify-center gap-1.5 border-b border-neutral-200 bg-neutral-50 px-4 dark:border-white/[0.07] dark:bg-black/15">
+1 -1
View File
@@ -110,7 +110,7 @@
<div class="toast-icon flex size-8 shrink-0 items-center justify-center rounded-lg"
:class="{
'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': toast.type === 'success',
'bg-coollabs/10 text-coollabs dark:bg-warning/10 dark:text-warning': toast.type === 'info',
'bg-coollabs/10 text-coollabs dark:bg-brand/15 dark:text-brand-light': toast.type === 'info',
'bg-amber-100 text-amber-700 dark:bg-warning/10 dark:text-warning': toast.type === 'warning',
'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': toast.type === 'danger',
'bg-neutral-100 text-neutral-600 dark:bg-white/[0.06] dark:text-fg-dim': toast.type === 'default',
@@ -54,7 +54,7 @@
@class([
'top-user-menu-panel listbox-panel z-[90]! max-h-none! w-52! min-w-0! overflow-visible!',
'right-0! left-auto!' => ! $sidebar,
'origin-bottom-left' => $sidebar,
'top-user-menu-panel-sidebar origin-bottom-left' => $sidebar,
'origin-top-right' => ! $sidebar,
])>
<div class="min-w-0 px-2 py-1.5">
@@ -42,14 +42,14 @@
<div
class="inline-flex flex-wrap items-center justify-center gap-0.5 rounded-lg border border-neutral-200 bg-neutral-50 p-0.5 dark:border-white/[0.08] dark:bg-white/[0.05]">
<button type="button" wire:click="skipBoarding"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="arrow-right" class="size-3.5 shrink-0" />
Skip setup
</button>
<x-modal-input title="Need Help?">
<x-slot:content>
<button type="button"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="feedback" class="size-3.5 shrink-0" />
Contact support
</button>
@@ -106,7 +106,7 @@
<span role="button" tabindex="0" aria-label="About this machine"
data-tooltip="The machine running Coolify. Not recommended for production workloads due to resource contention."
@click.stop @keydown.enter.stop @keydown.space.prevent.stop
class="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full border border-neutral-200 text-[11px] font-semibold text-neutral-500 hover:border-coollabs/35 hover:text-coollabs dark:border-white/[0.1] dark:text-fg-dim dark:hover:border-warning/30 dark:hover:text-warning">i</span>
class="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full border border-neutral-200 text-[11px] font-semibold text-neutral-500 hover:border-coollabs/35 hover:text-coollabs dark:border-white/[0.1] dark:text-fg-dim dark:hover:border-brand-light/30 dark:hover:text-brand-light">i</span>
<div class="flex flex-col gap-4 text-left">
<svg class="size-10" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -130,7 +130,7 @@
<span role="button" tabindex="0" aria-label="About remote servers"
data-tooltip="Any SSH-accessible server, including cloud VPS, bare metal, and self-hosted infrastructure."
@click.stop @keydown.enter.stop @keydown.space.prevent.stop
class="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full border border-neutral-200 text-[11px] font-semibold text-neutral-500 hover:border-coollabs/35 hover:text-coollabs dark:border-white/[0.1] dark:text-fg-dim dark:hover:border-warning/30 dark:hover:text-warning">i</span>
class="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full border border-neutral-200 text-[11px] font-semibold text-neutral-500 hover:border-coollabs/35 hover:text-coollabs dark:border-white/[0.1] dark:text-fg-dim dark:hover:border-brand-light/30 dark:hover:text-brand-light">i</span>
<div class="flex flex-col gap-4 text-left">
<svg class="size-10" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -616,14 +616,14 @@
<div
class="inline-flex flex-wrap items-center justify-center gap-0.5 rounded-lg border border-neutral-200 bg-neutral-50 p-0.5 dark:border-white/[0.08] dark:bg-white/[0.05]">
<button type="button" wire:click="skipBoarding"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="arrow-right" class="size-3.5 shrink-0" />
Go to dashboard
</button>
<x-modal-input title="Need Help?">
<x-slot:content>
<button type="button"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="feedback" class="size-3.5 shrink-0" />
Contact support
</button>
@@ -641,19 +641,19 @@
<div
class="inline-flex flex-wrap items-center justify-center gap-0.5 rounded-lg border border-neutral-200 bg-neutral-50 p-0.5 dark:border-white/[0.08] dark:bg-white/[0.05]">
<button type="button" wire:click="skipBoarding"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="arrow-right" class="size-3.5 shrink-0" />
Skip setup
</button>
<button type="button" wire:click="restartBoarding"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="restart" class="size-3.5 shrink-0" />
Restart
</button>
<x-modal-input title="Need Help?">
<x-slot:content>
<button type="button"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-warning">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-white hover:text-coollabs dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-brand-light">
<x-reicon name="feedback" class="size-3.5 shrink-0" />
Contact support
</button>
@@ -62,7 +62,7 @@
<a wire:key="dashboard-active-deployment-{{ $deployment->deployment_uuid }}"
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-warning/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-warning focus-visible:ring-offset-0 @2xl:grid @2xl:items-center @2xl:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-warning/10">
class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-coollabs/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs focus-visible:ring-offset-0 @2xl:grid @2xl:items-center @2xl:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-brand/10 dark:focus-visible:ring-brand-light">
<div class="min-w-0">
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
{{ $deployment->application_name }}
@@ -128,7 +128,7 @@
<a wire:key="dashboard-recent-deployment-{{ $deployment->deployment_uuid }}"
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-warning/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-warning focus-visible:ring-offset-0 @2xl:grid @2xl:items-center @2xl:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-warning/10">
class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-coollabs/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs focus-visible:ring-offset-0 @2xl:grid @2xl:items-center @2xl:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-brand/10 dark:focus-visible:ring-brand-light">
<div class="min-w-0">
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
{{ $deployment->application_name }}
@@ -28,7 +28,7 @@
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:border-coolgray-300 dark:hover:border-coolgray-400 dark:hover:bg-raised">
<div
class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-coolgray-300 dark:bg-raised dark:text-warning">
class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-coolgray-300 dark:bg-raised dark:text-brand-light">
@if ($deployment->status === 'in_progress')
<svg class="size-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" aria-hidden="true">
@@ -73,7 +73,7 @@
<button type="button" x-on:click="expanded = !expanded" title="{{ $deploymentLabel }}"
aria-label="Active deployments" :aria-expanded="expanded.toString()"
:class="expanded && 'bg-neutral-100 dark:bg-white/[0.06]'"
class="flex h-9 items-center gap-1.5 rounded-md px-2 text-[13px] font-medium text-coollabs transition-colors hover:bg-neutral-100 dark:text-warning dark:hover:bg-white/[0.06]">
class="flex h-9 items-center gap-1.5 rounded-md px-2 text-[13px] font-medium text-coollabs transition-colors hover:bg-neutral-100 dark:text-brand-light dark:hover:bg-white/[0.06]">
<svg class="size-3.5 shrink-0 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
aria-hidden="true">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -111,11 +111,11 @@
</h2>
<p class="mt-1 text-[12px] leading-5 text-neutral-500 dark:text-fg-dim">
This will cause unusual problems on the UI. Open the
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-warning dark:decoration-warning/30 dark:hover:text-warning/90"
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-brand-light dark:decoration-brand-light/30 dark:hover:text-brand-light/90"
href="https://coolify.io/docs/knowledge-base/server/firewall"
target="_blank" rel="noopener noreferrer">required ports</a>
or get help on
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-warning dark:decoration-warning/30 dark:hover:text-warning/90"
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-brand-light dark:decoration-brand-light/30 dark:hover:text-brand-light/90"
href="https://coollabs.io/discord" target="_blank"
rel="noopener noreferrer">Discord</a>.
</p>
@@ -165,7 +165,7 @@
<p x-show="!reminders.sponsorship.compact" x-transition.opacity
class="mt-1 text-[12px] leading-5 text-neutral-500 dark:text-fg-dim">
Coolify is profitable thanks to <span
class="font-semibold text-coollabs dark:text-warning">you</span>. Your support
class="font-semibold text-coollabs dark:text-brand-light">you</span>. Your support
helps us build more features and keep improving the project.
</p>
</div>
@@ -266,7 +266,7 @@
Enable at least one notification channel so you receive important alerts.
Visit
<a href="{{ route('notifications.email') }}" {{ wireNavigate() }}
class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-warning dark:decoration-warning/30 dark:hover:text-warning/90">notifications</a>
class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 transition-colors hover:text-coollabs-100 dark:text-brand-light dark:decoration-brand-light/30 dark:hover:text-brand-light/90">notifications</a>
to get started.
</p>
</div>
@@ -51,7 +51,7 @@
@endphp
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $selected,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $selected,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $selected,
])>
@if ($selected)
@@ -78,7 +78,7 @@
@endphp
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $selected,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $selected,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $selected,
])>
@if ($selected)
@@ -105,7 +105,7 @@
@endphp
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $selected,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $selected,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $selected,
])>
@if ($selected)
@@ -64,7 +64,7 @@
'application_uuid' => $application->uuid,
]);
@endphp
<div class="group relative flex items-center gap-3 rounded-lg border border-neutral-200 bg-neutral-50/60 px-4 py-3 transition-colors hover:bg-neutral-100 focus-within:ring-2 focus-within:ring-coollabs/40 dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:bg-white/[0.08] dark:focus-within:ring-warning/40">
<div class="group relative flex items-center gap-3 rounded-lg border border-neutral-200 bg-neutral-50/60 px-4 py-3 transition-colors hover:bg-neutral-100 focus-within:ring-2 focus-within:ring-coollabs/40 dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:bg-white/[0.08] dark:focus-within:ring-brand-light/40">
<a class="flex min-w-0 flex-1 items-center gap-3 after:absolute after:inset-0 after:content-[''] focus-visible:outline-none"
aria-label="{{ $domainCount > 0 ? 'Manage application domains' : 'Add an application domain' }}"
href="{{ $applicationDomainsUrl }}" {{ wireNavigate() }}>
@@ -160,11 +160,11 @@
<div class="grid gap-4 lg:grid-cols-2">
<x-forms.input x-bind:disabled="shouldDisable()"
placeholder="docker compose build" id="dockerComposeCustomBuildCommand"
helper="The compose file path (<span class='dark:text-warning'>-f</span> flag) and environment variables (<span class='dark:text-warning'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-warning'>-f</span> or <span class='dark:text-warning'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-warning'>docker compose build</span>"
helper="The compose file path (<span class='dark:text-brand-light'>-f</span> flag) and environment variables (<span class='dark:text-brand-light'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-brand-light'>-f</span> or <span class='dark:text-brand-light'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-brand-light'>docker compose build</span>"
label="Custom build command" />
<x-forms.input x-bind:disabled="shouldDisable()"
placeholder="docker compose up -d" id="dockerComposeCustomStartCommand"
helper="The compose file path (<span class='dark:text-warning'>-f</span> flag) and environment variables (<span class='dark:text-warning'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-warning'>-f</span> or <span class='dark:text-warning'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-warning'>docker compose up -d</span>"
helper="The compose file path (<span class='dark:text-brand-light'>-f</span> flag) and environment variables (<span class='dark:text-brand-light'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-brand-light'>-f</span> or <span class='dark:text-brand-light'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-brand-light'>docker compose up -d</span>"
label="Custom start command" />
</div>
@if ($this->dockerComposeCustomBuildCommand)
@@ -478,12 +478,12 @@
</div>
@if (!$application->destination->server->isSwarm())
<x-forms.input placeholder="3000:3000" id="portsMappings" label="Port mappings"
helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Format:</span> host:container<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span> 3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host."
helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-brand-light'>Format:</span> host:container<br><br><span class='inline-block font-bold dark:text-brand-light'>Example:</span> 3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host."
x-bind:disabled="!canUpdate" />
@endif
@if (!$application->destination->server->isSwarm())
<x-forms.input id="customNetworkAliases" label="Network aliases"
helper="A comma separated list of custom network aliases you would like to add for container in Docker network.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>api.internal,api.local"
helper="A comma separated list of custom network aliases you would like to add for container in Docker network.<br><br><span class='inline-block font-bold dark:text-brand-light'>Example:</span><br>api.internal,api.local"
wire:model="customNetworkAliases" x-bind:disabled="!canUpdate" />
@endif
</div>
@@ -57,7 +57,7 @@
</span>
@endif
<a href="{{ $publicUrl }}" target="_blank" rel="noopener noreferrer"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs dark:text-fg dark:decoration-white/20 dark:hover:decoration-warning"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs dark:text-fg dark:decoration-white/20 dark:hover:decoration-brand-light"
title="{{ $publicUrl }}">
{{ $publicUrl }}
</a>
@@ -121,7 +121,7 @@
<div class="flex min-w-0 items-center gap-2">
<x-reicon name="globe" class="size-4 shrink-0 text-neutral-400 dark:text-fg-faint" />
<a href="{{ getFqdnWithoutPort($row['url']) }}" target="_blank" rel="noopener noreferrer"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs sm:truncate dark:text-fg dark:decoration-white/20 dark:hover:decoration-warning"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs sm:truncate dark:text-fg dark:decoration-white/20 dark:hover:decoration-brand-light"
title="{{ getFqdnWithoutPort($row['url']) }}">{{ getFqdnWithoutPort($row['url']) }}</a>
</div>
</div>
@@ -44,7 +44,7 @@
{{ data_get($pull_request, 'title') }}
</h4>
<a target="_blank"
class="mt-1 inline-flex items-center gap-1 text-xs text-neutral-500 hover:text-coollabs dark:text-fg-dim dark:hover:text-warning"
class="mt-1 inline-flex items-center gap-1 text-xs text-neutral-500 hover:text-coollabs dark:text-fg-dim dark:hover:text-brand-light"
href="{{ data_get($pull_request, 'html_url') }}">
Open on GitHub
<x-external-link />
@@ -48,11 +48,11 @@
wire:click="selectServer('{{ $server->id }}', '{{ $destination->uuid }}')"
@class([
'data-table-row clone-destinations-table-grid w-full border-b border-neutral-200 text-left last:border-b-0 dark:border-white/[0.06]',
'bg-coollabs/5 dark:bg-warning/[0.06]' => $selectedDestination === $destination->uuid,
'bg-coollabs/5 dark:bg-brand/[0.08]' => $selectedDestination === $destination->uuid,
])>
<span @class([
'flex size-4 items-center justify-center rounded-full border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $selectedDestination === $destination->uuid,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $selectedDestination === $destination->uuid,
'border-neutral-300 dark:border-white/[0.15]' => $selectedDestination !== $destination->uuid,
])>
@if ($selectedDestination === $destination->uuid)
@@ -125,7 +125,7 @@
<button type="button" @click="restoreType = 'file'"
class="flex min-h-20 items-center gap-3 rounded-[10px] border p-3 text-left transition-colors"
:class="restoreType === 'file'
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-warning/30 dark:bg-warning/[0.08] dark:text-warning'
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-brand-light/30 dark:bg-brand/[0.08] dark:text-brand-light'
: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.08] dark:bg-white/[0.05] dark:hover:border-white/[0.14]'">
<span
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-white/[0.06]">
@@ -142,7 +142,7 @@
<button type="button" @click="restoreType = 's3'"
class="flex min-h-20 items-center gap-3 rounded-[10px] border p-3 text-left transition-colors"
:class="restoreType === 's3'
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-warning/30 dark:bg-warning/[0.08] dark:text-warning'
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-brand-light/30 dark:bg-brand/[0.08] dark:text-brand-light'
: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.08] dark:bg-white/[0.05] dark:hover:border-white/[0.14]'">
<span
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-white/[0.06]">
@@ -184,7 +184,7 @@
@csrf
</form>
<div x-show="isUploading" class="mt-3 h-1.5 overflow-hidden rounded-full bg-neutral-200 dark:bg-white/[0.08]">
<div class="h-full rounded-full bg-coollabs dark:bg-warning"
<div class="h-full rounded-full bg-coollabs dark:bg-brand"
:style="`width: ${progress}%`"></div>
</div>
@@ -27,7 +27,7 @@
description="Create a project to organize your environments and resources."
icon-name="projects">
<x-slot:contents>
<a class="text-[12px] font-medium text-coollabs hover:underline dark:text-warning"
<a class="text-[12px] font-medium text-coollabs hover:underline dark:text-brand-light"
href="{{ route('onboarding') }}" {{ wireNavigate() }}>
Open onboarding
</a>
@@ -29,7 +29,7 @@
</div>
<p class="mt-2 text-xs text-neutral-500 dark:text-fg-dim">
Need a sample? Browse
<a class="font-medium text-coollabs hover:underline dark:text-warning"
<a class="font-medium text-coollabs hover:underline dark:text-brand-light"
href="https://github.com/coollabsio/coolify-examples/" target="_blank">
Coolify Examples
</a>.
@@ -754,7 +754,7 @@
:disabled="selecting">
<div class="flex flex-col">
<div class="text-[13px] font-semibold text-black dark:text-fg">PostgreSQL 18 <span
class="ml-1 rounded-full bg-coollabs/10 px-2 py-0.5 text-[10px] font-medium text-coollabs dark:bg-warning/15 dark:text-warning">Default</span>
class="ml-1 rounded-full bg-coollabs/10 px-2 py-0.5 text-[10px] font-medium text-coollabs dark:bg-brand/15 dark:text-brand-light">Default</span>
</div>
<div class="mt-1 pr-8 text-[11px] leading-4 text-neutral-500 dark:text-fg-faint">
PostgreSQL is a powerful, open-source object-relational database system (no extensions).
@@ -111,7 +111,7 @@
<span
class="flex size-4 shrink-0 items-center justify-center rounded-[5px] border"
:class="isFilterSelected(group.key, option.value)
? 'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black'
? 'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white'
: 'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]'">
<svg x-show="isFilterSelected(group.key, option.value)" class="size-3"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
@@ -89,7 +89,7 @@
</span>
@endif
<a href="{{ $publicUrl }}" target="_blank" rel="noopener noreferrer"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs [overflow-wrap:anywhere] dark:text-fg dark:decoration-white/20 dark:hover:decoration-warning"
class="min-w-0 flex-1 truncate text-[13px] text-black underline decoration-neutral-300 underline-offset-2 hover:decoration-coollabs [overflow-wrap:anywhere] dark:text-fg dark:decoration-white/20 dark:hover:decoration-brand-light"
title="{{ $publicUrl }}">
{{ $publicUrl }}
</a>
@@ -18,7 +18,7 @@
<span>
{{ implode(', ', $missingRequiredEnvironmentVariableNames) }} must be set before this service can be deployed.
<a href="{{ $environmentVariablesUrl }}" {{ wireNavigate() }}
class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-warning dark:hover:text-warning/80">
class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-brand-light dark:hover:text-brand-light/80">
Open environment variables
<x-reicon name="arrow-right" class="size-2.5" />
</a>
@@ -20,7 +20,7 @@
{{ data_get($resource, 'destination.server.name') }}
</h4>
<span
class="rounded-sm bg-coollabs/10 px-1.5 py-0.5 text-[11px] font-medium text-coollabs dark:bg-warning/10 dark:text-warning">
class="rounded-sm bg-coollabs/10 px-1.5 py-0.5 text-[11px] font-medium text-coollabs dark:bg-brand/15 dark:text-brand-light">
Primary
</span>
<x-status-summary :status="$resource->status" />
@@ -243,7 +243,7 @@
{{ data_get($resource, 'destination.server.name') }}
</h4>
<span
class="rounded-sm bg-coollabs/10 px-1.5 py-0.5 text-[11px] font-medium text-coollabs dark:bg-warning/10 dark:text-warning">
class="rounded-sm bg-coollabs/10 px-1.5 py-0.5 text-[11px] font-medium text-coollabs dark:bg-brand/15 dark:text-brand-light">
Primary
</span>
</div>
@@ -25,7 +25,7 @@
@if (!$shared)
<div x-cloak x-show="!isMultiline" wire:key="env-value-tip"
class="mt-1.5 text-xs text-neutral-500 dark:text-fg-faint">
Tip: Type <span class="font-mono text-coollabs dark:text-warning">{{ '{{' }}</span> to reference a
Tip: Type <span class="font-mono text-coollabs dark:text-brand-light">{{ '{{' }}</span> to reference a
shared environment variable
</div>
@endif
@@ -114,7 +114,7 @@
@endphp
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $selected,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $selected,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $selected,
])>
@if ($selected)
@@ -132,7 +132,7 @@
<span>{{ $label }}</span>
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $environmentFilter === $value,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $environmentFilter === $value,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => $environmentFilter !== $value,
])>
@if ($environmentFilter === $value)
@@ -155,7 +155,7 @@
@endphp
<span @class([
'flex size-4 shrink-0 items-center justify-center rounded-[5px] border',
'border-coollabs bg-coollabs text-white dark:border-warning dark:bg-warning dark:text-black' => $serviceSelected,
'border-coollabs bg-coollabs text-white dark:border-brand dark:bg-brand dark:text-white' => $serviceSelected,
'border-neutral-300 bg-white dark:border-white/[0.14] dark:bg-white/[0.045]' => ! $serviceSelected,
])>
@if ($serviceSelected)
@@ -184,7 +184,7 @@
<div x-cloak x-show="!isMultiline" wire:key="env-show-value-tip-{{ $env->id }}"
class="mt-1.5 text-xs text-neutral-500 dark:text-fg-faint">
Tip: Type <span
class="font-mono text-coollabs dark:text-warning">{{ '{{' }}</span> to reference
class="font-mono text-coollabs dark:text-brand-light">{{ '{{' }}</span> to reference
a shared environment variable
</div>
@endif
@@ -53,7 +53,7 @@
@foreach ($filteredTags as $tag)
<x-forms.button wire:key="available-tag-{{ $tag->id }}"
wire:click="addTag('{{ $tag->id }}')">
<x-reicon name="plus" class="size-3.5 text-coollabs dark:text-warning" />
<x-reicon name="plus" class="size-3.5 text-coollabs dark:text-brand-light" />
{{ $tag->name }}
</x-forms.button>
@endforeach
@@ -190,7 +190,7 @@
'inline-flex min-h-5 items-center rounded-md border px-2 py-0.5 text-[10px] font-medium',
'border-error/20 bg-error/10 text-error' => $ability === 'root',
'border-warning/20 bg-warning/10 text-warning' => in_array($ability, ['write', 'write:sensitive']),
'border-coollabs/20 bg-coollabs/10 text-coollabs dark:border-warning/20 dark:bg-warning/10 dark:text-warning' => $ability === 'deploy',
'border-coollabs/20 bg-coollabs/10 text-coollabs dark:border-brand-light/20 dark:bg-brand/15 dark:text-brand-light' => $ability === 'deploy',
'border-neutral-200 bg-neutral-100 text-neutral-600 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-fg-dim' => in_array($ability, ['read', 'read:sensitive']),
])>{{ $ability }}</span>
@endforeach
@@ -29,7 +29,7 @@
class="rounded-lg border border-neutral-200 bg-neutral-50 p-3 text-[11px] leading-5 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.05] dark:text-fg-dim">
Create the token in the
<a :href="providerConsoleUrl"
target="_blank" class="font-medium text-coollabs hover:underline dark:text-warning">
target="_blank" class="font-medium text-coollabs hover:underline dark:text-brand-light">
<span x-text="providerName + ' console'"></span>
</a>.
</div>
@@ -86,7 +86,7 @@
</ul>
<a href="{{ \App\Models\IntegrationToken::cloudflareTokenTemplateUrl($capabilities) }}"
target="_blank" rel="noopener noreferrer"
class="font-medium text-coollabs hover:underline dark:text-warning">
class="font-medium text-coollabs hover:underline dark:text-brand-light">
Create a replacement token in Cloudflare
</a>
</div>
@@ -13,7 +13,7 @@
<div class="lg:col-span-2">
<div class="mb-1.5 flex items-center justify-between gap-3">
<label class="text-[13px] font-medium">Private key <span class="text-helper">*</span></label>
<button type="button" class="text-[11px] font-medium text-coollabs hover:underline dark:text-warning"
<button type="button" class="text-[11px] font-medium text-coollabs hover:underline dark:text-brand-light"
x-on:click="showPrivateKey = !showPrivateKey" x-text="showPrivateKey ? 'Hide editor' : 'Edit key'"></button>
</div>
<div x-show="!showPrivateKey">
@@ -84,7 +84,7 @@
<div class="mb-1.5 flex items-center justify-between gap-3">
<label class="text-[13px] font-medium">Private key <span class="text-helper">*</span></label>
<button type="button"
class="text-[11px] font-medium text-coollabs hover:underline dark:text-warning"
class="text-[11px] font-medium text-coollabs hover:underline dark:text-brand-light"
x-on:click="showPrivateKey = !showPrivateKey"
x-text="showPrivateKey ? 'Hide editor' : 'Edit key'"></button>
</div>
@@ -8,7 +8,7 @@
<p class="text-[11px] text-neutral-500 dark:text-fg-faint">
New to DigitalOcean?
<a href="https://coolify.io/digitalocean" target="_blank"
class="font-medium text-coollabs hover:underline dark:text-warning">Create an account</a>
class="font-medium text-coollabs hover:underline dark:text-brand-light">Create an account</a>
through Coolify's referral link.
</p>
</div>
@@ -8,7 +8,7 @@
<p class="text-[11px] text-neutral-500 dark:text-fg-faint">
New to Hetzner?
<a href="https://coolify.io/hetzner" target="_blank"
class="font-medium text-coollabs hover:underline dark:text-warning">Create an account</a>
class="font-medium text-coollabs hover:underline dark:text-brand-light">Create an account</a>
through Coolify's affiliate link.
</p>
</div>
@@ -9,7 +9,7 @@
New to Hostinger?
<a href="https://www.hostinger.com/vps/coolify-hosting?ref=coolify.io" target="_blank"
rel="noopener noreferrer"
class="font-medium text-coollabs hover:underline dark:text-warning">Create an account</a>
class="font-medium text-coollabs hover:underline dark:text-brand-light">Create an account</a>
through Coolify's affiliate link.
</p>
</div>
@@ -8,7 +8,7 @@
<p class="text-[11px] text-neutral-500 dark:text-fg-faint">
New to Vultr?
<a href="https://coolify.io/vultr" target="_blank"
class="font-medium text-coollabs hover:underline dark:text-warning">Create an account</a>
class="font-medium text-coollabs hover:underline dark:text-brand-light">Create an account</a>
through Coolify's affiliate link.
</p>
</div>
@@ -14,12 +14,12 @@
<x-slot:actions>
<div class="inline-flex w-fit rounded-[10px] bg-neutral-100 p-1 dark:bg-white/[0.05]">
<button type="button" wire:click="loadManagedContainers" wire:loading.attr="disabled" wire:target="loadManagedContainers,loadUnmanagedContainers"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'managed' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'managed' ? 'bg-white text-neutral-950 shadow-sm dark:bg-brand/15 dark:text-brand-light' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<x-loading-on-button wire:loading wire:target="loadManagedContainers" />
Managed
</button>
<button type="button" wire:click="loadUnmanagedContainers" wire:loading.attr="disabled" wire:target="loadManagedContainers,loadUnmanagedContainers"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'unmanaged' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'unmanaged' ? 'bg-white text-neutral-950 shadow-sm dark:bg-brand/15 dark:text-brand-light' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<x-loading-on-button wire:loading wire:target="loadUnmanagedContainers" />
Unmanaged
</button>
@@ -15,7 +15,7 @@
'lg:col-span-2' => !str_starts_with(strtolower($fqdn ?? ''), 'https://'),
])>
<x-forms.input canGate="update" :canResource="$settings" id="fqdn" label="URL"
helper="Enter the full URL of the instance (for example, https://dashboard.example.com).<br><br><span class='text-coollabs dark:text-warning'>Important:</span> Include <b>https://</b> to secure the dashboard with HTTPS.<br><br>Passkeys are tied to this domain. If you change it, users must add their passkeys again."
helper="Enter the full URL of the instance (for example, https://dashboard.example.com).<br><br><span class='text-coollabs dark:text-brand-light'>Important:</span> Include <b>https://</b> to secure the dashboard with HTTPS.<br><br>Passkeys are tied to this domain. If you change it, users must add their passkeys again."
placeholder="https://coolify.yourdomain.com" />
</div>
@@ -1,6 +1,6 @@
@can('create', App\Models\S3Storage::class)
<div class="w-full">
<div class="mb-4">For more details, please visit the <a class="underline dark:text-warning"
<div class="mb-4">For more details, please visit the <a class="underline dark:text-brand-light"
href="https://coolify.io/docs/knowledge-base/s3/introduction" target="_blank">Coolify Docs</a>.</div>
<form class="flex flex-col gap-2" wire:submit='submit'>
<div class="flex gap-2">
@@ -30,7 +30,7 @@
</p>
@elseif(currentTeam()->subscription)
<p>
Cancel your <a class="font-medium text-coollabs hover:underline dark:text-warning"
Cancel your <a class="font-medium text-coollabs hover:underline dark:text-brand-light"
{{ wireNavigate() }} href="{{ route('subscription.show') }}">subscription</a>
before deleting this team.
</p>
@@ -50,7 +50,7 @@
<ul class="space-y-1">
@foreach ($deletionBlockers as $type => $count)
<li>
<a class="font-medium text-coollabs hover:underline dark:text-warning"
<a class="font-medium text-coollabs hover:underline dark:text-brand-light"
{{ wireNavigate() }} href="{{ route($blockerDetails[$type]['route']) }}">
{{ $count }} {{ str($blockerDetails[$type]['label'])->plural($count) }}
</a>
@@ -19,7 +19,7 @@
<span class="truncate text-[13px] font-medium text-black dark:text-fg">{{ $member->name }}</span>
@if ($member->id === Auth::id())
<span
class="rounded-full bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-medium text-coollabs dark:bg-warning/15 dark:text-warning">
class="rounded-full bg-coollabs/10 px-1.5 py-0.5 text-[10px] font-medium text-coollabs dark:bg-brand/15 dark:text-brand-light">
You
</span>
@endif
+2 -2
View File
@@ -107,7 +107,7 @@
<p class="text-[12px]" style="color: var(--coollabs-subtle)">
Reloading in
<span x-text="successCountdown"
class="font-semibold text-coollabs dark:text-warning"></span>
class="font-semibold text-coollabs dark:text-brand-light"></span>
seconds…
</p>
<p class="text-center text-[11px] leading-4"
@@ -146,7 +146,7 @@
<p class="text-[12px] leading-5" style="color: var(--coollabs-subtle)">
If something goes wrong, check the
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 hover:decoration-coollabs dark:text-warning dark:decoration-warning/30 dark:hover:decoration-warning"
<a class="font-medium text-coollabs underline decoration-coollabs/30 underline-offset-2 hover:decoration-coollabs dark:text-brand-light dark:decoration-brand-light/30 dark:hover:decoration-brand-light"
href="https://coolify.io/docs/upgrade" target="_blank"
rel="noopener noreferrer">upgrade guide</a>
or the logs on the server at