1 files changed, 60 insertions, 2 deletions
diff --git a/haddock-api/resources/html/quick-jump.css b/haddock-api/resources/html/quick-jump.css
index 468d8036..d656f51c 100644
--- a/haddock-api/resources/html/quick-jump.css
+++ b/haddock-api/resources/html/quick-jump.css
@@ -1,3 +1,11 @@
+/* @group Fundamentals */
+
+.hidden {
+  display: none;
+}
+
+/* @end */
+
 /* @group Search box layout */
 
 #search {
@@ -11,8 +19,10 @@
   overflow-y: auto;
 }
 
-#search.hidden {
-  display: none;
+@media only screen and (max-width: 999px) {
+  #search {
+    top: 5.7em;
+  }
 }
 
 #search-form, #search-results {
@@ -43,6 +53,8 @@
   box-sizing: border-box;
   border: 0.05em solid #b2d5fb;
   background: #e8f3ff;
+  max-height: 80%;
+  overflow: scroll;
 }
 
 #search-form input + #search-results {
@@ -162,3 +174,49 @@
 }
 
 /* @end */
+
+/* @group Dropdown menus */
+
+/* Based on #search styling above. */
+
+.dropdown-menu {
+  position: fixed;
+  /* Not robust to window size changes. */
+  top: 3.2em;
+  right: 0;
+  /* To display on top of synopsis menu on right side. */
+  z-index: 1000;
+  border: 0.05em solid #b2d5fb;
+  background: #e8f3ff;
+}
+
+@media only screen and (max-width: 999px) {
+  .dropdown-menu {
+    top: 5.7em;
+  }
+}
+
+.dropdown-menu * {
+  margin: 0.1em;
+}
+
+.dropdown-menu button {
+  border: 1px #5E5184 solid;
+  border-radius: 3px;
+  background: #5E5184;
+  padding: 3px;
+  color: #f4f4f4;
+  min-width: 6em;
+}
+
+.dropdown-menu button:hover {
+  color: #5E5184;
+  background: #f4f4f4;
+}
+
+.dropdown-menu button:active {
+  color: #f4f4f4;
+  background: #5E5184;
+}
+
+/* @end */