mirror of
https://github.com/Casvt/MIND.git
synced 2026-04-25 03:00:20 -04:00
Frontend Update
This commit is contained in:
CasVT
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,30 +28,32 @@ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
button,
|
||||
label {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button:hover,
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
textarea,
|
||||
.as-button {
|
||||
border: 2px solid var(--color-gray);
|
||||
border-radius: 4px;
|
||||
padding: .75rem;
|
||||
padding: .6rem;
|
||||
outline: 0;
|
||||
box-shadow: var(--default-shadow);
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@@ -69,6 +71,21 @@ svg rect {
|
||||
fill: var(--color-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
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 */
|
||||
/* */
|
||||
@@ -76,17 +93,25 @@ svg rect {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
.error,
|
||||
.error-container p {
|
||||
color: var(--color-error) !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.error-container p {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.error-icon path,
|
||||
.error-icon rect {
|
||||
.error-icon rect,
|
||||
.error-container path,
|
||||
.error-container rect {
|
||||
fill: var(--color-error) !important;
|
||||
}
|
||||
|
||||
.error-input {
|
||||
.error-input,
|
||||
.error-container input {
|
||||
border: 2px solid var(--color-error) !important;
|
||||
}
|
||||
|
||||
@@ -173,11 +198,11 @@ header img {
|
||||
padding-block: var(--rem-clamp);
|
||||
}
|
||||
|
||||
.nav-divider.show-nav > nav {
|
||||
body:has(#nav-switch:checked) .nav-divider > nav {
|
||||
left: var(--rem-clamp);
|
||||
}
|
||||
|
||||
.nav-divider.show-nav > .window-container {
|
||||
body:has(#nav-switch:checked) .nav-divider > .window-container {
|
||||
margin-left: calc(var(--nav-width) + var(--rem-clamp));
|
||||
}
|
||||
|
||||
@@ -237,72 +262,70 @@ nav > div > button svg {
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Main window */
|
||||
/* Window management */
|
||||
/* */
|
||||
.window-container {
|
||||
margin-left: calc(4rem + var(--rem-clamp));
|
||||
width: 100%;
|
||||
|
||||
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: margin-left .3s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container > div {
|
||||
.window-container > :where(#home, .extra-window-container) {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
transform: translateX(0);
|
||||
|
||||
transition: transform .5s ease-in-out;
|
||||
translate: 0 0;
|
||||
transition: translate .5s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container > div.show-window {
|
||||
transform: translateX(-100%);
|
||||
.window-container.inter-window-ani > :where(#home, .extra-window-container) {
|
||||
transition: translate .5s ease-in-out,
|
||||
transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.window-container > div:not(#home) {
|
||||
.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);
|
||||
}
|
||||
|
||||
.window-container > div:not(#home) > h2 {
|
||||
.extra-window-container > div > h2 {
|
||||
text-align: center;
|
||||
font-size: clamp(1.3rem, 5vw, 2rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.window-container > div:not(#home) > h2:not(:first-of-type) {
|
||||
.extra-window-container > div > h2:not(:first-of-type) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.window-container > div:not(#home) > p {
|
||||
.extra-window-container > div > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-selector {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
padding-inline: .5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.tab-selector > button {
|
||||
border: 2px solid var(--color-gray);
|
||||
padding: .5rem 1rem;
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
.tab-selector > button[data-selected="true"] {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
@media (max-width: 543px) {
|
||||
.window-container {
|
||||
margin-left: 0;
|
||||
@@ -311,4 +334,4 @@ nav > div > button svg {
|
||||
nav {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,10 +10,9 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-container > form input,
|
||||
.form-container > form select,
|
||||
.form-container > form textarea,
|
||||
.form-container > form button {
|
||||
.form-container > form :where(
|
||||
input, select, textarea, button, label
|
||||
) {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -27,14 +26,14 @@
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
.sub-inputs > input,
|
||||
.sub-inputs > select,
|
||||
.sub-inputs > button {
|
||||
.sub-inputs > :where(
|
||||
input, select, button, label
|
||||
) {
|
||||
width: calc(50% - (var(--gap) / 2));
|
||||
}
|
||||
|
||||
.form-container > form > button,
|
||||
.sub-inputs > button {
|
||||
.sub-inputs > :where(button, label) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -55,8 +54,17 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.color-list {
|
||||
#color-button {
|
||||
--color: var(--color-dark);
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
#info-form:has(#color-toggle:checked) .color-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-list {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
@@ -68,25 +76,26 @@
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.color-list > button {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
|
||||
.color-list > label {
|
||||
padding: 1rem;
|
||||
border: 1px solid transparent;
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
.color-list > button[data-selected='true'] {
|
||||
.color-list > label:has(input:checked) {
|
||||
border-color: var(--color-white);
|
||||
}
|
||||
|
||||
.notification-service-list {
|
||||
#info-form:has(#notification-service-selection-toggle:checked) .notification-service-selection {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notification-service-selection {
|
||||
width: 100%;
|
||||
max-height: 10rem;
|
||||
overflow-y: auto;
|
||||
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
border: 2px solid var(--color-gray);
|
||||
@@ -95,19 +104,20 @@
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.notification-service-list > div {
|
||||
.notification-service-selection > div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
|
||||
.notification-service-list > div:not(:first-child) {
|
||||
.notification-service-selection > div:not(:first-child) {
|
||||
border-top: 1px solid var(--color-gray);
|
||||
}
|
||||
|
||||
.form-container > form .repeat-options > button {
|
||||
width: calc((100% / 3) - (var(--gap) / 1.5));
|
||||
min-width: min-content;
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
|
||||
.repeat-bar {
|
||||
@@ -214,6 +224,7 @@ div.options > button {
|
||||
.sub-inputs > input,
|
||||
.sub-inputs > select,
|
||||
.sub-inputs > button,
|
||||
.sub-inputs > label,
|
||||
.form-container > form .repeat-options > button {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -258,8 +269,8 @@ div.options > button {
|
||||
}
|
||||
|
||||
#info.show-add-static-reminder #template-selection,
|
||||
#info.show-add-static-reminder #color-toggle,
|
||||
#info.show-add-static-reminder #toggle-notification-service-list {
|
||||
#info.show-add-static-reminder #color-button,
|
||||
#info.show-add-static-reminder #notification-service-selection-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -279,8 +290,8 @@ div.options > button {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
#info.show-add-template #color-toggle,
|
||||
#info.show-add-template #toggle-notification-service-list {
|
||||
#info.show-add-template #color-button,
|
||||
#info.show-add-template #notification-service-selection-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -292,7 +303,7 @@ div.options > button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#info.show-edit-reminder #color-toggle {
|
||||
#info.show-edit-reminder #color-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -310,8 +321,8 @@ div.options > button {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
#info.show-edit-static-reminder #color-toggle,
|
||||
#info.show-edit-static-reminder #toggle-notification-service-list {
|
||||
#info.show-edit-static-reminder #color-button,
|
||||
#info.show-edit-static-reminder #notification-service-selection-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -330,7 +341,7 @@ div.options > button {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
#info.show-edit-template #color-toggle,
|
||||
#info.show-edit-template #toggle-notification-service-list {
|
||||
#info.show-edit-template #color-button,
|
||||
#info.show-edit-template #notification-service-selection-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
/* */
|
||||
/* SEARCH BAR */
|
||||
/* */
|
||||
.search-container {
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
|
||||
|
||||
padding-block: clamp(1rem, 4vw, 2rem);
|
||||
}
|
||||
|
||||
@@ -12,24 +14,28 @@
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
|
||||
|
||||
border: 2px solid var(--color-gray);
|
||||
border-radius: 4px;
|
||||
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
width: 3.5rem;
|
||||
padding: .8rem;
|
||||
.search-bar :where(button, label) {
|
||||
width: clamp(2rem, 7.5vw, 3rem);
|
||||
flex-shrink: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-bar button svg {
|
||||
width: 1rem;
|
||||
.search-bar :where(button, label) svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding-block: 1rem;
|
||||
box-shadow: none;
|
||||
@@ -37,7 +43,7 @@
|
||||
|
||||
#clear-button {
|
||||
opacity: 0;
|
||||
|
||||
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
@@ -46,26 +52,44 @@
|
||||
}
|
||||
|
||||
#sort-input {
|
||||
width: min-content;
|
||||
width: clamp(6rem, 25vw, 12rem);
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.window-container:has(
|
||||
:where(#static-tab-selector, #template-tab-selector):checked
|
||||
) #sort-input > option:where(
|
||||
[value="time"], [value="time_reversed"]
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* REMINDER LIST */
|
||||
#reminder-tab,
|
||||
#static-reminder-tab,
|
||||
#template-tab {
|
||||
/* */
|
||||
.tab-container > div {
|
||||
--gap: 1rem;
|
||||
--entry-width: 13rem;
|
||||
max-width: 43rem;
|
||||
margin-inline: auto;
|
||||
|
||||
display: flex;
|
||||
display: none;
|
||||
justify-content: left;
|
||||
gap: var(--gap);
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
transition: max-width .75s ease-in-out;
|
||||
}
|
||||
|
||||
body:has(#wide-toggle:checked) .tab-container > div {
|
||||
max-width: 85rem;
|
||||
}
|
||||
|
||||
#home {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.entry.add-entry {
|
||||
@@ -122,10 +146,61 @@ button.entry.fit {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Tab selector */
|
||||
/* */
|
||||
.tab-selector {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
padding-inline: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.tab-selector > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-selector > label {
|
||||
min-width: 9.55rem;
|
||||
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-gray);
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
text-align: center;
|
||||
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
.tab-selector > input:checked + label {
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
.window-container:has(#reminder-tab-selector:checked) #reminder-tab,
|
||||
.window-container:has(#static-tab-selector:checked) #static-reminder-tab,
|
||||
.window-container:has(#template-tab-selector:checked) #template-tab {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 543px) {
|
||||
header > div {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.tab-selector > label {
|
||||
flex: 1 0 25%;
|
||||
}
|
||||
|
||||
#wide-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.entry {
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -4,7 +4,7 @@ main {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
main.show-create > .form-container {
|
||||
main:has(#form-switch:checked) .form-container {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ main.show-create > .form-container {
|
||||
align-items: center;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -40,8 +40,24 @@ 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 {
|
||||
max-width: 20rem;
|
||||
width: min(100%, 20rem);
|
||||
}
|
||||
|
||||
#username-error-container p,
|
||||
#password-error-container p {
|
||||
width: min(100%, 19rem);
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
@@ -50,6 +66,11 @@ form input {
|
||||
color: var(--color-light);
|
||||
|
||||
text-decoration: underline;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.switch-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
@@ -57,13 +78,3 @@ button[type="submit"] {
|
||||
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p.error {
|
||||
width: 100%;
|
||||
max-width: 20rem;
|
||||
margin-top: -.5rem;
|
||||
|
||||
padding-inline: .5rem;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
@@ -8,19 +8,30 @@
|
||||
}
|
||||
|
||||
#add-service-button {
|
||||
padding: .5rem 8rem;
|
||||
width: min(100%, 17rem);
|
||||
height: 2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
#add-service-button > svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
transition: transform .125s linear;
|
||||
}
|
||||
|
||||
.table-container:has(#service-list-toggle:checked) #add-service-button > svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.overflow-container {
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
max-width: 50rem;
|
||||
width: min(100%, 50rem);
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -29,6 +40,10 @@
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.overflow-container > table:not(:has(tbody > tr)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-container > table th,
|
||||
.overflow-container > table td {
|
||||
text-align: left;
|
||||
@@ -38,7 +53,7 @@
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#services-list > tr > td {
|
||||
.overflow-container td {
|
||||
border-top: 1px solid var(--color-gray);
|
||||
padding: .25rem;
|
||||
}
|
||||
@@ -46,7 +61,7 @@
|
||||
.title-column {
|
||||
min-width: 9.5rem;
|
||||
width: 25%;
|
||||
|
||||
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@@ -56,17 +71,18 @@
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
#services-list input {
|
||||
border-radius: 2px;
|
||||
.overflow-container table input {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
padding: .25rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#services-list input:read-only {
|
||||
.overflow-container input:read-only {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#services-list > tr > td.action-column {
|
||||
.overflow-container .action-column {
|
||||
min-width: 4rem;
|
||||
width: 20%;
|
||||
|
||||
@@ -77,18 +93,24 @@
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.action-column svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
.action-column > button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#services-list > tr:not(.edit) > td.action-column > button[data-type="edit"],
|
||||
#services-list > tr.edit > td.action-column > button[data-type="save"] {
|
||||
display: inline-block;
|
||||
.overflow-container .action-column svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
#services-list > tr.edit > td.action-column > button[data-type="edit"],
|
||||
#services-list > tr:not(.edit):not(#add-row) > td.action-column > button[data-type="save"] {
|
||||
tr:has(input:not(:read-only)) button[data-type="save"],
|
||||
tr:has(input:read-only) button[data-type="edit"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
tr:has(input:not(:read-only)) button[data-type="edit"],
|
||||
tr:has(input:read-only) button[data-type="save"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -99,14 +121,22 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-container.show-add #add-service-container {
|
||||
.overflow-container:has(#service-list-toggle:checked) table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-container:has(#service-list-toggle:checked) #add-service-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overflow-container.show-add > table {
|
||||
.overflow-container:has(#add-service-toggle:checked) #service-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-container:has(#add-service-toggle:checked) #add-service-window {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#service-list {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -130,14 +160,6 @@
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#add-service-container.show-add-window #add-service-window {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#add-service-container.show-add-window #service-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Add service form */
|
||||
/* */
|
||||
@@ -205,7 +227,7 @@
|
||||
min-height: 5rem;
|
||||
max-height: 15rem;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--color-dark);
|
||||
@@ -228,19 +250,23 @@
|
||||
}
|
||||
|
||||
.add-row {
|
||||
height: 2rem;
|
||||
width: 80%;
|
||||
width: min(100%, 21rem);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.add-row input {
|
||||
flex-grow: 1;
|
||||
height: 2rem;
|
||||
min-width: 0rem;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.add-row button {
|
||||
height: 2rem;
|
||||
padding: .35rem .75rem;
|
||||
background-color: var(--color-gray);
|
||||
border-radius: 4px;
|
||||
@@ -265,3 +291,9 @@
|
||||
height: inherit;
|
||||
fill: var(--color-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 543px) {
|
||||
#service-list button {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ h2 {
|
||||
|
||||
p {
|
||||
font-size: clamp(1rem, 4.2vw, 1.75rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -1,45 +1,39 @@
|
||||
.settings-container {
|
||||
max-width: 50rem;
|
||||
#settings-table {
|
||||
margin-inline: auto;
|
||||
|
||||
text-align: center;
|
||||
width: min(100%, 50rem);
|
||||
}
|
||||
|
||||
.settings-container > h3 {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 2px solid var(--color-gray);
|
||||
|
||||
font-size: 1.4rem;
|
||||
#settings-table td {
|
||||
padding: .5rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.settings-container > h3:not(:first-of-type) {
|
||||
margin-top: 2.5rem;
|
||||
#settings-table tr > td:first-child {
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-container button {
|
||||
#settings-table button {
|
||||
padding: .5rem 2rem;
|
||||
background-color: var(--color-gray);
|
||||
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.settings-container input,
|
||||
.settings-container textarea,
|
||||
.settings-container select {
|
||||
max-width: 20rem;
|
||||
#settings-table tr:has(#default-service-input) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings-table tr:has(#default-service-input option) {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#change-password-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#delete-account-button {
|
||||
#settings-table #delete-account-button {
|
||||
background-color: var(--color-error);
|
||||
}
|
||||
|
||||
@@ -67,4 +61,4 @@
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user