rtl.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. /*
  2. Theme Name: Shoreditch
  3. Adding support for language written in a Right To Left (RTL) direction is easy -
  4. it's just a matter of overwriting all the horizontal positioning attributes
  5. of your CSS stylesheet in a separate stylesheet file named rtl.css.
  6. https://codex.wordpress.org/Right_to_Left_Language_Support
  7. */
  8. /*--------------------------------------------------------------
  9. >>> TABLE OF CONTENTS:
  10. ----------------------------------------------------------------
  11. # Normalize
  12. # Typography
  13. # Elements
  14. # Forms
  15. # Layout
  16. # Navigation
  17. ## Main Menu
  18. ## Pagination
  19. # Accessibility
  20. # Widgets
  21. # Content
  22. ## Posts & Pages
  23. ## Featured Content
  24. ## Comments
  25. # Media
  26. # Jetpack
  27. ## Infinite Scroll
  28. ## Recipes
  29. ## Social Menu
  30. ## Widgets
  31. # Responsive
  32. ## x >= 600px
  33. ## x >= 768px
  34. ## x >= 896px
  35. --------------------------------------------------------------*/
  36. /*--------------------------------------------------------------
  37. # Normalize
  38. --------------------------------------------------------------*/
  39. body {
  40. direction: rtl;
  41. unicode-bidi: embed;
  42. }
  43. /*--------------------------------------------------------------
  44. # Typography
  45. --------------------------------------------------------------*/
  46. blockquote {
  47. border-left-width: 0;
  48. border-right-width: 2px;
  49. padding-left: 0;
  50. padding-right: 1.5rem;
  51. }
  52. /*--------------------------------------------------------------
  53. # Elements
  54. --------------------------------------------------------------*/
  55. ul,
  56. ol {
  57. margin-left: 0;
  58. margin-right: 1.25em;
  59. }
  60. li > ul,
  61. li > ol {
  62. margin-left: 0;
  63. margin-right: 1.5em;
  64. }
  65. /*--------------------------------------------------------------
  66. # Forms
  67. --------------------------------------------------------------*/
  68. /* Search */
  69. .search-form .search-field {
  70. padding-left: 2.625em;
  71. padding-right: 0.375em;
  72. }
  73. .search-form .search-submit {
  74. left: 0;
  75. right: auto;
  76. }
  77. /*--------------------------------------------------------------
  78. # Layout
  79. --------------------------------------------------------------*/
  80. .site-branding {
  81. margin-left: auto;
  82. margin-right: 0;
  83. padding-left: 1.5em;
  84. padding-right: 0;
  85. }
  86. /*--------------------------------------------------------------
  87. # Navigation
  88. --------------------------------------------------------------*/
  89. /*--------------------------------------------------------------
  90. ## Main Menu
  91. --------------------------------------------------------------*/
  92. .main-navigation .menu-item-has-children > a {
  93. margin-left: 3.5em;
  94. margin-right: 0;
  95. }
  96. .main-navigation .menu-item-has-children > a:after {
  97. left: 0;
  98. right: auto;
  99. }
  100. .main-navigation ul ul .menu-item-has-children > a:after {
  101. left: 0.75em;
  102. right: auto;
  103. }
  104. .main-navigation ul ul {
  105. margin-left: 0;
  106. margin-right: 1.5em;
  107. }
  108. /* Dropdown Toggle */
  109. .dropdown-toggle {
  110. left: 0;
  111. right: auto;
  112. }
  113. /*--------------------------------------------------------------
  114. ## Pagination
  115. --------------------------------------------------------------*/
  116. .comment-navigation .nav-previous,
  117. .posts-navigation .nav-previous {
  118. float: right;
  119. }
  120. .comment-navigation .nav-next,
  121. .posts-navigation .nav-next {
  122. float: left;
  123. text-align: left;
  124. }
  125. .comment-navigation .nav-previous a:before,
  126. .posts-navigation .nav-previous a:before,
  127. .comment-navigation .nav-next a:after,
  128. .posts-navigation .nav-next a:after {
  129. content: "\f432";
  130. margin-left: 0.25em;
  131. margin-right: 0;
  132. }
  133. .comment-navigation .nav-next a:after,
  134. .posts-navigation .nav-next a:after {
  135. content: "\f431";
  136. margin-left: 0;
  137. margin-right: 0.25em;
  138. }
  139. /*--------------------------------------------------------------
  140. # Accessibility
  141. --------------------------------------------------------------*/
  142. .screen-reader-text:focus {
  143. left: auto;
  144. right: 5px;
  145. }
  146. /*--------------------------------------------------------------
  147. # Widgets
  148. --------------------------------------------------------------*/
  149. /* Lists */
  150. .widget_archive ul,
  151. .widget_categories ul,
  152. .widget_links ul,
  153. .widget_meta ul,
  154. .widget_nav_menu ul,
  155. .widget_pages ul,
  156. .widget_recent_comments ul,
  157. .widget_recent_entries ul,
  158. .widget_rss ul {
  159. margin-right: 0;
  160. }
  161. .widget_categories .children,
  162. .widget_nav_menu .sub-menu,
  163. .widget_pages .children {
  164. padding-left: 0;
  165. padding-right: 1.5em;
  166. }
  167. /* Tag Cloud */
  168. .widget_tag_cloud .tagcloud a {
  169. margin-left: 0.25em;
  170. margin-right: 0;
  171. }
  172. /*--------------------------------------------------------------
  173. # Content
  174. --------------------------------------------------------------*/
  175. /*--------------------------------------------------------------
  176. ## Posts & Pages
  177. --------------------------------------------------------------*/
  178. /* Entry Hero & Has Post Tumbnail */
  179. .site-content-wrapper .has-post-thumbnail .entry-header {
  180. margin-left: 0;
  181. margin-right: -1.5em;
  182. }
  183. /* Entry Author */
  184. .author-avatar {
  185. float: left;
  186. }
  187. .author-heading {
  188. float: right;
  189. max-width: calc(100% - 4.5em);
  190. }
  191. /* Page Links & More Link */
  192. .page-links a,
  193. .page-links > span {
  194. float: right;
  195. margin-left: 0.25rem;
  196. margin-right: 0;
  197. }
  198. /*--------------------------------------------------------------
  199. ## Featured Content
  200. --------------------------------------------------------------*/
  201. .featured-content {
  202. direction: ltr;
  203. }
  204. .featured-content .flex-control-paging,
  205. .featured-content .hentry {
  206. direction: rtl;
  207. }
  208. /*--------------------------------------------------------------
  209. ## Comments
  210. --------------------------------------------------------------*/
  211. /* Comment List */
  212. .comment-author .avatar {
  213. float: right;
  214. margin-left: 0.375em;
  215. margin-right: 0;
  216. }
  217. .comment-metadata .edit-link:before {
  218. padding-left: 0.5em;
  219. padding-right: 0.25em;
  220. }
  221. .comment-reply-link:after {
  222. content: "\f431";
  223. margin-left: 0;
  224. margin-right: 0.25em;
  225. }
  226. /*--------------------------------------------------------------
  227. # Media
  228. --------------------------------------------------------------*/
  229. .mejs-offscreen {
  230. left: auto !important;
  231. right: -999em;
  232. }
  233. /*--------------------------------------------------------------
  234. # Jetpack
  235. --------------------------------------------------------------*/
  236. /*--------------------------------------------------------------
  237. ## Infinite Scroll
  238. --------------------------------------------------------------*/
  239. /* Infinite Handle */
  240. .site-main #infinite-handle span:before {
  241. display: none;
  242. }
  243. /* Infinite Loader */
  244. .infinite-loader .spinner {
  245. left: auto !important;
  246. right: 50% !important;
  247. }
  248. /*--------------------------------------------------------------
  249. ## Recipes
  250. --------------------------------------------------------------*/
  251. .site-content .jetpack-recipe blockquote {
  252. margin-right: 0;
  253. }
  254. /*--------------------------------------------------------------
  255. ## Social Menu
  256. --------------------------------------------------------------*/
  257. .site .jetpack-social-navigation li {
  258. float: right;
  259. }
  260. .site .jetpack-social-navigation li:first-child {
  261. margin-left: 0.25em;
  262. margin-right: 0;
  263. }
  264. .site .jetpack-social-navigation li:last-child {
  265. margin-left: 0;
  266. margin-right: 0.25em;
  267. }
  268. /*--------------------------------------------------------------
  269. ## Widgets
  270. --------------------------------------------------------------*/
  271. /* RSS Links */
  272. .widget_rss_links ul {
  273. margin-right: 0;
  274. }
  275. .widget_rss_links p a + a {
  276. margin-left: 0;
  277. margin-right: 0.1865em;
  278. }
  279. /* Social Icons */
  280. .site .jetpack_widget_social_icons ul {
  281. margin-left: 0;
  282. margin-right: -0.25em;
  283. }
  284. .site .jetpack_widget_social_icons li {
  285. float: right;
  286. }
  287. .site .jetpack_widget_social_icons li:last-child {
  288. margin-left: 0;
  289. margin-right: 0.25em;
  290. }
  291. /* Social Media Icons */
  292. .site .widget_wpcom_social_media_icons_widget ul {
  293. margin-left: 0;
  294. margin-right: -0.25em;
  295. }
  296. .site .widget_wpcom_social_media_icons_widget li {
  297. float: right;
  298. }
  299. .site .widget_wpcom_social_media_icons_widget li:last-child {
  300. margin-left: 0;
  301. margin-right: 0.25em;
  302. }
  303. /* Top Posts & Pages */
  304. .widget_top-posts ul {
  305. margin-right: 0;
  306. }
  307. /*--------------------------------------------------------------
  308. # Responsive
  309. --------------------------------------------------------------*/
  310. /*--------------------------------------------------------------
  311. ## x >= 600px
  312. --------------------------------------------------------------*/
  313. @media screen and (min-width: 600px) {
  314. /* Content */
  315. .site-content-wrapper .has-post-thumbnail .entry-header {
  316. margin-left: 0;
  317. margin-right: -3em;
  318. }
  319. /* Jetpack */
  320. .site .testimonial-entry-column-2.testimonial-entry-first-item-row {
  321. margin-left: 0.75em;
  322. margin-right: 0;
  323. }
  324. .site .testimonial-entry-column-2.testimonial-entry-last-item-row {
  325. margin-left: 0;
  326. margin-right: 0.75em;
  327. }
  328. }
  329. /*--------------------------------------------------------------
  330. ## x >= 768px
  331. --------------------------------------------------------------*/
  332. @media screen and (min-width: 768px) {
  333. /* Typography */
  334. blockquote {
  335. padding-left: 0;
  336. padding-right: 1.875rem;
  337. }
  338. .widget-small blockquote {
  339. padding-left: 0;
  340. padding-right: 1.40625rem;
  341. }
  342. /* Elements */
  343. .widget-small li > ul,
  344. .widget-small li > ol {
  345. margin-left: 0;
  346. margin-right: 1.40625em;
  347. }
  348. /* Forms */
  349. .widget-small .search-form .search-field {
  350. padding-left: 3.515625em;
  351. padding-right: 0.703125em;
  352. }
  353. /* Layout */
  354. .widget-footer-area.column-2 .widget {
  355. float: right;
  356. }
  357. .widget-footer-area.column-2 .widget:nth-child(odd) {
  358. clear: right;
  359. padding-left: 1.5em;
  360. padding-right: 0;
  361. }
  362. .widget-footer-area.column-2 .widget-small:nth-child(odd) {
  363. padding-left: 1.875em;
  364. padding-right: 0;
  365. }
  366. .widget-footer-area.column-2 .widget:nth-child(even) {
  367. padding-left: 0;
  368. padding-right: 1.5em;
  369. }
  370. .widget-footer-area.column-2 .widget-small:nth-child(even) {
  371. padding-left: 0;
  372. padding-right: 1.875em;
  373. }
  374. /* Navigation */
  375. .main-navigation .menu-item-has-children > a {
  376. margin-left: 3em;
  377. margin-right: 0;
  378. }
  379. /* Content */
  380. .page-links a,
  381. .page-links > span {
  382. margin-left: 0.3125em;
  383. margin-right: 0;
  384. }
  385. /* Jetpack */
  386. .hentry div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {
  387. float: right;
  388. padding-left: 1.25rem;
  389. }
  390. .hentry div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-of-type(2) {
  391. padding-left: 0.625rem;
  392. padding-right: 0.625rem;
  393. }
  394. .hentry div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:last-of-type {
  395. padding-left: 0;
  396. padding-right: 1.25rem;
  397. }
  398. .site .testimonial-entry-first-item-row {
  399. clear: right;
  400. }
  401. .site .testimonial-entry-column-3.testimonial-entry-first-item-row {
  402. margin-left: 1em;
  403. margin-right: 0;
  404. }
  405. .site .testimonial-entry-column-3.testimonial-entry-last-item-row {
  406. margin-left: 0;
  407. margin-right: 1em;
  408. }
  409. }
  410. /*--------------------------------------------------------------
  411. ## x >= 896px
  412. --------------------------------------------------------------*/
  413. @media screen and (min-width: 896px) {
  414. /* Layout */
  415. body:not(.no-sidebar) .content-area {
  416. padding-left: 1em;
  417. padding-right: 0;
  418. }
  419. .site-content-wrapper .widget-area {
  420. padding-left: 0;
  421. padding-right: 2em;
  422. }
  423. .site-info {
  424. margin-left: auto;
  425. margin-right: 0;
  426. }
  427. .widget-footer-area.column-3 .widget {
  428. float: right;
  429. }
  430. .widget-footer-area.column-3 .widget:nth-child(3n+1) {
  431. clear: right;
  432. padding-left: 2em;
  433. padding-right: 0;
  434. }
  435. .widget-footer-area.column-3 .widget-small:nth-child(3n+1) {
  436. padding-left: 2.5em;
  437. padding-right: 0;
  438. }
  439. .widget-footer-area.column-3 .widget:nth-child(3n+2) {
  440. padding-left: 1em;
  441. padding-right: 1em;
  442. }
  443. .widget-footer-area.column-3 .widget-small:nth-child(3n+2) {
  444. padding-left: 1.25em;
  445. padding-right: 1.25em;
  446. }
  447. .widget-footer-area.column-3 .widget:nth-child(3n+3) {
  448. padding-left: 0;
  449. padding-right: 2em;
  450. }
  451. .widget-footer-area.column-3 .widget-small:nth-child(3n+3) {
  452. padding-left: 0;
  453. padding-right: 2.5em;
  454. }
  455. /* Navigation */
  456. .main-navigation li {
  457. margin-left: 0.75em;
  458. margin-right: 0.75em;
  459. }
  460. .main-navigation .primary-menu > li:first-child {
  461. margin-left: 0.75em;
  462. margin-right: 0;
  463. }
  464. .main-navigation .primary-menu > li:last-child {
  465. margin-left: 0;
  466. margin-right: 0.75em;
  467. }
  468. .main-navigation .menu-item-has-children > a {
  469. margin-left: 0;
  470. padding-left: 20px;
  471. padding-right: 0;
  472. }
  473. .main-navigation ul ul .menu-item-has-children > a {
  474. padding-left: 28px;
  475. padding-left: calc(0.75em + 20px);
  476. padding-right: 0.75em;
  477. }
  478. .main-navigation ul ul .menu-item-has-children > a:after {
  479. content: "\f431";
  480. }
  481. .main-navigation ul ul {
  482. float: right;
  483. left: auto;
  484. margin: 0;
  485. right: -999em;
  486. }
  487. .main-navigation ul li:hover > ul,
  488. .main-navigation ul li.focus > ul {
  489. left: 0;
  490. right: auto;
  491. }
  492. .main-navigation ul ul li:hover > ul,
  493. .main-navigation ul ul li.focus > ul {
  494. left: 100%;
  495. right: auto;
  496. }
  497. /* Content */
  498. .site-content-wrapper .has-post-thumbnail .entry-header {
  499. margin-left: 0;
  500. margin-right: 0;
  501. }
  502. /* Jetpack */
  503. .infinite-loader .spinner {
  504. left: auto !important;
  505. right: 12px !important;
  506. }
  507. .site .testimonial-entry-column-4.testimonial-entry-first-item-row {
  508. margin-left: 1.25em;
  509. margin-right: 0;
  510. }
  511. .site .testimonial-entry-column-4:nth-of-type(4n+2) {
  512. margin-left: 0.75em;
  513. margin-right: 0.25em;
  514. }
  515. .site .testimonial-entry-column-4:nth-of-type(4n+3) {
  516. margin-left: 0.25em;
  517. margin-right: 0.75em;
  518. }
  519. .site .testimonial-entry-column-4.testimonial-entry-last-item-row {
  520. margin-left: 0;
  521. margin-right: 1.25em;
  522. }
  523. /* Extra Classes */
  524. .column-1-3 {
  525. float: right;
  526. }
  527. .column-1-3.column-first {
  528. padding-left: 1em;
  529. padding-right: 0;
  530. }
  531. .column-1-3.column-last {
  532. padding-left: 0;
  533. padding-right: 1em;
  534. }
  535. }