Langs: EN FR
In your index.html, you have to include the style first in the head (before your styles):
<head>
<link rel="stylesheet" href="NeutronDesk/ressources/style.css">
<link rel="stylesheet" href="mystyle.css">
</head>Then create the titlebar container, app content and import your scripts:
<body>
<header></header>
<div class="app-content">
Your content here
</div>
<script>
require('NeutronDesk/index.js');
</script>
</body>In your stylesheet, or in the ndstyle.css put like so in the head:
<head>
<link rel="stylesheet" href="NeutronDesk/ressources/style.css">
<link rel="stylesheet" href="ndstyle.css">
<link rel="stylesheet" href="mystyle.css">
</head>You can add thoses css parameters to customize your current titlebar:
:root {
--titlebar-background-color: rgb(40, 44, 52); /* Titlebar background color */
--titlevar-background-color-inactive: var(--titlebar-background-color); /* Titlebar background color when focus lost (using same by default) */
--titlebar-color-active: rgb(157, 165, 180); /* Titlebar text and icons color */
--titlebar-color-inactive: rgb(107, 113, 125); /* Titlebar text and icons color when focus lost */
--titlebar-icon: url('../../icon.svg'); /* Your App's icon (default looking for a incon.svg in your parent folder (not in NeutronDesk)) */
/* InDepth */
--titlebar-font: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif; /* Titlebar's default font */
--titlebar-font-size: 13px; /* Titlebar's default font size */
--titlebar-ctrl-hover-bg: hsla(0,0%,100%,.1); /* background of a control icon on hover */
--titlebar-ctrl-close-hover-bg: rgba(232,17,35,.9); /* background of the close control icon on hover */
--titlebar-ctrl-close-hover-clr: #fff; /* color of the close control icon on hover */
/* Windows style (not recommended to change) */
--titlebar-height: 30px; /* Default windows titlebar height */
--titlebar-icon-size: 35px; /* Default windows titlebar icon size */
}
/* App content */
.app-content {
padding: 4px; /* default value */
}Remember: if you want to change the titlebar's title, just change the page's title <title>Page title</title>, and it's dynamically updated!
Coming soon.
documentation page (not avalible for the moment)