462 lines
11 KiB
CSS
462 lines
11 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
/* .btn-outline-primary {
|
|
@apply bg-transparent hover:bg-sky-400 text-sky-400 hover:text-white border-2 border-sky-400 border-opacity-60 rounded-full py-2 transition;
|
|
}
|
|
.btn-primary {
|
|
@apply bg-sky-400 hover:bg-sky-400 text-white hover:text-white border-2 border-sky-400 border-opacity-60 rounded-full py-2 transition;
|
|
} */
|
|
.btn {
|
|
@apply font-bold py-2 px-4 rounded transition-all;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-200 text-white;
|
|
}
|
|
.btn-primary:hover {
|
|
@apply bg-primary-300;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-secondary-100 text-white;
|
|
}
|
|
.btn-secondary:hover {
|
|
@apply bg-secondary-200;
|
|
}
|
|
|
|
.btn-info {
|
|
@apply bg-info-100 text-white;
|
|
}
|
|
.btn-info:hover {
|
|
@apply bg-info-200;
|
|
}
|
|
|
|
.form-control {
|
|
@apply !appearance-none !border-[2px] !bg-body-100 !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
|
|
}
|
|
|
|
.form-control-white {
|
|
@apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
/* Hide the default checkbox appearance */
|
|
appearance: inherit;
|
|
/* -webkit-appearance: none; */
|
|
/* -moz-appearance: none; */
|
|
|
|
/* Set the desired size and border radius */
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 30px; /* Use a percentage for a circular shape */
|
|
|
|
/* Add custom styling */
|
|
border: 2px solid hsl(14, 82%, 47%);
|
|
background-color: #fff;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background-color: #da4215;
|
|
}
|
|
|
|
body {
|
|
font-family: KalamehWeb !important;
|
|
background: #eeeeee;
|
|
--toastify-font-family: KalamehWeb !important;
|
|
--Chart-defaults-font-family: KalamehWeb !important;
|
|
}
|
|
|
|
.rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
.ltr {
|
|
direction: ltr;
|
|
}
|
|
|
|
.tr2 {
|
|
transition: 2s;
|
|
}
|
|
|
|
.tr03 {
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.fuck-cick {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bg-BigPlus {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.loader {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid #fff;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 0.9s linear infinite;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
[data-rsbs-backdrop] {
|
|
z-index: 100000 !important;
|
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
}
|
|
[data-rsbs-overlay] {
|
|
z-index: 999 !important;
|
|
overflow: hidden;
|
|
}
|
|
[data-rsbs-header] {
|
|
background-color: #356859;
|
|
padding-top: 30px !important;
|
|
}
|
|
|
|
[data-rsbs-header]::before {
|
|
top: 20px !important;
|
|
}
|
|
|
|
.DatePicker {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
.responsive-datePicker {
|
|
/* by setting font-size, all the elements will correspond */
|
|
font-size: 9px !important; /* default to 10px */
|
|
}
|
|
|
|
@media (max-width: 1500px) {
|
|
.responsive-datePicker {
|
|
font-size: 8px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.responsive-datePicker {
|
|
font-size: 7px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.responsive-datePicker {
|
|
font-size: 6px !important;
|
|
}
|
|
}
|
|
|
|
/* Large screens */
|
|
@media (min-width: 2500px) {
|
|
.responsive-datePicker {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
.DatePicker__CalenderContainer {
|
|
top: -100px !important;
|
|
z-index: 100000;
|
|
}
|
|
|
|
.delete {
|
|
--border-size: 3px;
|
|
--border-angle: 0turn;
|
|
width: 180px;
|
|
height: fit-content;
|
|
padding: 17px;
|
|
margin-right: 10px;
|
|
background-image: conic-gradient(
|
|
from var(--border-angle),
|
|
transparent,
|
|
transparent 50%,
|
|
transparent
|
|
),
|
|
conic-gradient(
|
|
from var(--border-angle),
|
|
transparent 1%,
|
|
rgb(179, 4, 4),
|
|
rgb(133, 2, 2),
|
|
rgb(204, 0, 0)
|
|
);
|
|
background-size: calc(100% - (var(--border-size) * 6))
|
|
calc(100% - (var(--border-size) * 2)),
|
|
cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
animation: bg-spin 1s linear infinite;
|
|
border-radius: 15px;
|
|
margin-top: 5px;
|
|
}
|
|
@keyframes bg-spin {
|
|
to {
|
|
--border-angle: 1turn;
|
|
}
|
|
}
|
|
.box:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
@property --border-angle {
|
|
syntax: "<angle>";
|
|
inherits: true;
|
|
initial-value: 0turn;
|
|
}
|
|
|
|
#swich-shifts::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
#swich-shifts {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.hash-span {
|
|
margin-top: -100px;
|
|
padding-bottom: 100px;
|
|
display: block;
|
|
}
|
|
|
|
.black-gradient {
|
|
background: #000000; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to right,
|
|
#434343,
|
|
#000000
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to right,
|
|
#434343,
|
|
#000000
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.violet-gradient {
|
|
background: #b9e4c9;
|
|
background: linear-gradient(-90deg, #b9e4c9 0%, rgba(60, 51, 80, 0) 100%);
|
|
background: -webkit-linear-gradient(
|
|
-90deg,
|
|
#b9e4c9 0%,
|
|
rgba(60, 51, 80, 0) 100%
|
|
);
|
|
}
|
|
|
|
.green-pink-gradient {
|
|
background: "#00cea8";
|
|
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
|
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
|
}
|
|
|
|
.orange-text-gradient {
|
|
background: #f12711; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to top,
|
|
#f12711,
|
|
#f5af19
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to top,
|
|
#f12711,
|
|
#f5af19
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.green-text-gradient {
|
|
background: #11998e; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to top,
|
|
#11998e,
|
|
#38ef7d
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to top,
|
|
#11998e,
|
|
#38ef7d
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.blue-text-gradient {
|
|
/* background: -webkit-linear-gradient(#eee, #333); */
|
|
background: #56ccf2; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to top,
|
|
#2f80ed,
|
|
#56ccf2
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to top,
|
|
#2f80ed,
|
|
#56ccf2
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.pink-text-gradient {
|
|
background: #ec008c; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to top,
|
|
#ec008c,
|
|
#fc6767
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to top,
|
|
#ec008c,
|
|
#fc6767
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* canvas- styles */
|
|
.canvas-loader {
|
|
font-size: 10px;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
animation: mulShdSpin 1.1s infinite ease;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
@keyframes mulShdSpin {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0em -2.6em 0em 0em #ffffff,
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
|
}
|
|
12.5% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
|
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
|
}
|
|
25% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
|
}
|
|
37.5% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
|
}
|
|
62.5% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
|
}
|
|
75% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
|
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
|
}
|
|
87.5% {
|
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
|
|
}
|
|
}
|
|
|
|
#root {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 6em;
|
|
padding: 1.5em;
|
|
will-change: filter;
|
|
transition: filter 300ms;
|
|
}
|
|
.logo:hover {
|
|
filter: drop-shadow(0 0 2em #646cffaa);
|
|
}
|
|
.logo.react:hover {
|
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
}
|
|
|
|
@keyframes logo-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
a:nth-of-type(2) .logo {
|
|
animation: logo-spin infinite 20s linear;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
padding: 2em;
|
|
}
|
|
|
|
.read-the-docs {
|
|
color: #888;
|
|
}
|
|
|
|
.bg-hero-pattern {
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-image: url(../public/images/bg.png);
|
|
}
|