Front-end: Fix Safari details display and enhance dropdown on mobile

bookwyrm/static/css/bookwyrm.css

@@ -93,6 +93,10 @@ body {
     display: inline !important;
 }
 
+
+/** File input styles
+ ******************************************************************************/
+
 input[type=file]::file-selector-button {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -119,17 +123,12 @@ input[type=file]::file-selector-button:hover {
     color: #363636;
 }
 
-details .dropdown-menu {
-    display: block !important;
-}
 
-details.dropdown[open] summary.dropdown-trigger::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+/** General `details` element styles
+ ******************************************************************************/
+
+summary::-webkit-details-marker {
+    display: none;
 }
 
 summary::marker {
@@ -147,6 +146,55 @@ summary::marker {
     margin-top: 1em;
 }
 
+/** Details dropdown
+ ******************************************************************************/
+
+details.dropdown[open] summary.dropdown-trigger::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+details .dropdown-menu {
+    display: block !important;
+}
+
+details .dropdown-menu button {
+    /* Fix weird Safari defaults */
+    box-sizing: border-box;
+}
+
+details.dropdown .dropdown-menu button:focus-visible,
+details.dropdown .dropdown-menu a:focus-visible {
+    outline-style: auto;
+    outline-offset: -2px;
+}
+
+@media only screen and (max-width: 768px) {
+    details.dropdown[open] summary.dropdown-trigger::before {
+        background-color:  rgba(0, 0, 0, 0.5);
+        z-index: 30;
+    }
+    details .dropdown-menu {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 100;
+    }
+    details .dropdown-menu > * {
+        pointer-events: all;
+    }
+}
+
 /** Shelving
  ******************************************************************************/