notatki

server/static/retro.css

@@ -155,7 +155,7 @@ label { color: var(--mc-bright); letter-spacing: 1px; }
 /* Hide the native thin caret only when the JS block takes over. */
 input.js-caret { caret-color: transparent; }
 
-input, select {
+input, select, textarea {
     font: inherit;
     background: var(--mc-black);
     color: var(--mc-bright);
@@ -163,7 +163,7 @@ input, select {
     padding: 0.3em 0.5em;
     width: 100%;
 }
-input:focus, select:focus {
+input:focus, select:focus, textarea:focus {
     outline: none;
     border-color: var(--mc-yellow);
 }
@@ -313,3 +313,67 @@ canvas {
     border: 3px double var(--mc-bright);
     padding: 0.5rem;
 }
+
+
+/* --- Notes --- */
+textarea {
+    resize: vertical;
+    min-height: 4.5em;
+}
+.note-card {
+    background: var(--mc-deep);
+    border: 3px double var(--mc-bright);
+    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45);
+    padding: 1rem 1.2rem;
+    margin-top: 1rem;
+}
+.note-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+.note-meta { color: var(--mc-dim); font-size: 0.8em; }
+.checklist { list-style: none; padding: 0; margin: 1rem 0; }
+.checklist li {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    border-bottom: 1px dashed var(--mc-dim);
+    padding: 0.15em 0;
+}
+.check-form {
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6em;
+    margin: 0;
+}
+.check-form input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+    accent-color: var(--mc-yellow);
+}
+.item-text { flex: 1; overflow-wrap: anywhere; }
+.checklist li.done .item-text {
+    text-decoration: line-through;
+    color: var(--mc-dim);
+}
+.item-delete-form { margin: 0; }
+.item-delete-form button {
+    background: transparent;
+    color: var(--mc-red-bright);
+    box-shadow: none;
+    padding: 0.1em 0.4em;
+    letter-spacing: 0;
+}
+.item-delete-form button:hover { background: var(--mc-red); color: var(--mc-bright); }
+.add-item-form {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5em;
+}
+.add-item-form input { flex: 1; }
+.note-delete-form { margin-top: 0.75rem; }
+.note-delete-form button { background: var(--mc-red); color: var(--mc-bright); }
+.note-delete-form button:hover { background: var(--mc-red-bright); }