diff --git a/core/ui/PageTemplate/sidebar-resizer.tid b/core/ui/PageTemplate/sidebar-resizer.tid
deleted file mode 100644
index 79c99078e..000000000
--- a/core/ui/PageTemplate/sidebar-resizer.tid
+++ /dev/null
@@ -1,53 +0,0 @@
-title: $:/core/ui/PageTemplate/sidebar-resizer
-tags: $:/tags/PageTemplate
-list-after: $:/core/ui/PageTemplate/story
-
-\import $:/core/macros/sidebar-resizer
-\whitespace trim
-
-<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
-
-	<$eventcatcher
-		tag="div"
-		class="tc-sidebar-resizer-pointerdown-eventcatcher"
-		selector=".tc-sidebar-resizer"
-		matchSelector=".tc-sidebar-resizer"
-		$pointerdown=<<sidebar-resizer-pointerdown-actions>>
-		$pointerup=<<sidebar-resizer-pointercancel-actions>>>
-
-		<%if [{$:/state/sidebar}!match[no]] %>
-
-			<$eventcatcher
-				tag="div"
-				class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper"
-				selector=".tc-sidebar-resizer"
-				matchSelector=".tc-sidebar-resizer"
-				$pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
-
-				<$eventcatcher
-					tag="div"
-					selector=".tc-sidebar-resizer-pointermove"
-					matchSelector=".tc-sidebar-resizer-pointermove"
-					class="tc-sidebar-resizer-pointermove-eventcatcher"
-					$pointerup=<<sidebar-resizer-pointercancel-actions>>
-					$pointerleave=<<sidebar-resizer-pointercancel-actions>>
-					$pointerout=<<sidebar-resizer-pointercancel-actions>>
-					$pointercancel=<<sidebar-resizer-pointercancel-actions>>
-					$pointerdown=<<sidebar-resizer-pointercancel-actions>>
-					$touchstart=<<sidebar-resizer-pointercancel-actions>>
-					$pointermove=<<sidebar-resizer-pointermove-actions>>
-					$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
-
-					<div class="tc-sidebar-resizer-pointermove"/>
-
-				</$eventcatcher>
-
-				<div class="tc-sidebar-resizer"/>
-
-			</$eventcatcher>
-
-		<% endif %>
-
-	</$eventcatcher>
-
-<% endif %>
diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
index 7b0bd918a..cfe387fb7 100644
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -51,11 +51,11 @@ title: $:/core/macros/sidebar-resizer
 \procedure sidebar-resizer-pointerdown-actions()
 <%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
 	<$let
-		startStoryLeft={{{ [get.theme.metric[metrics/storyleft]] }}}
-		startStoryRight={{{ [get.theme.metric[metrics/storyright]] }}}
-		startSidebarWidth={{{ [get.theme.metric[metrics/sidebarwidth]] }}}
-		startTiddlerWidth={{{ [get.theme.metric[metrics/tiddlerwidth]] }}}
-		startStoryWidth={{{ [get.theme.metric[metrics/storywidth]] }}}>
+		startStoryLeft={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storyleft]] }}}
+		startStoryRight={{{ [<storyRightTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storyright]] }}}
+		startSidebarWidth={{{ [<sidebarWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/sidebarwidth]] }}}
+		startTiddlerWidth={{{ [<tiddlerWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/tiddlerwidth]] }}}
+		startStoryWidth={{{ [<storyWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storywidth]] }}}>
 		<$action-setfield $tiddler="$:/state/sidebar/resizing"
 			text="yes"
 			widget-node-width=<<tv-widgetnode-width>>
@@ -83,13 +83,16 @@ title: $:/core/macros/sidebar-resizer
 <$let
 	storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}}
 	storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
-	storyMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/storyminwidth>] }}}
-	sidebarMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/sidebarminwidth>] }}}
-	storyPaddingLeft={{{ [get.theme.metric[metrics/storypaddingleft]] }}}
-	storyPaddingLeft={{{ [convert.to.pixels<storyPaddingLeft>] }}}
-	storyPaddingRight={{{ [get.theme.metric[metrics/storypaddingright]] }}}
-	storyPaddingRight={{{ [convert.to.pixels<storyPaddingRight>] }}}
-	storyLeft={{{ [convert.to.pixels<get.theme.metric metrics/storyleft>] }}}
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyminwidth>] }}}
+	storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/sidebarminwidth>] }}}
+	sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
+	storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storypaddingleft]] }}}
+	storyPaddingLeft={{{ [convert.to.pixels<storyPaddingLeftValue>] }}}
+	storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storypaddingright]] }}}
+	storyPaddingRight={{{ [convert.to.pixels<storyPaddingRightValue>] }}}
+	storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyleft>] }}}
+	storyLeft={{{ [convert.to.pixels<storyLeftValue>] }}}
 	clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
 	storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
 	storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
@@ -120,7 +123,7 @@ title: $:/core/macros/sidebar-resizer
 
 		storyWidthResult={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}
 
-		tiddlerWidthResult={{{  [<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<get.theme.metric metrics/tiddlerwidth>compare:number:gteq[0]then<get.theme.metric metrics/tiddlerwidth>]  :else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}>
+		tiddlerWidthResult={{{  [<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<get.theme.metric metrics/tiddlerwidth>compare:number:gteq[0]then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}>
 
 		<$action-setfield $tiddler=<<set.theme.metric metrics/tiddlerwidth>> text=<<tiddlerWidthResult>>/>
 		<$action-setfield $tiddler=<<set.theme.metric metrics/storywidth>> text=<<storyWidthResult>>/>
@@ -144,10 +147,13 @@ title: $:/core/macros/sidebar-resizer
 
 \procedure set-sidebarwidth-actions()
 <$let
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/sidebarminwidth>] }}}
 	sidebarWidthMetric={{$:/state/sidebar/resizing!!sidebar-width-metric}}
-	sidebarMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/sidebarminwidth>] }}}
-	storyLeft={{{ [convert.to.pixels<get.theme.metric metrics/storyleft>] }}}
-	storyMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/storyminwidth>] }}}
+	sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
+	storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyleft>] }}}
+	storyLeft={{{ [convert.to.pixels<storyLeftValue>] }}}
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyminwidth>] }}}
+	storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
 	sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}}
 	clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
 	sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}>
@@ -164,9 +170,11 @@ title: $:/core/macros/sidebar-resizer
 
 \procedure set-centralised-actions()
 <$let
-	storyMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}}
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}}
+	storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
 	storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
-	sidebarMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
+	sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
 	storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
 	dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
 	storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
@@ -179,7 +187,7 @@ title: $:/core/macros/sidebar-resizer
 		storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
 		storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}}>
 
-		<$action-setfield $tiddler="$:/themes/tiddlywiki/centralised/metrics/storywidth" text={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
+		<$action-setfield $tiddler=<<set.theme.metric metrics/storywidth>> text={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
 
 	</$let>
 
@@ -191,18 +199,65 @@ title: $:/core/macros/sidebar-resizer
 \procedure sidebar-resizer-pointermove-actions()
 <%if [[$:/state/sidebar/resizing]!is[missing]] %>
 	<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff=<<get.drag.diff>> startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
-		<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
+		<%if [<tv-set-storywidth-storyright>match[yes]] %>
 			<<set_theme_throttling metrics/storyright>>
 			<<set_theme_throttling metrics/tiddlerwidth>>
 			<<set_theme_throttling metrics/storywidth>>
 			<<set-storywidth-storyright-actions>>
-		<%elseif [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
+		<% endif %>
+		<%if [<tv-set-sidebarwidth>match[yes]] %>
 			<<set_theme_throttling metrics/sidebarwidth>>
 			<<set-sidebarwidth-actions>>
-		<%elseif [{$:/theme}match[$:/themes/tiddlywiki/centralised]] %>
+		<% endif %>
+		<%if [<tv-set-centralised>match[yes]] %>
 			<<set_theme_throttling metrics/storywidth>>
 			<<set-centralised-actions>>
 		<% endif %>
 	</$let>
 <% endif %>
 \end
+
+\procedure sidebar-resizer()
+<$eventcatcher
+	tag="div"
+	class="tc-sidebar-resizer-pointerdown-eventcatcher"
+	selector=".tc-sidebar-resizer"
+	matchSelector=".tc-sidebar-resizer"
+	$pointerdown=<<sidebar-resizer-pointerdown-actions>>
+	$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+	<%if [{$:/state/sidebar}!match[no]] %>
+
+		<$eventcatcher
+			tag="div"
+			class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper"
+			selector=".tc-sidebar-resizer"
+			matchSelector=".tc-sidebar-resizer"
+			$pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
+
+			<$eventcatcher
+				tag="div"
+				selector=".tc-sidebar-resizer-pointermove"
+				matchSelector=".tc-sidebar-resizer-pointermove"
+				class="tc-sidebar-resizer-pointermove-eventcatcher"
+				$pointerup=<<sidebar-resizer-pointercancel-actions>>
+				$pointerleave=<<sidebar-resizer-pointercancel-actions>>
+				$pointerout=<<sidebar-resizer-pointercancel-actions>>
+				$pointercancel=<<sidebar-resizer-pointercancel-actions>>
+				$pointerdown=<<sidebar-resizer-pointercancel-actions>>
+				$touchstart=<<sidebar-resizer-pointercancel-actions>>
+				$pointermove=<<sidebar-resizer-pointermove-actions>>
+				$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
+
+				<div class="tc-sidebar-resizer-pointermove"/>
+
+			</$eventcatcher>
+
+			<div class="tc-sidebar-resizer"/>
+
+		</$eventcatcher>
+
+	<% endif %>
+
+</$eventcatcher>
+\end
diff --git a/themes/tiddlywiki/centralised/sidebar-resizer-ui.tid b/themes/tiddlywiki/centralised/sidebar-resizer-ui.tid
new file mode 100644
index 000000000..6b487fdd8
--- /dev/null
+++ b/themes/tiddlywiki/centralised/sidebar-resizer-ui.tid
@@ -0,0 +1,20 @@
+title: $:/core/ui/PageTemplate/sidebar-resizer
+tags: $:/tags/PageTemplate
+list-after: $:/core/ui/PageTemplate/story
+
+\import $:/core/macros/sidebar-resizer
+\whitespace trim
+
+<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
+
+	<$let
+		tv-set-storywidth-storyright="no"
+		tv-set-sidebarwidth="no"
+		tv-set-centralised="yes"
+	>
+
+		<$transclude $variable="sidebar-resizer"/>
+
+	</$let>
+
+<% endif %>
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer-ui.tid b/themes/tiddlywiki/vanilla/sidebar-resizer-ui.tid
new file mode 100644
index 000000000..60f685a07
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer-ui.tid
@@ -0,0 +1,20 @@
+title: $:/core/ui/PageTemplate/sidebar-resizer
+tags: $:/tags/PageTemplate
+list-after: $:/core/ui/PageTemplate/story
+
+\import $:/core/macros/sidebar-resizer
+\whitespace trim
+
+<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
+
+	<$let
+		tv-set-storywidth-storyright={{{ [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]] }}}
+		tv-set-sidebarwidth={{{ [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]] }}}
+		tv-set-centralised="no"
+	>
+
+		<$transclude $variable="sidebar-resizer"/>
+
+	</$let>
+
+<% endif %>
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
index 142887e89..6f40cd83b 100644
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -1,126 +1,126 @@
-title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
-tags: [[$:/tags/Stylesheet]]
-code-body: yes
-
-\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
-
-\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
-
-\function get.theme.metric(metric) [{$:/theme}addsuffix[/]addsuffix<metric>get[text]] ~[[$:/themes/tiddlywiki/vanilla/]addsuffix<metric>get[text]]
-
-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
-
-@media (min-width: <<sidebarbreakpoint>>) {
-
-	.tc-sidebar-resizer {
-		position: fixed;
-		top: 0;
-		height: 100%;
-		width: min(calc(<<get.theme.metric metrics/storypaddingright>> / 2),21px);
-		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 {
-			background: <<colour muted-foreground>>;
-		}
-
-		.tc-sidebar-resizer:hover {
-			opacity: 0.1;
-		}
-	}
-
-	.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, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
-		touch-action: none;
-		user-select: none;
-	}
-
-	<%if [[$:/state/sidebar/resizing]!is[missing]] %>
-
-		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
-			z-index: 801;
-		}
-
-		.tc-sidebar-resizer-pointermove-eventcatcher {
-			z-index: 802;
-		}
-
-		.tc-sidebar-resizer-pointermove {
-			z-index: 803;
-			cursor: ew-resize;
-		}
-
-		.tc-sidebar-resizer {
-			opacity: 0.6;
-		}
-
-		@media (pointer: coarse) {
-
-			.tc-sidebar-resizer {
-				opacity: 0.25;
-			}
-		}
-
-	<% endif %>
-
-	<%if [{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
-
-		.tc-sidebar-resizer {
-			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
-		}
-
-		.tc-sidebar-left .tc-sidebar-resizer {
-			left: auto;
-			right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
-		}
-
-		<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
-
-			.tc-sidebar-resizer {
-				left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
-			}
-
-			.tc-sidebar-left .tc-sidebar-resizer {
-				left: auto;
-				right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
-			}
-
-		<% endif %>
-
-	<% 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 {
-			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 {
-		display: none;
-	}
-}
+title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
+tags: [[$:/tags/Stylesheet]]
+code-body: yes
+
+\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\function get.theme.metric(metric) [{$:/theme}addsuffix[/]addsuffix<metric>get[text]] ~[[$:/themes/tiddlywiki/vanilla/]addsuffix<metric>get[text]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
+
+@media (min-width: <<sidebarbreakpoint>>) {
+
+	.tc-sidebar-resizer {
+		position: fixed;
+		top: 0;
+		height: 100%;
+		width: min(calc(<<get.theme.metric metrics/storypaddingright>> / 2),21px);
+		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 {
+			background: <<colour muted-foreground>>;
+		}
+
+		.tc-sidebar-resizer:hover {
+			opacity: 0.1;
+		}
+	}
+
+	.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, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+		touch-action: none;
+		user-select: none;
+	}
+
+	<%if [[$:/state/sidebar/resizing]!is[missing]] %>
+
+		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
+			z-index: 801;
+		}
+
+		.tc-sidebar-resizer-pointermove-eventcatcher {
+			z-index: 802;
+		}
+
+		.tc-sidebar-resizer-pointermove {
+			z-index: 803;
+			cursor: ew-resize;
+		}
+
+		.tc-sidebar-resizer {
+			opacity: 0.6;
+		}
+
+		@media (pointer: coarse) {
+
+			.tc-sidebar-resizer {
+				opacity: 0.25;
+			}
+		}
+
+	<% endif %>
+
+	<%if [{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
+
+		.tc-sidebar-resizer {
+			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
+		}
+
+		.tc-sidebar-left .tc-sidebar-resizer {
+			left: auto;
+			right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
+		}
+
+		<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
+
+			.tc-sidebar-resizer {
+				left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
+			}
+
+			.tc-sidebar-left .tc-sidebar-resizer {
+				left: auto;
+				right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
+			}
+
+		<% endif %>
+
+	<% 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 {
+			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 {
+		display: none;
+	}
+}