marzban-dev
136 lines
4.3 KiB
CSS
136 lines
4.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import "./other.utils.css";
|
|
@import "./typo.utils.css";
|
|
@import "./button.comp.css";
|
|
@import "./input.comp.css";
|
|
@import "./fonts/iran-yekan-x.css"
|
|
|
|
@theme {
|
|
/* COLORS */
|
|
--color-slate-50: hsl(210, 40%, 98%);
|
|
--color-slate-100: hsl(210, 40%, 96%);
|
|
--color-slate-200: hsl(214, 32%, 91%);
|
|
--color-slate-300: hsl(213, 27%, 84%);
|
|
--color-slate-400: hsl(215, 20%, 65%);
|
|
--color-slate-500: hsl(215, 16%, 47%);
|
|
--color-slate-600: hsl(215, 19%, 35%);
|
|
--color-slate-700: hsl(215, 25%, 27%);
|
|
--color-slate-800: hsl(217, 33%, 17%);
|
|
--color-slate-900: hsl(222, 47%, 11%);
|
|
--color-slate-950: hsl(229, 84%, 5%);
|
|
|
|
--color-blue-50: hsl(214, 100%, 97%);
|
|
--color-blue-100: hsl(214, 95%, 93%);
|
|
--color-blue-200: hsl(213, 97%, 87%);
|
|
--color-blue-300: hsl(212, 96%, 78%);
|
|
--color-blue-400: hsl(213, 94%, 68%);
|
|
--color-blue-500: hsl(217, 91%, 60%);
|
|
--color-blue-600: hsl(221, 83%, 53%);
|
|
--color-blue-700: hsl(224, 76%, 48%);
|
|
--color-blue-800: hsl(226, 71%, 40%);
|
|
--color-blue-900: hsl(224, 64%, 33%);
|
|
--color-blue-950: hsl(226, 57%, 21%);
|
|
|
|
--color-cyan-50: hsl(183, 100%, 96%);
|
|
--color-cyan-100: hsl(185, 96%, 90%);
|
|
--color-cyan-200: hsl(185, 96%, 90%);
|
|
--color-cyan-300: hsl(187, 92%, 69%);
|
|
--color-cyan-400: hsl(188, 86%, 53%);
|
|
--color-cyan-500: hsl(189, 94%, 43%);
|
|
--color-cyan-600: hsl(192, 91%, 36%);
|
|
--color-cyan-700: hsl(193, 82%, 31%);
|
|
--color-cyan-800: hsl(194, 70%, 27%);
|
|
--color-cyan-900: hsl(196, 64%, 24%);
|
|
--color-cyan-950: hsl(197, 79%, 15%);
|
|
|
|
--color-orange-50: hsl(33, 100%, 96%);
|
|
--color-orange-100: hsl(34, 100%, 92%);
|
|
--color-orange-200: hsl(32, 98%, 83%);
|
|
--color-orange-300: hsl(31, 97%, 72%);
|
|
--color-orange-400: hsl(27, 96%, 61%);
|
|
--color-orange-500: hsl(25, 95%, 53%);
|
|
--color-orange-600: hsl(21, 90%, 48%);
|
|
--color-orange-700: hsl(17, 88%, 40%);
|
|
--color-orange-800: hsl(15, 79%, 34%);
|
|
--color-orange-900: hsl(15, 75%, 28%);
|
|
--color-orange-950: hsl(13, 81%, 15%);
|
|
|
|
--color-success-50: hsl(138, 76%, 97%);
|
|
--color-success-100: hsl(141, 84%, 93%);
|
|
--color-success-200: hsl(141, 79%, 85%);
|
|
--color-success-300: hsl(142, 77%, 73%);
|
|
--color-success-400: hsl(142, 69%, 58%);
|
|
--color-success-500: hsl(142, 71%, 45%);
|
|
--color-success-600: hsl(142, 76%, 36%);
|
|
--color-success-700: hsl(142, 72%, 29%);
|
|
--color-success-800: hsl(143, 64%, 24%);
|
|
--color-success-900: hsl(144, 61%, 20%);
|
|
--color-success-950: hsl(145, 80%, 10%);
|
|
|
|
--color-warning-50: hsl(55, 92%, 95%);
|
|
--color-warning-100: hsl(55, 97%, 88%);
|
|
--color-warning-200: hsl(53, 98%, 77%);
|
|
--color-warning-300: hsl(50, 98%, 64%);
|
|
--color-warning-400: hsl(48, 96%, 53%);
|
|
--color-warning-500: hsl(45, 93%, 47%);
|
|
--color-warning-600: hsl(41, 96%, 40%);
|
|
--color-warning-700: hsl(35, 92%, 33%);
|
|
--color-warning-800: hsl(32, 81%, 29%);
|
|
--color-warning-900: hsl(28, 73%, 26%);
|
|
--color-warning-950: hsl(26, 83%, 14%);
|
|
|
|
--color-danger-50: hsl(0, 86%, 97%);
|
|
--color-danger-100: hsl(0, 93%, 94%);
|
|
--color-danger-200: hsl(0, 96%, 89%);
|
|
--color-danger-300: hsl(0, 94%, 82%);
|
|
--color-danger-400: hsl(0, 91%, 71%);
|
|
--color-danger-500: hsl(0, 84%, 60%);
|
|
--color-danger-600: hsl(0, 72%, 51%);
|
|
--color-danger-700: hsl(0, 74%, 42%);
|
|
--color-danger-800: hsl(0, 70%, 35%);
|
|
--color-danger-900: hsl(0, 63%, 31%);
|
|
--color-danger-950: hsl(0, 75%, 15%);
|
|
|
|
/* BORDER RADIUS */
|
|
--radius-50: 5px;
|
|
--radius-100: 10px;
|
|
--radius-150: 15px;
|
|
--radius-200: 20px;
|
|
--radius-250: 25px;
|
|
--radius-360: 99999999px;
|
|
|
|
/* FONT WEIGHT */
|
|
--font-weight-extrablack: 950;
|
|
--font-weight-heavy: 1000;
|
|
|
|
/* FONT FAMILY */
|
|
--font-lato: "Lato", sans-serif;
|
|
--font-inter: "Inter", sans-serif;
|
|
--font-dmsans: "DM Sans", sans-serif;
|
|
--font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
|
|
|
|
/* BREAKPOINTS */
|
|
--breakpoint-3xl: 1700px;
|
|
--breakpoint-2xs: 400px;
|
|
--breakpoint-xs: 480px;
|
|
|
|
|
|
/* ANIMATIONS */
|
|
--animate-marquee: marquee 3s linear infinite;
|
|
|
|
@keyframes marquee {
|
|
to {
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CONTAINER */
|
|
|
|
@utility container {
|
|
padding-inline: 3rem;
|
|
@screen xl {
|
|
padding-inline: 5rem;
|
|
}
|
|
} |