1
0
watterblock/ui/session-list.css

119 lines
2.0 KiB
CSS

.wb-session-list {
display: flex;
flex-direction: column;
justify-content: end;
min-height: 100%;
ol,
ul {
list-style: none;
padding: 0;
margin: 0;
}
.item {
display: grid;
grid-template-areas:
"their-name our-name"
"their-points our-points"
"actions actions";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, min-content);
gap: 1em 2em;
padding: 1em;
border-radius: 5px;
margin: 1em;
>.theirname {
font-weight: bold;
grid-area: their-name;
text-align: right;
}
>.ourname {
font-weight: bold;
grid-area: our-name;
text-align: left;
}
>.theirpoints {
grid-area: their-points;
text-align: right;
}
>.ourpoints {
grid-area: our-points;
text-align: left;
}
>.actions {
grid-area: actions;
display: flex;
justify-content: space-between;
gap: 1em;
>* {
flex-grow: 1;
}
}
}
}
.none {
display: flex;
flex-direction: column;
list-style: none;
padding: 1em 1em 0;
margin: 0;
min-height: 100%;
justify-content: end;
>.item {
display: grid;
grid-template-areas:
"their-name our-name"
"their-points our-points"
"actions actions";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, min-content);
gap: 1em 2em;
padding: 1em;
border-radius: 5px;
margin-bottom: 1em;
>.theirname {
font-weight: bold;
grid-area: their-name;
text-align: right;
}
>.ourname {
font-weight: bold;
grid-area: our-name;
text-align: left;
}
>.theirpoints {
grid-area: their-points;
text-align: right;
}
>.ourpoints {
grid-area: our-points;
text-align: left;
}
>.actions {
grid-area: actions;
display: flex;
justify-content: space-between;
gap: 1em;
>* {
flex-grow: 1;
}
}
}
}