CODEWITHSUNDEEP
htmlcsselectrontitlebar
Plamen Dobrev
Plamen Dobrev

Reputation: 91

Electron: Custom Titlebar: Buttons don't change their CSS properties back to normal (after mouse hover) when the cursor leaves the app

The behaviour of the buttons after the cursor leaves the app

Greetings! This is my second time posting today, but that's how people learn, right? Anyway! I am creating an app with Electron and I want to create a custom title bar. I have been successful but there is a small detail that kind of bothers me. I want the buttons to change their opacity when the mouse hovers them but when the cursor leaves the app after hovering the buttons, they don't change. Instead, I have to go to the app again, hover the button again and finally see the right behaviour. Is there a way to fix this? It's not that fatal, but I am trying to make my app look good and pleasant to the eye as much as I can!

HTML:

<div class="titlebar">
    <div class="dragzone"></div>
    <h1>Dashboard - Wealm</h1>
    <button id="closeApp">x</button>
    <button id="minApp">-</button>
</div>

CSS:

.titlebar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 29px;
    overflow: hidden;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
}

.titlebar .dragzone {
    -webkit-app-region: drag;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 990px;
    height: 29px;
}

.titlebar h1 {
    float: left;
    opacity: 0.85;
    margin: 4px 0 0 43.5%;
    font-family: Jost-400-Book;
    font-size: 12pt;
}

.titlebar #closeApp {
    font-weight: bold;
    opacity: 0.55;
    float: right;
    background: none;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    margin-top: 2px;
}

.titlebar #minApp {
    font-weight: bold;
    opacity: 0.55;
    float: right;
    background: none;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    margin-top: 2px;
}

.titlebar #closeApp:hover {
    opacity: 1;
}

.titlebar #minApp:hover {
    opacity: 1;
}

Upvotes: 0

Views: 644

Answers (1)

Plamen Dobrev
Plamen Dobrev

Reputation: 91

Great news! I did found a solution! What I did - First of all, I replaced the content inside the buttons with paragraphs. It's the same text but in paragraph tags. I set the overflow property of the buttons to visible, in order to be able to set the height of the buttons to 0 without hiding the paragraphs themselves. Then I just played around with margins. It's up to you!

.titlebar #closeApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    padding-right: 0px;
    margin-right: 8px;
    margin-top: 8px;
}

.titlebar #closeApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

.titlebar #minApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    margin-top: 8px
}

.titlebar #minApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

Have a great day! Let me know if you have a question or the solution just doesn't work for you!

Upvotes: 2

Related Questions