style(theme): apply MapleDeploy palette and fonts
This commit is contained in:
parent
3b45835909
commit
f1e60bac53
18 changed files with 201 additions and 106 deletions
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
'navigate' => [
|
||||
'show_progress_bar' => true,
|
||||
'progress_bar_color' => '#ffff00',
|
||||
'progress_bar_color' => '#fde047',
|
||||
],
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -13,36 +13,77 @@
|
|||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* MapleDeploy branding: Canadian red accent, stone greys */
|
||||
@theme {
|
||||
--font-sans: 'Geist Sans', Inter, sans-serif;
|
||||
--font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--font-geist-sans: 'Geist Sans', Inter, sans-serif;
|
||||
--font-logs: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--font-sans: Inter, sans-serif;
|
||||
--font-display: 'Overlock', sans-serif;
|
||||
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--font-logs: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
|
||||
--color-base: #101010;
|
||||
--color-warning: #fcd452;
|
||||
--color-base: #292524;
|
||||
--color-warning: #fde047;
|
||||
--color-warning-50: #fefce8;
|
||||
--color-warning-100: #fef9c3;
|
||||
--color-warning-200: #fef08a;
|
||||
--color-warning-300: #fde047;
|
||||
--color-warning-400: #fcd452;
|
||||
--color-warning-500: #facc15;
|
||||
--color-warning-400: #facc15;
|
||||
--color-warning-500: #eab308;
|
||||
--color-warning-600: #ca8a04;
|
||||
--color-warning-700: #a16207;
|
||||
--color-warning-800: #854d0e;
|
||||
--color-warning-900: #713f12;
|
||||
--color-success: #22C55E;
|
||||
--color-error: #dc2626;
|
||||
--color-coollabs-50: #f5f0ff;
|
||||
--color-coollabs: #6b16ed;
|
||||
--color-coollabs-100: #7317ff;
|
||||
--color-coollabs-200: #5a12c7;
|
||||
--color-coollabs-300: #4a0fa3;
|
||||
--color-coolgray-100: #181818;
|
||||
--color-coolgray-200: #202020;
|
||||
--color-coolgray-300: #242424;
|
||||
--color-coolgray-400: #282828;
|
||||
--color-coolgray-500: #323232;
|
||||
/* MapleDeploy branding: red palette hue-normalized to OKLCH h=29.38 (#D52A1E) */
|
||||
--color-error: #dc281c;
|
||||
--color-coollabs-50: #fef3f1;
|
||||
--color-coollabs: #d52b1f;
|
||||
--color-coollabs-100: #f34d3d;
|
||||
--color-coollabs-200: #bc251a;
|
||||
--color-coollabs-300: #9c2117;
|
||||
/* Override Tailwind's red scale so red-* utility classes match the MapleDeploy brand hue */
|
||||
--color-red-50: #fef1ef;
|
||||
--color-red-100: #ffe3df;
|
||||
--color-red-200: #ffcec5;
|
||||
--color-red-300: #feaa9d;
|
||||
--color-red-400: #fb7968;
|
||||
--color-red-500: #f34d3d;
|
||||
--color-red-600: #d52b1f;
|
||||
--color-red-700: #bc251a;
|
||||
--color-red-800: #9c2117;
|
||||
--color-red-900: #812219;
|
||||
--color-red-950: #460d08;
|
||||
--color-coolgray-100: #1c1917;
|
||||
--color-coolgray-200: #35322f;
|
||||
--color-coolgray-300: #44403c;
|
||||
--color-coolgray-400: #57534e;
|
||||
--color-coolgray-500: #78716c;
|
||||
|
||||
/* MapleDeploy branding: remap neutral and gray → stone for warm tone consistency with marketing/dashboard.
|
||||
Upstream uses neutral for text/borders and gray for backgrounds/surfaces. Remapping both to stone
|
||||
warms the entire UI to match our design system, covering ~1000 class references without touching
|
||||
any Blade templates. */
|
||||
--color-neutral-50: oklch(98.5% 0.001 106.423);
|
||||
--color-neutral-100: oklch(97% 0.001 106.424);
|
||||
--color-neutral-200: oklch(92.3% 0.003 48.717);
|
||||
--color-neutral-300: oklch(86.9% 0.005 56.366);
|
||||
--color-neutral-400: oklch(70.9% 0.01 56.259);
|
||||
--color-neutral-500: oklch(55.3% 0.013 58.071);
|
||||
--color-neutral-600: oklch(44.4% 0.011 73.639);
|
||||
--color-neutral-700: oklch(37.4% 0.01 67.558);
|
||||
--color-neutral-800: oklch(26.8% 0.007 34.298);
|
||||
--color-neutral-900: oklch(21.6% 0.006 56.043);
|
||||
--color-neutral-950: oklch(14.7% 0.004 49.25);
|
||||
--color-gray-50: oklch(98.5% 0.001 106.423);
|
||||
--color-gray-100: oklch(97% 0.001 106.424);
|
||||
--color-gray-200: oklch(92.3% 0.003 48.717);
|
||||
--color-gray-300: oklch(86.9% 0.005 56.366);
|
||||
--color-gray-400: oklch(70.9% 0.01 56.259);
|
||||
--color-gray-500: oklch(55.3% 0.013 58.071);
|
||||
--color-gray-600: oklch(44.4% 0.011 73.639);
|
||||
--color-gray-700: oklch(37.4% 0.01 67.558);
|
||||
--color-gray-800: oklch(26.8% 0.007 34.298);
|
||||
--color-gray-900: oklch(21.6% 0.006 56.043);
|
||||
--color-gray-950: oklch(14.7% 0.004 49.25);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -102,7 +143,8 @@ @keyframes lds-heart {
|
|||
*/
|
||||
html,
|
||||
body {
|
||||
@apply w-full min-h-full bg-gray-50 dark:bg-base dark:text-neutral-400;
|
||||
/* MapleDeploy branding: text-stone-800 body text matches marketing/dashboard */
|
||||
@apply w-full min-h-full text-stone-800 bg-gray-50 dark:bg-base dark:text-neutral-400;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -132,19 +174,19 @@ button[isHighlighted]:not(:disabled) {
|
|||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl font-bold dark:text-white;
|
||||
@apply text-3xl font-bold font-display dark:text-white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl font-bold dark:text-white;
|
||||
@apply text-xl font-bold font-display dark:text-white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg font-bold dark:text-white;
|
||||
@apply text-lg font-bold font-display dark:text-white;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-base font-bold dark:text-white;
|
||||
@apply text-base font-bold font-display dark:text-white;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -70,18 +70,12 @@ @font-face {
|
|||
src: url('../fonts/inter-v13-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* MapleDeploy branding: Overlock for headings */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Geist Mono';
|
||||
font-family: 'Overlock';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url('../fonts/geist-mono-variable.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Geist Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url('../fonts/geist-sans-variable.woff2') format('woff2');
|
||||
font-weight: 900;
|
||||
src: url('../fonts/overlock-v19-latin-900.woff2') format('woff2'),
|
||||
url('../fonts/overlock-v19-latin-900.ttf') format('truetype');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ @utility input-sticky {
|
|||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 1px #e5e5e5;
|
||||
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 1px #e5e5e5;
|
||||
}
|
||||
|
||||
&:where(.dark, .dark *):focus-visible {
|
||||
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 1px #242424;
|
||||
box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 1px #242424;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,11 +82,11 @@ @utility input {
|
|||
@apply focus-visible:outline-none;
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
|
||||
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 2px #e5e5e5;
|
||||
}
|
||||
|
||||
&:where(.dark, .dark *):focus-visible {
|
||||
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
|
||||
box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 2px #242424;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
|
|
@ -113,11 +113,11 @@ @utility select {
|
|||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
|
||||
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 2px #e5e5e5;
|
||||
}
|
||||
|
||||
&:where(.dark, .dark *):focus-visible {
|
||||
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
|
||||
box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 2px #242424;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ @utility tag {
|
|||
}
|
||||
|
||||
@utility add-tag {
|
||||
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
|
||||
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
|
||||
}
|
||||
|
||||
@utility dropdown-item {
|
||||
|
|
@ -213,7 +213,8 @@ @utility icon {
|
|||
}
|
||||
|
||||
@utility scrollbar {
|
||||
@apply scrollbar-thumb-coollabs-100 scrollbar-track-neutral-200 dark:scrollbar-track-coolgray-200 scrollbar-thin;
|
||||
/* MapleDeploy branding: yellow scrollbar thumb instead of Coolify red */
|
||||
@apply scrollbar-thumb-warning scrollbar-track-neutral-200 dark:scrollbar-track-coolgray-200 scrollbar-thin;
|
||||
}
|
||||
|
||||
@utility main {
|
||||
|
|
@ -273,7 +274,8 @@ @utility description {
|
|||
}
|
||||
|
||||
@utility bg-coollabs-gradient {
|
||||
@apply from-purple-500 via-pink-500 to-red-500 bg-linear-to-r;
|
||||
/* MapleDeploy branding */
|
||||
@apply from-red-700 via-red-500 to-red-400 bg-linear-to-r;
|
||||
}
|
||||
|
||||
@utility text-helper {
|
||||
|
|
@ -337,7 +339,7 @@ @utility log-warning {
|
|||
}
|
||||
|
||||
@utility log-debug {
|
||||
@apply bg-purple-500/10 dark:bg-purple-500/15;
|
||||
@apply bg-stone-500/10 dark:bg-stone-500/15;
|
||||
}
|
||||
|
||||
@utility log-info {
|
||||
|
|
|
|||
BIN
resources/fonts/overlock-v19-latin-900.ttf
Normal file
BIN
resources/fonts/overlock-v19-latin-900.ttf
Normal file
Binary file not shown.
BIN
resources/fonts/overlock-v19-latin-900.woff2
Normal file
BIN
resources/fonts/overlock-v19-latin-900.woff2
Normal file
Binary file not shown.
|
|
@ -3,9 +3,10 @@
|
|||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div class="text-center space-y-2">
|
||||
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</h1>
|
||||
<div class="flex justify-center">
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80&dark=true" alt="MapleDeploy" class="hidden h-12 dark:block" />
|
||||
</div>
|
||||
<p class="text-lg dark:text-neutral-400">
|
||||
Confirm Your Password
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div class="text-center space-y-2">
|
||||
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</h1>
|
||||
<div class="flex justify-center">
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80&dark=true" alt="MapleDeploy" class="hidden h-12 dark:block" />
|
||||
</div>
|
||||
<p class="text-lg dark:text-neutral-400">
|
||||
{{ __('auth.forgot_password_heading') }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div class="text-center space-y-2">
|
||||
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</h1>
|
||||
<div class="flex justify-center">
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80&dark=true" alt="MapleDeploy" class="hidden h-12 dark:block" />
|
||||
</div>
|
||||
<p class="text-lg dark:text-neutral-400">
|
||||
{{ __('auth.reset_password') }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -47,9 +47,10 @@
|
|||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div class="text-center space-y-2">
|
||||
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</h1>
|
||||
<div class="flex justify-center">
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80&dark=true" alt="MapleDeploy" class="hidden h-12 dark:block" />
|
||||
</div>
|
||||
<p class="text-lg dark:text-neutral-400">
|
||||
Two-Factor Authentication
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -99,9 +99,10 @@
|
|||
{{-- Unified Input Container with Tags Inside --}}
|
||||
<div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
|
||||
class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
|
||||
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
|
||||
:style="(() => {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const accent = isDark ? '#fcd452' : '#6b16ed';
|
||||
const accent = isDark ? '#fde047' : '#d52b1f';
|
||||
const border = isDark ? '#242424' : '#e5e5e5';
|
||||
return focused
|
||||
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
|
||||
|
|
@ -110,7 +111,7 @@ class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-
|
|||
:class="{
|
||||
'opacity-50': {{ $disabled ? 'true' : 'false' }}
|
||||
}" wire:loading.class="opacity-50"
|
||||
wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
|
||||
wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]">
|
||||
|
||||
{{-- Selected Tags Inside Input --}}
|
||||
<template x-for="value in selected" :key="value">
|
||||
|
|
@ -231,9 +232,10 @@ class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:
|
|||
{{-- Input Container --}}
|
||||
<div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
|
||||
class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
|
||||
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
|
||||
:style="(() => {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const accent = isDark ? '#fcd452' : '#6b16ed';
|
||||
const accent = isDark ? '#fde047' : '#d52b1f';
|
||||
const border = isDark ? '#242424' : '#e5e5e5';
|
||||
return focused
|
||||
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
|
||||
|
|
@ -241,7 +243,7 @@ class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-whit
|
|||
})()"
|
||||
:class="{
|
||||
'opacity-50': {{ $disabled ? 'true' : 'false' }}
|
||||
}" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
|
||||
}" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]">
|
||||
|
||||
{{-- Display Selected Value or Search Input --}}
|
||||
<div class="flex-1 flex items-center min-w-0 px-1">
|
||||
|
|
|
|||
|
|
@ -14,16 +14,6 @@
|
|||
@endif
|
||||
@if ($type === 'password')
|
||||
<div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
|
||||
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
|
||||
x-bind:type="type"
|
||||
x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
|
||||
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:loading.attr="disabled"
|
||||
@readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
|
||||
aria-placeholder="{{ $attributes->get('placeholder') }}"
|
||||
@if ($autofocus) x-ref="autofocusInput" @endif>
|
||||
@if ($allowToPeak)
|
||||
<button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
|
||||
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white"
|
||||
|
|
@ -45,12 +35,22 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
|
|||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
|
||||
x-bind:type="type"
|
||||
x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
|
||||
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:loading.attr="disabled"
|
||||
@readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
|
||||
aria-placeholder="{{ $attributes->get('placeholder') }}"
|
||||
@if ($autofocus) x-ref="autofocusInput" @endif>
|
||||
|
||||
</div>
|
||||
@else
|
||||
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
|
||||
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:loading.attr="disabled"
|
||||
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
|
||||
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neu
|
|||
@endif
|
||||
<select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
|
||||
wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}"
|
||||
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif>
|
||||
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif>
|
||||
{{ $slot }}
|
||||
</select>
|
||||
@error($modelBinding)
|
||||
|
|
|
|||
|
|
@ -31,21 +31,6 @@ function handleKeydown(e) {
|
|||
@else
|
||||
@if ($type === 'password')
|
||||
<div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
|
||||
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
|
||||
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:loading.attr="disabled"
|
||||
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
|
||||
aria-placeholder="{{ $attributes->get('placeholder') }}">
|
||||
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
|
||||
placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
|
||||
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
|
||||
@else
|
||||
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
||||
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" name={{ $modelBinding }}
|
||||
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
|
||||
@if ($allowToPeak)
|
||||
<button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
|
||||
class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white"
|
||||
|
|
@ -66,15 +51,30 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
|
|||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
|
||||
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
|
||||
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:loading.attr="disabled"
|
||||
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
|
||||
aria-placeholder="{{ $attributes->get('placeholder') }}">
|
||||
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
|
||||
placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
|
||||
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
|
||||
@else
|
||||
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
||||
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" name={{ $modelBinding }}
|
||||
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
|
||||
|
||||
</div>
|
||||
@else
|
||||
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
|
||||
{{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
|
||||
{{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
|
||||
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
|
||||
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
|
||||
@else
|
||||
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
||||
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
||||
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
|
||||
name="{{ $name }}" name={{ $modelBinding }}
|
||||
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<section class="bg-gray-50 dark:bg-base">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</a>
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />
|
||||
<img src="https://mapledeploy.ca/api/logo/lockup?height=80&dark=true" alt="MapleDeploy" class="hidden h-12 dark:block" />
|
||||
</div>
|
||||
<div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
|
||||
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<form class="flex flex-col gap-2" wire:submit='submit'>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<x-slot:title>{{ data_get_str($application, 'name')->limit(10) }} > Deployments | Coolify</x-slot>
|
||||
<x-slot:title>{{ data_get_str($application, 'name')->limit(10) }} > Deployments | MapleDeploy</x-slot>
|
||||
<h1>Deployments</h1>
|
||||
<livewire:project.shared.configuration-checker :resource="$application" />
|
||||
<livewire:project.application.heading :application="$application" />
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
'p-2 border-l-2 bg-white dark:bg-coolgray-100',
|
||||
'border-blue-500/50 border-dashed' =>
|
||||
data_get($deployment, 'status') === 'in_progress',
|
||||
'border-purple-500/50 border-dashed' =>
|
||||
'border-amber-500/50 border-dashed' =>
|
||||
data_get($deployment, 'status') === 'queued',
|
||||
'border-white border-dashed' =>
|
||||
data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
'px-3 py-1 rounded-md text-xs font-medium shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' =>
|
||||
data_get($deployment, 'status') === 'in_progress',
|
||||
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' =>
|
||||
'bg-amber-100/80 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' =>
|
||||
data_get($deployment, 'status') === 'queued',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' =>
|
||||
data_get($deployment, 'status') === 'failed',
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ class="pt-5">
|
|||
enabled: false,
|
||||
offsetY: -10,
|
||||
style: {
|
||||
colors: ['#FCD452'],
|
||||
colors: ['#fde047'],
|
||||
},
|
||||
background: {
|
||||
enabled: false,
|
||||
|
|
@ -77,11 +77,23 @@ class="pt-5">
|
|||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
borderColor: gridColor,
|
||||
},
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "CPU %",
|
||||
|
|
@ -127,6 +139,9 @@ class="pt-5">
|
|||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [cpuColor],
|
||||
grid: {
|
||||
borderColor: gridColor,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
|
|
@ -197,7 +212,7 @@ class="pt-5">
|
|||
enabled: false,
|
||||
offsetY: -10,
|
||||
style: {
|
||||
colors: ['#FCD452'],
|
||||
colors: ['#fde047'],
|
||||
},
|
||||
background: {
|
||||
enabled: false,
|
||||
|
|
@ -205,7 +220,7 @@ class="pt-5">
|
|||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
borderColor: gridColor,
|
||||
},
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
|
|
@ -217,6 +232,13 @@ class="pt-5">
|
|||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Memory (MB)",
|
||||
data: []
|
||||
|
|
@ -262,6 +284,9 @@ class="pt-5">
|
|||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [ramColor],
|
||||
grid: {
|
||||
borderColor: gridColor,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<x-slot:title>
|
||||
{{ data_get_str($server, 'name')->limit(10) }} > Metrics | Coolify
|
||||
{{ data_get_str($server, 'name')->limit(10) }} > Metrics | MapleDeploy
|
||||
</x-slot>
|
||||
<livewire:server.navbar :server="$server" />
|
||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
enabled: false,
|
||||
offsetY: -10,
|
||||
style: {
|
||||
colors: ['#FCD452'],
|
||||
colors: ['#fde047'],
|
||||
},
|
||||
background: {
|
||||
enabled: false,
|
||||
|
|
@ -76,11 +76,23 @@
|
|||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
borderColor: gridColor,
|
||||
},
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'CPU %',
|
||||
|
|
@ -127,6 +139,9 @@
|
|||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [cpuColor],
|
||||
grid: {
|
||||
borderColor: gridColor,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
|
|
@ -198,7 +213,7 @@
|
|||
enabled: false,
|
||||
offsetY: -10,
|
||||
style: {
|
||||
colors: ['#FCD452'],
|
||||
colors: ['#fde047'],
|
||||
},
|
||||
background: {
|
||||
enabled: false,
|
||||
|
|
@ -206,7 +221,7 @@
|
|||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
borderColor: gridColor,
|
||||
},
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
|
|
@ -218,6 +233,13 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Memory (%)",
|
||||
data: []
|
||||
|
|
@ -263,6 +285,9 @@
|
|||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [ramColor],
|
||||
grid: {
|
||||
borderColor: gridColor,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue