mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 12:07:19 +00:00
Code Issues Releases Wiki Activity

Remove youtube specificity from thumbnail macros

Browse Source
This commit is contained in:
Jermolene 2015-03-23 11:36:11 +00:00
parent 66f4faaef4
commit 5b38f2a17c
4 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
core/wiki/macros/thumbnails.tid Normal file
View File

@ -0,0 +1,24 @@
title: $:/core/macros/thumbails
tags: $:/tags/Macro
\define thumbnail(link,width:"280",height:"157",image,caption)
<$link to="""$link$""">
<div class="tc-thumbnail-wrapper">
<div class="tc-thumbnail-image">
[img width="$width$" height="$height$" [$image$]]
</div>
<div class="tc-thumbnail-symbol">
{{$:/core/images/video}}
</div>
<div class="tc-thumbnail-caption">
$caption$
</div>
</div>
</$link>
\end
\define thumbnail-right(link,width:"280",height:"157",image,caption)
<div class="tc-thumbnail-right-wrapper">
<<thumbnail """$link$""" """$width$""" """$height$""" """$image$""" """$caption$""">>
</div>
\end

24
core/wiki/macros/youtube.tid
View File

@ -1,24 +0,0 @@
title: $:/core/macros/youtube
tags: $:/tags/Macro
\define youtube-thumbnail(link,width:"280",height:"157",image,caption)
<$link to="""$link$""">
<div class="tc-youtube-wrapper">
<div class="tc-youtube-thumbnail">
[img width="$width$" height="$height$" [$image$]]
</div>
<div class="tc-youtube-play-symbol">
{{$:/core/images/video}}
</div>
<div class="tc-youtube-caption">
$caption$
</div>
</div>
</$link>
\end
\define youtube-right-thumbnail(link,width:"280",height:"157",image,caption)
<div class="tc-youtube-right-wrapper">
<<youtube-thumbnail """$link$""" """$width$""" """$height$""" """$image$""" """$caption$""">>
</div>
\end

2
editions/tw5.com/tiddlers/hellothere/HelloThere.tid
View File

@ -7,7 +7,7 @@ type: text/vnd.tiddlywiki
Welcome to ~TiddlyWiki, a versatile note-taking web application you can download for free, store wherever you like and customise however you wish. Use it to capture, organise and share your notes in ways that word processors and other note-taking tools cannot.
<<youtube-right-thumbnail link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki">>
<<thumbnail-right link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki">>
~TiddlyWiki is designed to be non-linear, structuring content with stories, tags, hyperlinks, and other features. You can organise and retrieve your notes in ways that conform to your personal thought patterns, rather than feel chained to one preset organisational structure.

26
themes/tiddlywiki/vanilla/base.tid
View File

@ -1651,42 +1651,42 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
** YouTube macros
*/
.tc-youtube-wrapper {
.tc-thumbnail-wrapper {
position: relative;
display: inline-block;
border: 1px solid <<colour muted-foreground>>;
}
.tc-youtube-right-wrapper {
.tc-thumbnail-right-wrapper {
float:right;
margin: 0.5em 0 0.5em 0.5em;
}
.tc-youtube-thumbnail svg,
.tc-youtube-thumbnail img {
.tc-thumbnail-image svg,
.tc-thumbnail-image img {
filter: alpha(opacity=0.6);
opacity: 0.6;
}
.tc-youtube-wrapper:hover .tc-youtube-thumbnail svg,
.tc-youtube-wrapper:hover .tc-youtube-thumbnail img {
.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,
.tc-thumbnail-wrapper:hover .tc-thumbnail-image img {
filter: alpha(opacity=1);
opacity: 1;
}
.tc-youtube-play-symbol svg,
.tc-youtube-play-symbol img {
.tc-thumbnail-symbol svg,
.tc-thumbnail-symbol img {
width: 3em;
height: 3em;
fill: #f44;
}
.tc-youtube-wrapper:hover .tc-youtube-play-symbol svg,
.tc-youtube-wrapper:hover .tc-youtube-play-symbol img {
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol svg,
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol img {
fill: #f00;
}
.tc-youtube-play-symbol {
.tc-thumbnail-symbol {
position: absolute;
top: 50%;
left: 50%;
@ -1694,7 +1694,7 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
margin-top: -1.5em;
}
.tc-youtube-caption {
.tc-thumbnail-caption {
position: absolute;
background-color: #666;
color: white;
@ -1705,7 +1705,7 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
opacity: 0.5;
}
.tc-youtube-wrapper:hover .tc-youtube-caption {
.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {
filter: alpha(opacity=1);
opacity: 1;
}