🌐 Add RTL language support

This commit is contained in:
James Panther
2022-01-11 16:17:49 +11:00
parent 1b9b660abe
commit cdf56a1e11
15 changed files with 161 additions and 36 deletions
+110 -25
View File
@@ -573,6 +573,7 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1em;
border-right-color: var(--color-primary-200);
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
@@ -970,6 +971,33 @@ body a, body button {
color: var(--color-primary-400);
}
/* RTL support */
[dir="rtl"] .prose blockquote {
border-left-width: 0px;
border-right-width: 4px;
padding-right: 1rem;
}
[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li {
margin-right: 1.75rem;
padding-left: 0px;
padding-right: 0.5rem;
}
[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before {
left: auto;
right: 0.25rem;
}
[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child {
padding-right: 0px;
}
[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child {
padding-left: 0px;
}
/* -- Chroma Highlight -- */
/* Background */
@@ -1830,22 +1858,18 @@ body a, body button {
margin-top: -0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mt-\[0\.1rem\] {
margin-top: 0.1rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.mt-\[0\.1rem\] {
margin-top: 0.1rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
@@ -1854,14 +1878,6 @@ body a, body button {
margin-bottom: 0px !important;
}
.mr-4 {
margin-right: 1rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@@ -2103,16 +2119,16 @@ body a, body button {
padding-right: 0.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-\[1px\] {
padding-top: 1px;
padding-bottom: 1px;
@@ -2163,10 +2179,6 @@ body a, body button {
padding-top: 1rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.text-center {
text-align: center;
}
@@ -2363,6 +2375,62 @@ body a, body button {
text-underline-offset: 2px;
}
[dir="ltr"] .ltr\:ml-2 {
margin-left: 0.5rem;
}
[dir="ltr"] .ltr\:mr-4 {
margin-right: 1rem;
}
[dir="ltr"] .ltr\:ml-1 {
margin-left: 0.25rem;
}
[dir="ltr"] .ltr\:inline {
display: inline;
}
[dir="ltr"] .ltr\:hidden {
display: none;
}
[dir="ltr"] .ltr\:pr-3 {
padding-right: 0.75rem;
}
[dir="ltr"] .ltr\:text-right {
text-align: right;
}
[dir="rtl"] .rtl\:mr-2 {
margin-right: 0.5rem;
}
[dir="rtl"] .rtl\:ml-4 {
margin-left: 1rem;
}
[dir="rtl"] .rtl\:mr-1 {
margin-right: 0.25rem;
}
[dir="rtl"] .rtl\:inline {
display: inline;
}
[dir="rtl"] .rtl\:hidden {
display: none;
}
[dir="rtl"] .rtl\:pl-3 {
padding-left: 0.75rem;
}
[dir="rtl"] .rtl\:text-left {
text-align: left;
}
.dark .dark\:prose-light {
color: var(--color-neutral-300);
}
@@ -2397,6 +2465,7 @@ body a, body button {
.dark .dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) {
color: var(--color-neutral-200);
border-left-color: var(--color-primary-900);
border-right-color: var(--color-primary-900);
}
.dark .dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) {
@@ -2576,6 +2645,22 @@ body a, body button {
.sm\:last\:mr-0:last-child {
margin-right: 0px;
}
[dir="ltr"] .ltr\:sm\:mr-7 {
margin-right: 1.75rem;
}
[dir="ltr"] .ltr\:sm\:last\:mr-0:last-child {
margin-right: 0px;
}
[dir="rtl"] .rtl\:sm\:ml-7 {
margin-left: 1.75rem;
}
[dir="rtl"] .rtl\:sm\:last\:ml-0:last-child {
margin-left: 0px;
}
}
@media (min-width: 768px) {