src/views/component/overview/overview.css
@font-face {
  src: url("../../../../data/font/SourceHanSerifSC-Heavy.otf");
  font-family: "Source Han Serif SC Heavy";
  font-display: swap;
}

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

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

* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  -webkit-text-stroke: 0.018em currentColor;
  width: 800px;
  overflow-x: hidden;
  letter-spacing: 0.01em;
}

.background {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: -1;
  width: 800px;
  height: 100%;
}

.svg {
  position: absolute;
  transform: translate(0, -250px);
  opacity: 0.33;
  filter: brightness(0.95);
  width: 1100px;
}

.character-风元素 {
  background: linear-gradient(#a5d6c7, #629988);
}

.character-冰元素 {
  background: linear-gradient(#a3d2e6, #5c8e9c);
}

.character-草元素 {
  background: linear-gradient(#b5cfa3, #7a855b);
}

.character-雷元素 {
  background: linear-gradient(#cfb0d6, #5b6282);
}

.character-岩元素 {
  background: linear-gradient(#e8d29b, #93666d);
}

.character-水元素 {
  background: linear-gradient(#7eb6de, #5f6999);
}

.character-火元素 {
  background: linear-gradient(#f2d09d, #a3615a);
}

.weapon-five-stars {
  background: linear-gradient(#d0d6a5, #998462);
}

.materials.five-star {
  background: url("http://localhost:9934/resources/etc/image/5-Star.png") no-repeat center;
  background-size: 100%;
}

.materials.four-star {
  background: url("http://localhost:9934/resources/etc/image/4-Star.png") no-repeat center;
  background-size: 100%;
}

.materials.three-star {
  background: url("http://localhost:9934/resources/etc/image/3-Star.png") no-repeat center;
  background-size: 100%;
}

.materials.two-star {
  background: url("http://localhost:9934/resources/etc/image/2-Star.png") no-repeat center;
  background-size: 100%;
}

.materials.one-star {
  background: url("http://localhost:9934/resources/etc/image/1-Star.png") no-repeat center;
  background-size: 100%;
}

.weapon-four-stars {
  background: linear-gradient(#cfb0d6, hsl(229deg 18% 52%));
  /* 备选 */
  /* background: linear-gradient(#cfb0d6, #5b6282); */
}

.weapon-three-stars,
.weapon-two-stars,
.weapon-one-stars {
  background: linear-gradient(#b0d6c0, #6a8f79);
}

.container-overview-infos {
  grid-row-gap: 30px;
  display: grid;
  align-items: center;
  justify-items: center;
  z-index: 2;
  margin-top: 68px;
  width: 100%;
}

.container-deco-strip {
  display: flex;
  position: absolute;
  top: 30px;
  flex-direction: column;
  align-items: center;
  opacity: 0.11;
  z-index: -1;
  width: 800px;
  overflow: hidden;
  color: hsl(42deg 27% 18%);
  font-family: "Source Han Serif SC Regular Subset", serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.info-name {
  color: #715257;
  font-size: 44px;
  font-family: "Source Han Serif SC Heavy", serif;
  text-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

.profile-image {
  box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
  border: 8px solid #efeae3;
  border-radius: 50%;
  background: #d19e7a;
  width: 300px;
  height: 300px;
}

.char-infos,
.weapon-infos {
  grid-row-gap: 7px;
  display: grid;
  grid-template-columns: minmax(max-content, 100px) auto minmax(max-content, 100px) auto;
  backdrop-filter: blur(4px);
  width: 580px;
  font-size: 24px;
  font-family: "Source Han Serif SC Heavy", serif;
}

.char-infos {
  grid-template-areas:
    "title-birthday birthday title-vision vision"
    "title-chnCV chnCV title-japCV japCV"
    "title-constellation constellation title-rarity rarity"
    "title-baseATK baseATK baseATK baseATK"
    "title-ascension-prop ascension-prop title-ascension-value ascension-value";
}

.weapon-infos {
  grid-template-areas:
    "title-access-method access-method title-rarity rarity"
    "title-baseATK baseATK baseATK baseATK"
    "title-ascension-prop ascension-prop ascension-prop ascension-prop"
    "title-ascension-value ascension-value ascension-value ascension-value";
}

.baseATK {
  grid-area: baseATK;
}

.info-content.weapon-ascension-prop {
  grid-area: ascension-prop;
}
.info-content.weapon-ascension-value {
  grid-area: ascension-value;
}

.info-title,
.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 3px 12px 0 rgb(0 0 0 / 6%);
  padding: 0 10px;
  text-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.info-title {
  background: #ede8e1;
  color: #7d796d;
  font-size: 24px;
  font-family: "Source Han Serif SC Heavy", serif;
}

.info-content {
  background: rgba(237, 232, 225, 0.11);
  color: #ede8e1;
  text-align: justify;
  word-break: break-all;
}

.container-introduction {
  border-top: 1px solid #ede8e1;
  border-bottom: 1px solid #ede8e1;
  width: 580px;
  min-height: 4em;
  color: #ede8e1;
  font-size: 23px;
  font-family: "Source Han Serif SC Heavy", serif;
  text-align: justify;
  text-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

.introduction:before {
  position: absolute;
  transform: translateX(-1.1em);
  content: "“";
  color: #ede8e1;
  font-size: 24px;
}

.introduction:after {
  content: "”";
  color: #ede8e1;
  font-size: 24px;
}

.container-passive-talent {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
}

.passive-talent.title {
  margin-bottom: 2px;
  /* text-decoration: dotted 的阴影有点问题 */
  border-bottom: 2px dotted #ede8e1;
  width: fit-content;
  height: 1.5em;
}

.passive-talent.content {
  width: 100%;
}

.credit {
  align-self: end;
  margin: 20px 10px 10px 0;
  color: #ede8e1;
  font-family: "Source Han Serif SC Heavy", serif;
  letter-spacing: 0.05em;
  text-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

.container-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.split-title {
  margin-bottom: 20px;
  color: #715257;
  font-size: 40px;
  font-family: "Source Han Serif SC Heavy", serif;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.char-progression-table {
  grid-row-gap: 10px;
  display: grid;
  grid-template-columns: max-content auto;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 25%));
  width: 580px;
  font-family: "Source Han Serif SC Heavy", serif;
}

img.materials {
  border-radius: 8px;
  width: 50px;
}

.info-title.materials {
  font-size: 24px;
}

.all-day-materials {
  grid-column-gap: 10px;
  display: grid;
  grid-auto-columns: 50px;
  grid-auto-flow: column;
  background: rgba(237, 232, 225, 0.11);
  padding-left: 20px;
}

.table-materials {
  display: flex;
  align-items: center;
  min-height: 70px;
}

.material-title {
  font-size: 24px;
}

.limited-time-materials {
  grid-column-gap: 10px;
  display: grid;
  grid-auto-columns: minmax(50px, max-content);
  grid-auto-flow: column;
  background: rgba(237, 232, 225, 0.11);
  padding-left: 20px;
  color: #ede8e1;
}

.info-weekdays {
  min-width: 200px;
  font-size: 24px;
  text-align: end;
}

.constellation-table {
  grid-row-gap: 10px;
  display: grid;
  grid-template-columns: 50px auto;
  grid-auto-rows: minmax(70px, max-content);
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 25%));
  width: 580px;
}

.info-content.constellations {
  -webkit-text-stroke: 0.036em currentColor;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 20px;
  font-family: "Source Han Sans SC", sans-serif;
}

.constellation-order {
  justify-content: center;
}

.weapon-skill-content {
  -webkit-text-stroke: 0.036em currentColor;
  display: block;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 25%));
  padding: 6px 10px;
  width: 580px;
  font-size: 20px;
  font-family: "Source Han Sans SC", sans-serif;
  overflow-wrap: anywhere;
}

span.desc-number:before,
span.desc-number:after {
  content: "\2005";
}

span.desc-number.recolor {
  color: #674a4f;
}

.weapon-skill-content,
.constellations {
  word-break: normal !important;
}
