style(theme): apply MapleDeploy palette and fonts

This commit is contained in:
rosslh 2026-06-19 20:23:24 -04:00
parent 345c7023a7
commit ee45620324
24 changed files with 233 additions and 161 deletions

View file

@ -118,7 +118,7 @@
'navigate' => [
'show_progress_bar' => true,
'progress_bar_color' => '#6b16ed',
'progress_bar_color' => '#fde047', // MapleDeploy branding: warning yellow
],
/*

View file

@ -14,63 +14,64 @@
@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: oklch(17.3% 0 0);
--color-warning: oklch(88.13% 0.1507 91.7);
--color-warning-50: oklch(98.73% 0.0262 102.21);
--color-warning-100: oklch(97.29% 0.0693 103.19);
--color-warning-200: oklch(94.51% 0.1243 101.54);
--color-warning-300: oklch(90.52% 0.1657 98.11);
--color-warning-400: oklch(88.13% 0.1507 91.7);
--color-warning-500: oklch(86.06% 0.1731 91.94);
--color-warning-600: oklch(68.06% 0.1423 75.83);
--color-warning-700: oklch(55.38% 0.1207 66.44);
--color-warning-800: oklch(47.62% 0.1034 61.91);
--color-warning-900: oklch(42.1% 0.0897 57.71);
--color-base: oklch(17.3% 0.005 52); /* MapleDeploy branding: stone re-tint (was oklch(17.3% 0 0)) */
--color-warning: #fde047; /* MapleDeploy branding: warning palette */
--color-warning-50: #fefce8;
--color-warning-100: #fef9c3;
--color-warning-200: #fef08a;
--color-warning-300: #fde047;
--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: oklch(72.27% 0.192 149.58);
--color-error: oklch(57.71% 0.2152 27.33);
--color-coollabs-50: oklch(96.33% 0.0206 301.15);
--color-coollabs: oklch(49.65% 0.2709 289.33);
--color-coollabs-100: oklch(52.34% 0.287 289.16);
--color-coollabs-200: oklch(43.76% 0.2369 289.82);
--color-coollabs-300: oklch(38.04% 0.2031 290.47);
--color-coolgray-100: oklch(20.9% 0 0);
--color-coolgray-200: oklch(24.35% 0 0);
--color-coolgray-300: oklch(26.03% 0 0);
--color-coolgray-400: oklch(27.68% 0 0);
--color-coolgray-500: oklch(31.71% 0 0);
--color-error: #dc281c; /* MapleDeploy branding: red palette hue-normalized */
--color-coollabs-50: #fef3f1; /* MapleDeploy branding: coollabs -> red */
--color-coollabs: #d52b1f;
--color-coollabs-100: #f34d3d;
--color-coollabs-200: #bc251a;
--color-coollabs-300: #9c2117;
--color-coolgray-100: oklch(20.9% 0.006 55); /* MapleDeploy branding: stone re-tint */
--color-coolgray-200: oklch(24.35% 0.007 45); /* MapleDeploy branding: stone re-tint */
--color-coolgray-300: oklch(26.03% 0.007 38); /* MapleDeploy branding: stone re-tint */
--color-coolgray-400: oklch(27.68% 0.007 37); /* MapleDeploy branding: stone re-tint */
--color-coolgray-500: oklch(31.71% 0.008 50); /* MapleDeploy branding: stone re-tint */
/* Graphite design language (ported from ref/frontend). Layered neutral
surfaces + translucent hairlines. See DESIGN.md. */
/* Content canvas: the darkest shell layer (sRGB ~10). Hex, not oklch:
oklch lightness compresses to near-black below ~15%, so oklch(7.5%)
renders as sRGB 1 with no visible step. */
--color-app: oklch(14.48% 0 0);
--color-app: oklch(14.48% 0.004 49); /* MapleDeploy branding: stone re-tint */
/* Sidebar + topbar chrome (sRGB ~20): a clear step lighter than the content
canvas so the shell chrome separates from the content area. */
--color-panel: oklch(19.13% 0 0);
--color-panel: oklch(19.13% 0.005 53); /* MapleDeploy branding: stone re-tint */
/* Pure neutral (r=g=b). Were cool-tinted (#161618/#1c1c1e/#26262a, b>r),
which clashed with the neutral panel ladder. */
--color-surface: oklch(20.02% 0 0);
--color-raised: oklch(22.64% 0 0);
--color-selected: oklch(26.86% 0 0);
--color-fg: oklch(96.12% 0 0);
--color-fg-dim: oklch(76.99% 0 0);
--color-surface: oklch(20.02% 0.005 54); /* MapleDeploy branding: stone re-tint */
--color-raised: oklch(22.64% 0.006 52); /* MapleDeploy branding: stone re-tint */
--color-selected: oklch(26.86% 0.007 34); /* MapleDeploy branding: stone re-tint */
--color-fg: oklch(96.12% 0.001 106); /* MapleDeploy branding: stone re-tint */
--color-fg-dim: oklch(76.99% 0.008 56); /* MapleDeploy branding: stone re-tint */
/* Tertiary text. Raised from #6e6e74 (3.78:1 on base, failed WCAG AA)
to #7e7e84 so 13-14px text clears 4.5:1 on the dark surface ladder. */
--color-fg-faint: oklch(59.31% 0 0);
--color-accent: oklch(49.65% 0.2709 289.33);
--color-fg-faint: oklch(59.31% 0.013 58); /* MapleDeploy branding: stone re-tint */
--color-accent: #d52b1f; /* MapleDeploy branding: accent -> red-600 */
--color-accent-foreground: oklch(100.0% 0 0);
--color-hairline: oklch(100.0% 0 0 / 0.08);
--color-nav-text: oklch(43.86% 0 0);
--color-nav-muted: oklch(51.03% 0 0);
--color-nav-active: oklch(20.46% 0 0);
--color-log: oklch(15.91% 0 0);
--color-nav-text: oklch(43.86% 0.011 73); /* MapleDeploy branding: stone re-tint */
--color-nav-muted: oklch(51.03% 0.012 64); /* MapleDeploy branding: stone re-tint */
--color-nav-active: oklch(20.46% 0.006 55); /* MapleDeploy branding: stone re-tint */
--color-log: oklch(15.91% 0.004 50); /* MapleDeploy branding: stone re-tint */
--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
/* One restrained lift shared by every dropdown/menu/listbox panel and the
@ -84,6 +85,46 @@ @theme {
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* MapleDeploy branding: override Tailwind's red scale so red-* utilities match the 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;
/* 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);
}
/* Standard buttons have a compact physical edge. Hover lifts the face by 1px;
@ -359,7 +400,8 @@ @layer components {
*/
html,
body {
@apply w-full min-h-full bg-neutral-50 dark:bg-app dark:text-fg-dim;
/* MapleDeploy branding: text-stone-800 body text matches marketing/dashboard */
@apply w-full min-h-full text-stone-800 bg-neutral-50 dark:bg-app dark:text-fg-dim;
}
body {
@ -402,21 +444,35 @@ button[isHighlighted]:not(:disabled) {
}
h1 {
@apply text-[24px] leading-7 font-semibold tracking-tight dark:text-white;
/* MapleDeploy branding: font-display (Overlock) on large semantic headings.
h4 (16px, body size) deliberately stays on the body font. */
@apply text-[24px] leading-7 font-semibold tracking-tight 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;
}
/* MapleDeploy branding: Overlock is a display face and only reads well at
heading sizes (>= 18px). Headings downsized below that via text-size
utilities (e.g. 13-15px card and section titles) fall back to the body
font instead of inheriting font-display from the base heading styles. */
:is(h1, h2, h3):is(
[class*="text-[10"], [class*="text-[11"], [class*="text-[12"],
[class*="text-[13"], [class*="text-[14"], [class*="text-[15"],
[class*="text-[16"], [class*="text-[17"],
[class*="text-xs"], [class*="text-sm"], [class*="text-base"]) {
font-family: var(--font-sans);
}
a {
@apply hover:text-black dark:hover:text-white;
}
@ -582,8 +638,8 @@ .application-console-shell,
.terminal-fullscreen-shell {
position: relative;
isolation: isolate;
color: #f2f2f2;
background-color: #121214;
color: #f2f2f1; /* MapleDeploy branding: stone remap (was #f2f2f2) */
background-color: #141210; /* MapleDeploy branding: stone remap (was #121214) */
}
.application-console-shell {
@ -631,7 +687,7 @@ html:not(.dark) .terminal-fullscreen-shell[data-console-theme="system"] .termina
html.dark .application-console-shell[data-console-theme="system"],
html.dark .terminal-fullscreen-shell[data-console-theme="system"] {
--console-theme-background: oklch(18.31% 0.004 285.99);
--console-theme-background: oklch(18.31% 0.005 52); /* MapleDeploy branding: stone re-tint (was oklch(18.31% 0.004 285.99)) */
--console-theme-border: rgb(255 255 255 / 0.08);
}
@ -1127,40 +1183,40 @@ :root {
}
.dark {
--color-accent: oklch(88.13% 0.1507 91.7);
--color-accent: #fde047; /* MapleDeploy branding: dark-mode accent -> warning */
/* Dark surface ladder in hex (sRGB), not oklch: oklch lightness compresses
to near-black below ~15%, so oklch(15%) rendered as sRGB 11 and cards
could not lift off the content canvas (sRGB 10). These give clear,
visible steps: content 10 -> elevated 22 -> base 28 -> recessed 34.
Pure neutral (r=g=b), matching the neutral borders/text and the light
ladder, so every panel shares one temperature (no blue cast). */
--coollabs-canvas: oklch(14.48% 0 0);
--coollabs-elevated: oklch(20.02% 0 0);
--coollabs-recessed: oklch(25.2% 0 0);
--coollabs-base: oklch(22.64% 0 0);
--coollabs-fill: oklch(29.31% 0 0);
--coollabs-line: oklch(32% 0 0);
--coollabs-canvas: oklch(14.48% 0.004 49); /* MapleDeploy branding: stone re-tint */
--coollabs-elevated: oklch(20.02% 0.005 54); /* MapleDeploy branding: stone re-tint */
--coollabs-recessed: oklch(25.2% 0.007 42); /* MapleDeploy branding: stone re-tint */
--coollabs-base: oklch(22.64% 0.006 52); /* MapleDeploy branding: stone re-tint */
--coollabs-fill: oklch(29.31% 0.008 44); /* MapleDeploy branding: stone re-tint */
--coollabs-line: oklch(32% 0.0085 50.61); /* MapleDeploy branding: stone re-tint */
/* Crisped from 26.9% (1.36:1 on canvas) to 32% (1.63:1) so dark cards
and tables show a visible edge instead of blending into the canvas. */
--coollabs-hairline: oklch(32% 0 0);
--coollabs-subtle: oklch(70.8% 0 0);
--coollabs-hairline: oklch(32% 0.0085 50.61); /* MapleDeploy branding: stone re-tint */
--coollabs-subtle: oklch(70.8% 0.01 56.27); /* MapleDeploy branding: stone re-tint */
/* Neutral (was #a8a8b0 / #7a7a84, both cool-tinted). Sidebar text now shares
the same neutral temperature as the content text, so the sidebar no longer
reads cooler than the panels/cards. */
--color-nav-text: oklch(73.8% 0 0);
--color-nav-text: oklch(73.8% 0.009 56); /* MapleDeploy branding: stone re-tint */
/* Raised from 58.97% (4.47:1 on panel, just under AA) to 61% (4.86:1) so the
11px sidebar section labels clear 4.5:1. */
--color-nav-muted: oklch(61% 0 0);
--color-nav-active: oklch(96.12% 0 0);
--color-nav-muted: oklch(61% 0.012 58); /* MapleDeploy branding: stone re-tint */
--color-nav-active: oklch(96.12% 0.001 106); /* MapleDeploy branding: stone re-tint */
/* Tertiary text. Base token (59.31%) only clears 4.5:1 on app/panel; it
failed on surface/raised/selected (4.46/4.20/3.73). Raised to 64% so the
313 dark:text-fg-faint usages clear AA across the whole surface ladder,
while staying clearly dimmer than fg-dim (76.99%). */
--color-fg-faint: oklch(65% 0 0);
--color-fg-faint: oklch(65% 0.012 59); /* MapleDeploy branding: stone re-tint */
/* Error text. The base error red (57.71%) failed on every dark surface
(4.10/3.75/3.53). Brightened for dark mode so text-error clears AA on the
card ladder while staying unmistakably red. */
--color-error: oklch(66% 0.2 27.33);
--color-error: oklch(66% 0.2 29.38); /* MapleDeploy branding: brand red hue */
}
/* Light-mode semantic text.
@ -1175,13 +1231,13 @@ .dark {
html:not(.dark) {
--color-warning: oklch(50% 0.105 80);
--color-success: oklch(48% 0.135 149.58);
--color-error: oklch(52% 0.2 27.33);
--color-error: oklch(52% 0.2 29.38); /* MapleDeploy branding: brand red hue */
}
/* Theme surfaces are derived from one brand color. Changing
--theme-base-color is enough to generate a complete dark surface ladder. */
html[data-theme="custom"] {
--theme-base-color: oklch(49.65% 0.2709 289.33);
--theme-base-color: #d52b1f; /* MapleDeploy branding: default custom-theme base -> red-600 */
--theme-bright-color: color-mix(in srgb, var(--theme-base-color) 85%, oklch(100% 0 0));
--theme-scrollbar-thumb: color-mix(in srgb, var(--theme-bright-color) 70%, var(--theme-accent-foreground));
--theme-border-color: color-mix(in oklab, var(--theme-base-color) 42%, oklch(44.19% 0.0146 285.79));
@ -1967,7 +2023,7 @@ .resource-heading-tabs-scroller {
.dark .resource-heading-tabs-scroller {
/* Matches dark:bg-white/[0.035] pill track + panel so fade blends */
--resource-heading-tabs-fade: color-mix(in srgb, var(--color-panel, #0a0a0a) 96.5%, white);
--resource-heading-tabs-fade: color-mix(in srgb, var(--color-panel, #0b0a09) 96.5%, white); /* MapleDeploy branding: stone remap */
}
.resource-heading-tabs-control {
@ -2032,8 +2088,8 @@ .resource-heading-tabs-control-icon {
}
.dark .resource-heading-tabs-control-icon {
color: var(--color-fg-dim, #a3a3a3);
background: var(--color-raised, #171717);
color: var(--color-fg-dim, #a8a29e); /* MapleDeploy branding: stone remap */
background: var(--color-raised, #191615); /* MapleDeploy branding: stone remap */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.1);
@ -2047,8 +2103,8 @@ .resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon
.dark .resource-heading-tabs-control:hover .resource-heading-tabs-control-icon,
.dark .resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon {
color: var(--color-fg, #fafafa);
background: var(--color-raised, #171717);
color: var(--color-fg, #fafaf9); /* MapleDeploy branding: stone remap */
background: var(--color-raised, #191615); /* MapleDeploy branding: stone remap */
}
.resource-heading-tabs-control:focus {
@ -2057,7 +2113,7 @@ .resource-heading-tabs-control:focus {
.resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-coollabs, #6b16ed) 45%, transparent),
0 0 0 2px color-mix(in srgb, var(--color-coollabs, #d52b1f) 45%, transparent), /* MapleDeploy branding */
0 0 0 1px rgba(0, 0, 0, 0.08);
}
@ -2434,7 +2490,7 @@ .dark .searchable-listbox-search-input {
}
.searchable-listbox-search-input::placeholder {
color: var(--color-fg-faint, #737373);
color: var(--color-fg-faint, #78716c); /* MapleDeploy branding: stone remap */
}
.searchable-listbox-search-input:focus {
@ -2467,7 +2523,7 @@ .searchable-listbox-empty {
padding: 0.75rem 0.5rem;
text-align: center;
font-size: 0.75rem;
color: var(--color-fg-dim, #737373);
color: var(--color-fg-dim, #78716c); /* MapleDeploy branding: stone remap */
}
/* Flush layer-card body (tables and other full-bleed content) */
@ -3415,7 +3471,7 @@ .logs-viewer {
.dark .logs-viewer {
background: var(--color-log);
color: #f5f5f5;
color: #f5f5f4; /* MapleDeploy branding: stone remap (stone-100) */
}
.logs-viewer-toolbar {
@ -3497,7 +3553,7 @@ .logs-viewer-lines-label {
}
.dark .logs-viewer-lines-label {
color: var(--color-fg-faint, #6e6e74);
color: var(--color-fg-faint, #756d67); /* MapleDeploy branding: stone remap */
}
.logs-viewer-lines-input {
@ -3534,7 +3590,7 @@ .logs-viewer-status-badge {
.dark .logs-viewer-status-badge {
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: #d4d4d4 !important;
color: #d6d3d1 !important; /* MapleDeploy branding: stone remap (stone-300) */
}
/* Section header status (proxy/sentinel) stays inline with title on mobile */
@ -3659,12 +3715,12 @@ .logs-viewer-btn:hover {
}
.dark .logs-viewer-btn {
color: #a3a3a3;
color: #a8a29e; /* MapleDeploy branding: stone remap (stone-400) */
}
.dark .logs-viewer-btn:hover {
background: rgba(255, 255, 255, 0.06);
color: #f5f5f5;
color: #f5f5f4; /* MapleDeploy branding: stone remap (stone-100) */
}
.logs-viewer-btn-active {

View file

@ -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');
}

View file

@ -36,15 +36,15 @@ @utility input-sticky {
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #e5e5e5;
&:where(.dark, .dark *) {
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #242424;
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #272322; /* MapleDeploy branding: stone remap (was #242424) */
}
&: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 #272322; /* MapleDeploy branding: stone remap (was #242424) */
}
}
@ -182,7 +182,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 user-menu-item {
@ -279,7 +279,8 @@ @utility icon {
}
@utility scrollbar {
@apply scrollbar-thumb-coollabs-100 scrollbar-track-neutral-200 dark:scrollbar-thumb-coollabs-100 dark:scrollbar-track-coolgray-200 scrollbar-thin;
/* MapleDeploy branding: yellow scrollbar thumb instead of Coolify brand color */
@apply scrollbar-thumb-warning scrollbar-track-neutral-200 dark:scrollbar-thumb-warning dark:scrollbar-track-coolgray-200 scrollbar-thin;
}
@utility main {
@ -339,7 +340,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 {
@ -411,7 +413,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 {

Binary file not shown.

Binary file not shown.

View file

@ -43,17 +43,17 @@ function createApplicationTerminalTheme(accent, colors = {}) {
return {
...baseApplicationTerminalTheme,
cursor: accent,
cursorAccent: '#101012',
cursorAccent: '#12100e', // MapleDeploy branding: stone remap (was #101012)
selectionBackground: `${accent}66`,
...colors,
};
}
function customThemeAccent() {
const color = localStorage.getItem('themeColor') || '#6b16ed';
const color = localStorage.getItem('themeColor') || '#d52b1f'; // MapleDeploy branding: custom theme default color
if (!/^#[0-9a-f]{6}$/i.test(color)) {
return '#7c3aed';
return '#d52b1f'; // MapleDeploy branding
}
const channels = color.match(/[a-f\d]{2}/gi).map((channel) => (
@ -69,7 +69,7 @@ function createSystemTerminalTheme() {
}
if (document.documentElement.classList.contains('dark')) {
return createApplicationTerminalTheme('#8C8E9C');
return createApplicationTerminalTheme('#958D89'); // MapleDeploy branding: stone remap (was #8C8E9C)
}
return createApplicationTerminalTheme('#52525b', {
@ -143,7 +143,7 @@ const applicationTerminalThemes = {
cyan: '#51d5d5',
brightMagenta: '#ffa1d4',
}),
'shadows-transparent': createApplicationTerminalTheme('#8C8E9C'),
'shadows-transparent': createApplicationTerminalTheme('#958D89'), // MapleDeploy branding: stone remap (was #8C8E9C)
};
function logTerminal(level, message, ...context) {

View file

@ -99,10 +99,11 @@
{{-- 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; dark border #272322 stone remap (was #242424) --}}
:style="(() => {
const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fcd452' : '#6b16ed';
const border = isDark ? '#242424' : '#e5e5e5';
const accent = isDark ? '#fde047' : '#d52b1f';
const border = isDark ? '#272322' : '#e5e5e5';
return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
: 'box-shadow: inset 4px 0 0 transparent, 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_#272322]">
{{-- Selected Tags Inside Input --}}
<template x-for="value in selected" :key="value">
@ -240,17 +241,18 @@ class="pointer-events-none absolute inset-0 rounded-[5px] border border-neutral-
{{-- 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; dark border #272322 stone remap (was #242424) --}}
:style="(() => {
const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fcd452' : '#6b16ed';
const border = isDark ? '#242424' : '#e5e5e5';
const accent = isDark ? '#fde047' : '#d52b1f';
const border = isDark ? '#272322' : '#e5e5e5';
return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
: 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px ' + border + ';';
})()"
: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_#272322]">
{{-- Display Selected Value or Search Input --}}
<div class="flex-1 flex items-center min-w-0 px-1">

View file

@ -211,7 +211,7 @@
@readonly($readonly)
@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]"
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_#272322]"
@endif
wire:loading.attr="disabled"
@disabled($disabled)

View file

@ -28,16 +28,6 @@
</div>
@elseif ($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="password-toggle flex absolute inset-y-0 right-0 z-10 items-center pr-2 cursor-pointer text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white"
@ -48,12 +38,22 @@ class="password-toggle flex absolute inset-y-0 right-0 z-10 items-center pr-2 cu
<x-reicon name="eye-off2" x-cloak x-show="type === 'text'" class="size-[18px]" />
</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_#272322]" @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_#272322]" @endif
wire:loading.attr="disabled"
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"

View file

@ -46,10 +46,11 @@
inherit: true,
rules: [],
colors: {
'editor.background': '#0b0b0c',
'editorGutter.background': '#0b0b0c',
'editorStickyScroll.background': '#0b0b0c',
'minimap.background': '#0b0b0c',
// MapleDeploy branding: stone remap (was #0b0b0c)
'editor.background': '#0d0b0a',
'editorGutter.background': '#0d0b0a',
'editorStickyScroll.background': '#0d0b0a',
'minimap.background': '#0d0b0a',
'scrollbarSlider.background': '#ffffff1a',
'scrollbarSlider.hoverBackground': '#ffffff2e',
'scrollbarSlider.activeBackground': '#ffffff40',

View file

@ -14,7 +14,7 @@ class="mb-0! flex items-center gap-1 text-sm font-medium leading-4 {{ $disabled
@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_#272322]" @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_#272322]" @endif>
{{ $slot }}
</select>
@error($modelBinding)

View file

@ -36,21 +36,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"
@ -71,15 +56,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_#272322]" @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_#272322]"
@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_#272322]" @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_#272322]"
@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_#272322]" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
name="{{ $name }}" name={{ $modelBinding }}
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>

View file

@ -47,7 +47,7 @@
document.documentElement.classList.remove('dark');
}
document.documentElement.dataset.theme = userSettings === 'custom' ? 'custom' : (isDark ? 'dark' : 'light');
document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#12100e' : '#ffffff'); // MapleDeploy branding: stone remap (was #101010)
}
}">
{{-- Search is only useful when workspace resources are available --}}

View file

@ -14,7 +14,7 @@ class="terminal-theme-trigger flex h-8 items-center gap-2 rounded-md px-2.5 text
</button>
<div x-cloak x-show="themeOpen" x-transition.origin.top.right
class="console-theme-selector absolute top-11 right-0 z-50 max-h-80 w-56 overflow-y-auto rounded-lg border border-neutral-200 bg-white p-1 shadow-[var(--shadow-dropdown)] dark:border-white/[0.1] dark:bg-[#111113]">
class="console-theme-selector absolute top-11 right-0 z-50 max-h-80 w-56 overflow-y-auto rounded-lg border border-neutral-200 bg-white p-1 shadow-[var(--shadow-dropdown)] dark:border-white/[0.1] dark:bg-[#13110f]"> {{-- MapleDeploy branding: stone remap (was #111113) --}}
@foreach ($themes as $theme)
<button type="button"
class="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[11px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 dark:text-white/65 dark:hover:bg-white/[0.07] dark:hover:text-white"

View file

@ -76,7 +76,7 @@ class="size-3.5 text-coollabs dark:text-warning" viewBox="0 0 12 12" fill="none"
@foreach ([
['value' => 'light', 'label' => 'Light', 'description' => 'Bright surfaces and dark text.', 'preview' => 'bg-white'],
['value' => 'system', 'label' => 'System', 'description' => 'Follow your operating system.', 'preview' => 'bg-gradient-to-r from-white via-neutral-400 to-[#050505]'],
['value' => 'dark', 'label' => 'Dark', 'description' => 'Dark surfaces and soft contrast.', 'preview' => 'bg-[#181818]'],
['value' => 'dark', 'label' => 'Dark', 'description' => 'Dark surfaces and soft contrast.', 'preview' => 'bg-[#1a1716]'],
['value' => 'custom', 'label' => 'Custom', 'description' => 'Tint light or dark surfaces with any color.', 'preview' => ''],
] as $option)
@if ($option['value'] === 'custom')
@ -160,7 +160,7 @@ class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white t
? 'ring-1 ring-coollabs/30 border-coollabs/40 dark:ring-warning/30 dark:border-warning/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]">
<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-[#1a1716]">
<div class="w-3 shrink-0 rounded-sm bg-neutral-200 dark:bg-white/10"></div>
<div @class([
'h-full rounded-sm bg-neutral-200 dark:bg-white/10',

View file

@ -41,7 +41,7 @@
document.documentElement.dataset.theme = theme === 'custom' ? 'custom' : (isDark ? 'dark' : 'light');
document.documentElement.style.setProperty('--theme-base-color', window.hexToOklch(themeColor));
document.documentElement.style.setProperty('--theme-accent-foreground', window.themeAccentForeground(themeColor));
document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#12100e' : '#ffffff'); // MapleDeploy branding: stone remap (was #101010)
};
// Single source for the theme controls Alpine state, shared by the
// Appearance page and the profile dropdown via x-data="themeControls()".
@ -123,7 +123,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#101010" id="theme-color-meta" />
{{-- MapleDeploy branding: stone remap (was #101010) --}}
<meta name="theme-color" content="#12100e" id="theme-color-meta" />
<meta name="color-scheme" content="dark light" />
{{-- MapleDeploy branding --}}
<meta name="Description" content="MapleDeploy: Managed Coolify hosting on Canadian infrastructure" />
@ -159,7 +160,7 @@
// Update theme-color meta tag (non-critical, can run async)
const t = localStorage.theme || 'dark';
const isDark = t === 'dark' || t === 'custom' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
document.getElementById('theme-color-meta')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
document.getElementById('theme-color-meta')?.setAttribute('content', isDark ? '#12100e' : '#ffffff'); // MapleDeploy branding: stone remap (was #101010)
</script>
<style>
[x-cloak] {
@ -251,7 +252,7 @@
let ramColor = '#00ced1'
let textColor = '#ffffff'
let gridColor = '#44403c'
let editorBackground = '#181818'
let editorBackground = '#1a1716' // MapleDeploy branding: stone remap (was #181818)
let editorTheme = 'blackboard'
function checkTheme() {
@ -264,7 +265,7 @@ function checkTheme() {
ramColor = '#00ced1'
textColor = '#ffffff'
gridColor = '#44403c'
editorBackground = '#181818'
editorBackground = '#1a1716' // MapleDeploy branding: stone remap (was #181818)
editorTheme = 'blackboard'
} else {
cpuColor = '#1e90ff'

View file

@ -1,6 +1,6 @@
<div>
@unless ($embedded)
<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>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" wire:key="application-heading-deployment-index" />
@endunless

View file

@ -367,7 +367,7 @@ class="logs-viewer-btn">
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-lg border border-neutral-200 bg-white p-1 shadow-dropdown focus:outline-none dark:border-white/[0.1] dark:bg-[#181818]">
class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-lg border border-neutral-200 bg-white p-1 shadow-dropdown focus:outline-none dark:border-white/[0.1] dark:bg-[#1a1716]"> {{-- MapleDeploy branding: stone remap (was #181818) --}}
<div>
<button x-on:click="downloadLogs(); downloadMenuOpen = false"
class="listbox-option text-neutral-700! hover:bg-neutral-100! dark:text-neutral-200! dark:hover:bg-white/[0.07]!">

View file

@ -7,7 +7,8 @@ class="flex min-h-0 flex-col gap-3">
Volume names are prefixed with the service UUID when you save to prevent collisions.
</x-callout>
<div class="compose-editor-container min-h-[24rem] overflow-hidden rounded-lg border border-neutral-200 bg-white dark:border-white/[0.10] dark:bg-[#0b0b0c]"
{{-- MapleDeploy branding: stone remap (was #0b0b0c, matches Monaco editor.background) --}}
<div class="compose-editor-container min-h-[24rem] overflow-hidden rounded-lg border border-neutral-200 bg-white dark:border-white/[0.10] dark:bg-[#0d0b0a]"
style="--editor-height: clamp(24rem, calc(100dvh - 25rem), 48rem)">
<div x-cloak x-show="raw" class="font-mono">
<div x-cloak x-show="showNormalTextarea">

View file

@ -18,7 +18,8 @@
$consoleUnavailable = ($type === 'server' && (! $servers->first()->isTerminalEnabled() || ! $servers->first()->isFunctional()))
|| ($type !== 'server' && $containersLoaded && $containers->isEmpty());
$consoleThemes = [
['key' => 'system', 'name' => 'System', 'background' => 'linear-gradient(135deg, #ffffff 0 50%, #121214 50% 100%)', 'accent' => '#8C8E9C'],
// MapleDeploy branding: stone remap (system/blur-black swatches: was #121214 / #8C8E9C)
['key' => 'system', 'name' => 'System', 'background' => 'linear-gradient(135deg, #ffffff 0 50%, #141210 50% 100%)', 'accent' => '#958D89'],
['key' => 'shadows-midnight', 'name' => 'Midnight', 'background' => 'linear-gradient(135deg, #2a3b4c, rgba(42, 59, 76, 0.4))', 'accent' => '#6d7a7c'],
['key' => 'shadows-golden-hour', 'name' => 'Golden Hour', 'background' => 'linear-gradient(135deg, #d58a42, rgba(213, 138, 66, 0.4))', 'accent' => '#bf8c3c'],
['key' => 'shadows-cosmic-purple', 'name' => 'Cosmic Purple', 'background' => 'linear-gradient(135deg, #5d3e66, rgba(93, 62, 102, 0.4))', 'accent' => '#A76DBE'],
@ -28,7 +29,7 @@
['key' => 'shadows-golden-nebula', 'name' => 'Golden Nebula', 'background' => 'linear-gradient(135deg, #ffd700, #ff6347, #d4a20e, #ffcc00, #1f3d6f)', 'accent' => '#d4a20e'],
['key' => 'shadows-cosmic-lagoon', 'name' => 'Cosmic Lagoon', 'background' => 'linear-gradient(135deg, #1d2b64, #2f4f96, #00b5b8, #9c27b0, #8e24aa)', 'accent' => '#00b5b8'],
['key' => 'shadows-neon-nebula', 'name' => 'Neon Nebula', 'background' => 'linear-gradient(135deg, #00d9d9, #ff55aa, #1e1e2f, #2f3b57, #ff99ff)', 'accent' => '#ff55aa'],
['key' => 'shadows-transparent', 'name' => 'Blur Black', 'background' => 'rgba(0, 0, 0, 0.7)', 'accent' => '#8C8E9C'],
['key' => 'shadows-transparent', 'name' => 'Blur Black', 'background' => 'rgba(0, 0, 0, 0.7)', 'accent' => '#958D89'],
];
$consoleThemeKeys = collect($consoleThemes)->pluck('key')->values();
$consoleThemeNames = collect($consoleThemes)->pluck('name', 'key');

View file

@ -106,7 +106,7 @@
enabled: false,
},
grid: {
borderColor: 'rgba(128, 128, 128, 0.14)',
borderColor: gridColor, // MapleDeploy branding
strokeDashArray: 4,
},
legend: {
@ -175,6 +175,9 @@
name: 'CPU',
data: chartData[0].seriesData,
}],
grid: {
borderColor: gridColor, // MapleDeploy branding
},
xaxis: {
type: 'datetime',
labels: {
@ -257,7 +260,7 @@
enabled: false,
},
grid: {
borderColor: 'rgba(128, 128, 128, 0.14)',
borderColor: gridColor, // MapleDeploy branding
strokeDashArray: 4,
},
legend: {
@ -322,6 +325,9 @@
name: 'Memory',
data: chartData[0].seriesData,
}],
grid: {
borderColor: gridColor, // MapleDeploy branding
},
xaxis: {
type: 'datetime',
labels: {

View file

@ -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" />
@ -109,7 +109,7 @@ class="server-settings-workspace application-settings-workspace mt-4 grid w-full
enabled: false,
},
grid: {
borderColor: 'rgba(128, 128, 128, 0.14)',
borderColor: gridColor, // MapleDeploy branding
strokeDashArray: 4,
},
legend: {
@ -189,6 +189,9 @@ class="server-settings-workspace application-settings-workspace mt-4 grid w-full
name: 'CPU',
data: chartData[0].seriesData,
}],
grid: {
borderColor: gridColor, // MapleDeploy branding
},
xaxis: {
type: 'datetime',
labels: {
@ -227,6 +230,9 @@ class="server-settings-workspace application-settings-workspace mt-4 grid w-full
name: 'Memory',
data: chartData[0].seriesData,
}],
grid: {
borderColor: gridColor, // MapleDeploy branding
},
xaxis: {
type: 'datetime',
labels: {

View file

@ -1,6 +1,7 @@
@php
$consoleThemes = [
['key' => 'system', 'name' => 'System', 'background' => 'linear-gradient(135deg, #ffffff 0 50%, #121214 50% 100%)', 'accent' => '#8C8E9C'],
// MapleDeploy branding: stone remap (system/blur-black swatches: was #121214 / #8C8E9C)
['key' => 'system', 'name' => 'System', 'background' => 'linear-gradient(135deg, #ffffff 0 50%, #141210 50% 100%)', 'accent' => '#958D89'],
['key' => 'shadows-midnight', 'name' => 'Midnight', 'background' => 'linear-gradient(135deg, #2a3b4c, rgba(42, 59, 76, 0.4))', 'accent' => '#6d7a7c'],
['key' => 'shadows-golden-hour', 'name' => 'Golden Hour', 'background' => 'linear-gradient(135deg, #d58a42, rgba(213, 138, 66, 0.4))', 'accent' => '#bf8c3c'],
['key' => 'shadows-cosmic-purple', 'name' => 'Cosmic Purple', 'background' => 'linear-gradient(135deg, #5d3e66, rgba(93, 62, 102, 0.4))', 'accent' => '#A76DBE'],
@ -10,7 +11,7 @@
['key' => 'shadows-golden-nebula', 'name' => 'Golden Nebula', 'background' => 'linear-gradient(135deg, #ffd700, #ff6347, #d4a20e, #ffcc00, #1f3d6f)', 'accent' => '#d4a20e'],
['key' => 'shadows-cosmic-lagoon', 'name' => 'Cosmic Lagoon', 'background' => 'linear-gradient(135deg, #1d2b64, #2f4f96, #00b5b8, #9c27b0, #8e24aa)', 'accent' => '#00b5b8'],
['key' => 'shadows-neon-nebula', 'name' => 'Neon Nebula', 'background' => 'linear-gradient(135deg, #00d9d9, #ff55aa, #1e1e2f, #2f3b57, #ff99ff)', 'accent' => '#ff55aa'],
['key' => 'shadows-transparent', 'name' => 'Blur Black', 'background' => 'rgba(0, 0, 0, 0.7)', 'accent' => '#8C8E9C'],
['key' => 'shadows-transparent', 'name' => 'Blur Black', 'background' => 'rgba(0, 0, 0, 0.7)', 'accent' => '#958D89'],
];
$consoleThemeKeys = collect($consoleThemes)->pluck('key')->values();
$consoleThemeNames = collect($consoleThemes)->pluck('name', 'key');
@ -279,7 +280,8 @@ class="px-2 py-5 text-center text-[11px] text-white/35">
</div>
</div>
@elseif ($servers->isEmpty())
<div class="flex h-full min-h-0 items-center justify-center bg-[#141414] px-4">
{{-- MapleDeploy branding: stone remap (was #141414) --}}
<div class="flex h-full min-h-0 items-center justify-center bg-[#161312] px-4">
<x-empty size="lg" title="No terminal targets available"
description="Connect a reachable server and enable terminal access to start a session."
icon-name="browser-terminal" />