Ghost/apps/admin-x-design-system/styles.css

@import './preflight.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Defaults */
@layer base {
    /* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */
    @font-face {
        font-family: "Inter";
        src: local("Inter") format("truetype-variations");
        font-weight: 100 900;
    }

    .admin-x-base {
        & {
            @apply font-sans text-black text-base leading-normal;
        }

        h1, h2, h3, h4, h5 {
            @apply font-bold tracking-tight leading-tighter;
        }

        h1 {
            @apply text-4xl leading-supertight;
        }

        h2 {
            @apply text-2xl;
        }

        h3 {
            @apply text-xl;
        }

        h4 {
            @apply text-lg;
        }

        h5 {
            @apply text-md leading-supertight;
        }

        h6 {
            @apply text-md leading-normal;
        }
    }
}

.admin-x-base {
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    letter-spacing: unset;

    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}


@media (max-width: 800px) {
    .admin-x-base {
        height: calc(100vh - 55px);
    }
}

.admin-x-base.dark {
    color: #FAFAFB;
}

.admin-x-base.dark .gh-loading-orb-container {
    background-color: #000000;
}

.admin-x-base.dark .gh-loading-orb {
    filter: invert(100%);
}

.admin-x-base .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome */
}

.admin-x-base .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Prose classes are for formatting arbitrary HTML that comes from the API */
.gh-prose-links a {
    color: #30CF43;
}