mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-15 22:34:51 +00:00
b529e69289
* Allow the rendering of fields to be extended This commit extends the `$:/core/ui/EditTemplate/fields` tiddler to use a new cascade (Field Editor Cascade) to allow customizing the rendering of the field editor. It provides a default element for the cascade that displays the standard EditTextWidget as a fallback. That way, the implementation is completely backwards compatible. The `currentTiddler` and `currentField` variables are available in the transcluded tiddler. This has the additional benefit, that not only the `EditTextWidget` can be used. The user can use a dropdown-list or even something completely crazy. As long as it can be put into a tiddler that updates the field, it will be fine. * Make `select` Tags in Fields look like the rest This patch updates the CSS to make `tc-edit-texteditor` usable on `select`-tags as well. I'm not sure what `-webkit-appearance: none;` is for, but it hides the DropDown-arrow in Chrome and makes the select-tag hard to discover. I've changed the css to only apply it to the input tag. Maybe it can be removed altogether. * Add documentation for the Field Editor Cascade
115 lines
2.6 KiB
Plaintext
115 lines
2.6 KiB
Plaintext
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,
|
|
.tc-tiddler-frame select.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)">>
|
|
}
|