Add data attributes to ViewTemplate (#3209)

* change 3 set-widgets to 1 var-widget call. Add data-tags and userClass.

* add new documentation and change the existing one accordingly.

core/ui/ViewTemplate.tid

@@ -1,11 +1,11 @@
 title: $:/core/ui/ViewTemplate
 
 \define frame-classes()
-tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
+tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(userClass)$
 \end
 \define folded-state()
 $:/state/folded/$(currentTiddler)$
 \end
-<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
+<$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">> userClass={{!!class}}><$tiddler tiddler=<<currentTiddler>>><div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
 </div>
-</$tiddler></$set></$set>
+</$tiddler></$vars>

editions/tw5.com/tiddlers/howtos/Custom Styles by title.tid

@@ -0,0 +1,39 @@
+created: 201804111739
+modified: 201804111739
+tags: [[How to apply custom styles]]
+title: Custom styles by data-tiddler-title
+type: text/vnd.tiddlywiki
+
+! Attribute: data-tiddler-title
+
+<<.from-version "5.1.16">>
+
+The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. 
+
+For example this tiddler is named: "{{!!title}}" so the attribute looks like this: 
+
+```
+data-tiddler-title="Custom styles by title"
+```
+
+!! Examples
+
+The following CSS is defined in [[Custom data-styles]] and creates a blue border for exactly this tiddler.
+
+```
+[data-tiddler-title="Custom styles by title"] {
+  border: 1px solid blue;
+}
+```
+
+To create a green border for every tiddler that starts with `$:/` aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! )
+
+```
+[data-tiddler-title^="$:/"] {
+  border: 1px solid green;
+}
+```
+
+!! More Possibilities
+
+{{Attribute Selectors}}

editions/tw5.com/tiddlers/howtos/Custom Styles by userClass.tid

@@ -0,0 +1,26 @@
+created: 201804111739
+modified: 201804111739
+title: Custom styles by user-class
+tags: [[How to apply custom styles]]
+type: text/vnd.tiddlywiki
+
+''Tiddler Field: `class`'' <<.from-version "5.1.16">>
+
+The [[tag manager|$:/TagManager]] allows us to set a tiddler `color` field, that is used to define the "tag-pill" colour. Since: <<.from-version "5.1.16">> we can define a `class` field, that is directly inserted into the [[ViewTemplate|$:/core/ui/ViewTemplate]] and it can be used for styling: 
+
+"""
+title: `anyName`
+tags: `$:/tags/Stylesheet`
+class: `myClass`
+"""
+
+Every tiddler, that has a `class` field can be styled that way!
+
+```
+.myClass {
+  border: 2px solid blue;
+}
+
+```
+
+Learn more at: [[How to apply custom styles]]

editions/tw5.com/tiddlers/howtos/Custom_Attribute_Selectors.tid

@@ -0,0 +1,31 @@
+created: 20170126152839462
+modified: 201804111739
+tags: [[Custom data-styles]]
+title: Attribute Selectors
+type: text/vnd.tiddlywiki
+
+;[attr]
+:Represents an element with an attribute name of attr.
+
+;[attr="value"]
+:Represents an element with an attribute name of attr and whose value is exactly "value".
+
+;[attr~="value"]
+:Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
+
+;[attr|="value"]
+:Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
+
+;[attr^="value"]
+:Represents an element with an attribute name of attr and whose first value is prefixed by "value".
+
+;[attr$="value"]
+:Represents an element with an attribute name of attr and whose last value is suffixed by "value".
+
+;[attr*="value"]
+:Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
+
+;[attr "operator value" i]
+:Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range). 
+
+Learn more at: [[Attribute selectors - CSS|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]] or [[CSS-Specification|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]]

editions/tw5.com/tiddlers/howtos/Custom_Styles_FAQ.tid

@@ -0,0 +1,9 @@
+modified: 201804111739
+created: 201804111739
+title: Custom Styles FAQ
+tags: [[How to apply custom styles]] FAQ-group
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.1.16">>
+
+<<list-links "[tag[Custom Styles FAQ]]">>

editions/tw5.com/tiddlers/howtos/Custom_data-styles.tid

@@ -0,0 +1,35 @@
+created: 201804111739
+modified: 201804111739
+tags: data-tags-styles [[How to apply custom styles]] $:/tags/Stylesheet
+title: Custom data-styles
+type: text/vnd.tiddlywiki
+
+[data-tiddler-title="Custom styles by title"] {
+  border: 1px solid blue;
+}
+
+[data-tags*="example-test"] {
+  border: 2px solid pink;
+}
+
+[data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+[data-tags*="data-tags-styles"] .tc-tiddler-body {
+  display: block;
+  padding: 14px;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  padding: 0 3px 2px;
+  border-radius: 3px;
+  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+

editions/tw5.com/tiddlers/howtos/Custom_styles_by_data-tags.tid

@@ -0,0 +1,60 @@
+created: 20170124132500000
+modified: 201804111739
+tags: example-test [[How to apply custom styles]]
+title: Custom styles by data-tags
+type: text/vnd.tiddlywiki
+
+! Attribute: data-tags
+
+<<.from-version "5.1.16">>
+
+The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. 
+
+For example this tiddler is tagged: <<tag "How to apply custom styles">> and <<tag "example-test">> so the attribute looks like this: 
+
+```
+data-tags="[[How to apply custom styles]] example-test"
+```
+
+''Important:'' Tiddler tags are ''not'' sorted, so the order in the rendered output may be different!
+
+!! Examples
+
+The following CSS is defined in [[Custom data-styles]] and creates a pink border for exactly this tiddler.
+
+```
+[data-tags*="example-test"] {
+  border: 2px solid pink;
+}
+```
+
+!!! Styling Stylesheets
+
+So to display tiddlers tagged: `data-tags-styles` in a decent way we can use the following code. (I could have used: `$:/tags/Stylesheet`, but that would affect all stylesheets in this wiki, which is not intended. amt ;)
+
+''Important:'' Don't forget the `.tc.tiddler.body`, otherwise the whole tiddler, including the title will be changed! see: [[Custom data-styles]]
+
+```
+[data-tags*="data-tags-styles"] .tc-tiddler-body {
+  display: block;
+  padding: 14px;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  padding: 0 3px 2px;
+  border-radius: 3px;
+  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+```
+
+!! Hard Linebreaks
+
+This mechanism may be handy for users, who want to write prose text! see: [[Hard Linebreaks with CSS]]
+
+!! More Possibilities
+
+{{Attribute Selectors}}

editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS.tid

@@ -0,0 +1,26 @@
+created: 20170126174506507
+modified: 20170126211042714
+tags: [[Hard Linebreaks in WikiText]]
+title: Hard Linebreaks with CSS
+type: text/vnd.tiddlywiki
+
+Since TiddlyWiki Version 5.1.16, it's possible to apply customs styles with `data-` attributes. see: [[How to apply custom styles]]
+
+The [[Custom data-styles]] stylesheet tiddler contains the following definition:
+
+```
+[data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
+  word-break: normal; 
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+```
+
+If rendered without the tag, the content of "Hard Linebreaks with CSS - Example" will be shown like this: 
+
+>{{Hard Linebreaks with CSS - Example}}
+
+----
+
+Open the tiddler to see the custom CSS rules applied: [[Hard Linebreaks with CSS - Example]]
+

editions/tw5.com/tiddlers/howtos/Hard_Linebreaks_with_CSS_-_Example.tid

@@ -0,0 +1,14 @@
+created: 20170126161803543
+modified: 20170126211025840
+tags: example-hardlinebreaks [[Hard Linebreaks in WikiText]]
+title: Hard Linebreaks with CSS - Example
+type: text/vnd.tiddlywiki
+
+The following text is rendered without any special WikiText syntax. So most of the ~WikiText functionality will be accessible. 
+
+This is a line
+and this is a new line
+while this is yet another line
+and this is the final one
+apart from this one
+

editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid

@@ -1,9 +1,14 @@
+caption: {{!!title}} - ^^deprecated^^
 created: 20141001132300000
-modified: 20151005074702387
-tags: Learning
+modified: 201804111739
+tags: [[How to apply custom styles]] $:/deprecated
 title: How to apply custom styles by tag
 type: text/vnd.tiddlywiki
 
+<<.deprecated-since "5.1.16 <- click" "Custom styles by data-tags">>. Also see: [[How to apply custom styles]]
+
+----
+
 You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name `tc-tagged-<Tag Name>`.
 
 For example, to make tiddlers tagged "NightReader" appear in a special colour scheme suitable for night-time reading, [[create a stylesheet|Using Stylesheets]] defining the class `tc-tagged-NightReader` like this:

editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid

@@ -0,0 +1,10 @@
+created: 20141001132300000
+list: [[Custom styles by data-tags]] [[Custom styles by title]]
+modified: 201804111740
+tags: [[Customise TiddlyWiki]]
+title: How to apply custom styles
+type: text/vnd.tiddlywiki
+
+At the moment there are several ways to apply custom styles.
+
+<<list-links filter:"[tag[How to apply custom styles]]">>

editions/tw5.com/tiddlers/howtos/Using Stylesheets.tid

@@ -1,46 +1,51 @@
 created: 20140305091244145
-modified: 20150221175658000
+modified: 201804111739
 tags: [[Customise TiddlyWiki]]
 title: Using Stylesheets
 type: text/vnd.tiddlywiki
 
-The first steps to changing the appearance of TiddlyWiki are to choose and apply one of the available themes, or to modify the [[colour palette|ColourPalettes]].
+\define tv-config-toolbar-text() yes
 
-In addition, custom [[CSS stylesheets|http://www.w3schools.com/css]] can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:
+\define openCpTheme()
+<$action-setfield $tiddler="$:/state/tab-1749438307" $value="$:/core/ui/ControlPanel/Appearance"/>
+<$action-setfield $tiddler="$:/state/tab--1963855381" $value="$:/core/ui/ControlPanel/Theme"/>
+<$action-navigate $to="$:/ControlPanel"/>
+\end
+
+! Theme and Colorpalette
+
+The first steps to changing the appearance of ~TiddlyWiki are to choose and apply:
+
+* One of the available themes: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/theme}} </span>
+* Modify the colour palette: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/palette}} </span>
+* Experiment with the <$button actions=<<openCpTheme>> >{{$:/core/images/options-button}} ControlPanel</$button>
+
+! Work with Stylesheets
+
+In addition to the control panel, custom styles can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:
 
 ```
-html body.tc-body {
+body.tc-body {
 	background: red;
 }
 ```
 
+!! Additional Resrouces
+
+* [[Cascading Style Sheets (CSS) at mozilla|https://developer.mozilla.org/en-US/docs/Web/CSS]]
+* [[Cascading Style Sheets (CSS) at w3scools|http://www.w3schools.com/css]]
+
 ! Overriding Theme Settings
 
-Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`.
+Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`. 
 
-!!! Ordering of stylesheets
-
-Ordering of stylesheets is controlled in the main stylesheet $:/core/ui/PageStylesheet by the following list filter:
-
-```
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]"/>
-```
-
-With help of a list-after field in a custom stylesheet, the order of the stylesheets can be rearranged to ease overwriting theme styles.
-
-<<<
-To check the order of all stylesheets in use, enter the following filter in the filter tab of Advanced search:
-
-```
-[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]
-```
-<<<
+<<.tip "''You should always start with the least specific value that works!''<br><br>">>
 
 ! Stylesheet Types
 
-Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that TiddlyWiki doesn't apply any wiki processing to them.
+Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that ~TiddlyWiki doesn't apply any wiki processing to them.
 
-If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full WikiText processing to be performed. Here is an example:
+If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full ~WikiText processing to be performed. Here is an example:
 
 ```
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
@@ -50,7 +55,7 @@ body.tc-body pre {
 }
 ```
 
-The `\rules` pragma at the top of the tiddler restricts the WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted WikiText processing.
+The `\rules` pragma at the top of the tiddler restricts the ~WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted ~WikiText processing.
 
 A stylesheet tiddler is processed such that it is first wikified and then the text portion of the ouput is extracted to apply as the CSS. Any HTML tags you will use in your stylesheet are thus ignored. For example, HTML elements generated by the RevealWidget will not affect the output. As in the following example, you can wrap CSS rules in `<pre>` tags to display them as a codeblock without affecting processing, including handling the inner macro.
 

editions/tw5.com/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid

@@ -0,0 +1,8 @@
+created: 201804111739
+modified: 201804111739
+title: Q: Is there a way to create dynamic stylesheets?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+Yes, see: [[Q: How can I use a custom field to style a tiddler?]]

editions/tw5.com/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid

@@ -0,0 +1,30 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I use a custom field to style a tiddler?
+tags: [[Custom Styles FAQ]]
+
+
+''Consider the following usecase:'' <<.from-version "5.1.16">>
+
+There is a field named: `rank`, which can hold different values eg: `species`.
+
+''Answer:''
+
+The idea is now: We dynamically create the stylesheet. The style-sheet can look like this: 
+
+"""
+title: `myStyles`
+tags: `$:/tags/Stylesheet`
+"""
+
+```
+<$list filter="[rank[species]]"> 
+[data-tiddler-title^="<$view field=title/>"] .tc-tiddler-body {
+    column-count: 2;
+}
+</$list> 
+```
+
+This creates a CSS rule for every tiddler-title, that has a field `rank` and value `species`.
+
+[[Learn more about possible attributes!|Attribute Selectors]]

editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid

@@ -0,0 +1,19 @@
+created: 201804111739
+modified: 201804111739
+title: Q: What if a tiddler has no tags?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+* If a tiddler has no tags, but needs styling use: `data-tiddler-title` as CSS selector
+** There is only one tiddler 
+
+* If a user wants to style system tiddlers in a custom way: use: `[data-tiddler-title^="$:"/]` as a selector
+** using the TW namespace functionality
+
+* If the user wants special behaviour for tagged tiddlers. eg: Learning
+** use: `[data-tags*="Learning"]` as CSS selector. 
+
+The names I'm using are only used for documentation purpose, without changing the existing wiki. I don't want, that the docs has side effects. 
+
+[[Learn more about possible attributes!|Attribute Selectors]]

editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_and_that_tag.tid

@@ -0,0 +1,33 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I style a tiddler if it has "this" AND "that" tag?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+If tiddler has both: `this` AND tag `that` create an orange border.
+
+```
+[data-tags*="bar"][data-tags*="froz"] {
+  border: 2px solid orange;
+}
+```
+
+''If your CSS looks like this: ''
+
+```
+[data-tags~="this"] {
+  border: 2px solid blue;
+}
+
+[data-tags~="that"] {
+  border: 2px solid red;
+}
+```
+
+`this` creates a blue border
+`that` creates a red border
+If you swap positions, you get it the other way around.
+
+
+[[Learn more about possible attributes!|Attribute Selectors]]

editions/tw5.com/tiddlers/howtos/faq/csFAQ_what_this_or_that_tag.tid

@@ -0,0 +1,17 @@
+created: 201804111739
+modified: 201804111739
+title: Q: How can I style a tiddler if it has "this" OR "that" tag?
+tags: [[Custom Styles FAQ]]
+
+''Answer:'' <<.from-version "5.1.16">>
+
+Either tag `this` or tag `that` create a red border.
+
+```
+[data-tags~="this"],
+[data-tags~="that"] {
+  border: 2px solid red;
+}
+```
+
+[[Learn more about possible attributes!|Attribute Selectors]]

editions/tw5.com/tiddlers/system/Deprecated.tid

@@ -0,0 +1,8 @@
+created: 20170126143833588
+modified: 201804111739
+title: $:/deprecated
+type: text/vnd.tiddlywiki
+
+<<<
+In several fields, deprecation is the discouragement of use of some feature, design or practice; typically because it has been superseded or is no longer considered safe – but without completely removing it or prohibiting its use.
+<<< [[wikipedia|https://en.wikipedia.org/wiki/Deprecation]]

editions/tw5.com/tiddlers/system/Deprecated_-_What_does_it_mean.tid

@@ -0,0 +1,16 @@
+created: 20170126142116898
+modified: 201804111739
+title: Deprecated - What does it mean
+type: text/vnd.tiddlywiki
+
+First of all: ''Keep calm!''
+
+{{$:/deprecated}}
+
+For ~TiddlyWiki it means, that you should not use this mechanism for new content anymore! ''AND you should update your existing content''!
+
+Deprecated features have a marker. see: [[Custom styles by tag]]
+
+''Tiddlers tagged `$:/deprecated`''
+
+><<list-links "[tag[$:/deprecated]]">>

editions/tw5.com/tiddlers/system/doc-macros.tid

@@ -1,7 +1,8 @@
 created: 20150117152607000
-modified: 20150228081437000
-title: $:/editions/tw5.com/doc-macros
+modified: 201804111739
 tags: $:/tags/Macro
+title: $:/editions/tw5.com/doc-macros
+type: text/vnd.tiddlywiki
 
 \define .concat(1,2,3,4,5) $1$$2$$3$$4$$5$
 
@@ -108,4 +109,6 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
 	</blockquote>
 </$reveal>
 </$list>
-\end
+\end
+
+<pre><$view field="text"/></pre>

editions/tw5.com/tiddlers/system/doc-styles.tid

@@ -1,7 +1,8 @@
 created: 20150117152612000
-modified: 20150226162159000
-title: $:/editions/tw5.com/doc-styles
+modified: 201804111739
 tags: $:/tags/Stylesheet
+title: $:/editions/tw5.com/doc-styles
+type: text/vnd.tiddlywiki
 
 .doc-def {
 	font-style: normal;
@@ -176,10 +177,23 @@ tr.doc-table-subheading {
     vertical-align: text-bottom;
 }
 
+.doc-deprecated-version {
+    display: inline-block;
+    border-radius: 1em;
+	background: red;
+	color: <<colour background>>;
+	fill: <<colour background>>;
+    padding: 0 0.4em;
+    font-size: 0.7em;
+    text-transform: uppercase;
+    font-weight: bold;
+    line-height: 1.5;
+    vertical-align: text-bottom;
+}
+
+.doc-deprecated-version svg,
 .doc-from-version svg {
 	width: 1em;
 	height: 1em;
     vertical-align: text-bottom;
-}
-
-
+}

editions/tw5.com/tiddlers/system/version-macros.tid

@@ -1,8 +1,15 @@
 created: 20161008085627406
-modified: 20161008085627406
-title: $:/editions/tw5.com/version-macros
+modified: 201804111739
 tags: $:/tags/Macro
+title: $:/editions/tw5.com/version-macros
+type: text/vnd.tiddlywiki
 
 \define .from-version(version)
-<span class="doc-from-version">{{$:/core/images/warning}} New in $version$</span>
+<span class="doc-from-version">{{$:/core/images/warning}} New in: $version$</span>
 \end
+
+\define .deprecated-since(version, superseeded:"TODO-Link")
+<$button to="Deprecated - What does it mean" class="doc-deprecated-version tc-btn-invisible">{{$:/core/images/warning}} Deprecated since: $version$ </$button> use [[$superseeded$]] instead!
+\end
+
+<pre><$view field="text"/></pre>

themes/tiddlywiki/vanilla/base.tid

@@ -474,6 +474,16 @@ html body.tc-body .tc-btn-rounded:hover svg {
 	margin: 0;
 }
 
+/* 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;