allow for defining custom dark: variants, ignore querySelector, shrink margins

css/base.css

@@ -42,6 +42,7 @@
 @media (max-width: 1100px) {
     .page-container {
         margin: 2%;
+        margin-top: 5rem;
     }
 }
 

html/admin.html

@@ -22,7 +22,7 @@
         <div id="modal-login" class="modal">
             <form class="modal-content card" id="form-login" href="">
                 <span class="heading">{{ .strings.login }}</span>
-                <input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="login-user">
+                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
                 <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
                 <label>
                     <input type="submit" class="unfocused">
@@ -33,8 +33,8 @@
         <div id="modal-add-user" class="modal">
             <form class="modal-content card" id="form-add-user" href="">
                 <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
-                <input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="add-user-user">
+                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
-                <input type="email" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.emailAddress }}">
+                <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
                 <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="add-user-password">
                 <label>
                     <input type="submit" class="unfocused">
@@ -74,7 +74,7 @@
         <div id="modal-modify-user" class="modal">
             <form class="modal-content card" id="form-modify-user" href="">
                 <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.modifySettingsDescription }}</p>
+                <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
                 <div class="flex-row mb-4">
                     <label class="flex-row-group mr-2">
                         <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
@@ -183,7 +183,7 @@
                             <input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
                             <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
                             <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 monospace"></textarea>
-                            <p class="support mt-8 mb-4">{{ .strings.markdownSupported }}</p>
+                            <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         </div>
                         <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
                             <input type="text" class="input ~neutral @low mb-2 mt-4">
@@ -207,7 +207,7 @@
         <div id="modal-customize" class="modal">
             <div class="modal-content card">
                 <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.customizeMessagesDescription }}</p>
+                <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
                 <div class="table-responsive">
                     <table class="table">
                         <thead>
@@ -233,7 +233,7 @@
                         <div id="editor-conditionals"></div>
                         <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
                         <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 monospace"></textarea>
-                        <p class="support mt-8 mb-4">{{ .strings.markdownSupported }}</p>
+                        <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         <div class="flex-row">
                             <label class="full-width ml-2">
                                 <input type="submit" class="unfocused">
@@ -251,7 +251,7 @@
         <div id="modal-restart" class="modal">
             <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>
+                <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
                 <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>
@@ -274,7 +274,7 @@
         <div id="modal-ombi-profile" class="modal">
             <form class="modal-content card" id="form-ombi-defaults" href="">
                 <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.ombiUserDefaultsDescription }}</p>
+                <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
                 <div class="select ~neutral @low mb-4">
                     <select></select>
                 </div>
@@ -287,7 +287,7 @@
         <div id="modal-user-profiles" class="modal">
             <div class="modal-content wide card">
                 <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
-                <p class="support lg">{{ .strings.userProfilesDescription }}</p>
+                <p class="content my-4">{{ .strings.userProfilesDescription }}</p>
                 <div class="table-responsive">
                     <table class="table">
                         <thead>
@@ -310,13 +310,13 @@
         <div id="modal-add-profile" class="modal">
             <form class="modal-content card" id="form-add-profile" href="">
                 <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.addProfileDescription }}</p>
+                <p class="content my-4">{{ .strings.addProfileDescription }}</p>
                 <label>
                     <span class="supra">{{ .strings.addProfileNameOf }} </span>
-                    <input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.name }}" id="add-profile-name">
+                    <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.name }}" id="add-profile-name">
                 <label>
                     <span class="supra">{{ .strings.user }}</span>
-                    <div class="select ~neutral @low mt-8 mb-4">
+                    <div class="select ~neutral @low mt-4 mb-2">
                         <select id="add-profile-user"></select>
                     </div>
                 </label>
@@ -378,10 +378,10 @@
         <div id="modal-matrix" class="modal">
             <form class="modal-content card" id="form-matrix" href="">
                 <span class="heading">{{ .strings.linkMatrix }}</span>
-                <p class="content">{{ .strings.linkMatrixDescription }}</p>
+                <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
-                <input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
+                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
-                <input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="matrix-user">
+                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="matrix-user">
-                <input type="password" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="matrix-password">
+                <input type="password" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.password }}" id="matrix-password">
                 <label>
                     <input type="submit" class="unfocused">
                     <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>

scripts/dark-variant.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+# scan all typescript and automatically add dark variants to color tags if they're not already present.
+
 if [[ "$1" == "ts" ]]; then
     for f in $2/*.ts; do
         # FIXME: inline html
@@ -11,17 +13,39 @@ if [[ "$1" == "ts" ]]; then
                 echo $line | sed 's/.*classList//; s/).*//' | grep "~neutral\|~positive\|~urge\|~warning\|~info\|~critical" &> /dev/null
                 if [ $? -eq 0 ]; then
                     # echo "found classList @ " $l
-                    for color in neutral positive urge warning info critical; do
+                    echo $line | grep "dark:" &>/dev/null
-                        sed -i "${l},${l}s/\"~${color}\"/\"~${color}\", \"dark:~d_${color}\"/g" $f
+                    if [ $? -ne 0 ]; then
-                    done
+                        for color in neutral positive urge warning info critical; do
+                            sed -i "${l},${l}s/\"~${color}\"/\"~${color}\", \"dark:~d_${color}\"/g" $f
+                        done
+                    fi
                 else
                     echo "FIX: classList found, but color tag wasn't in it"
                 fi
             else
-                # echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f)
+                echo $line | grep "querySelector" &> /dev/null
-                for color in neutral positive urge warning info critical; do
+                if [ $? -ne 0 ]; then
-                    sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f
+                    # echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f)
-                done
+                    echo $line | grep "dark:" &>/dev/null
+                    if [ $? -ne 0 ]; then
+                        for color in neutral positive urge warning info critical; do
+                            sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f
+                        done
+                    fi
+                else
+                    echo $line | sed 's/.*querySelector//; s/).*//' | grep "~neutral\|~positive\|~urge\|~warning\|~info\|~critical" &> /dev/null
+                    if [ $? -ne 0 ]; then
+                        echo $line | grep "dark:" &>/dev/null
+                        if [ $? -ne 0 ]; then
+                            # echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f)
+                            for color in neutral positive urge warning info critical; do
+                                sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f
+                            done
+                        fi
+                    #else
+                        #echo "FIX: querySelector found, but color tag wasn't in it: " $line
+                    fi
+                fi
             fi
         done
     done

scripts/missing-colors.js

@@ -2,6 +2,16 @@ let parser = require("jsdom");
 let fs = require("fs");
 let path = require("path");
 
+const hasDark = (item) => {
+    for (let i = 0; i < item.classList.length; i++) {
+        if (item.classList[i].substring(0,5) == "dark:") {
+            return true;
+        }
+    }
+    return false;
+};
+
+
 const fixHTML = (infile, outfile) => {
     console.log(infile, outfile)
     let doc = new parser.JSDOM(fs.readFileSync(infile));
@@ -14,13 +24,17 @@ const fixHTML = (infile, outfile) => {
                 if (items[i].classList.contains("~"+color)) {
                     hasColor = true;
                     // console.log("adding to", items[i].classList)
-                    items[i].classList.add("dark:~d_"+color);
+                    if (!hasDark(items[i])) {
+                        items[i].classList.add("dark:~d_"+color);
+                    }
                     break;
                 }
             }
             if (!hasColor) {
                 items[i].classList.add("~neutral");
-                items[i].classList.add("dark:~d_neutral");
+                if (!hasDark(items[i])) {
+                    items[i].classList.add("dark:~d_neutral");
+                }
             }
             if (!items[i].classList.contains("@low") && !items[i].classList.contains("@high")) {
                 items[i].classList.add("@low");