diff options
-rw-r--r-- | src/app/css/theming.css | 12 | ||||
-rw-r--r-- | src/app/index.html | 8 | ||||
-rw-r--r-- | src/app/js/browser.js | 6 | ||||
-rw-r--r-- | src/app/js/mods.js | 4 | ||||
-rw-r--r-- | src/app/main.css | 13 |
5 files changed, 27 insertions, 16 deletions
diff --git a/src/app/css/theming.css b/src/app/css/theming.css index 6d7e223..d92c42e 100644 --- a/src/app/css/theming.css +++ b/src/app/css/theming.css @@ -61,11 +61,11 @@ a:hover { background: rgb(var(--red)) !important; } -.blue {background: rgb(var(--blue)) !important} -.blue2 {background: rgb(var(--blue2)) !important} +.bg-blue {background: rgb(var(--blue)) !important} +.bg-blue2 {background: rgb(var(--blue2)) !important} -.orange {background: rgb(var(--orange)) !important} -.orange2 {background: rgb(var(--orange2)) !important} +.bg-orange {background: rgb(var(--orange)) !important} +.bg-orange2 {background: rgb(var(--orange2)) !important} -.red {background: rgb(var(--red)) !important} -.red2 {background: rgb(var(--red2)) !important} +.bg-red {background: rgb(var(--red)) !important} +.bg-red2 {background: rgb(var(--red2)) !important} diff --git a/src/app/index.html b/src/app/index.html index 0e96486..30bee9e 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -230,10 +230,10 @@ <div class="line"> <div class="text" id="modcount">%%gui.mods%%</div> <div class="buttons modbtns"> - <button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button> - <button id="toggleall" class="orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button> - <button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button> - <button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button> + <button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button> + <button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button> + <button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button> + <button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button> </div> </div> diff --git a/src/app/js/browser.js b/src/app/js/browser.js index 05bf01d..c859024 100644 --- a/src/app/js/browser.js +++ b/src/app/js/browser.js @@ -263,6 +263,10 @@ var Browser = { } } +if (navigator.onLine) { + Browser.loadfront(); +} + function openExternal(url) { require("electron").shell.openExternal(url); } @@ -362,7 +366,7 @@ function BrowserEl(properties) { <div class="text"> <div class="title">${properties.title}</div> <div class="description">${properties.description}</div> - <button class="install blue" onclick=''>${installstr}</button> + <button class="install bg-blue" onclick=''>${installstr}</button> <button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button> <button class="visual">${properties.version}</button> <button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button> diff --git a/src/app/js/mods.js b/src/app/js/mods.js index 6c2fc22..a2e4492 100644 --- a/src/app/js/mods.js +++ b/src/app/js/mods.js @@ -34,8 +34,8 @@ mods.load = (mods_obj) => { <div class="text"> <div class="title">${mod.Name}</div> <div class="description">${mod.Description}</div> - <button class="switch on"></button> - <button class="red" onclick="mods.remove('${mod.Name}')">Remove</button> + <button class="switch on orange"></button> + <button class="bg-red" onclick="mods.remove('${mod.Name}')">Remove</button> <button class="visual">${mod.Version}</button> <button class="visual">by ${mod.Author || "Unknown"}</button> </div> diff --git a/src/app/main.css b/src/app/main.css index 671be13..5779fa8 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -120,7 +120,8 @@ a, button, #close, #nsRelease, #vpReleaseNotes, } .switch.on { - background: rgba(var(--red), 0.2) !important; + --on-color: var(--red); + background: rgba(var(--on-color), 0.4) !important; } .switch::after { @@ -139,10 +140,16 @@ a, button, #close, #nsRelease, #vpReleaseNotes, .switch.on::after { left: 15px; width: 20px; - opacity: 0.5; - background: rgb(var(--red)); + opacity: 0.8; + background: rgb(var(--on-color)); } +.switch.on.red2 {--on-color: var(--red2)} +.switch.on.blue {--on-color: var(--blue)} +.switch.on.blue2 {--on-color: var(--blue2)} +.switch.on.orange {--on-color: var(--orange)} +.switch.on.orange2 {--on-color: var(--orange2)} + .switch.on:hover::after { transform: scale(1.2); } |