CSS.tid

title: $:/core/macros/CSS
tags: $:/tags/Macro

\define colour(name)
<$transclude tiddler={{$:/palette}} index="$name$"><$transclude tiddler="$:/palettes/Vanilla" index="$name$"/></$transclude>
\end

\define color(name)
<<colour $name$>>
\end

\define box-shadow(shadow)
``
  -webkit-box-shadow: $shadow$;
     -moz-box-shadow: $shadow$;
          box-shadow: $shadow$;
``
\end

\define filter(filter)
``
  -webkit-filter: $filter$;
     -moz-filter: $filter$;
          filter: $filter$;
``
\end

\define transition(transition)
``
  -webkit-transition: $transition$;
     -moz-transition: $transition$;
          transition: $transition$;
``
\end

\define transform-origin(origin)
``
  -webkit-transform-origin: $origin$;
     -moz-transform-origin: $origin$;
          transform-origin: $origin$;
``
\end

\define background-linear-gradient(gradient)
``
background-image: linear-gradient($gradient$);
background-image: -o-linear-gradient($gradient$);
background-image: -moz-linear-gradient($gradient$);
background-image: -webkit-linear-gradient($gradient$);
background-image: -ms-linear-gradient($gradient$);
``
\end

\define column-count(columns)
``
-moz-column-count: $columns$;
-webkit-column-count: $columns$;
column-count: $columns$;
``
\end

\define datauri(title)
<$macrocall $name="makedatauri" type={{$title$!!type}} text={{$title$}}/>
\end

\define if-sidebar(text)
<$reveal state="$:/state/sidebar" type="match" text="yes" default="yes">$text$</$reveal>
\end

\define if-no-sidebar(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">$text$</$reveal>
\end

\define if-background-attachment(text)
<$reveal state="$:/themes/tiddlywiki/vanilla/settings/backgroundimage" type="nomatch" text="">$text$</$reveal>
\end

\define create-data-tag()
\rules only
$(classesBefore)$[$(tagName)$$(tagSelector)$"$(escapedTagValue)$"]$(classesAfter)$ {
$(tagStyles)$
}
\end

\define assign-css-to-data-tag(tagName:"data-tiddler-title",tagSelector:"=",tagValue:"",tagStyles:"",classesBefore:"",classesAfter:"")
\whitespace trim
<$vars escapedTagValue={{{ [<__tagValue__>escapecss[]] }}} tagStyles=<<__tagStyles__>> tagName=<<__tagName__>> tagSelector=<<__tagSelector__>> classesBefore=<<__classesBefore__>> classesAfter=<<__classesAfter__>>>
<<create-data-tag>>
</$vars>
\end

\define get-full-zindex-list()
$(zIndexFilter)$ $(tiddlerList)$
\end

\define sticky-z-index()
z-index: $(zIndex)$;
\end

\define sticky-titles()
\whitespace trim
<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="match" text="yes">
``
.tc-tiddler-title {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 0px;
	background: ``<<colour tiddler-background>>``;
	z-index: 500;
}
``
<$set name="morePopupTiddler" value={{{ [all[tiddlers]removeprefix[$:/state/popup/more/]] }}}>
<$macrocall $name="assign-css-to-data-tag" tagValue=<<morePopupTiddler>> tagStyles="z-index: 520;" classesAfter=" .tc-tiddler-title"/>
<$set name="tiddlerList" filter="[list[$:/StoryList]allafter<morePopupTiddler>limit[20]]">
<$list filter="[enlist<tiddlerList>]" variable="zIndexTiddler">
<$set name="zIndexFilter" filter="[range[1,500]addsuffix<zIndexTiddler>]">
<$set name="zIndexList" value=<<get-full-zindex-list>>>
<$set name="tiddlerIndex" value={{{ [list[$:/StoryList]allafter<morePopupTiddler>limit[20]] +[allbefore<zIndexTiddler>] [<morePopupTiddler>] +[count[]] }}}>
<$set name="reversedTiddler" value={{{ [enlist<tiddlerList>reverse[]nth<tiddlerIndex>] }}}>
<$set name="zIndex" value={{{ [enlist<zIndexList>] +[allbefore<reversedTiddler>count[]] }}}>
<$macrocall $name="assign-css-to-data-tag" tagValue=<<zIndexTiddler>> tagStyles=<<sticky-z-index>> classesAfter=" .tc-tiddler-title"/>
</$set>
</$set>
</$set>
</$set>
</$set>
</$list>
</$set>
</$set>
</$reveal>
\end