MibooGram/resources/zzz/ledger/ledger.css

@font-face {
  font-family: "tttgbnumber";
  src: url("../../fonts/tttgbnumber.ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  transform: scale(1);
  transform-origin: 0 0;
  font-family: "tttgbnumber", system-ui;
  color: #28384d;
  font-size: 20px;
}

.container {
  width: 640px;
  height: 750px;
  background-image: url(background/loading-bg-m.png);
  background-size: 100% 100%;
  color: whitesmoke;
  overflow: hidden;
  padding: 20px 50px;
}

.title-box {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
.title-box .avatar-container {
  display: flex;
}
.title-box .avatar-container .Avatar {
  height: 50px;
  width: 50px;
}
.title-box .avatar-container .nickname {
  margin-left: 20px;
  font-size: 35px;
}
.title-box .info {
  font-size: 28px;
  padding: 10px 0;
}
.title-box .genshin_logo {
  position: absolute;
  top: 2px;
  right: 0px;
  width: 97px;
}
.info .month {
  font-size: 24px;
  font-weight: 600;
}
.info .tip {
  font-size: medium;
  margin: 10px 0;
}
.title-box:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  top: 140px;
  left: 0;
  width: 520px;
  background: url(data:image/png;base64,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)
    no-repeat 50% / cover;
}
.data-box {
  display: flex;
  margin-bottom: 10px;
}
.data-box .head {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 24px;
}
.month .primogems {
  background: url(data:image/png;base64,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) no-repeat;
  background-size: auto 100%;
  width: 265px;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  margin-left: -10px;
}
.primogems .icon {
    width: 40px;
  height: 40px;
  margin-left: 10px;
}
.primogems .icon-xq {
  background: url("background/icon-feilin-large.png") no-repeat 50% / cover;;
}
.primogems .icon-ticket {
  background: url("background/icon-master-large.png") no-repeat 50% / cover;;
}
.primogems .icon-boo {
  background: url("background/icon-bangboo-large.png") no-repeat 50% / cover;;
}
.primogems .text {
  margin-left: 18px;
  white-space:nowrap;
}
.day {
  margin-left: 10px;
}
.day .primogems {
  background: url(data:image/png;base64,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
  background-size: auto 100%;
  width: 260px;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  margin-left: -15px;
}
.chart-box .chart-info {
  display: flex;
}
.chart-box .head {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 24px;
}
#chartContainer {
  width: 240px;
  height: 240px;
  background: url(background/chart.png) no-repeat 50% / cover;
  margin-left: -5px;
}
.tooltip {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tooltip li {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tooltip li i {
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
.tooltip li .action {
  width: 160px;
}
.tooltip li em {
  font-size: 20px;
  color: burlywood;
  font-style: normal;
  width: 50px;
}
.tooltip li .num {
  width: 10px;
}