mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-30 05:19:57 +00:00
cff685ea11
The intention was to horizontally align the body text with the text within the test case. However, it also caused an overflow when used within vertical tabs (as in the release note)
3504 lines
65 KiB
Plaintext
3504 lines
65 KiB
Plaintext
title: $:/themes/tiddlywiki/vanilla/base
|
|
tags: [[$:/tags/Stylesheet]]
|
|
list-before:
|
|
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;
|
|
}
|
|
|
|
/*
|
|
** Button default styles. Makes them look consistent for all browsers
|
|
*/
|
|
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;
|
|
}
|
|
|
|
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>>;
|
|
}
|
|
|
|
.tc-inline-style {
|
|
background: <<colour highlight-background>>;
|
|
color: <<colour highlight-foreground>>;
|
|
}
|
|
|
|
form.tc-form-inline {
|
|
display: inline;
|
|
}
|
|
|
|
/*
|
|
Markdown likes putting code elements inside pre elements
|
|
*/
|
|
pre > code {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/*
|
|
Table defaults
|
|
*/
|
|
|
|
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>>;
|
|
}
|
|
|
|
/*
|
|
Table utility classes
|
|
*/
|
|
|
|
/* Remove borders from table as used in eg: GettingStarted*/
|
|
.tc-table-no-border,
|
|
.tc-table-no-border th,
|
|
.tc-table-no-border td {
|
|
border: initial;
|
|
}
|
|
|
|
/* First column in table width will fit to text.*/
|
|
/* This rule makes most sense with tc-first-link-nowrap*/
|
|
.tc-first-col-min-width td:nth-child(1) {
|
|
width: 1%;
|
|
}
|
|
|
|
/*
|
|
** Utility classes work well with tables but also for other containers
|
|
*/
|
|
|
|
/* First link A element will not wrap */
|
|
.tc-first-link-nowrap:first-of-type a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Move the table to the center of the container */
|
|
.tc-center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tc-max-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-max-width-80 {
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* Allow input and textarea to look like the ControlPanel inputs */
|
|
.tc-edit-max-width input,
|
|
.tc-edit-max-width textarea {
|
|
width: 100%;
|
|
padding: 3px;
|
|
}
|
|
|
|
/*
|
|
CSV parser plugin
|
|
*/
|
|
|
|
.tc-csv-table {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-csv-table th,
|
|
.tc-csv-table td {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/*
|
|
Tiddler frame in story river
|
|
*/
|
|
|
|
.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;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: {{{ [{$:/palette}get[color-scheme]] ~light }}};
|
|
}
|
|
|
|
/*
|
|
** 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 */
|
|
-webkit-touch-callout: none; /* Prevents long presses from bringing up a link preview */
|
|
}
|
|
|
|
.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: break-spaces;
|
|
vertical-align: baseline;
|
|
background-color: <<colour tag-background>>;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.tc-sidebar-scrollable .tc-tag-label {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.tc-untagged-separator {
|
|
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 {
|
|
}
|
|
|
|
.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;
|
|
margin-bottom: 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-tiddler-title-icon svg {
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
}
|
|
|
|
.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;
|
|
padding: 3px; /* make space for outline */
|
|
}
|
|
|
|
.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-single-tiddler-window .tc-tiddler-body,
|
|
.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 */
|
|
}
|
|
|
|
/*
|
|
* Tiddler in a new window.
|
|
* Also see: .tc-single-tiddler-window .tc-tiddler-body, above
|
|
*/
|
|
|
|
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-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {
|
|
grid-area: toolbar;
|
|
}
|
|
|
|
.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 .tc-drop-down button.tc-btn-mini {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.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-page-container.tc-page-view-zoomin .tc-tiddler-frame {
|
|
width: 100%;
|
|
width: calc(100% - 42px);
|
|
}
|
|
|
|
""" hiddenSidebarText:"""
|
|
|
|
.tc-story-river {
|
|
padding-right: 3em;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
|
|
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>>;
|
|
}
|
|
|
|
.tc-page-controls svg.tc-image-layout-button {
|
|
fill: <<colour toolbar-options-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-editor {
|
|
display: grid;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {
|
|
grid-template-areas:
|
|
"toolbar toolbar"
|
|
"editor preview";
|
|
grid-template-columns: repeat(2, minmax(0px, 1fr));
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {
|
|
grid-template-areas:
|
|
"toolbar"
|
|
"editor";
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
|
|
grid-area: preview;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
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-editor.tc-tiddler-preview .tc-edit-texteditor,
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {
|
|
grid-area: editor;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,
|
|
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {
|
|
grid-area: editor;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.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-page-container.tc-page-view-zoomin .tc-tiddler-frame {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
|
|
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;
|
|
}
|
|
|
|
/* Make search dropdown visible on small screens. issue #7003 */
|
|
@media (max-width: <<sidebarbreakpoint>>) {
|
|
|
|
.tc-sidebar-search .tc-block-dropdown-wrapper {
|
|
position: initial;
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
** 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-control select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.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-control-panel-setting {
|
|
border-top: 1px solid <<colour blockquote-bar>>;
|
|
}
|
|
|
|
.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-stability {
|
|
margin-right: 4px;
|
|
padding: 1px 3px;
|
|
font-size: 0.8em;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-plugin-info-chunk .tc-plugin-info-stability-stable {
|
|
border: 1px solid <<colour stability-stable>>;
|
|
color: <<colour stability-stable>>;
|
|
}
|
|
|
|
.tc-plugin-info-chunk .tc-plugin-info-stability-experimental {
|
|
border: 1px solid <<colour stability-experimental>>;
|
|
color: <<colour stability-experimental>>;
|
|
}
|
|
|
|
.tc-plugin-info-chunk .tc-plugin-info-stability-deprecated {
|
|
border: 1px solid <<colour stability-deprecated>>;
|
|
color: <<colour stability-deprecated>>;
|
|
}
|
|
|
|
.tc-plugin-info-chunk .tc-plugin-info-stability-legacy {
|
|
border: 1px solid <<colour stability-legacy>>;
|
|
color: <<colour stability-legacy>>;
|
|
}
|
|
|
|
.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.8em;
|
|
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,
|
|
.tc-table-of-contents .toc-item-muted {
|
|
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
|
|
*/
|
|
|
|
html body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {
|
|
visibility: visible;
|
|
}
|
|
|
|
html body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {
|
|
visibility: hidden;
|
|
}
|
|
|
|
html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {
|
|
visibility: visible;
|
|
}
|
|
|
|
html body.tc-dirty span.tc-dirty-indicator, html 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>>;
|
|
}
|
|
|
|
/*
|
|
** Translink macro
|
|
*/
|
|
|
|
.tc-translink {
|
|
background-color: <<colour pre-background>>;
|
|
border: 1px solid <<colour pre-border>>;
|
|
padding: 0 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
div.tc-translink > div {
|
|
margin: 1em;
|
|
}
|
|
|
|
div.tc-translink > div > a:first-child > h1 {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.tc-translink > a:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
** Classes for displaying globals
|
|
*/
|
|
|
|
.tc-global-tiddler-body {
|
|
padding: 0.25em;
|
|
border: 1px solid <<colour foreground>>;
|
|
background-color: <<colour muted-foreground>>;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tc-global-tiddler-body-heading {
|
|
margin: 0 0 0.25em 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-global-tiddler-body-type {
|
|
margin: 0 0 0.25em 0;
|
|
border-bottom: 1px solid <<colour foreground>>;
|
|
}
|
|
|
|
.tc-global-tiddler-body-details {
|
|
background-color: <<colour background>>;
|
|
}
|
|
|
|
.tc-global-tiddler-body pre {
|
|
margin: 0;
|
|
border: 1px solid <<colour foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Utility classes for SVG icons
|
|
*/
|
|
|
|
.tc-fill-background {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-network-activity-background {
|
|
fill: <<colour network-activity-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Test Cases
|
|
*/
|
|
|
|
.tc-test-case-wrapper {
|
|
border: 1px solid <<colour foreground>>;
|
|
background-color: <<colour muted-foreground>>;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.tc-test-case-wrapper {
|
|
background-color: <<colour testcase-accent-level-1>>;
|
|
}
|
|
|
|
.tc-test-case-wrapper .tc-test-case-wrapper {
|
|
background-color: <<colour testcase-accent-level-2>>;
|
|
}
|
|
|
|
.tc-test-case-wrapper .tc-test-case-wrapper .tc-test-case-wrapper {
|
|
background-color: <<colour testcase-accent-level-3>>;
|
|
}
|
|
|
|
.tc-test-case-header {
|
|
font-weight: normal;
|
|
margin: 0.5em 0;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
.tc-test-case-divider {
|
|
x-background-color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-test-case-result-icon {
|
|
fill: #fff;
|
|
padding: 0.25em;
|
|
display: inline-block;
|
|
line-height: 0;
|
|
border-radius: 1em;
|
|
vertical-align: text-bottom;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.tc-test-case-result-icon-pass {
|
|
background-color: green;
|
|
}
|
|
|
|
.tc-test-case-result-icon-fail {
|
|
background-color: red;
|
|
}
|
|
|
|
.tc-test-case-result-icon svg {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
}
|
|
|
|
.tc-test-case-header > h2 {
|
|
background: <<colour background>>;
|
|
border-radius: 4px;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.tc-test-case-header > h2,
|
|
.tc-test-case-source > pre {
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-test-case-header > h2 a.tc-tiddlylink-missing {
|
|
font-style: normal;
|
|
}
|
|
|
|
.tc-test-case-toolbar {
|
|
float: right;
|
|
}
|
|
|
|
.tc-test-case-toolbar svg {
|
|
fill: <<colour tiddler-controls-foreground>>;
|
|
}
|
|
|
|
.tc-test-case-toolbar .tc-drop-down {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.tc-test-case-result-fail {
|
|
border: 1px solid <<colour foreground>>;
|
|
background-color: <<colour background>>;
|
|
border-radius: 4px;
|
|
margin: 0 0.5em;
|
|
padding: 0;
|
|
}
|
|
|
|
.tc-test-case-result-fail-header {
|
|
background: <<colour diff-delete-background>>;
|
|
color: <<colour diff-delete-foreground>>;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-test-case-result-fail-body {
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-test-case-source > pre {
|
|
height: 100%;
|
|
}
|
|
|
|
.tc-test-case-narrative {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.tc-test-case-panes {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
padding: 0.5em;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.tc-test-case-source {
|
|
flex: 1 0 49%;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.tc-test-case-source .tc-tab-content {
|
|
background: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-test-case-source .tc-tab-content .tc-field-table {
|
|
background: <<colour background>>;
|
|
}
|
|
|
|
.tc-test-case-source .tc-field-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-test-case-source table.tc-field-table {
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-test-case-source .tc-tiddler-frame .tc-edit-texteditor {
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-test-case-divider {
|
|
flex: 0 0 1.5%;
|
|
}
|
|
|
|
.tc-test-case-source .tc-tab-buttons {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tc-test-case-footer-toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.tc-test-case-output {
|
|
box-shadow: inset 2px 2px 10px 0px <<colour muted-foreground>>;
|
|
background: <<colour background>>;
|
|
border-radius: 4px;
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
flex: 1 0 49%;
|
|
min-width: 250px;
|
|
padding: 0.25em 1em;
|
|
}
|
|
|
|
/*
|
|
** 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
|
|
*/
|
|
|
|
/* Horizontal gaps */
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Vertical gaps */
|
|
|
|
.tc-tiny-v-gap-bottom {
|
|
margin-bottom: 3px;
|
|
}
|