nitropage
Version:
A free and open source, extensible visual page builder based on SolidStart.
145 lines (124 loc) • 2.83 kB
CSS
.slotCard {
border-radius: 0.35rem;
}
.slotCard__title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
line-height: 1.25rem;
color: var(--np-slate-600);
padding: 1px 1.25rem 1px 1rem;
font-weight: 700;
border-bottom: 1px solid var(--np-slate-200);
border-top-left-radius: 0.35rem;
border-top-right-radius: 0.35rem;
}
.slotCard__title:last-child {
border-radius: 0.35rem;
border-bottom: none;
}
.slotCard.--active .slotCard__title {
background-color: var(--np-accent-300);
border-bottom-color: var(--np-accent-300);
color: var(--np-accent-800);
}
.item__slots {
background: linear-gradient(
to right,
var(--np-slate-200),
transparent 1.7rem
);
background-repeat: no-repeat;
border-color: var(--np-slate-300);
border-left-width: 1px;
margin-left: 0.25rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
padding-left: 1rem;
}
.item__slots.--active {
background: linear-gradient(
to right,
var(--np-accent-400),
var(--np-slate-200) 1px,
transparent 1.7rem
);
border-color: var(--np-accent-400);
}
.slot {
display: flex;
flex-direction: column;
}
.slot.--hidden {
height: 0;
visibility: hidden;
}
.slot.--invalid {
background-color: #f8717133;
margin-left: -0.75rem;
padding-left: 0.75rem;
border-left: 1px solid #f87171;
border-right: 1px solid #f87171;
border-radius: 0.375rem;
}
.slot__content {
display: flex;
flex-direction: column;
gap: 0.125rem;
border-color: var(--np-slate-100);
border-radius: 0.35rem;
border-width: 1px;
padding: 0.5rem 0.75rem;
transition: none ;
}
.slot__content.--active {
border-color: var(--np-accent-400);
}
.slot__content.--deep {
border-width: 0;
border-color: transparent;
padding: 0.125rem 0 0 0;
}
.slot.--dragging .slot__content.--deep {
padding-top: 1.125rem;
margin-top: -1rem;
}
.slot__content.--deep:not(:empty) {
padding-bottom: 0.25rem;
}
.slot__content.--has-title {
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.slot__title + .slot__content {
margin-top: 0rem ;
padding-top: 1.125rem ;
}
.slot__title + .slot__content:not(:empty) {
padding-top: 1.25rem ;
}
.slot:last-child > .slot__title + .slot__content {
padding-top: 1.35rem ;
}
.slot__title {
position: absolute;
cursor: default;
pointer-events: none;
padding-top: 0.25rem;
margin-left: -0.45rem;
line-height: 1;
font-size: 0.75rem;
color: var(--np-slate-600);
}
.slot__title.--active {
color: var(--np-accent-800);
text-decoration: underline;
text-underline-offset: 0.125rem;
text-decoration-color: var(--np-accent-300);
font-weight: 500;
}
.slot.--invalid .slot__title {
color: #b91c1c;
}