From dd66361d80498f834f0a402f00bb44b01d761d5c Mon Sep 17 00:00:00 2001 From: L1ghtingBolt Date: Sun, 12 Dec 2021 12:48:00 +0100 Subject: [PATCH] Added more themes --- src/app.html | 16 ++- src/assets/app.css | 72 ++++++----- src/assets/{app2.css => bluonkos.css} | 55 ++++++++- src/assets/watemelon.css | 165 ++++++++++++++++++++++++++ src/main.js | 12 +- 5 files changed, 275 insertions(+), 45 deletions(-) rename src/assets/{app2.css => bluonkos.css} (69%) create mode 100644 src/assets/watemelon.css diff --git a/src/app.html b/src/app.html index 26a57b0..90798ff 100644 --- a/src/app.html +++ b/src/app.html @@ -9,7 +9,7 @@ - + @@ -19,10 +19,10 @@ - + - + @@ -30,7 +30,7 @@ - +
Get more soundpacks. @@ -39,7 +39,7 @@ - + @@ -49,7 +49,11 @@
- Select CSS + + +

Made with ❤ by Forkerion

diff --git a/src/assets/app.css b/src/assets/app.css index 9c3c484..af4cff2 100644 --- a/src/assets/app.css +++ b/src/assets/app.css @@ -12,42 +12,58 @@ a:hover { justify-content: center; margin-bottom: 50px; } -#input { - color: transparent; -} -#input::-webkit-file-upload-button { - visibility: hidden; -} -#input::before { - content: 'Select some files'; - color: black; - display: inline-block; - background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3); - border: 1px solid #999; - border-radius: 3px; - padding: 5px 8px; - outline: none; - white-space: nowrap; - -webkit-user-select: none; + + +body { + padding: 20px; +} + +input[type="file"] { + display: none; + text-align: center; + margin: auto; +} +.custom-file-upload { + border: 1px solid #91b4d5; + border-radius: 4px; + background: #5c7da5; + display: flex; + padding: 6px 12px; cursor: pointer; - text-shadow: 1px 1px #fff; - font-weight: 700; - font-size: 10pt; + color: #b8d3ec; + text-decoration: none; + text-align: center; + margin: auto; } -.custom-file-input:hover::before { - border-color: black; + +#keyboard-volume-value-display{ + font-weight: bold; color:#91b4d5 } -.custom-file-input:active { - outline: 0; + +#mouse-volume-value-display{ + font-weight: bold; color:#91b4d5 } -.custom-file-input:active::before { - background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); + +body{ + padding: 2rem; + background-color:#212b42; } -body { - padding: 20px; +#mousepack-list{ + width: 100%; + margin-right: 10px; + background-color: #5c7da5; + color:#ffffff; } +#keyboardpack-list{ + width: 100%; + margin-right: 10px; + background-color: #5c7da5; + color:#ffffff; +} + + #logo { font-family: sans-serif; transition: all 0.1s ease; diff --git a/src/assets/app2.css b/src/assets/bluonkos.css similarity index 69% rename from src/assets/app2.css rename to src/assets/bluonkos.css index c785a69..dc0c219 100644 --- a/src/assets/app2.css +++ b/src/assets/bluonkos.css @@ -1,6 +1,6 @@ a, a:hover { - color: #91b4d5; + color: #ffffff; } a:hover { @@ -16,15 +16,60 @@ a:hover { #logo { font-family: sans-serif; transition: all 0.1s ease; - box-shadow: 0 2px #91b4d5; + box-shadow: 0 2px #c6915e; font-size: 3rem; font-weight: 600; - background: #111111; + background: #f2ce83; text-align: center; border-radius: 0.5rem; - border: 2px solid #91b4d5; + border: 2px solid #c6915e; padding: 1rem 2rem; - color: #91b4d5; + color: #ffffff; +} + +body{ + padding: 2rem; + background-color:#241963; +} + +#mousepack-list{ + width: 100%; + margin-right: 10px; + background-color: #446ad5; + color:#ffffff; +} + +#keyboardpack-list{ + width: 100%; + margin-right: 10px; + background-color: #446ad5; + color:#ffffff; +} + +input[type="file"] { + display: none; + text-align: center; + margin: auto; +} +.custom-file-upload { + border: 1px solid #91b4d5; + border-radius: 4px; + background: #446ad5; + display: flex; + padding: 6px 12px; + cursor: pointer; + color: #fff; + text-decoration: none; + text-align: center; + margin: auto; +} + +#keyboard-volume-value-display{ + font-weight: bold; color:#fff +} + +#mouse-volume-value-display{ + font-weight: bold; color:#fff } #logo.pressed { diff --git a/src/assets/watemelon.css b/src/assets/watemelon.css new file mode 100644 index 0000000..709362d --- /dev/null +++ b/src/assets/watemelon.css @@ -0,0 +1,165 @@ +a, +a:hover { + color: #cdc6bc; +} + +a:hover { + text-decoration: underline; +} + +#app-logo { + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +#logo { + font-family: sans-serif; + transition: all 0.1s ease; + box-shadow: 0 2px #c82931; + font-size: 3rem; + font-weight: 600; + background: #d6686f; + text-align: center; + border-radius: 0.5rem; + border: 2px solid #c82931; + padding: 1rem 2rem; + color: #cdc6bc; +} + +body{ + padding: 2rem; + background-color:#1f4437; +} + +#mousepack-list{ + width: 100%; + margin-right: 10px; + background-color: #3e7a65; + color:#cdc6bc; +} + +#keyboardpack-list{ + width: 100%; + margin-right: 10px; + background-color: #3e7a65; + color:#cdc6bc; +} + +input[type="file"] { + display: none; + text-align: center; + margin: auto; +} +.custom-file-upload { + border: 1px solid #d6686f; + border-radius: 4px; + background: #3e7a65; + display: flex; + padding: 6px 12px; + cursor: pointer; + color: #cdc6bc; + text-decoration: none; + text-align: center; + margin: auto; +} + +#keyboard-volume-value-display{ + font-weight: bold; color:#cdc6bc +} + +#mouse-volume-value-display{ + font-weight: bold; color:#cdc6bc +} + +#logo.pressed { + box-shadow: 0 0; + margin-bottom: -2px; + margin-top: 2px; +} + +.hidden { + display: none; +} + +.divider { + display: block; + width: 100%; + border-bottom: 1px solid #f1f1f1; + margin-top: 1rem; + margin-bottom: 2rem; +} + +#update-available { + padding: 8px 5px; + border: 1px solid #a8ffd6; + background: #161616; + border-radius: 5px; +} + +#soundpack-bug { + padding: 8px 5px; + border: 1px solid #b5b682; + background: #161616; + border-radius: 5px; +} + +.mb-0 { + margin-bottom: 0; +} + +/* The slider itself */ +.slider { + -webkit-appearance: none; + appearance: none; + height: 5px; + background: #5c7da5; + outline: none; + opacity: 0.7; + -webkit-transition: 0.2s; + transition: opacity 0.2s; + border-radius: 5px; + margin-bottom: 10px; +} + +/* Mouse-over effects */ +.slider:hover { + opacity: 1; + /* Fully shown on mouse-over */ +} + +/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + /* Override default look */ + appearance: none; + width: 20px; + /* Set a specific slider handle width */ + height: 20px; + /* Slider handle height */ + background: #1E1EB3; + /* Green background */ + cursor: pointer; + /* Cursor on hover */ + border-radius: 50%; +} + +.slider::-moz-range-thumb { + width: 20px; + /* Set a specific slider handle width */ + height: 20px; + /* Slider handle height */ + background: #1E1EB3; + /* Green background */ + cursor: pointer; + /* Cursor on hover */ + border-radius: 50%; +} + +table tr td { + border-bottom: 0; +} + +table { + margin-bottom: 0; +} diff --git a/src/main.js b/src/main.js index e647233..aac09ac 100644 --- a/src/main.js +++ b/src/main.js @@ -27,8 +27,8 @@ fs.ensureDirSync(mousecustom_dir); function createWindow(show = true) { // Create the browser window. win = new BrowserWindow({ - width: 400, - height: 680, + width: 450, + height: 750, webSecurity: false, // resizable: false, // fullscreenable: false, @@ -133,25 +133,25 @@ if (!gotTheLock) { }, }, { - label: 'Open Editor', + label: 'Editor', click: function () { openEditorWindow(); }, }, { - label: 'Keyboard Sound Custom Folder', + label: 'Keyboard Sound Folder', click: function () { shell.openItem(keyboardcustom_dir); }, }, { - label: 'Mouse Sound Custom Folder', + label: 'Mouse Sound Folder', click: function () { shell.openItem(mousecustom_dir); }, }, { - label: 'Open Devtools', + label: 'Devtools', click: function () { win.openDevTools(); win.webContents.openDevTools();