mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 17:40:29 +00:00
72941f3e9a
The dropdown can be summoned by clicking on the search field. It will only appear if the search field is not empty. When the search field is not empty the dropdown can be also be summoned by clicking on the arrow or search result count. There are still some wrinkles where the dropdown doesn’t appear when expected; I’d appreciate feedback to help reproduce those cases. This change should still work with custom search result tabs.
2041 lines
38 KiB
Plaintext
2041 lines
38 KiB
Plaintext
title: $:/themes/tiddlywiki/vanilla/base
|
|
tags: [[$:/tags/Stylesheet]]
|
|
|
|
\define custom-background-datauri()
|
|
<$set name="background" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}>
|
|
<$list filter="[<background>is[image]]">
|
|
`background: url(`
|
|
<$list filter="[<background>!has[_canonical_uri]]">
|
|
<$macrocall $name="datauri" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>
|
|
</$list>
|
|
<$list filter="[<background>has[_canonical_uri]]">
|
|
<$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field="_canonical_uri"/>
|
|
</$list>
|
|
`) center center;`
|
|
`background-attachment: `{{$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment}}`;
|
|
-webkit-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
-moz-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
-o-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;
|
|
background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;`
|
|
</$list>
|
|
</$set>
|
|
\end
|
|
|
|
\define if-fluid-fixed(text,hiddenSidebarText)
|
|
<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
|
|
$text$
|
|
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
|
|
$hiddenSidebarText$
|
|
</$reveal>
|
|
</$reveal>
|
|
\end
|
|
|
|
\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;
|
|
}
|
|
|
|
html button {
|
|
line-height: 1.2;
|
|
color: <<colour button-foreground>>;
|
|
background: <<colour button-background>>;
|
|
border-color: <<colour button-border>>;
|
|
}
|
|
|
|
/*
|
|
** Basic element styles
|
|
*/
|
|
|
|
html {
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};
|
|
text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html:-webkit-full-screen {
|
|
background-color: <<colour page-background>>;
|
|
}
|
|
|
|
body.tc-body {
|
|
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};
|
|
line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};
|
|
color: <<colour foreground>>;
|
|
background-color: <<colour page-background>>;
|
|
fill: <<colour foreground>>;
|
|
word-wrap: break-word;
|
|
<<custom-background-datauri>>
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.2;
|
|
font-weight: 300;
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
padding: 14px;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
word-break: normal;
|
|
word-wrap: break-word;
|
|
white-space: pre;
|
|
white-space: pre-wrap;
|
|
background-color: <<colour pre-background>>;
|
|
border: 1px solid <<colour pre-border>>;
|
|
padding: 0 3px 2px;
|
|
border-radius: 3px;
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
|
|
}
|
|
|
|
code {
|
|
color: <<colour code-foreground>>;
|
|
background-color: <<colour code-background>>;
|
|
border: 1px solid <<colour code-border>>;
|
|
white-space: pre-wrap;
|
|
padding: 0 3px 2px;
|
|
border-radius: 3px;
|
|
font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 5px solid <<colour blockquote-bar>>;
|
|
margin-left: 25px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
dl dt {
|
|
font-weight: bold;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
textarea,
|
|
input[type=text],
|
|
input[type=search],
|
|
input[type=""],
|
|
input:not([type]) {
|
|
color: <<colour foreground>>;
|
|
background: <<colour background>>;
|
|
}
|
|
|
|
.tc-muted {
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
svg.tc-image-button {
|
|
padding: 0px 1px 1px 0px;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font-size: 0.8em;
|
|
line-height: 1.2;
|
|
color: <<colour foreground>>;
|
|
vertical-align: middle;
|
|
background-color: <<colour background>>;
|
|
border: solid 1px <<colour muted-foreground>>;
|
|
border-bottom-color: <<colour muted-foreground>>;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 <<colour muted-foreground>>;
|
|
}
|
|
|
|
/*
|
|
Markdown likes putting code elements inside pre elements
|
|
*/
|
|
pre > code {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
table {
|
|
border: 1px solid <<colour table-border>>;
|
|
width: auto;
|
|
max-width: 100%;
|
|
caption-side: bottom;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
table th, table td {
|
|
padding: 0 7px 0 7px;
|
|
border-top: 1px solid <<colour table-border>>;
|
|
border-left: 1px solid <<colour table-border>>;
|
|
}
|
|
|
|
table thead tr td, table th {
|
|
background-color: <<colour table-header-background>>;
|
|
font-weight: bold;
|
|
}
|
|
|
|
table tfoot tr td {
|
|
background-color: <<colour table-footer-background>>;
|
|
}
|
|
|
|
.tc-csv-table {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-tiddler-frame img,
|
|
.tc-tiddler-frame svg,
|
|
.tc-tiddler-frame canvas,
|
|
.tc-tiddler-frame embed,
|
|
.tc-tiddler-frame iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tc-tiddler-body > embed,
|
|
.tc-tiddler-body > iframe {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
|
|
/*
|
|
** Links
|
|
*/
|
|
|
|
button.tc-tiddlylink,
|
|
a.tc-tiddlylink {
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
color: <<colour tiddler-link-foreground>>;
|
|
-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
|
|
}
|
|
|
|
.tc-sidebar-lists a.tc-tiddlylink {
|
|
color: <<colour sidebar-tiddler-link-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists a.tc-tiddlylink:hover {
|
|
color: <<colour sidebar-tiddler-link-foreground-hover>>;
|
|
}
|
|
|
|
button.tc-tiddlylink:hover,
|
|
a.tc-tiddlylink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.tc-tiddlylink-resolves {
|
|
}
|
|
|
|
a.tc-tiddlylink-shadow {
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.tc-tiddlylink-shadow.tc-tiddlylink-resolves {
|
|
font-weight: normal;
|
|
}
|
|
|
|
a.tc-tiddlylink-missing {
|
|
font-style: italic;
|
|
}
|
|
|
|
a.tc-tiddlylink-external {
|
|
text-decoration: underline;
|
|
color: <<colour external-link-foreground>>;
|
|
background-color: <<colour external-link-background>>;
|
|
}
|
|
|
|
a.tc-tiddlylink-external:visited {
|
|
color: <<colour external-link-foreground-visited>>;
|
|
background-color: <<colour external-link-background-visited>>;
|
|
}
|
|
|
|
a.tc-tiddlylink-external:hover {
|
|
color: <<colour external-link-foreground-hover>>;
|
|
background-color: <<colour external-link-background-hover>>;
|
|
}
|
|
|
|
/*
|
|
** Drag and drop styles
|
|
*/
|
|
|
|
.tc-tiddler-dragger {
|
|
position: relative;
|
|
z-index: -10000;
|
|
}
|
|
|
|
.tc-tiddler-dragger-inner {
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
font-size: 16.9px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
color: <<colour dragger-foreground>>;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
background-color: <<colour dragger-background>>;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.tc-tiddler-dragger-cover {
|
|
position: absolute;
|
|
background-color: <<colour page-background>>;
|
|
}
|
|
|
|
.tc-dropzone {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-dropzone.tc-dragover:before {
|
|
z-index: 10000;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: <<colour dropzone-background>>;
|
|
text-align: center;
|
|
content: "<<lingo DropMessage>>";
|
|
}
|
|
|
|
/*
|
|
** Plugin reload warning
|
|
*/
|
|
|
|
.tc-plugin-reload-warning {
|
|
z-index: 1000;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: <<colour alert-background>>;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
** Buttons
|
|
*/
|
|
|
|
button svg, button img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-btn-invisible {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.tc-btn-boxed {
|
|
font-size: 0.6em;
|
|
padding: 0.2em;
|
|
margin: 1px;
|
|
background: none;
|
|
border: 1px solid <<colour tiddler-controls-foreground>>;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-boxed svg {
|
|
font-size: 1.6666em;
|
|
}
|
|
|
|
.tc-btn-boxed:hover {
|
|
background: <<colour muted-foreground>>;
|
|
color: <<colour background>>;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-boxed:hover svg {
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-btn-rounded {
|
|
font-size: 0.5em;
|
|
line-height: 2;
|
|
padding: 0em 0.3em 0.2em 0.4em;
|
|
margin: 1px;
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background: <<colour muted-foreground>>;
|
|
color: <<colour background>>;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-rounded svg {
|
|
font-size: 1.6666em;
|
|
fill: <<colour background>>;
|
|
}
|
|
|
|
.tc-btn-rounded:hover {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background: <<colour background>>;
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
html body.tc-body .tc-btn-rounded:hover svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-btn-icon svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-btn-text {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-btn-big-green {
|
|
display: inline-block;
|
|
padding: 8px;
|
|
margin: 4px 8px 4px 8px;
|
|
background: <<colour download-background>>;
|
|
color: <<colour download-foreground>>;
|
|
fill: <<colour download-foreground>>;
|
|
border: none;
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-btn-big-green svg,
|
|
.tc-btn-big-green img {
|
|
height: 2em;
|
|
width: 2em;
|
|
vertical-align: middle;
|
|
fill: <<colour download-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists input {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button {
|
|
color: <<colour sidebar-button-foreground>>;
|
|
fill: <<colour sidebar-button-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button.tc-btn-mini {
|
|
color: <<colour sidebar-muted-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-lists button.tc-btn-mini:hover {
|
|
color: <<colour sidebar-muted-foreground-hover>>;
|
|
}
|
|
|
|
button svg.tc-image-button, button .tc-image-button img {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
.tc-unfold-banner {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
width: calc(100% + 2px);
|
|
margin-left: -43px;
|
|
text-align: center;
|
|
border-top: 2px solid <<colour tiddler-info-background>>;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tc-unfold-banner:hover {
|
|
background: <<colour tiddler-info-background>>;
|
|
border-top: 2px solid <<colour tiddler-info-border>>;
|
|
}
|
|
|
|
.tc-unfold-banner svg, .tc-fold-banner svg {
|
|
height: 0.75em;
|
|
fill: <<colour tiddler-controls-foreground>>;
|
|
}
|
|
|
|
.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
|
|
fill: <<colour tiddler-controls-foreground-hover>>;
|
|
}
|
|
|
|
.tc-fold-banner {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
width: 23px;
|
|
text-align: center;
|
|
margin-left: -35px;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.tc-fold-banner:hover {
|
|
background: <<colour tiddler-info-background>>;
|
|
}
|
|
|
|
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.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;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.tc-tags-wrapper {
|
|
margin: 4px 0 14px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
button.tc-tag-label, span.tc-tag-label {
|
|
display: inline-block;
|
|
padding: 0.16em 0.7em;
|
|
font-size: 0.9em;
|
|
font-weight: 300;
|
|
line-height: 1.2em;
|
|
color: <<colour tag-foreground>>;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
background-color: <<colour tag-background>>;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.tc-untagged-separator {
|
|
width: 10em;
|
|
left: 0;
|
|
margin-left: 0;
|
|
border: 0;
|
|
height: 1px;
|
|
background: <<colour tab-divider>>;
|
|
}
|
|
|
|
button.tc-untagged-label {
|
|
background-color: <<colour untagged-background>>;
|
|
}
|
|
|
|
.tc-tag-label svg, .tc-tag-label img {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour tag-foreground>>;
|
|
}
|
|
|
|
.tc-tag-manager-table .tc-tag-label {
|
|
white-space: normal;
|
|
}
|
|
|
|
.tc-tag-manager-tag {
|
|
width: 100%;
|
|
}
|
|
|
|
/*
|
|
** Page layout
|
|
*/
|
|
|
|
.tc-topbar {
|
|
position: fixed;
|
|
z-index: 1200;
|
|
}
|
|
|
|
.tc-topbar-left {
|
|
left: 29px;
|
|
top: 5px;
|
|
}
|
|
|
|
.tc-topbar-right {
|
|
top: 5px;
|
|
right: 29px;
|
|
}
|
|
|
|
.tc-topbar button {
|
|
padding: 8px;
|
|
}
|
|
|
|
.tc-topbar svg {
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-topbar button:hover svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-header {
|
|
color: <<colour sidebar-foreground>>;
|
|
fill: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-sidebar-lists p {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tc-sidebar-header .tc-missing-tiddler-label {
|
|
color: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-advanced-search input {
|
|
width: 60%;
|
|
}
|
|
|
|
.tc-search a svg {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-page-controls {
|
|
margin-top: 14px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.tc-page-controls button {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.tc-page-controls a.tc-tiddlylink:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-page-controls img {
|
|
width: 1em;
|
|
}
|
|
|
|
.tc-page-controls svg {
|
|
fill: <<colour sidebar-controls-foreground>>;
|
|
}
|
|
|
|
.tc-page-controls button:hover svg, .tc-page-controls a:hover svg {
|
|
fill: <<colour sidebar-controls-foreground-hover>>;
|
|
}
|
|
|
|
.tc-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: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-sidebar-header {
|
|
padding: 14px;
|
|
min-height: 32px;
|
|
margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
}
|
|
|
|
.tc-story-river {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-message-box {
|
|
margin: 21px -21px 21px -21px;
|
|
}
|
|
|
|
.tc-sidebar-scrollable {
|
|
position: fixed;
|
|
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0 0 0 -42px;
|
|
padding: 71px 0 28px 42px;
|
|
}
|
|
|
|
.tc-story-river {
|
|
position: relative;
|
|
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
|
|
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};
|
|
padding: 42px 42px 42px 42px;
|
|
}
|
|
|
|
<<if-no-sidebar "
|
|
|
|
.tc-story-river {
|
|
width: auto;
|
|
}
|
|
|
|
">>
|
|
|
|
}
|
|
|
|
@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: 28px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
** Tiddler styles
|
|
*/
|
|
|
|
.tc-tiddler-frame {
|
|
position: relative;
|
|
margin-bottom: 28px;
|
|
background-color: <<colour tiddler-background>>;
|
|
border: 1px solid <<colour tiddler-border>>;
|
|
}
|
|
|
|
{{$:/themes/tiddlywiki/vanilla/sticky}}
|
|
|
|
.tc-tiddler-info {
|
|
padding: 14px 42px 14px 42px;
|
|
background-color: <<colour tiddler-info-background>>;
|
|
border-top: 1px solid <<colour tiddler-info-border>>;
|
|
border-bottom: 1px solid <<colour tiddler-info-border>>;
|
|
}
|
|
|
|
.tc-tiddler-info p {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tc-tiddler-info .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour tiddler-info-tab-background>>;
|
|
border-bottom: 1px solid <<colour tiddler-info-tab-background>>;
|
|
}
|
|
|
|
.tc-view-field-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-view-field-name {
|
|
width: 1%; /* Makes this column be as narrow as possible */
|
|
text-align: right;
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.tc-view-field-value {
|
|
}
|
|
|
|
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
.tc-tiddler-frame {
|
|
padding: 14px 14px 14px 14px;
|
|
}
|
|
|
|
.tc-tiddler-info {
|
|
margin: 0 -14px 0 -14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
.tc-tiddler-frame {
|
|
padding: 28px 42px 42px 42px;
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
|
|
border-radius: 2px;
|
|
}
|
|
|
|
<<if-no-sidebar "
|
|
|
|
.tc-tiddler-frame {
|
|
width: 100%;
|
|
}
|
|
|
|
">>
|
|
|
|
.tc-tiddler-info {
|
|
margin: 0 -42px 0 -42px;
|
|
}
|
|
}
|
|
|
|
.tc-site-title,
|
|
.tc-titlebar {
|
|
font-weight: 300;
|
|
font-size: 2.35em;
|
|
line-height: 1.2em;
|
|
color: <<colour tiddler-title-foreground>>;
|
|
margin: 0;
|
|
}
|
|
|
|
.tc-site-title {
|
|
color: <<colour site-title-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-title-icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-system-title-prefix {
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-titlebar h2 {
|
|
font-size: 1em;
|
|
display: inline;
|
|
}
|
|
|
|
.tc-titlebar img {
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-subtitle {
|
|
font-size: 0.9em;
|
|
color: <<colour tiddler-subtitle-foreground>>;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.tc-tiddler-missing .tc-title {
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-controls {
|
|
float: right;
|
|
}
|
|
|
|
.tc-tiddler-controls .tc-drop-down {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.tc-tiddler-controls .tc-drop-down .tc-drop-down {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.tc-tiddler-controls > span > button {
|
|
vertical-align: baseline;
|
|
margin-left:5px;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg, .tc-tiddler-controls button img,
|
|
.tc-search button svg, .tc-search a svg {
|
|
height: 0.75em;
|
|
fill: <<colour tiddler-controls-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button.tc-selected svg,
|
|
.tc-page-controls button.tc-selected svg {
|
|
fill: <<colour tiddler-controls-foreground-selected>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button.tc-btn-invisible:hover svg,
|
|
.tc-search button:hover svg, .tc-search a:hover svg {
|
|
fill: <<colour tiddler-controls-foreground-hover>>;
|
|
}
|
|
|
|
@media print {
|
|
.tc-tiddler-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tc-tiddler-help { /* Help prompts within tiddler template */
|
|
color: <<colour muted-foreground>>;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.tc-tiddler-help a.tc-tiddlylink {
|
|
color: <<colour very-muted-foreground>>;
|
|
}
|
|
|
|
.tc-tiddler-frame input.tc-edit-texteditor, .tc-tiddler-frame textarea.tc-edit-texteditor {
|
|
width: 100%;
|
|
padding: 3px 3px 3px 3px;
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
line-height: 1.3em;
|
|
-webkit-appearance: none;
|
|
margin: 4px 0 4px 0;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-binary-warning {
|
|
width: 100%;
|
|
height: 5em;
|
|
text-align: center;
|
|
padding: 3em 3em 6em 3em;
|
|
background: <<colour alert-background>>;
|
|
border: 1px solid <<colour alert-border>>;
|
|
}
|
|
|
|
.tc-tiddler-frame input.tc-edit-texteditor {
|
|
background-color: <<colour tiddler-editor-background>>;
|
|
}
|
|
|
|
canvas.tc-edit-bitmapeditor {
|
|
border: 6px solid <<colour tiddler-editor-border-image>>;
|
|
cursor: crosshair;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.tc-edit-bitmapeditor-width {
|
|
display: block;
|
|
}
|
|
|
|
.tc-edit-bitmapeditor-height {
|
|
display: block;
|
|
}
|
|
|
|
.tc-tiddler-body {
|
|
clear: both;
|
|
}
|
|
|
|
.tc-tiddler-frame .tc-tiddler-body {
|
|
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
|
|
line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};
|
|
}
|
|
|
|
.tc-titlebar, .tc-tiddler-edit-title {
|
|
overflow: hidden; /* https://github.com/Jermolene/TiddlyWiki5/issues/282 */
|
|
}
|
|
|
|
html body.tc-body.tc-single-tiddler-window {
|
|
margin: 1em;
|
|
background: <<colour tiddler-background>>;
|
|
}
|
|
|
|
.tc-single-tiddler-window img,
|
|
.tc-single-tiddler-window svg,
|
|
.tc-single-tiddler-window canvas,
|
|
.tc-single-tiddler-window embed,
|
|
.tc-single-tiddler-window iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
** Adjustments for fluid-fixed mode
|
|
*/
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
<<if-fluid-fixed text:"""
|
|
|
|
.tc-story-river {
|
|
padding-right: 0;
|
|
position: relative;
|
|
width: auto;
|
|
left: 0;
|
|
margin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
|
|
margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
|
|
}
|
|
|
|
.tc-tiddler-frame {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-sidebar-scrollable {
|
|
left: auto;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
|
|
}
|
|
|
|
body.tc-body .tc-storyview-zoomin-tiddler {
|
|
width: 100%;
|
|
width: calc(100% - 42px);
|
|
}
|
|
|
|
""" hiddenSidebarText:"""
|
|
|
|
.tc-story-river {
|
|
padding-right: 3em;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body.tc-body .tc-storyview-zoomin-tiddler {
|
|
width: 100%;
|
|
width: calc(100% - 84px);
|
|
}
|
|
|
|
""">>
|
|
|
|
}
|
|
|
|
/*
|
|
** Toolbar buttons
|
|
*/
|
|
|
|
.tc-page-controls svg.tc-image-new-button {
|
|
fill: <<colour toolbar-new-button>>;
|
|
}
|
|
|
|
.tc-page-controls svg.tc-image-options-button {
|
|
fill: <<colour toolbar-options-button>>;
|
|
}
|
|
|
|
.tc-page-controls svg.tc-image-save-button {
|
|
fill: <<colour toolbar-save-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-info-button {
|
|
fill: <<colour toolbar-info-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-edit-button {
|
|
fill: <<colour toolbar-edit-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-close-button {
|
|
fill: <<colour toolbar-close-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-delete-button {
|
|
fill: <<colour toolbar-delete-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-cancel-button {
|
|
fill: <<colour toolbar-cancel-button>>;
|
|
}
|
|
|
|
.tc-tiddler-controls button svg.tc-image-done-button {
|
|
fill: <<colour toolbar-done-button>>;
|
|
}
|
|
|
|
/*
|
|
** Tiddler edit mode
|
|
*/
|
|
|
|
.tc-tiddler-edit-frame em.tc-edit {
|
|
color: <<colour muted-foreground>>;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tc-edit-type-dropdown a.tc-tiddlylink-missing {
|
|
font-style: normal;
|
|
}
|
|
|
|
.tc-edit-tags {
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
padding: 4px 8px 4px 8px;
|
|
}
|
|
|
|
.tc-edit-add-tag {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tc-edit-add-tag .tc-add-tag-name input {
|
|
width: 50%;
|
|
}
|
|
|
|
.tc-edit-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: 48%;
|
|
border: 1px solid <<colour tiddler-editor-border>>;
|
|
margin: 4px 3px 3px 3px;
|
|
padding: 3px 3px 3px 3px;
|
|
}
|
|
|
|
.tc-tiddler-preview-edit {
|
|
width: 48%;
|
|
}
|
|
|
|
.tc-edit-fields {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.tc-edit-fields table, .tc-edit-fields tr, .tc-edit-fields td {
|
|
border: none;
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-edit-fields > tbody > .tc-edit-field:nth-child(odd) {
|
|
background-color: <<colour tiddler-editor-fields-odd>>;
|
|
}
|
|
|
|
.tc-edit-fields > tbody > .tc-edit-field:nth-child(even) {
|
|
background-color: <<colour tiddler-editor-fields-even>>;
|
|
}
|
|
|
|
.tc-edit-field-name {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-edit-field-value input {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-edit-field-remove {
|
|
}
|
|
|
|
.tc-edit-field-remove svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-edit-field-add-name {
|
|
display: inline-block;
|
|
width: 15%;
|
|
}
|
|
|
|
.tc-edit-field-add-value {
|
|
display: inline-block;
|
|
width: 40%;
|
|
}
|
|
|
|
.tc-edit-field-add-button {
|
|
display: inline-block;
|
|
width: 10%;
|
|
}
|
|
|
|
/*
|
|
** Storyview Classes
|
|
*/
|
|
|
|
.tc-storyview-zoomin-tiddler {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-storyview-zoomin-tiddler {
|
|
width: calc(100% - 84px);
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
** Dropdowns
|
|
*/
|
|
|
|
.tc-btn-dropdown {
|
|
text-align: left;
|
|
}
|
|
|
|
.tc-btn-dropdown svg, .tc-btn-dropdown img {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-drop-down-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-drop-down {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
min-width: 380px;
|
|
border: 1px solid <<colour dropdown-border>>;
|
|
background-color: <<colour dropdown-background>>;
|
|
padding: 7px 0 7px 0;
|
|
margin: 4px 0 0 0;
|
|
white-space: nowrap;
|
|
text-shadow: none;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-search-drop-down {
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.tc-drop-down .tc-drop-down {
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.tc-drop-down button svg, .tc-drop-down a svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-drop-down button.tc-btn-invisible:hover svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.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-language-chooser img {
|
|
width: 2em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tc-drop-down a, .tc-drop-down button {
|
|
display: block;
|
|
padding: 0 14px 0 14px;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: <<colour foreground>>;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-drop-down .tc-prompt {
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.tc-drop-down .tc-chooser {
|
|
border: none;
|
|
}
|
|
|
|
.tc-drop-down .tc-chooser .tc-swatches-horiz {
|
|
font-size: 0.4em;
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
.tc-drop-down .tc-file-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.tc-drop-down .tc-file-input-wrapper button {
|
|
color: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input-wrapper:hover button {
|
|
color: <<colour tiddler-link-background>>;
|
|
background-color: <<colour tiddler-link-foreground>>;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-buttons button {
|
|
background-color: <<colour dropdown-tab-background>>;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour dropdown-tab-background-selected>>;
|
|
border-bottom: 1px solid <<colour dropdown-tab-background-selected>>;
|
|
}
|
|
|
|
.tc-drop-down-bullet {
|
|
display: inline-block;
|
|
width: 0.5em;
|
|
}
|
|
|
|
.tc-drop-down .tc-tab-contents a {
|
|
padding: 0 0.5em 0 0.5em;
|
|
}
|
|
|
|
.tc-block-dropdown-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-block-dropdown {
|
|
position: absolute;
|
|
min-width: 220px;
|
|
border: 1px solid <<colour dropdown-border>>;
|
|
background-color: <<colour dropdown-background>>;
|
|
padding: 7px 0;
|
|
margin: 4px 0 0 0;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tc-block-dropdown a {
|
|
display: block;
|
|
padding: 4px 14px 4px 14px;
|
|
}
|
|
|
|
.tc-drop-down .tc-dropdown-item,
|
|
.tc-block-dropdown .tc-dropdown-item {
|
|
padding: 4px 14px 4px 7px;
|
|
color: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-block-dropdown a:hover {
|
|
color: <<colour tiddler-link-background>>;
|
|
background-color: <<colour tiddler-link-foreground>>;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*
|
|
** Modals
|
|
*/
|
|
|
|
.tc-modal-wrapper {
|
|
position: fixed;
|
|
overflow: auto;
|
|
overflow-y: scroll;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.tc-modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
background-color: <<colour modal-backdrop>>;
|
|
}
|
|
|
|
.tc-modal {
|
|
z-index: 1100;
|
|
background-color: <<colour modal-background>>;
|
|
border: 1px solid <<colour modal-border>>;
|
|
}
|
|
|
|
@media (max-width: 55em) {
|
|
.tc-modal {
|
|
position: fixed;
|
|
top: 1em;
|
|
left: 1em;
|
|
right: 1em;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 55em) {
|
|
.tc-modal {
|
|
position: fixed;
|
|
top: 2em;
|
|
left: 25%;
|
|
width: 50%;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
.tc-modal-header {
|
|
padding: 9px 15px;
|
|
border-bottom: 1px solid <<colour modal-header-border>>;
|
|
}
|
|
|
|
.tc-modal-header h3 {
|
|
margin: 0;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.tc-modal-header img, .tc-modal-header svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-modal-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.tc-modal-footer {
|
|
padding: 14px 15px 15px;
|
|
margin-bottom: 0;
|
|
text-align: right;
|
|
background-color: <<colour modal-footer-background>>;
|
|
border-top: 1px solid <<colour modal-footer-border>>;
|
|
}
|
|
|
|
/*
|
|
** Notifications
|
|
*/
|
|
|
|
.tc-notification {
|
|
position: fixed;
|
|
top: 14px;
|
|
right: 42px;
|
|
z-index: 1300;
|
|
max-width: 280px;
|
|
padding: 0 14px 0 14px;
|
|
background-color: <<colour notification-background>>;
|
|
border: 1px solid <<colour notification-border>>;
|
|
}
|
|
|
|
/*
|
|
** Tabs
|
|
*/
|
|
|
|
.tc-tab-set.tc-vertical {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.tc-tab-buttons {
|
|
font-size: 0.85em;
|
|
padding-top: 1em;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical {
|
|
z-index: 100;
|
|
display: block;
|
|
padding-top: 14px;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
margin-bottom: inherit;
|
|
margin-right: -1px;
|
|
max-width: 33%;
|
|
-webkit-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.tc-tab-buttons button.tc-tab-selected {
|
|
color: <<colour tab-foreground-selected>>;
|
|
background-color: <<colour tab-background-selected>>;
|
|
border-left: 1px solid <<colour tab-border-selected>>;
|
|
border-top: 1px solid <<colour tab-border-selected>>;
|
|
border-right: 1px solid <<colour tab-border-selected>>;
|
|
}
|
|
|
|
.tc-tab-buttons button {
|
|
color: <<colour tab-foreground>>;
|
|
padding: 3px 5px 3px 5px;
|
|
font-weight: 300;
|
|
border: none;
|
|
background: inherit;
|
|
background-color: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-right: 1px solid <<colour tab-border>>;
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical button {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 3px;
|
|
text-align: right;
|
|
background-color: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
border-right: none;
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
.tc-tab-buttons.tc-vertical button.tc-tab-selected {
|
|
background-color: <<colour tab-background-selected>>;
|
|
border-right: 1px solid <<colour tab-background-selected>>;
|
|
}
|
|
|
|
.tc-tab-divider {
|
|
border-top: 1px solid <<colour tab-divider>>;
|
|
}
|
|
|
|
.tc-tab-divider.tc-vertical {
|
|
display: none;
|
|
}
|
|
|
|
.tc-tab-content {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.tc-tab-content.tc-vertical {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-top: 0;
|
|
padding-left: 14px;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
-webkit-flex: 1 0 70%;
|
|
flex: 1 0 70%;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour sidebar-tab-background-selected>>;
|
|
color: <<colour sidebar-tab-foreground-selected>>;
|
|
border-left: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
border-top: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
border-right: 1px solid <<colour sidebar-tab-border-selected>>;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-buttons button {
|
|
display: inline;
|
|
width: auto;
|
|
background-color: <<colour sidebar-tab-background>>;
|
|
color: <<colour sidebar-tab-foreground>>;
|
|
border-left: 1px solid <<colour sidebar-tab-border>>;
|
|
border-top: 1px solid <<colour sidebar-tab-border>>;
|
|
border-right: 1px solid <<colour sidebar-tab-border>>;
|
|
}
|
|
|
|
.tc-sidebar-lists .tc-tab-divider {
|
|
border-top: 1px solid <<colour sidebar-tab-divider>>;
|
|
}
|
|
|
|
.tc-more-sidebar .tc-tab-buttons button {
|
|
display: block;
|
|
width: 100%;
|
|
background-color: <<colour sidebar-tab-background>>;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
border-right: 1px solid #ccc;
|
|
margin-bottom: inherit;
|
|
}
|
|
|
|
.tc-more-sidebar .tc-tab-buttons button.tc-tab-selected {
|
|
background-color: <<colour sidebar-tab-background-selected>>;
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
** Alerts
|
|
*/
|
|
|
|
.tc-alerts {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: 500px;
|
|
z-index: 20000;
|
|
}
|
|
|
|
.tc-alert {
|
|
position: relative;
|
|
margin: 28px;
|
|
padding: 14px 14px 14px 14px;
|
|
border: 2px solid <<colour alert-border>>;
|
|
background-color: <<colour alert-background>>;
|
|
}
|
|
|
|
.tc-alert-toolbar {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
}
|
|
|
|
.tc-alert-toolbar svg {
|
|
fill: <<colour alert-muted-foreground>>;
|
|
}
|
|
|
|
.tc-alert-subtitle {
|
|
color: <<colour alert-muted-foreground>>;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-alert-highlight {
|
|
color: <<colour alert-highlight>>;
|
|
}
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-static-alert {
|
|
position: relative;
|
|
}
|
|
|
|
.tc-static-alert-inner {
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-static-alert-inner {
|
|
padding: 0 2px 2px 42px;
|
|
color: <<colour static-alert-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** 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: block;
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
background-colour: <<colour background>>;
|
|
margin: 0.5em 0 0.5em 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.tc-plugin-info-disabled {
|
|
background: -webkit-repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);
|
|
background: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);
|
|
}
|
|
|
|
.tc-plugin-info-disabled:hover {
|
|
background: -webkit-repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);
|
|
background: repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);
|
|
}
|
|
|
|
a.tc-tiddlylink.tc-plugin-info:hover {
|
|
text-decoration: none;
|
|
background-color: <<colour primary>>;
|
|
color: <<colour background>>;
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > svg {
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-plugin-info-chunk {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-plugin-info-chunk h1 {
|
|
font-size: 1em;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info-chunk h2 {
|
|
font-size: 0.8em;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info-chunk div {
|
|
font-size: 0.7em;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
.tc-plugin-info:hover > .tc-plugin-info-chunk > img, .tc-plugin-info:hover > .tc-plugin-info-chunk > svg {
|
|
width: 2em;
|
|
height: 2em;
|
|
fill: <<colour foreground>>;
|
|
}
|
|
|
|
.tc-plugin-info > .tc-plugin-info-chunk > img, .tc-plugin-info > .tc-plugin-info-chunk > svg {
|
|
width: 2em;
|
|
height: 2em;
|
|
fill: <<colour muted-foreground>>;
|
|
}
|
|
|
|
.tc-plugin-info.tc-small-icon > .tc-plugin-info-chunk > img, .tc-plugin-info.tc-small-icon > .tc-plugin-info-chunk > svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown-message {
|
|
background: <<colour message-background>>;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.tc-plugin-info-dropdown-body {
|
|
padding: 1em 1em 1em 1em;
|
|
}
|
|
|
|
/*
|
|
** Message boxes
|
|
*/
|
|
|
|
.tc-message-box {
|
|
border: 1px solid <<colour message-border>>;
|
|
background: <<colour message-background>>;
|
|
padding: 0px 21px 0px 21px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
color: <<colour message-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** Pictures
|
|
*/
|
|
|
|
.tc-bordered-image {
|
|
border: 1px solid <<colour muted-foreground>>;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
/*
|
|
** Floats
|
|
*/
|
|
|
|
.tc-float-right {
|
|
float: right;
|
|
}
|
|
|
|
/*
|
|
** Chooser
|
|
*/
|
|
|
|
.tc-chooser {
|
|
border: 1px solid <<colour table-border>>;
|
|
}
|
|
|
|
.tc-chooser-item {
|
|
border: 8px;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.tc-chooser-item a.tc-tiddlylink {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: <<colour tiddler-link-foreground>>;
|
|
background-color: <<colour tiddler-link-background>>;
|
|
}
|
|
|
|
.tc-chooser-item a.tc-tiddlylink:hover {
|
|
text-decoration: none;
|
|
color: <<colour tiddler-link-background>>;
|
|
background-color: <<colour tiddler-link-foreground>>;
|
|
}
|
|
|
|
/*
|
|
** 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;
|
|
}
|
|
|
|
/*
|
|
** Table of contents
|
|
*/
|
|
|
|
.tc-sidebar-lists .tc-table-of-contents {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tc-table-of-contents button {
|
|
color: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-table-of-contents svg {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
vertical-align: middle;
|
|
fill: <<colour sidebar-foreground>>;
|
|
}
|
|
|
|
.tc-table-of-contents ol {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tc-table-of-contents ol ol {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.tc-table-of-contents li {
|
|
font-size: 1.0em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-table-of-contents li a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-table-of-contents li li {
|
|
font-size: 0.95em;
|
|
font-weight: normal;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tc-table-of-contents li li a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tc-table-of-contents li li li {
|
|
font-size: 0.95em;
|
|
font-weight: 200;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tc-table-of-contents li li li a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tc-table-of-contents li li li li {
|
|
font-size: 0.95em;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents {
|
|
z-index: 100;
|
|
display: inline-block;
|
|
padding-left: 1em;
|
|
max-width: 50%;
|
|
-webkit-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
background: <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
|
display: block;
|
|
padding: 0.12em 1em 0.12em 0.25em;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {
|
|
border-top: 1px solid <<colour tab-background>>;
|
|
border-left: 1px solid <<colour tab-background>>;
|
|
border-bottom: 1px solid <<colour tab-background>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {
|
|
text-decoration: none;
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
background: <<colour tab-border>>;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
|
border-top: 1px solid <<colour tab-border>>;
|
|
border-left: 1px solid <<colour tab-border>>;
|
|
border-bottom: 1px solid <<colour tab-border>>;
|
|
background: <<colour background>>;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
border: 1px solid <<colour tab-border>>;
|
|
-webkit-flex: 1 0 50%;
|
|
flex: 1 0 50%;
|
|
}
|
|
|
|
/*
|
|
** Dirty indicator
|
|
*/
|
|
|
|
body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg {
|
|
fill: <<colour dirty-indicator>>;
|
|
color: <<colour dirty-indicator>>;
|
|
}
|
|
|
|
/*
|
|
** File inputs
|
|
*/
|
|
|
|
.tc-file-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tc-file-input-wrapper input[type=file] {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
font-size: 999px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
filter: alpha(opacity=0);
|
|
opacity: 0;
|
|
outline: none;
|
|
background: white;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
/*
|
|
** Thumbnail macros
|
|
*/
|
|
|
|
.tc-thumbnail-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tc-thumbnail-right-wrapper {
|
|
float:right;
|
|
margin: 0.5em 0 0.5em 0.5em;
|
|
}
|
|
|
|
.tc-thumbnail-image {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-image svg,
|
|
.tc-thumbnail-image img {
|
|
filter: alpha(opacity=1);
|
|
opacity: 1;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-image img {
|
|
filter: alpha(opacity=0.8);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tc-thumbnail-background {
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-icon svg,
|
|
.tc-thumbnail-icon img {
|
|
width: 3em;
|
|
height: 3em;
|
|
<<filter "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))">>
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
|
|
fill: #fff;
|
|
<<filter "drop-shadow(3px 3px 4px rgba(0,0,0,0.6))">>
|
|
}
|
|
|
|
.tc-thumbnail-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: -webkit-flex;
|
|
-webkit-align-items: center;
|
|
-webkit-justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tc-thumbnail-caption {
|
|
position: absolute;
|
|
background-color: #777;
|
|
color: #fff;
|
|
text-align: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
filter: alpha(opacity=0.9);
|
|
opacity: 0.9;
|
|
line-height: 1.4;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {
|
|
filter: alpha(opacity=1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/*
|
|
** Errors
|
|
*/
|
|
|
|
.tc-error {
|
|
background: #f00;
|
|
color: #fff;
|
|
}
|