Locale switcher: fix glossy styling in Safari (#459)

macOS <select> inputs have some styling on them that can't be removed by
just changing the background or simple things.

To go around that, and have the select blends in the nav background,
remove the default select styling.

New code is mostly there to manually add the select arrow, since it's
gone by removing default select styling.

overrides/css/base.css

@@ -106,8 +106,43 @@ html {
   margin-left: 0.5rem;
 }
 
+/* remove default browser styles from the select and manually add an arrow,
+mostly to prevent Safari adding its own glossy styles */
+#wm-language-select-container {
+  position: relative;
+  overflow: hidden;
+}
+
 #wm-language-select {
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 100%;
+  padding: 2px 4px;
+  padding-right: 16px;
+  /* hardcoded value trick to match the select size to the longest option (20 characters as of right now),
+  so that the arrow is positioned correctly */
+  width: calc(20ch - 8px);
+  max-width: 100%;
+}
+
+#wm-language-select-container::after {
+  content: "\25BC";
+  pointer-events: none;
+  mask-image: var(--icon-Expand);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  background-color: var(--color-light);
+  font-size: initial;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  transform: rotate(90deg);
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
 }
 
 #wm-language-select, #wm-language-select option {

overrides/topbar.html

@@ -24,15 +24,17 @@
     <div class="wm-top-tool wm-vcenter pull-right wm-small-left wm-top-toc-button">
       <button id="wm-toc-button" type="button" class="btn btn-sm btn-default wm-vcentered"><i class="fa fa-th-list" aria-hidden="true"></i></button>
     </div>
-    <select id="wm-language-select" class="wm-top-tool wm-vcenter pull-right wm-small-left home-top-tool-selector" name="lang"
-      {% if config.theme.disable_language_selector %}
-        data-unavailable="true"
-      {% endif %}
-      >
-      {% for lang in config.extra.alternate %}
-      <option value="{{ lang.link }}" {% if lang.code == config.theme.language %}selected{% endif %}>{{ lang.name }}</option>
-      {% endfor %}
-    </select>
+    <div id="wm-language-select-container" class="wm-vcenter wm-top-tool home-top-tool-selector pull-right wm-small-left">
+      <select id="wm-language-select" name="lang"
+        {% if config.theme.disable_language_selector %}
+          data-unavailable="true"
+        {% endif %}
+        >
+        {% for lang in config.extra.alternate %}
+        <option value="{{ lang.link }}" {% if lang.code == config.theme.language %}selected{% endif %}>{{ lang.name }}</option>
+        {% endfor %}
+      </select>
+    </div>
 
     {# Optional forward-back buttons #}
     {% if config.extra.history_buttons %}