src/views/component/aby/aby.css
/*字体：思源黑体，Genshin Abyss*/

@font-face {
  src: url("../../../../data/font/Genshin-Abyss.ttf");
  /* 用来显示渊星的自创字体，符号是星号"*" */
  font-family: "Genshin Abyss";
  font-display: swap;
}

@font-face {
  src: url("../../../../data/font/SourceHanSansSC-Regular.otf");
  font-family: "Source Han Sans CN";
  font-display: swap;
}

@font-face {
  src: url("../../../../data/font/SourceHanSerifSC-Regular-Subset.otf");
  font-family: "Source Han Serif SC Regular Subset";
  font-display: swap;
}

@font-face {
  src: url("../../../../data/font/Khaenriah.otf");
  font-family: "Khaenriah";
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  -webkit-text-stroke: 0.018em currentColor;
  margin: 0;
  background: #faf2e7;
  padding: 0;
  width: 428px;
  color: #d9c291;
  font-family: "Source Han Sans CN", sans-serif;
  letter-spacing: 0.05em;
}

.container-vertical,
.card {
  display: grid;
  place-items: center;
  width: 100%;
}

.container-vertical {
  height: 100%;
}

.container-abyss {
  grid-gap: 10px;
  display: grid;
  grid-template-areas:
    "player-namecard"
    "data-digest";
  grid-auto-flow: row;
  justify-items: center;
  padding: 10px;
}

.card {
  z-index: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, #141a2a, #393d46);
}

.container-namecard {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 408px;
  height: 253px;
}

.container-namecard:before,
.container-namecard:after {
  position: absolute;
  border-radius: 10px;
  width: 408px;
  height: 253px;
  content: "";
}

.container-namecard:before {
  opacity: 0.33;
  z-index: 1;
  background: url("../../../../resources/etc/image/strip-4px.svg");
}

.container-namecard:after {
  z-index: 2;
  background: url("../../../../resources/etc/image/rounded-inner-with-stars.svg") no-repeat center;
  background-size: 96%;
}

.user-avatar {
  z-index: 3;
  margin-bottom: 6px;
  border: 5px solid #efeae3;
  border-radius: 50%;
  background-color: #d19e7a;
  width: 128px;
  height: 128px;
}

.uid {
  margin-right: 4px;
}

.title,
.time {
  z-index: 3;
}

.uid-title {
  font-size: 20px;
}

.time {
  margin-bottom: 16px;
  font-size: 12px;
}

.container-vertical.briefings {
  grid-template-rows: max-content 90px;
}

.container-briefing {
  padding-top: 10px;
}

.deco-strip {
  margin: 0 4px;
}

.briefing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "title-battletimes title-maxfloor title-totalstar"
    "data-battletimes data-maxfloor data-totalstar";
  justify-items: center;
  width: 100%;
}

.briefing-title {
  font-size: 12px;
}

.briefing-data {
  font-size: 36px;
}

.briefing-title.battle-times {
  grid-area: title-battletimes;
}

.briefing-title.max-floor {
  grid-area: title-maxfloor;
}

.briefing-title.total-star {
  grid-area: title-totalstar;
}

.abyss-star,
.chamber-stars {
  transform: translateY(-0.03em);
  color: #ede7d9;
  font-family: "Genshin Abyss", sans-serif;
}

.abyss-star {
  position: relative;
  bottom: 4px;
  font-size: 34px;
  text-shadow: 0 0 10px hsla(41, 37%, 89%, 0.43);
}

.chamber-stars {
  position: relative;
  font-size: 20px;
  text-shadow: 0 0 6px hsla(41, 37%, 89%, 0.15);
}

.chamber-stars.inline {
  position: relative;
  transform: translateY(-0.22em);
  font-size: 17px;
}

.container-vertical.reveal-rank {
  grid-template-rows: max-content 140px;
}

.banner-title {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: #ffffff2b;
  width: 100%;
  font-size: 24px;
}

.banner-title:before {
  -webkit-text-stroke: unset;
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  opacity: 0.3;
  z-index: -1;
  width: 408px;
  overflow: hidden;
  content: "THE WORLD OPENS ITSELF BEFORE THOSE WITH NOBLE HEARTS THE WORLD OPENS ITSELF BEFORE THOSE WITH NOBLE HEARTS THE WORLD OPENS ITSELF BEFORE THOSE WITH NOBLE HEARTS THE WORLD OPENS ITSELF BEFORE THOSE WITH NOBLE HEARTS";
  font-weight: 100;
  font-size: 10px;
  font-family: "Khaenriah", serif;
  white-space: nowrap;
}

.banner-title > p {
  transform: translateY(-0.06em);
  text-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

.container-reveal-rank {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-evenly;
  justify-items: center;
  width: 100%;
}

.container-character,
.container-character-rounded {
  display: grid;
  place-items: center;
}

.container-character {
  border-radius: 10px;
  background: hsl(43, 23%, 88%);
}

.container-character.reveal-rank {
  width: 80px;
}

.avatar-face {
  align-self: start;
  border-radius: 10px 10px 10px 0;
  width: 100%;
}

.star-five {
  background: url("../../../../resources/etc/image/5-Star.png") no-repeat center;
  background-size: cover;
}

.star-four {
  background: url("../../../../resources/etc/image/4-Star.png") no-repeat center;
  background-size: cover;
}

.showbox-label {
  transform: translateY(-0.06em);
  color: #000;
}

.container-vertical.battle-rank {
  grid-template-rows: max-content 280px;
}

.container-overview {
  grid-row-gap: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "defeat-rank defeat-rank damage-rank damage-rank take-damage-rank take-damage-rank"
    ". burst-rank burst-rank skill-rank skill-rank .";
  justify-content: space-evenly;
  justify-items: center;
  width: 100%;
}

.avatar-rounded {
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.avatar-value {
  font-size: 24px;
}

.sub-title {
  padding: 4px 0;
  font-size: 12px;
}

.defeat-rank {
  grid-area: defeat-rank;
}

.damage-rank {
  grid-area: damage-rank;
}

.take-damage-rank {
  grid-area: take-damage-rank;
}

.burst-rank {
  grid-area: burst-rank;
}

.skill-rank {
  grid-area: skill-rank;
}

.missing-data-placeholder {
  font-size: 20px;
  text-align: center;
}

.container-floor-info {
  box-sizing: border-box;
  padding-top: 10px;
}

.container-abyss-floors {
  grid-row-gap: 10px;
}

.container-chamber-info {
  grid-template-rows: max-content minmax(180px, max-content);
}

.title-content {
  grid-column-gap: 5px;
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-areas: "arrow-left main-title arrow-right";
  place-items: center;
  width: 365px;
}

.arrow-left {
  grid-area: arrow-left;
  justify-self: end;
}

.arrow-right {
  grid-area: arrow-right;
  justify-self: start;
  transform: scaleX(-1);
}

.abyss-chamber-type-title {
  color: #484848;
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}

.abyss-chamber-title {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  box-sizing: border-box;
  padding: 0 10px;
}

.abyss-chamber-title:before {
  opacity: 0.1;
}

.chamber-indicator {
  justify-self: start;
  transform: translateY(-0.05em);
  font-size: 20px;
}

.chamber-indicator > span {
  position: relative;
  bottom: 0.1em;
}

.chamber-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  font-size: 10px;
}

.kerning {
  /*处理冒号不垂直居中的问题*/
  position: relative;
  top: -0.1em;
  margin-right: 0.06em;
  margin-left: 0.06em;
}

.chamber-details {
  width: 100%;
  height: 100%;
}

.chamber-details.valid {
  grid-row-gap: 15px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "firsthalf"
    "secondhalf";
  align-items: center;
  justify-items: start;
  box-sizing: border-box;
  padding: 10px 0;
}

.chamber-details.unfulfilled {
  grid-row-gap: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  box-sizing: border-box;
  padding: 10px 0;
}

.first-half,
.second-half {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  width: 100%;
}

.chamber-details.invalid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container-character.chamber-character {
  width: 80px;
}

.container-briefing-floor-title {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  box-sizing: border-box;
  background: #ffffff2b;
  padding: 0 10px;
  width: 100%;
  font-size: 20px;
}

.briefing-floor-duration {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-self: end;
}

.brief-start-time,
.brief-end-time {
  font-size: 10px;
  white-space: nowrap;
}

.date:after {
  content: " ";
}

.briefing-floor-indicator {
  justify-self: start;
}

.briefing-floor-stars {
  display: flex;
  align-items: flex-end;
}

.container-revealed-briefing {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  max-width: 396px;
}

img.avatar-rounded-briefing {
  margin: 0 4.75px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.credit {
  font-size: 12px;
  font-family: "Source Han Serif SC Regular Subset", serif;
}

.credit.partial {
  padding: 0 10px 5px 0;
  width: 100%;
  text-align: end;
}

img {
  color: #888;
  font-size: 12px;
}
