Avoid accidental tab closing - Hide [x] on inactive tabs - CSS hack

Share & showcase
5

This is great - thank you for sharing!

I’ve also developed a snippet to improve tab-management QOL:

  • Shrinks unpinned tabs slightly
  • Shrinks pinned tabs even more
  • Hides the ‘unpin’ button on pinned tabs; I instead use the command palette or a hotkey to unpin a tab
  • Applies a colour filter to pinned tabs so they stand out.

I’ll add your snippet to my own later - cheers.

Anyway, here’s mine. I’m very new to this so any feedback will be graciously received.

Edit: I forgot to mention this initially, but the person who posted the original snippet I built upon should be credited: Shrink the size of pinned tabs

/* Variables */
body {
    /* Variables to apply filters */
    /* Modify these values to change colour, saturation and brightness*/
    /* Tab title */
    --pinnedtab-title-hue-rotate: 5.00deg;
    --pinnedtab-title-color-sat: 1.20;
    --pinnedtab-title-brightness: 0.80;

    /* Background */
    --pinnedtab-bg-hue-rotate: -5.00deg;
    --pinnedtab-bg-color-sat: 1.30;
    --pinnedtab-bg-brightness: 1.50;

    /* Change these values to modify the maximum width of both pinned and unpinned tabs*/
    --tab-width-unpinned: 145px;
    --tab-width-pinned: 95px;

    /* Change this value to modify the height of tabs in the tab bar. */
    /* Larger values will shrink the tab bar. */
    --custom-tab-padding: 0px;

    /* Default font size: 13px */
    /* Default font weight: 500 */
    /* Change these values to modify the font size of the page titles shown on tabs*/
    --custom-tab-font-size: 12px;
    --custom-tab-font-weight: 400;
}

/* Variables - Mobile */
body.is-mobile{

}

/* Hide tab file icon */
/*
.mod-root .workspace-tab-header-inner-icon{
    display: none !important;
}
*/

/* Resize tab file icon on mobile */
.is-mobile .mod-root .workspace-tab-header-inner-icon{
    --icon-size: 12px;
    --icon-stroke: 2px;
}

/* Tab file icon spacing */
.workspace .mod-root .workspace-tab-header-inner-icon {
    padding-inline-end: 2px;
}

/* Tab file icon spacing on mobile  */
.is-mobile .workspace .mod-root .workspace-tab-header-inner-icon {
    padding-inline-end: 2px;
}

/* Hide pin icon on pinned tabs */
.mod-root .mod-pinned,
.workspace-tab-header-status-icon.mod-pinned{
  display: none;
}

/* Apply color filter to pinned tab title */
.workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title { 
    filter: hue-rotate(var(--pinnedtab-title-hue-rotate)) saturate(var(--pinnedtab-title-color-sat)) brightness(var(--pinnedtab-title-brightness)) !important; 
}

/* Apply color filter to pinned tab background*/
.workspace-tab-header-inner:has(.mod-pinned) { 
    filter: hue-rotate(var(--pinnedtab-bg-hue-rotate)) saturate(var(--pinnedtab-bg-color-sat)) brightness(var(--pinnedtab-bg-brightness));
}

/* Resize tab height on desktop*/
body:not(.is-mobile) .workspace-tab-header-container {
    padding-top: var(--custom-tab-padding);
}

/* Resize unpinned tabs */
.workspace-tab-header {
    /* Resize tabs*/
    max-width: var(--tab-width-unpinned) !important;
}

.workspace-tab-header-inner-title {
    font-size: var(--custom-tab-font-size);
    font-weight: var(--custom-tab-font-weight);
}

/* Shrink pinned tabs and hide titles */
.workspace-tab-header:has(.mod-pinned) { 
    /* Resize tabs if pinned */
    max-width: var(--tab-width-pinned) !important; 
  
    /* hide the title of pinned tabs */
    /* & .workspace-tab-header-inner-title {
      display: none;
    } */
  }
  
/* Shrink pinned tabs and hide titles */
/* .workspace-tab-header:has(.mod-pinned) { */
    /* shrink if pinned */
    /* max-width: 60px !important; */
    
    /* also hide the title of pinned tabs */
    /* & .workspace-tab-header-inner-title {
      display: none;
    }
} */
1 Like