Add more classes to ControlPanel-Settings elements, so they can be styled using relatively simple CSS rules (#8000)

core/ui/ControlPanel/Saving/DownloadSaver.tid

@@ -2,10 +2,19 @@ title: $:/core/ui/ControlPanel/Saving/DownloadSaver
 tags: $:/tags/ControlPanel/Saving
 caption: {{$:/language/ControlPanel/Saving/DownloadSaver/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Saving/DownloadSaver/
 
+<div class="tc-control-panel-saving" data-setting-title=<<currentTab>>>
+
 <<lingo Hint>>
 
-!! <$link to="$:/config/DownloadSaver/AutoSave"><<lingo AutoSave/Hint>></$link>
+!!.tc-control-panel-accent <$link to="$:/config/DownloadSaver/AutoSave"><<lingo AutoSave/Hint>></$link>
 
-<$checkbox tiddler="$:/config/DownloadSaver/AutoSave" field="text" checked="yes" unchecked="no" default="no"> <<lingo AutoSave/Description>> </$checkbox>
+<$checkbox tiddler="$:/config/DownloadSaver/AutoSave"
+	field="text" checked="yes" unchecked="no" default="no"
+	class="tc-control-panel-item"
+>
+	<span class="tc-tiny-gap-left"><<lingo AutoSave/Description>></span>
+</$checkbox>
+</div>

core/ui/ControlPanel/Saving/General.tid

@@ -3,14 +3,22 @@ tags: $:/tags/ControlPanel/Saving
 caption: {{$:/language/ControlPanel/Saving/General/Caption}}
 list-before:
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/
 
+<div class="tc-control-panel-saving" data-setting-title=<<currentTab>>>
+
 {{$:/language/ControlPanel/Saving/General/Hint}}
 
-!! <$link to="$:/config/AutoSave"><<lingo AutoSave/Caption>></$link>
+!!.tc-control-panel-accent <$link to="$:/config/AutoSave"><<lingo AutoSave/Caption>></$link>
 
 <<lingo AutoSave/Hint>>
 
-<$radio tiddler="$:/config/AutoSave" value="yes"> <<lingo AutoSave/Enabled/Description>> </$radio>
+<$radio tiddler="$:/config/AutoSave" value="yes">
+	<span class="tc-tiny-gap-left"><<lingo AutoSave/Enabled/Description>></span>
+</$radio>
 
-<$radio tiddler="$:/config/AutoSave" value="no"> <<lingo AutoSave/Disabled/Description>> </$radio>
+<$radio tiddler="$:/config/AutoSave" value="no">
+	<span class="tc-tiny-gap-left"><<lingo AutoSave/Disabled/Description>></span>
+</$radio>
+</div>

core/ui/ControlPanel/Settings/CamelCase.tid

@@ -2,7 +2,16 @@ title: $:/core/ui/ControlPanel/Settings/CamelCase
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/CamelCase/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/CamelCase/
+
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/WikiParserRules/Inline/wikilink" field="text" checked="enable" unchecked="disable" default="enable"> <$link to="$:/config/WikiParserRules/Inline/wikilink"><<lingo Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/WikiParserRules/Inline/wikilink"
+	field="text" checked="enable" unchecked="disable" default="enable"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/WikiParserRules/Inline/wikilink" class="tc-tiny-gap-left">
+		<<lingo Description>>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/Settings/DefaultMoreSidebarTab.tid

@@ -2,13 +2,18 @@ caption: {{$:/language/ControlPanel/Settings/DefaultMoreSidebarTab/Caption}}
 tags: $:/tags/ControlPanel/Settings
 title: $:/core/ui/ControlPanel/Settings/DefaultMoreSidebarTab
 
-\define lingo-base() $:/language/ControlPanel/Settings/DefaultMoreSidebarTab/
 \whitespace trim
+\define lingo-base() $:/language/ControlPanel/Settings/DefaultMoreSidebarTab/
 
-<$link to="$:/config/DefaultMoreSidebarTab"><<lingo Hint>></$link>
+<$link to="$:/config/DefaultMoreSidebarTab" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$select tiddler="$:/config/DefaultMoreSidebarTab">
+<$select tiddler="$:/config/DefaultMoreSidebarTab" class="tc-select">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]">
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]">
-<option value=<<currentTiddler>>><$transclude field="caption"><$text text=<<currentTiddler>>/></$transclude></option>
+		<option value=<<currentTiddler>>><$transclude field="caption">
-</$list>
+			<$text text=<<currentTiddler>>/>
+			</$transclude>
+		</option>
+	</$list>
 </$select>

core/ui/ControlPanel/Settings/DefaultSidebarTab.tid

@@ -5,10 +5,16 @@ title: $:/core/ui/ControlPanel/Settings/DefaultSidebarTab
 \define lingo-base() $:/language/ControlPanel/Settings/DefaultSidebarTab/
 \whitespace trim
 
-<$link to="$:/config/DefaultSidebarTab"><<lingo Hint>></$link>
+<$link to="$:/config/DefaultSidebarTab" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$select tiddler="$:/config/DefaultSidebarTab">
+<$select tiddler="$:/config/DefaultSidebarTab" class="tc-select">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]">
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]">
-<option value=<<currentTiddler>>><$transclude field="caption"><$text text=<<currentTiddler>>/></$transclude></option>
+		<option value=<<currentTiddler>>>
-</$list>
+			<$transclude field="caption">
+				<$text text=<<currentTiddler>>/>
+			</$transclude>
+		</option>
+	</$list>
 </$select>

core/ui/ControlPanel/Settings/EditorToolbar.tid

@@ -2,8 +2,15 @@ title: $:/core/ui/ControlPanel/Settings/EditorToolbar
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/EditorToolbar/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/EditorToolbar/
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/TextEditor/EnableToolbar" field="text" checked="yes" unchecked="no" default="yes"> <$link to="$:/config/TextEditor/EnableToolbar"><<lingo Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/TextEditor/EnableToolbar"
-
+	field="text" checked="yes" unchecked="no" default="yes"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/TextEditor/EnableToolbar" class="tc-tiny-gap-left">
+		<<lingo Description>>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/Settings/InfoPanelMode.tid

@@ -2,9 +2,17 @@ title: $:/core/ui/ControlPanel/Settings/InfoPanelMode
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/InfoPanelMode/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/InfoPanelMode/
-<$link to="$:/config/TiddlerInfo/Mode"><<lingo Hint>></$link>
 
-<$radio tiddler="$:/config/TiddlerInfo/Mode" value="popup"> <<lingo Popup/Description>> </$radio>
+<$link to="$:/config/TiddlerInfo/Mode" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$radio tiddler="$:/config/TiddlerInfo/Mode" value="sticky"> <<lingo Sticky/Description>> </$radio>
+<$radio tiddler="$:/config/TiddlerInfo/Mode" value="popup">
+	<span class="tc-tiny-gap-left"><<lingo Popup/Description>></span>
+</$radio>
+
+<$radio tiddler="$:/config/TiddlerInfo/Mode" value="sticky">
+	<span class="tc-tiny-gap-left"><<lingo Sticky/Description>></span>
+</$radio>

core/ui/ControlPanel/Settings/LinkToBehaviour.tid

@@ -2,21 +2,25 @@ title: $:/core/ui/ControlPanel/Settings/LinkToBehaviour
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/LinkToBehaviour/Caption}}
 
-\define lingo-base() $:/language/ControlPanel/Settings/LinkToBehaviour/
 \whitespace trim
+\define lingo-base() $:/language/ControlPanel/Settings/LinkToBehaviour/
 
-<$link to="$:/config/Navigation/openLinkFromInsideRiver"><<lingo "InsideRiver/Hint">></$link>
+<$link to="$:/config/Navigation/openLinkFromInsideRiver" class="tc-control-panel-item">
+	<<lingo "InsideRiver/Hint">>
+</$link>
 
-<$select tiddler="$:/config/Navigation/openLinkFromInsideRiver">
+<$select tiddler="$:/config/Navigation/openLinkFromInsideRiver" class="tc-select">
-  <option value="above"><<lingo "OpenAbove">></option>
+	<option value="above"><<lingo "OpenAbove">></option>
-  <option value="below"><<lingo "OpenBelow">></option>
+	<option value="below"><<lingo "OpenBelow">></option>
-  <option value="top"><<lingo "OpenAtTop">></option>
+	<option value="top"><<lingo "OpenAtTop">></option>
-  <option value="bottom"><<lingo "OpenAtBottom">></option>
+	<option value="bottom"><<lingo "OpenAtBottom">></option>
 </$select>
 
-<$link to="$:/config/Navigation/openLinkFromOutsideRiver"><<lingo "OutsideRiver/Hint">></$link>
+<$link to="$:/config/Navigation/openLinkFromOutsideRiver" class="tc-control-panel-item">
+	<<lingo "OutsideRiver/Hint">>
+</$link>
 
-<$select tiddler="$:/config/Navigation/openLinkFromOutsideRiver">
+<$select tiddler="$:/config/Navigation/openLinkFromOutsideRiver" class="tc-select">
-  <option value="top"><<lingo "OpenAtTop">></option>
+	<option value="top"><<lingo "OpenAtTop">></option>
-  <option value="bottom"><<lingo "OpenAtBottom">></option>
+	<option value="bottom"><<lingo "OpenAtBottom">></option>
 </$select>

core/ui/ControlPanel/Settings/MissingLinks.tid

@@ -2,8 +2,12 @@ title: $:/core/ui/ControlPanel/Settings/MissingLinks
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/MissingLinks/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/MissingLinks/
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/MissingLinks" field="text" checked="yes" unchecked="no" default="yes"> <$link to="$:/config/MissingLinks"><<lingo Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/MissingLinks" field="text" checked="yes" unchecked="no" default="yes">
-
+	<$link to="$:/config/MissingLinks" class="tc-control-panel-item">
+		<span class="tc-tiny-gap-left"><<lingo Description>></span>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/Settings/NavigationAddressBar.tid

@@ -2,12 +2,21 @@ title: $:/core/ui/ControlPanel/Settings/NavigationAddressBar
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/NavigationAddressBar/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/NavigationAddressBar/
 
-<$link to="$:/config/Navigation/UpdateAddressBar"><<lingo Hint>></$link>
+<$link to="$:/config/Navigation/UpdateAddressBar" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="permaview"> <<lingo Permaview/Description>> </$radio>
+<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="permaview">
+	<span class="tc-tiny-gap-left"><<lingo Permaview/Description>></span>
+</$radio>
 
-<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="permalink"> <<lingo Permalink/Description>> </$radio>
+<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="permalink">
+	<span class="tc-tiny-gap-left"><<lingo Permalink/Description>></span>
+</$radio>
 
-<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="no"> <<lingo No/Description>> </$radio>
+<$radio tiddler="$:/config/Navigation/UpdateAddressBar" value="no">
+	<span class="tc-tiny-gap-left"><<lingo No/Description>></span>
+</$radio>

core/ui/ControlPanel/Settings/NavigationHistory.tid

@@ -2,9 +2,17 @@ title: $:/core/ui/ControlPanel/Settings/NavigationHistory
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/NavigationHistory/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/NavigationHistory/
-<$link to="$:/config/Navigation/UpdateHistory"><<lingo Hint>></$link>
 
-<$radio tiddler="$:/config/Navigation/UpdateHistory" value="yes"> <<lingo Yes/Description>> </$radio>
+<$link to="$:/config/Navigation/UpdateHistory" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$radio tiddler="$:/config/Navigation/UpdateHistory" value="no"> <<lingo No/Description>> </$radio>
+<$radio tiddler="$:/config/Navigation/UpdateHistory" value="yes">
+	<span class="tc-tiny-gap-left"><<lingo Yes/Description>></span>
+</$radio>
+
+<$radio tiddler="$:/config/Navigation/UpdateHistory" value="no">
+	<span class="tc-tiny-gap-left"><<lingo No/Description>></span>
+</$radio>

core/ui/ControlPanel/Settings/NavigationPermalinkviewMode.tid

@@ -2,9 +2,24 @@ title: $:/core/ui/ControlPanel/Settings/NavigationPermalinkviewMode
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/NavigationPermalinkviewMode/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/NavigationPermalinkviewMode/
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/Navigation/Permalinkview/CopyToClipboard" field="text" checked="yes" unchecked="no" default="yes"> <$link to="$:/config/Navigation/Permalinkview/CopyToClipboard"><<lingo CopyToClipboard/Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/Navigation/Permalinkview/CopyToClipboard"
+	field="text" checked="yes" unchecked="no" default="yes"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/Navigation/Permalinkview/CopyToClipboard" class="tc-tiny-gap-left">
+		<<lingo CopyToClipboard/Description>>
+	</$link>
+</$checkbox>
 
-<$checkbox tiddler="$:/config/Navigation/Permalinkview/UpdateAddressBar" field="text" checked="yes" unchecked="no" default="yes"> <$link to="$:/config/Navigation/Permalinkview/UpdateAddressBar"><<lingo UpdateAddressBar/Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/Navigation/Permalinkview/UpdateAddressBar"
+	field="text" checked="yes" unchecked="no" default="yes"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/Navigation/Permalinkview/UpdateAddressBar" class="tc-tiny-gap-left">
+		<<lingo UpdateAddressBar/Description>>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/Settings/PerformanceInstrumentation.tid

@@ -2,7 +2,15 @@ title: $:/core/ui/ControlPanel/Settings/PerformanceInstrumentation
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/PerformanceInstrumentation/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/PerformanceInstrumentation/
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/Performance/Instrumentation" field="text" checked="yes" unchecked="no" default="no"> <$link to="$:/config/Performance/Instrumentation"><<lingo Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/Performance/Instrumentation"
+	field="text" checked="yes" unchecked="no" default="no"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/Performance/Instrumentation" class="tc-tiny-gap-left">
+		<<lingo Description>>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/Settings/TitleLinks.tid

@@ -2,9 +2,17 @@ title: $:/core/ui/ControlPanel/Settings/TitleLinks
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/TitleLinks/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/TitleLinks/
-<$link to="$:/config/Tiddlers/TitleLinks"><<lingo Hint>></$link>
 
-<$radio tiddler="$:/config/Tiddlers/TitleLinks" value="yes"> <<lingo Yes/Description>> </$radio>
+<$link to="$:/config/Tiddlers/TitleLinks" class="tc-control-panel-item">
+	<<lingo Hint>>
+</$link>
 
-<$radio tiddler="$:/config/Tiddlers/TitleLinks" value="no"> <<lingo No/Description>> </$radio>
+<$radio tiddler="$:/config/Tiddlers/TitleLinks" value="yes">
+	<span class="tc-tiny-gap-left"><<lingo Yes/Description>></span>
+</$radio>
+
+<$radio tiddler="$:/config/Tiddlers/TitleLinks" value="no">
+	<span class="tc-tiny-gap-left"><<lingo No/Description>></span>
+</$radio>

core/ui/ControlPanel/Settings/ToolbarButtonStyle.tid

@@ -2,12 +2,15 @@ title: $:/core/ui/ControlPanel/Settings/ToolbarButtonStyle
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/ToolbarButtonStyle/Caption}}
 
-\define lingo-base() $:/language/ControlPanel/Settings/ToolbarButtonStyle/
 \whitespace trim
-<$link to="$:/config/Toolbar/ButtonClass"><<lingo "Hint">></$link>
+\define lingo-base() $:/language/ControlPanel/Settings/ToolbarButtonStyle/
 
-<$select tiddler="$:/config/Toolbar/ButtonClass">
+<$link to="$:/config/Toolbar/ButtonClass" class="tc-control-panel-item">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/ToolbarButtonStyle]]">
+	<<lingo "Hint">>
-<option value={{!!text}}>{{!!caption}}</option>
+</$link>
-</$list>
+
+<$select tiddler="$:/config/Toolbar/ButtonClass" class="tc-select">
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/ToolbarButtonStyle]]">
+		<option value={{!!text}}>{{!!caption}}</option>
+	</$list>
 </$select>

core/ui/ControlPanel/Settings/ToolbarButtons.tid

@@ -2,9 +2,24 @@ title: $:/core/ui/ControlPanel/Settings/ToolbarButtons
 tags: $:/tags/ControlPanel/Settings
 caption: {{$:/language/ControlPanel/Settings/ToolbarButtons/Caption}}
 
+\whitespace trim
 \define lingo-base() $:/language/ControlPanel/Settings/ToolbarButtons/
 <<lingo Hint>>
 
-<$checkbox tiddler="$:/config/Toolbar/Icons" field="text" checked="yes" unchecked="no" default="yes"> <$link to="$:/config/Toolbar/Icons"><<lingo Icons/Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/Toolbar/Icons"
+	field="text" checked="yes" unchecked="no" default="yes"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/Toolbar/Icons" class="tc-tiny-gap-left">
+		<<lingo Icons/Description>>
+	</$link>
+</$checkbox>
 
-<$checkbox tiddler="$:/config/Toolbar/Text" field="text" checked="yes" unchecked="no" default="no"> <$link to="$:/config/Toolbar/Text"><<lingo Text/Description>></$link> </$checkbox>
+<$checkbox tiddler="$:/config/Toolbar/Text"
+	field="text" checked="yes" unchecked="no" default="no"
+	class="tc-control-panel-item"
+>
+	<$link to="$:/config/Toolbar/Text" class="tc-tiny-gap-left">
+		<<lingo Text/Description>>
+	</$link>
+</$checkbox>

core/ui/ControlPanel/TiddlyWiki.tid

@@ -9,9 +9,9 @@ list-before:
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Settings]]">
 
-<div style="border-top:1px solid #eee;">
+<div class="tc-control-panel-setting" data-setting-title=<<currentTiddler>> style="border-top:1px solid #eee;">
 
-!! <$link><$transclude field="caption"/></$link>
+!!.tc-control-panel-accent <$link><$transclude field="caption"/></$link>
 
 <$transclude/>