fixed responsiveness issues for the layout
This commit is contained in:
+168
-76
@@ -3,7 +3,7 @@
|
||||
font-family: "Product Sans";
|
||||
src: url("./assets/fonts/Product Sans Regular.ttf");
|
||||
}
|
||||
.nft-main-container{
|
||||
.nft-main-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
/* Bold Weight */
|
||||
@@ -11,57 +11,59 @@
|
||||
font-family: "Product Sans";
|
||||
src: url("./assets/fonts/Product Sans Bold.ttf");
|
||||
}
|
||||
.SENDER{
|
||||
.SENDER {
|
||||
margin-left: 60px !important;
|
||||
background-color: azure;
|
||||
}
|
||||
.RECIPIENT{
|
||||
.RECIPIENT {
|
||||
margin-right: 60px !important;
|
||||
background-color: #add8e6 !important;
|
||||
}
|
||||
.wallet-box{
|
||||
.wallet-box {
|
||||
background-color: aliceblue;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.bal-col1{
|
||||
.bal-col1 {
|
||||
width: 110px;
|
||||
}
|
||||
.bg-green{
|
||||
.bg-green {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
.referral{
|
||||
margin-bottom: 20px
|
||||
.referral {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.task_action_panel{
|
||||
font-family: sans; color: white;
|
||||
.task_action_panel {
|
||||
font-family: sans;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-size: 14px;
|
||||
font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
||||
padding: 0px 10px 5px 10px
|
||||
padding: 0px 10px 5px 10px;
|
||||
}
|
||||
.heroSilderTitle{
|
||||
.heroSilderTitle {
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
font-family: sans; color: white;
|
||||
font-family: sans;
|
||||
color: white;
|
||||
font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
||||
}
|
||||
.back-dark1{
|
||||
background-color: #193F5F;
|
||||
.back-dark1 {
|
||||
background-color: #193f5f;
|
||||
min-width: 280px !important;
|
||||
}
|
||||
.job-action{
|
||||
.job-action {
|
||||
background-color: #4687ba;
|
||||
height: 100px;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.msg_box{
|
||||
.msg_box {
|
||||
background-color: aliceblue;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.msg_header{
|
||||
.msg_header {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
@@ -69,7 +71,7 @@
|
||||
font-size: 14px;
|
||||
font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
||||
}
|
||||
.siderCardDescription{
|
||||
.siderCardDescription {
|
||||
background-color: aliceblue;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
@@ -78,7 +80,7 @@
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.56;
|
||||
}
|
||||
.siderCardButton{
|
||||
.siderCardButton {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@@ -91,33 +93,39 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.short_style{
|
||||
.short_style {
|
||||
background-color: transparent;
|
||||
border-color: #a2d7f1;
|
||||
border-width: 3px;
|
||||
}
|
||||
.lr{
|
||||
.lr {
|
||||
background-color: #e1cace;
|
||||
}
|
||||
.lg{
|
||||
.lg {
|
||||
background-color: #a7dca7;
|
||||
}
|
||||
.lb{
|
||||
.lb {
|
||||
background-color: #b3ccd7;
|
||||
}
|
||||
.ly{
|
||||
.ly {
|
||||
background-color: #eeee67;
|
||||
}
|
||||
.offer-slide-item{
|
||||
background: rgb(2,0,36);
|
||||
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);
|
||||
.offer-slide-item {
|
||||
background: rgb(2, 0, 36);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(2, 0, 36, 1) 0%,
|
||||
rgba(3, 51, 2, 0.782125350140056) 0%,
|
||||
rgba(0, 212, 255, 0.07904411764705888) 0%,
|
||||
rgba(153, 182, 201, 1) 99%
|
||||
);
|
||||
margin: 5px;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
height: 250px;
|
||||
border-color: beige;
|
||||
}
|
||||
.banner-630-340{
|
||||
.banner-630-340 {
|
||||
width: 630px;
|
||||
height: 340px;
|
||||
background-color: aliceblue;
|
||||
@@ -133,6 +141,7 @@
|
||||
font-family: "Product Sans";
|
||||
src: url("./assets/fonts/Product Sans Regular.ttf");
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -144,9 +153,8 @@
|
||||
--toastify-color-success: #f539f8;
|
||||
}
|
||||
|
||||
|
||||
/* ===================== EXTRA ===================== */
|
||||
.bottomMargin{
|
||||
.bottomMargin {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
/* TODO: =================================default================================ */
|
||||
@@ -159,8 +167,13 @@ 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: linear-gradient(
|
||||
134.38deg,
|
||||
#f539f8 0%,
|
||||
#284f64 43.55%,
|
||||
#1a3544 104.51%
|
||||
);
|
||||
/* background-image: url("./assets/images/left-myft.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; */
|
||||
}
|
||||
@@ -199,7 +212,12 @@ html {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
|
||||
background: linear-gradient(
|
||||
134.38deg,
|
||||
#5356fb 0%,
|
||||
#c342f9 43.55%,
|
||||
#f539f8 104.51%
|
||||
);
|
||||
opacity: 30%;
|
||||
}
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
@@ -229,10 +247,20 @@ input[type="text"][dir="rtl"] {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.btn-gradient {
|
||||
background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
|
||||
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%);
|
||||
background: linear-gradient(
|
||||
134.38deg,
|
||||
#5356fb 0%,
|
||||
#c342f9 43.55%,
|
||||
#f539f8 104.51%
|
||||
);
|
||||
}
|
||||
.text-26 {
|
||||
font-size: 26px;
|
||||
@@ -246,7 +274,12 @@ input[type="text"][dir="rtl"] {
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
|
||||
background: linear-gradient(
|
||||
134.38deg,
|
||||
#f539f8 0%,
|
||||
#c342f9 43.55%,
|
||||
#5356fb 104.51%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@@ -305,6 +338,16 @@ input[type="text"][dir="rtl"] {
|
||||
transform: scale(1);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 25rem) {
|
||||
.sidebar-logo.enter {
|
||||
width: 65%;
|
||||
}
|
||||
.sidebar-logo.enter + span{
|
||||
position: revert;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
transform: scale(0);
|
||||
width: 0;
|
||||
@@ -437,7 +480,12 @@ input[type="text"][dir="rtl"] {
|
||||
.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 {
|
||||
.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 {
|
||||
@@ -460,7 +508,12 @@ input[type="text"][dir="rtl"] {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
|
||||
background: linear-gradient(
|
||||
134.38deg,
|
||||
#5356fb 0%,
|
||||
#c342f9 43.55%,
|
||||
#f539f8 104.51%
|
||||
);
|
||||
z-index: -1;
|
||||
opacity: 30%;
|
||||
}
|
||||
@@ -476,8 +529,10 @@ input[type="text"][dir="rtl"] {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.transfer-field, .transfer-field:focus, .transfer-field:focus-within{
|
||||
background: #FFF !important;
|
||||
.transfer-field,
|
||||
.transfer-field:focus,
|
||||
.transfer-field:focus-within {
|
||||
background: #fff !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
@@ -583,12 +638,12 @@ input[type="text"][dir="rtl"] {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.content{
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.job-items{
|
||||
.job-sub-menu{
|
||||
.job-items {
|
||||
.job-sub-menu {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
@@ -597,7 +652,7 @@ input[type="text"][dir="rtl"] {
|
||||
top: 0;
|
||||
right: -100%;
|
||||
opacity: 0;
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@@ -612,7 +667,12 @@ input[type="text"][dir="rtl"] {
|
||||
.notification-page .content-item .notifications {
|
||||
@apply flex space-x-4 items-center;
|
||||
}
|
||||
.notification-page .content-item .notifications .notification-page .content-item .notifications {
|
||||
.notification-page
|
||||
.content-item
|
||||
.notifications
|
||||
.notification-page
|
||||
.content-item
|
||||
.notifications {
|
||||
@apply mb-0;
|
||||
}
|
||||
.notification-setting-tab .notification-settings-items li:last-child {
|
||||
@@ -621,7 +681,11 @@ input[type="text"][dir="rtl"] {
|
||||
.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 {
|
||||
.faq-tab
|
||||
.accordion-items
|
||||
.accordion-item:last-child
|
||||
.accordion-body
|
||||
.accordion-body-content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.faq-tab .accordion-title-bar {
|
||||
@@ -665,14 +729,15 @@ input[type="text"][dir="rtl"] {
|
||||
}
|
||||
|
||||
@media print {
|
||||
body .modal-com{
|
||||
body .modal-com {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.job-action-modal-body button, .message-modal-header button {
|
||||
.job-action-modal-body button,
|
||||
.message-modal-header button {
|
||||
display: none;
|
||||
}
|
||||
.message-modal-wrapper .message-table{
|
||||
.message-modal-wrapper .message-table {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@@ -839,30 +904,40 @@ TODO: Responsive ===========================
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LoginPage */
|
||||
.main-wrapper.login-wrapper{
|
||||
background-image: url('./assets/images/login-dots.jpg');
|
||||
.main-wrapper.login-wrapper {
|
||||
background-image: url("./assets/images/login-dots.jpg");
|
||||
background-attachment: fixed;
|
||||
background-size: contain;
|
||||
background-position-y: bottom;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
|
||||
.layout-wrapper.login{
|
||||
background: rgb(236,237,241);
|
||||
background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
|
||||
.layout-wrapper.login {
|
||||
background: rgb(236, 237, 241);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 237, 241, 1) 0%,
|
||||
rgba(252, 252, 252, 1) 31%,
|
||||
rgba(255, 255, 255, 0.9416141456582633) 41%,
|
||||
rgba(255, 255, 255, 0.9752275910364145) 61%,
|
||||
rgba(252, 252, 252, 1) 71%,
|
||||
rgba(236, 237, 241, 1) 100%
|
||||
);
|
||||
font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.56;
|
||||
}
|
||||
|
||||
.content-wrapper.login{
|
||||
--bg-color: 255,255,255;
|
||||
background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
|
||||
|
||||
.content-wrapper.login {
|
||||
--bg-color: 255, 255, 255;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 237, 240, 1) 0%,
|
||||
rgba(255, 255, 255, 1) 50%,
|
||||
rgba(236, 237, 240, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.content-wrapper select {
|
||||
@@ -880,51 +955,68 @@ TODO: Responsive ===========================
|
||||
}
|
||||
|
||||
/* Update table scrollbar */
|
||||
.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track,
|
||||
.update-table::-webkit-scrollbar-track,
|
||||
.update-table > *::-webkit-scrollbar-track,
|
||||
.market-pop::-webkit-scrollbar-track,
|
||||
.wallet.coupon::-webkit-scrollbar-track{
|
||||
.wallet.coupon::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar,
|
||||
.update-table::-webkit-scrollbar,
|
||||
.update-table > *::-webkit-scrollbar,
|
||||
.market-pop::-webkit-scrollbar,
|
||||
.wallet.coupon::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb, .wallet.coupon::-webkit-scrollbar-thumb {
|
||||
.update-table::-webkit-scrollbar-thumb,
|
||||
.update-table > *::-webkit-scrollbar-thumb,
|
||||
.wallet.coupon::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: #fff;
|
||||
background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
|
||||
background: linear-gradient(
|
||||
134.38deg,
|
||||
#f539f8 0%,
|
||||
#c342f9 43.55%,
|
||||
#5356fb 104.51%
|
||||
);
|
||||
}
|
||||
|
||||
.market-pop::-webkit-scrollbar-thumb {
|
||||
border-radius: 100px;
|
||||
|
||||
|
||||
/* background-color: #fafafa; */
|
||||
/* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */
|
||||
background: rgb(236,237,241);
|
||||
background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
|
||||
background: rgb(236, 237, 241);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 237, 241, 1) 0%,
|
||||
rgba(252, 252, 252, 1) 31%,
|
||||
rgba(255, 255, 255, 0.9416141456582633) 41%,
|
||||
rgba(255, 255, 255, 0.9752275910364145) 61%,
|
||||
rgba(252, 252, 252, 1) 71%,
|
||||
rgba(236, 237, 241, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.input-curve.lg{
|
||||
.input-curve.lg {
|
||||
border-radius: 35px !important;
|
||||
}
|
||||
|
||||
.edit-popup{
|
||||
.edit-popup {
|
||||
top: 75px;
|
||||
}
|
||||
|
||||
.job-popup{
|
||||
.job-popup {
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.addJob-popup{
|
||||
.addJob-popup {
|
||||
top: 30px;
|
||||
height: 55rem !important;
|
||||
}
|
||||
@@ -952,10 +1044,10 @@ TODO: Responsive ===========================
|
||||
}
|
||||
|
||||
/* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */
|
||||
.slider-left .slick-slider .slick-track{
|
||||
.slider-left .slick-slider .slick-track {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.assign-task-popup{
|
||||
.assign-task-popup {
|
||||
top: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user