globals.scss

@use 'fonts';

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

@layer base {
    :root {
        --main-background: var(--light-background);
        --main-search-background: var(--light-search-background);
        --main-sidebar-background: var(--light-sidebar-background);
        --main-accent: var(--accent-purple);

        --dark-background: 0 0 0;
        --dim-background: 22 33 44;
        --light-background: 255 255 255;

        --dark-search-background: 32 35 39;
        --dim-search-background: 39 51 64;
        --light-search-background: 239 243 244;

        --dark-sidebar-background: 22 24 28;
        --dim-sidebar-background: 30 39 50;
        --light-sidebar-background: 247 249 249;

        --accent-yellow: 255 213 0;
        --accent-blue: 29 155 240;
        --accent-pink: 249 26 130;
        --accent-purple: 109 40 217;
        --accent-orange: 255 122 0;
        --accent-green: 0 184 122;
    }
}

@layer components {
    .hover-animation {
        @apply transition-colors duration-200;
    }

    .custom-button {
        @apply hover-animation rounded-full p-3 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .custom-underline {
        @apply hover-animation underline decoration-transparent outline-none transition [text-decoration-thickness:1px]
        hover:decoration-inherit focus-visible:decoration-inherit;
    }

    .main-tab {
        @apply outline-none focus-visible:ring-2 focus-visible:ring-[#878a8c] focus-visible:transition-shadow
        focus-visible:duration-200 dark:focus-visible:ring-white;
    }

    .accent-tab {
        @apply main-tab #{'focus-visible:!ring-main-accent/80'};
    }

    .accent-bg-tab {
        @apply focus-visible:bg-main-accent/10;
    }

    .dark-bg-tab {
        @apply focus-visible:bg-light-primary/10 dark:focus-visible:bg-dark-primary/10;
    }

    .blur-picture {
        @apply hover-animation accent-tab rounded-full transition hover:brightness-75 active:brightness-100;
    }

    .trim-alt {
        @apply overflow-hidden text-ellipsis break-all [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical];
    }

    .hover-card {
        @apply hover:bg-black/[0.03] focus-visible:bg-black/[0.03] dark:hover:bg-white/[0.03]
        dark:focus-visible:bg-white/[0.03];
    }

    .menu-container {
        @apply z-10 rounded-md bg-main-background outline-none
        [box-shadow:#65778633_0px_0px_15px,_#65778626_0px_0px_3px_1px]
        dark:[box-shadow:#ffffff33_0px_0px_15px,_#ffffff26_0px_0px_3px_1px];
    }

    .video-player {
        @apply mt-2;
        & video, iframe {
            @apply rounded-2xl border-[1px] border-light-border #{!important};
        }
        & video {
            @apply max-h-[300px] #{!important};
        }
        & iframe {
            @apply h-[300px] #{!important};
        }
    }
}