0.0.2
This commit is contained in:
parent
8d9fe51497
commit
d3d4a005ba
132
css/main.css
132
css/main.css
@ -421,6 +421,23 @@ p {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container:empty ~ .empty {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: none;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty svg {
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
height: 12em;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.container-header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -474,6 +491,10 @@ p {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
@ -490,6 +511,10 @@ p {
|
||||
}
|
||||
|
||||
.popup-container .popup {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
-webkit-box-align: start;
|
||||
@ -529,7 +554,7 @@ p {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.popup-container .popup .container-header .btn {
|
||||
@ -561,7 +586,7 @@ p {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
z-index: 11;
|
||||
z-index: 40;
|
||||
background: rgba(var(--foreground), 1);
|
||||
}
|
||||
|
||||
@ -722,6 +747,17 @@ p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -759,17 +795,6 @@ p {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
#navbar .navbar-item .icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
@ -789,20 +814,13 @@ p {
|
||||
}
|
||||
|
||||
#home_page h1 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#home_page p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#home_page .user-option {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#home_page .user-option:last-of-type {
|
||||
margin: 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#home_page h2 {
|
||||
@ -810,25 +828,33 @@ p {
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.8rem;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
margin-top: 1rem;
|
||||
-ms-grid-columns: (10rem)[2];
|
||||
grid-template-columns: repeat(2, 10rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.options-tab .option {
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
text-decoration: none;
|
||||
border-right: solid 1px rgba(var(--text), 0.2);
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
border-radius: 0.2rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: solid 1px rgba(var(--text), 0.3);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options-tab .option:last-of-type {
|
||||
border: none;
|
||||
.options-tab .option .icon {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.notification-dot::after {
|
||||
@ -896,7 +922,7 @@ p {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
@ -960,26 +986,13 @@ p {
|
||||
background: rgba(var(--text-light), 0.2);
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty svg {
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
height: 12em;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
body {
|
||||
padding: 1rem 6vw;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.popup-container .popup {
|
||||
width: auto;
|
||||
width: 24rem;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
@ -1010,7 +1023,7 @@ p {
|
||||
margin: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@ -1062,26 +1075,31 @@ p {
|
||||
#sign_in_popup {
|
||||
width: 24rem;
|
||||
}
|
||||
.options-tab {
|
||||
-ms-grid-columns: (10rem)[3];
|
||||
grid-template-columns: repeat(3, 10rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
#home_page .user-option {
|
||||
max-width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
body {
|
||||
padding: 1rem 12vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.options-tab {
|
||||
-ms-grid-columns: (10rem)[4];
|
||||
grid-template-columns: repeat(4, 10rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
@ -1089,7 +1107,7 @@ p {
|
||||
font-size: 24px;
|
||||
padding: 2rem 20vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
@ -1100,7 +1118,7 @@ p {
|
||||
font-size: 24px;
|
||||
padding: 2rem 30vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container {
|
||||
.container {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
106
css/main.scss
106
css/main.scss
@ -268,6 +268,19 @@ p{
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
.container:empty ~ .empty{
|
||||
display: grid;
|
||||
}
|
||||
.empty{
|
||||
display: none;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
svg{
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
height: 12em;
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
.container-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -303,6 +316,9 @@ p{
|
||||
.solid-background{
|
||||
background: var(--background) !important;
|
||||
}
|
||||
form{
|
||||
width: 100%;
|
||||
}
|
||||
.popup-container{
|
||||
display: grid;
|
||||
position: fixed;
|
||||
@ -315,6 +331,7 @@ p{
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease;
|
||||
.popup{
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
@ -337,7 +354,7 @@ p{
|
||||
.container-header{
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5em;
|
||||
margin-bottom: 1.5rem;
|
||||
.btn{
|
||||
padding: 0.6em 1.2em;
|
||||
}
|
||||
@ -357,7 +374,7 @@ p{
|
||||
top: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
z-index: 11;
|
||||
z-index: 40;
|
||||
background: rgba(var(--foreground), 1);
|
||||
#error_icon{
|
||||
fill: #E53935;
|
||||
@ -469,6 +486,16 @@ p{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
#navbar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -493,16 +520,6 @@ p{
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
@ -521,35 +538,34 @@ p{
|
||||
}
|
||||
#home_page{
|
||||
h1{
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.user-option{
|
||||
margin-bottom: 2rem;
|
||||
&:last-of-type{
|
||||
margin: 0;
|
||||
}
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.options-tab{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.8rem;
|
||||
display: grid;
|
||||
margin-top: 1rem;
|
||||
grid-template-columns: repeat(2, 10rem);
|
||||
margin-bottom: 1rem;
|
||||
.option{
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
text-decoration: none;
|
||||
border-right: solid 1px rgba(var(--text), 0.2);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0.2rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: solid 1px rgba(var(--text), 0.3);
|
||||
text-transform: capitalize;
|
||||
&:last-of-type{
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.icon{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -599,7 +615,7 @@ p{
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: 1fr;
|
||||
@ -647,16 +663,6 @@ p{
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
svg{
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
height: 12em;
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
body{
|
||||
padding: 1rem 6vw;
|
||||
@ -664,7 +670,7 @@ p{
|
||||
}
|
||||
.popup-container{
|
||||
.popup{
|
||||
width: auto;
|
||||
width: 24rem;
|
||||
align-self: center;
|
||||
border-radius: 0.2rem;
|
||||
height: auto;
|
||||
@ -691,7 +697,7 @@ p{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
#navbar{
|
||||
@ -740,33 +746,31 @@ p{
|
||||
width: 24rem;
|
||||
}
|
||||
.options-tab{
|
||||
//grid-template-columns: repeat(4, auto);
|
||||
grid-template-columns: repeat(3, 10rem);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 800px){
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
#home_page{
|
||||
.user-option{
|
||||
max-width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px){
|
||||
body{
|
||||
padding: 1rem 12vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.options-tab{
|
||||
grid-template-columns: repeat(4, 10rem);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px){
|
||||
body{
|
||||
font-size: 24px;
|
||||
padding: 2rem 20vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
@ -775,7 +779,7 @@ p{
|
||||
font-size: 24px;
|
||||
padding: 2rem 30vw;
|
||||
}
|
||||
#deposit_request_container, #withdraw_request_container{
|
||||
.container{
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
9962
index.html
9962
index.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user