TiddlyWiki5/themes/tiddlywiki/snowwhite/base.tid

title: $:/themes/tiddlywiki/snowwhite/base
tags: [[$:/tags/Stylesheet]]

\define sidebarbreakpoint-minus-one()
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

.tc-sidebar-header {
	text-shadow: 0 1px 0 <<colour sidebar-foreground-shadow>>;
}

.tc-tiddler-info {
	<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>
}

@media screen {
	.tc-tiddler-frame {
		<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
	}
}

@media (max-width: <<sidebarbreakpoint-minus-one>>) {
	.tc-tiddler-frame {
		<<box-shadow none>>
	}
}

.tc-page-controls button svg, .tc-tiddler-controls button svg, .tc-topbar button svg {
	<<transition "fill 150ms ease-in-out">>
}

.tc-tiddler-controls button.tc-selected,
.tc-page-controls button.tc-selected {
	<<filter "drop-shadow(0px -1px 2px rgba(0,0,0,0.25))">>
}

.tc-tiddler-frame input.tc-edit-texteditor {
	<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}

.tc-edit-tags {
	<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}

.tc-tiddler-frame .tc-edit-tags input.tc-edit-texteditor {
	<<box-shadow "none">>
	border: none;
	outline: none;
}

textarea.tc-edit-texteditor {
	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
}

canvas.tc-edit-bitmapeditor  {
	<<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">>
}

.tc-drop-down {
	border-radius: 4px;
	<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
}

.tc-block-dropdown {
	border-radius: 4px;
	<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
}

.tc-modal {
	border-radius: 6px;
	<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
}

.tc-modal-footer {
	border-radius: 0 0 6px 6px;
	<<box-shadow "inset 0 1px 0 #fff">>;
}


.tc-alert {
	border-radius: 6px;
	<<box-shadow "0 3px 7px rgba(0,0,0,0.6)">>
}

.tc-notification {
	border-radius: 6px;
	<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
	text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
}

.tc-sidebar-lists .tc-tab-set .tc-tab-divider {
	border-top: none;
	height: 1px;
	<<background-linear-gradient "left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%">>
}

.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
	<<background-linear-gradient "left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%">>
}

.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
	<<background-linear-gradient "left, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%">>
}

.tc-message-box img {
	<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
}

.tc-plugin-info {
	<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
}
Rename the tiddlers in the Snow White theme, and enable a static banner The tiddlers in the Snow White theme weren't named as part of their plugin. 2013-05-31 16:44:09 +00:00			`title: $:/themes/tiddlywiki/snowwhite/base`
Deprecate `$:/tags/stylesheet` in favour of `$:/tags/Stylesheet` A warning message appears at the top of the story river if any `$:/tags/stylesheet` tags are found. Fixing the first half of #824 2014-09-10 08:13:21 +00:00			`tags: [[$:/tags/Stylesheet]]`
Replacement styles Smaller simpler styles (including CSS reset from https://github.com/necolas/normalize.css/) 2013-02-03 23:02:23 +00:00
Correct breakpoint for no-box-shadow in snowwhite/base stylesheet (#5008) 2020-11-08 22:28:32 +00:00			`\define sidebarbreakpoint-minus-one()`
			`<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>`
			`\end`

Replacement styles Smaller simpler styles (including CSS reset from https://github.com/necolas/normalize.css/) 2013-02-03 23:02:23 +00:00			`\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline`

Rename "sidebar-header" class to "tc-sidebar-header" Part of #764 2014-08-28 16:27:03 +00:00			`.tc-sidebar-header {`
More palette tweaks and polish 2014-02-17 17:30:02 +00:00			`text-shadow: 0 1px 0 <<colour sidebar-foreground-shadow>>;`
Replacement styles Smaller simpler styles (including CSS reset from https://github.com/necolas/normalize.css/) 2013-02-03 23:02:23 +00:00			`}`

Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 17:59:35 +00:00			`.tc-tiddler-info {`
Fix responsive versions of the tiddler info panel 2013-05-20 10:19:41 +00:00			`<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>`
			`}`

Improve print styles Fixing #90 2013-05-02 07:17:36 +00:00			`@media screen {`
Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 17:59:35 +00:00			`.tc-tiddler-frame {`
Adjust tiddler shadows Previously the shadow was to the bottom right. Overlapping tiddlers look better if the shadow seeps out from each of the sides of the tiddler 2015-02-23 10:27:17 +00:00			`<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>`
Improve print styles Fixing #90 2013-05-02 07:17:36 +00:00			`}`
Replacement styles Smaller simpler styles (including CSS reset from https://github.com/necolas/normalize.css/) 2013-02-03 23:02:23 +00:00			`}`

Correct breakpoint for no-box-shadow in snowwhite/base stylesheet (#5008) 2020-11-08 22:28:32 +00:00			`@media (max-width: <<sidebarbreakpoint-minus-one>>) {`
Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 17:59:35 +00:00			`.tc-tiddler-frame {`
adjust media query to remove box-shadow for small screens. fix some @media indentations 2013-11-25 13:58:49 +00:00			`<<box-shadow none>>`
Style tweaks 2013-04-27 17:03:13 +00:00			`}`
Some styling changes The idea of moving the sidebar to the right is so that it can grow into the otherwise empty space to the right of the story column. Still a work in progress: needs to be responsive, amongst other things 2013-04-26 17:02:02 +00:00			`}`

Yet more "tw-" -> "tc-" Part of #764 2014-08-28 18:41:29 +00:00			`.tc-page-controls button svg, .tc-tiddler-controls button svg, .tc-topbar button svg {`
Transitions for the icon hover effects 2013-05-15 21:30:22 +00:00			`<<transition "fill 150ms ease-in-out">>`
Refactor the core icons to be inline SVG fragments This allows us to style the images with CSS, which means we finally get hover effects on our toolbar buttons 2013-05-15 17:45:24 +00:00			`}`

Fix for selected toolbar buttons in Firefox See https://github.com/Jermolene/TiddlyWiki5/issues/1599 2015-03-21 16:33:15 +00:00			`.tc-tiddler-controls button.tc-selected,`
			`.tc-page-controls button.tc-selected {`
Style tweaks for tiddler info panel 2013-10-14 20:01:45 +00:00			`<<filter "drop-shadow(0px -1px 2px rgba(0,0,0,0.25))">>`
Style for selected tiddler info button 2013-10-14 15:56:42 +00:00			`}`

Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 17:59:35 +00:00			`.tc-tiddler-frame input.tc-edit-texteditor {`
Comments and rearrangements for the base stylesheet Preparatory to picking it apart into separate files 2013-04-27 14:44:56 +00:00			`<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>`
			`}`

Convert more "tw-" classes to "tc-" 2014-08-28 17:47:21 +00:00			`.tc-edit-tags {`
Tweak appearance of tags editor Making it a bit more like http://aehlke.github.io/tag-it/ 2013-11-30 10:55:45 +00:00			`<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>`
			`}`

Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 17:59:35 +00:00			`.tc-tiddler-frame .tc-edit-tags input.tc-edit-texteditor {`
Tweak appearance of tags editor Making it a bit more like http://aehlke.github.io/tag-it/ 2013-11-30 10:55:45 +00:00			`<<box-shadow "none">>`
			`border: none;`
			`outline: none;`
			`}`

Make editor font configurable, so user can easily change it to eg monospace font (#2867) 2017-06-29 15:55:49 +00:00			`textarea.tc-edit-texteditor {`
			`font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};`
			`}`

Convert more "tw-" classes to "tc-" 2014-08-28 17:47:21 +00:00			`canvas.tc-edit-bitmapeditor {`
Bring back the bitmap editor widget 2013-10-26 12:13:55 +00:00			`<<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">>`
Style tweaks for the edit template 2013-11-18 09:00:00 +00:00			`}`

Revert "Add provisional version of new tagger manager" 2016-11-28 10:40:55 +00:00			`.tc-drop-down {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 4px;`
Style and layout tweaks 2013-02-04 20:47:21 +00:00			`<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>`
Style tweaks for the edit template 2013-11-18 09:00:00 +00:00			`}`

Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 18:08:31 +00:00			`.tc-block-dropdown {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 4px;`
Style tweaks for the edit template 2013-11-18 09:00:00 +00:00			`<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>`
Add modal dialogue styles 2013-02-10 18:44:23 +00:00			`}`

Rename "modal-" classes to "tc-modal-" Part of #764 2014-08-28 16:34:02 +00:00			`.tc-modal {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 6px;`
Add modal dialogue styles 2013-02-10 18:44:23 +00:00			`<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>`
			`}`

Rename "modal-" classes to "tc-modal-" Part of #764 2014-08-28 16:34:02 +00:00			`.tc-modal-footer {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 0 0 6px 6px;`
Add modal dialogue styles 2013-02-10 18:44:23 +00:00			`<<box-shadow "inset 0 1px 0 #fff">>;`
			`}`

Add a demo of alerts and tweak styles 2014-02-15 17:36:49 +00:00
Rename more "tw-" classes to "tc-" Part of #764 2014-08-28 18:08:31 +00:00			`.tc-alert {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 6px;`
Add a demo of alerts and tweak styles 2014-02-15 17:36:49 +00:00			`<<box-shadow "0 3px 7px rgba(0,0,0,0.6)">>`
			`}`

Change more "tw-" classes to "tc-" Part of #764 2014-08-28 17:21:08 +00:00			`.tc-notification {`
Stop using obsoleted "-moz-border-radius" and "-webkit-border-radius" properties Fixes #480 2014-03-18 23:38:52 +00:00			`border-radius: 6px;`
Add simple notification mechanism 2013-05-07 17:08:44 +00:00			`<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>`
			`text-shadow: 0 1px 0 rgba(255,255,255, 0.8);`
			`}`

Re-establish gradient for sidebar tab divider 2015-10-07 19:45:14 +00:00			`.tc-sidebar-lists .tc-tab-set .tc-tab-divider {`
			`border-top: none;`
			`height: 1px;`
Tweak the sidebar tabs gradient 2015-10-08 14:10:54 +00:00			`<<background-linear-gradient "left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%">>`
Further style tweaks 2013-04-27 10:43:11 +00:00			`}`

Refactor user interface for plugin tiddlers * Refactored control panel “Plugins” tab to make the elements more reusable * Refactored the display of plugin tiddlers to use the same format as the control panel (as suggested, I think by @danielo515), adding the shadow tiddler listing as an overridable extension tab * Added a new tab in the “More” sidebar providing quick access to all installed plugins 2016-10-18 08:23:19 +00:00			`.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {`
Switch to transparent colours for "more" sidebar tabs Although falling short of the proposal in #1976, this change makes the sidebar tabs work much better with different colour page backgrounds and background images. 2015-10-05 08:53:15 +00:00			`<<background-linear-gradient "left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%">>`
Styling improvements 2013-04-27 10:28:46 +00:00			`}`

Refactor user interface for plugin tiddlers * Refactored control panel “Plugins” tab to make the elements more reusable * Refactored the display of plugin tiddlers to use the same format as the control panel (as suggested, I think by @danielo515), adding the shadow tiddler listing as an overridable extension tab * Added a new tab in the “More” sidebar providing quick access to all installed plugins 2016-10-18 08:23:19 +00:00			`.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {`
Switch to transparent colours for "more" sidebar tabs Although falling short of the proposal in #1976, this change makes the sidebar tabs work much better with different colour page backgrounds and background images. 2015-10-05 08:53:15 +00:00			`<<background-linear-gradient "left, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%">>`
Spruce up the control panel Structure things with extensible tabs. 2013-11-10 21:40:03 +00:00			`}`
Better styles for the message box 2013-11-28 07:41:28 +00:00
More conversion of "tw-" classes to "tc-" Part of #764 2014-08-28 18:13:21 +00:00			`.tc-message-box img {`
Better styles for the message box 2013-11-28 07:41:28 +00:00			`<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>`
			`}`
Improved formatting for control panel plugins 2014-08-08 15:35:17 +00:00
More conversion of "tw-" classes to "tc-" Part of #764 2014-08-28 18:13:21 +00:00			`.tc-plugin-info {`
Lots of improvements to the plugin library * Moved “add new plugin” into a modal wizard * Adopt big friendly buttons * Add plugin icons and readmes to “add new plugin” modal * Use tabs for splitting plugins/themes/languages * Consistent styling between the “add new plugin” modal and the “installed plugins” control panel tab * Behind the scenes, moved from addressing the library as `recipes/defaults/tiddlers/<etc>` to `recipes/library/tiddlers<etc>` 2015-03-18 11:46:28 +00:00			`<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>`
Improved formatting for control panel plugins 2014-08-08 15:35:17 +00:00			`}`