mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-04-08 19:56:39 +00:00
some minor adjustemnts in the sidebar-resizer stylesheet
This commit is contained in:
BurningTreeC
parent
2e8873e7c0
commit
0d6d781d2b
@ -1,152 +1,172 @@
|
||||
title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
refresh-blocker-list: [all[tiddlers]is[draft]] [all[tiddlers]prefix[$:/state/]] [all[tiddlers]prefix[$:/temp/]] -$:/state/sidebar/resizing -$:/state/sidebar/dimensions -$:/state/sidebar
|
||||
refresh-blocker-list: [is[draft]] [prefix[$:/state/]] [prefix[$:/temp/]] -$:/state/sidebar/resizing -$:/state/sidebar/dimensions -$:/state/sidebar
|
||||
|
||||
\define sidebarbreakpoint()
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar/resizing $:/state/sidebar/dimensions $:/state/sidebar">
|
||||
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
|
||||
</$refresh-blocker>
|
||||
\end
|
||||
|
||||
\define sidebarbreakpoint-minus-one()
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar/resizing $:/state/sidebar/dimensions $:/state/sidebar">
|
||||
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
|
||||
</$refresh-blocker>
|
||||
\end
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
|
||||
|
||||
@media (min-width: <<sidebarbreakpoint>>) {
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px);
|
||||
height: 100vh;
|
||||
width: 22px;
|
||||
z-index: 1;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0.1;
|
||||
cursor: ew-resize;
|
||||
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
|
||||
}
|
||||
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}});
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-resizer:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar/resizing $:/state/sidebar/dimensions $:/state/sidebar">
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher {
|
||||
z-index: 800;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||
z-index: 801;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove {
|
||||
z-index: 802;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
opacity: 0.8;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px);
|
||||
height: 100vh;
|
||||
width: 22px;
|
||||
z-index: 1;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0.1;
|
||||
cursor: ew-resize;
|
||||
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
<%if [[$:/state/sidebar/dimensions]!is[missing]] %>
|
||||
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
left: auto;
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc(100% + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc(100% - 42px + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
<% else %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100% - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 42px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}});
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
<% endif %>
|
||||
|
||||
<%if [{$:/state/sidebar}match[no]] %>
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
.tc-sidebar-resizer:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
</$refresh-blocker>
|
||||
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar">
|
||||
|
||||
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher {
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||
z-index: 801;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove {
|
||||
z-index: 802;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
</$refresh-blocker>
|
||||
|
||||
<%if [[$:/state/sidebar/dimensions]!is[missing]] %>
|
||||
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
left: auto;
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc(100% + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc(100% - 42px + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - ({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}) - ({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 84px)));
|
||||
}
|
||||
|
||||
<% else %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100% - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 42px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
<% endif %>
|
||||
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar/resizing $:/state/sidebar/dimensions">
|
||||
|
||||
<%if [{$:/state/sidebar}match[no]] %>
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
</$refresh-blocker>
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
<$refresh-blocker refreshBlockerList="$:/state/sidebar/resizing $:/state/sidebar/dimensions $:/state/sidebar">
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</$refresh-blocker>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user