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
CSS
.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);
}