+
Log In
diff --git a/src/index.css b/src/index.css
index 8882336..8e6755e 100755
--- a/src/index.css
+++ b/src/index.css
@@ -15,11 +15,13 @@
font-family: "Product Sans";
src: url("./assets/fonts/Product Sans Italic.ttf");
}
+
/* regular Weight */
@font-face {
font-family: "Product Sans";
src: url("./assets/fonts/Product Sans Regular.ttf");
}
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -28,6 +30,7 @@
min-height: 0;
min-width: 0;
}
+
:root {
--toastify-color-success: #f539f8;
}
@@ -38,18 +41,20 @@ body {
background-repeat: no-repeat;
background-size: cover;
}
+
html {
font-family: "Product Sans";
}
+
.primary-gradient {
background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%);
- /* background-image: url("./assets/images/left-myft.jpg");
+ /* background-image: url("./assets/images/left-myft.jpg");
background-repeat: no-repeat;
background-size: cover; */
}
.dark .dark-primary-gradient {
- background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
+ background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(188, 73, 190, 1) 100%);
}
.primary-home {
@@ -57,12 +62,25 @@ html {
background-image: url("./assets/images/left-myft.jpg");
background-repeat: no-repeat;
background-size: cover;
+ position: relative;
+}
+
+.primary-home::before {
+ content: "";
+ position: absolute;
+ width: 55px;
+ height: 100%;
+ top: 0;
+ right: -30px;
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
}
.btn-shine {
position: relative;
overflow: hidden;
}
+
.btn-shine:after {
content: "";
z-index: 1;
@@ -78,6 +96,7 @@ html {
transition: transform 0.45s ease-in-out;
transform: translate3d(500%, 0, 0) rotate(35deg);
}
+
.secondary-gradient::before {
content: "";
display: block;
@@ -89,40 +108,52 @@ html {
background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
opacity: 30%;
}
+
/* 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;
}
+
.default-border-bottom {
border-bottom: 1px solid #d3d2fe;
}
+
.overflow-style-none::-webkit-scrollbar {
display: none;
}
+
/* Hide scrollbar for IE, Edge and Firefox */
.overflow-style-none {
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none;
+ /* IE and Edge */
+ scrollbar-width: none;
+ /* Firefox */
}
+
.btn-gradient {
background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
}
+
.btn-gradient:hover {
background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
}
+
.text-26 {
font-size: 26px;
line-height: 31.54px;
}
+
.text-18 {
font-size: 18px;
}
+
.section-shadow {
box-shadow: 0px 9px 95px 0px #0000000d;
}
@@ -132,6 +163,7 @@ input[type="number"] {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
+
.border-gradient {
border: 1px solid transparent;
background: linear-gradient(to right, white, white),
@@ -139,6 +171,7 @@ input[type="number"] {
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
}
+
.signup.btn-loader {
border: 3px solid hsla(180, 4%, 82%, 0.2);
border-top-color: #ffffff;
@@ -153,6 +186,7 @@ input[type="number"] {
transform: rotate(360deg);
}
}
+
/* TODO: =================================default end================================ */
/* TODO: =================================update password================================ */
.content-wrapper.thankyou-section {
@@ -162,11 +196,13 @@ input[type="number"] {
transform: scale(0);
visibility: hidden;
}
+
.content-wrapper.thankyou-section.active {
transition: all 0.5s ease-in-out;
transform: scale(1);
visibility: visible;
}
+
/* #otp {
caret-color: transparent;
}
@@ -187,11 +223,13 @@ input[type="number"] {
transform: scale(1);
width: 100%;
}
+
.sidebar-logo {
transform: scale(0);
width: 0;
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.menu-setting-items .items .item .item-content {
transform: scale(0);
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
@@ -201,30 +239,35 @@ input[type="number"] {
transform: scale(1);
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.menu-setting-items .heading.active {
opacity: 100;
transform: scale(1);
width: 100%;
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.menu-setting-items .heading {
opacity: 0;
transform: scale(0);
width: 0;
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.signout-btn .signout-btn-content.active {
opacity: 100;
transform: scale(1);
width: 100%;
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.signout-btn .signout-btn-content {
opacity: 0;
transform: scale(0);
width: 0;
transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
}
+
.balance-dropdown::before {
content: "";
display: block;
@@ -237,6 +280,7 @@ input[type="number"] {
top: -28px;
left: 50%;
}
+
.notification-dropdown::before {
content: "";
display: block;
@@ -249,6 +293,7 @@ input[type="number"] {
top: -28px;
left: 74%;
}
+
.profile-dropdown::before {
content: "";
display: block;
@@ -261,6 +306,7 @@ input[type="number"] {
top: -28px;
left: 57%;
}
+
.dark .profile-dropdown::before,
.dark .notification-dropdown::before,
.dark .balance-dropdown::before {
@@ -273,58 +319,71 @@ input[type="number"] {
visibility: hidden;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}
+
.balance-dropdown.active {
top: 6rem;
opacity: 100;
visibility: visible;
}
+
.notification-dropdown {
top: 16rem;
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}
+
.notification-dropdown.active {
top: 6rem;
opacity: 100;
visibility: visible;
}
+
.profile-dropdown {
top: 16rem;
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}
+
.profile-dropdown.active {
top: 6rem;
opacity: 100;
visibility: visible;
}
+
.profile-dropdown,
.notification-dropdown,
.balance-dropdown {
box-shadow: 19px 11px 127px 0px #00000030;
}
+
.miniLineChart canvas {
height: 122px;
}
+
.menu-setting-items .nav-item.active span.item-icon {
@apply bg-purple text-white;
}
+
.menu-setting-items .nav-item.active span.item-content {
@apply text-purple;
}
+
.dark .menu-setting-items .nav-item.active span.item-content {
@apply text-white
}
+
/* TODO: =================================layout end================================ */
/* TODO: =================================HomePage ================================ */
.home-page-wrapper .hero-slider .slick-slider .slick-dots li {
margin: 0;
}
+
.home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button {
background: white;
}
+
.home-page-wrapper .hero-slider .slick-slider .slick-dots li button {
background: none;
border: 1px solid white;
@@ -332,11 +391,13 @@ input[type="number"] {
width: 8px;
height: 8px;
}
+
.home-page-wrapper .hero-slider .slick-slider .slick-dots li button:before {
content: "";
width: 100%;
height: 100%;
}
+
.trending-slider-left-btn::before {
content: "";
display: block;
@@ -349,15 +410,17 @@ input[type="number"] {
z-index: -1;
opacity: 30%;
}
+
.card-style-one .content .thumbnail {
background-repeat: no-repeat;
background-size: cover;
}
+
.card-style-one {
box-shadow: 0px 9px 95px 0px #0000000d;
}
-.trending-products .slick-slide > div {
+.trending-products .slick-slide>div {
margin: 0 16px;
}
@@ -423,6 +486,7 @@ input[type="number"] {
.circle-count:nth-child(2) svg circle:last-of-type {
stroke: rgba(242, 153, 74, 1);
}
+
.circle-count:nth-child(3) svg circle:last-of-type {
stroke: rgba(235, 87, 87, 1);
}
@@ -431,9 +495,11 @@ input[type="number"] {
stroke-dasharray: 156px;
stroke-dashoffset: calc(156px - (156px * var(--percent)) / 100);
}
+
.recent-transaction-widget .content ul li:last-child {
border-bottom: none;
}
+
/* TODO: =================================my wallet end================================ */
/* TODO: =================================upload product end================================ */
.drop-product-upload {
@@ -444,23 +510,29 @@ input[type="number"] {
.drop-product-upload.highlight {
border: 2px dashed #5356fb;
}
+
.field-title {
@apply text-xl font-bold tracking-wide text-dark-gray dark:text-white;
}
+
.switch-btn {
transition: all 0.5s ease-in-out;
background-color: #878f9a;
}
+
.switch-btn.active {
background-color: #27ae60;
}
+
.switch-btn .inner-circle {
transition: all 0.5s ease-in-out;
transform: translate(1.5px, 1.5px);
}
+
.switch-btn.active .inner-circle {
transform: translate(24.5px, 1.5px);
}
+
.preview-upload-product {
background-image: url("./assets/images/background-2.svg");
background-repeat: no-repeat;
@@ -472,18 +544,23 @@ input[type="number"] {
.notification-page .content-item .notifications {
@apply flex space-x-4 items-center;
}
+
.notification-page .content-item .notifications .notification-page .content-item .notifications {
@apply mb-0;
}
+
.notification-setting-tab .notification-settings-items li:last-child {
border-bottom: none;
}
+
.faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar {
padding-top: 0;
}
+
.faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content {
padding-bottom: 20px;
}
+
.faq-tab .accordion-title-bar {
background: #ffffff;
position: relative;
@@ -495,11 +572,13 @@ input[type="number"] {
transform: rotate(0deg);
visibility: hidden;
}
+
.faq-tab .accordion-title-bar .accordion-title-icon .vertical.active {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
visibility: visible;
}
+
.faq-tab .accordion-body {
transition: all 0.2s ease-in-out;
max-height: 0;
@@ -507,12 +586,14 @@ input[type="number"] {
transform: translateY(-220px);
overflow: hidden;
}
+
.faq-tab .accordion-body.active {
transition: all 0.5s ease-in-out;
max-height: 1444px;
transform: translateY(0);
opacity: 100;
}
+
/* TODO: =================================setting end================================= */
/* TODO: =================================modal================================= */
.children-element {
@@ -520,9 +601,11 @@ input[type="number"] {
top: 175px;
transform: translate(-50%, 0px);
}
+
.modal-com {
transition: all 0.1s ease-in-out;
}
+
/* TODO: =================================modal end================================= */
/* TODO: =================================login ================================= */
.btn-login {
@@ -530,6 +613,7 @@ input[type="number"] {
height: 58px;
@apply bg-purple;
}
+
.btn-login.active {
transition: all 0.5s ease-in-out;
width: 58px;
@@ -558,11 +642,13 @@ TODO: components ===========================
visibility: hidden;
top: 150px;
}
+
.drop-down-com .drop-down-content.active {
opacity: 100;
visibility: visible;
top: 100%;
}
+
.product-options .drop-down-content {
transition: all 0.5s ease-in-out;
opacity: 0;
@@ -570,11 +656,13 @@ TODO: components ===========================
top: 150px;
right: 40px;
}
+
.product-options .drop-down-content.active {
opacity: 100;
visibility: visible;
top: 0;
}
+
.product-two-options .drop-down-content {
transition: all 0.5s ease-in-out;
opacity: 0;
@@ -582,11 +670,13 @@ TODO: components ===========================
top: 150px;
right: 0;
}
+
.product-two-options .drop-down-content.active {
opacity: 100;
visibility: visible;
top: calc(100% + 10px);
}
+
.rate-statics-dropdown {
transition: all 0.5s ease-in-out;
opacity: 0;
@@ -594,11 +684,13 @@ TODO: components ===========================
top: 150px;
left: 0;
}
+
.rate-statics-dropdown.active {
opacity: 100;
visibility: visible;
top: calc(100% + 10px);
}
+
.Update-table-dropdown :is(.text-sm) {
@apply text-base;
}
@@ -607,47 +699,57 @@ TODO: components ===========================
.dark .drop-product-upload {
background-color: #1d1f2f;
}
+
html.dark body {
background-image: url("./assets/images/background-dark.svg");
background-repeat: no-repeat;
background-size: cover;
}
+
.dark .preview-upload-product {
background: none;
}
+
.dark .faq-tab .accordion-title-bar {
background: none;
}
+
.dark .content-wrapper.thankyou-section {
background-image: none;
}
+
/*
TODO: Responsive ===========================
*/
@media (prefers-color-scheme: dark) {
+
/* defaults to dark theme */
html.dark body {
background-image: url("./assets/images/background-dark.svg");
}
}
+
@media (max-width: 1536px) {
- .trending-products .slick-slide > div {
+ .trending-products .slick-slide>div {
margin: 0 10px;
}
}
-@media (max-width: 1280px) {
-}
+
+@media (max-width: 1280px) {}
+
@media (max-width: 1024px) {
.content-wrapper.thankyou-section {
background-image: none;
}
+
.children-element {
left: 50%;
top: 65px;
transform: translate(-50%, 0px);
}
}
+
@media (max-width: 768px) {
.profile-dropdown::before {
content: "";
@@ -661,6 +763,7 @@ TODO: Responsive ===========================
top: -28px;
left: 78%;
}
+
.children-element {
left: 0;
top: 0;
@@ -668,19 +771,26 @@ TODO: Responsive ===========================
transform: none;
}
}
-@media (max-width: 640px) {
-}
+
+@media (max-width: 640px) {}
+
@media (max-width: 426px) {
+
.nft-authprofile-wrapper .content-wrapper-profile-only .auth,
.nft-userprofile-wrapper .content-wrapper-profile-only .auth {
margin-top: -70px;
}
- .react-date-picker__calendar {width: 290px;}
+
+ .react-date-picker__calendar {
+ width: 290px;
+ }
}
+
@media (max-width: 376px) {
.notification-page .content-item .notifications {
@apply block space-x-0;
}
+
.notification-page .content-item .notifications .icon {
@apply mb-2;
}
@@ -688,52 +798,60 @@ TODO: Responsive ===========================
}
/* Calendar */
-.react-calendar{
+.react-calendar {
width: 100%;
min-height: 23.2rem;
border-radius: 7px !important;
@apply border border-pink !important;
}
-.dark .react-calendar{
+.dark .react-calendar {
background: #11131F;
color: #7B818D;
- border: 1px solid #25284F;
+ border: 1px solid #25284F;
}
-.dark .react-calendar__navigation button:enabled:hover,
+
+.dark .react-calendar__navigation button:enabled:hover,
.dark .react-calendar__navigation button:enabled:focus,
.dark .react-calendar__tile:disabled,
-.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
+.dark .react-calendar__navigation button:disabled {
+ background: #1D1F2F;
+}
-.react-calendar__navigation{
+.react-calendar__navigation {
margin-top: 2px;
margin-inline: 2px;
@apply text-pink !important;
}
-.react-calendar__tile--active{color: #fff; font-weight: bold;
+.react-calendar__tile--active {
+ color: #fff;
+ font-weight: bold;
/* background-color: #006edc; */
@apply bg-pink;
}
-.dark .react-calendar__tile--active{color: #fff;}
+
+.dark .react-calendar__tile--active {
+ color: #fff;
+}
.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus{
+.react-calendar__navigation button:enabled:focus {
@apply rounded-full transition duration-500
}
-.react-calendar__month-view__days{
+.react-calendar__month-view__days {
display: grid !important;
grid-template-columns: repeat(7, 1fr);
}
-.react-calendar__month-view__weekdays__weekday abbr:where([title]){
+.react-calendar__month-view__weekdays__weekday abbr:where([title]) {
text-decoration: none !important;
cursor: default;
@apply text-pink !important;
}
-.react-calendar__tile{
+.react-calendar__tile {
border: 1px solid #cfd7e3 !important;
border-left: 0;
text-align: right;
@@ -742,9 +860,11 @@ TODO: Responsive ===========================
/* @apply border border-pink !important; */
}
-.dark .react-calendar__tile{background: #11131F;}
+.dark .react-calendar__tile {
+ background: #11131F;
+}
-.reminder-select select{
+.reminder-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -754,32 +874,33 @@ TODO: Responsive ===========================
}
.dark .reminder-select select {
- border: 0.5px solid #25284F;
+ border: 0.5px solid #25284F;
}
.reminder-select select::-ms-expand {
- display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
+ display: none;
+ /* Remove default arrow in Internet Explorer 10 and 11 */
}
-.reminder-select select option{
+.reminder-select select option {
color: inherit;
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
.reminder-select select {
- background: none\9;
- padding: 5px\9;
+ background: none\9;
+ padding: 5px\9;
}
}
/* Date Picker */
-.react-date-picker{
+.react-date-picker {
display: flex !important;
flex: 1;
}
-.react-date-picker__wrapper{
+.react-date-picker__wrapper {
border: 0.5px solid #E3E4FE;
padding: 1.25rem;
background: #fafafa;
@@ -787,29 +908,38 @@ TODO: Responsive ===========================
@apply border border-pink;
}
-.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
+.dark .react-date-picker__wrapper {
+ border: 0.5px solid #25284F;
+}
-.dark .react-date-picker__wrapper{
+.dark .react-date-picker__wrapper {
background: #11131F;
color: #7B818D;
}
-.dark .react-date-picker__button svg{stroke: #7B818D;}
+.dark .react-date-picker__button svg {
+ stroke: #7B818D;
+}
-.react-date-picker__calendar {inset: 100% 25px auto auto !important;}
-.react-date-picker__calendar .react-calendar{
+.react-date-picker__calendar {
+ inset: 100% 25px auto auto !important;
+}
+
+.react-date-picker__calendar .react-calendar {
min-height: 18.4rem;
}
-.react-date-picker__calendar .react-calendar__tile{
+.react-date-picker__calendar .react-calendar__tile {
height: 40px !important;
}
.react-date-picker__inputGroup__input,
-.react-date-picker__inputGroup__divider,
-.react-date-picker__inputGroup__leadingZero{
+.react-date-picker__inputGroup__divider,
+.react-date-picker__inputGroup__leadingZero {
cursor: pointer;
color: #374151;
}
-.animate-fadeIn {@apply transition duration-300}
\ No newline at end of file
+.animate-fadeIn {
+ @apply transition duration-300
+}
\ No newline at end of file
-
- */}
+ 
*/}
+ {/*