css Userchrome用于最小的仅限图标的TST侧边栏

Posted 2021-05-13

/* Hide main tabs toolbar */
#TabsToolbar {
	visibility: collapse;
}
/* Sidebar min and max width removal */
#sidebar {
	max-width: none !important;
	min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
	display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
	--thin-tab-width: 30px;
	--wide-tab-width: 200px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
	min-width: var(--wide-tab-width) !important;
	max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
	position: relative !important;
	transition: all 300ms !important;
	min-width: var(--thin-tab-width) !important;
	max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
	transition: all 300ms !important;
	min-width: var(--wide-tab-width) !important;
	max-width: var(--wide-tab-width) !important;

	/* Negative right-margin to keep page from being pushed to the side. */
	margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}