Add arrow to branch drop-down menu

assets/default.css

@@ -80,7 +80,7 @@ BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
 /* END: https://www.w3.org/TR/CSS22/ */
 
 @media not screen {
-    header select.documentBranch, nav, .navButtonContainer, .headerlink {
+    header .documentBranch select, nav, .navButtonContainer, .headerlink {
         display: none;
     }
 

assets/document-branches.js

@@ -1,5 +1,5 @@
 window.addEventListener("load", function() {
-    let select = document.querySelector("header select.documentBranch");
+    let select = document.querySelector("header .documentBranch select");
     while (select.firstChild) {
         select.removeChild(select.firstChild);
     }

assets/screen-narrow.css

@@ -9,7 +9,7 @@ header .logoContainer {
     text-align: center;
 }
 
-header .logoContainer, header select.documentBranch {
+header .logoContainer, header .documentBranch select {
     text-shadow: 0 0 3px #050a02, 0 0 3px #050a02;
 }
 

assets/screen-noscript.css

@@ -1,9 +1,9 @@
-header select.documentBranch {
+header .documentBranch::after, header .documentBranch select {
     display: none;
 }
 
-header span.documentBranch {
-    display: inline;
+header .documentBranch span {
+    display: initial;
 }
 
 nav {

assets/screen.css

@@ -67,13 +67,32 @@ header h1 {
     margin-bottom: 2rem;
 }
 
-header span.documentBranch {
-    border: 1px dashed #efdddd;
+header .documentBranch span {
     padding: 0 5px;
     display: none;
 }
 
-header select.documentBranch {
+header .documentBranch {
+    display: inline-block;
+    position: relative;
+    border: 1px dashed #efdddd;
+}
+
+header .documentBranch::after {
+    content: "";
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    right: 5px;
+    bottom: 5px;
+    width: 0;
+    height: 0;
+    border-left: 0.125em solid transparent;
+    border-right: 0.125em solid transparent;
+    border-top: 0.125em solid #efdddd;
+}
+
+header .documentBranch select {
     background: none;
     color: #efdddd;
     border: none;
@@ -82,18 +101,18 @@ header select.documentBranch {
     font-family: sans-serif;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: 1px dashed #efdddd;
+    appearance: none;
     cursor: pointer;
     padding: 0 5px;
     text-align: center;
     text-align-last: center;
 }
 
-header select.documentBranch:hover {
+header .documentBranch select:hover {
     text-decoration: underline;
 }
 
-header select.documentBranch option {
+header .documentBranch option {
     color: initial;
     font-size: initial;
     font-weight: initial;

documentation-generator/template.html

@@ -30,8 +30,10 @@ $endif$
     <div class="logoContainer">
         <h1>
             Radicale
-            <span class="documentBranch">$branch$</span>
-            <select class="documentBranch"></select>
+            <span class="documentBranch">
+                <span>$branch$</span>
+                <select></select>
+            </span>
         </h1>
         <p>Free and Open-Source CalDAV and CardDAV Server</p>
     </div>