index.css

/**
 * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
 * Licensed under the GNU Affero General Public License (AGPL).
 * See License.AGPL.txt in the project root for license information.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html,
    body {
        @apply h-full;
    }
    body {
        @apply bg-white dark:bg-gitpod-black text-black dark:text-white;
    }
    h1 {
        @apply text-gray-900 dark:text-gray-100 font-bold;
        line-height: 64px;
        font-size: 48px;
    }
    h2 {
        @apply text-base text-gray-500 dark:text-gray-400;
    }
    h3 {
        @apply text-2xl text-gray-800 dark:text-gray-100 leading-9 font-semibold;
    }
    h4 {
        @apply pb-2 text-sm font-semibold text-gray-600 dark:text-gray-400;
    }
    p {
        @apply text-sm text-gray-400 dark:text-gray-600;
    }

    .app-container {
        @apply lg:px-28 px-4;
    }
    .btn-login {
        @apply rounded-md border-none bg-gray-100 hover:bg-gray-200 text-gray-500 dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600;
    }
    .dark .dark\:filter-invert {
        @apply filter-invert;
    }
    .grayed {
        filter: grayscale(100%);
    }
    .grayed:hover {
        filter: none;
    }
}

@layer components {
    button {
        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
    }
    button.reset {
        @apply bg-transparent hover:bg-transparent font-normal rounded-none;
        padding: unset;
        text-align: start;
    }
    button.secondary {
        @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600;
    }
    button.danger {
        @apply bg-red-600 hover:bg-red-700 text-gray-100 dark:text-red-100;
    }
    button.danger.secondary {
        @apply bg-red-50 dark:bg-red-300 hover:bg-red-100 dark:hover:bg-red-200 text-red-600 hover:text-red-700;
    }
    button:disabled {
        @apply cursor-default opacity-50 pointer-events-none;
    }

    button.gp-link {
        @apply bg-transparent hover:bg-transparent p-0 font-normal rounded-none;
    }

    .gp-link {
        @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 cursor-pointer;
    }

    code {
        @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
    }

    textarea,
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    select {
        @apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
    }
    textarea::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="number"]::placeholder,
    input[type="search"]::placeholder,
    input[type="password"]::placeholder,
    input[type="email"]::placeholder,
    input[type="url"]::placeholder {
        @apply text-gray-400 dark:text-gray-500;
    }
    input[type="text"].error,
    input[type="tel"].error,
    input[type="number"].error,
    input[type="search"].error,
    input[type="password"].error,
    input[type="email"].error,
    input[type="url"].error,
    select.error {
        @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
    }
    select[disabled],
    textarea[disabled],
    input[disabled] {
        @apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
    }
    input[type="radio"] {
        @apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
    }

    /* Search */
    input[type="search"] {
        @apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-md focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
    }
    input[type="checkbox"] {
        @apply disabled:opacity-50;
    }
    progress {
        @apply h-2 rounded;
    }
    progress::-webkit-progress-bar {
        @apply rounded-md bg-gray-200 dark:bg-gray-600;
    }
    progress::-webkit-progress-value {
        @apply rounded-md bg-green-500;
    }
    progress::-moz-progress-bar {
        @apply rounded-md bg-green-500;
    }
}