diff --git a/discord.ico b/discord.ico new file mode 100644 index 0000000..5585e1c Binary files /dev/null and b/discord.ico differ diff --git a/index.html b/index.html index bdbb5ba..e6203e3 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@ } .titlebar { - font-family: Verdana, Geneva, Tahoma, sans-serif; - background-color: #202225; + background-color: #2c2f33 !important; + font-size: 0px !important; } body { @@ -26,7 +26,7 @@ text-align: center; font-weight: 100; transform: translateY(360%); - font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + font-family: Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif; text-rendering: optimizeLegibility; font-style: italic; } diff --git a/main.js b/main.js index 0cb6cb6..bd6f65c 100644 --- a/main.js +++ b/main.js @@ -10,6 +10,7 @@ function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, + icon: __dirname + '/discord.ico', frame: false, webPreferences: { preload: path.join(__dirname, 'preload.js'), diff --git a/preload.js b/preload.js index 6536fd0..061f504 100644 --- a/preload.js +++ b/preload.js @@ -2,8 +2,61 @@ const customTitlebar = require('custom-electron-titlebar') window.addEventListener('DOMContentLoaded', () => { new customTitlebar.Titlebar({ - backgroundColor: customTitlebar.Color.fromHex("#2C2F33"), + backgroundColor: customTitlebar.Color.fromHex("#202225"), }); +/** + * Utility function to add CSS in multiple passes. + * @param {string} styleString + */ + function addStyle(styleString) { + const style = document.createElement('style'); + style.textContent = styleString; + document.head.append(style); +} +addStyle(` +@import url("https://kckarnige.github.io/femboi_owo/discord-font.css"); + +.base-3dtUhz, .sidebar-2K8pFh { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + overflow: hidden; + border-top-left-radius: 8px; +} + +div.menubar[role="menubar"] { + width: 0px; +} + +.window-title:after { + content: "Cord"; + color: #fff; + font-weight: normal; + font-size: 12px; + font-family: Discordinated; +} + +.window-title:before { + content: "ARM"; + color: #7289da; + font-weight: normal; + font-size: 12px; + font-family: Helvetica, sans-serif; +} + +.window-title { + font-size: 0px !important; + margin-left: initial !important; + transform: translate(10px, 3px) !important; +} + +.titlebar { + background: #202225 !important; +} +`); }) \ No newline at end of file diff --git a/renderer.js b/renderer.js new file mode 100644 index 0000000..d2ec9f5 --- /dev/null +++ b/renderer.js @@ -0,0 +1,55 @@ +// This file is required by the index.html file and will +// be executed in the renderer process for that window. +// All of the Node.js APIs are available in this process. +const remote = require('electron').remote; + +const win = remote.getCurrentWindow(); /* Note this is different to the +html global `window` variable */ + +// When document has loaded, initialise +document.onreadystatechange = (event) => { + if (document.readyState == "complete") { + handleWindowControls(); + + document.getElementById('electron-ver').innerHTML = `${process.versions.electron}` + } +}; + +window.onbeforeunload = (event) => { + /* If window is reloaded, remove win event listeners + (DOM element listeners get auto garbage collected but not + Electron win listeners as the win is not dereferenced unless closed) */ + win.removeAllListeners(); +} + +function handleWindowControls() { + // Make minimise/maximise/restore/close buttons work when they are clicked + document.getElementById('min-button').addEventListener("click", event => { + win.minimize(); + }); + + document.getElementById('max-button').addEventListener("click", event => { + win.maximize(); + }); + + document.getElementById('restore-button').addEventListener("click", event => { + win.unmaximize(); + }); + + document.getElementById('close-button').addEventListener("click", event => { + win.close(); + }); + + // Toggle maximise/restore buttons when maximisation/unmaximisation occurs + toggleMaxRestoreButtons(); + win.on('maximize', toggleMaxRestoreButtons); + win.on('unmaximize', toggleMaxRestoreButtons); + + function toggleMaxRestoreButtons() { + if (win.isMaximized()) { + document.body.classList.add('maximized'); + } else { + document.body.classList.remove('maximized'); + } + } +} \ No newline at end of file