feat: Native RTL support (#2802)
This commit is contained in:
Rami Yushuvaev
GitHub
parent
0b260cd094
commit
9ed6c5a9ba
7 changed files with 85 additions and 82 deletions
|
|
@ -28,14 +28,14 @@ body {
|
|||
/* header styles */
|
||||
.app-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
margin-block-end: 3rem;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: black;
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
|
|
@ -67,8 +67,8 @@ main {
|
|||
color: #666;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -1rem;
|
||||
margin-block-end: 1rem;
|
||||
margin-block-start: -1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
|
||||
.DocSearch-Button-Placeholder {
|
||||
font-size: 1rem;
|
||||
padding: 0 12px 0 8px;
|
||||
padding-block: 0;
|
||||
padding-inline: 8px 12px;
|
||||
color: var(--docsearch-muted-color);
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
}
|
||||
|
||||
.DocSearch-Button-Key:first-child {
|
||||
margin-right: 0.4em;
|
||||
margin-inline-end: 0.4em;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@
|
|||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
width: 100vw;
|
||||
z-index: 400;
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
.DocSearch-Form {
|
||||
align-items: center;
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-bottom: 1px solid var(--docsearch-subtle-color);
|
||||
border-block-end: 1px solid var(--docsearch-subtle-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
min-height: var(--docsearch-searchbox-initial-height);
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
|
||||
.DocSearch-Divider {
|
||||
height: 16px;
|
||||
border-left: 1px solid var(--docsearch-subtle-color);
|
||||
border-inline-start: 1px solid var(--docsearch-subtle-color);
|
||||
}
|
||||
|
||||
.DocSearch-Action {
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
border-radius: 50%;
|
||||
color: var(--docsearch-icon-color);
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
}
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
color: var(--docsearch-icon-color);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
margin-left: var(--docsearch-spacing);
|
||||
margin-inline-start: var(--docsearch-spacing);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
|
@ -324,13 +324,13 @@
|
|||
|
||||
.DocSearch-Logo svg {
|
||||
color: var(--docsearch-logo-color);
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
/* Hit */
|
||||
|
||||
.DocSearch-Hits:last-of-type {
|
||||
margin-bottom: 24px;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
|
||||
.DocSearch-Hits mark {
|
||||
|
|
@ -343,25 +343,25 @@
|
|||
display: flex;
|
||||
font-size: 0.85em;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--docsearch-spacing);
|
||||
margin-block-end: var(--docsearch-spacing);
|
||||
padding: var(--docsearch-spacing);
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter a {
|
||||
border-bottom: 1px solid;
|
||||
border-block-end: 1px solid;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding-bottom: 4px;
|
||||
padding-block-end: 4px;
|
||||
position: relative;
|
||||
scroll-margin-top: 40px;
|
||||
scroll-margin-block-start: 40px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:first-of-type {
|
||||
margin-top: 4px;
|
||||
margin-block-start: 4px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a,
|
||||
|
|
@ -369,7 +369,7 @@
|
|||
background: var(--docsearch-hit-background);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding-left: var(--docsearch-spacing);
|
||||
padding-inline-start: var(--docsearch-spacing);
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
margin: 0 -4px;
|
||||
padding: 8px 4px 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
@ -442,7 +442,7 @@
|
|||
}
|
||||
|
||||
.DocSearch-Hit-action + .DocSearch-Hit-action {
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action-button {
|
||||
|
|
@ -557,12 +557,12 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
|
||||
.DocSearch-NoResults {
|
||||
gap: 0.8em;
|
||||
margin-top: 2em;
|
||||
margin-block-start: 2em;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults--withAskAi {
|
||||
justify-content: flex-start;
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.DocSearch-StartScreen,
|
||||
|
|
@ -595,7 +595,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List-Items p {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
|
@ -628,7 +628,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
.DocSearch-Footer {
|
||||
align-items: center;
|
||||
background: var(--docsearch-footer-background);
|
||||
border-top: 1px solid var(--docsearch-subtle-color);
|
||||
border-block-start: 1px solid var(--docsearch-subtle-color);
|
||||
border-radius: 0 0 4px 4px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
|
@ -663,7 +663,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
color: var(--docsearch-icon-color);
|
||||
border: 0;
|
||||
width: 24px;
|
||||
|
|
@ -671,7 +671,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
}
|
||||
|
||||
.DocSearch-Commands-Key:last-of-type {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.DocSearch-Escape-Key {
|
||||
|
|
@ -715,7 +715,7 @@ assistive tech users */
|
|||
|
||||
.DocSearch-Hit-AskAIButton-icon {
|
||||
color: var(--docsearch-icon-color);
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -736,7 +736,7 @@ assistive tech users */
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
|
@ -758,7 +758,7 @@ assistive tech users */
|
|||
.DocSearch-AskAiScreen-Container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
@ -770,8 +770,9 @@ assistive tech users */
|
|||
display: flex;
|
||||
font-size: 0.6em;
|
||||
font-weight: 300;
|
||||
padding: 1.5em 0 0.5em 0;
|
||||
text-align: left;
|
||||
padding-block: 1.5em 0.5em;
|
||||
padding-inline: 0;
|
||||
text-align: start;
|
||||
margin: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
|
@ -794,7 +795,7 @@ assistive tech users */
|
|||
width: 100%;
|
||||
gap: 1em;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 8px;
|
||||
margin-block-end: 8px;
|
||||
background: var(--docsearch-hit-background);
|
||||
padding: 24px;
|
||||
color: var(--docsearch-text-color);
|
||||
|
|
@ -837,7 +838,7 @@ assistive tech users */
|
|||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.DocSearch-AskAiScreen-ActionButton {
|
||||
|
|
@ -1009,11 +1010,11 @@ assistive tech users */
|
|||
}
|
||||
|
||||
.DocSearch-Markdown-Content p:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Markdown-Content p:first-child {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Markdown-Content code {
|
||||
|
|
@ -1093,7 +1094,7 @@ assistive tech users */
|
|||
.DocSearch-Markdown-Content ol {
|
||||
color: var(--docsearch-text-color);
|
||||
margin: 1.2em 0;
|
||||
padding-left: 1.5em;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
|
||||
.DocSearch-Markdown-Content ul {
|
||||
|
|
@ -1107,7 +1108,7 @@ assistive tech users */
|
|||
.DocSearch-Markdown-Content li {
|
||||
color: var(--docsearch-text-color);
|
||||
margin: 0.8em 0;
|
||||
padding-left: 0.3em;
|
||||
padding-inline-start: 0.3em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -1132,16 +1133,17 @@ assistive tech users */
|
|||
}
|
||||
|
||||
.DocSearch-Markdown-Content blockquote {
|
||||
border-left: 4px solid var(--docsearch-hit-highlight-color);
|
||||
border-inline-start: 4px solid var(--docsearch-hit-highlight-color);
|
||||
margin: 1.5em 0;
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em 0;
|
||||
color: var(--docsearch-secondary-text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.DocSearch-Markdown-Content hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--docsearch-subtle-color);
|
||||
border-block-start: 1px solid var(--docsearch-subtle-color);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
|
|
@ -1155,7 +1157,7 @@ assistive tech users */
|
|||
.DocSearch-Markdown-Content td {
|
||||
padding: 0.75em;
|
||||
border: 1px solid var(--docsearch-subtle-color);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.DocSearch-Markdown-Content th {
|
||||
|
|
@ -1184,12 +1186,12 @@ assistive tech users */
|
|||
}
|
||||
|
||||
.DocSearch-AskAiScreen-MessageContent-Tool.Tool--Result {
|
||||
padding-top: 0;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.DocSearch-AskAiScreen-MessageContent-Tool > svg {
|
||||
color: var(--docsearch-icon-color);
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.DocSearch-AskAiScreen-MessageContent-Tool-Query {
|
||||
|
|
@ -1214,7 +1216,7 @@ assistive tech users */
|
|||
.DocSearck-AskAiScreen-MessageContent-Stopped {
|
||||
color: var(--docsearch-muted-color);
|
||||
font-style: italic;
|
||||
margin-top: 1em;
|
||||
margin-block-start: 1em;
|
||||
}
|
||||
|
||||
.DocSearch-AskAiScreen-SmallerLoadingIcon {
|
||||
|
|
@ -1274,7 +1276,7 @@ assistive tech users */
|
|||
}
|
||||
|
||||
.DocSearch-Hit-AskAIButton-icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
/* Prevent body scroll on modal-open for mobile */
|
||||
/* https://stackoverflow.com/a/24727206/6276948 */
|
||||
|
|
@ -1294,7 +1296,7 @@ assistive tech users */
|
|||
|
||||
.DocSearch-Footer {
|
||||
border-radius: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
|
|
@ -1346,8 +1348,8 @@ assistive tech users */
|
|||
|
||||
.DocSearch-CodeSnippet-CopyButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
inset-block-start: 8px;
|
||||
inset-inline-end: 8px;
|
||||
background: var(--docsearch-key-background);
|
||||
color: var(--docsearch-text-color);
|
||||
border: none;
|
||||
|
|
@ -1371,7 +1373,7 @@ assistive tech users */
|
|||
.DocSearch-CodeSnippet-CopyButton svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.DocSearch-CodeSnippet-CheckIcon {
|
||||
|
|
@ -1400,7 +1402,7 @@ assistive tech users */
|
|||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: var(--docsearch-text-color);
|
||||
margin-bottom: 0.15em;
|
||||
margin-block-end: 0.15em;
|
||||
}
|
||||
|
||||
.DocSearch-NewConversationScreen-Description {
|
||||
|
|
@ -1413,7 +1415,7 @@ assistive tech users */
|
|||
flex-direction: column;
|
||||
gap: var(--docsearch-spacing);
|
||||
align-items: start;
|
||||
margin-top: 1.5em;
|
||||
margin-block-start: 1.5em;
|
||||
}
|
||||
|
||||
.DocSearch-NewConversationScreen-SuggestedQuestion {
|
||||
|
|
@ -1436,14 +1438,14 @@ assistive tech users */
|
|||
.DocSearch-Menu-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
padding: 8px 0;
|
||||
flex-direction: column;
|
||||
border-radius: var(--docsearch-border-radius);
|
||||
background-color: var(--docsearch-dropdown-menu-background);
|
||||
box-shadow: 0px 0px 0px 1px #21243D0D, 0px 8px 16px -4px #21243D40;
|
||||
min-width: 195px;
|
||||
top: calc(100% + 12px);
|
||||
inset-block-start: calc(100% + 12px);
|
||||
z-index: 422;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -749,10 +749,10 @@ export function DocSearchModal({
|
|||
// Calculate the scrollbar width to compensate for removed scrollbar
|
||||
const scrollBarWidth = window.innerWidth - document.body.clientWidth;
|
||||
// Prevent layout shift by adding appropriate margin to the body
|
||||
document.body.style.marginRight = `${scrollBarWidth}px`;
|
||||
document.body.style.marginInlineEnd = `${scrollBarWidth}px`;
|
||||
|
||||
return (): void => {
|
||||
document.body.style.marginRight = '0px';
|
||||
document.body.style.marginInlineEnd = '0px';
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
|
|
@ -82,10 +82,10 @@ function VideoPlayer({ chapters }) {
|
|||
style={{
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeft: '8px solid transparent',
|
||||
borderRight: '8px solid transparent',
|
||||
borderBottom: '8px solid #2563eb', // blue-600
|
||||
marginBottom: '-2px',
|
||||
borderInlineStart: '8px solid transparent',
|
||||
borderInlineEnd: '8px solid transparent',
|
||||
borderBlockEnd: '8px solid #2563eb', // blue-600
|
||||
marginBlockEnd: '-2px',
|
||||
}}
|
||||
/>
|
||||
{/* Button */}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const FlipWords = ({ words, duration = 3000, className }) => {
|
|||
scale: 2,
|
||||
position: 'absolute',
|
||||
}}
|
||||
className={cn('z-10 inline-block text-left dark:text-blue-500 px-1', className)}
|
||||
className={cn('z-10 inline-block text-start dark:text-blue-500 px-1', className)}
|
||||
key={currentWord}
|
||||
>
|
||||
{/* edit suggested by Sajal: https://x.com/DewanganSajal */}
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@ html[data-theme='dark'] {
|
|||
}
|
||||
|
||||
article li {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
|
|
@ -241,7 +241,7 @@ html {
|
|||
.navbar__logo {
|
||||
flex: 0 0 100%;
|
||||
height: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
/* DocSearch x Algolia logo */
|
||||
|
|
@ -305,7 +305,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
|
|||
white-space: nowrap;
|
||||
text-decoration: none !important;
|
||||
border-radius: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
background-color: #fff !important;
|
||||
color: #21243d !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
|
@ -554,7 +554,7 @@ html[data-theme='dark'] .header-github-link::before {
|
|||
|
||||
.keypad__base {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -596,31 +596,31 @@ html[data-theme='dark'] .header-github-link::before {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
left: 32%;
|
||||
inset-block-start: 24%;
|
||||
inset-inline-start: 32%;
|
||||
translate: -14% -8%;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
font-size: 2.2rem;
|
||||
z-index: 5;
|
||||
color: hsl(0 0% 94%);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg);
|
||||
pointer-events: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.key__text--search {
|
||||
left: 24%;
|
||||
top: 20%;
|
||||
inset-inline-start: 24%;
|
||||
inset-block-start: 20%;
|
||||
translate: -25% -8%;
|
||||
}
|
||||
|
||||
.key img {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 50%;
|
||||
translate: -50% 1%;
|
||||
filter: hue-rotate(calc(var(--hue) * 1deg)) saturate(var(--saturate))
|
||||
brightness(var(--bright));
|
||||
|
|
@ -632,8 +632,8 @@ html[data-theme='dark'] .header-github-link::before {
|
|||
.keypad__single {
|
||||
width: 40.5%;
|
||||
height: 46%;
|
||||
bottom: 36%;
|
||||
left: 54%;
|
||||
inset-block-end: 36%;
|
||||
inset-inline-start: 54%;
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
54% 0,
|
||||
|
|
@ -651,8 +651,8 @@ html[data-theme='dark'] .header-github-link::before {
|
|||
|
||||
/* Same single key, shifted up/left */
|
||||
.keypad__single--left {
|
||||
left: 29.3%;
|
||||
bottom: 54.2%;
|
||||
inset-inline-start: 29.3%;
|
||||
inset-block-end: 54.2%;
|
||||
}
|
||||
|
||||
.keypad__single .key__text {
|
||||
|
|
@ -663,8 +663,8 @@ html[data-theme='dark'] .header-github-link::before {
|
|||
.keypad__double {
|
||||
width: 64%;
|
||||
height: 65%;
|
||||
left: 6%;
|
||||
bottom: 17.85%;
|
||||
inset-inline-start: 6%;
|
||||
inset-block-end: 17.85%;
|
||||
clip-path: polygon(
|
||||
34% 0,
|
||||
93% 44%,
|
||||
|
|
@ -748,7 +748,7 @@ html[data-theme='dark'] .shimmer-effect {
|
|||
|
||||
.providers-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-align: left;
|
||||
inset-block-start: 0;
|
||||
text-align: start;
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue