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

@theme {
    --font-sans: Inter, sans-serif;

    --color-base: #101010;
    --color-warning: #fcd452;
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-coollabs: #6b16ed;
    --color-coollabs-100: #7317ff;
    --color-coolgray-100: #181818;
    --color-coolgray-200: #202020;
    --color-coolgray-300: #242424;
    --color-coolgray-400: #282828;
    --color-coolgray-500: #323232;
}

/*
  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-neutral-50 dark:bg-base dark:text-neutral-400;
}

body {
    @apply min-h-screen text-sm antialiased scrollbar;
}

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

button[isError]:not(:disabled) {
    @apply text-white bg-red-600 hover:bg-red-700;
}

button[isHighlighted]:not(:disabled) {
    @apply text-white bg-coollabs hover:bg-coollabs-100;
}

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

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

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

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

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

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