342c96abfa
Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.
118 lines
2.4 KiB
CSS
118 lines
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0deg 0% 100%;
|
|
--foreground: 222.2deg 47.4% 11.2%;
|
|
|
|
--muted: 210deg 40% 96.1%;
|
|
--muted-foreground: 215.4deg 16.3% 46.9%;
|
|
|
|
--popover: 0deg 0% 100%;
|
|
--popover-foreground: 222.2deg 47.4% 11.2%;
|
|
|
|
--border: 214.3deg 31.8% 94.4%;
|
|
--input: 214.3deg 31.8% 91.4%;
|
|
|
|
--card: 0deg 0% 100%;
|
|
--card-foreground: 222.2deg 47.4% 11.2%;
|
|
|
|
--primary: 222.2deg 47.4% 11.2%;
|
|
--primary-foreground: 210deg 40% 98%;
|
|
|
|
--secondary: 210deg 40% 96.1%;
|
|
--secondary-foreground: 222.2deg 47.4% 11.2%;
|
|
|
|
--accent: 210deg 40% 96.1%;
|
|
--accent-foreground: 222.2deg 47.4% 11.2%;
|
|
|
|
--destructive: 0deg 100% 50%;
|
|
--destructive-foreground: 210deg 40% 98%;
|
|
|
|
--ring: 215deg 20.2% 65.1%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 224 71% 4%;
|
|
--foreground: 213 31% 91%;
|
|
|
|
--muted: 223 47% 11%;
|
|
--muted-foreground: 215.4 16.3% 56.9%;
|
|
|
|
--accent: 216 34% 10%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--popover: 224 71% 4%;
|
|
--popover-foreground: 215 20.2% 65.1%;
|
|
|
|
--border: 216 34% 17%;
|
|
--input: 216 34% 17%;
|
|
|
|
--card: 224 71% 4%;
|
|
--card-foreground: 213 31% 91%;
|
|
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 1.2%;
|
|
|
|
--secondary: 216 34% 10%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 63% 31%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--ring: 216 34% 17%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
|
|
.container {
|
|
@apply max-sm:px-4;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Optimize dropdowns for mobile
|
|
*/
|
|
[data-radix-popper-content-wrapper] {
|
|
@apply w-full md:w-auto;
|
|
}
|
|
|
|
[data-radix-menu-content] {
|
|
@apply rounded-none md:rounded-lg;
|
|
}
|
|
|
|
[data-radix-menu-content] [role="menuitem"] {
|
|
@apply md:min-h-0 min-h-12;
|
|
}
|
|
|
|
.site-header > .container:before,
|
|
.site-footer > .container:before {
|
|
background: radial-gradient(62.87% 100% at 50% 100%, theme('colors.gray.200') 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
bottom: 0;
|
|
content: "";
|
|
height: 1px;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.dark .site-header > .container:before,
|
|
.dark .site-footer > .container:before {
|
|
background: radial-gradient(62.87% 100% at 50% 100%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
|
|
.site-footer > .container:before {
|
|
top: 0;
|
|
} |