coolify/resources/css/app.css

@import "./fonts.css" layer(base);

@import "tailwindcss";

@import "./utilities.css";

@plugin 'tailwind-scrollbar';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';


@source '../../storage/framework/views/*.php';

@custom-variant dark (&:where(.dark, .dark *));

/* MapleDeploy branding: Canadian red accent, stone greys */
@theme {
    --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: #292524;
    --color-warning: #fde047;
    --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: #22C55E;
    --color-error: #dc2626;
    --color-coollabs-50: #fef3f2;
    --color-coollabs: #d52b1e;
    --color-coollabs-100: #f34d40;
    --color-coollabs-200: #bc2519;
    --color-coollabs-300: #9c2118;
    --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);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-coolgray-200, currentcolor);
    }
}

@keyframes lds-heart {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.2);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(0.9);
    }
}

/*
* Base styles
*/
html,
body {
    /* 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 {
    @apply min-h-screen text-sm font-sans antialiased scrollbar overflow-x-hidden;
}

.coolify-monaco-editor {
    @apply min-w-0 w-full;
    overflow-x: hidden;
}

.coolify-monaco-editor .monaco-editor,
.coolify-monaco-editor .overflow-guard {
    max-width: 100%;
}

option {
    @apply dark:text-white dark:bg-coolgray-100;
}

button[isError]:not(:disabled) {
    @apply text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-800 hover:bg-red-300 hover:text-white dark:hover:bg-red-800 dark:hover:text-white;
}

button[isHighlighted]:not(:disabled) {
    @apply text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;
}

h1 {
    @apply text-3xl font-bold font-display dark:text-white;
}

h2 {
    @apply text-xl font-bold font-display dark:text-white;
}

h3 {
    @apply text-lg font-bold font-display dark:text-white;
}

h4 {
    @apply text-base font-bold font-display dark:text-white;
}

a {
    @apply hover:text-black dark:hover:text-white;
}

button:focus-visible,
a:focus-visible {
    @apply outline-none ring-2 ring-coollabs dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100;
}

label {
    @apply dark:text-neutral-400;
}

table {
    @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300;
}

thead {
    @apply uppercase;
}

tbody {
    @apply divide-y dark:divide-coolgray-200 divide-neutral-300;
}

tr {
    @apply text-black dark:text-neutral-400 dark:hover:bg-coolgray-300 hover:bg-neutral-100;
}

tr th {
    @apply px-3 py-3.5 text-left text-black dark:text-white;
}

tr th:first-child {
    @apply py-3.5 pr-3 pl-4 sm:pl-6;
}

tr td {
    @apply px-3 py-4 whitespace-nowrap;
}

tr td:first-child {
    @apply pr-3 pl-4 font-bold sm:pl-6;
}

section {
    @apply mb-12;
}

/*
* Utility classes
*/
.input[type="password"] {
    @apply pr-[2.4rem];
}

.lds-heart {
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.log-highlight {
    background-color: rgba(234, 179, 8, 0.4);
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dark .log-highlight {
    background-color: rgba(234, 179, 8, 0.3);
}