193 lines
3.7 KiB
CSS
193 lines
3.7 KiB
CSS
@import url(./fonts.css);
|
|
|
|
|
|
|
|
/* body{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: brown;
|
|
background-size: auto 100%;
|
|
user-select: none;
|
|
} */
|
|
|
|
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
|
|
acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
|
|
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt, dd,ol,ul,li,fieldset,
|
|
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
|
|
aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,
|
|
menu,nav,output,ruby,section,summary,time,mark,
|
|
audio,video, input{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
vertical-align: baseline;
|
|
outline: none;
|
|
}
|
|
|
|
article{
|
|
width: 15vw;
|
|
background: linear-gradient(180deg, rgba(28, 28, 33, 0.72) 0%, #171821 100%);
|
|
margin-left: 2.5vw;
|
|
border-radius: .3vw;
|
|
margin-top: 35vh;
|
|
}
|
|
|
|
header{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding-top: 2vh;
|
|
}
|
|
|
|
header .p-lightgreen{
|
|
font-size: 0.7vw;
|
|
}
|
|
|
|
header .p-boldgray{
|
|
font-size: 0.65vw;
|
|
text-align: center;
|
|
width: 80%;
|
|
padding-top: 0.2vh;
|
|
}
|
|
|
|
content{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
content .player_show{
|
|
height: 0.2vh;
|
|
width: 50%;
|
|
background: red;
|
|
background: #4B68FF;
|
|
box-shadow: 0px 0px 17px #4B68FF;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
content ul{
|
|
padding-top: 2vh;
|
|
padding-bottom: 1vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 0.4vh;
|
|
}
|
|
|
|
content ul span{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.playerUl{
|
|
padding: 0;
|
|
padding-top: 0.5vh;
|
|
padding-bottom: 1vh;
|
|
}
|
|
|
|
content ul li{
|
|
height: 4.1vh;
|
|
width: 84%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
content ul li .liContent{
|
|
height: 90%;
|
|
width: 98%;
|
|
position: relative;
|
|
background: linear-gradient(270deg, rgba(216, 216, 216, 0.32) 0%, rgba(121, 122, 122, 0) 100%);
|
|
border-radius: .3vw;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
content ul li .liContent .p-lightgreen{
|
|
font-size: 0.7vw;
|
|
margin-left: 1.5vw;
|
|
}
|
|
|
|
|
|
content ul li .number{
|
|
/* width: 1vw; */
|
|
height: 1vw;
|
|
background: #D9D9D9;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 11;
|
|
}
|
|
|
|
content ul li .number .p-gray{
|
|
font-size: 0.6vw;
|
|
padding: 0 0.2vw;
|
|
}
|
|
|
|
.p-lightgreen{
|
|
color: #00FF85;
|
|
font-family: Gilroy500;
|
|
text-shadow: 0px 0px 15px #00FF85;
|
|
}
|
|
|
|
.p-boldgray{
|
|
color: #878F9A;
|
|
font-family: Gilroy600;
|
|
text-shadow: 0px 4px 4px #FFFFFF1A;
|
|
}
|
|
|
|
.p-gray{
|
|
color: #585858;
|
|
font-family: Gilroy400;
|
|
text-shadow: 0px 4px 2px #97979733;
|
|
}
|
|
|
|
.p-white{
|
|
color: white !important;
|
|
text-shadow: 0px 0px 15px #E4FFF28C;
|
|
}
|
|
|
|
.hidden{
|
|
display: none;
|
|
}
|
|
|
|
.footer_images{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: -5vh;
|
|
height: 7vh;
|
|
}
|
|
|
|
.footer_images img{
|
|
height: 100%;
|
|
max-height: 7vh;
|
|
}
|
|
|
|
.footer_images .left{
|
|
margin-left: -1.5vw;
|
|
}
|
|
|
|
.footer_images .right{
|
|
margin-right: -1.5vw;
|
|
} |