css settings

LombreBlanche34 · Oct 9, 2022 · f94fd80 · f94fd80
1 parent f68b226
commit f94fd80
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 2 deletions.
diff --git a/preload/global.js b/preload/global.js
@@ -58,10 +58,12 @@ const exitButton = require("../script/exitButton");
 const bulletAlert = require("../script/bulletAlert");
 const update = require("./update");
 const fpsOnUI = require("../script/fpsOnUI");
+const css = require("../script/css");
 
 document.addEventListener("DOMContentLoaded", () => {
     console.log("[PRELOAD] SUCCESSFUL LOAD DOM");
     update(ipcRenderer);
+    css();
     settings();
     custom_timer();
     crosshair();

diff --git a/script/css.js b/script/css.js
@@ -0,0 +1,77 @@
+// https://codepen.io/alitcoy/pen/jOxYaRq
+
+let css = function () {
+    const css = `
+    .checkboxSettings {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 60px;
+        height: 30px;
+        background-color: #ff0000;
+        border-radius: 25px;
+        transition: background .6s;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .checkboxSettings::after {
+        content: '';
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 50%;
+        background-color: #fff;
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 30%;
+        transform: translate(-50%, -50%);
+        transition: left .3s;
+    }
+
+    .checkboxSettings::after{
+        content: '';
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 50%;
+        background-color: #fff;
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 30%;
+        transform: translate(-50%, -50%);
+        transition: left .3s;
+    }
+
+    .checkboxSettings:checked{
+        background: green;
+    }
+
+    .checkboxSettings:checked::after{
+        left: 70%;
+    }
+
+    .textSettings {
+        width: 80%;
+        height: 20px;
+        border-radius: 5px;
+        border: 0px;
+        padding: 0px 10px;
+    }
+    `;
+
+    function addGlobalStyle(css) {
+        var head, style;
+        head = document.getElementsByTagName('head')[0];
+        if (!head) {
+            return;
+        }
+        style = document.createElement('style');
+        style.type = 'text/css';
+        style.innerHTML = css;
+        head.appendChild(style);
+    }
+
+    addGlobalStyle(css)
+
+}
+module.exports = css;
diff --git a/settings/settings.js b/settings/settings.js
@@ -4,6 +4,7 @@ let settingsInit = function () {
     let buttonSettings = document.querySelector("#app > app-interface > div:nth-child(3) > menu-interface > menu-tools > menu-tool:nth-child(3)");
 
     buttonSettings.onclick = function () {
+        document.querySelector("body > modal-entry > modal-container > modal-content > span").style.display = 'none';
         data = loadSettings();
         let settingsTab = document.querySelector("body > modal-entry > modal-container > modal-content");
         for (let i = 0; i < Object.values(data).length; i++) {
@@ -15,7 +16,7 @@ let settingsInit = function () {
                         ${Object.values(data)[i].name}
                         <span style='color: #eb5656; display: ${Object.values(data)[i].needsRestart}' >*</span>
                     </span>
-                            <input type="checkbox" id="${Object.values(data)[i].id}" onclick='window.electronAPI.settingsStore("${Object.values(data)[i].id}", document.getElementById("${Object.values(data)[i].id}").checked)' ${Object.values(data)[i].checked}>
+                            <input type="checkbox" class="checkboxSettings" id="${Object.values(data)[i].id}" onclick='window.electronAPI.settingsStore("${Object.values(data)[i].id}", document.getElementById("${Object.values(data)[i].id}").checked)' ${Object.values(data)[i].checked}>
                         </option-root>
                     `)
                 break;
@@ -26,7 +27,7 @@ let settingsInit = function () {
                                 ${Object.values(data)[i].name}
                                 <span style='color: #eb5656; display: ${Object.values(data)[i].needsRestart}' >*</span>
                             </span>
-                            <input type="text" id="${Object.values(data)[i].id}" oninput='window.electronAPI.settingsStore("${Object.values(data)[i].id}", document.getElementById("${Object.values(data)[i].id}").value)' value='${Object.values(data)[i].value}'>
+                            <input type="text" class="textSettings" id="${Object.values(data)[i].id}" oninput='window.electronAPI.settingsStore("${Object.values(data)[i].id}", document.getElementById("${Object.values(data)[i].id}").value)' value='${Object.values(data)[i].value}'>
                         </option-root>
                     `)
                 break;