mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-10 17:30:26 +00:00
112 lines
3.4 KiB
Plaintext
112 lines
3.4 KiB
Plaintext
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}]
|
|
|
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-sidebar-resizer {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 22px;
|
|
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 [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
|
|
|
.tc-sidebar-resizer {
|
|
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 28px),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 28px),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - 28px)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 28px + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})));
|
|
}
|
|
|
|
<% else %>
|
|
|
|
.tc-sidebar-resizer {
|
|
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 14px));
|
|
}
|
|
|
|
<% 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;
|
|
}
|
|
} |