922 lines
24 KiB
CSS
922 lines
24 KiB
CSS
.main-container {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background: url("../assets/png/background.png");
|
|
background-size: cover;
|
|
overflow: hidden !important
|
|
}
|
|
|
|
.main-container .shop-page {
|
|
position: relative;
|
|
width: 128.4vh;
|
|
height: 74.2vh;
|
|
background: rgba(26, 26, 26, .8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 3vh
|
|
}
|
|
|
|
.main-container .shop-page .head {
|
|
position: absolute;
|
|
width: 120vh;
|
|
height: 11.6vh;
|
|
top: 4.2vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side {
|
|
position: relative;
|
|
width: 85vh;
|
|
height: 11.6vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: url(../assets/png/rec.png);
|
|
background-size: cover
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4.5vh;
|
|
margin: 2.5vh
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info div {
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info div span {
|
|
font-weight: 500;
|
|
font-size: 1.6vh;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info div p {
|
|
font-weight: 500;
|
|
font-size: 1.8vh;
|
|
color: #fff
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info div .head-icon {
|
|
width: 2.2vh;
|
|
height: 2.2vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #bdff69;
|
|
box-shadow: 0 0 2.4vh -0.7vh #bdff69, inset 0 0 3.3vh #a3ed45;
|
|
border-radius: 1vh;
|
|
margin-right: .75vh;
|
|
border: .5vh solid rgba(0, 0, 0, .25);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .user-info div .head-icon img {
|
|
width: 1.2vh;
|
|
height: 1.2vh;
|
|
transform: rotate(-45deg)
|
|
}
|
|
|
|
.main-container .shop-page .head .left-side .shop-title {
|
|
margin: 2.5vh;
|
|
font-weight: 800;
|
|
font-size: 3vh;
|
|
line-height: 3.7vh;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
|
background-clip: text;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
.main-container .shop-page .head .right-side {
|
|
position: relative;
|
|
width: 32.5vh;
|
|
height: 11.6vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-page .head .right-side a {
|
|
width: 15vh;
|
|
height: 11.6vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0114) 0%, rgba(255, 255, 255, 0.02) 100%, rgba(255, 255, 255, 0.02) 100%);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-page .head .right-side a img {
|
|
position: absolute;
|
|
width: 10vh;
|
|
height: 10vh
|
|
}
|
|
|
|
.main-container .shop-page .head .right-side a p {
|
|
font-weight: 500;
|
|
font-size: 1.6vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .shop-page .head .right-side a:hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0214) 0%, rgba(255, 255, 255, 0.03) 100%, rgba(255, 255, 255, 0.03) 100%)
|
|
}
|
|
|
|
.main-container .shop-page .items-list {
|
|
position: absolute;
|
|
width: 120vh;
|
|
top: 20vh;
|
|
max-height: 50vh;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
overflow-y: scroll;
|
|
gap: 2.25vh
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 15vh;
|
|
height: 15vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00594059) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .1vh solid rgba(255, 255, 255, .05)
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .border-img {
|
|
position: absolute;
|
|
width: 13vh;
|
|
height: 13vh
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .inner-item {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 13vh;
|
|
height: 13vh;
|
|
background: url(../assets/svg/rec.svg);
|
|
background-size: cover
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .inner-item .item-count {
|
|
position: absolute;
|
|
top: 1vh;
|
|
font-weight: 500;
|
|
font-size: 1.2vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .5)
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .inner-item .item-img {
|
|
position: relative;
|
|
top: -0.75vh;
|
|
max-width: 40%;
|
|
min-width: 35%
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .inner-item .item-info {
|
|
position: absolute;
|
|
bottom: 1vh;
|
|
font-weight: 500;
|
|
font-size: 1.4vh;
|
|
text-align: center;
|
|
color: #fff
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element .inner-item .item-info .item-price {
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
|
background-clip: text
|
|
}
|
|
|
|
.main-container .shop-page .items-list .item-element:hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00594059) 0%, rgba(255, 255, 255, 0.065) 100%)
|
|
}
|
|
|
|
.main-container .buy-shop {
|
|
position: absolute;
|
|
width: 93.4vh;
|
|
height: 74.2vh;
|
|
background: rgba(26, 26, 26, .8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .buy-shop .head {
|
|
position: absolute;
|
|
width: 85vh;
|
|
height: 11.6vh;
|
|
top: 4.2vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side {
|
|
position: relative;
|
|
width: 85vh;
|
|
height: 11.6vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: url(../assets/png/rec.png);
|
|
background-size: cover
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4.5vh;
|
|
margin-right: 8.5vh
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info div {
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info div span {
|
|
font-weight: 500;
|
|
font-size: 1.6vh;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info div p {
|
|
font-weight: 500;
|
|
font-size: 1.8vh;
|
|
color: #fff
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info div .head-icon {
|
|
width: 2.2vh;
|
|
height: 2.2vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #bdff69;
|
|
box-shadow: 0 0 2.4vh -0.7vh #bdff69, inset 0 0 3.3vh #a3ed45;
|
|
border-radius: 1vh;
|
|
margin-right: .75vh;
|
|
border: .5vh solid rgba(0, 0, 0, .25);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.main-container .buy-shop .head .left-side .user-info div .head-icon img {
|
|
width: 1.2vh;
|
|
height: 1.2vh;
|
|
transform: rotate(-45deg)
|
|
}
|
|
|
|
.main-container .buy-shop .head .shop-title {
|
|
margin: 2.5vh;
|
|
font-weight: 800;
|
|
font-size: 3vh;
|
|
line-height: 3.7vh;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
|
background-clip: text;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
.main-container .buy-shop .preview-image {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: 5.8vh 4.2vh;
|
|
width: 46.8vh;
|
|
height: 46.8vh;
|
|
border: .2vh solid rgba(255, 255, 255, .1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column
|
|
}
|
|
|
|
.main-container .buy-shop .preview-image .shop-image {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.main-container .buy-shop .preview-image .adress-text {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 2.5vh;
|
|
text-align: right;
|
|
color: #fff
|
|
}
|
|
|
|
.main-container .buy-shop .preview-image .adress-text h2 {
|
|
font-weight: 700;
|
|
font-size: 3vh
|
|
}
|
|
|
|
.main-container .buy-shop .preview-image .adress-text p {
|
|
font-weight: 500;
|
|
font-size: 2vh
|
|
}
|
|
|
|
.main-container .buy-shop .right-side {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
width: 34vh;
|
|
height: 46.8vh;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 5.8vh 4.2vh
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .info-box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 2.5vh
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .info-box span {
|
|
font-weight: 500;
|
|
font-size: 2vh;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, .2)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .info-box p {
|
|
font-weight: 500;
|
|
font-size: 1.65vh;
|
|
color: rgba(255, 255, 255, .65)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 19.3vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 1.5vh
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons a {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 8.9vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .2vh solid rgba(255, 255, 255, .05)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons a p {
|
|
font-weight: 500;
|
|
font-size: 2vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons a:not(.purchase-btn):hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0385) 0%, rgba(255, 255, 255, 0.085) 100%)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons .purchase-btn {
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
transition: transform 200ms cubic-bezier(0.6, -0.28, 0.735, 0.045)
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons .purchase-btn p {
|
|
color: #232a43 !important;
|
|
font-weight: 500
|
|
}
|
|
|
|
.main-container .buy-shop .right-side .buttons .purchase-btn:hover {
|
|
transform: translateY(0.5vh)
|
|
}
|
|
|
|
.main-container .options-menu {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 128.4vh;
|
|
justify-content: space-between;
|
|
height: auto;
|
|
gap: 2vh
|
|
}
|
|
|
|
.main-container .options-menu a, .main-container .options-menu input, .main-container .options-menu .submit-btn {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 9vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .2vh solid rgba(255, 255, 255, .05);
|
|
outline: none;
|
|
font-size: 1.85vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .45)
|
|
}
|
|
|
|
.main-container .options-menu a:not(.selected-btn):hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.065) 100%)
|
|
}
|
|
|
|
.main-container .options-menu .submit-btn, .main-container .options-menu .selected-btn {
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
color: #232a43;
|
|
font-weight: 500
|
|
}
|
|
|
|
.main-container .filter-page {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: rgba(0, 0, 0, .45);
|
|
}
|
|
|
|
.main-container .filter-page .filter-buttons {
|
|
position: relative;
|
|
width: 25%;
|
|
top: .5vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1vh
|
|
}
|
|
|
|
.main-container .filter-page .filter-buttons a {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 6vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .2vh solid rgba(255, 255, 255, .05);
|
|
outline: none;
|
|
font-size: 1.85vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .45)
|
|
}
|
|
|
|
.main-container .filter-page .filter-buttons a:hover {
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
color: #232a43;
|
|
font-weight: 500
|
|
}
|
|
|
|
.main-container .filter-page .filter-description {
|
|
font-size: 2vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .25);
|
|
text-transform: uppercase;
|
|
letter-spacing: .25vh;
|
|
margin-bottom: 1vh
|
|
}
|
|
|
|
.main-container .filter-page ul {
|
|
position: relative;
|
|
width: 25%;
|
|
max-height: 58.75%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
overflow-y: scroll;
|
|
gap: .5vh
|
|
}
|
|
|
|
.main-container .filter-page ul li {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 9vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .2vh solid rgba(255, 255, 255, .05);
|
|
outline: none;
|
|
font-size: 1.85vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .45)
|
|
}
|
|
|
|
.main-container .filter-page ul li:hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.065) 100%)
|
|
}
|
|
|
|
.main-container .shop-settings {
|
|
position: absolute;
|
|
width: 78.4vh;
|
|
height: 65.4vh;
|
|
background: rgba(26, 26, 26, .8);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column
|
|
}
|
|
|
|
.main-container .shop-settings .titlebox {
|
|
position: absolute;
|
|
height: 11.6vh;
|
|
margin: 4vh;
|
|
width: 70.5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background: url(../assets/png/rec_vert.png);
|
|
background-size: cover;
|
|
top: 0
|
|
}
|
|
|
|
.main-container .shop-settings .titlebox h2 {
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
font-size: 3vh;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
.main-container .shop-settings .left-settings {
|
|
position: absolute;
|
|
width: 34vh;
|
|
height: 39.8vh;
|
|
overflow-y: scroll !important;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: 4vh;
|
|
display: block
|
|
}
|
|
|
|
.main-container .shop-settings .left-settings li {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 99.5%;
|
|
height: 5.6vh;
|
|
margin-bottom: 1vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0214) 0%, rgba(255, 255, 255, 0.03) 100%, rgba(255, 255, 255, 0.03) 100%);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
font-weight: 500;
|
|
font-size: 1.65vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .shop-settings .left-settings li:hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options {
|
|
position: absolute;
|
|
width: 34vh;
|
|
height: 39.5vh;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 4vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: .25vh
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .seperator {
|
|
width: 100%;
|
|
height: .6vh
|
|
}
|
|
|
|
.main-container .shop-settings .right-options li {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 5.8vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0214) 0%, rgba(255, 255, 255, 0.03) 100%, rgba(255, 255, 255, 0.03) 100%);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
font-weight: 500;
|
|
font-size: 1.65vh;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .25)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options li:hover {
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .stored-money {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 34vh;
|
|
height: 12.6vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0171) 0%, rgba(255, 255, 255, 0.03) 100%);
|
|
border: .1vh solid rgba(255, 255, 255, .05)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .stored-money .stored-money-title {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
margin: 2vh;
|
|
font-weight: 500;
|
|
font-size: 2.2vh;
|
|
text-transform: uppercase;
|
|
color: #fff
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .stored-money .stored-money-amount {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: 2vh;
|
|
font-weight: 700;
|
|
font-size: 4.65vh;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
|
background-clip: text;
|
|
text-fill-color: rgba(0, 0, 0, 0)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .stored-money .money-icon {
|
|
position: absolute;
|
|
right: 3vh;
|
|
width: 4vh;
|
|
height: 4vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #bdff69;
|
|
box-shadow: 0 0 2.4vh -0.7vh #bdff69, inset 0 0 3.3vh #a3ed45;
|
|
border-radius: 1vh;
|
|
margin-right: .75vh;
|
|
border: .5vh solid rgba(0, 0, 0, .25);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .stored-money .money-icon img {
|
|
width: 2.4vh;
|
|
height: 2.4vh;
|
|
transform: rotate(-45deg)
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .cancel-btn {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 8.9vh;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-settings .right-options .cancel-btn p {
|
|
font-weight: 600;
|
|
color: #232a43;
|
|
font-size: 1.85vh
|
|
}
|
|
|
|
.main-container .inputMenu {
|
|
position: absolute;
|
|
width: 31.7vh;
|
|
height: 29.6vh;
|
|
background: rgba(26, 26, 26, .8);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column
|
|
}
|
|
|
|
.main-container .inputMenu .titlebox {
|
|
text-align: left;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 2.75vh
|
|
}
|
|
|
|
.main-container .inputMenu .titlebox h2 {
|
|
font-weight: 600;
|
|
font-size: 2.5vh;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
letter-spacing: .25vh
|
|
}
|
|
|
|
.main-container .inputMenu .titlebox p {
|
|
font-weight: 500;
|
|
font-size: 1.25vh;
|
|
color: #d9d9d9
|
|
}
|
|
|
|
.main-container .inputMenu .buttons {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80%;
|
|
bottom: 0;
|
|
margin: 2.75vh;
|
|
gap: .75vh
|
|
}
|
|
|
|
.main-container .inputMenu .buttons input, .main-container .inputMenu .buttons .cancel-btn, .main-container .inputMenu .buttons .submit-btn {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 5vh;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
outline: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .45);
|
|
font-size: 1.65vh;
|
|
font-weight: 500
|
|
}
|
|
|
|
.main-container .inputMenu .buttons .submit-btn {
|
|
color: #232a43;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%)
|
|
}
|
|
|
|
.main-container .shop-permissions {
|
|
position: absolute;
|
|
width: 45.5vh;
|
|
height: 65.4vh;
|
|
background: rgba(26, 26, 26, .8);
|
|
border: .1vh solid rgba(255, 255, 255, .05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column
|
|
}
|
|
|
|
.main-container .shop-permissions .titlebox {
|
|
position: absolute;
|
|
height: 11.6vh;
|
|
margin: 4vh;
|
|
width: 37.85vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background: url(../assets/png/rec_vert2.png);
|
|
background-size: cover;
|
|
top: 0
|
|
}
|
|
|
|
.main-container .shop-permissions .titlebox h2 {
|
|
font-weight: 800;
|
|
font-size: 3vh;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
|
background-clip: text;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
.main-container .shop-permissions .submit-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: 2.4vh 3.75vh;
|
|
width: 37.75vh;
|
|
height: 8.9vh;
|
|
outline: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #bdff69 0%, #8fff00 100%)
|
|
}
|
|
|
|
.main-container .shop-permissions .submit-btn p {
|
|
font-weight: 500;
|
|
font-size: 2vh;
|
|
text-align: center;
|
|
color: #232a43;
|
|
text-align: center
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list {
|
|
position: absolute;
|
|
top: 17.5vh;
|
|
width: 38.5vh;
|
|
max-height: 35vh;
|
|
overflow-y: scroll;
|
|
display: grid
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element {
|
|
margin-bottom: 1vh;
|
|
position: relative;
|
|
left: .25vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 37.5vh;
|
|
height: 5.8vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border: .2vh solid rgba(255, 255, 255, .05)
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element p {
|
|
margin-left: 2vh;
|
|
font-weight: 400;
|
|
font-size: 1.8vh;
|
|
color: rgba(255, 255, 255, .45)
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element .switch {
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 2vh;
|
|
width: 6.5vh;
|
|
height: 2.8vh;
|
|
background: rgba(217, 217, 217, .05);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element .switch .switch-off,
|
|
.main-container .shop-permissions .permissions-list .permission-element .switch .switch-on {
|
|
position: relative;
|
|
margin: .4vh;
|
|
width: 2vh;
|
|
height: 2vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.0285) 0%, rgba(255, 255, 255, 0.05) 100%)
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element .switch .seperator {
|
|
width: .1vh;
|
|
height: .6vh;
|
|
background: rgba(217, 217, 217, .05)
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element #true .switch-on {
|
|
background: radial-gradient(50% 50% at 50% 50%, #BFFF36 0%, rgba(188, 255, 46, 0.6) 100%)
|
|
}
|
|
|
|
.main-container .shop-permissions .permissions-list .permission-element #false .switch-off {
|
|
background: radial-gradient(50% 50% at 50% 50%, #FF3636 0%, rgba(255, 46, 46, 0.6) 100%)
|
|
} |