Anas Qureshi
310 lines
6.1 KiB
CSS
310 lines
6.1 KiB
CSS
@import "tailwindcss";
|
|
@import "preline/variants.css";
|
|
@source "../../../node_modules/preline/dist/*.js";
|
|
|
|
|
|
@custom-variant dark (&:is(.dark, .dark *));
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
@theme {
|
|
|
|
|
|
--color-bodybg: rgb(240, 241, 247);
|
|
--color-bodybg2: rgb(var(--color-darkbg));
|
|
--color-primary: rgb(132, 90, 223);
|
|
--color-primaryrgb: rgb(132, 90, 223);
|
|
--color-secondary: rgb(35, 183, 229);
|
|
--color-warning: rgb(245, 184, 73);
|
|
--color-info: rgb(73, 182, 245);
|
|
--color-success: rgb(38, 191, 148);
|
|
--color-danger: rgb(230, 83, 60);
|
|
--color-light: rgb(243, 246, 248);
|
|
--color-dark: rgb(35, 35, 35);
|
|
--color-orange: rgb(255, 165, 5);
|
|
--color-pink: rgb(231, 145, 188);
|
|
--color-teal: rgb(18, 194, 194);
|
|
--color-tealmain: rgb(18, 194, 194);
|
|
--color-purple: rgb(137, 32, 173);
|
|
--color-defaulttextcolor: rgb(51, 51, 53);
|
|
--color-defaultborder: rgb(243, 243, 243);
|
|
--color-defaultbackground: rgb(247, 248, 249);
|
|
--color-menuprimecolor: rgb(83, 100, 133);
|
|
--color-menubordercolor: rgb(243, 243, 243);
|
|
--color-headerprimecolor: rgb(83, 100, 133);
|
|
--color-headerbordercolor: rgb(243, 243, 243);
|
|
--color-bootstrapcardborder: rgb(243, 243, 243);
|
|
--color-list-hover-focus-bg: rgb(245, 246, 247);
|
|
--color-textmuted: rgb(140, 144, 151);
|
|
--color-inputborder: rgb(233, 237, 246);
|
|
--color-red: rgb(208, 61, 70);
|
|
--color-blue: rgb(43, 62, 101);
|
|
--color-green: rgb(29, 216, 113);
|
|
--color-cyan: rgb(0, 209, 209);
|
|
--color-indigo: rgb(77, 93, 219);
|
|
--color-gray: rgb(134, 153, 163);
|
|
--color-yellow: rgb(255, 193, 2);
|
|
--color-facebook: rgb(59, 89, 152);
|
|
--color-twitter: rgb(0, 172, 238);
|
|
--color-github: rgb(51, 51, 51);
|
|
--color-google: rgb(207, 78, 67);
|
|
--color-youtube: rgb(255, 0, 0);
|
|
|
|
|
|
--font-size-defaultsize: 0.813rem;
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-base: 1rem;
|
|
--font-size-lg: 1.125rem;
|
|
--font-size-xl: 1.25rem;
|
|
--font-size-2xl: 1.5rem;
|
|
--font-size-3xl: 1.875rem;
|
|
--font-size-4xl: 2.25rem;
|
|
--font-size-5xl: 3rem;
|
|
--font-size-6xl: 3.75rem;
|
|
--font-size-7xl: 4.5rem;
|
|
--font-size-8xl: 6rem;
|
|
--font-size-9xl: 8rem;
|
|
|
|
|
|
--radius-none: 0;
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
--animate-projects: particles 2s linear infinite;
|
|
--animate-spin: spin 1s linear infinite;
|
|
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
--animate-bounce: bounce 1s infinite;
|
|
--animate-bell: ring 2s ease-in-out infinite;
|
|
--animate-wase: wase 4s linear infinite;
|
|
--animate-spin-slow: spin 3s linear infinite;
|
|
--animate-slow-ping: ping 2s linear infinite;
|
|
|
|
|
|
--color-gray-100: rgb(249,250,251);
|
|
--color-gray-200: rgb(242,244,245);
|
|
--color-gray-300: rgb(230,234,235);
|
|
--color-gray-400: rgb(219,223,225);
|
|
--color-gray-500: rgb(148,158,183);;
|
|
--color-gray-600: rgb(121,135,161);
|
|
--color-gray-700: rgb(77,88,117);
|
|
--color-gray-800: rgb(56,56,83);
|
|
--color-gray-900: rgb(50,50,81);
|
|
--font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-montserrat: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
|
|
--shadow-defaultshadow: 0 0.125rem 0 rgba(10, 10, 10, 0.04);
|
|
/* --breakpoint-*: initial; */
|
|
/* --breakpoint-sm: 30rem; */
|
|
/* --breakpoint-md: 48rem; */
|
|
/* --breakpoint-lg: 62rem; */
|
|
/* --breakpoint-xl: 75rem; */
|
|
/* --breakpoint-2xl: 87.5rem; */
|
|
/* --breakpoint-3xl: 112.5rem; */
|
|
--breakpoint-xs: 30rem;
|
|
--breakpoint-2xl: 100rem;
|
|
--breakpoint-3xl: 120rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
[class="dark"],
|
|
html.dark,
|
|
.dark {
|
|
/* color-scheme: dark; */
|
|
--color-bodybg: rgb(26 28 30);
|
|
--color-bodybg2: rgb(37, 39, 41);
|
|
--color-darkbg: rgb(37 39 41);
|
|
--color-light: rgb(43 46 49);
|
|
--color-dark: rgb(240 245 248);
|
|
--color-inputborder: rgb(115 122 130);
|
|
--color-formcontrolbg: rgb(35 38 40);
|
|
--color-defaulttextcolor: rgb(255 255 255);
|
|
--color-gray-100: rgb(249,250,251);
|
|
--color-gray-200: rgb(242,244,245);
|
|
--color-gray-300: rgb(230,234,235);
|
|
--color-gray-400: rgb(219,223,225);
|
|
--color-gray-500: rgb(148,158,183);
|
|
--color-gray-600: rgb(121,135,161);
|
|
--color-gray-700: rgb(77,88,117);
|
|
--color-gray-800: rgb(56,56,83);
|
|
--color-gray-900: rgb(50,50,81);
|
|
}
|
|
|
|
|
|
|
|
@keyframes particles {
|
|
0% {
|
|
transform: translateY(0) rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-90px) rotate(180deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes ping {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
75%,
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(0);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes ring {
|
|
0% {
|
|
transform: rotateZ(0)
|
|
}
|
|
|
|
1% {
|
|
transform: rotateZ(30deg)
|
|
}
|
|
|
|
3% {
|
|
transform: rotateZ(-28deg)
|
|
}
|
|
|
|
5% {
|
|
transform: rotateZ(34deg)
|
|
}
|
|
|
|
7% {
|
|
transform: rotateZ(-32deg)
|
|
}
|
|
|
|
9% {
|
|
transform: rotateZ(30deg)
|
|
}
|
|
|
|
11% {
|
|
transform: rotateZ(-28deg)
|
|
}
|
|
|
|
13% {
|
|
transform: rotateZ(26deg)
|
|
}
|
|
|
|
15% {
|
|
transform: rotateZ(-24deg)
|
|
}
|
|
|
|
17% {
|
|
transform: rotateZ(22deg)
|
|
}
|
|
|
|
19% {
|
|
transform: rotateZ(-20deg)
|
|
}
|
|
|
|
21% {
|
|
transform: rotateZ(18deg)
|
|
}
|
|
|
|
23% {
|
|
transform: rotateZ(-16deg)
|
|
}
|
|
|
|
25% {
|
|
transform: rotateZ(14deg)
|
|
}
|
|
|
|
27% {
|
|
transform: rotateZ(-12deg)
|
|
}
|
|
|
|
29% {
|
|
transform: rotateZ(10deg)
|
|
}
|
|
|
|
31% {
|
|
transform: rotateZ(-8deg)
|
|
}
|
|
|
|
33% {
|
|
transform: rotateZ(6deg)
|
|
}
|
|
|
|
35% {
|
|
transform: rotateZ(-4deg)
|
|
}
|
|
|
|
37% {
|
|
transform: rotateZ(2deg)
|
|
}
|
|
|
|
39% {
|
|
transform: rotateZ(-1deg)
|
|
}
|
|
|
|
41% {
|
|
transform: rotateZ(1deg)
|
|
}
|
|
|
|
43% {
|
|
transform: rotateZ(0)
|
|
}
|
|
|
|
100% {
|
|
transform: rotateZ(0)
|
|
}
|
|
}
|
|
|
|
@keyframes wase {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(3deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|