mirror of
https://github.com/Casvt/MIND.git
synced 2026-02-19 11:54:46 -05:00
626 lines
10 KiB
CSS
626 lines
10 KiB
CSS
*, *::before, *::after {
|
|
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-size: 1rem;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
--color-light: #ffffff;
|
|
--color-light-gray: #6b6b6b;
|
|
--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;
|
|
--nav-show-speed: 300ms;
|
|
--nav-button-spacing: .5rem;
|
|
--scrollbar-width: 12px;
|
|
|
|
--window-slide-duration: 500ms;
|
|
--dyn-spacing: clamp(.5rem, 2vw, 1rem);
|
|
--playful-curve: cubic-bezier(0.87, 0, 0.13, 1);
|
|
--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%;
|
|
}
|
|
|
|
button,
|
|
label {
|
|
border: 0;
|
|
}
|
|
|
|
button:hover,
|
|
label:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--color-gray);
|
|
}
|
|
|
|
input[type="datetime-local"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
svg :where(path, rect) {
|
|
fill: var(--color-light);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: var(--scrollbar-width);
|
|
height: var(--scrollbar-width);
|
|
background-color: var(--color-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
-webkit-border-radius: 6px;
|
|
background-color: var(--color-gray);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-light-gray);
|
|
}
|
|
|
|
/* */
|
|
/* Utility classes */
|
|
/* */
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.error,
|
|
.error-container p {
|
|
color: var(--color-error) !important;
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.error-container p {
|
|
display: block !important;
|
|
}
|
|
|
|
.error-icon :where(path, rect),
|
|
.error-container :where(path, rect) {
|
|
fill: var(--color-error) !important;
|
|
}
|
|
|
|
.error-input,
|
|
.error-container input {
|
|
border: 2px solid var(--color-error) !important;
|
|
}
|
|
|
|
.success {
|
|
color: var(--color-success) !important;
|
|
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;
|
|
|
|
&: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: 100dvh;
|
|
overflow-x: hidden;
|
|
|
|
background-color: var(--color-dark);
|
|
color: var(--color-light);
|
|
}
|
|
|
|
noscript {
|
|
display: block;
|
|
max-width: 95%;
|
|
margin-inline: 1rem;
|
|
margin-bottom: 1rem;
|
|
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
background-color: var(--color-error);
|
|
color: var(--color-light);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
height: var(--header-height);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding: .25rem calc(var(--dyn-spacing) + .75rem);
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
background-color: var(--color-gray);
|
|
|
|
box-shadow: var(--default-shadow);
|
|
}
|
|
|
|
header img {
|
|
height: 3rem;
|
|
width: fit-content;
|
|
}
|
|
|
|
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);
|
|
|
|
animation: vanish-dialog var(--ani-duration);
|
|
}
|
|
|
|
dialog[open] {
|
|
animation: appear-dialog var(--ani-duration);
|
|
}
|
|
|
|
dialog::backdrop {
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.confirm-container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.confirm-container > button {
|
|
width: 6rem;
|
|
|
|
&:first-of-type:where(:hover, :focus-within) {
|
|
background-color: var(--color-success);
|
|
}
|
|
|
|
&: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: 34rem) {
|
|
:root {
|
|
--window-slide-duration: 200ms;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|