My custom CSS for Tab Center Reborn on Firefox

tab-center-reborn.css

/* Overwrite some colours */
:root {
    --tab-separator: transparent;
    --tab-selected-line: transparent;
    --tablist-separator: #cccccc;
    --overflow-indicator-border: #333333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #1c1b22;
        --icons: rgb(251,251,254);
        --tab-separator: transparent;
        --tab-active-background: rgb(66,65,77);
        --tab-active-text: rgb(251,251,254);
        --tab-text: #fbfbfe;
        --toolbar-background: rgb(43,42,51);
        --toolbar-text: rgb(251, 251, 254);
        --input-background: rgb(28,27,34);
        --input-border: transparent;
        --input-background-focus: rgb(66,65,77);
        --input-selected-text: rgb(251,251,254);
        --input-text: rgb(251,251,254);
        --input-text-focus: rgb(251,251,254);
        --identity-color-toolbar: rgb(251,251,254);
        --tablist-separator: #333333;
        --overflow-indicator-border: #cccccc;
    }
}

/* fix autoscrolling bug when middle clicking */
:root,
body {
    overflow: hidden;
}

/* Move topmenu to bottom */
#topmenu {
    order: 2;
    background: transparent;
    border: none;
}

/* Hide filterbox */
#filterbox-icon,
#filterbox-input {
    display: none;
}

#newtab {
    margin-left: 4px;
}

#settings {
    margin-right: 4px;
}

#tablist-wrapper {
    height: auto;
    margin-inline: 8px;
    /* adds margin above tabs to make the spacing even */
    margin-top: 4px;
    /* moves the new tab button to the original position */
    margin-bottom: -100vh;
}

/* moves the new tab button separator to the original position */
#tablist-wrapper::after {
    transform: translateY(-100vh);
}

#pinnedtablist {
    padding-bottom: 4px;
    margin-bottom: 4px;
    gap: 2px;
}

#pinnedtablist .tab {
    min-width: 36px;
}

#tablist-wrapper::after {
    content: "";
    margin-bottom: 4px;
    border: 1px solid var(--tablist-separator);
}

#newtab {
    flex-grow: 1;
    margin-right: 2px;
    margin-left: 2px;
    padding-left: 10px;
    min-width: 36px;
    width: 100%;
}


#newtab::after {
    content: "New tab";
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
}

#newtab-icon {
    min-width: 16px;
}

.tab,
.tab.active {
    border-radius: 6px;
    border: none !important;
    margin: 2px 0;
}

.tab.active {
    border: solid 1px var(--tab-selected-line) !important;
    box-shadow: none !important;
}

#pinnedtablist .tab,
#tablist .tab {
    padding: 0;
}

#tablist,
#pinnedtablist:not(.compact) {
    margin-left: -6px;
    padding-left: 6px;
    padding-bottom: 6px;
}

/* center favicons within the tab */
#tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image {
    margin-left: 6px !important;
}

/* Use mask for overflow instead of shadows */
.can-scroll-top #tablist {
    mask: linear-gradient(transparent, black 40px);
}
.can-scroll-bottom #tablist {
    mask: linear-gradient(black calc(100% - 40px), transparent);
}
.can-scroll-bottom.can-scroll-top #tablist {
    mask: linear-gradient(transparent, black 40px calc(100% - 40px), transparent);
}
#topshadow, #bottomshadow {
    display: none;
}

/* allows the #spacer element to take up more space */
#spacer {
    min-height: 100vh;
}