Files
Website/Static/mdui-v1.0.1/css/ui.css
hanasaki-misaki 9c7cdff1bf 修改首页布局
2023-03-19 22:52:50 +08:00

395 lines
6.3 KiB
CSS

/* 去除左右滚动 */
body{
overflow-x:hidden!important;
}
/* a标签去除下划线 */
a{
text-decoration:none!important;
}
/* loading start */
#loading {
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
background-color: #cacaca;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
}
#loading span img {
width: 100%;
height: 100%;
position: relative;
}
@keyframes loadingA {
from {}
to {
transform: rotate(360deg);
}
}
/* loading end */
/* slideshow */
.slideshow-container {
position: relative;
height: 400px;
width: 100%;
overflow: hidden;
}
.slideshow-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow-image.active {
opacity: 1;
}
.slideshow-image.last-active {
opacity: 0;
}
.ui-center {
border-radius: 15px;
border: solid 2px rgba(128, 128, 128, 0.664);
/* offset-x | offset-y | blur-radius | color */
}
.box-Text {
margin-top: 15px;
}
.mdui-toolbar {
height: 92px;
line-height: 56px;
}
.mdui-typo a::before {
display: none;
}
.pgw-bodg {
position: fixed;
z-index: -999;
width: 100%;
height: 100%;
background: #00000000;
background-attachment: local;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://img-cdn-cos.lolicon.team/1/2023/03/18/1x6415730a4ec05.webp/all70);
animation: run 60s linear infinite;
animation-direction: alternate;
}
.font-ui {
font-weight: 700;
font-style: italic;
}
.home-bodg {
position: fixed;
z-index: -999;
width: 100%;
height: 100%;
background: #00000000;
background-attachment: local;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://img-cdn-cos.lolicon.team/1/2023/03/18/1x6415730a4ec05.webp/all70);
}
@keyframes run {
from {
background-position: 0px;
}
to {
background-position: 100%;
}
}
.mdui-typo-headlineg {
margin: 0 0 0.3em 0;
font-weight: 400;
font-size: 24px;
-moz-osx-font-smoothing: grayscale;
}
.pgw-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1005;
backdrop-filter: blur(5px);
}
html,
body {
display: flex;
flex-flow: column;
height: 100vh;
font-family: 'Saira', 'Noto Sans SC';
font-weight: normal;
font-style: normal;
}
.load {
position: fixed;
z-index: -999;
width: 100%;
height: 100vh;
background: #00000000;
background-attachment: local;
background-position: center;
-webkit-background-size: auto;
-moz-background-size: auto;
background-size: cover;
background-repeat: no-repeat;
}
.main {
flex: 1;
}
.div-height {
height: 80px;
background-color:#4d6077;
backdrop-filter: blur(5px);
}
.pc-introduction {
height: 100vh;
width: 30%;
}
.pc-intro-img {
height: 100vh;
}
.middle-section {
position: absolute;
bottom: 0;
height: 30px;
/*脚部的高度*/
clear: both;
width: 100%;
}
.y-row {
display: flex;
width: auto;
justify-content: space-between;
flex-wrap: nowrap;
overflow: scroll;
overflow-x: auto;
height: 150px;
}
.bitem {
flex: 0 0 80px;
padding: 5px
}
.pc-flex {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
height: 100vh;
}
.pc-flex-item2 {
display: flex;
flex: 1;
flex-wrap: nowrap;
justify-content: space-between
}
.backdrop-filter-5{
backdrop-filter: blur(5px);
}
.mdui-toolbarm,
.mdui-toolbarb {
backdrop-filter: blur(5px);
}
.mdui-grid-tile {
border-radius: 15px;
width: 25em;
position: relative;
}
.mdui-grid-tile img{
aspect-ratio: 4/3;
}
@media (max-width: 997px) {
.mdui-hidden-lok-down {
display: none !important;
}
}
@media (min-width: 996px) {
.mdui-hidden-xm-pe {
display: none !important;
}
}
.center-ui{
text-align: center;
}
.banner {
margin-bottom: 15px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
}
.dnone{
display: none;
}
.list-news{
text-align: center;
margin: 0 auto;
margin-top: 15px;
margin-left: 15px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}
.list-news h3{
margin-top: 1rem;
}
.border-radius-15{
border-radius: 15px;
}
/* 选中第1个#player-card */
#player-card{
margin: 0px;
}
.card__item{
max-width: 100%;
border-radius: 15px;
}
.flex-mx-le-ri{
justify-content: space-around;
}
.test{
border-radius: 15px;
max-width: 30%;
}
.mdui-grid-tile-actions{
border-radius: 15px;
}
.c-secttl{
overflow: hidden;
text-align: center;
position: relative;
animation: color-fff alternate 1s;
color: #fff;
font-size: 6vw;
font-weight: 700;
line-height: 1;
margin-bottom: 50px;
margin-top: 20px;
}
.c-secttl:hover{
animation:color-block alternate 1s;
color: #247bfd;
}
@keyframes color-block {
from {
color: #fff;
}
to {
color: #247bfd;
}
}
@keyframes color-fff {
from {
color: #247bfd;
}
to {
color: #fff;
}
}
.c-secttl::after {
content: "";
z-index: 20;
width: 90px;
height: 3px;
background-color: black;
position: absolute;
left: 50%;
bottom: -40%;
transform: translate(-50%);
box-shadow: 5px 5px 10px 1px #ccc;
}
@media screen and (max-width: 1515px) {
.player .test:nth-child(2){
display: none;
}
}
@media screen and (max-width: 1165px) {
.player .test:nth-child(3){
display: none;
}
}
@media screen and (max-width: 940px) {
.player .test:nth-child(4){
display: none;
}
}
.xox{
text-align: center;
padding-top: 8px;
margin-top: 50px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 45px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}