authentication/src/lib/styles/app.css - development - dimamir/ory-kit

authentication/src/lib/styles/app.css
117 строк2 KB
Markus Thielker
ORY-61: add styling to app.css and support dark mode
28 дек 2023, 22:07
28 дек 2023, 22:07a17d40a
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply bg-white dark:bg-neutral-900 text-indigo-900 dark:text-white fill-indigo-900 dark:fill-white p-4 pt-16 duration-300;
}

.rounded-shape {
    @apply rounded-none;
}

.theme-container {
    @apply rounded-shape py-2.5 px-2.5;
}

.border-style {
    @apply 
        border
        border-black
        dark:border-white
        disabled:border-black/50
        disabled:dark:border-white/50;
}

.heading {
    @apply text-3xl font-semibold;
}

.card {
    @apply border-style rounded-shape p-4 max-w-lg mx-auto;
}

.alternative-actions {
    @apply card flex flex-col mt-4;
}

a {
    @apply text-black dark:text-white hover:text-cyan-400 dark:hover:text-cyan-200 duration-300;
}

.text-input {
    @apply 
        w-full 
        theme-container 
        bg-white
        text-black
        dark:bg-neutral-900
        dark:text-white
        border-style 
        duration-300 
        focus:border-cyan-400 
        focus:outline-none;
}

.btn-primary {
    @apply 
        w-full 
        theme-container 
        bg-cyan-200 
        text-cyan-900 
        dark:bg-cyan-200 
        dark:text-cyan-900 
        text-center 
        font-medium 
        duration-300 
        hover:bg-black 
        hover:text-white 
        dark:hover:bg-white 
        dark:hover:text-black
        disabled:bg-cyan-200/50
        disabled:text-cyan-900/50
        disabled:dark:bg-cyan-200/50
        disabled:dark:text-cyan-900/50;
}

.btn-secondary {
    @apply 
        w-full 
        theme-container 
        bg-white 
        text-cyan-900 
        dark:bg-neutral-900
        dark:text-cyan-200 
        text-center 
        font-medium 
        duration-300 
        border-style
        hover:bg-white 
        hover:text-black 
        dark:hover:bg-white 
        dark:hover:text-black
        disabled:bg-white/50
        disabled:text-cyan-900/50
        disabled:dark:bg-neutral-900/50
        disabled:dark:text-cyan-200/50;
}

.alert {
    @apply theme-container;
}

.alert-success {
    @apply alert bg-green-100 border-green-500 text-green-700;
}

.alert-info {
    @apply alert bg-blue-100 border-blue-500 text-blue-700;
}

.alert-error {
    @apply alert bg-red-100 border-red-500 text-red-700;
}

.code-block {
    @apply rounded-shape bg-neutral-100 dark:bg-neutral-800 p-4 overflow-y-scroll duration-300;
}