title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
tags: [[$:/tags/Stylesheet]]
code-body: yes

\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]]

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html

<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>

	@media (min-width: <<sidebarbreakpoint>>) {

		.tc-sidebar-resizer {
			position: fixed;
			top: 0;
			height: 100%;
			width: <<sidebar.resizer.width>>;
			transition: opacity 100ms;
			opacity: 0.1;
			cursor: ew-resize;
			background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
		}

		.tc-sidebar-resizer:hover {
			opacity: 0.6;
		}

		@media (pointer: coarse) {

			.tc-sidebar-resizer.tc-main-sidebar-resizer {
				background: <<colour muted-foreground>>;
			}

			.tc-sidebar-resizer.tc-main-sidebar-resizer:hover {
				opacity: 0.1;
			}
		}

		.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
			height: 100%;
		}

		.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
		}

		.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			min-height: 100%;
			z-index: -1;
		}

		.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
			flex-direction: row;
		}

		.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
			position: relative;
		}

		.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
			touch-action: none;
			user-select: none;
		}

		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active {
			z-index: 801;
		}

		.tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active {
			z-index: 802;
		}

		.tc-sidebar-resizer-pointermove.tc-resizer-active {
			z-index: 803;
			cursor: ew-resize;
		}

		.tc-sidebar-resizer.tc-resizer-active {
			opacity: 0.6;
		}

		<%if [[$:/state/sidebar/resizing]is[tiddler]] %>

			@media (pointer: coarse) {

				.tc-sidebar-resizer.tc-main-sidebar-resizer {
					opacity: 0.25;
				}
			}

		<% endif %>

		<%if [<set.storywidth.storyright>match[yes]] %>

			.tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
			}

			.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: auto;
				right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
			}

		<% endif %>

		<%if [<set.sidebarwidth>match[yes]] %>

			.tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
			}

			.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: auto;
				right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
			}

		<% endif %>

		<%if [<set.centralised>match[yes]] %>

			.tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
			}

			.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
				left: auto;
				right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
			}

		<% endif %>

		<%if [{$:/state/sidebar}match[no]] %>

			.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer.tc-main-sidebar-resizer {
				display: none;
			}

		<% endif %>

	}

	@media (max-width: <<sidebarbreakpoint-minus-one>>) {

		.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer.tc-main-sidebar-resizer {
			display: none;
		}
	}

<% endif %>

.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
.tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
	width: calc(100% - 3px);
}