title: $:/themes/tiddlywiki/vanilla/base tags: [[$:/tags/Stylesheet]] code-body: yes \define custom-background-datauri() <$set name="background" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}> <$list filter="[is[image]]"> `background: url(` <$list filter="[!has[_canonical_uri]]"> `"`<$macrocall $name="datauri" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>`"` <$list filter="[has[_canonical_uri]]"> `"`<$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field="_canonical_uri"/>`"` `) 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}}`;` \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$ \end \define if-editor-height-fixed(then,else) <$reveal state="$:/config/TextEditor/EditorHeight/Mode" type="match" text="fixed"> $then$ <$reveal state="$:/config/TextEditor/EditorHeight/Mode" type="match" text="auto"> $else$ \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(<>ch + 4em); } .tc-type-selector-dropdown-wrapper input.tc-edit-typeeditor { min-width: <>ch; } \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: <>; fill: <>; background: <>; border-color: <>; } button:disabled svg { fill: <>; } /* ** 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: <>; } body.tc-body { font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}}; line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}}; word-wrap: break-word; <> color: <>; background-color: <>; fill: <>; } <> /** * 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: <>; border: 1px solid <>; padding: 0 3px 2px; border-radius: 3px; font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}}; } code { color: <>; background-color: <>; border: 1px solid <>; 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 <>; 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: <>; 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: <>; 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: <>; 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: <>; 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: <>; } 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: <>; vertical-align: middle; background-color: <>; border: solid 1px <>; border-bottom-color: <>; border-radius: 3px; box-shadow: inset 0 -1px 0 <>; } ::selection { background-color: Highlight; color: HighlightText; background-color: <>; color: <>; } .tc-inline-style { background: <>; color: <>; } 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 <>; 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 <>; border-left: 1px solid <>; } table thead tr td, table th { background-color: <>; font-weight: bold; } table tfoot tr td { background-color: <>; } /* 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: <>; -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: <>; } .tc-sidebar-lists a.tc-tiddlylink:hover { color: <>; } 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: <>; background-color: <>; } a.tc-tiddlylink-external:visited { color: <>; background-color: <>; } a.tc-tiddlylink-external:hover { color: <>; background-color: <>; } .tc-drop-down a.tc-tiddlylink:hover { color: <>; } /* ** 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: <>; text-shadow: 0 1px 0 rgba(0, 0, 0, 1); white-space: nowrap; vertical-align: baseline; background-color: <>; border-radius: 20px; } .tc-tiddler-dragger-cover { position: absolute; background-color: <>; } .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: <>; text-align: center; content: "<>"; } .tc-droppable > .tc-droppable-placeholder { display: none; } .tc-droppable.tc-dragover > .tc-droppable-placeholder { display: block; border: 2px dashed <>; } .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: <>; } /* ** Plugin reload warning */ .tc-plugin-reload-warning { z-index: 1000; display: block; position: fixed; top: 0; left: 0; right: 0; 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: <>; fill: <>; } button:disabled.tc-btn-invisible { cursor: default; color: <>; } .tc-btn-boxed { font-size: 0.6em; padding: 0.2em; margin: 1px; background: none; border: 1px solid <>; border-radius: 0.25em; } html body.tc-body .tc-btn-boxed svg { font-size: 1.6666em; } .tc-btn-boxed:hover { background: <>; color: <>; } html body.tc-body .tc-btn-boxed:hover svg { fill: <>; } .tc-btn-rounded { font-size: 0.5em; line-height: 2; padding: 0em 0.3em 0.2em 0.4em; margin: 1px; border: 1px solid <>; background: <>; color: <>; border-radius: 2em; } html body.tc-body .tc-btn-rounded svg { font-size: 1.6666em; fill: <>; } .tc-btn-rounded:hover { border: 1px solid <>; background: <>; color: <>; } html body.tc-body .tc-btn-rounded:hover svg { fill: <>; } .tc-btn-icon svg { height: 1em; width: 1em; fill: <>; } .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: <>; color: <>; fill: <>; 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: <>; } .tc-primary-btn { background: <>; } .tc-sidebar-lists input { color: <>; } .tc-sidebar-lists button { color: <>; fill: <>; } .tc-sidebar-lists button.tc-btn-mini { color: <>; } .tc-sidebar-lists button.tc-btn-mini:hover { color: <>; } .tc-sidebar-lists button small { color: <>; } 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 <>; margin-top: 4px; } .tc-unfold-banner:hover { background: <>; border-top: 2px solid <>; } .tc-unfold-banner svg, .tc-fold-banner svg { height: 0.75em; fill: <>; } .tc-unfold-banner:hover svg, .tc-fold-banner:hover svg { fill: <>; } .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: <>; } @media (max-width: <>) { .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: <>; } 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: <>; white-space: break-spaces; vertical-align: baseline; background-color: <>; border-radius: 1em; } .tc-sidebar-scrollable .tc-tag-label { text-shadow: none; } .tc-untagged-separator { border: 0; height: 1px; background: <>; } button.tc-untagged-label { background-color: <>; } .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: <>; color: <>; } /* ** 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: <>) { .tc-topbar-right { right: 10px; } } .tc-topbar button { padding: 8px; } .tc-topbar svg { fill: <>; } .tc-topbar button:hover svg { fill: <>; } @media (max-width: <>) { .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: <>; fill: <>; } .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: <>; } .tc-advanced-search input { width: 60%; } .tc-search a svg { width: 1.2em; height: 1.2em; vertical-align: middle; } .tc-page-controls { margin-top: 14px; font-size: 1.5em; } .tc-page-controls .tc-drop-down { font-size: 1rem; } .tc-page-controls button { margin-right: 0.5em; } .tc-page-controls a.tc-tiddlylink:hover { text-decoration: none; } .tc-page-controls img { width: 1em; } .tc-page-controls svg { fill: <>; } .tc-page-controls button:hover svg, .tc-page-controls a:hover svg { fill: <>; } .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: <>) { .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; } <> .tc-story-river { position: relative; padding: 0; } } @media (min-width: <>) { .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; } <> .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: <>; border: 1px solid <>; } {{$:/themes/tiddlywiki/vanilla/sticky}} .tc-tiddler-info { overflow: hidden; padding: 14px 42px 14px 42px; background-color: <>; border-top: 1px solid <>; border-bottom: 1px solid <>; } .tc-tiddler-info p { margin-top: 3px; margin-bottom: 3px; } .tc-tiddler-info .tc-tab-buttons button.tc-tab-selected { background-color: <>; border-bottom: 1px solid <>; } @media (max-width: <>) { .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: <>) { .tc-tiddler-frame { padding: 14px 14px 14px 14px; margin-bottom: .5em; } .tc-tiddler-info { margin: 0 -14px 0 -14px; } } @media (min-width: <>) { .tc-tiddler-frame { padding: 28px 42px 42px 42px; width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}}; border-radius: 2px; } <> .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: <>; margin: 0; } .tc-site-title { color: <>; } .tc-tiddler-title-icon { vertical-align: middle; margin-right: .1em; } .tc-system-title-prefix { color: <>; } .tc-titlebar h2 { font-size: 1em; display: inline; } .tc-titlebar img { height: 1em; } .tc-subtitle { font-size: 0.9em; color: <>; 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: <>; } .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: <>; } .tc-tiddler-controls button.tc-btn-invisible:hover svg, .tc-search button:hover svg, .tc-search a:hover svg { fill: <>; } @media print { .tc-tiddler-controls { display: none; } } .tc-tiddler-help { /* Help prompts within tiddler template */ color: <>; margin-top: 14px; } .tc-tiddler-help a.tc-tiddlylink { color: <>; } .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 <>; 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: <>; } .tc-tiddler-frame iframe.tc-edit-texteditor { background-color: <>; } .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: <>; border: 1px solid <>; } canvas.tc-edit-bitmapeditor { border: 6px solid <>; cursor: crosshair; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; margin-top: 6px; margin-bottom: 6px; } .tc-edit-bitmapeditor-width { display: block; } .tc-edit-bitmapeditor-height { display: block; } .tc-tiddler-body { clear: both; } .tc-tiddler-frame .tc-tiddler-body { font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}}; line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}}; } .tc-titlebar, .tc-tiddler-edit-title { overflow: hidden; /* https://github.com/Jermolene/TiddlyWiki5/issues/282 */ } html body.tc-body.tc-single-tiddler-window { margin: 1em; background: <>; } .tc-single-tiddler-window img, .tc-single-tiddler-window svg, .tc-single-tiddler-window canvas, .tc-single-tiddler-window embed, .tc-single-tiddler-window iframe { max-width: 100%; } /* ** Editor */ .tc-editor-toolbar { margin-top: 8px; } .tc-editor-toolbar button { vertical-align: middle; background-color: <>; color: <>; fill: <>; 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: <>; } .tc-editor-toolbar button svg { width: 1.6em; height: 1.2em; } .tc-editor-toolbar button:hover { background-color: <>; fill: <>; color: <>; } .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: <>) { <> } /* ** Toolbar buttons */ .tc-page-controls svg.tc-image-new-button { fill: <>; } .tc-page-controls svg.tc-image-options-button { fill: <>; } .tc-page-controls svg.tc-image-save-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-info-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-edit-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-close-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-delete-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-cancel-button { fill: <>; } .tc-tiddler-controls button svg.tc-image-done-button { fill: <>; } .tc-page-controls svg.tc-image-layout-button { fill: <>; } /* ** Tiddler edit mode */ .tc-tiddler-edit-frame em.tc-edit { color: <>; 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; } <> .tc-edit-tags { border: 1px solid <>; padding: 4px 8px 4px 8px; } .tc-edit-add-tag { display: inline-block; } .tc-edit-add-tag .tc-add-tag-name input { width: 50%; } .tc-edit-add-tag .tc-keyboard { display:inline; } .tc-edit-tags .tc-tag-label { display: inline-block; } .tc-edit-tags-list { margin: 14px 0 14px 0; } .tc-remove-tag-button { padding-left: 4px; } .tc-tiddler-preview { overflow: auto; } .tc-tiddler-preview-preview { float: right; width: 49%; border: 1px solid <>; margin: 4px 0 3px 3px; padding: 3px 3px 3px 3px; } <> .tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor { width: 49%; } .tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor { max-width: 49%; } .tc-edit-fields { width: 100%; } .tc-edit-fields.tc-edit-fields-small { margin-top: 0; margin-bottom: 0; } .tc-edit-fields table, .tc-edit-fields tr, .tc-edit-fields td { border: none; padding: 4px; } .tc-edit-fields > tbody > .tc-edit-field:nth-child(odd) { background-color: <>; } .tc-edit-fields > tbody > .tc-edit-field:nth-child(even) { background-color: <>; } .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: <>; 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: <>) { .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: <>; content: "<>"; pointer-events: none; position: absolute; display: flex; align-items: center; justify-content: center; background-color: <>; border: 4px dashed <>; font-weight: bold; font-size: 150%; opacity: 0.8; color: <>; } .tc-editor-importpopup { width: 100%; height: 100%; } .tc-editor-import { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: <>; box-shadow: 2px 2px 10px <>; padding: 10px; width: 96%; border: 1px solid <>; 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: <>) { .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: <>; } .tc-drop-down-wrapper { position: relative; } .tc-drop-down { min-width: 380px; border: 1px solid <>; background-color: <>; 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: <>; } .tc-drop-down button:disabled svg { fill: <>; } .tc-drop-down button.tc-btn-invisible:hover svg { fill: <>; } .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: <>; 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: <>; } .tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input-wrapper:hover button { color: <>; background-color: <>; text-decoration: none; } .tc-drop-down .tc-tab-buttons button { background-color: <>; } .tc-drop-down .tc-tab-buttons button.tc-tab-selected { background-color: <>; border-bottom: 1px solid <>; } .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 <>; background-color: <>; 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: <>; } .tc-block-dropdown a.tc-tiddlylink:hover { color: <>; background-color: <>; 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 <>; 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: <>; padding: 0px; border: 3px solid <>; } .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: <>) { .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: <>; } .tc-modal { z-index: 1100; background-color: <>; border: 1px solid <>; } @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 <>; } .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: <>; border-top: 1px solid <>; } .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: <>; border: 1px solid <>; } /* ** 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: <>; background-color: <>; border-left: 1px solid <>; border-top: 1px solid <>; border-right: 1px solid <>; } .tc-tab-buttons button { color: <>; padding: 3px 5px 3px 5px; margin-right: 0.3em; font-weight: normal; border: none; background: inherit; background-color: <>; border-left: 1px solid <>; border-top: 1px solid <>; border-right: 1px solid <>; 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: <>; border-left: 1px solid <>; border-bottom: 1px solid <>; 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: <>; border-right: 1px solid <>; } .tc-tab-divider { border-top: 1px solid <>; } .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 <>; -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: <>; color: <>; border-left: 1px solid <>; border-top: 1px solid <>; border-right: 1px solid <>; } .tc-sidebar-lists .tc-tab-buttons button { background-color: <>; color: <>; border-left: 1px solid <>; border-top: 1px solid <>; border-right: 1px solid <>; } .tc-sidebar-lists .tc-tab-divider { border-top: 1px solid <>; } .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button { display: block; width: 100%; background-color: <>; 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: <>; 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 <>; border-left: 1px solid <>; border-right: 1px solid <>; } .tc-manager-list-item { } .tc-manager-list-item-heading { display: block; width: 100%; text-align: left; border-bottom: 1px solid <>; padding: 3px; } .tc-manager-list-item-heading-selected { font-weight: bold; color: <>; fill: <>; background-color: <>; } .tc-manager-list-item-heading:hover { background: <>; color: <>; } .tc-manager-list-item-content { display: flex; } .tc-manager-list-item-content-sidebar { flex: 1 0; background: <>; border-right: 0.5em solid <>; border-bottom: 0.5em solid <>; white-space: nowrap; } .tc-manager-list-item-content-item-heading { display: block; width: 100%; text-align: left; background: <>; 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 <>; border-right: 0.5em solid <>; border-bottom: 0.5em solid <>; } .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: <>10; opacity: 0.8; } .tc-import-table .tc-row-warning { 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 <>; background-color: <>; } .tc-alert-toolbar { position: absolute; top: 7px; right: 7px; line-height: 0; } .tc-alert-toolbar svg { fill: <>; } .tc-alert-subtitle { color: <>; font-weight: bold; font-size: 0.8em; margin-bottom: 0.5em; } .tc-alert-body > p { margin: 0; } .tc-alert-highlight { color: <>; } @media (min-width: <>) { .tc-static-alert { position: relative; } .tc-static-alert-inner { position: absolute; z-index: 100; } } .tc-static-alert-inner { padding: 0 2px 2px 42px; color: <>; } /* ** 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 <>; border-bottom: none; background: <>; color: <>; fill: <>; } .tc-drafts-list a:hover { text-decoration: none; background: <>; color: <>; fill: <>; } .tc-drafts-list a svg { width: 1em; height: 1em; vertical-align: text-bottom; } /* ** Control panel */ .tc-control-panel td { padding: 4px; } .tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea { width: 100%; } .tc-plugin-info { display: flex; text-shadow: none; border: 1px solid <>; fill: <>; background-color: <>; margin: 0.5em 0 0.5em 0; padding: 4px; align-items: center; } .tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info { color: <>; } .tc-plugin-info-sub-plugins .tc-plugin-info { margin: 0.5em; background: <>; } .tc-plugin-info-sub-plugin-indicator { margin: -16px 1em 0 2em; } .tc-plugin-info-sub-plugin-indicator button { color: <>; background: <>; 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: <>; color: <>; fill: <>; } a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg { fill: <>; } .tc-plugin-info-chunk { margin: 2px; } .tc-plugin-info-chunk.tc-plugin-info-toggle { flex-grow: 0; flex-shrink: 0; line-height: 1; } .tc-plugin-info-chunk.tc-plugin-info-icon { flex-grow: 0; flex-shrink: 0; line-height: 1; } .tc-plugin-info-chunk.tc-plugin-info-description { flex-grow: 1; } .tc-plugin-info-chunk.tc-plugin-info-buttons { font-size: 0.8em; line-height: 1.2; flex-grow: 0; flex-shrink: 0; text-align: right; } .tc-plugin-info-chunk.tc-plugin-info-description h1 { font-size: 1em; line-height: 1.2; margin: 2px 0 2px 0; } .tc-plugin-info-chunk.tc-plugin-info-description h2 { font-size: 0.8em; line-height: 1.2; margin: 2px 0 2px 0; } .tc-plugin-info-chunk.tc-plugin-info-description div { font-size: 0.7em; line-height: 1.2; margin: 2px 0 2px 0; } .tc-plugin-info-chunk.tc-plugin-info-toggle img, .tc-plugin-info-chunk.tc-plugin-info-toggle svg { width: 1em; height: 1em; } .tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg { width: 2em; height: 2em; } .tc-plugin-info-dropdown { border: 1px solid <>; background: <>; margin-top: -8px; } .tc-plugin-info-dropdown-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: <>; } .tc-plugin-info-sub-plugins { padding: 0.5em; margin: 0 1em 1em 1em; 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 <>; background: <>; padding: 0px 21px 0px 21px; font-size: 12px; line-height: 18px; color: <>; } .tc-message-box svg { width: 1em; height: 1em; vertical-align: text-bottom; } /* ** Pictures */ .tc-bordered-image { border: 1px solid <>; padding: 5px; margin: 5px; } /* ** Floats */ .tc-float-right { float: right; } /* ** Chooser */ .tc-chooser { border-right: 1px solid <>; border-left: 1px solid <>; } .tc-chooser-item { border-bottom: 1px solid <>; border-top: 1px solid <>; padding: 2px 4px 2px 14px; } .tc-drop-down .tc-chooser-item { padding: 2px; } .tc-chosen, .tc-chooser-item:hover { background-color: <>; border-color: <>; } .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: <>; } .tc-chosen > .tc-tiddlylink:before { margin-left: -10px; position: relative; content: "ยป "; } .tc-chooser-item svg, .tc-chooser-item img{ width: 1em; height: 1em; vertical-align: middle; } .tc-language-chooser .tc-image-button img { width: 2em; vertical-align: -0.15em; } /* ** Palette swatches */ .tc-swatches-horiz { } .tc-swatches-horiz .tc-swatch { display: inline-block; } .tc-swatch { width: 2em; height: 2em; margin: 0.4em; border: 1px solid #888; } input.tc-palette-manager-colour-input { width: 100%; padding: 0; } /* ** Table of contents */ .tc-sidebar-lists .tc-table-of-contents { white-space: nowrap; } .tc-table-of-contents button { color: <>; } button + .tc-toc-caption, button > .tc-toc-caption{ margin-left: .25em; } .tc-table-of-contents svg { width: 0.7em; height: 0.7em; vertical-align: middle; fill: <>; } .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: <>; border-left: 1px solid <>; border-top: 1px solid <>; border-bottom: 1px solid <>; } .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 <>; border-left: 1px solid <>; border-bottom: 1px solid <>; } .tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover { text-decoration: none; border-top: 1px solid <>; border-left: 1px solid <>; border-bottom: 1px solid <>; background: <>; } .tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a { border-top: 1px solid <>; border-left: 1px solid <>; border-bottom: 1px solid <>; 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 <>; -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: <>; color: <>; } /* ** 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; <> } .tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg, .tc-thumbnail-wrapper:hover .tc-thumbnail-icon img { fill: #fff; <> } .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: <>; color: <>; } .tc-diff-insert { background-color: <>; color: <>; } .tc-diff-delete { background-color: <>; color: <>; } .tc-diff-invisible { background-color: <>; color: <>; } .tc-diff-tiddlers th { text-align: right; 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: <>; background: <>; } /* ** Utility classes for SVG icons */ .tc-fill-background { fill: <>; } /* ** 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; }