534 lines
13 KiB
SCSS
534 lines
13 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap');
|
|
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
font-family: 'Barlow', sans-serif;
|
|
}
|
|
|
|
body{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
main{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.toaster-wrapper{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.toaster{
|
|
background: rgba(10, 10, 10, 1);
|
|
border-radius: 20px;
|
|
padding: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
|
|
.title-wrapper{
|
|
.title{
|
|
color: #FFF;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.50);
|
|
}
|
|
|
|
.subtitle{
|
|
color: rgba(255, 255, 255, 0.50);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
input{
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 20px rgba(28, 167, 255, 0.75);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
line-height: 100%;
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
padding: 15px 30px;
|
|
border: 1px solid rgba(28, 167, 255, 0.3725490196);
|
|
margin-top: 10px;
|
|
|
|
&::placeholder{
|
|
color: #1ca7ff;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.btn-wrapper{
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
|
|
.btn{
|
|
position: relative;
|
|
width: 50%;
|
|
height: 60px;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #FFF;
|
|
text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.50);
|
|
|
|
&:hover{
|
|
background: rgba(0, 0, 0, 0.70);
|
|
}
|
|
|
|
&.close-box{
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 30px rgba(28, 167, 255, 0.50);
|
|
}
|
|
|
|
.icons{
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.top, .bottom{
|
|
height: 100%;
|
|
|
|
img{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.corner-img{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.loading{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 998;
|
|
opacity: 0.5;
|
|
|
|
.bg{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
}
|
|
|
|
.bars{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: 0% 0%;
|
|
animation: anim 4s infinite linear;
|
|
|
|
&:last-child{
|
|
animation: anim2 4s infinite linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-text{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 70%;
|
|
transform: translateX(-50%);
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 50px rgba(28, 167, 255, 0.50);
|
|
font-size: 80px;
|
|
font-weight: 700;
|
|
animation: anim3 3s infinite ease;
|
|
transform-origin: 0% 0%;
|
|
|
|
span{
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.char-selected-box{
|
|
position: absolute;
|
|
left: 3vw;
|
|
top: 3vw;
|
|
width: 30vw;
|
|
|
|
.title{
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 20px rgba(28, 167, 255, 0.75);
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.char-name-wrapper{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
|
|
.gender{
|
|
color: #FFF;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
background: #1ca7ff;
|
|
box-shadow: 0px 0px 30px 0px rgba(28, 167, 255, 0.30);
|
|
padding: 3px 20px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.name{
|
|
color: #FFF;
|
|
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.30);
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
|
|
span{
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider{
|
|
width: 100%;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.30);
|
|
margin: 10px 0 15px 0;
|
|
}
|
|
|
|
.subtitle{
|
|
color: #FFF;
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.characters-box{
|
|
position: absolute;
|
|
width: 96vw;
|
|
bottom: 3vw;
|
|
left: 3vw;
|
|
overflow-x: scroll;
|
|
padding-top: 60px;
|
|
gap: 2vw;
|
|
|
|
&::-webkit-scrollbar{
|
|
height: 0px;
|
|
}
|
|
|
|
.box-wrapper{
|
|
display: flex;
|
|
gap: 1vw;
|
|
width: fit-content;
|
|
}
|
|
|
|
.box{
|
|
width: 23vw;
|
|
height: 15vh;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
position: relative;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
min-height: 150px;
|
|
float: left;
|
|
|
|
.click-box{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:hover{
|
|
opacity: 1;
|
|
}
|
|
|
|
&.active{
|
|
opacity: 1;
|
|
}
|
|
|
|
.icons{
|
|
.top{
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.bottom{
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
|
|
.name-box{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 15%;
|
|
transform: translateY(-50%);
|
|
width: 55%;
|
|
|
|
.identifier{
|
|
color: #FFF;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 100%;
|
|
}
|
|
|
|
.name-wrap{
|
|
display: flex;
|
|
gap: 5px;
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 20px rgba(28, 167, 255, 0.75);
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
line-height: 100%;
|
|
text-transform: uppercase;
|
|
|
|
.surname{
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-btn{
|
|
position: absolute;
|
|
top: -12px;
|
|
right: 10%;
|
|
color: #FFF;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
background: #1ca7ff;
|
|
box-shadow: 0px 0px 30px 0px rgba(28, 167, 255, 0.30);
|
|
padding: 4px 20px;
|
|
margin-bottom: 6px;
|
|
cursor: pointer;
|
|
z-index: 11;
|
|
|
|
&:hover{
|
|
box-shadow: 0px 0px 35px 0px rgba(28, 167, 255, 0.70);
|
|
}
|
|
}
|
|
|
|
.btn{
|
|
position: absolute;
|
|
right: 11%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #1ca7ff;
|
|
box-shadow: 0px 0px 30px 0px rgba(28, 167, 255, 0.30);
|
|
cursor: pointer;
|
|
transition: box-shadow 0.3s;
|
|
z-index: 10;
|
|
|
|
&:hover{
|
|
box-shadow: 0px 0px 35px 0px rgba(28, 167, 255, 0.70);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-box{
|
|
position: absolute;
|
|
right: 3vw;
|
|
top: 3vw;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
.box{
|
|
width: 26vw;
|
|
height: 12vh;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
position: relative;
|
|
min-height: 120px;
|
|
|
|
&.btn-wrapper{
|
|
background: none;
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 12px;
|
|
|
|
.btn{
|
|
position: relative;
|
|
width: 50%;
|
|
height: 60%;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #FFF;
|
|
text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.50);
|
|
|
|
&:hover{
|
|
background: rgba(0, 0, 0, 0.70);
|
|
}
|
|
|
|
&.cancel{
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 30px rgba(28, 167, 255, 0.50);
|
|
}
|
|
|
|
.icons{
|
|
height: 100%;
|
|
|
|
.top, .bottom{
|
|
height: 100%;
|
|
|
|
img{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-wrapper{
|
|
position: absolute;
|
|
top: 53%;
|
|
left: 15%;
|
|
transform: translateY(-50%);
|
|
width: 70%;
|
|
|
|
.title{
|
|
color: #FFF;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
line-height: 100%;
|
|
}
|
|
|
|
select{
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
display: none;
|
|
}
|
|
|
|
input, select{
|
|
color: #1ca7ff;
|
|
text-shadow: 0px 0px 20px rgba(28, 167, 255, 0.75);
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
line-height: 100%;
|
|
background: none;
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
border-radius: 2px;
|
|
|
|
&::placeholder{
|
|
color: #1ca7ff;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icons{
|
|
.top{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bottom{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes anim {
|
|
0% {
|
|
rotate: 0deg;
|
|
}
|
|
100% {
|
|
rotate: 360deg;
|
|
}
|
|
}
|
|
|
|
@keyframes anim2 {
|
|
0% {
|
|
rotate: 360deg;
|
|
}
|
|
100% {
|
|
rotate: 0deg;
|
|
}
|
|
}
|
|
|
|
@keyframes anim3 {
|
|
0% {
|
|
scale: 1;
|
|
}
|
|
50% {
|
|
scale: 1.1;
|
|
}
|
|
100% {
|
|
scale: 1;
|
|
}
|
|
} |