Just a quick QOL css hack:
I don’t know about you, but I often have too many tabs open.
When there are many inactive tabs open, a large portion of the tab can be taken up by the close button, which also helpfully hides until you hover over it, making it likely (for me at least) that instead of opening the tab, I close it.
I’ve learned that you can helpfully undo closing a tab with /⌘ + + T, but it’d be faster just not to accidentally close the tab in the first place.
For me, I’m more likely to click a tab to open the pane, so the close button is less important.
This CSS snippet disables close buttons on inactive tabs, so to close an inactive tab you have to click it to enable it, then click again to close as normal.
/* Hide close button for ALL tabs */
.workspace-tab-header-inner div[aria-label="Close"] {
display: none !important;
}
/* Show close button for active tabs by blocking the above rule */
.workspace-tab-header.is-active.mod-active div[aria-label="Close"] {
display: block !important;
}
Love this as well, and have made a slight extension:
/* Hide close button for ALL tabs */
.workspace-tab-header-inner div[aria-label="Close"] {
display: none !important;
}
/* Show close button for active tabs by blocking the above rule */
/* but only for markdown/canvas/graph tabs, ie. don't show for sidebar panels */
.workspace-tab-header.is-active.mod-active[data-type*="markdown"] div[aria-label="Close"],
.workspace-tab-header.is-active.mod-active[data-type*="canvas"] div[aria-label="Close"],
.workspace-tab-header.is-active.mod-active[data-type*="graph"] div[aria-label="Close"],
.workspace-tab-header.is-active.mod-active[data-type*="image"] div[aria-label="Close"]
{
display: block !important;
}
With the original script the X close button also turns up for the sidebar tools like the file explorer, search etc when they’re focused as well (there’s still the Close under the right click menu for them, and that’s what I prefer). So this just shows the close button for tabs that have specific data types ie. your content in theme. There’s probably a more scalable way of doing this, but I couldn’t see a suitable generic attribute or property to target for it, just I just went with a list of the data-types that I use.
Have settled on a simpler solution: this only shows the when the tab is NOT in a sidebar (means you can put other notes into the sidebars as reference notes, and not have the turn up there)
/* Hide close button for ALL tabs */
.workspace-tab-header-inner div[aria-label="Close"] {
display: none !important;
}
/* show close button for active non-sidebar tabs */
.mod-root .workspace-tab-header.is-active.mod-active div[aria-label="Close"] {
display: block !important;
}
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;
}
} */
