I'm not sure if this is a design choice, but the screenshots gave me an impression that it's not.
The Unity panel bgcolor is much lighter than title/headerbar, and this results in a sort of inconsistency especially when a window is maximized, and Unity top panel also serves as the title/headerbar.
So I thought a minor tweak could produce a more consistent appearance.
The section I've changed in the file unity.css is this:
UnityPanelWidget,
.unity-panel {
border-width: 0 0 1px 0;
border-style: solid;
border-color: @panel_bg_color;
background-color: @panel_bg_color;
background-image: none;
color: @panel_fg_color;
}
.unity-panel.menubar,
.unity-panel .menubar {
}
.unity-panel.menuitem,
.unity-panel .menuitem {
border-width: 0 1px;
color: @panel_fg_color;
}
.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
background-image: none;
color: shade(@panel_fg_color, 1.08);
}
UnityPanelWidget,
.unity-panel {
border-width: 0 0 1px 0;
border-style: solid;
border-color: @titlebar_bg_color;
background-color: @titlebar_bg_color;
background-image: linear-gradient(to bottom,
shade(@titlebar_bg_color, 1.15),
shade(@titlebar_bg_color, 1.1)
);
color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
}
.unity-panel.menubar,
.unity-panel .menubar {
}
.unity-panel.menuitem,
.unity-panel .menuitem {
border-width: 0 1px;
color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
}
.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
background-color: @titlebar_bg_color;
background-image: linear-gradient(to bottom,
shade(@titlebar_bg_color, 1.15),
shade(@titlebar_bg_color, 1.1)
);
color: mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
}
Now I'm not 100% sure if the Unity top panel should better have a bottom border or not...