react-iztro/lib/theme/default.css

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

.iztro-astrolabe-theme-default {
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #1890ff;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
}

.iztro-astrolabe {
  text-align: left;
}

.iztro-palace {
  border: 1px solid var(--iztro-color-border);
}

.iztro-star-soft,
.iztro-star-tough,
.iztro-star-adjective,
.iztro-star-flower,
.iztro-star-helper,
.iztro-palace-fate,
.iztro-palace-horo-star,
.iztro-palace-scope,
.iztro-palace-dynamic-name,
.iztro-palace-lft24,
.iztro-palace-rgt24 {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  text-wrap: nowrap;
}
.iztro-palace-scope-age {
  text-wrap: balance;
}
.iztro-palace-scope-age,
.iztro-palace-scope-decadal {
  color: var(--iztro-color-text);
}

.iztro-palace-lft24 {
  color: var(--iztro-color-decorator-1);
}
.iztro-palace-rgt24 {
  color: var(--iztro-color-decorator-2);
  text-wrap: nowrap;
}

.iztro-star-major,
.iztro-star-tianma,
.iztro-star-lucun,
.iztro-palace-name,
.iztro-palace-gz {
  font-size: var(--iztro-star-font-size-big);
  font-weight: bold;
}

.iztro-star-tianma {
  color: var(--iztro-color-active);
}
.iztro-star-lucun {
  color: var(--iztro-color-awesome);
}

.iztro-palace-horo-star .iztro-star {
  opacity: 0.75;
}
.iztro-palace-horo-star .iztro-star-tianma,
.iztro-palace-horo-star .iztro-star-lucun {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-star-brightness,
.iztro-star-adjective {
  font-style: normal;
  font-weight: normal;
  color: var(--iztro-color-text);
}

.iztro-star-brightness {
  opacity: 0.5;
}

.iztro-star-major,
.iztro-star-soft,
.iztro-palace-name {
  color: var(--iztro-color-major);
}
.iztro-star-tough {
  color: var(--iztro-color-tough);
}
.iztro-star-flower {
  color: var(--iztro-color-happy);
}
.iztro-star-helper,
.iztro-palace-gz {
  color: var(--iztro-color-nice);
}

.iztro-star-mutagen.mutagen-0 {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-mutagen.mutagen-1 {
  background-color: var(--iztro-color-quan);
}
.iztro-star-mutagen.mutagen-2 {
  background-color: var(--iztro-color-nice);
}
.iztro-star-mutagen.mutagen-3 {
  background-color: var(--iztro-color-focus);
}

.iztro-star-mutagen.mutagen-decadal {
  background-color: var(--iztro-color-decadal);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-yearly {
  background-color: var(--iztro-color-yearly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-monthly {
  background-color: var(--iztro-color-monthly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-daily {
  background-color: var(--iztro-color-daily);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-hourly {
  background-color: var(--iztro-color-hourly);
  opacity: 0.6;
}

.iztro-palace-gz .iztro-palace-gz-active {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-0 {
  background-color: var(--iztro-color-awesome);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-1 {
  background-color: var(--iztro-color-quan);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-2 {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-3 {
  background-color: var(--iztro-color-focus);
  color: #fff;
  font-weight: normal;
}

.iztro-star-self-mutagen-0::before {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-self-mutagen-1::before {
  background-color: var(--iztro-color-quan);
}
.iztro-star-self-mutagen-2::before {
  background-color: var(--iztro-color-nice);
}
.iztro-star-self-mutagen-3::before {
  background-color: var(--iztro-color-focus);
}

.iztro-star-hover-mutagen-0::after {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-hover-mutagen-1::after {
  background-color: var(--iztro-color-quan);
}
.iztro-star-hover-mutagen-2::after {
  background-color: var(--iztro-color-nice);
}
.iztro-star-hover-mutagen-3::after {
  background-color: var(--iztro-color-focus);
}

.iztro-palace-name-body {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  position: absolute;
  margin-top: 2px;
}

.iztro-palace-fate span {
  display: block;
  padding: 0 3px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--iztro-color-major);
  cursor: pointer;
}

.iztro-palace-center-item {
  font-size: var(--iztro-star-font-size-small);
  line-height: 22px;
}

.iztro-palace-center-item label {
  color: var(--iztro-color-text);
}

.iztro-palace-center-item span {
  color: var(--iztro-color-decorator-1);
}

.gender {
  display: inline-block;
  margin-right: 5px;
}
.gender.gender-male {
  color: var(--iztro-color-quan);
}
.gender.gender-female {
  color: var(--iztro-color-happy);
}