mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-25 21:08:54 +08:00
181 lines
3.5 KiB
CSS
181 lines
3.5 KiB
CSS
/*
|
|
Increase the spacing in paragraphs
|
|
*/
|
|
|
|
[dir='rtl'] p {
|
|
line-height: 2rem;
|
|
}
|
|
|
|
/*
|
|
Intro project buttons and headings
|
|
*/
|
|
|
|
[dir='rtl'] .monaco-editor-tabs {
|
|
/* need to remove the margin because the editor is reversed */
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
[dir='rtl'] .map-ui .superblock-link > svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
intro to courses section
|
|
*/
|
|
|
|
[dir='rtl'] .link-btn.btn-lg > svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
this is used to rotate arrow mark in certification block and donation
|
|
the "not" and "is" selector is used to stop it from affecting other section and pages
|
|
*/
|
|
|
|
/* arrow icon */
|
|
[dir='rtl']
|
|
:is(.block:is(:not(.open)), .faq-item:is(:not(.open)))
|
|
.map-title:not(.title-wrapper, .block-header-button-text)
|
|
> svg:first-child {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
external fontawesome link icon
|
|
*/
|
|
|
|
[dir='rtl'] .nav-link > .fa-up-right-from-square,
|
|
[dir='rtl'] td a[target='_blank'] > svg {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
/*
|
|
universal-nav-bar
|
|
and menu secion
|
|
*/
|
|
|
|
@media (min-width: 601px) {
|
|
[dir='rtl'] .nav-list {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
[dir='rtl'] #universal-nav-logo {
|
|
left: inherit;
|
|
right: 17px;
|
|
}
|
|
|
|
[dir='rtl'] .fcc_searchBar .ais-Hits {
|
|
left: auto;
|
|
right: 15px;
|
|
}
|
|
|
|
[dir='rtl'] .universal-nav-right .fcc_searchBar {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
/* had to change overflow, because it clips the first words of the english articles */
|
|
[dir='rtl'] .footer-container {
|
|
overflow-x: inherit;
|
|
}
|
|
|
|
/*
|
|
dropdown links
|
|
*/
|
|
|
|
[dir='rtl'] .dropdown-menu {
|
|
text-decoration-skip-ink: all;
|
|
}
|
|
|
|
/*
|
|
New RWD project challenge
|
|
*/
|
|
|
|
[dir='rtl'] .tabs-row {
|
|
gap: 10px;
|
|
}
|
|
|
|
[dir='rtl'] .monaco-editor-tabs button:not(:first-child) {
|
|
border-left: 2px solid;
|
|
border-right: none;
|
|
}
|
|
|
|
/* Align the the Arabic head with the corresponding English word */
|
|
|
|
[dir='rtl'] .table thead:first-child tr:first-child th {
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
sections that need to stay left to right
|
|
*/
|
|
|
|
/* Code snippet*/
|
|
[dir='rtl'] :has(#learn-app-wrapper) pre,
|
|
[dir='rtl'] code,
|
|
/* trending articles */
|
|
[dir='rtl'] .trending-guides .trending-guides-row div a,
|
|
[dir='rtl'] .overflow-guard,
|
|
[dir='rtl'] .challenge-preview,
|
|
/* timeline*/
|
|
[dir='rtl'] .timeline-pagination_list {
|
|
direction: ltr;
|
|
}
|
|
|
|
[dir='rtl'] code {
|
|
word-break: normal;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
/* bootstrap display block breaks the code elements when they are stacked on top of each other to sort this, we remove it for display: grid */
|
|
|
|
[dir='rtl'] pre[class*='language-']:has(code) {
|
|
display: grid;
|
|
}
|
|
|
|
[dir='rtl'] .description-container,
|
|
[dir='rtl'] .action-row-container,
|
|
[dir='rtl']
|
|
.timeline-pagination_list
|
|
.timeline-pagination_list_item:not(:has(button)) {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Revert the editor layout to account for reverted splitter */
|
|
|
|
[dir='rtl'] .desktop-layout .tabs-row,
|
|
[dir='rtl'] .desktop-layout .reflex-container:not(.horizontal) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* new Font Family because 'Hack-ZeroSlash' add letter spacing in Arabic letter which is extermely bad */
|
|
|
|
[dir='rtl'] body,
|
|
[dir='rtl'] .signup-btn,
|
|
[dir='rtl'] h1,
|
|
[dir='rtl'] h2,
|
|
[dir='rtl'] h3,
|
|
[dir='rtl'] h4,
|
|
[dir='rtl'] h5,
|
|
[dir='rtl'] h6,
|
|
[dir='rtl'] p,
|
|
[dir='rtl'] td,
|
|
[dir='rtl'] th,
|
|
[dir='rtl'] .donate-page-wrapper,
|
|
[dir='rtl'] .donate-page-wrapper b,
|
|
[dir='rtl'] .donate-page-wrapper h3,
|
|
[dir='rtl'] .donate-page-wrapper p,
|
|
[dir='rtl'] [name='payment-method'] {
|
|
font-family: 'NotoSansArabic';
|
|
}
|
|
|
|
@media (min-width: 980px) {
|
|
[dir='rtl'] .donate-page-wrapper > .row {
|
|
display: flex;
|
|
}
|
|
}
|