hitripod-react-iztro/lib/Iztrolabe/Iztrolabe.css

基于iztro实现的react紫微斗数星盘组件。A react component used to generate an astrolabe of ziweidoushu based on iztro.

.iztro-astrolabe {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  display: grid;
  position: relative;
  width: 100%;
  grid-gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas:
    "g3 g4 g5 g6"
    "g2 ct ct g7"
    "g1 ct ct g8"
    "g0 g11 g10 g9";
}

.iztro-star-mutagen {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  margin-left: 1px;
  padding: 0 2px;
}

.star-with-mutagen {
  position: relative;
}

.star-with-mutagen::before {
  bottom: 0;
  content: " ";
  left: -4px;
  position: absolute;
  top: 0;
  width: 4px;
  transition: all 0.25s ease-in-out;
}

.star-with-mutagen::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -4px;
  right: 0;
  height: 4px;
  transition: all 0.25s ease-in-out;
}