66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
.islands__search_box__button {
|
|
padding: var(--_gap-half) var(--_gap);
|
|
border: var(--_border-size) solid transparent;
|
|
background-color: var(--_translucent);
|
|
min-width: fit-content;
|
|
outline: none;
|
|
color: var(--_font-color);
|
|
|
|
&:focus-visible {
|
|
border: var(--_border-size) solid currentColor;
|
|
}
|
|
|
|
@media (width < 800px) {
|
|
& {
|
|
background-color: transparent;
|
|
}
|
|
|
|
& span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.islands__search_box__dialog {
|
|
width: var(--_wide-screen);
|
|
height: 80%;
|
|
overflow-y: scroll;
|
|
border: var(--_border-size) solid currentColor;
|
|
background: var(--_background-image) repeat top left / 800px;
|
|
background-color: var(--_background-color);
|
|
padding: var(--_gap);
|
|
gap: var(--_gap);
|
|
grid-template-rows: auto 1fr;
|
|
|
|
&[open] {
|
|
display: grid;
|
|
}
|
|
|
|
&::backdrop {
|
|
backdrop-filter: blur(var(--_blur));
|
|
}
|
|
|
|
& input {
|
|
padding: var(--_gap-half) var(--_gap);
|
|
border: var(--_border-size) solid transparent;
|
|
background-color: var(--_translucent);
|
|
height: fit-content;
|
|
outline: none;
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
&:focus-visible {
|
|
border: var(--_border-size) solid currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.islands__search_box__dialog__content {
|
|
padding: var(--_gap-half);
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: left;
|
|
text-wrap: balance;
|
|
display: grid;
|
|
}
|