Need help getting borders to look right for custom theme

[robbyph]

So, I really like the default theme, but I also really like how the tactile theme scoots over the child tabs, instead of leaving them at the same length as the parent tabs. I got this all up and working, however, I still have one tiny issue.

When a tab that is below a given child tab in the hiearchy is at a higher level than that child tab, there's a small little gap that forms, due to the nature of my CSS implementation, I'm just not sure how else to do it. Here's a picture of the issue, with my css. Would really appreciate any suggestions on how to remedy this. Small little bugs like this kill me!

See what I mean? How that bottom tab has just a little bit of its border cut off? I have thought about applying a top border to it, but doubling up borders looks weird and isn't something I wanna do :/

CSS

.Tab {
    cursor: pointer;
    background: #2b2a33;
    -webkit-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.Tab .title {
    font-family: Verdana, sans-serif;
    font-size: .91rem;
}

.Tab .fav {
    margin-left: 4px;
    margin-right: 12px;
}

.Tab .placeholder {
    left: 32px;
}

.Tab .placeholder svg {
    fill: #ffffff;
}

.Tab .fav img {
    left:30px;
}

.Tab .exp {
    opacity:1;
    transform: scale(1,1);
    z-index: 5;
}

.Tab .exp svg{
    height:18px;
    width:18px;
}

.Tab .lvl-wrapper::before{
    left: -12px;
    width:5px;
    height:5px;
}

.Tab .fav .child-count {
    right:-6px;
    bottom: -7px;
    font-size: .85rem;
} 

.TabsPanel .container div .Tab{
    border-bottom: 1px solid #c5c5c544;
    border-left-width: 0;
}

.TabsPanel .container div .Tab:first-child {
    border-top: 1px solid #c5c5c544;
}

.TabsPanel .container div .Tab:selected{
    border-bottom: 1px solid #242424ff;
    border-left-width: 0;
}

.Tab .fav img {
    opacity: 1 !important;
}

.Tab .audio {
    left:14px;
    top:-8px;
}

.Tab[data-audible] .t-box {
    left:10px
}

.Tab .progress-spinner {
    bottom: 10px;
    margin-right:0;
    margin-left: 0;
    left: 16px;
    z-axis: 100;
}

/* These are all classes for actually applying the animation to the tabs */
.Tab[data-lvl][data-lvl="0"],
.Tab[data-lvl][data-lvl="1"],
.Tab[data-lvl][data-lvl="2"],
.Tab[data-lvl][data-lvl="3"],
.Tab[data-lvl][data-lvl="4"] {
  animation: fadeIn 0.3s ease-in-out forwards;
}

/* Keyframes for the fadeIn animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for the fadeOut animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Specificity boost for .tab-leave to override other styles */
.Tab[data-lvl][data-lvl="0"].tab-leave,
.Tab[data-lvl][data-lvl="1"].tab-leave,
.Tab[data-lvl][data-lvl="2"].tab-leave,
.Tab[data-lvl][data-lvl="3"].tab-leave,
.Tab[data-lvl][data-lvl="4"].tab-leave {
    opacity: 0; 
    transform-origin: none;
    animation: fadeOut 0.5s ease-in-out forwards !important;
}

.Tab[data-lvl][data-lvl="0"].tab-leave.tab-leave-active,
.Tab[data-lvl][data-lvl="1"].tab-leave.tab-leave-active,
.Tab[data-lvl][data-lvl="2"].tab-leave.tab-leave-active,
.Tab[data-lvl][data-lvl="3"].tab-leave.tab-leave-active,
.Tab[data-lvl][data-lvl="4"].tab-leave.tab-leave-active {
    opacity: 0; 
    animation: fadeOut 0.5s ease-in-out forwards !important;
}


.Tab[data-loading] .fav img{
    mask: none;
}

.Tab[data-loading] .placeholder{
    mask: none;
}

.Tab .close svg{
    height:20px;
    width: 20px;
    fill: #c5c5c5ff;
}

.Tab .close:hover svg{
    fill:#ffffff !important;
}

.Tab .close {
    margin-right: 2px;
}

.Tab .t-box {
    left: 26px;
    margin-right: 32px;
}

.Tab[data-lvl="1"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="2"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="3"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="4"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="5"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="1"] {
    margin-left: var(--tabs-indent);
    padding-left: 0;
    border-left: 
}

.Tab[data-lvl="1"] .close {
    margin-right: 25px;
}

.Tab[data-lvl="1"] .t-box{
    margin-right: 57px;
}

.Tab[data-lvl="2"] {
    margin-left: calc(var(--tabs-indent) * 2);
    padding-left: 0;
}

.Tab[data-lvl="2"] .close {
    margin-right: 48px;
}

.Tab[data-lvl="2"] .t-box{
    margin-right: 79px;
}

.Tab[data-lvl="3"] {
    margin-left: calc(var(--tabs-indent) * 3);
    padding-left: 0;
}

.Tab[data-lvl="3"] .close {
    margin-right: 71px;
}

.Tab[data-lvl="3"] .t-box{
    margin-right: 101px;
}

.Tab[data-lvl="4"] {
    margin-left: calc(var(--tabs-indent) * 4);
    padding-left: 0;
}

.Tab[data-lvl="4"] .close {
    margin-right: 94px;
}

.Tab[data-lvl="4"] .t-box{
    margin-right: 123px;
}

.Tab[data-lvl="5"] {
    margin-left: calc(var(--tabs-indent) * 5);
    padding-left: 0;
}

.Tab[data-lvl="5"] .close {
    margin-right: 117px;
}

.Tab[data-lvl="5"] .t-box{
    margin-right: 145px;
}

[zelch]

The places that I have seen this done well seem to do one of two things, from memory anyhow:

Play tricks with the location of the top border so that it exactly overlaps the bottom border.

Or where it is practical, use the selectors for before/after siblings to use a different styles for the borders in this specific case.

[robbyph]

That makes sense. I guess, practically, how do I make it exactly overlap the bottom border so that it doesn't cause the total weight of the border to be doubled, making it darker than I want?

[robbyph]

Figured it out for anyone who's looking in the future.

I removed the following lines of CSS:

.TabsPanel .container div .Tab{
    border-bottom: 1px solid #c5c5c544;
    border-left-width: 0;
}

.TabsPanel .container div .Tab:first-child {
    border-top: 1px solid #c5c5c544;
}

.TabsPanel .container div .Tab:selected{
    border-bottom: 1px solid #242424ff;
    border-left-width: 0;
}

.Tab[data-lvl="1"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="2"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="3"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="4"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

.Tab[data-lvl="5"] .drag-layer {
    border-left: 1px  solid #c5c5c544;
}

And replaced it all with the following:

.TabsPanel .container div .Tab{
    outline: 1px solid #6a696c;
}

.Tab[data-lvl="0"] {
    z-index: 10;
}

.Tab[data-lvl="1"] {
    z-index: 9;
}

.Tab[data-lvl="2"] {
    z-index: 8;
}

.Tab[data-lvl="3"] {
    z-index: 7;
}

.Tab[data-lvl="4"] {
    z-index: 6;
}

.Tab[data-lvl="5"] {
    z-index: 5;
}

The z-index stuff is to prevent some weird overlap issues that were happening for me, where the child tabs would slightly overlap the parent tabs once the outline was added. If i tried just adding 'margin-top: 1px' to all of the tabs, then some really weird stuff would happen, where dragging and dropping tabs between each other wouldn't properly work.