446 lines
7.1 KiB
CSS
446 lines
7.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--primary: #005AB5;
|
|
--primaryLight: #ffffff;
|
|
--primaryLight2: #6a92c2;
|
|
--primaryLight3: #dae9de;
|
|
--dashBoardBg: #ffffff;
|
|
--mainViewBg: #F8F9FC;
|
|
--highlightBg1: #edeaeb;
|
|
--menuTextCol: #98a0a8;
|
|
--menuTextColActive: #005AB5;
|
|
--menuBgColActive: #FFFFFF;
|
|
--menuTextHoverCol: #e7e7e7;
|
|
|
|
--greyTextCol: #98a0a8;
|
|
--lightGreyCol: #e1e1e1;
|
|
--compBgCol: #ffffff;
|
|
|
|
--avatarBgCol: #3D74B6;
|
|
--avatarTextCol: #ffffff;
|
|
|
|
|
|
--profileMenuModalBg: #ffffff;
|
|
--profileMenuModalTextCol: #98a0a8;
|
|
--profileMenuModalTextColActive: #2d2d2d;
|
|
--profileMenuModalBgColActive: #edeaeb;
|
|
|
|
|
|
|
|
--sendForSignTextCol: #ffffff;
|
|
--sendForSignBgCol: #d02f56;
|
|
|
|
--sendForSignDropDownText: #000000;
|
|
--sendForSignDropDownBg: #ffffff;
|
|
--sendForSignDropDownHover: #e7e7e7;
|
|
|
|
|
|
--loaderBg: #ffffff;
|
|
|
|
--modalBg: #ffffff;
|
|
|
|
--hideModalBg: #2d2d2d;
|
|
|
|
--processStepOneTextHead: #000000;
|
|
|
|
--modalSubmitBG: #1919d7;
|
|
--modalSubmitBGHover: #395ee1;
|
|
|
|
/* Figma Design */
|
|
--sidebarBg: #005AB5;
|
|
--sidebarDropDownBg : #003C78;
|
|
--sidebarMenuCol : #FFFFFF;
|
|
--documentUploadBg :#FFFFFF;
|
|
--mainPrimaryBtn : #077DEC;
|
|
--dashBoardStartNowBtn : #077DEC;
|
|
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
/* Button press effect */
|
|
.btn:active {
|
|
transform: scale(0.97) translateY(1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
|
|
}
|
|
|
|
|
|
|
|
/* Sortable CSS */
|
|
.sortable-ghost {
|
|
opacity: 0.5;
|
|
transform: scale(1.05);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.dropped-item {
|
|
touch-action: none;
|
|
}
|
|
|
|
@keyframes slowPing {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
75%, 100% {
|
|
transform: scale(2.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.custom-ping {
|
|
animation: slowPing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
|
|
canvas {
|
|
touch-action: none;
|
|
-ms-touch-action: none;
|
|
/* For older IE/Edge */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@keyframes textColorChange {
|
|
|
|
0%,
|
|
100% {
|
|
color: white;
|
|
}
|
|
|
|
50% {
|
|
color: var(--primary);
|
|
/* Tailwind blue-500 */
|
|
}
|
|
}
|
|
|
|
.animate-text {
|
|
animation: textColorChange 2s infinite ease-in-out;
|
|
}
|
|
|
|
@layer utilities {
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar size via CSS */
|
|
@layer utilities {
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin; /* For Firefox */
|
|
scrollbar-color: rgba(120, 120, 120, 0.4) transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 1px;
|
|
height: 1px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(120, 120, 120, 0.4);
|
|
border-radius: 9999px; /* fully rounded */
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(120, 120, 120, 0.6); /* slightly darker on hover */
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* Group Border - START */
|
|
.group-border {
|
|
position: absolute;
|
|
border: 1px dashed var(--primary);
|
|
/* pointer-events: none; */
|
|
}
|
|
|
|
.bottom-border>div {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 50;
|
|
background-color: var(--primary);
|
|
color: var(--primaryLight);
|
|
padding: 2px 8px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.bottom-border>div:hover {
|
|
background-color: var(--primaryLight2);
|
|
opacity: 0.9;
|
|
transition: all 0.3s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Group Border - END */
|
|
|
|
|
|
/* Loader CSS */
|
|
/* From Uiverse.io by Juanes200122 */
|
|
.pl {
|
|
width: 6em;
|
|
height: 6em;
|
|
}
|
|
|
|
.pl__ring {
|
|
animation: ringA 2s linear infinite;
|
|
}
|
|
|
|
.pl__ring--a {
|
|
stroke: #41644A;
|
|
}
|
|
|
|
.pl__ring--b {
|
|
animation-name: ringB;
|
|
stroke: #7e7e7e;
|
|
}
|
|
|
|
.pl__ring--c {
|
|
animation-name: ringC;
|
|
stroke: #686868;
|
|
}
|
|
|
|
.pl__ring--d {
|
|
animation-name: ringD;
|
|
stroke: #41644A;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes ringA {
|
|
|
|
from,
|
|
4% {
|
|
stroke-dasharray: 0 660;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -330;
|
|
}
|
|
|
|
12% {
|
|
stroke-dasharray: 60 600;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -335;
|
|
}
|
|
|
|
32% {
|
|
stroke-dasharray: 60 600;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -595;
|
|
}
|
|
|
|
40%,
|
|
54% {
|
|
stroke-dasharray: 0 660;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -660;
|
|
}
|
|
|
|
62% {
|
|
stroke-dasharray: 60 600;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -665;
|
|
}
|
|
|
|
82% {
|
|
stroke-dasharray: 60 600;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -925;
|
|
}
|
|
|
|
90%,
|
|
to {
|
|
stroke-dasharray: 0 660;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -990;
|
|
}
|
|
}
|
|
|
|
@keyframes ringB {
|
|
|
|
from,
|
|
12% {
|
|
stroke-dasharray: 0 220;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -110;
|
|
}
|
|
|
|
20% {
|
|
stroke-dasharray: 20 200;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -115;
|
|
}
|
|
|
|
40% {
|
|
stroke-dasharray: 20 200;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -195;
|
|
}
|
|
|
|
48%,
|
|
62% {
|
|
stroke-dasharray: 0 220;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -220;
|
|
}
|
|
|
|
70% {
|
|
stroke-dasharray: 20 200;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -225;
|
|
}
|
|
|
|
90% {
|
|
stroke-dasharray: 20 200;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -305;
|
|
}
|
|
|
|
98%,
|
|
to {
|
|
stroke-dasharray: 0 220;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -330;
|
|
}
|
|
}
|
|
|
|
@keyframes ringC {
|
|
from {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
8% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -5;
|
|
}
|
|
|
|
28% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -175;
|
|
}
|
|
|
|
36%,
|
|
58% {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -220;
|
|
}
|
|
|
|
66% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -225;
|
|
}
|
|
|
|
86% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -395;
|
|
}
|
|
|
|
94%,
|
|
to {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -440;
|
|
}
|
|
}
|
|
|
|
@keyframes ringD {
|
|
|
|
from,
|
|
8% {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
16% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -5;
|
|
}
|
|
|
|
36% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -175;
|
|
}
|
|
|
|
44%,
|
|
50% {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -220;
|
|
}
|
|
|
|
58% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -225;
|
|
}
|
|
|
|
78% {
|
|
stroke-dasharray: 40 400;
|
|
stroke-width: 30;
|
|
stroke-dashoffset: -395;
|
|
}
|
|
|
|
86%,
|
|
to {
|
|
stroke-dasharray: 0 440;
|
|
stroke-width: 20;
|
|
stroke-dashoffset: -440;
|
|
}
|
|
}
|
|
|
|
.bottom-border>div:hover {
|
|
background-color: var(--primaryLight2);
|
|
opacity: 0.9;
|
|
transition: all 0.3s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Group Border - END */
|
|
|
|
|
|
|
|
/* JoyRide - START */
|
|
.__floater__body > div > button:last-child {
|
|
display: none !important;
|
|
}
|
|
/* JoyRide - END */ |