sendou.ink/app/styles/play-looking.css
2022-02-27 16:55:38 +02:00

84 lines
1.5 KiB
CSS

.play-looking__waves {
padding: var(--s-8);
background: url("/svg/background-pattern.svg");
background-color: var(--bg-lighter);
border-radius: var(--rounded);
}
.play-looking__waves-text {
padding: var(--s-4);
background-color: var(--bg-darker);
border-radius: var(--rounded);
font-size: var(--fonts-sm);
margin-block-start: var(--s-4);
text-align: center;
}
.play-looking__waves-button {
display: flex;
justify-content: center;
margin-block-start: var(--s-4);
}
.play-looking__info-text {
color: var(--text-lighter);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
margin-block-start: var(--s-4);
}
.play-looking__info-text.expired {
color: var(--theme-warning);
}
.play-looking__info-button {
display: inline-block;
}
.play-looking__divider {
display: none;
margin-block-end: var(--s-4);
}
.play-looking__tabs {
display: block;
margin-block-start: var(--s-4);
}
.play-looking__tab-list {
position: sticky;
top: 0;
}
.play-looking__columns {
display: none;
column-gap: var(--s-5);
grid-template-columns: repeat(3, 1fr);
}
.play-looking__cards {
display: flex;
flex-direction: column;
gap: var(--s-5);
margin-block-start: var(--s-5);
}
.play-looking__column-header {
font-size: var(--fonts-md);
text-align: center;
}
@media screen and (min-width: 768px) {
.play-looking__divider {
display: block;
}
.play-looking__columns {
display: grid;
}
.play-looking__tabs {
display: none;
}
}