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;

    --color-base: #1c1917;
    --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: #292524;
    --color-coolgray-300: #44403c;
    --color-coolgray-400: #57534e;
    --color-coolgray-500: #78716c;
}

/*
  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 {
    @apply w-full min-h-full bg-gray-50 dark:bg-base dark:text-neutral-400;
}

body {
    @apply min-h-screen text-sm 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-black hover:bg-neutral-200;
}

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