Frontend Update

This commit is contained in:
CasVT
2024-02-23 12:37:10 +01:00
parent 683e2d5524
commit c6590f91dd
24 changed files with 1328 additions and 1090 deletions

View File

@@ -49,7 +49,7 @@ main {
overflow-y: auto;
padding: .5rem;
padding-top: calc(1rem + var(--nav-width));
padding-top: var(--nav-width);
}
#settings-form {
@@ -63,12 +63,13 @@ h2 {
width: 100%;
border-bottom: 1px solid var(--color-gray);
padding: 1rem 1rem 0rem 1rem;
padding: 1rem 1rem .25rem 1rem;
font-size: clamp(1rem, 10vw, 2rem);
}
.table-container {
.settings-table-container,
.user-table-container {
width: 100%;
overflow-x: auto;
@@ -108,6 +109,10 @@ h2 {
font-size: .9rem;
}
.settings-table td > p {
margin-top: .25rem;
}
.number-input {
width: fit-content;
display: flex;
@@ -126,8 +131,12 @@ h2 {
text-align: right;
}
.number-input > * {
padding: .5rem 1rem;
}
.number-input > p {
padding: .75rem .75rem .75rem 0rem;
padding-left: 0;
}
.settings-table select {
@@ -170,11 +179,10 @@ h2 {
#user-table {
min-width: 25rem;
border-spacing: 0px;
margin-bottom: 2rem;
}
#user-table th,
#user-table td {
#user-table :where(th, td) {
height: 2.65rem;
padding: .25rem .5rem;
text-align: left;
}
@@ -183,54 +191,53 @@ h2 {
border-top: 1px solid var(--color-gray);
}
#user-table th:first-child,
#user-table td:first-child {
#user-table :where(th, td):first-child {
width: 10rem;
padding-left: 2rem;
}
#user-table th:last-child,
#user-table td:last-child {
#user-table :where(td, td):nth-child(2) {
width: 15rem;
}
#user-table :where(th, td):last-child {
width: 5.75rem;
display: flex;
align-items: center;
gap: 1rem;
padding-right: 2rem;
}
#user-table td:first-child {
width: 100%;
#user-table button {
height: 1.25rem;
}
#user-table svg {
aspect-ratio: 1/1;
width: 1.25rem;
height: 1.25rem;
height: 100%;
width: auto;
}
#new-username-input,
#new-password-input {
width: 40%;
padding: .25rem;
}
#user-list form {
margin-top: .5rem;
width: 75%;
}
#user-list input[type="password"] {
#user-table input {
width: 100%;
padding: .25rem;
}
@media (max-width: 40rem) {
#settings-form,
.table-container {
#settings-form {
justify-content: flex-start;
}
h2 {
text-align: center;
padding-inline: 0;
}
.settings-table-container,
.user-table-container {
justify-content: left;
}
.settings-table tbody {
display: flex;
flex-direction: column;
@@ -239,6 +246,7 @@ h2 {
.settings-table tr {
display: inline-flex;
flex-direction: column;
padding-left: 1rem;
}
.settings-table td {
@@ -246,14 +254,11 @@ h2 {
}
.settings-table td:first-child {
width: 100%;
text-align: left;
}
.settings-table td:nth-child(2) {
min-width: 0;
}
#user-table {
width: 100%;
}
}