mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
style(ui): use brand accents for dark-mode controls and feedback
This commit is contained in:
+71
-20
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
])>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user