mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-12-04 20:47:27 +00:00
eed418477f
Previously, all templates were named with the .html extension, which caused problems for editors to recognize the Jinja2 syntax used in them. In this commit, all templates have been renamed to use the .jinja2 extension to better reflect their use of Jinja2 and to improve editor recognition.
203 lines
3.0 KiB
CSS
203 lines
3.0 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
body {
|
|
transform: scale(0.9);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.container {
|
|
width: 1286px;
|
|
height: 670px;
|
|
background-image: url(./items/background.jpg);
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.info-bg {
|
|
background-color: rgba(5, 5, 5, 0.6);
|
|
font-size: 46px;
|
|
color: rgb(255, 255, 255);
|
|
padding: 8px 10px;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
.info-name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 400px;
|
|
position: fixed;
|
|
top: 8px;
|
|
left: 65px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.info-count {
|
|
position: fixed;
|
|
top: 85px;
|
|
left: 65px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.poor-info {
|
|
position: fixed;
|
|
top: 8px;
|
|
right: 55px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.pity5 {
|
|
position: fixed;
|
|
top: 85px;
|
|
right: 55px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
|
|
.list-box {
|
|
display: flex;
|
|
padding-top: 130px;
|
|
padding-left: 85px;
|
|
}
|
|
|
|
.list-box .item {
|
|
position: relative;
|
|
}
|
|
|
|
.list-box .item .item-bg-box {
|
|
width: 112px;
|
|
height: 450px;
|
|
}
|
|
|
|
.list-box .item .item-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 100;
|
|
}
|
|
|
|
.list-box .item .item-bg-weapon {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 100;
|
|
top: 40px;
|
|
height: 370px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.list-box .item .item-shadow {
|
|
position: absolute;
|
|
width: 225px;
|
|
height: 711px;
|
|
top: -151px;
|
|
left: -58px;
|
|
z-index: 50;
|
|
}
|
|
|
|
.list-box .item .item-shadow2 {
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 7px;
|
|
height: 436px;
|
|
z-index: 110;
|
|
width: 99px;
|
|
}
|
|
|
|
.item-img-box {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 3px;
|
|
width: 106px;
|
|
height: 448px;
|
|
clip-path: url(#wish-frame);
|
|
z-index: 100;
|
|
}
|
|
|
|
.item-character-img {
|
|
height: 100%;
|
|
position: absolute;
|
|
left: -15%;
|
|
filter: drop-shadow(3px 9px 0px #333);
|
|
}
|
|
|
|
.item-weapon-box {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 3px;
|
|
width: 106px;
|
|
height: 448px;
|
|
z-index: 101;
|
|
clip-path: url(#wish-frame);
|
|
}
|
|
|
|
.item-weapon-img {
|
|
height: 100%;
|
|
position: absolute;
|
|
left: -55%;
|
|
filter: drop-shadow(3px 9px 0px #333);
|
|
}
|
|
|
|
.item-weapon-img-4 {
|
|
top: 48px;
|
|
}
|
|
|
|
.item-element {
|
|
position: absolute;
|
|
width: 65px;
|
|
left: 23px;
|
|
top: 320px;
|
|
z-index: 120;
|
|
}
|
|
|
|
.item-star {
|
|
position: absolute;
|
|
width: 82px;
|
|
left: 16px;
|
|
top: 389px;
|
|
z-index: 120;
|
|
}
|
|
|
|
.poor-wish {
|
|
position: fixed;
|
|
top: 500px;
|
|
right: 55px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.poor-bing {
|
|
position: fixed;
|
|
top: 580px;
|
|
right: 55px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
right: 55px;
|
|
bottom: 35px;
|
|
color: rgb(157 189 237 / 75%);
|
|
font-size: 24px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.times {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
width: 109px;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
left: 2px;
|
|
top: 275px;
|
|
color: rgb(255, 255, 255);
|
|
padding: 2px 0;
|
|
background-color: rgba(5, 5, 5, 0.5);
|
|
border-radius: 5px;
|
|
white-space: nowrap;
|
|
} |