custom title bar

toast
Kit Kasune 3 years ago
parent 6600c97b2f
commit 265d5705df
  1. 5
      index.html
  2. 16
      main.js
  3. 2
      styles/controls.css
  4. 36
      styles/styles.css

@ -11,6 +11,11 @@
<title>FileKade</title>
</head>
<body>
<div id="title-container">
<div id="title-sub-container">
<p id="title" class="nosel">FileKade - Alpha</p>
</div>
</div>
<div id='container'>
<div id='controls' class='controls'>

@ -1,10 +1,11 @@
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow;
function createWindow () {
async function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
mainWindow = new BrowserWindow({
width: 800,
height: 600,
minHeight: 400,
@ -13,12 +14,14 @@ function createWindow () {
preload: path.join(__dirname, 'scripts/startup/preload.js'),
nodeIntegration: true,
nodeIntegrationInSubFrames: true
}
},
titleBarStyle: "hidden",
//titleBarOverlay: true,
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
mainWindow.maximize();
await mainWindow.loadFile('index.html');
mainWindow.removeMenu();
// Open the DevTools.
@ -29,13 +32,14 @@ function createWindow () {
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
createWindow();
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
});
require('./scripts/keybinds/process/handleIpc')(mainWindow, app);
})
// Quit when all windows are closed, except on macOS. There, it's common

@ -7,6 +7,8 @@
align-content: space-around;
}
.controls {margin-top: 30px;}
.controls div {align-self: center;}

@ -1,3 +1,8 @@
@font-face {
font-family: 'Nunito';
src: url(../assets/Nunito-VariableFont_wght.ttf) format('truetype');
}
body {
background-image: linear-gradient(to right, #000000a8 0%, #000000a8 100%), url(../assets/images/neon.png);
background-size: cover;
@ -21,3 +26,34 @@ body {
100% {opacity: 100%;}
to {transform: translateY(0);}
}
#title {
font-family: 'Nunito', sans-serif;
margin: 0 0;
z-index: 1;
animation: shine 5s linear infinite;
background: linear-gradient(to right, #5d60ca 20%, #171717 35%, #171717 35%, #5d60ca 50%, #5d60ca 50%, #af2188 75%, #5d60ca 90%);
background-size: 200% auto;
color: #5d60ca;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-user-select: none;
}
#title-sub-container {
padding: 0 0;
margin: 0 0;
}
#title-container {
position: fixed;
top: -5px;
left: 0;
padding: 7px 7px 2px 7px;
width: 100vw;
overflow: hidden;
background-color: #0000006d;
z-index: 1;
}
.nosel {-webkit-user-select: none;}
Loading…
Cancel
Save