2023-04-25 11:14:35 +02:00
|
|
|
// include styles from the ui package
|
|
|
|
|
@import "@zitadel/react/styles.css";
|
2023-04-24 15:32:57 +02:00
|
|
|
@import "./vars.scss";
|
|
|
|
|
|
2023-04-03 13:39:51 +02:00
|
|
|
@tailwind base;
|
|
|
|
|
@tailwind components;
|
|
|
|
|
@tailwind utilities;
|
|
|
|
|
|
2023-04-19 10:37:35 +02:00
|
|
|
@layer base {
|
|
|
|
|
h1,
|
|
|
|
|
.ztdl-h1 {
|
2023-06-15 13:58:32 +02:00
|
|
|
@apply text-2xl text-center;
|
2023-04-19 10:37:35 +02:00
|
|
|
}
|
2023-04-03 13:39:51 +02:00
|
|
|
|
2023-04-19 10:37:35 +02:00
|
|
|
.ztdl-p {
|
|
|
|
|
@apply text-sm;
|
|
|
|
|
}
|
2023-04-03 13:39:51 +02:00
|
|
|
}
|
2023-04-22 20:16:47 +02:00
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
--background-color: #ffffff;
|
|
|
|
|
--dark-background-color: #000000;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// $types: "background", "primary", "warn";
|
|
|
|
|
// $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
|
2023-04-24 17:31:59 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// @each $type in $types {
|
|
|
|
|
// @each $shade in $shades {
|
|
|
|
|
// .bg-#{$type}-light-#{$shade} {
|
|
|
|
|
// background-color: var(--theme-light-#{$type}-#{$shade}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .dark .dark\:bg-#{$type}-dark-#{$shade} {
|
|
|
|
|
// background-color: var(--theme-dark-#{$type}-#{$shade}) !important;
|
|
|
|
|
// }
|
2023-04-24 17:31:59 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// .text-#{$type}-light-#{$shade} {
|
|
|
|
|
// color: var(--theme-light-#{$type}-#{$shade}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .dark .dark\:text-#{$type}-dark-#{$shade} {
|
|
|
|
|
// color: var(--theme-dark-#{$type}-#{$shade}) !important;
|
|
|
|
|
// }
|
2023-04-25 09:16:19 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// .text-#{$type}-light-contrast-#{$shade} {
|
|
|
|
|
// color: var(--theme-light-#{$type}-contrast-#{$shade}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .dark .dark\:text-#{$type}-dark-contrast-#{$shade} {
|
|
|
|
|
// color: var(--theme-dark-#{$type}-contrast-#{$shade}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
2023-04-25 09:16:19 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// $alphatypes: "text", "link";
|
2023-04-25 09:16:19 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// @each $alphatype in $alphatypes {
|
|
|
|
|
// .text-#{$alphatype}-light,
|
|
|
|
|
// .hover\:text-#{$alphatype}-light {
|
|
|
|
|
// color: var(--theme-light-#{$alphatype}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .text-#{$alphatype}-light-contrast {
|
|
|
|
|
// color: var(--theme-light-#{$alphatype}-contrast) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .text-#{$alphatype}-light-secondary {
|
|
|
|
|
// color: var(--theme-light-#{$alphatype}-secondary) !important;
|
|
|
|
|
// }
|
2023-04-25 09:16:19 +02:00
|
|
|
|
2023-04-25 11:14:35 +02:00
|
|
|
// .dark .dark\:text-#{$alphatype}-dark,
|
|
|
|
|
// .dark .hover\:text-#{$alphatype}-dark {
|
|
|
|
|
// color: var(--theme-dark-#{$alphatype}) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .dark .dark\:text-#{$alphatype}-dark-contrast {
|
|
|
|
|
// color: var(--theme-dark-#{$alphatype}-contrast) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .dark .dark\:text-#{$alphatype}-dark-secondary {
|
|
|
|
|
// color: var(--theme-dark-#{$alphatype}-secondary) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
