queue/source/options/scss/components/page-main.scss

96 lines
1.4 KiB
SCSS
Raw Normal View History

2022-03-05 13:10:45 +00:00
@use '../mixins';
2020-11-11 17:17:37 +00:00
.page-main {
2022-03-05 13:10:45 +00:00
@include mixins.responsive-container;
2020-11-11 17:17:37 +00:00
margin-bottom: 16px;
}
.q-list {
border: 1px solid var(--df-2);
list-style: none;
margin-bottom: 16px;
padding: 16px;
> li:not(:last-child) {
margin-bottom: 16px;
}
}
.q-item {
background-color: var(--db-2);
2020-11-11 18:10:30 +00:00
display: grid;
grid-template-columns: auto min-content;
2020-11-11 17:17:37 +00:00
padding: 8px;
.title {
display: inline-block;
font-size: 2rem;
font-weight: bold;
margin-bottom: 8px;
}
.confirm-button {
align-items: center;
background-color: var(--la-1);
border: none;
color: var(--df-1);
2022-03-05 13:10:45 +00:00
cursor: pointer;
2020-11-11 17:17:37 +00:00
display: flex;
flex-direction: column;
font-weight: bold;
height: 2.5rem;
justify-content: center;
padding: 0;
width: 2.5rem;
&.confirm {
background-color: var(--df-1);
color: var(--la-1);
}
}
}
.history,
2020-11-11 17:17:37 +00:00
.usage {
border: 1px solid var(--df-2);
&[open] {
summary {
background-color: var(--df-2);
color: var(--db-1);
margin-bottom: 16px;
}
> :not(summary) {
padding: 0 16px;
}
}
summary {
cursor: pointer;
2022-03-17 14:13:34 +00:00
font-weight: bold;
2020-11-11 17:17:37 +00:00
padding: 16px;
&:hover {
background-color: var(--df-1);
color: var(--db-1);
}
}
}
.history {
margin-bottom: 16px;
.q-list {
border: none;
}
}
2020-11-11 17:17:37 +00:00
.usage {
2020-11-11 17:17:37 +00:00
ul {
list-style: square;
margin: 4px 0 2rem 16px;
}
}