next-gdrive-index/src/styles/globals.css

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

:root {
    --animation-duration: 300ms;
    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    @apply outline outline-red-500/0 !important;
}

/* Base */
@layer base {
    html {
        @apply text-sm tablet:text-base;
    }

    * {
        @apply focus:outline focus:outline-blue-400 focus:rounded;
        @apply dark:focus:outline-blue-600;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        @apply w-1.5;
    }

    html ::-webkit-scrollbar-track {
        @apply bg-zinc-100 rounded;
    }

    html ::-webkit-scrollbar-thumb {
        @apply bg-zinc-400 rounded;
    }

    html ::-webkit-scrollbar-thumb:hover {
        @apply bg-zinc-500;
    }

    html.dark ::-webkit-scrollbar-track {
        @apply bg-zinc-500;
    }

    html.dark ::-webkit-scrollbar-thumb {
        @apply bg-zinc-900;
    }

    html.dark ::-webkit-scrollbar-thumb:hover {
        @apply bg-zinc-800;
    }

    /* Text */
    a, .interactive {
        @apply opacity-90;
        @apply hover:opacity-100;
        @apply transition-opacity duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    a[role='url'] {
        @apply opacity-100 text-blue-600;
        @apply hover:text-blue-500;
        @apply active:text-blue-700;
        @apply focus:underline;
        @apply dark:text-blue-500;
        @apply dark:hover:text-blue-400;
        @apply dark:active:text-blue-600;
        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    button {
        @apply bg-blue-600 text-zinc-100 px-4 py-2 rounded-xl opacity-100;
        @apply hover:bg-blue-500 hover:text-zinc-100;
        @apply active:bg-blue-700 active:text-zinc-100;
        @apply focus:outline-none;
        @apply dark:bg-blue-500 dark:text-zinc-100;
        @apply dark:hover:bg-blue-400 dark:hover:text-zinc-100;
        @apply dark:active:bg-blue-600 dark:active:text-zinc-100;
        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    button.ghost {
        @apply bg-transparent border border-blue-600 px-4 py-2 rounded-xl opacity-100;
        @apply hover:bg-blue-100;
        @apply active:bg-blue-200;
        @apply focus:outline-none;
        @apply dark:border-blue-500;
        @apply dark:hover:bg-blue-800;
        @apply dark:active:bg-blue-900;
        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    button.link {
        @apply bg-transparent px-4 py-2 rounded-xl opacity-100;
        @apply hover:bg-blue-100;
        @apply active:bg-blue-200;
        @apply focus:outline-none;
        @apply dark:hover:bg-blue-800;
        @apply dark:active:bg-blue-900;
        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    span {
        @apply text-base leading-normal;
    }

    h1, h2, h3 {
        @apply font-bold;
    }

    h4, h5, h6 {
        @apply font-semibold;
    }

    h1 {
        @apply text-4xl tablet:text-5xl;
    }

    h2 {
        @apply text-3xl tablet:text-4xl;
    }

    h3 {
        @apply text-2xl tablet:text-3xl;
    }

    h4 {
        @apply text-xl tablet:text-2xl;
    }

    h5 {
        @apply text-lg tablet:text-xl;
    }

    h6 {
        @apply text-base tablet:text-lg;
    }

    input {
        @apply bg-zinc-100 px-4 py-2;
        @apply rounded-lg focus:rounded-lg;
        @apply border;
        @apply border-zinc-400 hover:border-blue-300 active:border-blue-400;
        @apply dark:bg-zinc-900;
        @apply dark:border-zinc-600 dark:hover:border-blue-400 dark:active:border-blue-500;
        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }
}

@layer components {
    div.layoutDropdown {
        @apply rounded-lg pr-2 pl-4 py-1 cursor-pointer;
        @apply flex items-center justify-between gap-8;
        @apply text-sm tablet:text-base;
        @apply border;
        @apply border-zinc-400 hover:border-blue-300 active:border-blue-400;
        @apply bg-zinc-100 hover:bg-zinc-200 active:bg-zinc-50;
        @apply dark:border-zinc-600 dark:hover:border-blue-400 dark:active:border-blue-500;
        @apply dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:active:bg-zinc-950;
        @apply disabled:border-zinc-300 dark:disabled:border-zinc-700;
        @apply disabled:bg-zinc-400 dark:disabled:bg-zinc-800;
        @apply disabled:text-zinc-500;
        @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    div.layoutOption {
        @apply rounded-lg overflow-hidden;
        @apply justify-center;
        @apply text-sm tablet:text-base;
        @apply border;
        @apply border-blue-400;
        @apply bg-zinc-200;
        @apply dark:border-blue-500;
        @apply dark:bg-zinc-800;
        @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    div.layoutItem {
        @apply flex items-center justify-start gap-2 pr-2 pl-4 py-1 h-full w-full cursor-pointer;
        @apply bg-zinc-100 hover:bg-blue-300/25 focus:bg-zinc-50;
        @apply dark:bg-zinc-900 dark:hover:bg-blue-400/25 dark:focus:bg-zinc-950;
    }

    div.layoutItem[data-active="true"] {
        @apply bg-blue-300 cursor-default;
        @apply dark:bg-blue-400;
    }

    div.card {
        @apply rounded-lg p-4;
        @apply flex flex-col items-center justify-between gap-4;
        @apply text-sm tablet:text-base;
        @apply border;
        @apply border-zinc-400;
        @apply bg-zinc-100;
        @apply dark:border-zinc-600;
        @apply dark:bg-zinc-900;
    }

    div.file {
        @apply rounded-lg p-2 cursor-pointer w-full;
        @apply flex items-center gap-2;
        @apply text-sm tablet:text-base;
        @apply border;
        @apply border-zinc-400 hover:border-blue-300 active:border-blue-400;
        @apply bg-zinc-100 hover:bg-zinc-200 active:bg-zinc-50;
        @apply dark:border-zinc-600 dark:hover:border-blue-400 dark:active:border-blue-500;
        @apply dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:active:bg-zinc-950;
        @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    div.file-list {
        @apply rounded-lg p-2 cursor-pointer w-full;
        @apply gap-2;
        @apply text-sm tablet:text-base;
        @apply bg-zinc-100 hover:bg-zinc-200 active:bg-zinc-50;
        @apply dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:active:bg-zinc-950;
        @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }
}

/* Utility */
@layer utilities {
    .global-duration {
        @apply duration-[var(--animation-duration)] ease-[var(--animation-timing)];
    }

    .divider-horizontal {
        @apply w-full h-px rounded-lg;
        @apply bg-zinc-400;
        @apply dark:border-zinc-600;
    }

    .divider-vertical {
        @apply h-full w-px rounded-lg;
        @apply bg-zinc-400;
        @apply dark:border-zinc-600;
    }

    .skeleton {
        @apply rounded-lg bg-zinc-400 dark:bg-zinc-700 animate-pulse;
    }
}