Miao-Yunzai/resources/html/gacha/gacha-log.css

339 lines
5.8 KiB
CSS

@font-face {
font-family: "tttgbnumber";
src: url("../../font/tttgbnumber.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HYWenHei-55W";
src: url("../../font/HYWenHei-55W.ttf");
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
font-size: 18px;
color: #1e1f20;
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
transform: scale(1.5);
transform-origin: 0 0;
width: 465px;
}
.container {
width: 465px;
padding: 20px 15px 10px 15px;
background-color: #f5f6fb;
}
.head_box {
border-radius: 15px;
font-family: tttgbnumber;
padding: 10px 20px;
position: relative;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
.head_box .id_text {
color: #000;
padding: 5px 0;
font-size: 26px;
}
.head_box .day_text {
color: #000;
padding: 5px 0;
font-size: 22px;
}
.head_box .starrail_logo {
position: absolute;
top: 5px;
right: 10px;
width: 115px;
}
.head_box .id_text {
font-size: 24px;
}
.head_box .day_text {
font-size: 20px;
}
.head_box .genshin_logo {
position: absolute;
top: 1px;
right: 15px;
width: 97px;
}
.logo {
font-size: 12px;
font-family: "tttgbnumber";
text-align: center;
color: #7994a7;
position: relative;
padding-left: 10px;
}
.data_box {
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px 0px 5px 10px;
background: #fff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
position: relative;
}
.tab_lable {
position: absolute;
top: -10px;
left: -8px;
background: #d4b98c;
color: #fff;
font-size: 14px;
font-family: "HYWenHei-55W";
padding: 3px 10px;
border-radius: 15px 0px 15px 15px;
z-index: 20;
}
.data_line {
display: flex;
justify-content: space-around;
margin-bottom: 14px;
padding-right: 10px;
}
.data_line_item {
width: 100px;
text-align: center;
/*margin: 0 20px;*/
}
.num {
font-family: tttgbnumber;
font-size: 24px;
}
.num .unit {
font-size: 12px;
}
.data_box .lable {
font-size: 14px;
color: #7f858a;
line-height: 1;
margin-top: 3px;
}
body {
width: 510px;
}
.container {
width: 510px;
}
.data_box {
margin-bottom: 10px;
}
.info_box_border {
border-radius: 15px;
/* margin-top: 20px; */
margin-bottom: 20px;
padding: 6px 0px 5px 10px;
/* background: #fff; */
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
position: relative;
}
.card_list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.card_list .item {
margin: 0px 8px 10px 0px;
border-radius: 7px;
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
height: 90px;
position: relative;
overflow: hidden;
/* background: #e7e5d9; */
}
.item .role_img {
width: 70px;
height: 70px;
display: inline-block;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.card_list .item.star5 {
background-image: url(../../img/other/bg5.png);
background-size: 100%;
background-repeat: no-repeat;
}
.card_list .item.star4 {
background-image: url(../../img/other/bg4.png);
background-size: 100%;
background-repeat: no-repeat;
}
.card_list .item .num {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
font-size: 18px;
text-align: center;
color: #fff;
padding: 1px 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.5);
font-family: "tttgbnumber";
}
.card_list .item .name,
.card_list .item .num_name {
position: absolute;
top: 70.4px;
left: 0px;
z-index: 9;
font-size: 12px;
text-align: center;
width: 100%;
height: 30px;
line-height: 18px;
}
.card_list .item .num_name {
font-family: "tttgbnumber";
font-size: 16px;
}
.base_info {
position: relative;
padding-left: 10px;
margin: 5px 10px;
}
.uid:before {
content: " ";
position: absolute;
width: 5px;
height: 24px;
border-radius: 1px;
left: 0;
top: 0;
background: #bca87e;
}
.label_301 {
background-color: #eb6a4b;
}
.label_302 {
background-color: #E69449;
}
.label_200 {
background-color: #757CC8;
}
.label {
color: #555;
border-radius: 10px;
font-size: 12px;
padding: 2px 7px;
vertical-align: 2px;
}
.ritem {
display: flex;
font-size: 12px;
margin-bottom: 5px;
}
.info_role {
display: flex;
flex-wrap: wrap;
padding: 0 0px 5px 9px;
}
.ritem .role {
width: 20px;
height: 20px;
background-color: #ffb285;
border-radius: 100%;
}
.ritem .weapon_box {
overflow: hidden;
width: 20px;
height: 20px;
border-radius: 100%;
}
.ritem .weapon {
width: 20px;
height: 20px;
background-color: #ffb285;
border-radius: 100%;
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
.ritem .role_text {
margin: 2px 3px 0 2px;
display: flex;
align-items: baseline;
}
.ritem .role_name {
width: 24px;
white-space: nowrap;
overflow: hidden;
}
.ritem .role_num {
width: 24px;
}
.line_box {
height: 32px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-family: "HYWenHei-55W";
color: #7d7d7d;
padding-bottom: 5px;
}
.line_box .line {
height: 2px;
flex-grow: 1;
background-color: #ebebeb;
margin: 0px 10px;
}
.red {
color: #f21000;
}
.orange {
color: #ff8d00;
}
.green {
color: #12d88c;
}
.blue {
color: #4169E1;
}
.purple {
color: #7500ff;
}
.minimum {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
font-size: 12px;
text-align: center;
color: #fff;
border-radius: 3px;
padding: 1px 3px;
background-color: rgba(0, 0, 0, 0.8);
font-family: "tttgbnumber";
}
.hasMore {
font-size: 12px;
margin: 6px 0;
color: #7f858a;
}
.gold {
background: #ffeb73;
color: #6f4b00;
}
.good {
background: #168b2c;
color: #fff;
}
.normal {
background: #6939b7;
color: #fff;
}
.bad {
background: #9d3333;
color: #fff;
}
/*# sourceMappingURL=gacha-log.css.map */