{"tiddlers":{"$:/themes/tiddlywiki/vanilla/themetweaks":{"title":"$:/themes/tiddlywiki/vanilla/themetweaks","tags":"$:/tags/ControlPanel/Appearance","caption":"{{$:/language/ThemeTweaks/ThemeTweaks}}","text":"\\define lingo-base() $:/language/ThemeTweaks/\n\n\\define replacement-text()\n[img[$(imageTitle)$]]\n\\end\n\n\\define backgroundimage-dropdown()\n

\n<$set name=\"state\" value=<>>\n<$button popup=<> class=\"tc-btn-invisible tc-btn-dropdown\">{{$:/core/images/down-arrow}}\n<$reveal state=<> type=\"popup\" position=\"belowleft\" text=\"\" default=\"\" class=\"tc-popup-keep\">\n

\n<$macrocall $name=\"image-picker\" actions=\"\"\"\n\n<$action-setfield\n\t$tiddler=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\"\n\t$value=<>\n/>\n\n<$action-deletetiddler $tiddler=<>/>\n\n\"\"\"/>\n

\n\n\n

\n\\end\n\n\\define backgroundimageattachment-dropdown()\n<$select tiddler=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\" default=\"scroll\">\n\n\n\n\\end\n\n\\define backgroundimagesize-dropdown()\n<$select tiddler=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\" default=\"scroll\">\n\n\n\n\n\\end\n\n<>\n\n! <>\n\n|<$link to=\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\"><> |<$select tiddler=\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\"> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/options/stickytitles\"><>
//<>// |<$select tiddler=\"$:/themes/tiddlywiki/vanilla/options/stickytitles\"> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/options/codewrapping\"><> |<$select tiddler=\"$:/themes/tiddlywiki/vanilla/options/codewrapping\"> |\n\n! <>\n\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\" default=\"\" tag=\"input\"/> | |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\" default=\"\" tag=\"input\"/> | |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/editorfontfamily\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/settings/editorfontfamily\" default=\"\" tag=\"input\"/> | |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\" default=\"\" tag=\"input\"/> |<> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\"><> |<> | |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\"><> |<> | |\n\n! <>\n\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\"><> |<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/storytop\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/storytop\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/storyright\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/storyright\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\"><>
//<>//
|^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\" default=\"\" tag=\"input\"/> |\n|<$link to=\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\"><>
//<>// |^<$edit-text tiddler=\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\" default=\"\" tag=\"input\"/> |\n"},"$:/themes/tiddlywiki/vanilla/base":{"title":"$:/themes/tiddlywiki/vanilla/base","tags":"[[$:/tags/Stylesheet]]","list-before":"","code-body":"yes","text":"\\define custom-background-datauri()\n<$set name=\"background\" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}>\n<$list filter=\"[is[image]]\">\n`background: url(`\n<$list filter=\"[!has[_canonical_uri]]\">\n`\"`<$macrocall $name=\"datauri\" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>`\"`\n\n<$list filter=\"[has[_canonical_uri]]\">\n`\"`<$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field=\"_canonical_uri\"/>`\"`\n\n`) center center;`\n`background-attachment: `{{$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment}}`;\n-webkit-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\n-moz-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\n-o-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\nbackground-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;`\n\n\n\\end\n\n\\define sidebarbreakpoint()\n<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>\n\\end\n\n\\define sidebarbreakpoint-minus-one()\n<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>\n\\end\n\n\\define if-fluid-fixed(text,hiddenSidebarText)\n<$reveal state=\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\" type=\"match\" text=\"fluid-fixed\">\n$text$\n<$reveal state=\"$:/state/sidebar\" type=\"nomatch\" text=\"yes\" default=\"yes\">\n$hiddenSidebarText$\n\n\n\\end\n\n\\define if-editor-height-fixed(then,else)\n<$reveal state=\"$:/config/TextEditor/EditorHeight/Mode\" type=\"match\" text=\"fixed\">\n$then$\n\n<$reveal state=\"$:/config/TextEditor/EditorHeight/Mode\" type=\"match\" text=\"auto\">\n$else$\n\n\\end\n\n\\define set-type-selector-min-width()\n<$set name=\"typeLength\" value={{{ [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]get[name]length[]maxall[]] }}}>\n\n\t.tc-type-selector-dropdown-wrapper {\n\t\tmin-width: calc(<>ch + 4em);\n\t}\n\n\t.tc-type-selector-dropdown-wrapper input.tc-edit-typeeditor {\n\t\tmin-width: <>ch;\n\t}\n\n\n\\end\n\n\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock\n\n/*\n** Start with the normalize CSS reset, and then belay some of its effects\n*/\n\n{{$:/themes/tiddlywiki/vanilla/reset}}\n\ninput[type=\"search\"] {\n\toutline-offset: initial;\n}\n\nbutton:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {\n\toutline: 2px solid <>;\n\toutline-offset: -2px;\n\tborder-radius: 0.25em;\n}\n\nbutton:-moz-focusring, input:-moz-focusring, textarea:-moz-focusring, select:-moz-focusring {\n\toutline: 2px solid <>;\n\toutline-offset: -2px;\n\tborder-radius: 0.25em;\n}\n\n/*\n** Button default styles. Makes them look consistent for all browsers\n*/\nhtml button {\n\tline-height: 1.2;\n\tcolor: <>;\n\tfill: <>;\n\tbackground: <>;\n\tborder-color: <>;\n\tcursor: pointer;\n}\n\nbutton:disabled {\n\tcursor: default;\n\tcolor: <>;\n}\n\nbutton:disabled svg {\n\tfill: <>;\n}\n\n/*\n** Basic element styles\n*/\n\nhtml, body {\n\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};\n\ttext-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml:-webkit-full-screen {\n\tbackground-color: <>;\n}\n\nbody.tc-body {\n\tfont-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};\n\tline-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};\n\tword-wrap: break-word;\n\t<>\n\tcolor: <>;\n\tbackground-color: <>;\n\tfill: <>;\n}\n\n<>\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n\tfont-size: 2em;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tline-height: 1.2;\n\tfont-weight: normal;\n}\n\npre {\n\tdisplay: block;\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\tword-break: normal;\n\tword-wrap: break-word;\n\twhite-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n\tpadding: 0 3px 2px;\n\tborder-radius: 3px;\n\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};\n}\n\ncode {\n\tcolor: <>;\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n\twhite-space: pre-wrap;\n\tpadding: 0 3px 2px;\n\tborder-radius: 3px;\n\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};\n}\n\nblockquote {\n\tborder-left: 5px solid <>;\n\tmargin-left: 25px;\n\tpadding-left: 10px;\n\tquotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\n}\n\nblockquote > div {\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n}\n\nblockquote.tc-big-quote {\n\tfont-family: Georgia, serif;\n\tposition: relative;\n\tbackground: <>;\n\tborder-left: none;\n\tmargin-left: 50px;\n\tmargin-right: 50px;\n\tpadding: 10px;\n\tborder-radius: 8px;\n}\n\nblockquote.tc-big-quote cite:before {\n\tcontent: \"\\2014 \\2009\";\n}\n\nblockquote.tc-big-quote:before {\n\tfont-family: Georgia, serif;\n\tcolor: <>;\n\tcontent: open-quote;\n\tfont-size: 8em;\n\tline-height: 0.1em;\n\tmargin-right: 0.25em;\n\tvertical-align: -0.4em;\n\tposition: absolute;\n\tleft: -50px;\n\ttop: 42px;\n}\n\nblockquote.tc-big-quote:after {\n\tfont-family: Georgia, serif;\n\tcolor: <>;\n\tcontent: close-quote;\n\tfont-size: 8em;\n\tline-height: 0.1em;\n\tmargin-right: 0.25em;\n\tvertical-align: -0.4em;\n\tposition: absolute;\n\tright: -80px;\n\tbottom: -20px;\n}\n\ndl dt {\n\tfont-weight: bold;\n\tmargin-top: 6px;\n}\n\ntextarea,\ninput[type=text],\ninput[type=search],\ninput[type=number],\ninput[type=password],\ninput[type=email],\ninput[type=tel],\ninput[type=url],\ninput[type=\"\"],\ninput:not([type]) {\n\tcolor: <>;\n\tbackground: <>;\n}\n\ninput[type=\"checkbox\"] {\n\tvertical-align: middle;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n\t-webkit-appearance:none;\n}\n\n.tc-muted {\n\tcolor: <>;\n}\n\nsvg.tc-image-button {\n\tpadding: 0px 1px 1px 0px;\n}\n\n.tc-icon-wrapper > svg {\n\twidth: 1em;\n\theight: 1em;\n}\n\nkbd {\n\tdisplay: inline-block;\n\tpadding: 3px 5px;\n\tfont-size: 0.8em;\n\tline-height: 1.2;\n\tcolor: <>;\n\tvertical-align: middle;\n\tbackground-color: <>;\n\tborder: solid 1px <>;\n\tborder-bottom-color: <>;\n\tborder-radius: 3px;\n\tbox-shadow: inset 0 -1px 0 <>;\n}\n\n::selection {\n\tbackground-color: Highlight;\n\tcolor: HighlightText;\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n.tc-inline-style {\n\tbackground: <>;\n\tcolor: <>;\n}\n\n/* Markdown uses mark element to highlight */\n\nmark {\n\tbackground: <>;\n\tcolor: <>;\n}\n\nform.tc-form-inline {\n\tdisplay: inline;\n}\n\n/*\nMarkdown likes putting code elements inside pre elements\n*/\npre > code {\n\tdisplay: block;\n\tpadding: 0.5em;\n\tborder: none;\n\twhite-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};\n\tbackground-color: inherit;\n\tcolor: inherit;\n\toverflow-x: auto;\n}\n\n/*\nTable defaults\n*/\n\ntable {\n\tborder: 1px solid <>;\n\twidth: auto;\n\tmax-width: 100%;\n\tcaption-side: bottom;\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\t/* next 2 elements needed, since normalize 8.0.1 */\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\ntable th, table td {\n\tpadding: 0 7px 0 7px;\n\tborder-top: 1px solid <>;\n\tborder-left: 1px solid <>;\n}\n\ntable thead tr td, table th {\n\tbackground-color: <>;\n\tfont-weight: bold;\n}\n\ntable tfoot tr td {\n\tbackground-color: <>;\n}\n\n/*\nTable utility classes\n*/\n\n/* Remove borders from table as used in eg: GettingStarted*/\n.tc-table-no-border,\n.tc-table-no-border th,\n.tc-table-no-border td {\n\tborder: initial;\n}\n\n/* First column in table width will fit to text.*/\n/* This rule makes most sense with tc-first-link-nowrap*/\n.tc-first-col-min-width td:nth-child(1) {\n\twidth: 1%;\n}\n\n/*\n** Utility classes work well with tables but also for other containers\n*/\n\n/* First link A element will not wrap */\n.tc-first-link-nowrap:first-of-type a {\n\twhite-space: nowrap;\n}\n\n/* Move the table to the center of the container */\n.tc-center {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.tc-max-width {\n\twidth: 100%;\n}\n\n.tc-max-width-80 {\n\tmax-width: 80%;\n}\n\n/* Allow input and textarea to look like the ControlPanel inputs */\n.tc-edit-max-width input,\n.tc-edit-max-width textarea {\n\twidth: 100%;\n\tpadding: 3px;\n}\n\n/*\nCSV parser plugin\n*/\n\n.tc-csv-table {\n\twhite-space: nowrap;\n}\n\n.tc-csv-table th,\n.tc-csv-table td {\n\twhite-space: pre-line;\n}\n\n/*\nTiddler frame in story river\n*/\n\n.tc-tiddler-frame img,\n.tc-tiddler-frame svg,\n.tc-tiddler-frame canvas,\n.tc-tiddler-frame embed,\n.tc-tiddler-frame iframe {\n\tmax-width: 100%;\n}\n\n.tc-tiddler-body > embed,\n.tc-tiddler-body > iframe {\n\twidth: 100%;\n\theight: 600px;\n}\n\n:root {\n\tcolor-scheme: {{{ [{$:/palette}get[color-scheme]] ~light }}};\n}\n\n/*\n** Links\n*/\n\nbutton.tc-tiddlylink,\na.tc-tiddlylink {\n\ttext-decoration: none;\n\tfont-weight: 500;\n\tcolor: <>;\n\t-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */\n\t-webkit-touch-callout: none; /* Prevents long presses from bringing up a link preview */\n}\n\n.tc-sidebar-lists a.tc-tiddlylink {\n\tcolor: <>;\n}\n\n.tc-sidebar-lists a.tc-tiddlylink:hover {\n\tcolor: <>;\n}\n\nbutton.tc-tiddlylink:hover,\na.tc-tiddlylink:hover {\n\ttext-decoration: underline;\n}\n\na.tc-tiddlylink-resolves {\n}\n\na.tc-tiddlylink-shadow {\n\tfont-weight: bold;\n}\n\na.tc-tiddlylink-shadow.tc-tiddlylink-resolves {\n\tfont-weight: normal;\n}\n\na.tc-tiddlylink-missing {\n\tfont-style: italic;\n}\n\na.tc-tiddlylink-external {\n\ttext-decoration: underline;\n\tcolor: <>;\n\tbackground-color: <>;\n}\n\na.tc-tiddlylink-external:visited {\n\tcolor: <>;\n\tbackground-color: <>;\n}\n\na.tc-tiddlylink-external:hover {\n\tcolor: <>;\n\tbackground-color: <>;\n}\n\n.tc-drop-down a.tc-tiddlylink:hover {\n\tcolor: <>;\n}\n\n/*\n** Drag and drop styles\n*/\n\n.tc-tiddler-dragger {\n\tposition: relative;\n\tz-index: -10000;\n}\n\n.tc-tiddler-dragger-inner {\n\tposition: absolute;\n\ttop: -1000px;\n\tleft: -1000px;\n\tdisplay: inline-block;\n\tpadding: 8px 20px;\n\tfont-size: 16.9px;\n\tfont-weight: bold;\n\tline-height: 20px;\n\tcolor: <>;\n\ttext-shadow: 0 1px 0 rgba(0, 0, 0, 1);\n\twhite-space: nowrap;\n\tvertical-align: baseline;\n\tbackground-color: <>;\n\tborder-radius: 20px;\n}\n\n.tc-tiddler-dragger-cover {\n\tposition: absolute;\n\tbackground-color: <>;\n}\n\n.tc-page-container > .tc-dropzone {\n\tmin-height: 100vh;\n}\n\n.tc-dropzone {\n\tposition: relative;\n}\n\n.tc-dropzone.tc-dragover:before {\n\tz-index: 10000;\n\tdisplay: block;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbackground: <>;\n\ttext-align: center;\n\tcontent: \"<>\";\n}\n\n.tc-droppable > .tc-droppable-placeholder {\n\tdisplay: none;\n}\n\n.tc-droppable.tc-dragover > .tc-droppable-placeholder {\n\tdisplay: block;\n\tborder: 2px dashed <>;\n}\n\n.tc-draggable {\n\tcursor: move;\n}\n\n.tc-sidebar-tab-open .tc-droppable-placeholder, .tc-tagged-draggable-list .tc-droppable-placeholder,\n.tc-links-draggable-list .tc-droppable-placeholder {\n\tline-height: 2em;\n\theight: 2em;\n}\n\n.tc-sidebar-tab-open-item {\n\tposition: relative;\n}\n\n.tc-sidebar-tab-open .tc-btn-invisible.tc-btn-mini svg {\n\tfont-size: 0.7em;\n\tfill: <>;\n}\n\n/*\n** Plugin reload warning\n*/\n\n.tc-plugin-reload-warning {\n\tz-index: 1000;\n\tdisplay: block;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbackground: <>;\n\ttext-align: center;\n}\n\n/*\n** Buttons\n*/\n\nbutton svg, button img, label svg, label img {\n\tvertical-align: middle;\n}\n\n.tc-btn-invisible {\n\tpadding: 0;\n\tmargin: 0;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tcolor: <>;\n\tfill: <>;\n}\n\nbutton:disabled.tc-btn-invisible {\n\tcursor: default;\n\tcolor: <>;\n}\n\n.tc-btn-boxed {\n\tfont-size: 0.6em;\n\tpadding: 0.2em;\n\tmargin: 1px;\n\tbackground: none;\n\tborder: 1px solid <>;\n\tborder-radius: 0.25em;\n}\n\nhtml body.tc-body .tc-btn-boxed svg {\n\tfont-size: 1.6666em;\n}\n\n.tc-btn-boxed:hover {\n\tbackground: <>;\n\tcolor: <>;\n}\n\nhtml body.tc-body .tc-btn-boxed:hover svg {\n\tfill: <>;\n}\n\n.tc-btn-rounded {\n\tfont-size: 0.5em;\n\tline-height: 2;\n\tpadding: 0em 0.3em 0.2em 0.4em;\n\tmargin: 1px;\n\tborder: 1px solid <>;\n\tbackground: <>;\n\tcolor: <>;\n\tborder-radius: 2em;\n}\n\nhtml body.tc-body .tc-btn-rounded svg {\n\tfont-size: 1.6666em;\n\tfill: <>;\n}\n\n.tc-btn-rounded:hover {\n\tborder: 1px solid <>;\n\tbackground: <>;\n\tcolor: <>;\n}\n\nhtml body.tc-body .tc-btn-rounded:hover svg {\n\tfill: <>;\n}\n\n.tc-btn-icon svg {\n\theight: 1em;\n\twidth: 1em;\n\tfill: <>;\n}\n\n\n.tc-btn-text {\n\tmargin-left: 7px;\n}\n\n/* used for documentation \"fake\" buttons */\n.tc-btn-standard {\n\tline-height: 1.8;\n\tcolor: #667;\n\tbackground-color: #e0e0e0;\n\tborder: 1px solid #888;\n\tpadding: 2px 1px 2px 1px;\n\tmargin: 1px 4px 1px 4px;\n}\n\n.tc-btn-big-green {\n\tdisplay: inline-block;\n\tpadding: 8px;\n\tmargin: 4px 8px 4px 8px;\n\tbackground: <>;\n\tcolor: <>;\n\tfill: <>;\n\tborder: none;\n\tborder-radius: 2px;\n\tfont-size: 1.2em;\n\tline-height: 1.4em;\n\ttext-decoration: none;\n}\n\n.tc-btn-big-green svg,\n.tc-btn-big-green img {\n\theight: 2em;\n\twidth: 2em;\n\tvertical-align: middle;\n\tfill: <>;\n}\n\n.tc-primary-btn {\n\tbackground: <>;\n}\n\n.tc-sidebar-lists input {\n\tcolor: <>;\n}\n\n.tc-sidebar-lists button {\n\tcolor: <>;\n\tfill: <>;\n}\n\n.tc-sidebar-lists button.tc-btn-mini {\n\tcolor: <>;\n}\n\n.tc-sidebar-lists button.tc-btn-mini:hover {\n\tcolor: <>;\n}\n\n.tc-sidebar-lists button small {\n\tcolor: <>;\n}\n\nbutton svg.tc-image-button, button .tc-image-button img {\n\theight: 1em;\n\twidth: 1em;\n}\n\n.tc-unfold-banner {\n\tposition: absolute;\n\tpadding: 0;\n\tmargin: 0;\n\tbackground: none;\n\tborder: none;\n\twidth: 100%;\n\twidth: calc(100% + 2px);\n\tmargin-left: -43px;\n\ttext-align: center;\n\tborder-top: 2px solid <>;\n\tmargin-top: 4px;\n}\n\n.tc-unfold-banner:hover {\n\tbackground: <>;\n\tborder-top: 2px solid <>;\n}\n\n.tc-unfold-banner svg, .tc-fold-banner svg {\n\theight: 0.75em;\n\tfill: <>;\n}\n\n.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {\n\tfill: <>;\n}\n\n.tc-fold-banner {\n\tposition: absolute;\n\tpadding: 0;\n\tmargin: 0;\n\tbackground: none;\n\tborder: none;\n\twidth: 23px;\n\ttext-align: center;\n\tmargin-left: -35px;\n\ttop: 6px;\n\tbottom: 6px;\n}\n\n.tc-fold-banner:hover {\n\tbackground: <>;\n}\n\n@media (max-width: <>) {\n\n\t.tc-unfold-banner {\n\t\tposition: static;\n\t\twidth: calc(100% + 59px);\n\t}\n\n\t.tc-fold-banner {\n\t\twidth: 16px;\n\t\tmargin-left: -16px;\n\t\tfont-size: 0.75em;\n\t}\n\n}\n\n/*\n** Tags and missing tiddlers\n*/\n\n.tc-tag-list-item {\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.tc-tags-wrapper {\n\tmargin: 4px 0 14px 0;\n}\n\n.tc-tags-wrapper .tc-tag-list-item {\n\tmargin-right: 7px;\n}\n\n.tc-missing-tiddler-label {\n\tfont-style: italic;\n\tfont-weight: normal;\n\tdisplay: inline-block;\n\tfont-size: 11.844px;\n\tline-height: 14px;\n\twhite-space: nowrap;\n\tvertical-align: baseline;\n}\n\n.tc-block-tags-dropdown > .tc-btn-invisible:hover {\n\tbackground-color: <>;\n}\n\nbutton.tc-tag-label, span.tc-tag-label {\n\tdisplay: inline-block;\n\tpadding: 0.16em 0.7em;\n\tfont-size: 0.9em;\n\tfont-weight: normal;\n\tline-height: 1.2em;\n\tcolor: <>;\n\twhite-space: break-spaces;\n\tvertical-align: baseline;\n\tbackground-color: <>;\n\tborder-radius: 1em;\n}\n\n.tc-sidebar-scrollable .tc-tag-label {\n\ttext-shadow: none;\n}\n\n.tc-untagged-separator {\n\tborder: 0;\n\theight: 1px;\n\tbackground: <>;\n}\n\nbutton.tc-untagged-label {\n\tbackground-color: <>;\n}\n\n.tc-tag-label svg, .tc-tag-label img {\n\theight: 1em;\n\twidth: 1em;\n\tmargin-right: 3px;\n\tmargin-bottom: 1px;\n\tvertical-align: bottom;\n}\n\n.tc-edit-tags button.tc-remove-tag-button svg {\n\tfont-size: 0.7em;\n\tvertical-align: middle;\n}\n\n.tc-tag-manager-table .tc-tag-label {\n}\n\n.tc-tag-manager-tag {\n\twidth: 100%;\n}\n\nbutton.tc-btn-invisible.tc-remove-tag-button {\n\toutline: none;\n}\n\n.tc-tag-button-selected,\n.tc-list-item-selected a.tc-tiddlylink, a.tc-list-item-selected {\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n/*\n** Page layout\n*/\n\n.tc-topbar {\n\tposition: fixed;\n\tz-index: 1200;\n}\n\n.tc-topbar-left {\n\tleft: 29px;\n\ttop: 5px;\n}\n\n.tc-topbar-right {\n\ttop: 5px;\n\tright: 29px;\n}\n\n@media (max-width: <>) {\n\n\t.tc-topbar-right {\n\t\tright: 10px;\n\t}\n\n}\n\n.tc-topbar button {\n\tpadding: 8px;\n}\n\n.tc-topbar svg {\n\tfill: <>;\n}\n\n.tc-topbar button:hover svg {\n\tfill: <>;\n}\n\n@media (max-width: <>) {\n\n\t.tc-show-sidebar-btn svg.tc-image-chevron-left, .tc-hide-sidebar-btn svg.tc-image-chevron-right {\n\t\ttransform: rotate(-90deg);\n\t}\n\n}\n\n.tc-sidebar-header {\n\tcolor: <>;\n\tfill: <>;\n}\n\n.tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {\n\tfont-weight: normal;\n}\n\n.tc-sidebar-header .tc-sidebar-lists p,\n.tc-sidebar-tools-item {\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n}\n\n.tc-sidebar-header .tc-missing-tiddler-label {\n\tcolor: <>;\n}\n\n.tc-advanced-search input {\n\twidth: 60%;\n}\n\n.tc-search a svg {\n\twidth: 1.2em;\n\theight: 1.2em;\n\tvertical-align: middle;\n}\n\n.tc-page-controls {\n\tmargin-top: 14px;\n\tmargin-bottom: 14px;\n\tfont-size: 1.5em;\n}\n\n.tc-page-controls .tc-drop-down {\n\tfont-size: 1rem;\n}\n\n.tc-page-controls button {\n\tmargin-right: 0.5em;\n}\n\n.tc-page-controls a.tc-tiddlylink:hover {\n\ttext-decoration: none;\n}\n\n.tc-page-controls img {\n\twidth: 1em;\n}\n\n.tc-page-controls svg {\n\tfill: <>;\n}\n\n.tc-page-controls button:hover svg, .tc-page-controls a:hover svg {\n\tfill: <>;\n}\n\n.tc-sidebar-lists .tc-menu-list-item {\n\twhite-space: nowrap;\n}\n\n.tc-menu-list-count {\n\tfont-weight: bold;\n}\n\n.tc-menu-list-subitem {\n\tpadding-left: 7px;\n}\n\n.tc-story-river {\n\tposition: relative;\n}\n\n@media (max-width: <>) {\n\n\t.tc-sidebar-header {\n\t\tpadding: 14px;\n\t\tmin-height: 32px;\n\t\tmargin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\n\t\ttransition: min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;\n\t}\n\n\t<>\n\n\t.tc-story-river {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t}\n}\n\n@media (min-width: <>) {\n\n\t.tc-message-box {\n\t\tmargin: 21px -21px 21px -21px;\n\t}\n\n\t.tc-sidebar-scrollable {\n\t\tposition: fixed;\n\t\ttop: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\n\t\tleft: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};\n\t\tbottom: 0;\n\t\tright: 0;\n\t\toverflow-y: auto;\n\t\toverflow-x: auto;\n\t\t-webkit-overflow-scrolling: touch;\n\t\tmargin: 0 0 0 -42px;\n\t\tpadding: 71px 0 28px 42px;\n\t}\n\n\thtml[dir=\"rtl\"] .tc-sidebar-scrollable {\n\t\tleft: auto;\n\t\tright: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};\n\t}\n\n\t.tc-story-river {\n\t\tposition: relative;\n\t\tleft: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};\n\t\ttop: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\n\t\twidth: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};\n\t\tpadding: 42px 42px 42px 42px;\n\t}\n\n<>\n\n\t.tc-story-river.tc-static-story-river {\n\t\tmargin-right: 0;\n\t\tpadding-right: 42px;\n\t}\n\n}\n\n@media print {\n\n\tbody.tc-body {\n\t\tbackground-color: transparent;\n\t}\n\n\t.tc-sidebar-header, .tc-topbar {\n\t\tdisplay: none;\n\t}\n\n\t.tc-story-river {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.tc-story-river .tc-tiddler-frame {\n\t\tmargin: 0;\n\t\tborder: none;\n\t\tpadding: 0;\n\t}\n}\n\n/*\n** Tiddler styles\n*/\n\n.tc-tiddler-frame {\n\tposition: relative;\n\tmargin-bottom: 28px;\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n}\n\n{{$:/themes/tiddlywiki/vanilla/sticky}}\n\n.tc-tiddler-info {\n\toverflow: hidden;\n\tpadding: 14px 42px 14px 42px;\n\tbackground-color: <>;\n\tborder-top: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-tiddler-info p {\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n}\n\n.tc-tiddler-info .tc-tab-buttons button.tc-tab-selected {\n\tbackground-color: <>;\n\tborder-bottom: 1px solid <>;\n}\n\n@media (max-width: <>) {\n\n\t.tc-tiddler-info {\n\t\tpadding: 14px 14px 14px 14px;\n\t}\n\n}\n\n.tc-view-field-table {\n\twidth: 100%;\n}\n\n.tc-view-field-name {\n\twidth: 1%; /* Makes this column be as narrow as possible */\n\tvertical-align: top;\n\ttext-align: right;\n\tfont-style: italic;\n\tfont-weight: normal;\n}\n\n.tc-view-field-value {\n\tword-break: break-all;\n}\n\n@media (max-width: <>) {\n\t.tc-tiddler-frame {\n\t\tpadding: 14px 14px 14px 14px;\n\t\tmargin-bottom: .5em;\n\t}\n\n\t.tc-tiddler-info {\n\t\tmargin: 0 -14px 0 -14px;\n\t}\n}\n\n@media (min-width: <>) {\n\t.tc-tiddler-frame {\n\t\tpadding: 28px 42px 42px 42px;\n\t\twidth: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};\n\t\tborder-radius: 2px;\n\t}\n\n<>\n\n\t.tc-tiddler-info {\n\t\tmargin: 0 -42px 0 -42px;\n\t}\n}\n\n.tc-site-title,\n.tc-titlebar {\n\tfont-weight: normal;\n\tfont-size: 2.35em;\n\tline-height: 1.35em;\n\tcolor: <>;\n\tmargin: 0;\n}\n\n.tc-site-title {\n\tcolor: <>;\n}\n\n.tc-tiddler-title-icon {\n\tvertical-align: middle;\n\tmargin-right: .1em;\n}\n\n.tc-tiddler-title-icon svg {\n\twidth: 0.9em;\n\theight: 0.9em;\n}\n\n.tc-system-title-prefix {\n\tcolor: <>;\n}\n\n.tc-tiddler-lazy-loading {\n\theight: 4px;\n\twidth: 100%;\n\tbackground: no-repeat linear-gradient(<> 0 0),no-repeat linear-gradient(<> 0 0),<>;\n\tbackground-size: 60% 100%;\n\tanimation: animation-loading-progress 3s infinite;\n}\n\n@keyframes animation-loading-progress {\n\t0% {background-position:-150% 0,-150% 0}\n\t66% {background-position: 250% 0,-150% 0}\n\t100% {background-position: 250% 0, 250% 0}\n}\n\n.tc-titlebar h2 {\n\tfont-size: 1em;\n\tdisplay: inline;\n}\n\n.tc-titlebar img {\n\theight: 1em;\n}\n\n.tc-subtitle {\n\tfont-size: 0.9em;\n\tcolor: <>;\n\tfont-weight: normal;\n}\n\n.tc-subtitle .tc-tiddlylink {\n\tmargin-right: .3em;\n}\n\n.tc-tiddler-missing .tc-title {\n\tfont-style: italic;\n\tfont-weight: normal;\n}\n\n.tc-tiddler-frame .tc-tiddler-controls {\n\tfloat: right;\n\tpadding: 3px; /* make space for outline */\n}\n\n.tc-tiddler-controls .tc-drop-down {\n\tfont-size: 0.6em;\n}\n\n.tc-tiddler-controls .tc-drop-down .tc-drop-down {\n\tfont-size: 1em;\n}\n\n.tc-tiddler-controls > span > button,\n.tc-tiddler-controls > span > span > button,\n.tc-tiddler-controls > span > span > span > button {\n\tvertical-align: baseline;\n\tmargin-left:5px;\n}\n\n.tc-tiddler-controls button svg, .tc-tiddler-controls button img,\n.tc-search button svg, .tc-search a svg {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg, .tc-tiddler-controls button img {\n\theight: 0.75em;\n}\n\n.tc-search button svg, .tc-search a svg {\n\theight: 1.2em;\n\twidth: 1.2em;\n\tmargin: 0 0.25em;\n}\n\n.tc-tiddler-controls button.tc-selected svg,\n.tc-page-controls button.tc-selected svg {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button.tc-btn-invisible:hover svg,\n.tc-search button:hover svg, .tc-search a:hover svg {\n\tfill: <>;\n}\n\n@media print {\n\t.tc-tiddler-controls {\n\t\tdisplay: none;\n\t}\n}\n\n.tc-tiddler-help { /* Help prompts within tiddler template */\n\tcolor: <>;\n\tmargin-top: 14px;\n}\n\n.tc-tiddler-help a.tc-tiddlylink {\n\tcolor: <>;\n}\n\n.tc-tiddler-frame .tc-edit-texteditor {\n\twidth: 100%;\n\tmargin: 4px 0 4px 0;\n}\n\n.tc-tiddler-frame input.tc-edit-texteditor,\n.tc-tiddler-frame textarea.tc-edit-texteditor,\n.tc-tiddler-frame iframe.tc-edit-texteditor,\n.tc-tiddler-frame select.tc-edit-texteditor {\n\tpadding: 3px 3px 3px 3px;\n\tborder: 1px solid <>;\n\tline-height: 1.3em;\n\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};\n}\n\n.tc-tiddler-frame input.tc-edit-texteditor,\n.tc-tiddler-frame textarea.tc-edit-texteditor,\n.tc-tiddler-frame iframe.tc-edit-texteditor {\n\t-webkit-appearance: none;\n}\n\n.tc-tiddler-frame input.tc-edit-texteditor,\n.tc-tiddler-frame select.tc-edit-texteditor,\n.tc-tiddler-frame textarea.tc-edit-texteditor {\n\tbackground-color: <>;\n}\n\n.tc-tiddler-frame iframe.tc-edit-texteditor {\n\tbackground-color: <>;\n}\n\n.tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,\n.tc-tiddler-frame .tc-edit-fields select.tc-edit-fieldeditor,\n.tc-tiddler-frame .tc-edit-fields textarea.tc-edit-fieldeditor {\n\tmargin: 0;\n\tpadding: 2px 3px;\n}\n\n.tc-tiddler-frame .tc-binary-warning {\n\twidth: 100%;\n\theight: 5em;\n\ttext-align: center;\n\tpadding: 3em 3em 6em 3em;\n\tbackground: <>;\n\tborder: 1px solid <>;\n}\n\ncanvas.tc-edit-bitmapeditor {\n\tborder: 6px solid <>;\n\tcursor: crosshair;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\tmargin-top: 6px;\n\tmargin-bottom: 6px;\n}\n\n.tc-edit-bitmapeditor-width {\n\tdisplay: block;\n}\n\n.tc-edit-bitmapeditor-height {\n\tdisplay: block;\n}\n\n.tc-single-tiddler-window .tc-tiddler-body,\n.tc-tiddler-frame .tc-tiddler-body {\n\tfont-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};\n\tline-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};\n}\n\n.tc-titlebar, .tc-tiddler-edit-title {\n\toverflow: hidden; /* https://github.com/TiddlyWiki/TiddlyWiki5/issues/282 */\n}\n\n/*\n* Tiddler in a new window.\n* Also see: .tc-single-tiddler-window .tc-tiddler-body, above\n*/\n\nhtml body.tc-body.tc-single-tiddler-window {\n\tmargin: 1em;\n\tbackground: <>;\n}\n\n.tc-single-tiddler-window img,\n.tc-single-tiddler-window svg,\n.tc-single-tiddler-window canvas,\n.tc-single-tiddler-window embed,\n.tc-single-tiddler-window iframe {\n\tmax-width: 100%;\n}\n\n/*\n** Editor\n*/\n\n.tc-editor-toolbar {\n\tmargin-top: 8px;\n}\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {\n\tgrid-area: toolbar;\n}\n\n.tc-editor-toolbar button {\n\tvertical-align: middle;\n\tbackground-color: <>;\n\tcolor: <>;\n\tfill: <>;\n\tborder-radius: 4px;\n\tpadding: 3px;\n\tmargin: 2px 0 2px 4px;\n}\n\n.tc-editor-toolbar button.tc-text-editor-toolbar-item-adjunct {\n\tmargin-left: 1px;\n\twidth: 1em;\n\tborder-radius: 8px;\n}\n\n.tc-editor-toolbar button.tc-text-editor-toolbar-item-start-group {\n\tmargin-left: 11px;\n}\n\n.tc-editor-toolbar button.tc-selected {\n\tbackground-color: <>;\n}\n\n.tc-editor-toolbar button svg {\n\twidth: 1.6em;\n\theight: 1.2em;\n}\n\n.tc-editor-toolbar .tc-drop-down button.tc-btn-mini {\n\tpadding: 2px 4px;\n}\n\n.tc-editor-toolbar button:hover {\n\tbackground-color: <>;\n\tfill: <>;\n\tcolor: <>;\n}\n\n.tc-editor-toolbar .tc-text-editor-toolbar-more {\n\twhite-space: normal;\n}\n\n.tc-editor-toolbar .tc-text-editor-toolbar-more button {\n\tdisplay: inline-block;\n\tpadding: 3px;\n\twidth: auto;\n}\n\n.tc-editor-toolbar .tc-search-results {\n\tpadding: 0;\n}\n\n.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down > p {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down a.tc-tiddlylink {\n\tfont-weight: normal;\n}\n\n/*\n** Adjustments for fluid-fixed mode\n*/\n\n@media (min-width: <>) {\n\n<>\n\n}\n\n/*\n** Toolbar buttons\n*/\n\n.tc-page-controls svg.tc-image-new-button {\n\tfill: <>;\n}\n\n.tc-page-controls svg.tc-image-options-button {\n\tfill: <>;\n}\n\n.tc-page-controls svg.tc-image-save-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-info-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-edit-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-close-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-delete-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-cancel-button {\n\tfill: <>;\n}\n\n.tc-tiddler-controls button svg.tc-image-done-button {\n\tfill: <>;\n}\n\n.tc-page-controls svg.tc-image-layout-button {\n\tfill: <>;\n}\n\n/*\n** Tiddler edit mode\n*/\n\n.tc-tiddler-edit-frame em.tc-edit {\n\tcolor: <>;\n\tfont-style: normal;\n}\n\n.tc-edit-type-dropdown a.tc-tiddlylink-missing {\n\tfont-style: normal;\n}\n\n.tc-type-selector .tc-edit-typeeditor {\n\twidth: auto;\n}\n\n.tc-type-selector-dropdown-wrapper {\n\tdisplay: inline-block;\n}\n\n<>\n\n.tc-edit-tags {\n\tborder: 1px solid <>;\n\tpadding: 4px 8px 4px 8px;\n}\n\n.tc-edit-add-tag {\n\tdisplay: inline-block;\n}\n\n.tc-edit-add-tag .tc-add-tag-name input {\n\twidth: 50%;\n}\n\n.tc-edit-add-tag .tc-keyboard {\n\tdisplay:inline;\n}\n\n.tc-edit-tags .tc-tag-label {\n\tdisplay: inline-block;\n}\n\n.tc-edit-tags-list {\n\tmargin: 14px 0 14px 0;\n}\n\n.tc-remove-tag-button {\n\tpadding-left: 4px;\n}\n\n.tc-tiddler-editor {\n\tdisplay: grid;\n}\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {\n\tgrid-template-areas:\n\t\t\"toolbar toolbar\"\n\t\t\"editor preview\";\n\tgrid-template-columns: repeat(2, minmax(0px, 1fr));\n\tgrid-template-rows: auto 1fr;\n}\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {\n\tgrid-template-areas:\n\t\t\"toolbar\"\n\t\t\"editor\";\n\tgrid-template-columns: 1fr;\n\tgrid-template-rows: auto 1fr;\n}\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {\n\tgrid-area: preview;\n\toverflow-wrap: anywhere;\n\tword-break: normal;\n\tborder: 1px solid <>;\n\tmargin: 4px 0 3px 3px;\n\tpadding: 3px 3px 3px 3px;\n}\n\n<>\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-edit-texteditor,\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {\n\tgrid-area: editor;\n}\n\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {\n\tgrid-area: editor;\n\tmax-width: 100%;\n}\n\n.tc-edit-fields {\n\twidth: 100%;\n}\n\n.tc-edit-fields.tc-edit-fields-small {\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n}\n\n.tc-edit-fields table, .tc-edit-fields tr, .tc-edit-fields td {\n\tborder: none;\n\tpadding: 4px;\n}\n\n.tc-edit-fields > tbody > .tc-edit-field:nth-child(odd) {\n\tbackground-color: <>;\n}\n\n.tc-edit-fields > tbody > .tc-edit-field:nth-child(even) {\n\tbackground-color: <>;\n}\n\n.tc-edit-field-name {\n\ttext-align: right;\n}\n\n.tc-edit-field-value input {\n\twidth: 100%;\n}\n\n.tc-edit-field-remove {\n}\n\n.tc-edit-field-remove svg {\n\theight: 1em;\n\twidth: 1em;\n\tfill: <>;\n\tvertical-align: middle;\n}\n\n.tc-edit-field-add-name-wrapper input.tc-edit-texteditor {\n\twidth: auto;\n}\n\n.tc-edit-field-add-name-wrapper {\n\tdisplay: inline-block;\n}\n\n.tc-edit-field-add-value {\n\tdisplay: inline-block;\n}\n\n@media (min-width: <>) {\n\n\t.tc-edit-field-add-value {\n\t\twidth: 35%;\n\t}\n\n}\n\n.tc-edit-field-add-button {\n\tdisplay: inline-block;\n\twidth: 10%;\n}\n\n\n/*\n** Tiddler editor dropzone\n*/\n\n.tc-dropzone-editor {\n\tposition:relative;\n}\n\n.tc-dropzone-editor.tc-dragover .tc-editor-toolbar::after{\n\tz-index: 10000;\n\ttop:0;\n\tleft:0;\n\tright:0;\n\theight: 100%;\n\tbackground: <>;\n\tcontent: \"<>\";\n\tpointer-events: none;\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: <>;\n\tborder: 4px dashed <>;\n\tfont-weight: bold;\n\tfont-size: 150%;\n\topacity: 0.8;\n\tcolor: <>;\n}\n\n.tc-editor-importpopup {\n\twidth: 100%;\n\theight: 100%;\n}\n\n.tc-editor-import {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tbackground: <>;\n\tbox-shadow: 2px 2px 10px <>;\n\tpadding: 10px;\n\twidth: 96%;\n\tborder: 1px solid <>;\n\ttext-align:center;\n}\n\n.tc-editor-import img {\n\tmax-height: 500px;\n}\n\n/*\n** Storyview Classes\n*/\n\n.tc-viewswitcher .tc-image-button {\n\tmargin-right: .3em;\n}\n\n.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\n\tposition: absolute;\n\tdisplay: block;\n\twidth: 100%;\n}\n\n@media (min-width: <>) {\n\n\t.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\n\t\twidth: calc(100% - 84px);\n\t}\n\n}\n\n/*\n** Dropdowns\n*/\n\n.tc-btn-dropdown {\n\ttext-align: left;\n}\n\n.tc-btn-dropdown svg, .tc-btn-dropdown img {\n\theight: 1em;\n\twidth: 1em;\n\tfill: <>;\n}\n\n.tc-drop-down-wrapper {\n\tposition: relative;\n}\n\n.tc-drop-down {\n\tmin-width: 380px;\n\tborder: 1px solid <>;\n\tbackground-color: <>;\n\tpadding: 7px 0 7px 0;\n\tmargin: 4px 0 0 0;\n\twhite-space: nowrap;\n\ttext-shadow: none;\n\tline-height: 1.4;\n}\n\n.tc-drop-down .tc-drop-down {\n\tmargin-left: 14px;\n}\n\n.tc-drop-down button svg, .tc-drop-down a svg {\n\tfill: <>;\n}\n\n.tc-drop-down button:disabled svg {\n\tfill: <>;\n}\n\n.tc-drop-down button.tc-btn-invisible:hover svg {\n\tfill: <>;\n}\n\n.tc-drop-down .tc-drop-down-info {\n\tpadding-left: 14px;\n}\n\n.tc-drop-down p {\n\tpadding: 0 14px 0 14px;\n}\n\n.tc-drop-down svg {\n\twidth: 1em;\n\theight: 1em;\n}\n\n.tc-drop-down img {\n\twidth: 1em;\n}\n\n.tc-drop-down a, .tc-drop-down button {\n\tdisplay: block;\n\tpadding: 0 14px 0 14px;\n\twidth: 100%;\n\ttext-align: left;\n\tcolor: <>;\n\tline-height: 1.4;\n}\n\n.tc-drop-down .tc-tab-set .tc-tab-buttons button {\n\tdisplay: inline-block;\n\twidth: auto;\n\tmargin-bottom: 0px;\n\tborder-bottom-left-radius: 0;\n\tborder-bottom-right-radius: 0;\n}\n\n.tc-drop-down .tc-prompt {\n\tpadding: 0 14px;\n}\n\n.tc-drop-down .tc-chooser {\n\tborder: none;\n}\n\n.tc-drop-down .tc-chooser .tc-swatches-horiz {\n\tfont-size: 0.4em;\n\tpadding-left: 1.2em;\n}\n\n.tc-drop-down .tc-file-input-wrapper {\n\twidth: 100%;\n}\n\n.tc-drop-down .tc-file-input-wrapper button {\n\tcolor: <>;\n}\n\n.tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input-wrapper:hover button {\n\tcolor: <>;\n\tbackground-color: <>;\n\ttext-decoration: none;\n}\n\n.tc-drop-down .tc-tab-buttons button {\n\tbackground-color: <>;\n}\n\n.tc-drop-down .tc-tab-buttons button.tc-tab-selected {\n\tbackground-color: <>;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-drop-down-bullet {\n\tdisplay: inline-block;\n\twidth: 0.5em;\n}\n\n.tc-drop-down .tc-tab-contents a {\n\tpadding: 0 0.5em 0 0.5em;\n}\n\n.tc-block-dropdown-wrapper {\n\tposition: relative;\n}\n\n.tc-block-dropdown {\n\tposition: absolute;\n\tmin-width: 220px;\n\tborder: 1px solid <>;\n\tbackground-color: <>;\n\tpadding: 7px 0;\n\tmargin: 4px 0 0 0;\n\twhite-space: nowrap;\n\tz-index: 1000;\n\ttext-shadow: none;\n}\n\n.tc-block-dropdown.tc-search-drop-down {\n\tmargin-left: -12px;\n}\n\n.tc-block-dropdown a {\n\tdisplay: block;\n\tpadding: 4px 14px 4px 14px;\n}\n\n.tc-block-dropdown.tc-search-drop-down a {\n\tdisplay: block;\n\tpadding: 0px 10px 0px 10px;\n}\n\n.tc-drop-down .tc-dropdown-item-plain,\n.tc-block-dropdown .tc-dropdown-item-plain {\n\tpadding: 4px 14px 4px 7px;\n}\n\n.tc-drop-down .tc-dropdown-item,\n.tc-block-dropdown .tc-dropdown-item {\n\tpadding: 4px 14px 4px 7px;\n\tcolor: <>;\n}\n\n.tc-block-dropdown a.tc-tiddlylink:hover {\n\tcolor: <>;\n\tbackground-color: <>;\n\ttext-decoration: none;\n}\n\n.tc-search-results {\n\tpadding: 0 7px 0 7px;\n}\n\n.tc-image-chooser, .tc-colour-chooser {\n\twhite-space: normal;\n}\n\n.tc-image-chooser a,\n.tc-colour-chooser a {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\ttext-align: center;\n\tposition: relative;\n}\n\n.tc-image-chooser a {\n\tborder: 1px solid <>;\n\tpadding: 2px;\n\tmargin: 2px;\n\twidth: 4em;\n\theight: 4em;\n}\n\n.tc-colour-chooser a {\n\tpadding: 3px;\n\twidth: 2em;\n\theight: 2em;\n\tvertical-align: middle;\n}\n\n.tc-image-chooser a:hover,\n.tc-colour-chooser a:hover {\n\tbackground: <>;\n\tpadding: 0px;\n\tborder: 3px solid <>;\n}\n\n.tc-image-chooser a svg,\n.tc-image-chooser a img {\n\tdisplay: inline-block;\n\twidth: auto;\n\theight: auto;\n\tmax-width: 3.5em;\n\tmax-height: 3.5em;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n}\n\n/* Make search dropdown visible on small screens. issue #7003 */\n@media (max-width: <>) {\n\n\t.tc-sidebar-search .tc-block-dropdown-wrapper {\n\t\tposition: initial;\n\t}\n\n}\n\n/*\n** Modals\n*/\n\n.tc-modal-wrapper {\n\tposition: fixed;\n\toverflow: auto;\n\toverflow-y: scroll;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 900;\n}\n\n.tc-modal-backdrop {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 1000;\n\tbackground-color: <>;\n}\n\n.tc-modal {\n\tz-index: 1100;\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n}\n\n@media (max-width: 55em) {\n\t.tc-modal {\n\t\tposition: fixed;\n\t\ttop: 1em;\n\t\tleft: 1em;\n\t\tright: 1em;\n\t}\n\n\t.tc-modal-body {\n\t\toverflow-y: auto;\n\t\tmax-height: 400px;\n\t\tmax-height: 60vh;\n\t}\n}\n\n@media (min-width: 55em) {\n\t.tc-modal {\n\t\tposition: fixed;\n\t\ttop: 2em;\n\t\tleft: 25%;\n\t\twidth: 50%;\n\t}\n\n\t.tc-modal-body {\n\t\toverflow-y: auto;\n\t\tmax-height: 400px;\n\t\tmax-height: 60vh;\n\t}\n}\n\n.tc-modal-header {\n\tpadding: 9px 15px;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-modal-header h3 {\n\tmargin: 0;\n\tline-height: 30px;\n}\n\n.tc-modal-header img, .tc-modal-header svg {\n\twidth: 1em;\n\theight: 1em;\n}\n\n.tc-modal-body {\n\tpadding: 15px;\n}\n\n.tc-modal-footer {\n\tpadding: 14px 15px 15px;\n\tmargin-bottom: 0;\n\ttext-align: right;\n\tbackground-color: <>;\n\tborder-top: 1px solid <>;\n}\n\n.tc-modal-prevent-scroll {\n\toverflow: hidden;\n}\n\n/*\n** Centered modals\n*/\n.tc-modal-centered .tc-modal {\n\twidth: auto;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%) !important;\n}\n\n/*\n** Notifications\n*/\n\n.tc-notification {\n\tposition: fixed;\n\ttop: 14px;\n\tright: 42px;\n\tz-index: 1300;\n\tmax-width: 280px;\n\tpadding: 0 14px 0 14px;\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n}\n\n/*\n** Tabs\n*/\n\n.tc-tab-set.tc-vertical {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n}\n\n.tc-tab-buttons {\n\tfont-size: 0.85em;\n\tpadding-top: 1em;\n\tmargin-bottom: -2px;\n}\n\n.tc-tab-buttons.tc-vertical {\n\tz-index: 100;\n\tdisplay: block;\n\tpadding-top: 14px;\n\tvertical-align: top;\n\ttext-align: right;\n\tmargin-bottom: inherit;\n\tmargin-right: -1px;\n\tmax-width: 33%;\n\t-webkit-flex: 0 0 auto;\n\tflex: 0 0 auto;\n}\n\n.tc-tab-buttons button.tc-tab-selected {\n\tcolor: <>;\n\tbackground-color: <>;\n\tborder-left: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tborder-right: 1px solid <>;\n}\n\n.tc-tab-buttons button {\n\tcolor: <>;\n\tpadding: 3px 5px 3px 5px;\n\tmargin-right: 0.3em;\n\tfont-weight: normal;\n\tborder: none;\n\tbackground: inherit;\n\tbackground-color: <>;\n\tborder-left: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tborder-right: 1px solid <>;\n\tborder-top-left-radius: 2px;\n\tborder-top-right-radius: 2px;\n\tborder-bottom-left-radius: 0;\n\tborder-bottom-right-radius: 0;\n}\n\n.tc-tab-buttons.tc-vertical button {\n\tdisplay: block;\n\twidth: 100%;\n\tmargin-top: 3px;\n\tmargin-right: 0;\n\ttext-align: right;\n\tbackground-color: <>;\n\tborder-left: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n\tborder-right: none;\n\tborder-top-left-radius: 2px;\n\tborder-bottom-left-radius: 2px;\n\tborder-top-right-radius: 0;\n\tborder-bottom-right-radius: 0;\n}\n\n.tc-tab-buttons.tc-vertical button.tc-tab-selected {\n\tbackground-color: <>;\n\tborder-right: 1px solid <>;\n}\n\n.tc-tab-divider {\n\tborder-top: 1px solid <>;\n}\n\n.tc-tab-divider.tc-vertical {\n\tdisplay: none;\n}\n\n.tc-tab-content {\n\tmargin-top: 14px;\n}\n\n.tc-tab-content.tc-vertical {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tpadding-top: 0;\n\tpadding-left: 14px;\n\tborder-left: 1px solid <>;\n\t-webkit-flex: 1 0 70%;\n\tflex: 1 0 70%;\n\toverflow: auto;\n}\n\n.tc-sidebar-lists .tc-tab-buttons {\n\tmargin-bottom: -1px;\n}\n\n.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {\n\tbackground-color: <>;\n\tcolor: <>;\n\tborder-left: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tborder-right: 1px solid <>;\n}\n\n.tc-sidebar-lists .tc-tab-buttons button {\n\tbackground-color: <>;\n\tcolor: <>;\n\tborder-left: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tborder-right: 1px solid <>;\n}\n\n.tc-sidebar-lists .tc-tab-divider {\n\tborder-top: 1px solid <>;\n}\n\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {\n\tdisplay: block;\n\twidth: 100%;\n\tbackground-color: <>;\n\tborder-top: none;\n\tborder-left: none;\n\tborder-bottom: none;\n\tborder-right: 1px solid #ccc;\n\tmargin-bottom: inherit;\n}\n\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {\n\tbackground-color: <>;\n\tborder: none;\n}\n\n/*\n** Manager\n*/\n\n.tc-manager-wrapper {\n\n}\n\n.tc-manager-controls {\n\n}\n\n.tc-manager-control {\n\tmargin: 0.5em 0;\n}\n\n.tc-manager-control select {\n\tmax-width: 100%;\n}\n\n.tc-manager-list {\n\twidth: 100%;\n\tborder-top: 1px solid <>;\n\tborder-left: 1px solid <>;\n\tborder-right: 1px solid <>;\n}\n\n.tc-manager-list-item {\n\n}\n\n.tc-manager-list-item-heading {\n\tdisplay: block;\n\twidth: 100%;\n\ttext-align: left;\n\tborder-bottom: 1px solid <>;\n\tpadding: 3px;\n}\n\n.tc-manager-list-item-heading-selected {\n\tfont-weight: bold;\n\tcolor: <>;\n\tfill: <>;\n\tbackground-color: <>;\n}\n\n.tc-manager-list-item-heading:hover {\n\tbackground: <>;\n\tcolor: <>;\n}\n\n.tc-manager-list-item-content {\n\tdisplay: flex;\n}\n\n.tc-manager-list-item-content-sidebar {\n\tflex: 1 0;\n\tbackground: <>;\n\tborder-right: 0.5em solid <>;\n\tborder-bottom: 0.5em solid <>;\n\twhite-space: nowrap;\n}\n\n.tc-manager-list-item-content-item-heading {\n\tdisplay: block;\n\twidth: 100%;\n\ttext-align: left;\n\tbackground: <>;\n\ttext-transform: uppercase;\n\tfont-size: 0.6em;\n\tfont-weight: bold;\n\tpadding: 0.5em 0 0.5em 0;\n}\n\n.tc-manager-list-item-content-item-body {\n\tpadding: 0 0.5em 0 0.5em;\n}\n\n.tc-manager-list-item-content-item-body > pre {\n\tmargin: 0.5em 0 0.5em 0;\n\tborder: none;\n\tbackground: inherit;\n}\n\n.tc-manager-list-item-content-tiddler {\n\tflex: 3 1;\n\tborder-left: 0.5em solid <>;\n\tborder-right: 0.5em solid <>;\n\tborder-bottom: 0.5em solid <>;\n}\n\n.tc-manager-list-item-content-item-body > table {\n\tborder: none;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.tc-manager-list-item-content-item-body > table td {\n\tborder: none;\n}\n\n.tc-manager-icon-editor > button {\n\twidth: 100%;\n}\n\n.tc-manager-icon-editor > button > svg,\n.tc-manager-icon-editor > button > button {\n\twidth: 100%;\n\theight: auto;\n}\n\n/*\n** Import table\n*/\n\n.tc-import-table {\n\twidth: 100%;\n}\n\n.tc-import-table svg.tc-image-edit-button {\n\tmax-width: unset;\n}\n\n.tc-import-table th:first-of-type {\n\twidth: 10%;\n}\n\n.tc-import-table th:last-of-type {\n\twidth: 30%;\n}\n\n.tc-import-table .tc-row-disabled {\n\tbackground: <>10;\n\topacity: 0.8;\n}\n\n.tc-import-table .tc-row-warning {\n\tbackground: <>50;\n}\n\n/*\n** Alerts\n*/\n\n.tc-alerts {\n\tposition: fixed;\n\ttop: 28px;\n\tleft: 0;\n\tright: 0;\n\tmax-width: 50%;\n\tz-index: 20000;\n}\n\n.tc-alert {\n\tposition: relative;\n\tmargin: 14px;\n\tpadding: 7px;\n\tborder: 1px solid <>;\n\tbackground-color: <>;\n}\n\n.tc-alert-toolbar {\n\tposition: absolute;\n\ttop: 7px;\n\tright: 7px;\n\tline-height: 0;\n}\n\n.tc-alert-toolbar svg {\n\tfill: <>;\n}\n\n.tc-alert-subtitle {\n\tcolor: <>;\n\tfont-weight: bold;\n\tfont-size: 0.8em;\n\tmargin-bottom: 0.5em;\n}\n\n.tc-alert-body > p {\n\tmargin: 0;\n}\n\n.tc-alert-highlight {\n\tcolor: <>;\n}\n\n@media (min-width: <>) {\n\n\t.tc-static-alert {\n\t\tposition: relative;\n\t}\n\n\t.tc-static-alert-inner {\n\t\tposition: absolute;\n\t\tz-index: 100;\n\t}\n\n}\n\n.tc-static-alert-inner {\n\tpadding: 0 2px 2px 42px;\n\tcolor: <>;\n}\n\n/*\n** Floating drafts list\n*/\n\n.tc-drafts-list {\n\tz-index: 2000;\n\tposition: fixed;\n\tfont-size: 0.8em;\n\tleft: 0;\n\tbottom: 0;\n}\n\n.tc-drafts-list a {\n\tmargin: 0 0.5em;\n\tpadding: 4px 4px;\n\tborder-top-left-radius: 4px;\n\tborder-top-right-radius: 4px;\n\tborder: 1px solid <>;\n\tborder-bottom: none;\n\tbackground: <>;\n\tcolor: <>;\n\tfill: <>;\n}\n\n.tc-drafts-list a:hover {\n\ttext-decoration: none;\n\tbackground: <>;\n\tcolor: <>;\n\tfill: <>;\n}\n\n.tc-drafts-list a svg {\n\twidth: 1em;\n\theight: 1em;\n\tvertical-align: text-bottom;\n}\n\n/*\n** Control panel\n*/\n\n.tc-control-panel td {\n\tpadding: 4px;\n}\n\n.tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea {\n\twidth: 100%;\n}\n\n.tc-control-panel-setting {\n\tborder-top: 1px solid <>;\n}\n\n.tc-plugin-info {\n\tdisplay: flex;\n\ttext-shadow: none;\n\tborder: 1px solid <>;\n\tfill: <>;\n\tbackground-color: <>;\n\tmargin: 0.5em 0 0.5em 0;\n\tpadding: 4px;\n\talign-items: center;\n}\n\n.tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info {\n\tcolor: <>;\n}\n\n\n.tc-plugin-info-sub-plugins .tc-plugin-info {\n\tmargin: 0.5em;\n\tbackground: <>;\n}\n\n.tc-plugin-info-sub-plugin-indicator {\n\tmargin: -16px 1em 0 2em;\n}\n\n.tc-plugin-info-sub-plugin-indicator button {\n\tcolor: <>;\n\tbackground: <>;\n\tborder-radius: 8px;\n\tpadding: 2px 7px;\n\tfont-size: 0.75em;\n}\n\n.tc-plugin-info-sub-plugins .tc-plugin-info-dropdown {\n\tmargin-left: 1em;\n\tmargin-right: 1em;\n}\n\n.tc-plugin-info-disabled {\n\tbackground: -webkit-repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);\n\tbackground: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);\n}\n\n.tc-plugin-info-disabled:hover {\n\tbackground: -webkit-repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);\n\tbackground: repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);\n}\n\na.tc-tiddlylink.tc-plugin-info:hover {\n\ttext-decoration: none;\n\tbackground-color: <>;\n\tcolor: <>;\n\tfill: <>;\n}\n\na.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg {\n\tfill: <>;\n}\n\na.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-stability {\n\tborder: 1px solid <>;\n\tcolor: <>;\n}\n\n.tc-plugin-info-chunk {\n\tmargin: 2px;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-toggle {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tline-height: 1;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-icon {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tline-height: 1;\n\theight: 2em;\n\twidth: 2em;\n\tdisplay: grid;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-description {\n\tflex-grow: 1;\n}\n\n.tc-plugin-info-chunk .tc-plugin-info-stability {\n\tmargin-right: 4px;\n\tpadding: 1px 3px;\n\tfont-size: 0.8em;\n\tborder-radius: 4px;\n\tfont-weight: bold;\n}\n\n.tc-plugin-info-chunk .tc-plugin-info-stability-stable {\n\tborder: 1px solid <>;\n\tcolor: <>;\n}\n\n.tc-plugin-info-chunk .tc-plugin-info-stability-experimental {\n\tborder: 1px solid <>;\n\tcolor: <>;\n}\n\n.tc-plugin-info-chunk .tc-plugin-info-stability-deprecated {\n\tborder: 1px solid <>;\n\tcolor: <>;\n}\n\n.tc-plugin-info-chunk .tc-plugin-info-stability-legacy {\n\tborder: 1px solid <>;\n\tcolor: <>;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-buttons {\n\tfont-size: 0.8em;\n\tline-height: 1.2;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\ttext-align: right;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-description h1 {\n\tfont-size: 1em;\n\tline-height: 1.2;\n\tmargin: 2px 0 2px 0;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-description h2 {\n\tfont-size: 0.8em;\n\tline-height: 1.2;\n\tmargin: 2px 0 2px 0;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-description div {\n\tfont-size: 0.8em;\n\tline-height: 1.2;\n\tmargin: 2px 0 2px 0;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-toggle img, .tc-plugin-info-chunk.tc-plugin-info-toggle svg {\n\twidth: 1em;\n\theight: 1em;\n}\n\n.tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg {\n\tmax-width: 2em;\n\tmax-height: 2em;\n\tmargin: auto;\n}\n\n.tc-plugin-info-dropdown {\n\tborder: 1px solid <>;\n\tbackground: <>;\n\tmargin-top: -8px;\n}\n\n.tc-plugin-info-dropdown-message {\n\tbackground: <>;\n\tpadding: 0.5em 1em 0.5em 1em;\n\tfont-weight: bold;\n\tfont-size: 0.8em;\n}\n\n.tc-plugin-info-dropdown-body {\n\tpadding: 1em 1em 0 1em;\n\tbackground: <>;\n}\n\n.tc-plugin-info-sub-plugins {\n\tpadding: 0.5em;\n\tmargin: 0 1em 1em 1em;\n\tbackground: <>;\n}\n\n.tc-install-plugin {\n\tfont-weight: bold;\n\tbackground: green;\n\tcolor: white;\n\tfill: white;\n\tborder-radius: 4px;\n\tpadding: 3px;\n}\n\n.tc-install-plugin.tc-reinstall-downgrade {\n\tbackground: red;\n}\n\n.tc-install-plugin.tc-reinstall {\n\tbackground: blue;\n}\n\n.tc-install-plugin.tc-reinstall-upgrade {\n\tbackground: orange;\n}\n\n.tc-check-list {\n\tline-height: 2em;\n}\n\n.tc-check-list .tc-image-button {\n\theight: 1.5em;\n}\n\n/*\n** Message boxes\n*/\n\n.tc-message-box {\n\tborder: 1px solid <>;\n\tbackground: <>;\n\tpadding: 0px 21px 0px 21px;\n\tfont-size: 12px;\n\tline-height: 18px;\n\tcolor: <>;\n}\n\n.tc-message-box svg {\n\twidth: 1em;\n\theight: 1em;\n\tvertical-align: text-bottom;\n}\n\n/*\n** Pictures\n*/\n\n.tc-bordered-image {\n\tborder: 1px solid <>;\n\tpadding: 5px;\n\tmargin: 5px;\n}\n\n/*\n** Floats\n*/\n\n.tc-float-right {\n\tfloat: right;\n}\n\n/* Float tc-clearfix. Needs to be used by elements that allow float:right in their content.\n** So the floating element does not overflow\n*/\n\n.tc-clearfix:after {\n\tcontent: \"\";\n\tclear: both;\n\tdisplay: table;\n}\n\n/* Fix overflow toc, manager and testcase output */\n.tc-tiddler-body .tc-tabbed-table-of-contents, .tc-manager-list-item-content, .tc-test-case-output {\n\toverflow-x: auto;\n}\n\n/* A wrapper to fix table overflow */\n\n.tc-table-wrapper {\n\toverflow-x: auto;\n}\n\n/*\n** Chooser\n*/\n\n.tc-chooser {\n\tborder-right: 1px solid <>;\n\tborder-left: 1px solid <>;\n}\n\n\n.tc-chooser-item {\n\tborder-bottom: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tpadding: 2px 4px 2px 14px;\n}\n\n.tc-drop-down .tc-chooser-item {\n\tpadding: 2px;\n}\n\n.tc-chosen,\n.tc-chooser-item:hover {\n\tbackground-color: <>;\n\tborder-color: <>;\n}\n\n.tc-chosen .tc-tiddlylink {\n\tcursor:default;\n}\n\n.tc-chooser-item .tc-tiddlylink {\n\tdisplay: block;\n\ttext-decoration: none;\n\tbackground-color: transparent;\n}\n\n.tc-chooser-item:hover .tc-tiddlylink:hover {\n\ttext-decoration: none;\n}\n\n.tc-drop-down .tc-chosen .tc-tiddlylink,\n.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover {\n\tcolor: <>;\n}\n\n.tc-chosen > .tc-tiddlylink:before {\n\tmargin-left: -10px;\n\tposition: relative;\n\tcontent: \"» \";\n}\n\n.tc-chooser-item svg,\n.tc-chooser-item img{\n\tmax-width: 1em;\n\tmax-height: 1em;\n\tvertical-align: middle;\n}\n\n.tc-language-chooser .tc-image-button img {\n\tmax-width: 2em;\n\tmax-height: 1em;\n\twidth: auto;\n\theight: auto;\n\tvertical-align: -0.15em;\n}\n\n/*\n** Palette swatches\n*/\n\n.tc-swatches-horiz {\n}\n\n.tc-swatches-horiz .tc-swatch {\n\tdisplay: inline-block;\n}\n\n.tc-swatch {\n\twidth: 2em;\n\theight: 2em;\n\tmargin: 0.4em;\n\tborder: 1px solid #888;\n}\n\ninput.tc-palette-manager-colour-input {\n\twidth: 100%;\n\tpadding: 0;\n}\n\n/*\n** Table of contents\n*/\n\n.tc-sidebar-lists .tc-table-of-contents {\n\twhite-space: nowrap;\n}\n\n.tc-table-of-contents button,\n.tc-table-of-contents .toc-item-muted {\n\tcolor: <>;\n}\n\n.tc-table-of-contents svg {\n\twidth: 0.7em;\n\theight: 0.7em;\n\tvertical-align: middle;\n\tfill: <>;\n}\n\n.tc-table-of-contents ol {\n\tlist-style-type: none;\n\tpadding-left: 0;\n}\n\n.tc-table-of-contents ol ol {\n\tpadding-left: 1em;\n}\n\n.tc-table-of-contents li {\n\tfont-size: 1.0em;\n\tfont-weight: bold;\n}\n\n.tc-table-of-contents li a {\n\tfont-weight: bold;\n}\n\n.tc-table-of-contents li li {\n\tfont-size: 0.95em;\n\tfont-weight: normal;\n\tline-height: 1.4;\n}\n\n.tc-table-of-contents li li a {\n\tfont-weight: normal;\n}\n\n.tc-table-of-contents li li li {\n\tfont-size: 0.95em;\n\tfont-weight: normal;\n\tline-height: 1.5;\n}\n\n.tc-table-of-contents li li li li {\n\tfont-size: 0.95em;\n\tfont-weight: normal;\n}\n\n.tc-tabbed-table-of-contents {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents {\n\tz-index: 100;\n\tdisplay: inline-block;\n\tpadding-left: 1em;\n\tmax-width: 50%;\n\t-webkit-flex: 0 0 auto;\n\tflex: 0 0 auto;\n\tbackground: <>;\n\tborder-left: 1px solid <>;\n\tborder-top: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {\n\tdisplay: block;\n\tpadding: 0.12em 1em 0.12em 0.25em;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {\n\tborder-top: 1px solid <>;\n\tborder-left: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {\n\ttext-decoration: none;\n\tborder-top: 1px solid <>;\n\tborder-left: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n\tbackground: <>;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {\n\tborder-top: 1px solid <>;\n\tborder-left: 1px solid <>;\n\tborder-bottom: 1px solid <>;\n\tbackground: <>;\n\tmargin-right: -1px;\n}\n\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {\n\ttext-decoration: none;\n}\n\n.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tpadding-left: 1.5em;\n\tpadding-right: 1.5em;\n\tborder: 1px solid <>;\n\t-webkit-flex: 1 0 50%;\n\tflex: 1 0 50%;\n}\n\n/*\n** Dirty indicator\n*/\n\nhtml body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {\n\tvisibility: visible;\n}\n\nhtml body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {\n\tvisibility: hidden;\n}\n\nhtml body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {\n\tvisibility: hidden;\n}\n\nhtml body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {\n\tvisibility: visible;\n}\n\nhtml body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-indicator svg {\n\tfill: <>;\n\tcolor: <>;\n}\n\n/*\n** File inputs\n*/\n\n.tc-file-input-wrapper {\n\tposition: relative;\n\toverflow: hidden;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n}\n\n.tc-file-input-wrapper input[type=file] {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tfont-size: 999px;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n\toutline: none;\n\tbackground: white;\n\tcursor: pointer;\n\tdisplay: inline-block;\n}\n\n::-webkit-file-upload-button {\n\tcursor:pointer;\n}\n\n/*\n** Thumbnail macros\n*/\n\n.tc-thumbnail-wrapper {\n\tposition: relative;\n\tdisplay: inline-block;\n\tmargin: 6px;\n\tvertical-align: top;\n}\n\n.tc-thumbnail-right-wrapper {\n\tfloat:right;\n\tmargin: 0.5em 0 0.5em 0.5em;\n}\n\n.tc-thumbnail-image {\n\ttext-align: center;\n\toverflow: hidden;\n\tborder-radius: 3px;\n}\n\n.tc-thumbnail-image svg,\n.tc-thumbnail-image img {\n\tfilter: alpha(opacity=1);\n\topacity: 1;\n\tmin-width: 100%;\n\tmin-height: 100%;\n\tmax-width: 100%;\n}\n\n.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,\n.tc-thumbnail-wrapper:hover .tc-thumbnail-image img {\n\tfilter: alpha(opacity=0.8);\n\topacity: 0.8;\n}\n\n.tc-thumbnail-background {\n\tposition: absolute;\n\tborder-radius: 3px;\n}\n\n.tc-thumbnail-icon svg,\n.tc-thumbnail-icon img {\n\twidth: 3em;\n\theight: 3em;\n\t<>\n}\n\n.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,\n.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {\n\tfill: #fff;\n\t<>\n}\n\n.tc-thumbnail-icon {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tdisplay: -webkit-flex;\n\t-webkit-align-items: center;\n\t-webkit-justify-content: center;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.tc-thumbnail-caption {\n\tposition: absolute;\n\tbackground-color: #777;\n\tcolor: #fff;\n\ttext-align: center;\n\tbottom: 0;\n\twidth: 100%;\n\tfilter: alpha(opacity=0.9);\n\topacity: 0.9;\n\tline-height: 1.4;\n\tborder-bottom-left-radius: 3px;\n\tborder-bottom-right-radius: 3px;\n}\n\n.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {\n\tfilter: alpha(opacity=1);\n\topacity: 1;\n}\n\n/*\n** Diffs\n*/\n\n.tc-diff-equal {\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n.tc-diff-insert {\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n.tc-diff-delete {\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n.tc-diff-invisible {\n\tbackground-color: <>;\n\tcolor: <>;\n}\n\n.tc-diff-tiddlers th {\n\ttext-align: right;\n\tbackground: <>;\n\tfont-weight: normal;\n\tfont-style: italic;\n}\n\n.tc-diff-tiddlers pre {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: none;\n\tbackground: none;\n}\n\n/*\n** Errors\n*/\n\n.tc-error {\n\tbackground: #f00;\n\tcolor: #fff;\n}\n\n/*\n** Tree macro\n*/\n\n.tc-tree div {\n\tpadding-left: 14px;\n}\n\n.tc-tree ol {\n\tlist-style-type: none;\n\tpadding-left: 0;\n\tmargin-top: 0;\n}\n\n.tc-tree ol ol {\n\tpadding-left: 1em;\n}\n\n.tc-tree button {\n\tcolor: #acacac;\n}\n\n.tc-tree svg {\n\tfill: #acacac;\n}\n\n.tc-tree span svg {\n\twidth: 1em;\n\theight: 1em;\n\tvertical-align: baseline;\n}\n\n.tc-tree li span {\n\tcolor: lightgray;\n}\n\nselect {\n\tcolor: <>;\n\tbackground: <>;\n}\n\n/*\n** Translink macro\n*/\n\n.tc-translink {\n\tbackground-color: <>;\n\tborder: 1px solid <>;\n\tpadding: 0 3px;\n\tborder-radius: 3px;\n}\n\ndiv.tc-translink > div {\n\tmargin: 1em;\n}\n\ndiv.tc-translink > div > a:first-child > h1 {\n\tfont-size: 1.2em;\n\tfont-weight: bold;\n}\n\nspan.tc-translink > a:first-child {\n\tfont-weight: bold;\n}\n\n/*\n** Classes for displaying globals\n*/\n\n.tc-global-tiddler-body {\n\tpadding: 0.25em;\n\tborder: 1px solid <>;\n\tbackground-color: <>;\n\tborder-radius: 3px;\n}\n\n.tc-global-tiddler-body-heading {\n\tmargin: 0 0 0.25em 0;\n\tfont-weight: normal;\n}\n\n.tc-global-tiddler-body-type {\n\tmargin: 0 0 0.25em 0;\n\tborder-bottom: 1px solid <>;\n}\n\n.tc-global-tiddler-body-details {\n\tbackground-color: <>;\n}\n\n.tc-global-tiddler-body pre {\n\tmargin: 0;\n\tborder: 1px solid <>;\n}\n\n/*\n** Utility classes for SVG icons\n*/\n\n.tc-fill-background {\n\tfill: <>;\n}\n\n.tc-network-activity-background {\n\tfill: <>;\n}\n\n/*\n** Test Cases\n*/\n\n.tc-test-case-wrapper {\n\tborder: 1px solid <>;\n\tbackground-color: <>;\n\tborder-radius: 6px;\n}\n\n.tc-test-case-wrapper {\n\tbackground-color: <>;\n}\n\n.tc-test-case-wrapper .tc-test-case-wrapper {\n\tbackground-color: <>;\n}\n\n.tc-test-case-wrapper .tc-test-case-wrapper .tc-test-case-wrapper {\n\tbackground-color: <>;\n}\n\n.tc-test-case-header {\n\tfont-weight: normal;\n\tmargin: 0.5em 0;\n\tpadding: 0 0.5em;\n}\n\n.tc-test-case-divider {\n\tx-background-color: <>;\n}\n\n.tc-test-case-result-icon {\n\tfill: #fff;\n\tpadding: 0.25em;\n\tdisplay: inline-block;\n\tline-height: 0;\n\tborder-radius: 1em;\n\tvertical-align: text-bottom;\n\tmargin-right: 0.25em;\n}\n\n.tc-test-case-result-icon-pass {\n\tbackground-color: green;\n}\n\n.tc-test-case-result-icon-fail {\n\tbackground-color: red;\n}\n\n.tc-test-case-result-icon svg {\n\twidth: 0.5em;\n\theight: 0.5em;\n}\n\n.tc-test-case-header > h2 {\n\tbackground: <>;\n\tborder-radius: 4px;\n\tpadding: 0.25em;\n}\n\n.tc-test-case-header > h2,\n.tc-test-case-source > pre {\n\tmargin: 0;\n}\n\n.tc-test-case-header > h2 a.tc-tiddlylink-missing {\n\tfont-style: normal;\n}\n\n.tc-test-case-toolbar {\n\tfloat: right;\n}\n\n.tc-test-case-toolbar svg {\n\tfill: <