Hey guys. I’m new to CSS but I’ve been absorbing as much as I can from W3Schools tutorial on its formatting. I’ve mostly been successful with tweaking my styles.css except for this one thing.
I have the workspaces bar set-up to change its width based on how many active workspaces there are. Its background is transparent, but has a 5px border. The active workspace button has a fully-opaque background and no margins. As you can hopefully see from the attached image, there is a tiny gap between the button and the border, all the way around the button. As of yet, I haven’t found a selector that can fill that gap while maintaining the transparency of the workspaces background. I’m wondering if anyone knows of any workarounds to get rid of that gap.
This is the first half of my style.css file, which contains the relevant workspaces selectors:
*{
/* otf-font-awesome is required to be installed for icons */
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
border: none;
}
button:hover {
box-shadow: none;
text-shadow: none;
background: none;
transition: none;
}
window#waybar {
margin: 2px;
background: transparent;
color: transparent;
}
window#waybar.hidden {
opacity: 0.2;
}
/* This is the main, expandable bar for workspaces */
#workspaces {
padding: 0px;
min-width: 26px;
margin-left: 12px;
margin-top: 8px;
margin-bottom: 0px;
border: 5px solid #b00000;
border-radius: 26px;
background-color: transparent;
}
/* This is the currently-active workspace button */
#workspaces button.active {
background-color: #b00000;
color: #000000;
border: none;
}
/* These are the individual workspace buttons, inactive */
#workspaces button {
padding: 0px;
border-radius: 26px;
min-width: 26px;
font-size: 16px;
background-color: rgba(112, 0, 0, 0.5);
color: #000000;
}
/* Effects when the cursor is hovered over a button */
#workspaces button:hover {
transition: 1s;
background-color: #5397d5;
border: none;
}
Any pointers are appreciated.