mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-10 17:30:26 +00:00
219 lines
8.0 KiB
Plaintext
219 lines
8.0 KiB
Plaintext
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
|
|
|
|
.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;
|
|
}
|
|
|
|
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-editor-preview-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 [<get.theme.explicit.option sidebarresizer>match[show]] %>
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
<%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>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>>) - (2 * <<get.story-sidebar.overlap>> / 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.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>>) - (2 * <<get.story-sidebar.overlap>> / 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.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 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.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 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.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
|
|
}
|
|
|
|
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
|
|
left: auto;
|
|
z-index: 1;
|
|
right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
|
|
}
|
|
|
|
<% endif %>
|
|
|
|
<%if [{$:/state/sidebar}match[no]] %>
|
|
|
|
.tc-sidebar-resizer-pointerdown-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove.tc-main-sidebar-resizer, .tc-sidebar-resizer.tc-main-sidebar-resizer {
|
|
display: none;
|
|
}
|
|
|
|
<% endif %>
|
|
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-sidebar-resizer-pointerdown-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove.tc-main-sidebar-resizer, .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 div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
|
|
width: calc(100% - <<get.theme.metric previewsliderwidth>>);
|
|
min-width: 0px;
|
|
}
|
|
|
|
.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
|
.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
|
.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview {
|
|
min-width: 0px;
|
|
}
|
|
|
|
div[class*="tc-sidebar-resizer-identified-"]:not(.tc-main-sidebar-resizer) {
|
|
position: absolute;
|
|
left: calc(50% - <<get.theme.metric previewsliderwidth>>);
|
|
width: <<get.theme.metric previewsliderwidth>>;
|
|
}
|
|
|
|
<$list filter="[all[tiddlers]prefix[$:/state/resizer/previewwidth-]]" variable="previewWidthTiddler">
|
|
|
|
<$let
|
|
identifier={{{ [<previewWidthTiddler>removeprefix[$:/state/resizer/previewwidth-]] }}}
|
|
width={{{ [<previewWidthTiddler>get[text]] }}}>
|
|
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview.tc-tiddler-preview-identified-<<identifier>> {
|
|
grid-template-columns: calc(100% - <<width>>) <<width>>;
|
|
}
|
|
|
|
div.tc-sidebar-resizer.tc-sidebar-resizer-identified-<<identifier>> {
|
|
left: calc(100% - <<width>> - <<get.theme.metric previewsliderwidth>>);
|
|
}
|
|
|
|
<%if [<width>compare:number:lteq[1]] %>
|
|
|
|
.tc-tiddler-preview-preview-identified-<<identifier>> {
|
|
display: none;
|
|
}
|
|
|
|
<% endif %>
|
|
|
|
<%if [<width>compare:number:gteq[99]] %>
|
|
|
|
.tc-edit-texteditor-identified-<<identifier>> {
|
|
display: none;
|
|
}
|
|
|
|
<% endif %>
|
|
|
|
</$let>
|
|
|
|
</$list>
|