mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-07-09 13:34:21 +00:00
73a9625b81
* Fix field edit bug
This fixes the field edit bug mentioned in
https://talk.tiddlywiki.org/t/possible-field-editing-bug-in-5-2-2/2884 .
* Revert "Fix visual regression in #6511"
This reverts commit c920960942.
* Add new class `tc-edit-fieldeditor`
This class must be added to input and select elements that are used as
field editors. This class reduces the line height of the input element
if it is displayed within the `tc-edit-fields` part of the edit
template.
This allows the same input and select elements to be used for editing
and adding fields.
* Add the new class `tc-edit-field` to the docs
The example in `Customizing EditTemplate Field Rendering` now uses the
new CSS classes.
3092 lines
57 KiB
Plaintext
3092 lines
57 KiB
Plaintext
title: $:/themes/tiddlywiki/vanilla/base
|
|
tags: [[$:/tags/Stylesheet]]
|
|
code-body: yes
|
|
|
|
\define custom-background-datauri()
|
|
<$set name="background" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}>
|
|
<$list filter="[<background>is[image]]">
|
|
`background: url(`
|
|
<$list filter="[<background>!has[_canonical_uri]]">
|
|
`"`<$macrocall $name="datauri" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>`"`
|
|
</$list>
|
|
<$list filter="[<background>has[_canonical_uri]]">
|
|
`"`<$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field="_canonical_uri"/>`"`
|
|
</$list>
|
|
`) center center;`
|
|
`background-attachment: `{{$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment}}`;
|
|
-webkit-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
-moz-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
-o-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;`
|
|
</$list>
|
|
</$set>
|
|
\end
|
|
|
|
\define sidebarbreakpoint()
|
|
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
|
|
\end
|
|
|
|
\define sidebarbreakpoint-minus-one()
|
|
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
|
|
\end
|
|
|
|
\define if-fluid-fixed(text,hiddenSidebarText)
|
|
<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
|
|
$text$
|
|
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
|
|
$hiddenSidebarText$
|
|
</$reveal>
|
|
</$reveal>
|
|
\end
|
|
|
|
\define if-editor-height-fixed(then,else)
|
|
<$reveal state="$:/config/TextEditor/EditorHeight/Mode" type="match" text="fixed">
|
|
$then$
|
|
</$reveal>
|
|
<$reveal state="$:/config/TextEditor/EditorHeight/Mode" type="match" text="auto">
|
|
$else$
|
|
</$reveal>
|
|
\end
|
|
|
|
\define set-type-selector-min-width()
|
|
<$set name="typeLength" value={{{ [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]get[name]length[]maxall[]] }}}>
|
|
|
|
.tc-type-selector-dropdown-wrapper {
|
|
min-width: calc(<<typeLength>>ch + 4em);
|
|
}
|
|
|
|
.tc-type-selector-dropdown-wrapper input.tc-edit-typeeditor {
|
|
min-width: <<typeLength>>ch;
|
|
}
|
|
|
|
</$set>
|
|
\end
|
|
|
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
|
|
|
/*
|
|
** Start with the normalize CSS reset, and then belay some of its effects
|
|
*/
|
|
|
|
{{$:/themes/tiddlywiki/vanilla/reset}}
|
|
|
|
*, input[type="search"] {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
input[type="search"] {
|
|
outline-offset: initial;
|
|
}
|
|
|
|
html button {
|
|
line-height: 1.2;
|
|
color: <<colour button-foreground>>;
|
|
fill: <<colour button-foreground>>;
|
|
background: <<colour button-background>>;
|
|
border-color: <<colour button-border>>;
|
|
}
|
|
|
|
button:disabled svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Basic element styles
|
|
*/
|
|
|
|
html, body {
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};
|
|
text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html:-webkit-full-screen {
|
|
background-color: <<colour page-background>>;
|
|
}
|
|
|
|
body.tc-body {
|
|
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};
|
|
line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};
|
|
word-wrap: break-word;
|
|
<<custom-background-datauri>>
|
|
color: <<colour foreground>>;
|
|
background-color: <<colour page-background>>;
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
<<if-background-attachment """
|
|
|
|
body.tc-body {
|
|
background-color: transparent;
|
|
}
|
|
|
|
""">>
|
|
|
|
/**
|
|
* Correct the font size and margin on `h1` elements within `section` and
|
|
* `article` contexts in Chrome, Firefox, and Safari.
|
|
*/
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.2;
|
|
font-weight: normal;
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
word-break: normal;
|
|
word-wrap: break-word;
|
|
white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
|
|
background-color: <<colour pre-background>>;
|
|
border: 1px solid <<colour pre-border>>;
|
|
padding: 0 3px 2px;
|
|
border-radius: 3px;
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
|
|
}
|
|
|
|
code {
|
|
color: <<colour code-foreground>>;
|
|
background-color: <<colour code-background>>;
|
|
border: 1px solid <<colour code-border>>;
|
|
white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
|
|
padding: 0 3px 2px;
|
|
border-radius: 3px;
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 5px solid <<colour blockquote-bar>>;
|
|
margin-left: 25px;
|
|
padding-left: 10px;
|
|
quotes: "\201C""\201D""\2018""\2019";
|
|
}
|
|
|
|
blockquote > div {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
blockquote.tc-big-quote {
|
|
font-family: Georgia, serif;
|
|
position: relative;
|
|
background: <<colour pre-background>>;
|
|
border-left: none;
|
|
margin-left: 50px;
|
|
margin-right: 50px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
blockquote.tc-big-quote cite:before {
|
|
content: "\2014 \2009";
|
|
}
|
|
|
|
blockquote.tc-big-quote:before {
|
|
font-family: Georgia, serif;
|
|
color: <<colour blockquote-bar>>;
|
|
content: open-quote;
|
|
font-size: 8em;
|
|
line-height: 0.1em;
|
|
margin-right: 0.25em;
|
|
vertical-align: -0.4em;
|
|
position: absolute;
|
|
left: -50px;
|
|
top: 42px;
|
|
}
|
|
|
|
blockquote.tc-big-quote:after {
|
|
font-family: Georgia, serif;
|
|
color: <<colour blockquote-bar>>;
|
|
content: close-quote;
|
|
font-size: 8em;
|
|
line-height: 0.1em;
|
|
margin-right: 0.25em;
|
|
vertical-align: -0.4em;
|
|
position: absolute;
|
|
right: -80px;
|
|
bottom: -20px;
|
|
}
|
|
|
|
dl dt {
|
|
font-weight: bold;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
button, textarea, input, select {
|
|
outline-color: <<colour primary>>;
|
|
}
|
|
|
|
textarea,
|
|
input[type=text],
|
|
input[type=search],
|
|
input[type=""],
|
|
input:not([type]) {
|
|
color: <<colour foreground>>;
|
|
background: <<colour background>>;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-results-button,
|
|
input[type="search"]::-webkit-search-results-decoration {
|
|
-webkit-appearance:none;
|
|
}
|
|
|
|
.tc-muted {
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
svg.tc-image-button {
|
|
padding: 0px 1px 1px 0px;
|
|
}
|
|
|
|
.tc-icon-wrapper > svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font-size: 0.8em;
|
|
line-height: 1.2;
|
|
color: <<colour foreground>>;
|
|
vertical-align: middle;
|
|
background-color: <<colour background>>;
|
|
border: solid 1px <<colour muted-foreground>>;
|
|
border-bottom-color: <<colour muted-foreground>>;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 <<colour muted-foreground>>;
|
|
}
|
|
|
|
::selection {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
background-color: <<colour selection-background>>;
|
|
color: <<colour selection-foreground>>;
|
|
}
|
|
|
|
/*
|
|
Markdown likes putting code elements inside pre elements
|
|
*/
|
|
pre > code {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
table {
|
|
border: 1px solid <<colour table-border>>;
|
|
width: auto;
|
|
max-width: 100%;
|
|
caption-side: bottom;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
/* next 2 elements needed, since normalize 8.0.1 */
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
table th, table td {
|
|
padding: 0 7px 0 7px;
|
|
border-top: 1px solid <<colour table-border>>;
|
|
border-left: 1px solid <<colour table-border>>;
|
|
}
|
|
|
|
table thead tr td, table th {
|
|
background-color: <<colour table-header-background>>;
|
|
font-weight: bold;
|
|
}
|
|
|
|
table tfoot tr td {
|
|
background-color: <<colour table-footer-background>>;
|
|
}
|
|
|
|
.tc-csv-table {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-tiddler-frame img,
|
|
.tc-tiddler-frame svg,
|
|
.tc-tiddler-frame canvas,
|
|
.tc-tiddler-frame embed,
|
|
.tc-tiddler-frame iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tc-tiddler-body > embed,
|
|
.tc-tiddler-body > iframe {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
|
|
/*
|
|
** Links
|
|
*/
|
|
|
|
button.tc-tiddlylink,
|
|
a.tc-tiddlylink {
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
color: <<colour tiddler-link-foreground>>;
|
|
-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
|
|
}
|
|
|
|
.tc-sidebar-lists a.tc-tiddlylink {
|
|
color: <<colour sidebar-tiddler-link-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists a.tc-tiddlylink:hover {
|
|
color: <<colour sidebar-tiddler-link-foreground-hover>>;
|
|
}
|
|
|
|
button.tc-tiddlylink:hover,
|
|
a.tc-tiddlylink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.tc-tiddlylink-resolves {
|
|
}
|
|
|
|
a.tc-tiddlylink-shadow {
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.tc-tiddlylink-shadow.tc-tiddlylink-resolves {
|
|
font-weight: normal;
|
|
}
|
|
|
|
a.tc-tiddlylink-missing {
|
|
font-style: italic;
|
|
}
|
|
|
|
a.tc-tiddlylink-external {
|
|
text-decoration: underline;
|
|
color: <<colour external-link-foreground>>;
|
|
background-color: <<colour external-link-background>>;
|
|
}
|
|
|
|
a.tc-tiddlylink-external:visited {
|
|
color: <<colour external-link-foreground-visited>>;
|
|
background-color: <<colour external-link-background-visited>>;
|
|
}
|
|
|
|
a.tc-tiddlylink-external:hover {
|
|
color: <<colour external-link-foreground-hover>>;
|
|
background-color: <<colour external-link-background-hover>>;
|
|
}
|
|
|
|
.tc-drop-down a.tc-tiddlylink:hover {
|
|
color: <<colour tiddler-link-background>>;
|
|
}
|
|
|
|
/*
|
|
** Drag and drop styles
|
|
*/
|
|
|
|
.tc-tiddler-dragger {
|
|
position: relative;
|
|
z-index: -10000;
|
|
}
|
|
|
|
.tc-tiddler-dragger-inner {
|
|
position: absolute;
|
|
top: -1000px;
|
|
left: -1000px;
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
font-size: 16.9px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
color: <<colour dragger-foreground>>;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
background-color: <<colour dragger-background>>;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.tc-tiddler-dragger-cover {
|
|
position: absolute;
|
|
background-color: <<colour page-background>>;
|
|
}
|
|
|
|
.tc-page-container > .tc-dropzone {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.tc-dropzone {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-dropzone.tc-dragover:before {
|
|
z-index: 10000;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: <<colour dropzone-background>>;
|
|
text-align: center;
|
|
content: "<<lingo DropMessage>>";
|
|
}
|
|
|
|
.tc-droppable > .tc-droppable-placeholder {
|
|
display: none;
|
|
}
|
|
|
|
.tc-droppable.tc-dragover > .tc-droppable-placeholder {
|
|
display: block;
|
|
border: 2px dashed <<colour dropzone-background>>;
|
|
}
|
|
|
|
.tc-draggable {
|
|
cursor: move;
|
|
}
|
|
|
|
.tc-sidebar-tab-open .tc-droppable-placeholder, .tc-tagged-draggable-list .tc-droppable-placeholder,
|
|
.tc-links-draggable-list .tc-droppable-placeholder {
|
|
line-height: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.tc-sidebar-tab-open-item {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-sidebar-tab-open .tc-btn-invisible.tc-btn-mini svg {
|
|
font-size: 0.7em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Plugin reload warning
|
|
*/
|
|
|
|
.tc-plugin-reload-warning {
|
|
z-index: 1000;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: <<colour alert-background>>;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
** Buttons
|
|
*/
|
|
|
|
button svg, button img, label svg, label img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-btn-invisible {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: <<colour foreground>>;
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
button:disabled.tc-btn-invisible {
|
|
cursor: default;
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-btn-boxed {
|
|
font-size: 0.6em;
|
|
padding: 0.2em;
|
|
margin: 1px;
|
|
background: none;
|
|
border: 1px solid <<colour tiddler-controls-foreground>>;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-boxed svg {
|
|
font-size: 1.6666em;
|
|
}
|
|
|
|
.tc-btn-boxed:hover {
|
|
background: <<colour muted-foreground>>;
|
|
color: <<colour background>>;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-boxed:hover svg {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-btn-rounded {
|
|
font-size: 0.5em;
|
|
line-height: 2;
|
|
padding: 0em 0.3em 0.2em 0.4em;
|
|
margin: 1px;
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background: <<colour muted-foreground>>;
|
|
color: <<colour background>>;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-rounded svg {
|
|
font-size: 1.6666em;
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-btn-rounded:hover {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background: <<colour background>>;
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-rounded:hover svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-btn-icon svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
|
|
.tc-btn-text {
|
|
margin-left: 7px;
|
|
}
|
|
|
|
/* used for documentation "fake" buttons */
|
|
.tc-btn-standard {
|
|
line-height: 1.8;
|
|
color: #667;
|
|
background-color: #e0e0e0;
|
|
border: 1px solid #888;
|
|
padding: 2px 1px 2px 1px;
|
|
margin: 1px 4px 1px 4px;
|
|
}
|
|
|
|
.tc-btn-big-green {
|
|
display: inline-block;
|
|
padding: 8px;
|
|
margin: 4px 8px 4px 8px;
|
|
background: <<colour download-background>>;
|
|
color: <<colour download-foreground>>;
|
|
fill: <<colour download-foreground>>;
|
|
border: none;
|
|
border-radius: 2px;
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-btn-big-green svg,
|
|
.tc-btn-big-green img {
|
|
height: 2em;
|
|
width: 2em;
|
|
vertical-align: middle;
|
|
fill: <<colour download-foreground>>;
|
|
}
|
|
|
|
.tc-primary-btn {
|
|
background: <<colour primary>>;
|
|
}
|
|
|
|
.tc-sidebar-lists input {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button {
|
|
color: <<colour sidebar-button-foreground>>;
|
|
fill: <<colour sidebar-button-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button.tc-btn-mini {
|
|
color: <<colour sidebar-muted-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button.tc-btn-mini:hover {
|
|
color: <<colour sidebar-muted-foreground-hover>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button small {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
button svg.tc-image-button, button .tc-image-button img {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
.tc-unfold-banner {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
width: calc(100% + 2px);
|
|
margin-left: -43px;
|
|
text-align: center;
|
|
border-top: 2px solid <<colour tiddler-info-background>>;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tc-unfold-banner:hover {
|
|
background: <<colour tiddler-info-background>>;
|
|
border-top: 2px solid <<colour tiddler-info-border>>;
|
|
}
|
|
|
|
.tc-unfold-banner svg, .tc-fold-banner svg {
|
|
height: 0.75em;
|
|
fill: <<colour tiddler-controls-foreground>>;
|
|
}
|
|
|
|
.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
|
|
fill: <<colour tiddler-controls-foreground-hover>>;
|
|
}
|
|
|
|
.tc-fold-banner {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
width: 23px;
|
|
text-align: center;
|
|
margin-left: -35px;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.tc-fold-banner:hover {
|
|
background: <<colour tiddler-info-background>>;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-unfold-banner {
|
|
position: static;
|
|
width: calc(100% + 59px);
|
|
}
|
|
|
|
.tc-fold-banner {
|
|
width: 16px;
|
|
margin-left: -16px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
** Tags and missing tiddlers
|
|
*/
|
|
|
|
.tc-tag-list-item {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-tags-wrapper {
|
|
margin: 4px 0 14px 0;
|
|
}
|
|
|
|
.tc-tags-wrapper .tc-tag-list-item {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.tc-missing-tiddler-label {
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
font-size: 11.844px;
|
|
line-height: 14px;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tc-block-tags-dropdown > .tc-btn-invisible:hover {
|
|
background-color: <<colour primary>>;
|
|
}
|
|
|
|
button.tc-tag-label, span.tc-tag-label {
|
|
display: inline-block;
|
|
padding: 0.16em 0.7em;
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
line-height: 1.2em;
|
|
color: <<colour tag-foreground>>;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
background-color: <<colour tag-background>>;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.tc-sidebar-scrollable .tc-tag-label {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.tc-untagged-separator {
|
|
width: 10em;
|
|
left: 0;
|
|
margin-left: 0;
|
|
border: 0;
|
|
height: 1px;
|
|
background: <<colour tab-divider>>;
|
|
}
|
|
|
|
button.tc-untagged-label {
|
|
background-color: <<colour untagged-background>>;
|
|
}
|
|
|
|
.tc-tag-label svg, .tc-tag-label img {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-right: 3px;
|
|
margin-bottom: 1px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.tc-edit-tags button.tc-remove-tag-button svg {
|
|
font-size: 0.7em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-tag-manager-table .tc-tag-label {
|
|
white-space: normal;
|
|
}
|
|
|
|
.tc-tag-manager-tag {
|
|
width: 100%;
|
|
}
|
|
|
|
button.tc-btn-invisible.tc-remove-tag-button {
|
|
outline: none;
|
|
}
|
|
|
|
.tc-tag-button-selected,
|
|
.tc-list-item-selected a.tc-tiddlylink, a.tc-list-item-selected {
|
|
background-color: <<colour primary>>;
|
|
color: <<colour tiddler-background>>;
|
|
}
|
|
|
|
/*
|
|
** Page layout
|
|
*/
|
|
|
|
.tc-topbar {
|
|
position: fixed;
|
|
z-index: 1200;
|
|
}
|
|
|
|
.tc-topbar-left {
|
|
left: 29px;
|
|
top: 5px;
|
|
}
|
|
|
|
.tc-topbar-right {
|
|
top: 5px;
|
|
right: 29px;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-topbar-right {
|
|
right: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-topbar button {
|
|
padding: 8px;
|
|
}
|
|
|
|
.tc-topbar svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-topbar button:hover svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-show-sidebar-btn svg.tc-image-chevron-left, .tc-hide-sidebar-btn svg.tc-image-chevron-right {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
}
|
|
|
|
.tc-sidebar-header {
|
|
color: <<colour sidebar-foreground>>;
|
|
fill: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-sidebar-lists p {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-missing-tiddler-label {
|
|
color: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-advanced-search input {
|
|
width: 60%;
|
|
}
|
|
|
|
.tc-search a svg {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-page-controls {
|
|
margin-top: 14px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.tc-page-controls .tc-drop-down {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tc-page-controls button {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.tc-page-controls a.tc-tiddlylink:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-page-controls img {
|
|
width: 1em;
|
|
}
|
|
|
|
.tc-page-controls svg {
|
|
fill: <<colour sidebar-controls-foreground>>;
|
|
}
|
|
|
|
.tc-page-controls button:hover svg, .tc-page-controls a:hover svg {
|
|
fill: <<colour sidebar-controls-foreground-hover>>;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-menu-list-item {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-menu-list-count {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-menu-list-subitem {
|
|
padding-left: 7px;
|
|
}
|
|
|
|
.tc-story-river {
|
|
position: relative;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-sidebar-header {
|
|
padding: 14px;
|
|
min-height: 32px;
|
|
margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
transition: min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;
|
|
}
|
|
|
|
<<if-no-sidebar """
|
|
|
|
.tc-sidebar-header {
|
|
min-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
""">>
|
|
|
|
.tc-story-river {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-message-box {
|
|
margin: 21px -21px 21px -21px;
|
|
}
|
|
|
|
.tc-sidebar-scrollable {
|
|
position: fixed;
|
|
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0 0 0 -42px;
|
|
padding: 71px 0 28px 42px;
|
|
}
|
|
|
|
html[dir="rtl"] .tc-sidebar-scrollable {
|
|
left: auto;
|
|
right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
|
}
|
|
|
|
.tc-story-river {
|
|
position: relative;
|
|
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
|
|
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};
|
|
padding: 42px 42px 42px 42px;
|
|
}
|
|
|
|
<<if-no-sidebar "
|
|
|
|
.tc-story-river {
|
|
width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
|
|
}
|
|
|
|
">>
|
|
|
|
.tc-story-river.tc-static-story-river {
|
|
margin-right: 0;
|
|
padding-right: 42px;
|
|
}
|
|
|
|
}
|
|
|
|
@media print {
|
|
|
|
body.tc-body {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tc-sidebar-header, .tc-topbar {
|
|
display: none;
|
|
}
|
|
|
|
.tc-story-river {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tc-story-river .tc-tiddler-frame {
|
|
margin: 0;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
** Tiddler styles
|
|
*/
|
|
|
|
.tc-tiddler-frame {
|
|
position: relative;
|
|
margin-bottom: 28px;
|
|
background-color: <<colour tiddler-background>>;
|
|
border: 1px solid <<colour tiddler-border>>;
|
|
}
|
|
|
|
{{$:/themes/tiddlywiki/vanilla/sticky}}
|
|
|
|
.tc-tiddler-info {
|
|
overflow: hidden;
|
|
padding: 14px 42px 14px 42px;
|
|
background-color: <<colour tiddler-info-background>>;
|
|
border-top: 1px solid <<colour tiddler-info-border>>;
|
|
border-bottom: 1px solid <<colour tiddler-info-border>>;
|
|
}
|
|
|
|
.tc-tiddler-info p {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tc-tiddler-info .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour tiddler-info-tab-background>>;
|
|
border-bottom: 1px solid <<colour tiddler-info-tab-background>>;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
|
|
.tc-tiddler-info {
|
|
padding: 14px 14px 14px 14px;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-view-field-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-view-field-name {
|
|
width: 1%; /* Makes this column be as narrow as possible */
|
|
white-space: nowrap;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-view-field-value {
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
|
.tc-tiddler-frame {
|
|
padding: 14px 14px 14px 14px;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.tc-tiddler-info {
|
|
margin: 0 -14px 0 -14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
.tc-tiddler-frame {
|
|
padding: 28px 42px 42px 42px;
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
|
|
border-radius: 2px;
|
|
}
|
|
|
|
<<if-no-sidebar "
|
|
|
|
.tc-tiddler-frame {
|
|
width: 100%;
|
|
}
|
|
|
|
">>
|
|
|
|
.tc-tiddler-info {
|
|
margin: 0 -42px 0 -42px;
|
|
}
|
|
}
|
|
|
|
.tc-site-title,
|
|
.tc-titlebar {
|
|
font-weight: normal;
|
|
font-size: 2.35em;
|
|
line-height: 1.35em;
|
|
color: <<colour tiddler-title-foreground>>;
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-site-title {
|
|
color: <<colour site-title-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-title-icon {
|
|
vertical-align: middle;
|
|
margin-right: .1em;
|
|
}
|
|
|
|
.tc-system-title-prefix {
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-titlebar h2 {
|
|
font-size: 1em;
|
|
display: inline;
|
|
}
|
|
|
|
.tc-titlebar img {
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-subtitle {
|
|
font-size: 0.9em;
|
|
color: <<colour tiddler-subtitle-foreground>>;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-subtitle .tc-tiddlylink {
|
|
margin-right: .3em;
|
|
}
|
|
|
|
.tc-tiddler-missing .tc-title {
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-controls {
|
|
float: right;
|
|
}
|
|
|
|
.tc-tiddler-controls .tc-drop-down {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.tc-tiddler-controls .tc-drop-down .tc-drop-down {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.tc-tiddler-controls > span > button,
|
|
.tc-tiddler-controls > span > span > button,
|
|
.tc-tiddler-controls > span > span > span > button {
|
|
vertical-align: baseline;
|
|
margin-left:5px;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg, .tc-tiddler-controls button img,
|
|
.tc-search button svg, .tc-search a svg {
|
|
fill: <<colour tiddler-controls-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg, .tc-tiddler-controls button img {
|
|
height: 0.75em;
|
|
}
|
|
|
|
.tc-search button svg, .tc-search a svg {
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
margin: 0 0.25em;
|
|
}
|
|
|
|
.tc-tiddler-controls button.tc-selected svg,
|
|
.tc-page-controls button.tc-selected svg {
|
|
fill: <<colour tiddler-controls-foreground-selected>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button.tc-btn-invisible:hover svg,
|
|
.tc-search button:hover svg, .tc-search a:hover svg {
|
|
fill: <<colour tiddler-controls-foreground-hover>>;
|
|
}
|
|
|
|
@media print {
|
|
.tc-tiddler-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tc-tiddler-help { /* Help prompts within tiddler template */
|
|
color: <<colour muted-foreground>>;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.tc-tiddler-help a.tc-tiddlylink {
|
|
color: <<colour very-muted-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-edit-texteditor {
|
|
width: 100%;
|
|
margin: 4px 0 4px 0;
|
|
}
|
|
|
|
.tc-tiddler-frame input.tc-edit-texteditor,
|
|
.tc-tiddler-frame textarea.tc-edit-texteditor,
|
|
.tc-tiddler-frame iframe.tc-edit-texteditor,
|
|
.tc-tiddler-frame select.tc-edit-texteditor {
|
|
padding: 3px 3px 3px 3px;
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
line-height: 1.3em;
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
|
|
}
|
|
|
|
.tc-tiddler-frame input.tc-edit-texteditor,
|
|
.tc-tiddler-frame textarea.tc-edit-texteditor,
|
|
.tc-tiddler-frame iframe.tc-edit-texteditor {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.tc-tiddler-frame input.tc-edit-texteditor,
|
|
.tc-tiddler-frame select.tc-edit-texteditor,
|
|
.tc-tiddler-frame textarea.tc-edit-texteditor {
|
|
background-color: <<colour tiddler-editor-background>>;
|
|
}
|
|
|
|
.tc-tiddler-frame iframe.tc-edit-texteditor {
|
|
background-color: <<colour tiddler-background>>;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,
|
|
.tc-tiddler-frame .tc-edit-fields select.tc-edit-fieldeditor,
|
|
.tc-tiddler-frame .tc-edit-fields textarea.tc-edit-fieldeditor {
|
|
margin: 0;
|
|
padding: 2px 3px;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-binary-warning {
|
|
width: 100%;
|
|
height: 5em;
|
|
text-align: center;
|
|
padding: 3em 3em 6em 3em;
|
|
background: <<colour alert-background>>;
|
|
border: 1px solid <<colour alert-border>>;
|
|
}
|
|
|
|
canvas.tc-edit-bitmapeditor {
|
|
border: 6px solid <<colour tiddler-editor-border-image>>;
|
|
cursor: crosshair;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.tc-edit-bitmapeditor-width {
|
|
display: block;
|
|
}
|
|
|
|
.tc-edit-bitmapeditor-height {
|
|
display: block;
|
|
}
|
|
|
|
.tc-tiddler-body {
|
|
clear: both;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-body {
|
|
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
|
|
line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};
|
|
}
|
|
|
|
.tc-titlebar, .tc-tiddler-edit-title {
|
|
overflow: hidden; /* https://github.com/Jermolene/TiddlyWiki5/issues/282 */
|
|
}
|
|
|
|
html body.tc-body.tc-single-tiddler-window {
|
|
margin: 1em;
|
|
background: <<colour tiddler-background>>;
|
|
}
|
|
|
|
.tc-single-tiddler-window img,
|
|
.tc-single-tiddler-window svg,
|
|
.tc-single-tiddler-window canvas,
|
|
.tc-single-tiddler-window embed,
|
|
.tc-single-tiddler-window iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
** Editor
|
|
*/
|
|
|
|
.tc-editor-toolbar {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.tc-editor-toolbar button {
|
|
vertical-align: middle;
|
|
background-color: <<colour tiddler-controls-foreground>>;
|
|
color: <<colour tiddler-controls-foreground-selected>>;
|
|
fill: <<colour tiddler-controls-foreground-selected>>;
|
|
border-radius: 4px;
|
|
padding: 3px;
|
|
margin: 2px 0 2px 4px;
|
|
}
|
|
|
|
.tc-editor-toolbar button.tc-text-editor-toolbar-item-adjunct {
|
|
margin-left: 1px;
|
|
width: 1em;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tc-editor-toolbar button.tc-text-editor-toolbar-item-start-group {
|
|
margin-left: 11px;
|
|
}
|
|
|
|
.tc-editor-toolbar button.tc-selected {
|
|
background-color: <<colour primary>>;
|
|
}
|
|
|
|
.tc-editor-toolbar button svg {
|
|
width: 1.6em;
|
|
height: 1.2em;
|
|
}
|
|
|
|
.tc-editor-toolbar button:hover {
|
|
background-color: <<colour tiddler-controls-foreground-selected>>;
|
|
fill: <<colour background>>;
|
|
color: <<colour background>>;
|
|
}
|
|
|
|
.tc-editor-toolbar .tc-text-editor-toolbar-more {
|
|
white-space: normal;
|
|
}
|
|
|
|
.tc-editor-toolbar .tc-text-editor-toolbar-more button {
|
|
display: inline-block;
|
|
padding: 3px;
|
|
width: auto;
|
|
}
|
|
|
|
.tc-editor-toolbar .tc-search-results {
|
|
padding: 0;
|
|
}
|
|
|
|
.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down > p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down a.tc-tiddlylink {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/*
|
|
** Adjustments for fluid-fixed mode
|
|
*/
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
<<if-fluid-fixed text:"""
|
|
|
|
.tc-story-river {
|
|
padding-right: 0;
|
|
position: relative;
|
|
width: auto;
|
|
left: 0;
|
|
margin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
|
|
margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
|
|
}
|
|
|
|
.tc-tiddler-frame {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-sidebar-scrollable {
|
|
left: auto;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
|
|
}
|
|
|
|
body.tc-body .tc-storyview-zoomin-tiddler {
|
|
width: 100%;
|
|
width: calc(100% - 42px);
|
|
}
|
|
|
|
""" hiddenSidebarText:"""
|
|
|
|
.tc-story-river {
|
|
padding-right: 3em;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body.tc-body .tc-storyview-zoomin-tiddler {
|
|
width: 100%;
|
|
width: calc(100% - 84px);
|
|
}
|
|
|
|
""">>
|
|
|
|
}
|
|
|
|
/*
|
|
** Toolbar buttons
|
|
*/
|
|
|
|
.tc-page-controls svg.tc-image-new-button {
|
|
fill: <<colour toolbar-new-button>>;
|
|
}
|
|
|
|
.tc-page-controls svg.tc-image-options-button {
|
|
fill: <<colour toolbar-options-button>>;
|
|
}
|
|
|
|
.tc-page-controls svg.tc-image-save-button {
|
|
fill: <<colour toolbar-save-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-info-button {
|
|
fill: <<colour toolbar-info-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-edit-button {
|
|
fill: <<colour toolbar-edit-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-close-button {
|
|
fill: <<colour toolbar-close-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-delete-button {
|
|
fill: <<colour toolbar-delete-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-cancel-button {
|
|
fill: <<colour toolbar-cancel-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-done-button {
|
|
fill: <<colour toolbar-done-button>>;
|
|
}
|
|
|
|
/*
|
|
** Tiddler edit mode
|
|
*/
|
|
|
|
.tc-tiddler-edit-frame em.tc-edit {
|
|
color: <<colour muted-foreground>>;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tc-edit-type-dropdown a.tc-tiddlylink-missing {
|
|
font-style: normal;
|
|
}
|
|
|
|
.tc-type-selector .tc-edit-typeeditor {
|
|
width: auto;
|
|
}
|
|
|
|
.tc-type-selector-dropdown-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
<<set-type-selector-min-width>>
|
|
|
|
.tc-edit-tags {
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
padding: 4px 8px 4px 8px;
|
|
}
|
|
|
|
.tc-edit-add-tag {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-edit-add-tag .tc-add-tag-name input {
|
|
width: 50%;
|
|
}
|
|
|
|
.tc-edit-add-tag .tc-keyboard {
|
|
display:inline;
|
|
}
|
|
|
|
.tc-edit-tags .tc-tag-label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-edit-tags-list {
|
|
margin: 14px 0 14px 0;
|
|
}
|
|
|
|
.tc-remove-tag-button {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.tc-tiddler-preview {
|
|
overflow: auto;
|
|
}
|
|
|
|
.tc-tiddler-preview-preview {
|
|
float: right;
|
|
width: 49%;
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
margin: 4px 0 3px 3px;
|
|
padding: 3px 3px 3px 3px;
|
|
}
|
|
|
|
<<if-editor-height-fixed then:"""
|
|
|
|
.tc-tiddler-preview-preview {
|
|
overflow-y: scroll;
|
|
height: {{$:/config/TextEditor/EditorHeight/Height}};
|
|
}
|
|
|
|
""">>
|
|
|
|
.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
|
|
width: 49%;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor {
|
|
max-width: 49%;
|
|
}
|
|
|
|
.tc-edit-fields {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-edit-fields.tc-edit-fields-small {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tc-edit-fields table, .tc-edit-fields tr, .tc-edit-fields td {
|
|
border: none;
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-edit-fields > tbody > .tc-edit-field:nth-child(odd) {
|
|
background-color: <<colour tiddler-editor-fields-odd>>;
|
|
}
|
|
|
|
.tc-edit-fields > tbody > .tc-edit-field:nth-child(even) {
|
|
background-color: <<colour tiddler-editor-fields-even>>;
|
|
}
|
|
|
|
.tc-edit-field-name {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-edit-field-value input {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-edit-field-remove {
|
|
}
|
|
|
|
.tc-edit-field-remove svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-edit-field-add-name-wrapper input.tc-edit-texteditor {
|
|
width: auto;
|
|
}
|
|
|
|
.tc-edit-field-add-name-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-edit-field-add-value {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-edit-field-add-value {
|
|
width: 35%;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-edit-field-add-button {
|
|
display: inline-block;
|
|
width: 10%;
|
|
}
|
|
|
|
|
|
/*
|
|
** Tiddler editor dropzone
|
|
*/
|
|
|
|
.tc-dropzone-editor {
|
|
position:relative;
|
|
}
|
|
|
|
.tc-dropzone-editor.tc-dragover .tc-editor-toolbar::after{
|
|
z-index: 10000;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
height: 100%;
|
|
background: <<colour dropzone-background>>;
|
|
content: "<<lingo DropMessage>>";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: <<color background>>;
|
|
border: 4px dashed <<color modal-border>>;
|
|
font-weight: bold;
|
|
font-size: 150%;
|
|
opacity: 0.8;
|
|
color: <<color foreground>>;
|
|
}
|
|
|
|
.tc-editor-importpopup {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.tc-editor-import {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: <<color pre-background>>;
|
|
box-shadow: 2px 2px 10px <<colour foreground>>;
|
|
padding: 10px;
|
|
width: 96%;
|
|
border: 1px solid <<color tiddler-controls-foreground>>;
|
|
text-align:center;
|
|
}
|
|
|
|
.tc-editor-import img {
|
|
max-height: 500px;
|
|
}
|
|
|
|
/*
|
|
** Storyview Classes
|
|
*/
|
|
|
|
.tc-viewswitcher .tc-image-button {
|
|
margin-right: .3em;
|
|
}
|
|
|
|
.tc-storyview-zoomin-tiddler {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-storyview-zoomin-tiddler {
|
|
width: calc(100% - 84px);
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
** Dropdowns
|
|
*/
|
|
|
|
.tc-btn-dropdown {
|
|
text-align: left;
|
|
}
|
|
|
|
.tc-btn-dropdown svg, .tc-btn-dropdown img {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-drop-down-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-drop-down {
|
|
min-width: 380px;
|
|
border: 1px solid <<colour dropdown-border>>;
|
|
background-color: <<colour dropdown-background>>;
|
|
padding: 7px 0 7px 0;
|
|
margin: 4px 0 0 0;
|
|
white-space: nowrap;
|
|
text-shadow: none;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-drop-down .tc-drop-down {
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.tc-drop-down button svg, .tc-drop-down a svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-drop-down button:disabled svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-drop-down button.tc-btn-invisible:hover svg {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-drop-down .tc-drop-down-info {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.tc-drop-down p {
|
|
padding: 0 14px 0 14px;
|
|
}
|
|
|
|
.tc-drop-down svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-drop-down img {
|
|
width: 1em;
|
|
}
|
|
|
|
.tc-drop-down a, .tc-drop-down button {
|
|
display: block;
|
|
padding: 0 14px 0 14px;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: <<colour foreground>>;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-set .tc-tab-buttons button {
|
|
display: inline-block;
|
|
width: auto;
|
|
margin-bottom: 0px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.tc-drop-down .tc-prompt {
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.tc-drop-down .tc-chooser {
|
|
border: none;
|
|
}
|
|
|
|
.tc-drop-down .tc-chooser .tc-swatches-horiz {
|
|
font-size: 0.4em;
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
.tc-drop-down .tc-file-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-drop-down .tc-file-input-wrapper button {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input-wrapper:hover button {
|
|
color: <<colour tiddler-link-background>>;
|
|
background-color: <<colour tiddler-link-foreground>>;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-buttons button {
|
|
background-color: <<colour dropdown-tab-background>>;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour dropdown-tab-background-selected>>;
|
|
border-bottom: 1px solid <<colour dropdown-tab-background-selected>>;
|
|
}
|
|
|
|
.tc-drop-down-bullet {
|
|
display: inline-block;
|
|
width: 0.5em;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-contents a {
|
|
padding: 0 0.5em 0 0.5em;
|
|
}
|
|
|
|
.tc-block-dropdown-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-block-dropdown {
|
|
position: absolute;
|
|
min-width: 220px;
|
|
border: 1px solid <<colour dropdown-border>>;
|
|
background-color: <<colour dropdown-background>>;
|
|
padding: 7px 0;
|
|
margin: 4px 0 0 0;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.tc-block-dropdown.tc-search-drop-down {
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.tc-block-dropdown a {
|
|
display: block;
|
|
padding: 4px 14px 4px 14px;
|
|
}
|
|
|
|
.tc-block-dropdown.tc-search-drop-down a {
|
|
display: block;
|
|
padding: 0px 10px 0px 10px;
|
|
}
|
|
|
|
.tc-drop-down .tc-dropdown-item-plain,
|
|
.tc-block-dropdown .tc-dropdown-item-plain {
|
|
padding: 4px 14px 4px 7px;
|
|
}
|
|
|
|
.tc-drop-down .tc-dropdown-item,
|
|
.tc-block-dropdown .tc-dropdown-item {
|
|
padding: 4px 14px 4px 7px;
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-block-dropdown a.tc-tiddlylink:hover {
|
|
color: <<colour tiddler-link-background>>;
|
|
background-color: <<colour tiddler-link-foreground>>;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-search-results {
|
|
padding: 0 7px 0 7px;
|
|
}
|
|
|
|
.tc-image-chooser, .tc-colour-chooser {
|
|
white-space: normal;
|
|
}
|
|
|
|
.tc-image-chooser a,
|
|
.tc-colour-chooser a {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.tc-image-chooser a {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
padding: 2px;
|
|
margin: 2px;
|
|
width: 4em;
|
|
height: 4em;
|
|
}
|
|
|
|
.tc-colour-chooser a {
|
|
padding: 3px;
|
|
width: 2em;
|
|
height: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-image-chooser a:hover,
|
|
.tc-colour-chooser a:hover {
|
|
background: <<colour primary>>;
|
|
padding: 0px;
|
|
border: 3px solid <<colour primary>>;
|
|
}
|
|
|
|
.tc-image-chooser a svg,
|
|
.tc-image-chooser a img {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 3.5em;
|
|
max-height: 3.5em;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
/*
|
|
** Modals
|
|
*/
|
|
|
|
.tc-modal-wrapper {
|
|
position: fixed;
|
|
overflow: auto;
|
|
overflow-y: scroll;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 900;
|
|
}
|
|
|
|
.tc-modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
background-color: <<colour modal-backdrop>>;
|
|
}
|
|
|
|
.tc-modal {
|
|
z-index: 1100;
|
|
background-color: <<colour modal-background>>;
|
|
border: 1px solid <<colour modal-border>>;
|
|
}
|
|
|
|
@media (max-width: 55em) {
|
|
.tc-modal {
|
|
position: fixed;
|
|
top: 1em;
|
|
left: 1em;
|
|
right: 1em;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 55em) {
|
|
.tc-modal {
|
|
position: fixed;
|
|
top: 2em;
|
|
left: 25%;
|
|
width: 50%;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
.tc-modal-header {
|
|
padding: 9px 15px;
|
|
border-bottom: 1px solid <<colour modal-header-border>>;
|
|
}
|
|
|
|
.tc-modal-header h3 {
|
|
margin: 0;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.tc-modal-header img, .tc-modal-header svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.tc-modal-footer {
|
|
padding: 14px 15px 15px;
|
|
margin-bottom: 0;
|
|
text-align: right;
|
|
background-color: <<colour modal-footer-background>>;
|
|
border-top: 1px solid <<colour modal-footer-border>>;
|
|
}
|
|
|
|
.tc-modal-prevent-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
** Centered modals
|
|
*/
|
|
.tc-modal-centered .tc-modal {
|
|
width: auto;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) !important;
|
|
}
|
|
|
|
/*
|
|
** Notifications
|
|
*/
|
|
|
|
.tc-notification {
|
|
position: fixed;
|
|
top: 14px;
|
|
right: 42px;
|
|
z-index: 1300;
|
|
max-width: 280px;
|
|
padding: 0 14px 0 14px;
|
|
background-color: <<colour notification-background>>;
|
|
border: 1px solid <<colour notification-border>>;
|
|
}
|
|
|
|
/*
|
|
** Tabs
|
|
*/
|
|
|
|
.tc-tab-set.tc-vertical {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.tc-tab-buttons {
|
|
font-size: 0.85em;
|
|
padding-top: 1em;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical {
|
|
z-index: 100;
|
|
display: block;
|
|
padding-top: 14px;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
margin-bottom: inherit;
|
|
margin-right: -1px;
|
|
max-width: 33%;
|
|
-webkit-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.tc-tab-buttons button.tc-tab-selected {
|
|
color: <<colour tab-foreground-selected>>;
|
|
background-color: <<colour tab-background-selected>>;
|
|
border-left: 1px solid <<colour tab-border-selected>>;
|
|
border-top: 1px solid <<colour tab-border-selected>>;
|
|
border-right: 1px solid <<colour tab-border-selected>>;
|
|
}
|
|
|
|
.tc-tab-buttons button {
|
|
color: <<colour tab-foreground>>;
|
|
padding: 3px 5px 3px 5px;
|
|
margin-right: 0.3em;
|
|
font-weight: normal;
|
|
border: none;
|
|
background: inherit;
|
|
background-color: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-right: 1px solid <<colour tab-border>>;
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical button {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 3px;
|
|
margin-right: 0;
|
|
text-align: right;
|
|
background-color: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
border-right: none;
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical button.tc-tab-selected {
|
|
background-color: <<colour tab-background-selected>>;
|
|
border-right: 1px solid <<colour tab-background-selected>>;
|
|
}
|
|
|
|
.tc-tab-divider {
|
|
border-top: 1px solid <<colour tab-divider>>;
|
|
}
|
|
|
|
.tc-tab-divider.tc-vertical {
|
|
display: none;
|
|
}
|
|
|
|
.tc-tab-content {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.tc-tab-content.tc-vertical {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-top: 0;
|
|
padding-left: 14px;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
-webkit-flex: 1 0 70%;
|
|
flex: 1 0 70%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour sidebar-tab-background-selected>>;
|
|
color: <<colour sidebar-tab-foreground-selected>>;
|
|
border-left: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
border-top: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
border-right: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons button {
|
|
background-color: <<colour sidebar-tab-background>>;
|
|
color: <<colour sidebar-tab-foreground>>;
|
|
border-left: 1px solid <<colour sidebar-tab-border>>;
|
|
border-top: 1px solid <<colour sidebar-tab-border>>;
|
|
border-right: 1px solid <<colour sidebar-tab-border>>;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-divider {
|
|
border-top: 1px solid <<colour sidebar-tab-divider>>;
|
|
}
|
|
|
|
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
|
|
display: block;
|
|
width: 100%;
|
|
background-color: <<colour sidebar-tab-background>>;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
border-right: 1px solid #ccc;
|
|
margin-bottom: inherit;
|
|
}
|
|
|
|
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
|
|
background-color: <<colour sidebar-tab-background-selected>>;
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
** Manager
|
|
*/
|
|
|
|
.tc-manager-wrapper {
|
|
|
|
}
|
|
|
|
.tc-manager-controls {
|
|
|
|
}
|
|
|
|
.tc-manager-control {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.tc-manager-list {
|
|
width: 100%;
|
|
border-top: 1px solid <<colour muted-foreground>>;
|
|
border-left: 1px solid <<colour muted-foreground>>;
|
|
border-right: 1px solid <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-manager-list-item {
|
|
|
|
}
|
|
|
|
.tc-manager-list-item-heading {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-bottom: 1px solid <<colour muted-foreground>>;
|
|
padding: 3px;
|
|
}
|
|
|
|
.tc-manager-list-item-heading-selected {
|
|
font-weight: bold;
|
|
color: <<colour background>>;
|
|
fill: <<colour background>>;
|
|
background-color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-manager-list-item-heading:hover {
|
|
background: <<colour primary>>;
|
|
color: <<colour background>>;
|
|
}
|
|
|
|
.tc-manager-list-item-content {
|
|
display: flex;
|
|
}
|
|
|
|
.tc-manager-list-item-content-sidebar {
|
|
flex: 1 0;
|
|
background: <<colour tiddler-editor-background>>;
|
|
border-right: 0.5em solid <<colour muted-foreground>>;
|
|
border-bottom: 0.5em solid <<colour muted-foreground>>;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-manager-list-item-content-item-heading {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: <<colour muted-foreground>>;
|
|
text-transform: uppercase;
|
|
font-size: 0.6em;
|
|
font-weight: bold;
|
|
padding: 0.5em 0 0.5em 0;
|
|
}
|
|
|
|
.tc-manager-list-item-content-item-body {
|
|
padding: 0 0.5em 0 0.5em;
|
|
}
|
|
|
|
.tc-manager-list-item-content-item-body > pre {
|
|
margin: 0.5em 0 0.5em 0;
|
|
border: none;
|
|
background: inherit;
|
|
}
|
|
|
|
.tc-manager-list-item-content-tiddler {
|
|
flex: 3 1;
|
|
border-left: 0.5em solid <<colour muted-foreground>>;
|
|
border-right: 0.5em solid <<colour muted-foreground>>;
|
|
border-bottom: 0.5em solid <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-manager-list-item-content-item-body > table {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-manager-list-item-content-item-body > table td {
|
|
border: none;
|
|
}
|
|
|
|
.tc-manager-icon-editor > button {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-manager-icon-editor > button > svg,
|
|
.tc-manager-icon-editor > button > button {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
** Import table
|
|
*/
|
|
|
|
.tc-import-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-import-table svg.tc-image-edit-button {
|
|
max-width: unset;
|
|
}
|
|
|
|
.tc-import-table th:first-of-type {
|
|
width: 10%;
|
|
}
|
|
|
|
.tc-import-table th:last-of-type {
|
|
width: 30%;
|
|
}
|
|
|
|
.tc-import-table .tc-row-disabled {
|
|
background: <<colour very-muted-foreground>>10;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tc-import-table .tc-row-warning {
|
|
background: <<colour diff-delete-background>>50;
|
|
}
|
|
|
|
/*
|
|
** Alerts
|
|
*/
|
|
|
|
.tc-alerts {
|
|
position: fixed;
|
|
top: 28px;
|
|
left: 0;
|
|
right: 0;
|
|
max-width: 50%;
|
|
z-index: 20000;
|
|
}
|
|
|
|
.tc-alert {
|
|
position: relative;
|
|
margin: 14px;
|
|
padding: 7px;
|
|
border: 1px solid <<colour alert-border>>;
|
|
background-color: <<colour alert-background>>;
|
|
}
|
|
|
|
.tc-alert-toolbar {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7px;
|
|
line-height: 0;
|
|
}
|
|
|
|
.tc-alert-toolbar svg {
|
|
fill: <<colour alert-muted-foreground>>;
|
|
}
|
|
|
|
.tc-alert-subtitle {
|
|
color: <<colour alert-muted-foreground>>;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.tc-alert-body > p {
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-alert-highlight {
|
|
color: <<colour alert-highlight>>;
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-static-alert {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-static-alert-inner {
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-static-alert-inner {
|
|
padding: 0 2px 2px 42px;
|
|
color: <<colour static-alert-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Floating drafts list
|
|
*/
|
|
|
|
.tc-drafts-list {
|
|
z-index: 2000;
|
|
position: fixed;
|
|
font-size: 0.8em;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.tc-drafts-list a {
|
|
margin: 0 0.5em;
|
|
padding: 4px 4px;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
border: 1px solid <<colour background>>;
|
|
border-bottom: none;
|
|
background: <<colour dirty-indicator>>;
|
|
color: <<colour background>>;
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-drafts-list a:hover {
|
|
text-decoration: none;
|
|
background: <<colour foreground>>;
|
|
color: <<colour background>>;
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-drafts-list a svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/*
|
|
** Control panel
|
|
*/
|
|
|
|
.tc-control-panel td {
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-plugin-info {
|
|
display: flex;
|
|
text-shadow: none;
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
fill: <<colour muted-foreground>>;
|
|
background-color: <<colour background>>;
|
|
margin: 0.5em 0 0.5em 0;
|
|
padding: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info {
|
|
color: <<colour tiddler-link-foreground>>;
|
|
}
|
|
|
|
|
|
.tc-plugin-info-sub-plugins .tc-plugin-info {
|
|
margin: 0.5em;
|
|
background: <<colour background>>;
|
|
}
|
|
|
|
.tc-plugin-info-sub-plugin-indicator {
|
|
margin: -16px 1em 0 2em;
|
|
}
|
|
|
|
.tc-plugin-info-sub-plugin-indicator button {
|
|
color: <<colour background>>;
|
|
background: <<colour foreground>>;
|
|
border-radius: 8px;
|
|
padding: 2px 7px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.tc-plugin-info-sub-plugins .tc-plugin-info-dropdown {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.tc-plugin-info-disabled {
|
|
background: -webkit-repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);
|
|
background: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);
|
|
}
|
|
|
|
.tc-plugin-info-disabled:hover {
|
|
background: -webkit-repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);
|
|
background: repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);
|
|
}
|
|
|
|
a.tc-tiddlylink.tc-plugin-info:hover {
|
|
text-decoration: none;
|
|
background-color: <<colour primary>>;
|
|
color: <<colour background>>;
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-plugin-info-chunk {
|
|
margin: 2px;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-toggle {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-icon {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-description {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-buttons {
|
|
font-size: 0.8em;
|
|
line-height: 1.2;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-description h1 {
|
|
font-size: 1em;
|
|
line-height: 1.2;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-description h2 {
|
|
font-size: 0.8em;
|
|
line-height: 1.2;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-description div {
|
|
font-size: 0.7em;
|
|
line-height: 1.2;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-toggle img, .tc-plugin-info-chunk.tc-plugin-info-toggle svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background: <<colour background>>;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown-message {
|
|
background: <<colour message-background>>;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown-body {
|
|
padding: 1em 1em 0 1em;
|
|
background: <<colour background>>;
|
|
}
|
|
|
|
.tc-plugin-info-sub-plugins {
|
|
padding: 0.5em;
|
|
margin: 0 1em 1em 1em;
|
|
background: <<colour notification-background>>;
|
|
}
|
|
|
|
.tc-install-plugin {
|
|
font-weight: bold;
|
|
background: green;
|
|
color: white;
|
|
fill: white;
|
|
border-radius: 4px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.tc-install-plugin.tc-reinstall-downgrade {
|
|
background: red;
|
|
}
|
|
|
|
.tc-install-plugin.tc-reinstall {
|
|
background: blue;
|
|
}
|
|
|
|
.tc-install-plugin.tc-reinstall-upgrade {
|
|
background: orange;
|
|
}
|
|
|
|
.tc-check-list {
|
|
line-height: 2em;
|
|
}
|
|
|
|
.tc-check-list .tc-image-button {
|
|
height: 1.5em;
|
|
}
|
|
|
|
/*
|
|
** Message boxes
|
|
*/
|
|
|
|
.tc-message-box {
|
|
border: 1px solid <<colour message-border>>;
|
|
background: <<colour message-background>>;
|
|
padding: 0px 21px 0px 21px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
color: <<colour message-foreground>>;
|
|
}
|
|
|
|
.tc-message-box svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/*
|
|
** Pictures
|
|
*/
|
|
|
|
.tc-bordered-image {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
/*
|
|
** Floats
|
|
*/
|
|
|
|
.tc-float-right {
|
|
float: right;
|
|
}
|
|
|
|
/*
|
|
** Chooser
|
|
*/
|
|
|
|
.tc-chooser {
|
|
border-right: 1px solid <<colour table-header-background>>;
|
|
border-left: 1px solid <<colour table-header-background>>;
|
|
}
|
|
|
|
|
|
.tc-chooser-item {
|
|
border-bottom: 1px solid <<colour table-header-background>>;
|
|
border-top: 1px solid <<colour table-header-background>>;
|
|
padding: 2px 4px 2px 14px;
|
|
}
|
|
|
|
.tc-drop-down .tc-chooser-item {
|
|
padding: 2px;
|
|
}
|
|
|
|
.tc-chosen,
|
|
.tc-chooser-item:hover {
|
|
background-color: <<colour table-header-background>>;
|
|
border-color: <<colour table-footer-background>>;
|
|
}
|
|
|
|
.tc-chosen .tc-tiddlylink {
|
|
cursor:default;
|
|
}
|
|
|
|
.tc-chooser-item .tc-tiddlylink {
|
|
display: block;
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tc-chooser-item:hover .tc-tiddlylink:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-drop-down .tc-chosen .tc-tiddlylink,
|
|
.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-chosen > .tc-tiddlylink:before {
|
|
margin-left: -10px;
|
|
position: relative;
|
|
content: "» ";
|
|
}
|
|
|
|
.tc-chooser-item svg,
|
|
.tc-chooser-item img{
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-language-chooser .tc-image-button img {
|
|
width: 2em;
|
|
vertical-align: -0.15em;
|
|
}
|
|
|
|
/*
|
|
** Palette swatches
|
|
*/
|
|
|
|
.tc-swatches-horiz {
|
|
}
|
|
|
|
.tc-swatches-horiz .tc-swatch {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-swatch {
|
|
width: 2em;
|
|
height: 2em;
|
|
margin: 0.4em;
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
input.tc-palette-manager-colour-input {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
** Table of contents
|
|
*/
|
|
|
|
.tc-sidebar-lists .tc-table-of-contents {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-table-of-contents button {
|
|
color: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-table-of-contents svg {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
vertical-align: middle;
|
|
fill: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-table-of-contents ol {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tc-table-of-contents ol ol {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.tc-table-of-contents li {
|
|
font-size: 1.0em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-table-of-contents li a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-table-of-contents li li {
|
|
font-size: 0.95em;
|
|
font-weight: normal;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-table-of-contents li li a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-table-of-contents li li li {
|
|
font-size: 0.95em;
|
|
font-weight: normal;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tc-table-of-contents li li li li {
|
|
font-size: 0.95em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents {
|
|
z-index: 100;
|
|
display: inline-block;
|
|
padding-left: 1em;
|
|
max-width: 50%;
|
|
-webkit-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
background: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
|
display: block;
|
|
padding: 0.12em 1em 0.12em 0.25em;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {
|
|
border-top: 1px solid <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-background>>;
|
|
border-bottom: 1px solid <<colour tab-background>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {
|
|
text-decoration: none;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
background: <<colour tab-border>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
background: <<colour background>>;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
border: 1px solid <<colour tab-border>>;
|
|
-webkit-flex: 1 0 50%;
|
|
flex: 1 0 50%;
|
|
}
|
|
|
|
/*
|
|
** Dirty indicator
|
|
*/
|
|
|
|
body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg {
|
|
fill: <<colour dirty-indicator>>;
|
|
color: <<colour dirty-indicator>>;
|
|
}
|
|
|
|
/*
|
|
** File inputs
|
|
*/
|
|
|
|
.tc-file-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-file-input-wrapper input[type=file] {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
font-size: 999px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
filter: alpha(opacity=0);
|
|
opacity: 0;
|
|
outline: none;
|
|
background: white;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
cursor:pointer;
|
|
}
|
|
|
|
/*
|
|
** Thumbnail macros
|
|
*/
|
|
|
|
.tc-thumbnail-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tc-thumbnail-right-wrapper {
|
|
float:right;
|
|
margin: 0.5em 0 0.5em 0.5em;
|
|
}
|
|
|
|
.tc-thumbnail-image {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-image svg,
|
|
.tc-thumbnail-image img {
|
|
filter: alpha(opacity=1);
|
|
opacity: 1;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-image img {
|
|
filter: alpha(opacity=0.8);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tc-thumbnail-background {
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-icon svg,
|
|
.tc-thumbnail-icon img {
|
|
width: 3em;
|
|
height: 3em;
|
|
<<filter "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))">>
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
|
|
fill: #fff;
|
|
<<filter "drop-shadow(3px 3px 4px rgba(0,0,0,0.6))">>
|
|
}
|
|
|
|
.tc-thumbnail-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: -webkit-flex;
|
|
-webkit-align-items: center;
|
|
-webkit-justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tc-thumbnail-caption {
|
|
position: absolute;
|
|
background-color: #777;
|
|
color: #fff;
|
|
text-align: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
filter: alpha(opacity=0.9);
|
|
opacity: 0.9;
|
|
line-height: 1.4;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {
|
|
filter: alpha(opacity=1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/*
|
|
** Diffs
|
|
*/
|
|
|
|
.tc-diff-equal {
|
|
background-color: <<colour diff-equal-background>>;
|
|
color: <<colour diff-equal-foreground>>;
|
|
}
|
|
|
|
.tc-diff-insert {
|
|
background-color: <<colour diff-insert-background>>;
|
|
color: <<colour diff-insert-foreground>>;
|
|
}
|
|
|
|
.tc-diff-delete {
|
|
background-color: <<colour diff-delete-background>>;
|
|
color: <<colour diff-delete-foreground>>;
|
|
}
|
|
|
|
.tc-diff-invisible {
|
|
background-color: <<colour diff-invisible-background>>;
|
|
color: <<colour diff-invisible-foreground>>;
|
|
}
|
|
|
|
.tc-diff-tiddlers th {
|
|
text-align: right;
|
|
background: <<colour background>>;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tc-diff-tiddlers pre {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
/*
|
|
** Errors
|
|
*/
|
|
|
|
.tc-error {
|
|
background: #f00;
|
|
color: #fff;
|
|
}
|
|
|
|
/*
|
|
** Tree macro
|
|
*/
|
|
|
|
.tc-tree div {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.tc-tree ol {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tc-tree ol ol {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.tc-tree button {
|
|
color: #acacac;
|
|
}
|
|
|
|
.tc-tree svg {
|
|
fill: #acacac;
|
|
}
|
|
|
|
.tc-tree span svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tc-tree li span {
|
|
color: lightgray;
|
|
}
|
|
|
|
select {
|
|
color: <<colour select-tag-foreground>>;
|
|
background: <<colour select-tag-background>>;
|
|
}
|
|
|
|
/*
|
|
** Utility classes for SVG icons
|
|
*/
|
|
|
|
.tc-fill-background {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
/*
|
|
** Flexbox utility classes
|
|
*/
|
|
|
|
.tc-flex {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.tc-flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tc-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tc-flex-grow-1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tc-flex-grow-2 {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
/*
|
|
** Other utility classes
|
|
*/
|
|
|
|
.tc-tiny-gap {
|
|
margin-left: .25em;
|
|
margin-right: .25em;
|
|
}
|
|
|
|
.tc-tiny-gap-left {
|
|
margin-left: .25em;
|
|
}
|
|
|
|
.tc-tiny-gap-right {
|
|
margin-right: .25em;
|
|
}
|
|
|
|
.tc-small-gap {
|
|
margin-left: .5em;
|
|
margin-right: .5em;
|
|
}
|
|
|
|
.tc-small-gap-left {
|
|
margin-left: .5em;
|
|
}
|
|
|
|
.tc-small-gap-right {
|
|
margin-right: .5em;
|
|
}
|
|
|
|
.tc-big-gap {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.tc-big-gap-left {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.tc-big-gap-right {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.tc-word-break {
|
|
word-break: break-all;
|
|
}
|