Replace the language selector by our custom dropdown menu

customize.dist/src/less/cryptpad.less

@@ -4,6 +4,7 @@
 @import "./alertify.less";
 @import "./bar.less";
 @import "./loading.less";
+@import "./dropdown.less";
 
 html.cp, .cp body {
     font-size: .875em;

customize.dist/src/less/dropdown.less

@@ -0,0 +1,62 @@
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown-bar {
+    position: relative;
+    display: inline-block;
+
+    .dropbtn {
+    }
+
+    &:hover {
+        .dropbtn {
+        }
+    }
+
+    button {
+        .fa{
+            margin-left: 5px;
+        }
+    }
+
+    .dropdown-bar-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 160px;
+        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+
+        &.left {
+            right: 0;
+        }
+
+        &:hover {
+            display: block;
+        }
+
+        a {
+            color: black;
+            padding: 5px 16px;
+            text-decoration: none;
+            display: block;
+            cursor: pointer;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            float: none;
+            text-align: left;
+
+            &:hover {
+                background-color: #f1f1f1;
+            }
+        }
+
+        hr {
+            margin: 5px 0px;
+            height: 1px;
+            background: #bbb;
+        }
+    }
+}
+

customize.dist/src/less/toolbar.less

@@ -1,6 +1,8 @@
 @import "./variables.less";
 @import "./mixins.less";
 
+@import "./dropdown.less";
+
 .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;