frontend for bookmark menu

data/static/css/style.css

@@ -629,9 +629,20 @@ form.full-width {
   display: flex;
   flex-direction: column;
   align-items: start;
-  &> textarea, &> select, &> input[type="text"], &> input[type="password"] {
+  gap: var(--small-padding);
+  &> textarea, &> select, &> input[type="text"], &> input[type="password"], &> .inline-group {
     width: 100%;
   }
+
+  &> .inline-group {
+    display: flex;
+    flex-direction: row;
+    gap: var(--base-padding);
+
+    &> label {
+      width: 100%;
+    }
+  }
 }
 
 .context-explain {
@@ -678,6 +689,42 @@ details.separated {
   justify-content: center;
 }
 
+#bookmark-popover {
+  position: absolute;
+  min-width: 400px;
+  max-width: 400px;
+  max-height: 500px;
+  margin-block: var(--small-padding);
+  margin-inline: 0;
+  padding-inline: var(--medium-padding);
+
+  overflow: scroll;
+
+  .bookmark-menu-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .bookmark-menu-inner .errors.hidden {
+    display: none;
+  }
+}
+
+.bookmark-menu-item {
+  padding-block: var(--medium-padding);
+  padding-inline: var(--base-padding);
+
+  &:has(.bookmark-menu-label:hover, input:hover) {
+    background-color: #0001;
+  }
+  .bookmark-menu-label {
+    display: flex;
+    flex-direction: column;
+
+  }
+}
+
+
 /* babycode tags */
 .inline-code {
   background-color: var(--code-bg-color);