Primi prototipi nella pagina di appunti condivisi

_public/style.css

@@ -511,6 +511,17 @@ button.icon {
     width: 2rem;
 }
 
+button.flat {
+    border: none;
+    background: none;
+    box-shadow: none;
+}
+
+button.flat:hover {
+    background: var(--bg-darker-2);
+    box-shadow: none;
+}
+
 select {
     font-family: var(--font-sf);
     font-weight: var(--font-weight-medium);
@@ -539,7 +550,9 @@ select {
 /* Text Fields */
 
 input[type='text'],
-input[type='password'] {
+input[type='file'],
+input[type='password'],
+textarea {
     border: none;
     background: none;
 
@@ -560,6 +573,18 @@ input[type='password'] {
     font-weight: var(--font-weight-normal);
 }
 
+textarea {
+    height: unset;
+    min-height: 2rem;
+
+    padding: 0.5rem;
+}
+
+input[type='file'] {
+    padding: 0.25rem 0.5rem;
+    height: unset;
+}
+
 input[type='password'] {
     font-family: caption;
 }
@@ -845,6 +870,250 @@ form .field-set input {
     height: calc(var(--size) * 1rem);
 }
 
+/* Appunti Condivisi */
+
+.page-appunti-condivisi .main {
+    padding: 0 1rem 6rem;
+    max-width: 100ch;
+}
+
+.page-appunti-condivisi .upload-region {
+    padding: 2rem;
+
+    height: 30vh;
+
+    border: 2px dashed var(--bg-darker-4);
+    border-radius: 0.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+
+    gap: 1rem;
+}
+
+.page-appunti-condivisi #app {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 3rem;
+}
+
+.page-appunti-condivisi .dispense-table {
+    display: grid;
+    grid-template-columns: auto 1fr minmax(auto, 50ch) auto;
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: var(--shadow-1);
+}
+
+.page-appunti-condivisi .dispense-table .pending {
+    color: royalblue;
+}
+
+.page-appunti-condivisi .dispense-table .rejected {
+    color: darkred;
+}
+
+.page-appunti-condivisi .dispense-table .header {
+    font-weight: var(--font-weight-medium);
+}
+
+.page-appunti-condivisi .dispense-table .separator {
+    grid-column: span 4;
+    border-bottom: 1px solid var(--bg-darker-2);
+}
+
+.page-appunti-condivisi .dispense-table .edit,
+.page-appunti-condivisi .dispense-table .name,
+.page-appunti-condivisi .dispense-table .tags,
+.page-appunti-condivisi .dispense-table .status {
+    padding: 1rem 0 1rem 1rem;
+
+    display: flex;
+    align-items: center;
+}
+
+.page-appunti-condivisi .dispense-table .tags {
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.page-appunti-condivisi .dispense-table .status {
+    place-self: center;
+
+    padding: 1rem 1.25rem 1rem 2rem;
+}
+
+.page-appunti-condivisi .dispense-table .expanded {
+    grid-column: span 4;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+
+.page-appunti-condivisi .dispense-table .edit-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    padding: 1rem 1rem 1rem 0;
+}
+
+.page-appunti-condivisi .dispense-table .edit-close {
+    padding: 1rem;
+}
+
+.page-appunti-condivisi .dispense-table .edit-form {
+    display: grid;
+
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem 1rem;
+
+    align-items: center;
+}
+
+.page-appunti-condivisi .dispense-table .edit-form > .label {
+    height: 2rem;
+
+    align-self: flex-start;
+
+    display: flex;
+    align-items: center;
+
+    font-weight: var(--font-weight-medium);
+}
+
+.page-appunti-condivisi .dispense-table .edit-form > textarea {
+    resize: vertical;
+    overflow-y: hidden;
+}
+
+.page-appunti-condivisi .dispense-table .edit-form > .right {
+    grid-column: span 2;
+
+    display: flex;
+    justify-content: end;
+
+    padding-top: 0.5rem;
+}
+
+.page-appunti-condivisi .input-tags {
+    padding: 0.5rem;
+    min-height: 2rem;
+
+    font-size: 17px;
+
+    background: var(--text-input-bg);
+    color: var(--fg);
+
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: 0 0 8px 0 #00000020;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    align-items: center;
+}
+
+.page-appunti-condivisi .input-tags .tag {
+    user-select: none;
+
+    height: 1.5rem;
+    border-radius: calc(1.5rem / 2);
+    padding: 0 calc(1.5rem / 2);
+
+    background: var(--bg-darker-2);
+    color: var(--card-date);
+
+    font-size: 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: 0.25rem;
+}
+
+.page-appunti-condivisi .input-tags .tag .remove {
+    cursor: pointer;
+}
+
+.page-appunti-condivisi .input-tags .tag .remove:hover {
+    color: var(--card-content);
+}
+
+.page-appunti-condivisi .input-tags input[type='text'] {
+    box-shadow: none;
+    border: none;
+    background: none;
+
+    height: 1.5rem;
+
+    min-height: unset;
+    max-width: 10rem;
+
+    display: inline-block;
+}
+
+/* Animazioni */
+
+/* Pending hourglass with a bit of overshoot */
+/* @keyframes pending-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(0deg);
+    }
+    30% {
+        transform: rotate(-5deg);
+    }
+    45% {
+        transform: rotate(190deg);
+    }
+    50% {
+        transform: rotate(180deg);
+    }
+    60% {
+        transform: rotate(175deg);
+    }
+    75% {
+        transform: rotate(185deg);
+    }
+    95% {
+        transform: rotate(370deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+} */
+
+@keyframes pending-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    30% {
+        transform: rotate(0deg);
+    }
+    50% {
+        transform: rotate(180deg);
+    }
+    80% {
+        transform: rotate(180deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 @keyframes rotate {
     0% {
         transform: rotate(0deg);

_public/theme-dark.css

@@ -59,7 +59,8 @@ body.dark-mode {
     filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
 }
 
-.dark-mode input[type] {
+.dark-mode input[type],
+.dark-mode textarea {
     background: #4b4342;
 }