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

107 lines
1.6 KiB
SCSS

@use '../mixins';
.page-main {
@include mixins.responsive-container;
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);
display: grid;
grid-template-columns: auto min-content;
padding: 8px;
.title {
display: inline-block;
font-size: 2rem;
font-weight: bold;
margin-bottom: 8px;
}
.buttons {
display: grid;
gap: 4px;
grid-template-columns: repeat(3, 1fr);
button {
align-items: center;
background-color: var(--da-3);
border: none;
color: var(--db-1);
cursor: pointer;
display: flex;
flex-direction: column;
font-weight: bold;
height: 2.5rem;
justify-content: center;
padding: 0;
width: 2.5rem;
&.confirm-button {
background-color: var(--la-1);
color: var(--df-1);
&.confirm {
background-color: var(--df-1);
color: var(--la-1);
}
}
}
}
}
.history,
.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;
font-weight: bold;
padding: 16px;
&:hover {
background-color: var(--df-1);
color: var(--db-1);
}
}
}
.history {
margin-bottom: 16px;
.q-list {
border: none;
}
}
.usage {
ul {
list-style: square;
margin: 4px 0 2rem 16px;
}
}