Hi there! I could use some assistance :) I have an Electron app and I'm working on the title bar. I would like to center the title, but I'm not sure how to do it. Can anyone provide guidance on this? Also, since I am a beginner, I'm unsure if the current method of creating the Title bar is ideal. Any feedback on that would be greatly appreciated as well. (And if I may ask for your kindness once more, could someone explain how to create the double button with "valider"? It will be very helpful for future reference.
Your help is much appreciated!
Html:
<div id="title-bar">
<button id="close-btn" class="tb-buttons">
<img src="Images/Close.png" />
</button>
<p id="title">CharactersPalette</p>
<button id="eye-btn" class="tb-buttons">
<img src="Images/Hide.png" />
</button>
<button id="min-btn" class="tb-buttons">
<img src="Images/Min.png" />
</button>
</div>
Css:
/* ~~~~~~~~~~~~~ TitleBar Styling ~~~~~~~~~~~~ */
* {
margin: 0px;
padding: 0px;
border: 0px;
-webkit-user-select: none;
-webkit-app-region: no-drag;
}
#title-bar {
width: 100%;
height: 30px;
-webkit-app-region: drag;
background-color: #21252b;
}
#title-bar > button {
height: 30px;
width: 34px;
display: inline-block;
background: transparent;
outline: none;
transition: 0.15s linear;
}
#title-bar > button:hover {
background-color: #d52015;
}
#title-bar > #title {
display: inline-block;
color: #f8f4f4;
}
#title-bar > #eye-btn,
#title-bar > #min-btn {
height: 30px;
width: 34px;
display: inline-block;
background: transparent;
float: right;
transition: 0.15s linear;
}
#title-bar > #eye-btn:hover,
#title-bar > #min-btn:hover {
background-color: #3e4146;
}
#title-bar > button > img {
height: 18px;
width: 18px;
vertical-align: middle;
}