mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
754ee55cd0
* chore: update themes and add dark-new theme set * chore: update * add deep dark css theme * fix issue with wrong class * chore: add `bg-studio` as a custom remapped color for studio background * updated surface classes to use a surface-75. * update backgrounds and borders * Update CardButton.tsx * Update NavigationIconButton.tsx * chore: add theme selection * Update package.json * Update index.ts * Update package.json * update alias * Update ThemeSettings.tsx * chore: split up theme support * remove old code * Update index.ts * add back in * Update ThemeSettingsOld.tsx * fix issue with system theme leaking through * reset themes * update imports * packagelock updated * Update ThemeSettingsWithPreferredTheme.tsx * Update system.svg * Update NavigationIconButton.tsx * Update NavigationBar.tsx * update * Update light.css * updated some colors * light mode updated * hacked * prettier --------- Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com> Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
114 lines
2.7 KiB
CSS
114 lines
2.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.dark,
|
|
.light,
|
|
.light .docs-story,
|
|
.dark .docs-story {
|
|
@apply bg-studio;
|
|
}
|
|
|
|
/* // date picker */
|
|
/* !!!! THIS IS A COPY OF THE styles/date-picker.scss !! */
|
|
|
|
.react-datepicker__input-container input {
|
|
@apply block w-full text-base md:text-sm bg-white border border-muted rounded shadow-sm;
|
|
}
|
|
|
|
.react-datepicker-popper {
|
|
@apply z-40 w-72 text-sm bg-surface-100 shadow px-3 py-2 border-2 border-background rounded;
|
|
}
|
|
|
|
.react-datepicker-left {
|
|
@apply absolute left-0 right-auto top-11 transform-none !important;
|
|
}
|
|
|
|
.react-datepicker-right {
|
|
@apply absolute right-0 left-auto top-11 transform-none !important;
|
|
}
|
|
|
|
.react-datepicker__portal {
|
|
@apply absolute z-10 w-72 text-sm transform-none bg-white shadow px-3 py-2 top-12 right-0 border-2 border-background rounded;
|
|
}
|
|
|
|
.react-datepicker__month-container {
|
|
@apply flex flex-col;
|
|
}
|
|
|
|
.react-datepicker__month {
|
|
@apply flex flex-col;
|
|
@apply -space-y-px;
|
|
}
|
|
|
|
.react-datepicker__current-month {
|
|
@apply ml-2.5 text-lg font-semibold text-border-stronger;
|
|
}
|
|
|
|
.react-datepicker__week {
|
|
@apply flex -space-x-px;
|
|
}
|
|
|
|
.react-datepicker__day-names {
|
|
@apply flex -space-x-px text-foreground-lighter font-normal text-center text-xs;
|
|
}
|
|
|
|
.react-datepicker__day-name {
|
|
@apply w-10 h-10 flex items-center justify-center py-1 rounded-full;
|
|
}
|
|
|
|
.react-datepicker__navigation {
|
|
@apply absolute top-2;
|
|
}
|
|
|
|
.react-datepicker__navigation--previous {
|
|
@apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
|
|
}
|
|
|
|
.react-datepicker__navigation--next {
|
|
@apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
|
|
}
|
|
|
|
.react-datepicker__day {
|
|
@apply w-10 h-10 flex items-center font-normal justify-center text-sm leading-loose transition text-foreground-light;
|
|
/* @apply mb-1 py-1; */
|
|
@apply -space-y-px;
|
|
@apply border border-default;
|
|
}
|
|
|
|
.react-datepicker__day--disabled {
|
|
@apply cursor-not-allowed opacity-40 hover:bg-transparent;
|
|
}
|
|
|
|
.react-datepicker__day--outside-month {
|
|
@apply text-border-stronger;
|
|
}
|
|
|
|
.react-datepicker__day--in-range {
|
|
@apply bg-brand-300 text-scale-fixed-100 border-brand-300;
|
|
}
|
|
|
|
.react-datepicker__day--in-selecting-range {
|
|
@apply bg-brand-400 text-scale-fixed-100 border-brand-400;
|
|
}
|
|
|
|
.react-datepicker__day--selecting-range-start {
|
|
@apply bg-studio;
|
|
}
|
|
|
|
.react-datepicker__day--selecting-range-end {
|
|
@apply bg-studio;
|
|
}
|
|
|
|
.react-datepicker__day--selected {
|
|
@apply bg-brand-300 text-white;
|
|
}
|
|
|
|
.react-datepicker__day--range-start {
|
|
@apply bg-brand text-white hover:text-border-strong hover:bg-white;
|
|
}
|
|
|
|
.react-datepicker__day--range-end {
|
|
@apply bg-brand text-white hover:text-border-strong hover:bg-white;
|
|
}
|