Top panel issues when using Elementary OS

[skewty]

I added this to to the bottom of gtk.css to improve things.

/***************************************
 * Panel adjustments for Elementary OS *
 ***************************************/

.panel {
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 100ms ease-in-out;
}
.panel image {
    margin-right: 8px;
}
.panel.maximized label {
    color: white;
}
.panel.maximized {
    color: white; /* affects the search icon */
    background-color: #404040;
    border-bottom: 1px solid black;
}
menubar.panel, .panel menubar {
    /* removes the lingering underline from labels in the top panel */
    box-shadow: none;
    border: none;
}

See the before and after below:

Before

After

I personally prefer a little more font weight in the panel when maximized so I use this:

/***************************************
 * Panel adjustments for Elementary OS *
 ***************************************/

.panel {
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 100ms ease-in-out;
}
.panel image {
    /* affects the search icon */
    margin-right: 8px;
}
.panel.maximized label, .panel.maximized image {
    color: white;
}
.panel.maximized {
    background-color: #404040;
    border-bottom: 1px solid black;
    font-weight: bolder;
}
menubar.panel, .panel menubar {
    /* removes the lingering underline from labels in the top panel */
    box-shadow: none;
    border: none;
}

[skewty]

I just noticed the margin-right: 10px in .panel. I don't think it is required. What I wanted with that is accomplished in .panel image.