Miao-Yunzai/plugins/genshin/resources/html/gachaAllLog/gachaAllLog.css

397 lines
6.0 KiB
CSS

@font-face {
font-family: "tttgbnumber";
src: url("../../font/tttgbnumber.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;
position: absolute;
}
.container {
width: 1500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 15px 10px 15px;
background-color: #f5f6fb;
height: 100%; /* 设置容器高度,这里假设容器的父元素有固定高度或是占满整个视口 */
}
.info_box{
width: 465px;
margin-right: 15px;
margin-left: 15px;
flex: 1;
align-items: center;
justify-content: center;
}
.head_box {
border-radius: 15px;
font-family: tttgbnumber;
padding: 10px 20px;
position: relative;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
}
.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 {
width: 100%;
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 rgb(0 0 0 / 15%);
position: relative;
}
.tab_lable {
position: absolute;
top: -10px;
left: -8px;
background: #d4b98c;
color: #fff;
font-size: 14px;
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 rgb(0 0 0 / 15%);
position: relative;
}
.card_list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.card_list .item {
margin: 0px 10px 10px 10px;
border-radius: 7px;
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
height: 90px;
position: relative;
overflow: hidden;
/*background: #e7e5d9;*/
}
.card_list .item.isNull {
margin: 0px 10px 10px 10px;
border-radius: 7px;
height: 90px;
position: relative;
overflow: hidden;
box-shadow: none !important;
background: none !important;
}
.card_list .item img {
width: 70px;
height: 70px;
border-radius: 7px 7px 20px 0;
}
.card_list .item.star5{
width: 70px;
}
.card_list .item.star5 img {
background-image: url(../../img/other/bg5.png);
width: 100%;
height: 70px;
/*filter: brightness(1.1);*/
background-size: 100%;
background-repeat: no-repeat;
}
.card_list .item.star4 img {
width: 100%;
height: 70px;
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;
border-radius: 3px;
padding: 1px 5px;
border-radius: 3px;
background: rgb(0 0 0 / 50%);
font-family: "tttgbnumber";
}
.card_list .item .name,
.card_list .item .num_name {
position: absolute;
top: 71px;
left: 0px;
z-index: 9;
font-size: 12px;
text-align: center;
width: 100%;
height: 16px;
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: #d3bc8d;
}
.label_301 {
background-color: rgb(235 106 75);
}
.label_302 {
background-color: #E69449;
}
.label_200 {
background-color: #757CC8;
}
.label {
color: #fff;
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: 12px;
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: rgb(0 0 0 / 80%);
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;
}