UI changes
This commit is contained in:
sairaj mote
GitHub
parent
b71ff090da
commit
39369e2376
@ -690,6 +690,7 @@ text-align: center;
|
||||
transition: color 0.3s;
|
||||
text-transform: capitalize;
|
||||
font-family: var(--font-family);
|
||||
height: 100%;
|
||||
}
|
||||
@media (hover: hover){
|
||||
:host(.active) .tab{
|
||||
@ -1933,7 +1934,8 @@ background: rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0.2rem 0.2rem #00000020,
|
||||
0 0.5rem 1rem #00000040;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: scale(0)
|
||||
transform: scale(0);
|
||||
z-index: 1;
|
||||
}
|
||||
.hide{
|
||||
pointer-events: none;
|
||||
@ -1950,9 +1952,10 @@ right: 1rem;
|
||||
}
|
||||
.left,.right{
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
.left{
|
||||
background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
|
||||
@ -2727,6 +2730,7 @@ height: 0.15rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background: var(--accent-color);
|
||||
transition: transform 0.3s, width 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
:host([variant="tab"]) .indicator{
|
||||
height: 100%;
|
||||
|
||||
92
css/main.css
92
css/main.css
@ -375,16 +375,16 @@ textarea {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.container:empty ~ .empty {
|
||||
*:empty + .empty-state {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.empty {
|
||||
.empty-state {
|
||||
display: none;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.empty svg {
|
||||
.empty-state svg {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
height: 12em;
|
||||
width: 12em;
|
||||
@ -526,7 +526,7 @@ form {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#sign_in_popup h1 {
|
||||
#sign_in_popup h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#sign_in_popup h4 {
|
||||
@ -598,15 +598,13 @@ form {
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 600;
|
||||
}
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
#navbar .active {
|
||||
color: var(--accent-color);
|
||||
@ -631,51 +629,36 @@ form {
|
||||
#home_page p {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#home_page .user-panel {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
#user_panel {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
margin: 0 1.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8);
|
||||
box-shadow: 0 0.1rem 0.6rem #00000020;
|
||||
background: radial-gradient(circle at top left, #EF6C00 20%, #C51162 30%, #4A148C 40%, #251f44);
|
||||
box-shadow: 0 0.1rem 0.1rem #00000020, 0 2rem 1rem -1rem #00000040;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
align-self: flex-start;
|
||||
}
|
||||
#user_panel .icon {
|
||||
.user-panel .icon {
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#user_panel::before, #user_panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
bottom: 0.8rem;
|
||||
box-shadow: 0 1rem 0.2rem #00000030;
|
||||
z-index: -1;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
#user_panel::before {
|
||||
left: 0;
|
||||
right: 50%;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
#user_panel::after {
|
||||
left: 50%;
|
||||
right: 0;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
#user_panel .copy-row {
|
||||
.user-panel .copy-row {
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0.1rem 0.1rem 0.1rem #000000;
|
||||
}
|
||||
#user_panel .grid {
|
||||
.user-panel .grid {
|
||||
margin-top: 0.5rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#user_panel .grid h5 {
|
||||
.user-panel .grid h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--foreground-color), 0.8);
|
||||
}
|
||||
|
||||
#user_type {
|
||||
.user-type {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
@ -755,7 +738,17 @@ sm-tab-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
sm-tab::part(tab) {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
sm-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.request {
|
||||
@ -968,7 +961,7 @@ sm-tab-header {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
#main_loader button {
|
||||
#main_loader sm-button {
|
||||
margin-left: 0;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -993,14 +986,23 @@ sm-tab-header {
|
||||
word-spacing: 0.16em;
|
||||
}
|
||||
|
||||
#upi_txId_section .copy-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#send_amount_to_deposit {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page {
|
||||
#home_page, #deposit {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-areas: "." "left";
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
#home_page .left {
|
||||
#home_page .left, #deposit .left {
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
@ -1047,9 +1049,6 @@ sm-tab-header {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#navbar .navbar-item:hover .icon {
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
}
|
||||
@ -1075,14 +1074,11 @@ sm-tab-header {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#home_page {
|
||||
#home_page, #deposit {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 24rem;
|
||||
}
|
||||
#activity_page sm-tab-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 800px) {
|
||||
.complaint {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -401,15 +401,14 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.container:empty~.empty {
|
||||
*:empty + .empty-state {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.empty {
|
||||
.empty-state {
|
||||
display: none;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
height: 12em;
|
||||
@ -564,7 +563,7 @@ form {
|
||||
}
|
||||
|
||||
#sign_in_popup {
|
||||
h1 {
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@ -643,15 +642,12 @@ form {
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
font-weight: 600;
|
||||
h5 {
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@ -684,46 +680,27 @@ form {
|
||||
p {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.user-panel{
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#user_panel {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
margin: 0 1.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8);
|
||||
box-shadow: 0 0.1rem 0.6rem #00000020;
|
||||
//background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), midnightblue;
|
||||
background: radial-gradient(circle at top left, #EF6C00 20%, #C51162 30%, #4A148C 40%, #251f44);
|
||||
box-shadow: 0 0.1rem 0.1rem #00000020, 0 2rem 1rem -1rem #00000040;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
|
||||
align-self: flex-start;
|
||||
.icon {
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
bottom: 0.8rem;
|
||||
box-shadow: 0 1rem 0.2rem #00000030;
|
||||
z-index: -1;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
right: 50%;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 50%;
|
||||
right: 0;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.copy-row {
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0.1rem 0.1rem 0.1rem #000000;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@ -737,7 +714,7 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
#user_type {
|
||||
.user-type {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
@ -838,7 +815,15 @@ sm-tab-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
sm-tab::part(tab){
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
sm-panel{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.request {
|
||||
@ -1088,7 +1073,7 @@ sm-tab-header {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
sm-button {
|
||||
margin-left: 0;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -1115,14 +1100,22 @@ sm-tab-header {
|
||||
word-spacing: 0.16em;
|
||||
}
|
||||
}
|
||||
#upi_txId_section{
|
||||
.copy-row{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
#send_amount_to_deposit{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
#home_page {
|
||||
#home_page, #deposit{
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-areas: '.''left';
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
align-items: flex-start;
|
||||
.left {
|
||||
grid-area: left;
|
||||
}
|
||||
@ -1174,11 +1167,6 @@ sm-tab-header {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
@ -1215,18 +1203,10 @@ sm-tab-header {
|
||||
}
|
||||
}
|
||||
|
||||
#home_page {
|
||||
#home_page, #deposit {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 24rem;
|
||||
|
||||
.left {}
|
||||
}
|
||||
|
||||
#activity_page {
|
||||
sm-tab-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
897
index.html
897
index.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user