tabCenterReborn.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;
}

#newtab {
    margin-left: 6px;
}

#settings {
    margin-right: 2px;
}

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

#tablist-wrapper {
    height: auto;
    padding-right: 5px;
    border-right: 1px solid var(--tablist-separator);
    /* adds padding above tabs to make the spacing even */
    padding-top: 5px;
}

/* fix glitch with spacing in-between pinned tabs */
#pinnedtablist:not(.compact) {
    display: flex;
    flex-direction: column;
}

#tablist-wrapper::after,
#pinnedtablist:not(.compact):has(*)::after {
    content: "";
    margin: 2px 0;
    border: 1px solid var(--tablist-separator);
}

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

#pinnedtablist:not(.compact) .tab,
#tablist .tab {
    padding: 0;
    border: 0 solid transparent;
    margin: 2px 0 0 0;
    background: transparent;
}

.tab .tab-drag-overlay {
    border-radius: 4px;
    z-index: -1;
}

.tab:not(.active):hover .tab-drag-overlay {
    background-color: var(--tab-hover-background);
}

.tab.active .tab-drag-overlay {
    background-color: var(--tab-active-background);
}

#pinnedtablist:not(.compact) .tab.drag-highlight-next,
#tablist .tab.drag-highlight-next {
    border-bottom-width: var(--tab-height-compact);
    height: calc(var(--tab-height-compact) * 2) !important;
    max-height: calc(var(--tab-height-normal) + var(--tab-height-compact)) !important;
}

#pinnedtablist:not(.compact) .tab.drag-highlight-previous,
#tablist .tab.drag-highlight-previous {
    border-top-width: var(--tab-height-compact);
    height: calc(var(--tab-height-compact) * 2) !important;
    max-height: calc(var(--tab-height-normal) + var(--tab-height-compact)) !important;
}

#pinnedtablist:not(.compact) .tab:before,
#tablist .tab:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    width: 6px;
}

#newtab::after {
    content: attr(title);
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
}

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


/* the @media rule only allows these settings apply when the sidebar is expanded */
@media (min-width: 49px) {
    /* Move close button to left side */
    /*.tab-close {
        left: 0;
        margin-left: 3px;
    }*/

    /* Fix title gradient */
    /*#tablist .tab:hover > .tab-title-wrapper {
        mask-image: linear-gradient(to left, transparent 0, black 2em);
    }*/

    /* Move tab text to right when hovering to accomodate for the close button */
    /*#tablist .tab:hover > .tab-title-wrapper {
        margin-left: 28px;
        transition: all 0.2s ease;
    }*/

    /* Move favicon to right when hovering to accomodate for the close button */
    /*#tablist .tab:hover > .tab-meta-image {
        padding-left: 25px;
        transition: all 0.2s ease;
    }*/
}


/*** Move container indicators to left ***/
#tablist-wrapper {
    margin-left: 0px;
    padding-left: 6px;
}
#tablist,
#pinnedtablist:not(.compact) {
    margin-left: -6px;
    padding-left: 6px;
}
.tab {
    overflow: visible;
}
#tablist .tab[data-identity-color] .tab-context,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
    box-shadow: none !important;
}
#tablist .tab[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 5px 5px 0;
    background: var(--identity-color);
    transition: inset .1s;
}
#tablist .tab.active[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before {
    top: 1px;
    bottom: 1px;
}

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

/* hide certain items when collapsed */
@media (max-width: 64px) {
    /* using 64px minimum width to give the tab favicons more room during the transition */
    .tab-close,
    .tab-pin {
        visibility: collapse !important;
    }

    /* hide scrollbar when sidebar is collapsed */
    #tablist {
        scrollbar-width: none;
    }
}

@media (max-width: 48px) {
    #settings-icon,
    #tablist-wrapper .tab-title-wrapper,
    #newtab::after,
    #settings {
        visibility: hidden !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;
}

/* Prevent showing scrollbar when adding/removing tabs */
#tablist-wrapper:not(.can-scroll-bottom):not(.can-scroll-top) #tablist {
    overflow: hidden;
}

/*** Prevent Favicon-only pinned tabs from wrapping ***/
#pinnedtablist.compact {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
}
#pinnedtablist.compact:not(:hover):not(:focus-within) { /* Prevent scrollbar from showing when transitioning */
    scrollbar-width: none;
}
#pinnedtablist.compact .tab {
    min-width: 36px;
}
@media (max-width: 48px) {
    #pinnedtablist.compact {
        overflow-x: clip /* Clip always makes it reset scroll position */
    }
    #pinnedtablist.compact .tab.active {
        order: -1
    }
}

/*** Better support for non-compact mode ***/
#tablist-wrapper:not(.shrinked) .tab-meta-image {
    display: flex;
    align-items: center;

    width: 58px;
    border: 0 !important;
    margin-right: 4px;
    border-radius: inherit;
    background-position: center;
    min-width: 0px !important;
    background-color: var(--toolbar-background) !important;
    transition: margin .4s;
}
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
    transition: margin .1s;
    z-index: 2;
}
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
    top: unset !important;
    bottom: 8px;
    left: 25px !important;
    z-index: 4;
    transition: inset .1s;
}

/* If you want to disable the website previews,
comment out the @media line below and its closing bracket */
@media (max-width: 49px) {
    #tablist-wrapper:not(.shrinked) .tab-meta-image {
        background-color: inherit !important;
        border-width: 0 !important;
        box-shadow: none !important;
        height: 0 !important;
        width: 26px;
        margin-right: 0px;
    }
    #tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
        background-color: transparent !important;
        margin-top: 0 !important;
        margin-left: 3px !important;
        box-shadow: none !important;
    }
    #tablist-wrapper:not(.shrinked) .tab-icon-overlay {
        bottom: 12px;
        left: 16px !important;
    }
}

/* middle click newtab workaround */

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

/* moves the new tab button to the original position */
#tablist-wrapper {
    margin-bottom: -100vh;
}

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