268 lines
7.8 KiB
CSS
Vendored
268 lines
7.8 KiB
CSS
Vendored
@tailwind base;
|
|
|
|
:root {
|
|
--white: rgb(255, 255, 255);
|
|
|
|
--blue-400: rgb(122, 122, 255);
|
|
|
|
--green-100: rgb(227, 255, 242);
|
|
--green-300: rgb(148, 242, 200);
|
|
--green-400: rgb(114, 224, 175);
|
|
--green-500: rgb(34, 212, 146);
|
|
|
|
--purple-100: rgb(251, 245, 255);
|
|
--purple-200: rgb(236, 211, 253);
|
|
--purple-300: rgb(214, 188, 250);
|
|
--purple-400: rgb(183, 148, 244);
|
|
--purple-500: rgb(121, 0, 245);
|
|
--purple-600: rgb(113, 7, 220);
|
|
--purple-800: rgb(79, 15, 143);
|
|
|
|
--red-100: rgb(255, 235, 243);
|
|
--red-300: rgb(250, 133, 162);
|
|
--red-400: rgb(250, 78, 121);
|
|
|
|
--yellow-100: rgb(255, 253, 235);
|
|
--yellow-200: rgb(255, 248, 196);
|
|
--yellow-300: rgb(255, 243, 148);
|
|
--yellow-400: rgb(255, 234, 79);
|
|
|
|
--tint-50: rgba(0, 0, 150, 0.015);
|
|
--tint-100: rgba(0, 0, 150, 0.025);
|
|
--tint-200: rgba(0, 0, 100, 0.07);
|
|
--tint-300: rgba(25, 0, 100, 0.1);
|
|
--tint-400: rgba(20, 0, 100, 0.2);
|
|
--tint-500: rgba(30, 20, 90, 0.35);
|
|
--tint-600: rgba(30, 20, 70, 0.5);
|
|
--tint-700: rgba(15, 10, 60, 0.75);
|
|
|
|
--gray-50: rgb(252, 252, 253);
|
|
--gray-100: rgb(247, 247, 252);
|
|
--gray-200: rgb(238, 238, 245);
|
|
--gray-300: rgb(232, 229, 239);
|
|
--gray-400: rgb(209, 204, 224);
|
|
--gray-500: rgb(176, 173, 197);
|
|
--gray-600: rgb(142, 137, 162);
|
|
--gray-700: rgb(75, 71, 109);
|
|
--gray-800: rgb(51, 47, 81);
|
|
|
|
/* dark theme */
|
|
|
|
--dark-white: rgb(38, 38, 50);
|
|
|
|
--dark-blue-400: rgb(85, 0, 255);
|
|
|
|
--dark-green-100: rgb(32, 97, 90);
|
|
--dark-green-300: rgb(55, 111, 123);
|
|
--dark-green-500: rgb(63, 152, 142);
|
|
|
|
--dark-purple-100: rgb(60, 46, 96);
|
|
--dark-purple-200: rgb(81, 50, 128);
|
|
--dark-purple-300: rgb(104, 85, 147);
|
|
--dark-purple-400: rgb(106, 87, 148);
|
|
--dark-purple-500: rgb(126, 107, 167);
|
|
--dark-purple-600: rgb(145, 127, 183);
|
|
--dark-purple-800: rgb(158, 140, 194);
|
|
|
|
--dark-red-100: rgb(255, 235, 243);
|
|
--dark-red-300: rgb(250, 133, 162);
|
|
--dark-red-400: rgb(250, 78, 121);
|
|
|
|
--dark-yellow-100: rgb(61, 57, 49);
|
|
--dark-yellow-200: rgb(90, 78, 53);
|
|
--dark-yellow-300: rgb(119, 103, 70);
|
|
--dark-yellow-400: rgb(145, 121, 90);
|
|
|
|
--dark-tint-50: rgba(240, 240, 245, 0.05);
|
|
--dark-tint-100: rgba(240, 240, 245, 0.075);
|
|
--dark-tint-200: rgba(240, 240, 245, 0.1);
|
|
--dark-tint-300: rgba(240, 240, 245, 0.125);
|
|
--dark-tint-400: rgba(240, 240, 245, 0.25);
|
|
--dark-tint-500: rgba(240, 240, 245, 0.45);
|
|
--dark-tint-600: rgba(240, 240, 245, 0.55);
|
|
--dark-tint-700: rgba(240, 240, 245, 0.65);
|
|
|
|
--dark-gray-0: rgb(30, 30, 40);
|
|
--dark-gray-50: rgb(38, 38, 50);
|
|
--dark-gray-100: rgb(48, 48, 58);
|
|
--dark-gray-200: rgb(51, 51, 65);
|
|
--dark-gray-300: rgb(75, 75, 85);
|
|
--dark-gray-400: rgb(142, 142, 160);
|
|
--dark-gray-500: rgb(152, 152, 170);
|
|
--dark-gray-600: rgb(165, 165, 175);
|
|
--dark-gray-700: rgb(216, 216, 223);
|
|
--dark-gray-800: rgb(230, 230, 235);
|
|
|
|
--dark-shadow-sm: '0 2px 0 var(--gray-0)';
|
|
--dark-shadow-default: '0 2px 0 var(--gray-50), 2px 4px 0 var(--gray-0)';
|
|
--dark-shadow-lg: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50), 4px 6px 0 var(--gray-0)';
|
|
--dark-shadow-input: 'inset 0 2px 0 var(--gray-100)';
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
@apply bg-gray-200;
|
|
@apply overflow-x-hidden;
|
|
@apply overflow-y-scroll;
|
|
}
|
|
|
|
@screen lg {
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Exclude iframes like 1Password save modals */
|
|
*:not(iframe),
|
|
*:after,
|
|
*:before {
|
|
position: relative;
|
|
}
|
|
|
|
*:focus {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans;
|
|
@apply text-gray-800;
|
|
@apply leading-normal;
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Dark theme */
|
|
@media (prefers-color-scheme: dark) {
|
|
html.theme-auto {
|
|
--white: var(--dark-white);
|
|
|
|
--blue-400: var(--dark-blue-400);
|
|
|
|
--green-100: var(--dark-green-100);
|
|
--green-300: var(--dark-green-300);
|
|
--green-400: var(--dark-green-400);
|
|
--green-500: var(--dark-green-500);
|
|
|
|
--purple-100: var(--dark-purple-100);
|
|
--purple-200: var(--dark-purple-200);
|
|
--purple-300: var(--dark-purple-300);
|
|
--purple-400: var(--dark-purple-400);
|
|
--purple-500: var(--dark-purple-500);
|
|
--purple-600: var(--dark-purple-600);
|
|
--purple-800: var(--dark-purple-800);
|
|
|
|
--red-100: var(--dark-red-100);
|
|
--red-300: var(--dark-red-300);
|
|
--red-400: var(--dark-red-400);
|
|
|
|
--yellow-100: var(--dark-yellow-100);
|
|
--yellow-200: var(--dark-yellow-200);
|
|
--yellow-300: var(--dark-yellow-300);
|
|
--yellow-400: var(--dark-yellow-400);
|
|
|
|
--tint-50: var(--dark-tint-50);
|
|
--tint-100: var(--dark-tint-100);
|
|
--tint-200: var(--dark-tint-200);
|
|
--tint-300: var(--dark-tint-300);
|
|
--tint-400: var(--dark-tint-400);
|
|
--tint-500: var(--dark-tint-500);
|
|
--tint-600: var(--dark-tint-600);
|
|
--tint-700: var(--dark-tint-700);
|
|
|
|
--gray-0: var(--dark-gray-0);
|
|
--gray-50: var(--dark-gray-50);
|
|
--gray-100: var(--dark-gray-100);
|
|
--gray-200: var(--dark-gray-200);
|
|
--gray-300: var(--dark-gray-300);
|
|
--gray-400: var(--dark-gray-400);
|
|
--gray-500: var(--dark-gray-500);
|
|
--gray-600: var(--dark-gray-600);
|
|
--gray-700: var(--dark-gray-700);
|
|
--gray-800: var(--dark-gray-800);
|
|
|
|
--shadow-sm: '0 2px 0 var(--gray-50)';
|
|
--shadow-default: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50)';
|
|
--shadow-lg: '0 2px 0 var(--gray-200), 2px 4px 0 var(--gray-100), 4px 6px 0 var(--gray-50)';
|
|
--shadow-input: 'inset 0 2px 0 var(--gray-100)';
|
|
}
|
|
|
|
html.theme-auto {
|
|
background-color: var(--dark-gray-0);
|
|
}
|
|
|
|
html.theme-auto .checkbox:before {
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
html.theme-auto .tab-nav,
|
|
html.theme-auto .dropdown {
|
|
background-color: var(--gray-400);
|
|
}
|
|
}
|
|
|
|
html.theme-dark {
|
|
--white: var(--dark-white);
|
|
|
|
--blue-400: var(--dark-blue-400);
|
|
|
|
--green-100: var(--dark-green-100);
|
|
--green-300: var(--dark-green-300);
|
|
--green-400: var(--dark-green-400);
|
|
--green-500: var(--dark-green-500);
|
|
|
|
--purple-100: var(--dark-purple-100);
|
|
--purple-200: var(--dark-purple-200);
|
|
--purple-300: var(--dark-purple-300);
|
|
--purple-400: var(--dark-purple-400);
|
|
--purple-500: var(--dark-purple-500);
|
|
--purple-600: var(--dark-purple-600);
|
|
--purple-800: var(--dark-purple-800);
|
|
|
|
--red-100: var(--dark-red-100);
|
|
--red-300: var(--dark-red-300);
|
|
--red-400: var(--dark-red-400);
|
|
|
|
--yellow-100: var(--dark-yellow-100);
|
|
--yellow-200: var(--dark-yellow-200);
|
|
--yellow-300: var(--dark-yellow-300);
|
|
--yellow-400: var(--dark-yellow-400);
|
|
|
|
--tint-50: var(--dark-tint-50);
|
|
--tint-100: var(--dark-tint-100);
|
|
--tint-200: var(--dark-tint-200);
|
|
--tint-300: var(--dark-tint-300);
|
|
--tint-400: var(--dark-tint-400);
|
|
--tint-500: var(--dark-tint-500);
|
|
--tint-600: var(--dark-tint-600);
|
|
--tint-700: var(--dark-tint-700);
|
|
|
|
--gray-0: var(--dark-gray-0);
|
|
--gray-50: var(--dark-gray-50);
|
|
--gray-100: var(--dark-gray-100);
|
|
--gray-200: var(--dark-gray-200);
|
|
--gray-300: var(--dark-gray-300);
|
|
--gray-400: var(--dark-gray-400);
|
|
--gray-500: var(--dark-gray-500);
|
|
--gray-600: var(--dark-gray-600);
|
|
--gray-700: var(--dark-gray-700);
|
|
--gray-800: var(--dark-gray-800);
|
|
|
|
--shadow-sm: '0 2px 0 var(--gray-50)';
|
|
--shadow-default: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50)';
|
|
--shadow-lg: '0 2px 0 var(--gray-200), 2px 4px 0 var(--gray-100), 4px 6px 0 var(--gray-50)';
|
|
--shadow-input: 'inset 0 2px 0 var(--gray-100)';
|
|
}
|
|
|
|
html.theme-dark {
|
|
background-color: var(--dark-gray-0);
|
|
}
|
|
|
|
html.theme-dark .checkbox:before {
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
html.theme-dark .tab-nav,
|
|
html.theme-dark .dropdown {
|
|
background-color: var(--gray-400);
|
|
}
|