/* strex standard styling */
.strex-container, .strex-container .tc-reveal, .strex-all {
position: relative;
margin-left: -0.1rem;
}
.strex-open, .strex-start, .strex-end {
padding: 0 0.1rem;
line-height: 96%;
background-color: white;
font-size: 0.6rem;
position: relative;
top: -0.36rem;
border: 0;
}
.strex-open:hover, .strex-start:hover, .strex-end:hover {
border: 0;
}
.strex-open:active, .strex-start:active, .strex-end:active,
.strex-open:focus, .strex-start:focus, .strex-end:focus {
border: 0;
}
.strex-content {
color: darkgoldenrod;
display:inline;
-webkit-animation: expandtext 0.2s ease 0s running;
animation-name: expandtext;
animation-duration: 0.2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
font-size: 0.8rem;
position: relative;
top: -0.32rem;
}
.strex-content .tc-reveal .strex-content {
color: #766;
}
/* * * * * * * * * * * *
** Footnotes with Numbers
* * * * * * * * * * * * */
body {
counter-reset: notenr;  /* set counter to 0 */
}
div .tc-tiddler-frame {
counter-reset: tidnotenr;
}
.strex-container.storynumbers {
counter-increment: notenr; /* counter +1 */
}
.strex-container.numbers {
counter-increment: tidnotenr;
}
button.strex-open.storynumbers::before,
button.strex-start.storynumbers::before {
content: counter(notenr); /* Display the counter */
font-size: xx-small;
vertical-align: top;
}
button.strex-end.storynumbers::after {
content: counter(notenr);
font-size: xx-small;
vertical-align: top;
}
button.strex-open.numbers::before,
button.strex-start.numbers::before {
content: counter(tidnotenr);
}
button.strex-end.numbers::after {
content: counter(tidnotenr);
}
/* Footer Collection as Numbered List `<ol>` */
.footnotes p ol {
list-style-type: none;
margin: 0;
padding: 0;
counter-reset: li-counter;
}
.footnotes p ol span > li {
position: relative;
margin-bottom: 0.6em;
margin-left: 2.25rem;
padding: 0.2em;
background-color: <<colour sidebar-tab-background-selected>>;
min-height: 2.1em;
}
.footnotes p ol span > li:before {
position: absolute;
top: 0;
width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
line-height: 1;
text-align: right;
color: <<colour sidebar-tab-foreground>>;
background-color: <<colour sidebar-tab-background>>;
content: counter(li-counter);
counter-increment: li-counter;
padding: 0.1em 0.2em 0.2em 0.1em;
margin-left: -2.5rem;
}
/* * * * * * * * * * * *
** Special Styles
* * * * * * * * * * * * */
/* hidden parts */
.strex-content.nocontent, .strex-start.nostart, .strex-end.noend, .strex-close.noclose {
display: none;
}
/* standard text color */
.strex-content.standardcolor {
color: <<colour foreground>>;
}
/* block */
.strex-content.block, .strex-inner.blockinner,
.strex-container.blockcontainer {
display: block;
}
/* hint */
.strex-inner.hint {
position: absolute;
min-width: 500px;
background-color: rgb(252, 254, 211);
border: 0;
box-shadow: 5px 5px 10px #aaa;
padding: 15px 13px 12px 15px;
margin: 24px 0 0 -5px;
z-index: 998;
}
.strexXX-inner.hint {
display: block;
}
.strex-start.hint {
letter-spacing: -0.5em;
color: rgba(1,1,1,0) !important;
background-color: transparent;
border: 0;
position: absolute;
padding: 0 6px 3px;
right: 10px;
top: 5px;
}
.strex-inner.hint button::before {
/* content: " &#215;"; */
font-size: 1.2em;
color: <<colour tiddler-link-foreground>>;
}
.strex-content.hint {
text-align:left;
}
/* note top right */
.strex-inner.note {
background-color: rgb(252, 254, 211);
border: 0;
box-shadow: 5px 5px 10px #aaa;
display: block;
min-width: 220px;
padding: 26px 10px 15px 15px;
position: fixed;
right: 5%;
top: 5%;
z-index: 998;
}
.strex-start.note {
position: absolute;
padding: 0 6px 3px;
right: 5px;
top: 5px;
}
.strex-content.note {
padding-right: 10px;
}
/* note flex */
.strex-inner.noteflex {
background-color: rgb(252, 254, 211);
border: 0;
box-shadow: 5px 5px 10px #aaa;
display: flex;
flex-flow: column wrap;
min-width: 220px;
padding: 10px 15px 15px 15px;
position: fixed;
right: 5%;
top: 5%;
z-index: 999;
/* justify-content: center; */
}
.strex-start.noteflex {
display: flex;
order: 2;
margin: 10px auto 1px;
order: 2;
padding: 3px 10px 5px;
}
.strex-content.noteflex {
display: flex;
order: 1;
margin-top: 8px;
width: 100%;
}
/* * * * * * * * * * * *
** stretch animation
* * * * * * * * * * * * */
@keyframes expandtext {
0% {
letter-spacing: -0.48em;
rotateY(88deg);
opacity: 0;
}
70.0% {
opacity: 0.35;
}
100.0% {
letter-spacing: 0;
rotateY(0deg);
opacity: 1;
}
}
@-webkit-keyframes expandtext {
0% {
letter-spacing: -0.48em;
rotateY(88deg);
opacity: 0;
}
100.0% {
letter-spacing: 0;
rotateY(0deg);
opacity: 1;
}
}