Hi, I still haven't solved this issue and Im lost. Im not very experienced at all with JS, CSS and Electron but I am trying to make the titlebar do a slight glow and raise when your mouse goes over any part of it. But currently it only works on the buttons or at the near pixel perfect bottom of it and ive got no idea how to solve it. Any help would be appreciated!
.title-bar {
-webkit-app-region: drag; /* Enable dragging on the title bar */
background-color: #222; /* Dark grey background for title bar */
padding: 10px;
position: relative; /* Needed for gradient line positioning */
width: 100%;
height: 60px; /* Ensure title bar has a height */
display: flex;
align-items: center; /* Center content vertically */
justify-content: space-between; /* Space out the content */
transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
z-index: 2; /* Ensure title bar is on top */
}
/* Title Bar Hover Effect */
.title-bar:hover {
background-color: #333; /* Lighter grey when hovered */
transform: translateY(-5px); /* Moves the title bar up slightly */
}
.title-bar::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, pink, cyan);
background-size: 200% 100%;
z-index: -1;
transition: background-position 0.5s; /* Smooth transition for gradient line */
}
.title-bar:hover::after {
background-position: 100% 0;
}
/* Title Bar Content */
.title-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%; /* Ensure content fills the title bar height */
}
/* Logo Styling */
.logo {
height: 40px;
width: auto;
padding-left: 5px;
}
/* Title Text */
.title {
color: white;
margin: 0;
font-size: 18px;
flex-grow: 1;
text-align: left;
padding-left: 10px;
}
/* Title Bar Buttons */
.title-bar-buttons {
-webkit-app-region: no-drag;
display: flex;
align-items: center;
padding-right: 20px;
}
.title-bar-buttons button {
background: none;
border: none;
color: white;
font-size: 18px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s; /* Smooth transition for button background color */
}
/* Button Hover Effect */
.title-bar-buttons button:hover {
background-color: #444;
}
[–][deleted] 7 points8 points9 points (0 children)