Files
discord.js/apps/website/src/styles/base.css
2025-04-10 22:02:37 +02:00

229 lines
6.6 KiB
CSS

@import 'tailwindcss';
@plugin 'tailwindcss-react-aria-components';
@import 'tw-animate-css';
@plugin '@tailwindcss/typography';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-base-neutral-0: #ffffff;
--color-base-neutral-40: #fcfcfc;
--color-base-neutral-60: #fafafa;
--color-base-neutral-80: #f0f0f0;
--color-base-neutral-100: #e6e6e6;
--color-base-neutral-200: #cccccc;
--color-base-neutral-300: #b3b3b3;
--color-base-neutral-400: #999999;
--color-base-neutral-500: #808080;
--color-base-neutral-600: #666666;
--color-base-neutral-700: #4c4c4c;
--color-base-neutral-800: #333333;
--color-base-neutral-900: #191919;
--color-base-blurple-50: #e0e3ff;
--color-base-blurple-100: #cdd2ff;
--color-base-blurple-200: #9ea7ff;
--color-base-blurple-300: #7782fa;
--color-base-blurple-400: #5865f2;
--color-base-blurple-500: #3d48c3;
--color-base-blurple-600: #293294;
--color-base-blurple-700: #1a2165;
--color-base-blurple-800: #0e1137;
--color-base-blurple-900: #020208;
--color-base-sunset-100: #ffe1df;
--color-base-sunset-200: #ffc3bf;
--color-base-sunset-300: #ffa69e;
--color-base-sunset-400: #ff887e;
--color-base-sunset-500: #ff6a5e;
--color-base-sunset-600: #cc554b;
--color-base-sunset-700: #994038;
--color-base-sunset-800: #662a26;
--color-base-sunset-900: #331513;
--color-base-tangerine-100: #fdefd2;
--color-base-tangerine-200: #fce0a5;
--color-base-tangerine-300: #fad078;
--color-base-tangerine-400: #f9c14b;
--color-base-tangerine-500: #f7b11e;
--color-base-tangerine-600: #c68e18;
--color-base-tangerine-700: #946a12;
--color-base-tangerine-800: #63470c;
--color-base-tangerine-900: #312306;
--color-base-green-lime-100: #ecefcc;
--color-base-green-lime-200: #d9df99;
--color-base-green-lime-300: #c6cf66;
--color-base-green-lime-400: #b3bf33;
--color-base-green-lime-500: #a0af00;
--color-base-green-lime-600: #808c00;
--color-base-green-lime-700: #606900;
--color-base-green-lime-800: #404600;
--color-base-green-lime-900: #202300;
--color-base-crystal-100: #dfedff;
--color-base-crystal-200: #bfdbff;
--color-base-crystal-300: #9ec8ff;
--color-base-crystal-400: #7eb6ff;
--color-base-crystal-500: #5ea4ff;
--color-base-crystal-600: #4b83cc;
--color-base-crystal-700: #386299;
--color-base-crystal-800: #264266;
--color-base-crystal-900: #132133;
--text-base-heading-xl: 2.813rem;
--text-base-heading-xl--line-height: 3.25rem;
--text-base-heading-xl--letter-spacing: 0;
--text-base-heading-xl--font-weight: 400;
--text-base-heading-lg: 2.25rem;
--text-base-heading-lg--line-height: 2.75rem;
--text-base-heading-lg--letter-spacing: 0;
--text-base-heading-lg--font-weight: 400;
--text-base-heading-md: 2rem;
--text-base-heading-md--line-height: 2.5rem;
--text-base-heading-md--letter-spacing: 0;
--text-base-heading-md--font-weight: 400;
--text-base-heading-sm: 1.75rem;
--text-base-heading-sm--line-height: 2.25rem;
--text-base-heading-sm--letter-spacing: 0;
--text-base-heading-sm--font-weight: 400;
--text-base-heading-xs: 1.5rem;
--text-base-heading-xs--line-height: 2rem;
--text-base-heading-xs--letter-spacing: 0;
--text-base-heading-xs--font-weight: 400;
--text-base-label-xl: 1.125rem;
--text-base-label-xl--line-height: 1.75rem;
--text-base-label-xl--letter-spacing: 0.5px;
--text-base-label-xl--font-weight: 500;
--text-base-label-lg: 1rem;
--text-base-label-lg--line-height: 1.5rem;
--text-base-label-lg--letter-spacing: 0.5px;
--text-base-label-lg--font-weight: 500;
--text-base-label-md: 1rem;
--text-base-label-md--line-height: 1.5rem;
--text-base-label-md--letter-spacing: 0.5px;
--text-base-label-md--font-weight: 500;
/* --text-base-label-md: 0.875rem;
--text-base-label-md--line-height: 1.25rem;
--text-base-label-md--letter-spacing: 0.1px;
--text-base-label-md--font-weight: 500; */
--text-base-label-sm: 0.75rem;
--text-base-label-sm--line-height: 1rem;
--text-base-label-sm--letter-spacing: 0.5px;
--text-base-label-sm--font-weight: 500;
--text-base-label-xs: 0.688rem;
--text-base-label-xs--line-height: 1rem;
--text-base-label-xs--letter-spacing: 0.5px;
--text-base-label-xs--font-weight: 500;
--text-base-xl: 1.125rem;
--text-base-xl--line-height: 1.75rem;
--text-base-xl--letter-spacing: 0.5px;
--text-base-xl--font-weight: 400;
--text-base-lg: 1rem;
--text-base-lg--line-height: 1.5rem;
--text-base-lg--letter-spacing: 0.5px;
--text-base-lg--font-weight: 400;
--text-base-md: 1rem;
--text-base-md--line-height: 1.5rem;
--text-base-md--letter-spacing: 0.5px;
--text-base-md--font-weight: 400;
/* --text-base-md: 0.875rem;
--text-base-md--line-height: 1.25rem;
--text-base-md--letter-spacing: 0.25px;
--text-base-md--font-weight: 400; */
--text-base-sm: 0.75rem;
--text-base-sm--line-height: 1rem;
--text-base-sm--letter-spacing: 0.4px;
--text-base-sm--font-weight: 400;
--text-base-xs: 0.688rem;
--text-base-xs--line-height: 1rem;
--text-base-xs--letter-spacing: 0.5px;
--text-base-xs--font-weight: 400;
--shadow-base-sm: 0 1px 4px 0 #19191929;
--shadow-base-md: 0 3px 3px 0 #19191929;
--shadow-base-lg: 0 3px 6px 0 #1919193d;
--shadow-base-xl: 0 6px 6px 0 #1919193d;
--shadow-base-2xl: 0 8px 8px 0 #19191952;
}
@layer base {
* {
font-family: var(--font-roboto);
text-rendering: optimizeLegibility;
scrollbar-width: thin;
}
html.dark .os-scrollbar-handle {
--os-handle-bg: rgba(255, 255, 255, 0.5);
--os-handle-bg-hover: rgba(255, 255, 255, 0.7);
--os-handle-bg-active: rgba(255, 255, 255, 0.7);
}
.os-scrollbar-handle {
--os-handle-bg: rgba(0, 0, 0, 0.5);
--os-handle-bg-hover: rgba(0, 0, 0, 0.7);
--os-handle-bg-active: rgba(0, 0, 0, 0.7);
}
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
pre {
@apply bg-[#f3f3f4]! dark:bg-[#121214]!;
}
code {
font-family: var(--font-geist-mono);
}
code > .line {
padding: 0 1rem;
}
}
@utility scrollbar-hidden {
scrollbar-width: none;
}
[cmdk-overlay] {
position: fixed;
inset: 0;
height: 100dvh;
width: 100vw;
@apply bg-base-neutral-900/72 z-30;
}
[cmdk-dialog] {
position: fixed;
left: 50%;
top: 0;
z-index: 50;
transform: translate(-50%, 0);
width: 100%;
max-width: 536px;
height: 100dvh;
@apply h-auto outline-0 md:top-16 md:p-4;
}
[cmdk-list-sizer] {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
[cmdk-group-heading] {
@apply text-base-label-sm text-base-neutral-600 dark:text-base-neutral-300 h-8 px-3 py-2;
}