UNPKG

react-iztro

Version:

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

99 lines (92 loc) 2.09 kB
.iztro-center-palace { grid-area: ct; position: relative; width: 100%; height: 100%; } .iztro-center-palace-centralize { text-align: center; } .iztro-center-palace ul.basic-info { margin: 10px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; } .iztro-center-palace ul.basic-info li { list-style: none; } .iztro-center-palace .center-title { padding: 5px 0; margin: 0; font-size: var(--iztro-star-font-size-big); font-weight: bold; text-align: center; border-bottom: 1px dashed var(--iztro-color-border); } .horo-buttons { margin: 10px; font-size: var(--iztro-star-font-size-small); display: flex; justify-content: space-around; } .horo-buttons .center-button { display: block; text-align: center; padding: 5px; border: 1px solid var(--iztro-color-border); cursor: pointer; transition: all 0.25s ease-in-out; color: var(--iztro-color-text); user-select: none; } .horo-buttons .center-button:not(.disabled):hover { color: var(--iztro-color-major); background-color: var(--iztro-color-border); } .horo-buttons .center-button.disabled { opacity: 0.5; cursor: not-allowed; } .horo-buttons .center-horo-hour { display: flex; align-items: center; } .iztro-copyright { position: absolute; bottom: 3px; right: 3px; font-size: 12px; color: rgba(0, 0, 0, 0.2); text-decoration: none; text-shadow: 1px 1px rgba(255, 255, 255, 0.3); } #palace-line { stroke: var(--iztro-color-awesome); opacity: 0.6; transition: all 0.25s ease-in-out; } #palace-line.decadal { stroke: var(--iztro-color-decadal); } .solar-horoscope { display: flex; align-items: center; gap: 10px; } .solar-horoscope-centralize { justify-content: center; } .solar-horoscope .today { display: inline-block; font-size: var(--iztro-star-font-size-small); cursor: pointer; border: 1px solid var(--iztro-color-border); padding: 0 5px; transition: all 0.25s ease-in-out; } .solar-horoscope .today:hover { color: var(--iztro-color-major); background-color: var(--iztro-color-border); }