website/islands/MoreBox.css

48 lines
893 B
CSS

.islands__more_box__dialog {
gap: var(--_gap);
color: var(--_font-color);
align-items: center;
}
.islands__more_box__dialog[open] {
display: flex;
flex-direction: column;
padding: var(--_gap);
border: var(--_border-size) solid currentColor;
background: var(--_background-image) repeat top left / 800px;
background-color: var(--_background-color);
&::backdrop {
backdrop-filter: blur(var(--_blur));
}
}
.islands__more_box__button {
background: transparent;
outline: none;
border: var(--_border-size) solid transparent;
color: var(--_font-color);
&:focus-visible,
&:hover {
border-color: currentColor;
}
}
@media (width > 800px) {
.islands__more_box__dialog {
display: flex;
padding: 0;
border: none;
margin: 0;
position: static;
height: 100%;
background-color: transparent;
align-self: center;
}
.islands__more_box__button {
display: none;
}
}