Unify modals

assets/style.css

@@ -22,6 +22,8 @@
     --secondary: #c48401;
     --link: #01b6c4;
     --link-hover: #d6d24d;
+    --danger: #c40141;
+    --danger-hover: #d03467;
 }
 
 /* === Base === */
@@ -135,10 +137,10 @@ header {
 
 /* Destructive action */
 .danger {
-    color: var(--primary-hover);
+    color: var(--danger);
 }
 .danger:hover {
-    color: var(--link-hover);
+    color: var(--danger-hover);
 }
 
 /* === Main === */
@@ -291,12 +293,12 @@ main {
     align-self: stretch;
 }
 
-/* === Toolbar dropdowns === */
-.toolbar-dropdown {
+/* === Dropdowns === */
+.dropdown {
     position: relative;
 }
 
-.toolbar-dropdown-menu {
+.dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
@@ -307,17 +309,23 @@ main {
     min-width: 9rem;
 }
 
-.toolbar-dropdown-menu.is-open {
+.dropdown-menu.align-right {
+    left: auto;
+    right: 0;
+}
+
+.dropdown-menu.is-open {
     display: block;
 }
 
-.toolbar-dropdown-item {
+.dropdown-item {
     display: block;
     width: 100%;
     text-align: left;
     border: none;
     border-radius: 0;
-    padding: 0.2rem 0.5rem;
+    padding: 0.3rem 0.75rem;
+    white-space: nowrap;
 }
 
 /* === Edit form === */
@@ -451,6 +459,63 @@ hr {
     display: none;
 }
 
+/* === Modal === */
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+}
+
+.modal {
+    background: var(--bg-panel);
+    border: 1px solid var(--secondary);
+    width: 100%;
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: 0.6rem 1rem;
+    border-bottom: 1px dashed var(--secondary);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text);
+}
+
+.modal-body {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    word-break: break-word;
+}
+
+.modal-footer {
+    padding: 0.6rem 1rem;
+    border-top: 1px dashed var(--secondary);
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.modal-input {
+    width: 100%;
+    background: var(--bg);
+    border: 1px solid var(--secondary);
+    color: var(--text);
+    font: inherit;
+    font-family: "Iosevka Slab", monospace;
+    padding: 0.4rem 0.6rem;
+    outline: none;
+}
+
 /* === Responsive === */
 @media (max-width: 1100px) {
     .toc-toggle {
@@ -502,4 +567,12 @@ hr {
     .toc.is-open {
         width: calc(100% - 1.5rem);
     }
+    .modal-backdrop {
+        padding: 0.5rem;
+        align-items: flex-start;
+    }
+    .modal {
+        max-width: none;
+        margin-top: 1rem;
+    }
 }