rtl.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757
  1. /*
  2. Theme Name: Twenty Sixteen
  3. Description: Adds support for languages written in a Right To Left (RTL) direction.
  4. It's easy, just a matter of overwriting all the horizontal positioning attributes
  5. of your CSS stylesheet in a separate stylesheet file named rtl.css.
  6. See: https://codex.wordpress.org/Right_to_Left_Language_Support
  7. */
  8. /**
  9. * Table of Contents:
  10. *
  11. * 1.0 - Normalize
  12. * 2.0 - Typography
  13. * 3.0 - Elements
  14. * 4.0 - Forms
  15. * 5.0 - Navigations
  16. * 6.0 - Accessibility
  17. * 7.0 - Widgets
  18. * 8.0 - Content
  19. * 8.1 - Header
  20. * 8.2 - Posts and pages
  21. * 8.3 - Comments
  22. * 8.4 - Footer
  23. * 9.0 - Multisites
  24. * 10.0 - Media Queries
  25. * 10.1 - >= 710px
  26. * 10.2 - >= 910px
  27. * 10.3 - >= 985px
  28. * 10.4 - >= 1200px
  29. */
  30. /**
  31. * 1.0 - Normalize
  32. */
  33. body {
  34. direction: rtl;
  35. unicode-bidi: embed;
  36. }
  37. input[type="checkbox"],
  38. input[type="radio"] {
  39. margin-right: auto;
  40. margin-left: 0.4375em;
  41. }
  42. /**
  43. * 2.0 - Typography
  44. */
  45. body,
  46. button,
  47. button[disabled]:hover,
  48. button[disabled]:focus,
  49. input[type="button"],
  50. input[type="button"][disabled]:hover,
  51. input[type="button"][disabled]:focus,
  52. input[type="reset"],
  53. input[type="reset"][disabled]:hover,
  54. input[type="reset"][disabled]:focus,
  55. input[type="submit"],
  56. input[type="submit"][disabled]:hover,
  57. input[type="submit"][disabled]:focus,
  58. input,
  59. select,
  60. textarea,
  61. .post-password-form label,
  62. .main-navigation,
  63. .post-navigation,
  64. .post-navigation .post-title,
  65. .pagination,
  66. .image-navigation,
  67. .comment-navigation,
  68. .site .skip-link,
  69. .logged-in .site .skip-link,
  70. .widget .widget-title,
  71. .widget_recent_entries .post-date,
  72. .widget_rss .rss-date,
  73. .widget_rss cite,
  74. .tagcloud a,
  75. .site-title,
  76. .entry-title,
  77. .entry-footer,
  78. .sticky-post,
  79. .page-title,
  80. .page-links,
  81. .comments-title,
  82. .comment-reply-title,
  83. .comment-metadata,
  84. .pingback .edit-link,
  85. .comment-reply-link,
  86. .comment-form label,
  87. .no-comments,
  88. .required,
  89. .site-footer .site-title,
  90. .site-footer .site-title:after,
  91. .widecolumn label,
  92. .widecolumn .mu_register label {
  93. font-family: Arial, Tahoma, sans-serif;
  94. }
  95. ::-webkit-input-placeholder {
  96. font-family: Arial, Tahoma, sans-serif;
  97. }
  98. :-moz-placeholder {
  99. font-family: Arial, Tahoma, sans-serif;
  100. }
  101. ::-moz-placeholder {
  102. font-family: Arial, Tahoma, sans-serif;
  103. }
  104. :-ms-input-placeholder {
  105. font-family: Arial, Tahoma, sans-serif;
  106. }
  107. blockquote {
  108. border-right-width: 4px;
  109. border-left-width: 0;
  110. padding-right: 1.263157895em;
  111. padding-left: 0;
  112. }
  113. .entry-content h1,
  114. .entry-content h2,
  115. .entry-content h3,
  116. .entry-content h4,
  117. .entry-content h5,
  118. .entry-content h6,
  119. .entry-summary h1,
  120. .entry-summary h2,
  121. .entry-summary h3,
  122. .entry-summary h4,
  123. .entry-summary h5,
  124. .entry-summary h6,
  125. .comment-content h1,
  126. .comment-content h2,
  127. .comment-content h3,
  128. .comment-content h4,
  129. .comment-content h5,
  130. .comment-content h6,
  131. .textwidget h1,
  132. .textwidget h2,
  133. .textwidget h3,
  134. .textwidget h4,
  135. .textwidget h5,
  136. .textwidget h6,
  137. .entry-content .author-title,
  138. .widget_calendar caption,
  139. .widecolumn h2 {
  140. font-weight: 700;
  141. }
  142. /**
  143. * 3.0 - Elements
  144. */
  145. ul,
  146. ol {
  147. margin: 0 1.25em 1.75em 0;
  148. }
  149. ol {
  150. margin-right: 1.5em;
  151. margin-left: 0;
  152. }
  153. caption,
  154. th,
  155. td {
  156. text-align: right;
  157. }
  158. /**
  159. * 4.0 - Forms
  160. */
  161. input[type="search"].search-field {
  162. border-radius: 0 2px 2px 0;
  163. }
  164. .search-submit:before {
  165. left: 1px;
  166. }
  167. .search-submit {
  168. border-radius: 2px 0 0 2px;
  169. left: 0;
  170. right: auto;
  171. }
  172. /**
  173. * 5.0 - Navigation
  174. */
  175. .main-navigation ul ul {
  176. margin-right: 0.875em;
  177. margin-left: auto;
  178. }
  179. .main-navigation .menu-item-has-children > a {
  180. margin-right: auto;
  181. margin-left: 56px;
  182. }
  183. .dropdown-toggle {
  184. left: 0;
  185. right: auto;
  186. }
  187. .dropdown-toggle:after {
  188. border-right-width: 1px;
  189. border-left-width: 0;
  190. left: auto;
  191. right: 1px;
  192. }
  193. .social-navigation li {
  194. float: right;
  195. margin: 0 0 0.4375em 0.4375em;
  196. }
  197. .pagination:before {
  198. left: 0;
  199. right: auto;
  200. }
  201. .pagination:after {
  202. left: 54px;
  203. right: auto;
  204. }
  205. .pagination .nav-links {
  206. padding-right: 0;
  207. padding-left: 106px;
  208. }
  209. .pagination .nav-links:before {
  210. content: "\f430";
  211. left: -1px;
  212. right: auto;
  213. }
  214. .pagination .nav-links:after {
  215. content: "\f429";
  216. left: 55px;
  217. right: auto;
  218. }
  219. .pagination .page-numbers {
  220. margin: 0 -0.7368421053em 0 0.7368421053em;
  221. }
  222. .pagination .prev,
  223. .pagination .next {
  224. margin: 0;
  225. }
  226. .pagination .prev {
  227. left: 54px;
  228. right: auto;
  229. }
  230. .pagination .prev:before {
  231. content: "\f429";
  232. left: auto;
  233. right: -1px;
  234. }
  235. .pagination .next {
  236. left: 0;
  237. right: auto;
  238. }
  239. .pagination .next:before {
  240. content: "\f430";
  241. left: -1px;
  242. right: auto;
  243. }
  244. .comment-navigation {
  245. margin-right: 0;
  246. margin-left: 0;
  247. }
  248. /**
  249. * 6.0 - Accessibility
  250. */
  251. .site .skip-link {
  252. left: auto;
  253. right: -9999em;
  254. }
  255. .site .skip-link:focus {
  256. left: auto;
  257. right: 6px;
  258. }
  259. /**
  260. * 7.0 - Widgets
  261. */
  262. .tagcloud a {
  263. margin-right: 0;
  264. margin-left: 0.1875em;
  265. }
  266. /**
  267. * 8.0 - Content
  268. */
  269. /**
  270. * 8.1 - Header
  271. */
  272. .site-branding {
  273. margin-right: 0;
  274. margin-left: auto;
  275. }
  276. /**
  277. * 8.2 - Posts and pages
  278. */
  279. .author-avatar .avatar {
  280. float: right;
  281. margin-right: 0;
  282. margin-left: 1.75em;
  283. }
  284. .entry-footer .avatar {
  285. margin-right: 0;
  286. margin-left: 0.5384615385em;
  287. }
  288. .page-links a,
  289. .page-links > span {
  290. margin-right: auto;
  291. margin-left: 0.3076923077em;
  292. }
  293. .page-links > .page-links-title {
  294. padding-right: 0;
  295. padding-left: 0.6153846154em;
  296. }
  297. body:not(.search-results) .entry-summary .alignright {
  298. margin: 0.2631578947em 0 1.4736842105em 1.4736842105em;
  299. }
  300. body:not(.search-results) .entry-summary .alignleft {
  301. margin: 0.2631578947em 1.4736842105em 1.4736842105em 0;
  302. }
  303. /**
  304. * 8.3 - Comments
  305. */
  306. .comment-list .children > li {
  307. padding-right: 0.875em;
  308. padding-left: 0;
  309. }
  310. .comment-author .avatar {
  311. float: right;
  312. margin-right: auto;
  313. margin-left: 0.875em;
  314. }
  315. .bypostauthor > article .fn:after {
  316. left: auto;
  317. right: 3px;
  318. }
  319. .comment-content ul,
  320. .comment-content ol {
  321. margin: 0 1.25em 1.5em 0;
  322. }
  323. .comment-reply-title small a {
  324. float: left;
  325. }
  326. /**
  327. * 8.4 - Footer
  328. */
  329. .site-footer .site-title:after {
  330. padding-right: 0.538461538em;
  331. padding-left: 0.307692308em;
  332. }
  333. /**
  334. * 9.0 - Multisites
  335. */
  336. .widecolumn .mu_register label {
  337. margin-right: 0;
  338. margin-left: 0.7692307692em;
  339. }
  340. /**
  341. * 10.0 - Media Queries
  342. */
  343. /**
  344. * 10.1 - >= 710px
  345. */
  346. @media screen and (min-width: 44.375em) {
  347. .pagination {
  348. margin: 0 7.6923% 4.421052632em 23.0769%;
  349. }
  350. .entry-header,
  351. .post-thumbnail,
  352. .entry-content,
  353. .entry-summary,
  354. .entry-footer,
  355. .comments-area,
  356. .image-navigation,
  357. .post-navigation,
  358. .page-header,
  359. .page-content,
  360. .content-bottom-widgets {
  361. margin-right: 7.6923%;
  362. margin-left: 23.0769%;
  363. }
  364. .entry-content blockquote:not(.alignright):not(.alignleft),
  365. .entry-summary blockquote,
  366. .comment-content blockquote {
  367. margin-right: -1.473684211em;
  368. margin-left: auto;
  369. }
  370. .entry-content blockquote blockquote:not(.alignright):not(.alignleft),
  371. .entry-summary blockquote blockquote,
  372. .comment-content blockquote blockquote {
  373. margin-right: 0;
  374. margin-left: auto;
  375. }
  376. .entry-content ul,
  377. .entry-summary ul,
  378. .comment-content ul,
  379. .entry-content ol,
  380. .entry-summary ol,
  381. .comment-content ol {
  382. margin-right: 0;
  383. margin-left: auto;
  384. }
  385. .entry-content li > ul,
  386. .entry-summary li > ul,
  387. .comment-content li > ul,
  388. .entry-content blockquote > ul,
  389. .entry-summary blockquote > ul,
  390. .comment-content blockquote > ul {
  391. margin-right: 1.25em;
  392. margin-left: auto;
  393. }
  394. .entry-content li > ol,
  395. .entry-summary li > ol,
  396. .comment-content li > ol,
  397. .entry-content blockquote > ol,
  398. .entry-summary blockquote > ol,
  399. .comment-content blockquote > ol {
  400. margin-right: 1.5em;
  401. margin-left: auto;
  402. }
  403. .comment-list .children > li {
  404. padding-right: 1.75em;
  405. padding-left: 0;
  406. }
  407. .sidebar,
  408. .widecolumn {
  409. padding-right: 7.6923%;
  410. padding-left: 23.0769%;
  411. }
  412. body:not(.search-results) .entry-summary li > ul,
  413. body:not(.search-results) .entry-summary blockquote > ul {
  414. margin-right: 1.157894737em;
  415. margin-left: auto;
  416. }
  417. body:not(.search-results) .entry-summary li > ol,
  418. body:not(.search-results) .entry-summary blockquote > ol {
  419. margin-right: 1.473684211em;
  420. margin-left: auto;
  421. }
  422. }
  423. /**
  424. * 10.2 - >= 910px
  425. */
  426. @media screen and (min-width: 56.875em) {
  427. .main-navigation li {
  428. float: right;
  429. }
  430. .main-navigation ul ul {
  431. left: auto;
  432. margin: 0;
  433. right: -999em;
  434. }
  435. .main-navigation ul ul ul {
  436. left: auto;
  437. right: -999em;
  438. }
  439. .main-navigation ul ul li:hover > ul,
  440. .main-navigation ul ul li.focus > ul {
  441. left: auto;
  442. right: 100%;
  443. }
  444. .main-navigation ul ul:before {
  445. left: auto;
  446. right: 7px;
  447. }
  448. .main-navigation ul ul:after {
  449. left: auto;
  450. right: 9px;
  451. }
  452. .main-navigation li:hover > ul,
  453. .main-navigation li.focus > ul {
  454. right: auto;
  455. }
  456. .main-navigation .menu-item-has-children > a {
  457. margin: 0;
  458. padding-right: 0.875em;
  459. padding-left: 2.25em;
  460. }
  461. .main-navigation .menu-item-has-children > a:after {
  462. left: 0.625em;
  463. right: auto;
  464. }
  465. .main-navigation ul ul .menu-item-has-children > a {
  466. padding-right: 0.875em;
  467. padding-left: 2.0625em;
  468. }
  469. .main-navigation ul ul .menu-item-has-children > a:after {
  470. left: 0.5625em;
  471. right: auto;
  472. -webkit-transform: rotate(90deg);
  473. -moz-transform: rotate(90deg);
  474. -ms-transform: rotate(90deg);
  475. transform: rotate(90deg);
  476. }
  477. .content-area {
  478. float: right;
  479. margin-right: auto;
  480. margin-left: -100%;
  481. }
  482. .entry-header,
  483. .post-thumbnail,
  484. .entry-content,
  485. .entry-summary,
  486. .entry-footer,
  487. .comments-area,
  488. .image-navigation,
  489. .post-navigation,
  490. .pagination,
  491. .page-header,
  492. .page-content,
  493. .content-bottom-widgets {
  494. margin-right: 0;
  495. margin-left: 0;
  496. }
  497. .sidebar {
  498. float: right;
  499. margin-right: 75%;
  500. margin-left: auto;
  501. padding: 0;
  502. }
  503. .widget blockquote {
  504. padding-right: 1.0625em;
  505. padding-left: 0;
  506. }
  507. .widget .alignright {
  508. margin: 0.2307692308em 0 1.6153846154em 1.6153846154em;
  509. }
  510. .widget .alignleft {
  511. margin: 0.2307692308em 1.6153846154em 1.6153846154em 0;
  512. }
  513. .tagcloud a {
  514. margin: 0 0 0.5384615385em 0.2307692308em;
  515. }
  516. .content-bottom-widgets .widget-area:nth-child(1):nth-last-child(2),
  517. .content-bottom-widgets .widget-area:nth-child(2):nth-last-child(1) {
  518. float: right;
  519. margin-right: auto;
  520. margin-left: 7.1428571%;
  521. }
  522. .content-bottom-widgets .widget-area:nth-child(2):nth-last-child(1):last-of-type {
  523. margin-right: auto;
  524. margin-left: 0;
  525. }
  526. .site-info {
  527. margin: 0.538461538em 0 0.538461538em auto;
  528. }
  529. .no-sidebar .entry-header,
  530. .no-sidebar .entry-content,
  531. .no-sidebar .entry-summary,
  532. .no-sidebar .entry-footer,
  533. .no-sidebar .comments-area,
  534. .no-sidebar .image-navigation,
  535. .no-sidebar .post-navigation,
  536. .no-sidebar .pagination,
  537. .no-sidebar .page-header,
  538. .no-sidebar .page-content,
  539. .no-sidebar .content-bottom-widgets {
  540. margin-right: 15%;
  541. margin-left: 15%;
  542. }
  543. .no-sidebar .post-thumbnail {
  544. margin-right: 0;
  545. margin-left: 0;
  546. }
  547. .widecolumn {
  548. padding-right: 15%;
  549. padding-left: 15%;
  550. }
  551. }
  552. /**
  553. * 10.3 - >= 985px
  554. */
  555. @media screen and (min-width: 61.5625em) {
  556. body:not(.search-results) article:not(.type-page) .entry-content {
  557. float: left;
  558. }
  559. body:not(.search-results) article:not(.type-page) .entry-content > blockquote.alignleft.below-entry-meta {
  560. margin-right: 1.473684211em;
  561. margin-left: 0;
  562. width: -webkit-calc(50% - 0.736842105em);
  563. width: calc(50% - 0.736842105em);;
  564. }
  565. body:not(.search-results) article:not(.type-page) .entry-content > blockquote.alignright.below-entry-meta {
  566. margin-right: -40%;
  567. margin-left: 1.473684211em;
  568. width: -webkit-calc(60% - 1.4736842105em);
  569. width: calc(60% - 1.4736842105em);
  570. }
  571. body:not(.search-results) article:not(.type-page) img.below-entry-meta,
  572. body:not(.search-results) article:not(.type-page) figure.below-entry-meta {
  573. margin-right: -40%;
  574. margin-left: 0;
  575. }
  576. body:not(.search-results) article:not(.type-page) .entry-footer {
  577. float: right;
  578. }
  579. body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content {
  580. float: right;
  581. margin-right: 34.99999999%;
  582. margin-left: -100%;
  583. }
  584. body.no-sidebar:not(.search-results) article:not(.type-page) .entry-footer {
  585. margin-right: 15%;
  586. margin-left: -100%;
  587. }
  588. }
  589. /**
  590. * 10.4 - >= 1200px
  591. */
  592. @media screen and (min-width: 75em) {
  593. body:not(.search-results) .entry-summary li > ul,
  594. body:not(.search-results) .entry-summary blockquote > ul {
  595. margin-right: 0.956521739em;
  596. margin-left: auto;
  597. }
  598. body:not(.search-results) .entry-summary li > ol,
  599. body:not(.search-results) .entry-summary blockquote > ol {
  600. margin-right: 1.52173913em;
  601. margin-left: auto;
  602. }
  603. body:not(.search-results) .entry-summary blockquote {
  604. padding-right: 1.347826087em;
  605. padding-left: 0;
  606. }
  607. body:not(.search-results) .entry-summary blockquote:not(.alignright):not(.alignleft) {
  608. margin-right: -1.52173913em;
  609. margin-left: auto;
  610. }
  611. body:not(.search-results) .entry-summary blockquote blockquote:not(.alignright):not(.alignleft) {
  612. margin-right: 0;
  613. margin-left: auto;
  614. }
  615. body:not(.search-results) .entry-summary .alignright {
  616. margin: 0.2608695652em 0 1.5217391304em 1.5217391304em;
  617. }
  618. body:not(.search-results) .entry-summary .alignleft {
  619. margin: 0.2608695652em 1.5217391304em 1.5217391304em 0;
  620. }
  621. }