obsidian-tabs icon indicating copy to clipboard operation
obsidian-tabs copied to clipboard

[RESOURCE] CSS stuff I've managed with this plugin

Open firinael opened this issue 4 years ago • 1 comments

This is just to make it easier to implement "hide until hover" and stuff like that that's being requested.

/* display headers on hover ONLY WITH TABS (initially based on chrisgrieser/shimmering-focus) */

.plugin-tabs .workspace-leaf {
	border-top: 0 !important;
}

.plugin-tabs .mod-right-split .workspace-tab-header-container,
.plugin-tabs .mod-right-split .workspace-tab-header-container * {
	background-color: var(--background-secondary) !important;
	height: calc(var(--headerheight) + 2px) !important;
}

.plugin-tabs .mod-right-split .view-content {
	border-top: 2px solid var(--interactive-accent);
	margin-top: 1px;
}

.plugin-tabs .workspace-leaf {
	border: 0px !important;
	border-radius: 0px !important;
}

.plugin-tabs .mod-root.workspace-split .workspace-split>div.workspace-leaf:not(.mod-active),
.plugin-tabs .mod-root.workspace-split>div.workspace-leaf:not(.mod-active) {
	border-radius: 0 !important;
	border-right: 0 !important;
	border-left: 0 !important;
	--w2: max(20%, 100%);
}

.plugin-tabs .view-content {
	height: 100% !important;
}

.plugin-tabs .workspace-leaf.mod-active .view-actions {
	padding-right: 2px !important;
}

.plugin-tabs .workspace-leaf:not(.mod-active) .view-header {
	border-bottom: 2px solid var(--interactive-accent) !important;
}

.plugin-tabs .workspace-leaf .view-header {
	transition: .2s;
	text-align: left !important;
	border-left: 0 !important;
}

.plugin-tabs .workspace-split.mod-horizontal .view-header {
	height: var(--headerheight) !important;
}

.plugin-tabs .workspace-leaf:only-of-type .view-header {
	background-color: var(--background-secondary)!important;
	border-bottom: 2px solid var(--interactive-accent)!important;
}

.plugin-tabs .workspace-leaf:only-of-type .view-header:hover,
.plugin-tabs .workspace-leaf:only-of-type .view-header:focus-within {
	background-color: var(--background-primary)!important;
}

.plugin-tabs .workspace-leaf.mod-active .view-header:hover, 
.plugin-tabs .workspace-leaf.mod-active .view-header:focus-within {
	border-bottom: 2px solid var(--interactive-accent) !important;
	transition: .2s !important;
	height: var(--headerheight) !important;
	border-radius: 0px !important;
}

.plugin-tabs .workspace-leaf.mod-active .view-header {
	transition: .2s !important;
	border: none;
	background-color: var(--background-primary);
	display: hidden;
	height: calc(var(--headerheight)/2) !important;
}

.plugin-tabs .workspace-leaf:not(.mod-active) .view-header-title {
	opacity: 1 !important;
}

.plugin-tabs .view-header-icon,
.plugin-tabs .view-action svg,
.plugin-tabs .mod-active .view-header-title {
	opacity: 0;
}

.plugin-tabs .view-header .view-action {
	margin-right: 2px !important;
	margin-left: 6px !important;
	height: calc(var(--headerheight)/2) !important;
	width: 25px !important;
}

.plugin-tabs .view-header:hover .view-header-icon,
.plugin-tabs .view-header:hover .view-action svg,
.plugin-tabs .view-header:hover .view-header-title,
.plugin-tabs .view-header:focus-within .view-header-title,
.plugin-tabs .workspace-split.mod-vertical.mod-root .workspace-split.mod-horizontal .workspace-leaf.mod-active .view-header {
	opacity: 1;
	transition: .2s !important;
}

This is all I've applied and it's not clean, so before using it you'll have to have a proper read, but I've done quite a bit and avoided !importants where reasonable.

firinael avatar Sep 22 '21 23:09 firinael

Great work!

HuangAdam avatar Feb 04 '22 15:02 HuangAdam