mirror of
https://github.com/TiddlyWiki/TiddlyWiki5.git
synced 2026-02-01 23:47:35 +00:00
Bidirectional improvements for core classes (#9148)
* Bidirectional improvements for core classes * Fix Control Panel table text direction * Switch to logical properties * Add -webkit-margin-* properties * Improve backward compatibility * Use supports CSS at-rule for fallback * Tiddler controls, alert, TOC update. * tc-tree & testcase update * .tc-sidebar-scrollable use new syntax * Snow white use standard value * Update divider * Avoid negative logic * Remove :dir rules at the moment * Use property procedures * Add change note * Update blockquote * Update unfold banner * Update tiddlerinfo close button * Group supports rule * Update tiddler title icon * Fix wrong float and margin
This commit is contained in:
XLBilly
@@ -2,7 +2,7 @@ title: $:/core/ui/TiddlerInfo
|
||||
|
||||
\whitespace trim
|
||||
<div style="position:relative;">
|
||||
<div class="tc-tiddler-controls" style="position:absolute;right:0;">
|
||||
<div class="tc-tiddler-controls tc-tiddler-info-controls">
|
||||
<$reveal state="$:/config/TiddlerInfo/Mode" type="match" text="sticky">
|
||||
<$button set=<<tiddlerInfoState>> setTo="" tooltip={{$:/language/Buttons/Info/Hint}} aria-label={{$:/language/Buttons/Info/Caption}} class="tc-btn-invisible">
|
||||
{{$:/core/images/close-button}}
|
||||
|
||||
39
core/wiki/macros/CSS-property.tid
Normal file
39
core/wiki/macros/CSS-property.tid
Normal file
@@ -0,0 +1,39 @@
|
||||
title: $:/core/macros/CSS/property
|
||||
|
||||
<!-- CSS property macros -->
|
||||
|
||||
<!-- TODO: Deprecate the following CSS macros once 2020 baseline is supported -->
|
||||
|
||||
\procedure margin-start(size)
|
||||
-webkit-margin-start: <<size>>;
|
||||
margin-inline-start: <<size>>;
|
||||
\end
|
||||
|
||||
\procedure margin-end(size)
|
||||
-webkit-margin-end: <<size>>;
|
||||
margin-inline-end: <<size>>;
|
||||
\end
|
||||
|
||||
\procedure padding-start(size)
|
||||
-webkit-padding-start: <<size>>;
|
||||
padding-inline-start: <<size>>;
|
||||
\end
|
||||
|
||||
\procedure padding-end(size)
|
||||
-webkit-padding-end: <<size>>;
|
||||
padding-inline-end: <<size>>;
|
||||
\end
|
||||
|
||||
\procedure margin-inline(start,end)
|
||||
-webkit-margin-start: <<start>>;
|
||||
margin-inline-start: <<start>>;
|
||||
-webkit-margin-end: <<end>>;
|
||||
margin-inline-end: <<end>>;
|
||||
\end
|
||||
|
||||
\procedure padding-inline(start,end)
|
||||
-webkit-padding-start: <<start>>;
|
||||
padding-inline-start: <<start>>;
|
||||
-webkit-padding-end: <<end>>;
|
||||
padding-inline-end: <<end>>;
|
||||
\end
|
||||
10
editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid
Normal file
10
editions/tw5.com/tiddlers/releasenotes/5.4.0/#9148.tid
Normal file
@@ -0,0 +1,10 @@
|
||||
title: $:/changenotes/5.4.0/#9148
|
||||
description: Bidirectional improvements for core classes
|
||||
release: 5.4.0
|
||||
tags: $:/tags/ChangeNote
|
||||
change-type: enhancement
|
||||
change-category: theme
|
||||
github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9148
|
||||
github-contributors: Leilei332
|
||||
|
||||
Make some core classes display properly when Tiddlywiki's language uses bidrectional scripts.
|
||||
@@ -97,6 +97,12 @@ canvas.tc-edit-bitmapeditor {
|
||||
background-image: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
|
||||
}
|
||||
|
||||
/* HACK: :dir should be used here. html[dir="rtl"] rules are used to support browsers released before 2023 */
|
||||
|
||||
html[dir="rtl"] .tc-sidebar-lists .tc-tab-set .tc-tab-divider {
|
||||
background-image: linear-gradient(to 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-image: linear-gradient(to right, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%);
|
||||
}
|
||||
@@ -105,6 +111,14 @@ canvas.tc-edit-bitmapeditor {
|
||||
background-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
|
||||
background-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.01) 100%);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
|
||||
background-image: linear-gradient(to right, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%)
|
||||
}
|
||||
|
||||
.tc-message-box img {
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
@@ -63,6 +63,7 @@ $else$
|
||||
</$set>
|
||||
\end
|
||||
|
||||
\import [[$:/core/macros/CSS/property]]
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
||||
|
||||
/*
|
||||
@@ -175,9 +176,9 @@ code {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid <<colour blockquote-bar>>;
|
||||
margin-left: 25px;
|
||||
padding-left: 10px;
|
||||
border-inline-start: 5px solid <<colour blockquote-bar>>;
|
||||
<<margin-start 25px>>
|
||||
<<padding-start 10px>>
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
}
|
||||
|
||||
@@ -190,9 +191,8 @@ blockquote.tc-big-quote {
|
||||
font-family: Georgia, serif;
|
||||
position: relative;
|
||||
background: <<colour pre-background>>;
|
||||
border-left: none;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
border-inline-start: none;
|
||||
<<margin-inline 50px>>
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -262,7 +262,9 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
}
|
||||
|
||||
svg.tc-image-button {
|
||||
padding: 0px 1px 1px 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 1px;
|
||||
<<padding-inline 0px 1px>>
|
||||
}
|
||||
|
||||
.tc-icon-wrapper > svg {
|
||||
@@ -659,7 +661,7 @@ html body.tc-body .tc-btn-rounded svg {
|
||||
|
||||
|
||||
.tc-btn-text {
|
||||
margin-left: 7px;
|
||||
<<margin-start 7px>>
|
||||
}
|
||||
|
||||
/* used for documentation "fake" buttons */
|
||||
@@ -729,7 +731,7 @@ button svg.tc-image-button, button .tc-image-button img {
|
||||
border: none;
|
||||
width: 100%;
|
||||
width: calc(100% + 2px);
|
||||
margin-left: -43px;
|
||||
<<margin-start -43px>>
|
||||
text-align: center;
|
||||
border-top: 2px solid <<colour tiddler-info-background>>;
|
||||
margin-top: 4px;
|
||||
@@ -757,7 +759,7 @@ button svg.tc-image-button, button .tc-image-button img {
|
||||
border: none;
|
||||
width: 23px;
|
||||
text-align: center;
|
||||
margin-left: -35px;
|
||||
<<margin-start -35px>>
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
}
|
||||
@@ -775,7 +777,7 @@ button svg.tc-image-button, button .tc-image-button img {
|
||||
|
||||
.tc-fold-banner {
|
||||
width: 16px;
|
||||
margin-left: -16px;
|
||||
<<margin-start -16px>>
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
@@ -1024,9 +1026,9 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
.tc-sidebar-scrollable {
|
||||
position: fixed;
|
||||
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
||||
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
||||
inset-inline-start: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@@ -1034,9 +1036,16 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
padding: 71px 0 28px 42px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-sidebar-scrollable {
|
||||
left: auto;
|
||||
right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
||||
@supports not (inset-inline-start: 0) {
|
||||
.tc-sidebar-scrollable {
|
||||
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
||||
right: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-sidebar-scrollable {
|
||||
left: auto;
|
||||
right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
|
||||
}
|
||||
}
|
||||
|
||||
.tc-story-river {
|
||||
@@ -1123,6 +1132,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
|
||||
}
|
||||
|
||||
.tc-tiddler-info-controls {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.tc-view-field-table {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1185,7 +1199,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
|
||||
.tc-tiddler-title-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .1em;
|
||||
<<margin-end ".1em">>
|
||||
}
|
||||
|
||||
.tc-tiddler-title-icon svg {
|
||||
@@ -1236,7 +1250,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
}
|
||||
|
||||
.tc-tiddler-frame .tc-tiddler-controls {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
padding: 3px; /* make space for outline */
|
||||
}
|
||||
|
||||
@@ -1777,7 +1791,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
*/
|
||||
|
||||
.tc-viewswitcher .tc-image-button {
|
||||
margin-right: .3em;
|
||||
<<margin-end ".3em">>
|
||||
}
|
||||
|
||||
.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
|
||||
@@ -1860,7 +1874,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
display: block;
|
||||
padding: 0 14px 0 14px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
color: <<colour foreground>>;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -2164,7 +2178,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
display: block;
|
||||
padding-top: 14px;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
margin-bottom: inherit;
|
||||
margin-right: -1px;
|
||||
max-width: 33%;
|
||||
@@ -2202,20 +2216,20 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
background-color: <<colour tab-background>>;
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
border-inline-start: 1px solid <<colour tab-border>>;
|
||||
border-bottom: 1px solid <<colour tab-border>>;
|
||||
border-right: none;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-inline-end: none;
|
||||
border-start-start-radius: 2px;
|
||||
border-end-start-radius: 2px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
.tc-tab-buttons.tc-vertical button.tc-tab-selected {
|
||||
background-color: <<colour tab-background-selected>>;
|
||||
border-right: 1px solid <<colour tab-background-selected>>;
|
||||
border-inline-end: 1px solid <<colour tab-background-selected>>;
|
||||
}
|
||||
|
||||
.tc-tab-divider {
|
||||
@@ -2234,8 +2248,8 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-top: 0;
|
||||
padding-left: 14px;
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
<<padding-start 14px>>
|
||||
border-inline-start: 1px solid <<colour tab-border>>;
|
||||
-webkit-flex: 1 0 70%;
|
||||
flex: 1 0 70%;
|
||||
overflow: auto;
|
||||
@@ -2455,7 +2469,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
.tc-alert-toolbar {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
inset-inline-end: 7px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@@ -2539,6 +2553,10 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tc-control-panel table > tbody > tr > td {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -2828,7 +2846,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
|
||||
.tc-chooser-item {
|
||||
border-bottom: 1px solid <<colour table-header-background>>;
|
||||
border-top: 1px solid <<colour table-header-background>>;
|
||||
padding: 2px 4px 2px 14px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
<<padding-inline 14px 4px>>
|
||||
}
|
||||
|
||||
.tc-drop-down .tc-chooser-item {
|
||||
@@ -2861,7 +2881,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
|
||||
}
|
||||
|
||||
.tc-chosen > .tc-tiddlylink:before {
|
||||
margin-left: -10px;
|
||||
<<margin-start "-10px">>
|
||||
position: relative;
|
||||
content: "» ";
|
||||
}
|
||||
@@ -2926,11 +2946,11 @@ input.tc-palette-manager-colour-input {
|
||||
|
||||
.tc-table-of-contents ol {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
<<padding-start 0>>
|
||||
}
|
||||
|
||||
.tc-table-of-contents ol ol {
|
||||
padding-left: 1em;
|
||||
<<padding-start 1em>>
|
||||
}
|
||||
|
||||
.tc-table-of-contents li {
|
||||
@@ -2971,7 +2991,7 @@ input.tc-palette-manager-colour-input {
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents {
|
||||
z-index: 100;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
<<padding-start 1em>>
|
||||
max-width: 50%;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
@@ -3219,17 +3239,17 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
|
||||
*/
|
||||
|
||||
.tc-tree div {
|
||||
padding-left: 14px;
|
||||
<<padding-start: "14px">>
|
||||
}
|
||||
|
||||
.tc-tree ol {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
<<padding-start: 0>>
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tc-tree ol ol {
|
||||
padding-left: 1em;
|
||||
<<padding-start: 1em>>
|
||||
}
|
||||
|
||||
.tc-tree button {
|
||||
@@ -3359,7 +3379,7 @@ span.tc-translink > a:first-child {
|
||||
line-height: 0;
|
||||
border-radius: 1em;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 0.25em;
|
||||
<<margin-end "0.25em">>
|
||||
}
|
||||
|
||||
.tc-test-case-result-icon svg {
|
||||
@@ -3395,7 +3415,7 @@ span.tc-translink > a:first-child {
|
||||
}
|
||||
|
||||
.tc-test-case-toolbar {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
}
|
||||
|
||||
.tc-test-case-toolbar svg {
|
||||
@@ -3529,11 +3549,11 @@ span.tc-translink > a:first-child {
|
||||
}
|
||||
|
||||
.tc-tiny-gap-left {
|
||||
margin-left: .25em;
|
||||
<<margin-start ".25em">>
|
||||
}
|
||||
|
||||
.tc-tiny-gap-right {
|
||||
margin-right: .25em;
|
||||
<<margin-end ".25em">>
|
||||
}
|
||||
|
||||
.tc-small-gap {
|
||||
@@ -3542,11 +3562,11 @@ span.tc-translink > a:first-child {
|
||||
}
|
||||
|
||||
.tc-small-gap-left {
|
||||
margin-left: .5em;
|
||||
<<margin-start ".5em">>
|
||||
}
|
||||
|
||||
.tc-small-gap-right {
|
||||
margin-right: .5em;
|
||||
<<margin-end ".5em">>
|
||||
}
|
||||
|
||||
.tc-big-gap {
|
||||
@@ -3555,11 +3575,11 @@ span.tc-translink > a:first-child {
|
||||
}
|
||||
|
||||
.tc-big-gap-left {
|
||||
margin-left: 1em;
|
||||
<<margin-start 1em>>
|
||||
}
|
||||
|
||||
.tc-big-gap-right {
|
||||
margin-right: 1em;
|
||||
<<margin-end 1em>>
|
||||
}
|
||||
|
||||
.tc-word-break {
|
||||
@@ -3572,3 +3592,58 @@ span.tc-translink > a:first-child {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* TODO: Remove the following rule once 2020 baseline is supported */
|
||||
@supports not (border-inline-start: 1px solid #000000) {
|
||||
blockquote {
|
||||
border-left: 5px solid <<colour blockquote-bar>>;
|
||||
}
|
||||
|
||||
blockquote.tc-big-quote {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tc-tab-buttons.tc-vertical button {
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tc-tab-buttons.tc-vertical button.tc-tab-selected {
|
||||
border-right: 1px solid <<colour tab-background-selected>>;
|
||||
}
|
||||
|
||||
.tc-tab-content.tc-vertical {
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Remove the following rule once 2021 baseline is supported */
|
||||
@supports not (border-start-start-radius: 0px) {
|
||||
.tc-tab-buttons.tc-vertical button {
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Remove the following rule once 2021 baseline is supported */
|
||||
@supports not (inset-inline-start: 0) {
|
||||
.tc-tiddler-info-controls {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tc-alert-toolbar {
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Remove the following rule once 2023 baseline is supported */
|
||||
@supports not (float: inline-end) {
|
||||
.tc-test-case-toolbar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.tc-tiddler-frame .tc-tiddler-controls {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user