mirror of
https://github.com/Casvt/MIND.git
synced 2026-04-03 03:00:22 -04:00
Refactored and refined login and admin UI
This commit is contained in:
CasVT
@@ -1,160 +1,108 @@
|
||||
main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main a {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
--spacing: .5rem;
|
||||
|
||||
position: absolute;
|
||||
margin: var(--spacing);
|
||||
inset: 0 0 auto 0;
|
||||
height: var(--nav-width);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 3);
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
padding: var(--spacing);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
padding: 1rem .5rem;
|
||||
|
||||
& > button {
|
||||
width: 10rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
|
||||
padding: .5rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
color: var(--color-light);
|
||||
|
||||
transition:
|
||||
background-color 150ms ease-in-out,
|
||||
box-shadow 150ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-light-gray);
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
&.submit-error {
|
||||
background-color: var(--color-error);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
height: 1.8rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons > button {
|
||||
height: 100%;
|
||||
#grid-container {
|
||||
--grid-spacing: 1.25rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: min(100%, 80rem + 3 * var(--grid-spacing));
|
||||
margin-inline: auto;
|
||||
|
||||
display: grid;
|
||||
grid-template: auto auto auto auto / 1fr 1fr;
|
||||
gap: var(--grid-spacing);
|
||||
|
||||
padding: var(--grid-spacing);
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#grid-container > section {
|
||||
max-height: 40rem;
|
||||
min-width: 0;
|
||||
|
||||
padding: .5rem;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--color-gray);
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
transition: background-color .1s ease-in-out;
|
||||
}
|
||||
|
||||
.action-buttons > button:hover {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
.action-buttons > button > svg {
|
||||
height: 1.8rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
height: calc(100vh - var(--header-height));
|
||||
overflow-y: auto;
|
||||
|
||||
padding: .5rem;
|
||||
padding-top: var(--nav-width);
|
||||
}
|
||||
|
||||
#settings-form,
|
||||
#hosting-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
box-shadow: 0px 0px 8px 3px rgba(0 0 0 / 0.8);
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
|
||||
padding: .4rem .75rem;
|
||||
border-bottom: 1px solid var(--color-gray);
|
||||
padding: 1rem 1rem .25rem 1rem;
|
||||
|
||||
font-size: clamp(1rem, 10vw, 2rem);
|
||||
}
|
||||
|
||||
.settings-table-container,
|
||||
.user-table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
.collaps-table {
|
||||
--min-width: 18rem;
|
||||
--max-width: 40rem;
|
||||
--header-width: 30%;
|
||||
--min-data-width: 15rem;
|
||||
}
|
||||
|
||||
#power-section > .table-container {
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.settings-table {
|
||||
--max-width: 55rem;
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
min-width: 20rem;
|
||||
|
||||
border-spacing: 0px;
|
||||
border: none;
|
||||
tr:has(:where(input, select).changed) label {
|
||||
color: var(--color-changed);
|
||||
}
|
||||
|
||||
.settings-table td {
|
||||
--middle-spacing: .75rem;
|
||||
padding-bottom: 1rem;
|
||||
vertical-align: top;
|
||||
:where(input, select).changed,
|
||||
div.input-style:has(input.changed) {
|
||||
border-color: var(--color-changed);
|
||||
}
|
||||
|
||||
.settings-table td:first-child {
|
||||
width: 50%;
|
||||
padding-right: var(--middle-spacing);
|
||||
padding-top: .55rem;
|
||||
text-align: right;
|
||||
#backup-settings-section td:has(div.checked-input-container) {
|
||||
height: 6.6rem;
|
||||
}
|
||||
|
||||
.settings-table td:nth-child(2) {
|
||||
min-width: calc(var(--max-width) * 0.5);
|
||||
padding-left: var(--middle-spacing);
|
||||
}
|
||||
.add-item-container {
|
||||
margin: 1rem;
|
||||
|
||||
.settings-table td p {
|
||||
color: var(--color-light-gray);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.settings-table td > p {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border: 2px solid var(--color-gray);
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.number-input > input {
|
||||
width: auto;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.number-input > * {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.number-input > p {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.settings-table select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.add-user-container,
|
||||
.database-container {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -162,140 +110,103 @@ h2 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#download-logs-button,
|
||||
#save-hosting-button,
|
||||
#add-user-button,
|
||||
#upload-db-button,
|
||||
#restart-button,
|
||||
#shutdown-button {
|
||||
width: min(15rem, 100%);
|
||||
.entries-table {
|
||||
margin-inline: auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
width: clamp(22rem, 100%, 40rem);
|
||||
}
|
||||
|
||||
.database-container:has(#download-logs-button) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#save-hosting-button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#add-user-button {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
#add-user-button > svg {
|
||||
aspect-ratio: 1/1;
|
||||
height: 1rem;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#user-table,
|
||||
#backup-table {
|
||||
min-width: 25rem;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) :where(th, td) {
|
||||
height: 2.65rem;
|
||||
padding: .25rem .5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) tr td {
|
||||
border-top: 1px solid var(--color-gray);
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) :where(th, td):first-child {
|
||||
width: 10rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) :where(th, td):nth-child(2) {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) :where(th, td):last-child {
|
||||
width: 5.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) button {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
:where(#user-table, #backup-table) svg {
|
||||
aspect-ratio: 1/1;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#user-table input {
|
||||
#user-table td:first-child {
|
||||
width: 100%;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
#upload-database-form {
|
||||
#user-table td:last-child {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
#backup-table {
|
||||
width: clamp(30rem, 100%, 40rem);
|
||||
}
|
||||
|
||||
#backup-table td:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#backup-table td:nth-child(2) {
|
||||
text-wrap-mode: nowrap;
|
||||
}
|
||||
|
||||
#add-user-form,
|
||||
#edit-user-form {
|
||||
width: 16rem;
|
||||
height: 8rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
|
||||
margin-block: 2rem 1rem;
|
||||
}
|
||||
|
||||
#hosting-form > p,
|
||||
#upload-database-form > p {
|
||||
max-width: 50rem;
|
||||
margin-inline: auto;
|
||||
#edit-user-form:has(div.hidden) {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
dialog span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dialog:where(#upload-db-dialog, #import-db-dialog) {
|
||||
--max-height: 25rem;
|
||||
}
|
||||
|
||||
:where(#upload-db-dialog, #import-db-dialog) .dialog-content > p {
|
||||
padding-inline: 1rem;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#backup-table :where(th, td):first-child {
|
||||
width: 20rem;
|
||||
#upload-db-form tr:first-child td:last-child {
|
||||
height: 6.1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
#reset-settings-dialog .dialog-content {
|
||||
height: calc(100% - 2 * 3.2rem);
|
||||
justify-content: flex-start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#reset-settings-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reset-table {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
@media (max-width: 24rem) {
|
||||
.action-buttons button {
|
||||
width: 100%;
|
||||
|
||||
&:last-of-type {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 29rem) {
|
||||
.entries-table {
|
||||
--inline-padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 52.25rem) {
|
||||
#grid-container {
|
||||
grid-template: repeat(8, auto) / 1fr;
|
||||
padding-bottom: var(--grid-spacing);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.settings-table-container,
|
||||
.user-table-container {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.settings-table tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-table tr {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.settings-table td {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-table td:first-child {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-table td:nth-child(2) {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,28 +2,41 @@
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-light: #ffffff;
|
||||
--color-light-gray: #6b6b6b;
|
||||
--color-gray: #3c3c3c;
|
||||
--color-dark: #1b1b1b;
|
||||
--color-mid-gray: #5c5c5c;
|
||||
--color-gray: #232323;
|
||||
--color-dark: #111111;
|
||||
|
||||
--color-changed: #b87000;
|
||||
--color-error: #db5461;
|
||||
--color-dim-error: #bc4551;
|
||||
--color-success: #54db68;
|
||||
|
||||
|
||||
--header-height: 4.5rem;
|
||||
--nav-width: 4rem;
|
||||
--scrollbar-width: 12px;
|
||||
|
||||
--rem-clamp: clamp(.5rem, 2vw, 1rem);
|
||||
--default-shadow: 0 1px 2px 0 rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 30%);
|
||||
--default-shadow:
|
||||
0 1px 2px 0 rgb(0 0 0 / 60%),
|
||||
0 2px 6px 2px rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Default properties */
|
||||
/* */
|
||||
dialog {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -31,9 +44,6 @@ img {
|
||||
button,
|
||||
label {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
@@ -41,22 +51,6 @@ label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]),
|
||||
select,
|
||||
textarea,
|
||||
.as-button {
|
||||
border: 2px solid var(--color-gray);
|
||||
border-radius: 4px;
|
||||
padding: .6rem;
|
||||
outline: 0;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--color-gray);
|
||||
@@ -66,14 +60,21 @@ input[type="datetime-local"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
svg path,
|
||||
svg rect {
|
||||
svg :where(path, rect) {
|
||||
fill: var(--color-light);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: var(--scrollbar-width);
|
||||
height: var(--scrollbar-width);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
@@ -120,11 +121,255 @@ svg rect {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
button.spinning svg,
|
||||
svg.spinning {
|
||||
animation: spin-element 2.5s linear infinite forwards;
|
||||
}
|
||||
|
||||
@keyframes spin-element {
|
||||
from { transform: rotate(0deg) }
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
:where(input, textarea, select, button, div).input-style {
|
||||
height: 2.7rem;
|
||||
width: 100%;
|
||||
|
||||
border: 2px solid var(--color-gray);
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:where(input, textarea, select, button, div).input-style:focus-within {
|
||||
border-color: var(--color-light-gray);
|
||||
}
|
||||
|
||||
:where(input, textarea, select, button).input-style,
|
||||
div.input-style > :where(input, p) {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
button:has(> svg).input-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button.input-style > svg {
|
||||
height: 1.3rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.input-style {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
}
|
||||
}
|
||||
|
||||
button.input-style:hover {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
div.input-style > input[type="number"],
|
||||
input[type="number"].input-style {
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
div.input-style > input[type="file"],
|
||||
input[type="file"].input-style {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
div.input-style > :where(input[type="text"], select),
|
||||
:where(input[type="text"], select).input-style {
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
button.input-style {
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
:where(input, textarea, select, button).long-input-style,
|
||||
div.long-input-style > input {
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.checked-input-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
max-height: 2.7rem;
|
||||
width: 100%;
|
||||
max-width: 16rem;
|
||||
|
||||
transition: max-height 50ms ease-in-out,
|
||||
border-color 50ms ease-in-out;
|
||||
}
|
||||
|
||||
.checked-input-container.error-input-container {
|
||||
max-height: 4.1rem;
|
||||
}
|
||||
|
||||
.checked-input-container.error-input-container input {
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.checked-input-container :where(input, textarea) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.checked-input-container p {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 1.9rem;
|
||||
width: 100%;
|
||||
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border: 2px solid var(--color-error);
|
||||
padding: .6rem .65rem .3rem .65rem;
|
||||
background-color: var(--color-dim-error);
|
||||
color: var(--color-light);
|
||||
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.entries-table {
|
||||
--inline-padding: 1.5rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
padding-inline: var(--inline-padding);
|
||||
}
|
||||
|
||||
.entries-table::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 var(--inline-padding);
|
||||
|
||||
width: 1.4rem;
|
||||
background: linear-gradient(90deg, var(--color-dark), transparent);
|
||||
}
|
||||
|
||||
.entries-table::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 var(--inline-padding) 0 auto;
|
||||
|
||||
width: 1.4rem;
|
||||
background: linear-gradient(270deg, var(--color-dark), transparent);
|
||||
}
|
||||
|
||||
.entries-table > tbody > tr {
|
||||
transition: background-color 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.entries-table :where(th, td) {
|
||||
height: 2.65rem;
|
||||
padding: .25rem .5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.entries-table td {
|
||||
border-top: 1px solid var(--color-gray);
|
||||
}
|
||||
|
||||
.entries-table :where(th, td):first-child {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.entries-table :where(th, td):last-child {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.entries-table td:last-child:has(button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.entries-table td:last-child button {
|
||||
height: 1.25rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entries-table svg {
|
||||
aspect-ratio: 1/1;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.collaps-table {
|
||||
--min-width: 20rem;
|
||||
--max-width: 55rem;
|
||||
--header-width: 50%;
|
||||
--min-data-width: 25rem;
|
||||
|
||||
width: clamp(var(--min-width), 100%, var(--max-width));
|
||||
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.collaps-table tr:first-of-type :where(th, td) {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.collaps-table :where(th, td) {
|
||||
--middle-spacing: .75rem;
|
||||
padding-bottom: 1rem;
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child {
|
||||
width: var(--header-width);
|
||||
padding-right: var(--middle-spacing);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
min-width: var(--min-data-width);
|
||||
padding-left: var(--middle-spacing);
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: .25rem;
|
||||
|
||||
color: var(--color-light-gray);
|
||||
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* */
|
||||
/* General styling */
|
||||
/* */
|
||||
body {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
|
||||
background-color: var(--color-dark);
|
||||
@@ -141,44 +386,23 @@ noscript {
|
||||
padding: 1rem;
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-light);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Header */
|
||||
/* */
|
||||
header {
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 1rem;
|
||||
box-shadow: var(--default-shadow);
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
header > div {
|
||||
height: 100%;
|
||||
transform: translateX(-2.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
--height: 1.5rem;
|
||||
height: var(--height);
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#toggle-nav svg {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
header img {
|
||||
@@ -186,152 +410,207 @@ header img {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Nav */
|
||||
/* */
|
||||
.nav-divider {
|
||||
position: relative;
|
||||
height: calc(100% - var(--header-height));
|
||||
dialog {
|
||||
--ani-duration: 100ms;
|
||||
--max-height: 23rem;
|
||||
|
||||
width: min(100%, 40rem);
|
||||
height: min(100%, var(--max-height));
|
||||
|
||||
border-radius: 6px;
|
||||
border: 4px solid var(--color-gray);
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
box-shadow: 0px 0px 20px 5px rgba(0 0 0 / 0.8);
|
||||
|
||||
display: flex;
|
||||
|
||||
padding-block: var(--rem-clamp);
|
||||
animation: vanish-dialog var(--ani-duration);
|
||||
}
|
||||
|
||||
body:has(#nav-switch:checked) .nav-divider > nav {
|
||||
left: var(--rem-clamp);
|
||||
dialog[open] {
|
||||
animation: appear-dialog var(--ani-duration);
|
||||
}
|
||||
|
||||
body:has(#nav-switch:checked) .nav-divider > .window-container {
|
||||
margin-left: calc(var(--nav-width) + var(--rem-clamp));
|
||||
dialog::backdrop {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
nav {
|
||||
--padding: .5rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: var(--rem-clamp);
|
||||
height: calc(100% - (2 * var(--rem-clamp)));
|
||||
width: var(--nav-width);
|
||||
|
||||
dialog[open]::backdrop {
|
||||
animation: appear-dialog-bg var(--ani-duration);
|
||||
}
|
||||
|
||||
@keyframes appear-dialog {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 -5%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vanish-dialog {
|
||||
from {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
to {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
translate: 0 -5%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear-dialog-bg {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--padding);
|
||||
overflow-y: auto;
|
||||
|
||||
padding: var(--padding);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
|
||||
transition: left .3s ease-in-out;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
width: 100%;
|
||||
.dialog-header, .dialog-footer {
|
||||
height: 3.2rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
padding: .4rem .75rem;
|
||||
|
||||
&.dialog-header {
|
||||
justify-content: flex-start;
|
||||
border-bottom: 2px solid var(--color-gray);
|
||||
}
|
||||
|
||||
&.dialog-footer {
|
||||
justify-content: flex-end;
|
||||
border-top: 2px solid var(--color-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-header h2 {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.dialog-footer > button,
|
||||
.confirm-container > button {
|
||||
width: 5rem;
|
||||
height: 2.3rem;
|
||||
padding: 0;
|
||||
|
||||
&:first-of-type:where(:hover, :focus-within) {
|
||||
background-color: var(--color-dim-error);
|
||||
}
|
||||
|
||||
&:last-of-type:where(:hover, :focus-within) {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
nav > div > button {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: .5rem;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
transition: background-color .1s ease-in-out;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
nav > div > button:hover {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
nav > div > button svg {
|
||||
height: 1.8rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Window management */
|
||||
/* */
|
||||
.window-container {
|
||||
margin-left: calc(4rem + var(--rem-clamp));
|
||||
width: 100%;
|
||||
|
||||
.confirm-container {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
transition: margin-left .3s ease-in-out;
|
||||
flex-direction: row-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.window-container > :where(#home, .extra-window-container) {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
translate: 0 0;
|
||||
transition: translate .5s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container.inter-window-ani > :where(#home, .extra-window-container) {
|
||||
transition: translate .5s ease-in-out,
|
||||
transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.extra-window-container {
|
||||
--y-offset: 0%;
|
||||
transform: translateY(var(--y-offset));
|
||||
}
|
||||
|
||||
.extra-window-container > div {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.window-container.show-window > :where(#home, .extra-window-container) {
|
||||
translate: -100% 0;
|
||||
}
|
||||
|
||||
.window-container.show-window > .extra-window-container {
|
||||
transform: translateY(var(--y-offset));
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Styling extra window */
|
||||
/* */
|
||||
.extra-window-container > div {
|
||||
padding: var(--rem-clamp);
|
||||
}
|
||||
|
||||
.extra-window-container > div > h2 {
|
||||
text-align: center;
|
||||
font-size: clamp(1.3rem, 5vw, 2rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.extra-window-container > div > h2:not(:first-of-type) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.extra-window-container > div > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 543px) {
|
||||
.window-container {
|
||||
margin-left: 0;
|
||||
.confirm-container > button {
|
||||
width: 6rem;
|
||||
|
||||
&:first-of-type:where(:hover, :focus-within) {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
nav {
|
||||
left: -100%;
|
||||
&:last-of-type:where(:hover, :focus-within) {
|
||||
background-color: var(--color-dim-error);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
* {
|
||||
animation-duration: 0ms !important;
|
||||
transition-duration: 0ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 29rem) {
|
||||
.collaps-table tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collaps-table tr {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.collaps-table tr:first-of-type > td {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.collaps-table :where(th, td) {
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@keyframes appear-dialog {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vanish-dialog {
|
||||
from {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -126,6 +126,7 @@ body:has(#wide-toggle:checked) .tab-container > div {
|
||||
border-radius: 4px;
|
||||
padding: .75rem;
|
||||
background-color: var(--color);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
button.entry.fit {
|
||||
|
||||
@@ -1,65 +1,46 @@
|
||||
main {
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
main:has(#form-switch:checked) .form-container {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
height: inherit;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 30rem;
|
||||
margin-inline: auto;
|
||||
|
||||
height: calc(100% - var(--header-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: relative;
|
||||
width: min(40rem, 90%);
|
||||
height: 22rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-gray);
|
||||
color: var(--color-light);
|
||||
|
||||
box-shadow: 0px 0px 20px 3px rgba(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
form {
|
||||
height: inherit;
|
||||
flex: 1 0 auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
transition: translate 100ms ease-in-out;
|
||||
}
|
||||
|
||||
form h2 {
|
||||
font-size: clamp(1.2rem, 7vw, 2rem);
|
||||
}
|
||||
|
||||
#username-error-container,
|
||||
#password-error-container {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
form input {
|
||||
width: min(100%, 20rem);
|
||||
}
|
||||
|
||||
#username-error-container p,
|
||||
#password-error-container p {
|
||||
width: min(100%, 19rem);
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
@@ -69,12 +50,53 @@ form input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.switch-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 7rem;
|
||||
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-mid-gray);
|
||||
color: var(--color-light);
|
||||
|
||||
font-size: 1.1rem;
|
||||
|
||||
transition:
|
||||
background-color 150ms ease-in-out,
|
||||
box-shadow 150ms ease-in-out;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background-color: var(--color-light-gray);
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
#form-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
|
||||
padding: 3rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
|
||||
box-shadow: 0px 0px 20px 3px rgba(0 0 0 / 0.25);
|
||||
transition: left 100ms ease-in-out;
|
||||
}
|
||||
|
||||
main:has(#form-switch:checked) #form-cover {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 594px) {
|
||||
#form-cover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main:has(#form-switch:checked) form {
|
||||
translate: 0 -100%;
|
||||
}
|
||||
}
|
||||
|
||||
175
frontend/static/css/reminders.css
Normal file
175
frontend/static/css/reminders.css
Normal file
@@ -0,0 +1,175 @@
|
||||
/* */
|
||||
/* Nav collapse button */
|
||||
/* */
|
||||
header > div {
|
||||
height: 100%;
|
||||
transform: translateX(-2.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
--height: 1.5rem;
|
||||
height: var(--height);
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#toggle-nav svg {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Nav */
|
||||
/* */
|
||||
.nav-divider {
|
||||
position: relative;
|
||||
height: calc(100% - var(--header-height));
|
||||
|
||||
display: flex;
|
||||
|
||||
padding-block: var(--rem-clamp);
|
||||
}
|
||||
|
||||
body:has(#nav-switch:checked) .nav-divider > nav {
|
||||
left: var(--rem-clamp);
|
||||
}
|
||||
|
||||
body:has(#nav-switch:checked) .nav-divider > .window-container {
|
||||
margin-left: calc(var(--nav-width) + var(--rem-clamp));
|
||||
}
|
||||
|
||||
nav {
|
||||
--padding: .5rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: var(--rem-clamp);
|
||||
height: calc(100% - (2 * var(--rem-clamp)));
|
||||
width: var(--nav-width);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--padding);
|
||||
overflow-y: auto;
|
||||
|
||||
padding: var(--padding);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
|
||||
transition: left .3s ease-in-out;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
nav > div > button {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: .5rem;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
transition: background-color .1s ease-in-out;
|
||||
}
|
||||
|
||||
nav > div > button:hover {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
nav > div > button svg {
|
||||
height: 1.8rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Window management */
|
||||
/* */
|
||||
.window-container {
|
||||
margin-left: calc(4rem + var(--rem-clamp));
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
transition: margin-left .3s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container > :where(#home, .extra-window-container) {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
translate: 0 0;
|
||||
transition: translate .5s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container.inter-window-ani > :where(#home, .extra-window-container) {
|
||||
transition: translate .5s ease-in-out,
|
||||
transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.extra-window-container {
|
||||
--y-offset: 0%;
|
||||
transform: translateY(var(--y-offset));
|
||||
}
|
||||
|
||||
.extra-window-container > div {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.window-container.show-window > :where(#home, .extra-window-container) {
|
||||
translate: -100% 0;
|
||||
}
|
||||
|
||||
.window-container.show-window > .extra-window-container {
|
||||
transform: translateY(var(--y-offset));
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Styling extra window */
|
||||
/* */
|
||||
.extra-window-container > div {
|
||||
padding: var(--rem-clamp);
|
||||
}
|
||||
|
||||
.extra-window-container > div > h2 {
|
||||
text-align: center;
|
||||
font-size: clamp(1.3rem, 5vw, 2rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.extra-window-container > div > h2:not(:first-of-type) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.extra-window-container > div > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 543px) {
|
||||
.window-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user