fix more oddities

css/base.css

@@ -170,10 +170,6 @@ span.sm:not(.heading) {
     }
 }
 
-.fr {
-    float: right;
-}
-
 .monospace {
     background-color: inherit; /* so we can use a17t code blocks */
     font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
@@ -397,6 +393,8 @@ table {
     color: var(--color-content);
 }
 
+
+
 p.top {
     margin-top: 0px;
 }
@@ -521,3 +519,7 @@ div.card:contains(section.banner.footer) {
 .button.discord.\@low:not(.lang-link) {
     color: rgba(38, 51, 192, 90%);
 }
+
+.pb-0i {
+    padding-bottom: 0px !important
+}

css/loader.css

@@ -1,6 +1,6 @@
 .loader {
     height: auto;
-    color: rgba(0, 0, 0, 0);
+    color: rgba(0, 0, 0, 0) !important;
 }
 
 .loader .dot {

html/admin.html

@@ -252,7 +252,7 @@
             <div class="modal-content card ~critical @low">
                 <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                 <p class="content pb-4">{{ .strings.settingsRestartRequiredDescription }}</p>
-                <div class="fr">
+                <div class="float-right">
                     <span class="button ~info @low mb-2" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span>
                     <span class="button ~critical @low" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span>
                 </div>
@@ -389,6 +389,7 @@
             </form>
         </div>
         <div id="notification-box"></div>
+        <div class="top-4 left-4 absolute">
             <span class="dropdown" tabindex="0" id="lang-dropdown">
                 <span class="button ~urge dropdown-button">
                     <i class="ri-global-line"></i>
@@ -409,6 +410,7 @@
                 </div>
             </span>
             <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
+        </div>
         <div class="page-container">
             <div class="mb-4">
                 <header class="flex flex-wrap items-center justify-between">
@@ -576,7 +578,7 @@
                         </div>
                         <div class="row">
                             <span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <div id="accounts-announce-dropdown" class="col sm dropdown" tabindex="0">
+                            <div id="accounts-announce-dropdown" class="col sm dropdown pb-0i" tabindex="0">
                                 <span class="h-100 sm button ~info @low center mb-2" id="accounts-announce">{{ .strings.announce }}</span>
                                 <div class="dropdown-display">
                                     <div class="card ~neutral @low">
@@ -587,7 +589,7 @@
                             </div>
                             <span class="col sm button ~urge @low center mb-2" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
                             <span class="col sm button ~warning @low center mb-2" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual" tabindex="0">
+                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual pb-0i" tabindex="0">
                                 <span class="h-100 sm button ~positive @low center mb-2" id="accounts-disable-enable">{{ .strings.disable }}</span>
                                 <div class="dropdown-display">
                                     <div class="card ~neutral @low">

scripts/missing-colors.js

@@ -5,7 +5,7 @@ let path = require("path");
 const fixHTML = (infile, outfile) => {
     console.log(infile, outfile)
     let doc = new parser.JSDOM(fs.readFileSync(infile));
-    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card"]) {
+    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field"]) {
         let items = doc.window.document.body.querySelectorAll("."+item);
         for (let i = 0; i < items.length; i++) {
             let hasColor = false;

ts/modules/accounts.ts

@@ -193,7 +193,7 @@ class user implements User {
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
             this._matrix.innerHTML = `
-            <span class="chip btn @low">${window.lang.strings("add")}</span>
+            <span class="chip btn @high">${window.lang.strings("add")}</span>
             <input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
             `;
             (this._matrix.querySelector("span") as HTMLSpanElement).onclick = this._addMatrix;
@@ -257,7 +257,7 @@ class user implements User {
         this._telegramUsername = u;
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
-            this._telegram.innerHTML = `<span class="chip btn @low">${window.lang.strings("add")}</span>`;
+            this._telegram.innerHTML = `<span class="chip btn @high">${window.lang.strings("add")}</span>`;
             (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
         } else {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -322,7 +322,7 @@ class user implements User {
         const lastNotifyMethod = this.lastNotifyMethod() == "discord";
         this._discordUsername = u;
         if (!u) {
-            this._discord.innerHTML = `<span class="chip btn @low">Add</span>`;
+            this._discord.innerHTML = `<span class="chip btn @high">Add</span>`;
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
             this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
         } else {

ts/modules/discord.ts

@@ -39,10 +39,10 @@ export function newDiscordSearch(title: string, description: string, buttonText:
                             <td class="img-circle sm">
                                 <img class="img-circle" src="${users[i].avatar_url}" width="32" height="32">
                             </td>
-                            <td class="w-100 sm">
+                            <td class="sm">
                                 <p class="content">${users[i].name}</p>
                             </td>
-                            <td class="sm">
+                            <td class="sm float-right">
                                 <span id="discord-user-${users[i].id}" class="button ~info @high">${buttonText}</span>
                             </td>
                         </tr>

ts/modules/lang.ts

@@ -77,7 +77,7 @@ export const loadLangSelector = (page: string) => {
             const list = document.getElementById("lang-list") as HTMLDivElement;
             let innerHTML = '';
             for (let code in req.response) {
-                innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-2 lang-link">${req.response[code]}</a>`;
+                innerHTML += `<a href="?lang=${code}" class="button w-100 al justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
             }
             list.innerHTML = innerHTML;
         }