rtl.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  1. /*--------------------------------------------------------------
  2. # Accessibility
  3. --------------------------------------------------------------*/
  4. /* Text meant only for screen readers. */
  5. .screen-reader-text:focus {
  6. right: 5px;
  7. left: auto;
  8. }
  9. /* Do not show the outline on the skip link target. */
  10. /*--------------------------------------------------------------
  11. # Alignments
  12. --------------------------------------------------------------*/
  13. .alignright {
  14. float: right;
  15. margin: 0.4em 0 0.4em 1.6em;
  16. }
  17. .alignleft {
  18. float: left;
  19. margin: 0.4em 1.6em 0.4em 0;
  20. }
  21. .aligncenter {
  22. margin-right: auto;
  23. margin-left: auto;
  24. }
  25. /*--------------------------------------------------------------
  26. # Typography
  27. --------------------------------------------------------------*/
  28. blockquote blockquote {
  29. padding-right: .8em;
  30. padding-left: 0;
  31. }
  32. blockquote cite {
  33. text-align: left;
  34. }
  35. /*--------------------------------------------------------------
  36. # Forms
  37. --------------------------------------------------------------*/
  38. textarea {
  39. padding-right: .4em;
  40. padding-left: 0;
  41. }
  42. /* Jetpack Comment Form */
  43. form.contact-form input {
  44. direction: rtl;
  45. }
  46. .contact-form label.text,
  47. .contact-form label.email,
  48. .contact-form label.name,
  49. .contact-form label.url,
  50. .contact-form label.textarea {
  51. right: .8em;
  52. left: auto;
  53. }
  54. .contact-form input[type="text"],
  55. .contact-form input[type="email"],
  56. .contact-form input[type="url"],
  57. .contact-form input[type="name"],
  58. .contact-form textarea {
  59. margin-right: auto;
  60. margin-left: auto;
  61. padding-right: 28%;
  62. padding-left: .5em;
  63. }
  64. /*--------------------------------------------------------------
  65. # Forms
  66. --------------------------------------------------------------*/
  67. .button,
  68. button,
  69. #infinite-handle span,
  70. input[type="button"],
  71. input[type="reset"],
  72. input[type="submit"] {
  73. margin-left: .8em;
  74. right: 4px;
  75. left: auto;
  76. margin-right: auto;
  77. }
  78. /*--------------------------------------------------------------
  79. # Lists
  80. --------------------------------------------------------------*/
  81. ul, ol {
  82. margin: 0 3.2em 1.6em 0;
  83. padding-right: 0;
  84. padding-left: 0;
  85. }
  86. li > ul,
  87. li > ol {
  88. margin-right: 1.6em;
  89. padding-right: 0;
  90. padding-left: 0;
  91. margin-left: auto;
  92. }
  93. /*--------------------------------------------------------------
  94. # Tables
  95. --------------------------------------------------------------*/
  96. th {
  97. text-align: right;
  98. }
  99. /*--------------------------------------------------------------
  100. ## Posts
  101. --------------------------------------------------------------*/
  102. .site-header .entry-title {
  103. right: 50%;
  104. left: auto;
  105. transform: translate(50%, -50%);
  106. }
  107. .entry-meta {
  108. clear: right;
  109. }
  110. .featured-image a:before {
  111. right: 0;
  112. left: auto;
  113. }
  114. /*--------------------------------------------------------------
  115. ## Front Page
  116. --------------------------------------------------------------*/
  117. .custom-header-image {
  118. background-position: top right;
  119. }
  120. .affinity-front-page .edit-link {
  121. margin-right: auto;
  122. margin-left: auto;
  123. }
  124. .panel-navigation {
  125. left: 1.6em;
  126. right: auto;
  127. }
  128. .panel-navigation a .hidden,
  129. .panel-navigation a:visited .hidden {
  130. padding: 0.8em 0.8em 0.8em 3.2em;
  131. transform: translateX(-6em);
  132. }
  133. .panel-navigation a:hover .hidden, .panel-navigation a:active .hidden, .panel-navigation a:focus .hidden,
  134. .panel-navigation a:visited:hover .hidden,
  135. .panel-navigation a:visited:active .hidden,
  136. .panel-navigation a:visited:focus .hidden {
  137. left: 100%;
  138. right: auto;
  139. transform: translateX(-2.4em);
  140. }
  141. /*--------------------------------------------------------------
  142. ## Site Header
  143. --------------------------------------------------------------*/
  144. .site-title {
  145. right: 1.6em;
  146. left: auto;
  147. margin: 0 0 0 30%;
  148. }
  149. /*--------------------------------------------------------------
  150. # Navigation
  151. --------------------------------------------------------------*/
  152. .main-navigation ul ul a {
  153. padding-right: 1.6em;
  154. padding-left: 0;
  155. }
  156. .main-navigation ul ul ul a {
  157. padding-right: 3.2em;
  158. padding-left: 0;
  159. }
  160. .main-navigation ul ul ul ul a {
  161. padding-right: 4.8em;
  162. padding-left: 0;
  163. }
  164. .main-navigation ul ul ul ul ul a {
  165. padding-right: 6.4em;
  166. padding-left: 0;
  167. }
  168. /* Small menu. */
  169. .menu-toggle {
  170. right: 100%;
  171. left: auto;
  172. transform: translateX(100%) translateX(0.9em);
  173. }
  174. .comment-navigation .nav-next,
  175. .posts-navigation .nav-next,
  176. .post-navigation .nav-next {
  177. text-align: left;
  178. }
  179. /*--------------------------------------------------------------
  180. # Comments
  181. --------------------------------------------------------------*/
  182. .comments-title a,
  183. .comments-title a:visited,
  184. .comment-reply-title a,
  185. .comment-reply-title a:visited {
  186. float: left;
  187. }
  188. .comment-author .avatar {
  189. float: right;
  190. margin-left: 1.6em;
  191. margin-right: auto;
  192. }
  193. .comment-metadata .edit-link:before {
  194. margin-right: .4em;
  195. margin-left: .8em;
  196. }
  197. .pingback .edit-link,
  198. .trackback .edit-link {
  199. float: left;
  200. }
  201. .comment-form-author label,
  202. .comment-form-email label,
  203. .comment-form-url label,
  204. .comment-form-comment label {
  205. right: 0;
  206. left: auto;
  207. }
  208. .comment-form-author input,
  209. .comment-form-author textarea,
  210. .comment-form-email input,
  211. .comment-form-email textarea,
  212. .comment-form-url input,
  213. .comment-form-url textarea,
  214. .comment-form-comment input,
  215. .comment-form-comment textarea {
  216. padding-right: 6.4em;
  217. padding-left: 0;
  218. }
  219. /*--------------------------------------------------------------
  220. 17.10 Guestbook Template
  221. --------------------------------------------------------------*/
  222. .page-template-guestbook .comments-area .comment {
  223. float: right;
  224. }
  225. .page-template-guestbook .comments-area .comment:nth-of-type(2n) {
  226. margin-left: 0;
  227. margin-right: auto;
  228. }
  229. .page-template-guestbook .content-area .hentry,
  230. .page-template-guestbook .comment-respond {
  231. margin-right: auto;
  232. margin-left: auto;
  233. }
  234. .page-template-guestbook .comment-author .avatar {
  235. float: right;
  236. margin-left: .8em;
  237. margin-right: auto;
  238. }
  239. .page-template-guestbook .comment-edit-link:before {
  240. margin-right: .4em;
  241. margin-left: .8em;
  242. }
  243. /*--------------------------------------------------------------
  244. # Widgets
  245. --------------------------------------------------------------*/
  246. .footer-widgets .widget-area {
  247. float: right;
  248. }
  249. /* Specific widgets */
  250. .widget_calendar td#next {
  251. text-align: left;
  252. }
  253. .widget_calendar td#prev {
  254. text-align: right;
  255. }
  256. /*--------------------------------------------------------------
  257. # Infinite scroll
  258. --------------------------------------------------------------*/
  259. /* Globally hidden elements when Infinite Scroll is supported and in use. */
  260. /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
  261. #infinite-handle span {
  262. right: 50%;
  263. left: auto;
  264. transform: translateX(50%);
  265. }
  266. .infinite-loader .spinner {
  267. margin: 0 auto;
  268. right: 50%;
  269. left: auto;
  270. transform: translateX(50%);
  271. }
  272. /*--------------------------------------------------------------
  273. # Media
  274. --------------------------------------------------------------*/
  275. /* Make sure embeds and iframes fit their containers. */
  276. .wp-caption img[class*="wp-image-"] {
  277. margin-right: auto;
  278. margin-left: auto;
  279. }
  280. /*--------------------------------------------------------------
  281. # Customizer
  282. --------------------------------------------------------------*/
  283. /* Hide this until we're in the Customizer */
  284. .affinity-customizer.affinity-front-page .affinity-panel::after {
  285. right: 1.6em;
  286. left: 1.6em;
  287. }
  288. .affinity-customizer.affinity-front-page .affinity-panel .affinity-panel-title {
  289. left: 3.2em;
  290. right: auto;
  291. transform: translate(-3px, -3px);
  292. }
  293. /*--------------------------------------------------------------
  294. # Media Queries
  295. --------------------------------------------------------------*/
  296. @media screen and (min-width: 46em) {
  297. .affinity-front-page .custom-header .entry-title {
  298. right: 50%;
  299. left: auto;
  300. transform: translate(50%, -50%);
  301. }
  302. .affinity-front-page .edit-link a,
  303. .affinity-front-page .edit-link a:visited {
  304. right: 1.6em;
  305. left: auto;
  306. }
  307. .affinity-front-page .hentry:first-of-type .edit-link a,
  308. .affinity-front-page .hentry:first-of-type .edit-link a:visited {
  309. right: auto;
  310. left: auto;
  311. }
  312. .affinity-front-page .no-featured-image .entry-title {
  313. right: auto;
  314. left: auto;
  315. transform: none;
  316. }
  317. .affinity-front-page .no-featured-image .edit-link a,
  318. .affinity-front-page .no-featured-image .edit-link a:visited {
  319. right: auto;
  320. left: auto;
  321. }
  322. .entry-title {
  323. text-align: right;
  324. }
  325. .header-wrapper {
  326. right: 0;
  327. padding-right: 1.6em;
  328. padding-left: 1.6em;
  329. left: auto;
  330. }
  331. .no-custom-header .site-title,
  332. .site-title {
  333. text-align: right;
  334. right: auto;
  335. left: auto;
  336. }
  337. .site-description-wrapper {
  338. right: 50%;
  339. left: auto;
  340. transform: translate(50%, -50%);
  341. }
  342. .site-branding {
  343. float: right;
  344. }
  345. .main-navigation {
  346. float: left;
  347. text-align: left;
  348. }
  349. .main-navigation.toggled > div {
  350. margin-right: auto;
  351. margin-left: auto;
  352. }
  353. .main-navigation.toggled > div > ul > li {
  354. padding-right: 0;
  355. padding-left: 0;
  356. }
  357. .main-navigation ul ul {
  358. float: right;
  359. right: -9999em;
  360. left: auto;
  361. }
  362. .main-navigation ul ul a {
  363. padding-right: inherit;
  364. padding-left: 0;
  365. }
  366. .main-navigation ul ul:before {
  367. border-right: 14px solid transparent;
  368. border-left: 14px solid transparent;
  369. right: 50%;
  370. left: auto;
  371. transform: translateX(50%);
  372. }
  373. .main-navigation ul ul:after {
  374. right: 0;
  375. left: auto;
  376. }
  377. .main-navigation ul ul ul {
  378. right: -999em;
  379. left: auto;
  380. }
  381. .main-navigation ul ul ul a {
  382. padding-right: inherit;
  383. padding-left: 0;
  384. }
  385. .main-navigation ul ul li {
  386. margin-right: 0;
  387. margin-left: auto;
  388. }
  389. .main-navigation ul ul li:hover > ul,
  390. .main-navigation ul ul li.focus > ul {
  391. right: 100%;
  392. left: auto;
  393. }
  394. .main-navigation ul ul li:hover > ul,
  395. .main-navigation ul ul li.focus > ul {
  396. right: 100%;
  397. left: auto;
  398. }
  399. .main-navigation ul li:hover > ul,
  400. .main-navigation ul li.focus > ul {
  401. right: 50%;
  402. left: auto;
  403. transform: translateX(0.75em) translateX(50%);
  404. }
  405. .main-navigation li {
  406. margin-right: 0.8em;
  407. margin-left: auto;
  408. }
  409. .main-navigation li a:after {
  410. margin-right: 1em;
  411. margin-left: auto;
  412. }
  413. .main-navigation li.menu-item-has-children > a,
  414. .main-navigation li.page_item_has_children > a {
  415. padding-left: 1.6em;
  416. padding-right: 0;
  417. }
  418. .main-navigation li.menu-item-has-children > a:before,
  419. .main-navigation li.page_item_has_children > a:before {
  420. left: 1.4em;
  421. right: auto;
  422. }
  423. .main-navigation li.menu-item-has-children > a:after,
  424. .main-navigation li.page_item_has_children > a:after {
  425. right: 1.6em;
  426. left: auto;
  427. }
  428. .main-navigation li.menu-item-has-children:last-of-type > a:before,
  429. .main-navigation li.page_item_has_children:last-of-type > a:before {
  430. left: -.1em;
  431. right: auto;
  432. }
  433. .main-navigation ul ul li.menu-item-has-children > a:after,
  434. .main-navigation ul ul li.page_item_has_children > a:after {
  435. margin: 0 0.4em 0 0;
  436. transform: rotate(90deg);
  437. }
  438. .header-wrapper {
  439. right: 0;
  440. left: auto;
  441. }
  442. }
  443. @media screen and (min-width: 58em) {
  444. .content-area {
  445. float: right;
  446. margin: 0 0 0 -25%;
  447. }
  448. .site-main {
  449. margin: 0 0 0 30%;
  450. }
  451. .affinity-front-page .site-content .entry-header,
  452. .affinity-front-page .site-content .entry-content,
  453. .affinity-front-page .site-content .entry-footer {
  454. margin-right: auto;
  455. margin-left: auto;
  456. }
  457. .site-content .widget-area {
  458. float: left;
  459. }
  460. .comment-author .avatar {
  461. margin-left: 0;
  462. margin-right: auto;
  463. }
  464. .entry-meta,
  465. .comment-meta {
  466. border-left: 1px solid #e8e9ea;
  467. padding-left: .8em;
  468. float: right;
  469. padding-right: 0;
  470. border-right: none;
  471. }
  472. .entry-content,
  473. .search-results .entry-summary,
  474. .entry-footer,
  475. .comment-content,
  476. .reply {
  477. float: left;
  478. }
  479. .comment-navigation .nav-previous,
  480. .posts-navigation .nav-previous,
  481. .post-navigation .nav-previous {
  482. float: right;
  483. }
  484. .comment-navigation .nav-next,
  485. .posts-navigation .nav-next,
  486. .post-navigation .nav-next {
  487. float: left;
  488. text-align: left;
  489. }
  490. .footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(2),
  491. .footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(1) {
  492. margin-left: 6%;
  493. margin-right: auto;
  494. }
  495. .footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(2):last-of-type,
  496. .footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(1):last-of-type {
  497. margin-left: 0;
  498. margin-right: auto;
  499. }
  500. .footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(3),
  501. .footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(2),
  502. .footer-widgets .widget-areas .widget-area:nth-child(3):nth-last-child(1) {
  503. margin-left: 5%;
  504. margin-right: auto;
  505. }
  506. .footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(3):last-of-type,
  507. .footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(2):last-of-type,
  508. .footer-widgets .widget-areas .widget-area:nth-child(3):nth-last-child(1):last-of-type {
  509. margin-left: 0;
  510. margin-right: auto;
  511. }
  512. }
  513. @media screen and (min-width: 68em) {
  514. blockquote.alignright.below-entry-meta {
  515. margin-right: -7.2em;
  516. margin-left: 1.6em;
  517. }
  518. blockquote.alignleft.below-sidebar {
  519. margin-left: -7.2em;
  520. margin-right: 1.6em;
  521. }
  522. img.alignright.below-entry-meta {
  523. margin-right: -7.2em;
  524. margin-left: 1.6em;
  525. }
  526. img.alignleft.below-sidebar {
  527. margin-left: -7.2em;
  528. margin-right: 1.6em;
  529. }
  530. .wp-caption.alignright.below-entry-meta .wp-caption-text {
  531. transform: translateX(100%) translateX(1.6em);
  532. text-align: left;
  533. }
  534. .wp-caption.alignleft.below-sidebar .wp-caption-text {
  535. left: 0;
  536. text-align: right;
  537. right: auto;
  538. transform: translateX(-100%) translateX(-1.6em);
  539. }
  540. }