rtl.css 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
  1. /*
  2. Theme Name: Twenty Seventeen
  3. Adding support for languages 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. /* Reset */
  9. body {
  10. direction: rtl;
  11. unicode-bidi: embed;
  12. }
  13. th {
  14. text-align: right;
  15. }
  16. /* Accessibility */
  17. .screen-reader-text:focus {
  18. left: auto;
  19. right: 5px;
  20. }
  21. /* Typography */
  22. textarea {
  23. padding-right: 3px;
  24. }
  25. li > ul,
  26. li > ol {
  27. margin-left: 0;
  28. margin-right: 1.5em;
  29. }
  30. th:first-child,
  31. td:first-child {
  32. padding-left: 0.4em;
  33. padding-right: 0;
  34. }
  35. th:last-child,
  36. td:last-child {
  37. padding-left: 0;
  38. padding-right: 0.4em;
  39. }
  40. /* Forms */
  41. input[type="radio"],
  42. input[type="checkbox"] {
  43. margin-left: 0.5em;
  44. margin-right: 0;
  45. }
  46. /* Media */
  47. .mejs-offscreen {
  48. right: -10000px;
  49. }
  50. /* Site Branding */
  51. .custom-logo-link {
  52. padding-left: 1em;
  53. padding-right: 0;
  54. }
  55. /* Main Navigation */
  56. .main-navigation ul {
  57. text-align: right;
  58. }
  59. .main-navigation ul ul {
  60. padding-left: 0;
  61. padding-right: 1.5em;
  62. }
  63. .menu-toggle .icon {
  64. margin-left: 0.5em;
  65. margin-right: 0;
  66. }
  67. .dropdown-toggle {
  68. left: -0.5em;
  69. right: auto;
  70. }
  71. /* Front Page */
  72. .wp-custom-header-video-button {
  73. left: 30px;
  74. right: auto;
  75. }
  76. .twentyseventeen-panel .recent-posts .entry-header .edit-link {
  77. margin-left: 0;
  78. margin-right: 1em;
  79. }
  80. /* Blog, Archive, Search */
  81. .blog .entry-meta a.post-edit-link,
  82. .archive .entry-meta a.post-edit-link,
  83. .search .entry-meta a.post-edit-link {
  84. margin-left: 0;
  85. margin-right: 1em;
  86. }
  87. .search .page .entry-meta a.post-edit-link {
  88. margin-right: 0;
  89. }
  90. .sticky .icon-thumb-tack {
  91. left: auto;
  92. right: -1.5em;
  93. }
  94. .prev.page-numbers .icon,
  95. .next.page-numbers .icon {
  96. display: inline-block;
  97. -ms-transform: rotate(180deg); /* IE 9 */
  98. -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  99. transform: rotate(180deg);
  100. }
  101. .prev.page-numbers {
  102. float: right;
  103. }
  104. .next.page-numbers {
  105. float: left;
  106. }
  107. .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
  108. margin-left: 0.5em;
  109. margin-right: 0;
  110. }
  111. .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
  112. margin-left: 0;
  113. margin-right: 0.5em;
  114. }
  115. /* Blog Entries */
  116. .entry-footer .cat-links,
  117. .entry-footer .tags-links {
  118. padding-left: 0;
  119. padding-right: 2.5em;
  120. }
  121. .entry-footer .cat-links .icon,
  122. .entry-footer .tags-links .icon {
  123. left: auto;
  124. margin-left: 0.5em;
  125. margin-right: 0;
  126. right: 0;
  127. }
  128. /* Comments */
  129. .comment-body {
  130. margin-left: 0;
  131. margin-right: 65px;
  132. }
  133. .comment-reply-link .icon {
  134. left: auto;
  135. right: -2em;
  136. -webkit-transform: scale(-1, 1);
  137. -ms-transform: scale(-1, 1);
  138. transform: scale(-1, 1);
  139. }
  140. .comment-author .avatar {
  141. left: auto;
  142. right: -65px;
  143. }
  144. .comment-reply-link:before {
  145. left: auto;
  146. right: -2em;
  147. }
  148. .children .comment-author .avatar {
  149. left: auto;
  150. right: -45px;
  151. }
  152. .form-submit {
  153. text-align: left;
  154. }
  155. .comment-form #wp-comment-cookies-consent {
  156. margin: 0 0 0 10px;
  157. }
  158. /* Post Formats */
  159. .format-quote blockquote .icon {
  160. left: auto;
  161. right: -1.25em;
  162. -webkit-transform: none;
  163. -ms-transform: none;
  164. transform: none;
  165. }
  166. /* Post Navigation */
  167. .nav-links .nav-previous .nav-title .nav-title-icon-wrapper,
  168. .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
  169. display: inline-block;
  170. -ms-transform: rotate(180deg); /* IE 9 */
  171. -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  172. transform: rotate(180deg);
  173. }
  174. /* Widgets */
  175. .widget ul {
  176. margin: 0;
  177. }
  178. .search-form .search-submit {
  179. left: 3px;
  180. right: auto;
  181. }
  182. .tagcloud ul li {
  183. float: right;
  184. margin: 4px 0 0 4px;
  185. }
  186. .widget ul li li {
  187. padding-left: 0;
  188. padding-right: 1.5rem;
  189. }
  190. .widget_text ul {
  191. margin: 0 1.5em 1.5em 0;
  192. }
  193. .widget_text ul li ul {
  194. margin: 0 1.5em 0 0;
  195. }
  196. /* Footer */
  197. .social-navigation a {
  198. margin-left: 1em;
  199. margin-right: 0;
  200. }
  201. /* Customizer styles */
  202. .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
  203. left: 3.2em;
  204. right: auto;
  205. }
  206. /* Gallery Styles */
  207. .gallery-item,
  208. .gallery-caption {
  209. text-align: right;
  210. }
  211. /* SVG Fallback */
  212. .no-svg .dropdown-toggle {
  213. left: 0;
  214. right: auto;
  215. }
  216. /* Media queries */
  217. @media screen and (min-width: 48em) {
  218. body.page-template-full-width-page #primary {
  219. float: none;
  220. }
  221. .has-sidebar:not(.error404) #primary {
  222. float: right;
  223. }
  224. .has-sidebar #secondary {
  225. float: left;
  226. }
  227. .error404 #primary {
  228. float: none;
  229. }
  230. /* Site Branding */
  231. .custom-logo-link {
  232. padding-left: 2em;
  233. padding-right: 0;
  234. }
  235. /* Navigation */
  236. .main-navigation ul ul {
  237. padding-right: 0;
  238. }
  239. .main-navigation ul ul:before,
  240. .main-navigation ul ul:after {
  241. left: 0.5em;
  242. right: auto;
  243. }
  244. .main-navigation ul ul,
  245. .main-navigation ul ul ul {
  246. left: auto;
  247. right: -999em;
  248. }
  249. .main-navigation ul ul li:hover > ul,
  250. .main-navigation ul ul li.focus > ul {
  251. left: auto;
  252. right: 100%;
  253. }
  254. .main-navigation ul li:hover > ul,
  255. .main-navigation ul li.focus > ul {
  256. left: auto;
  257. right: 0.5em;
  258. }
  259. .main-navigation ul li.menu-item-has-children:before,
  260. .main-navigation ul li.menu-item-has-children:after,
  261. .main-navigation ul li.page_item_has_children:before,
  262. .main-navigation ul li.page_item_has_children:after {
  263. left: 1em;
  264. right: auto;
  265. }
  266. .main-navigation .menu-item-has-children > a > .icon,
  267. .main-navigation .page_item_has_children > a > .icon {
  268. left: auto;
  269. right: 5px;
  270. }
  271. .main-navigation ul ul .menu-item-has-children > a > .icon,
  272. .main-navigation ul ul .page_item_has_children > a > .icon {
  273. left: 1em;
  274. right: auto;
  275. -webkit-transform: rotate(90deg);
  276. -ms-transform: rotate(90deg);
  277. transform: rotate(90deg);
  278. }
  279. /* Scroll down arrow */
  280. .navigation-top .menu-scroll-down {
  281. left: 0;
  282. right: auto;
  283. }
  284. .site-header .menu-scroll-down {
  285. left: 0;
  286. right: auto;
  287. }
  288. .entry-title a {
  289. margin-left: auto;
  290. margin-right: -2px;
  291. }
  292. /* Front Page */
  293. .page-two-column .panel-content .entry-header {
  294. float: right;
  295. }
  296. .page-two-column .panel-content .entry-content {
  297. float: left;
  298. }
  299. /* Front Page - Recent Posts */
  300. .page-two-column .panel-content .recent-posts {
  301. clear: left;
  302. float: left;
  303. }
  304. /* Blog, Archive, Search */
  305. .sticky .icon-thumb-tack {
  306. left: auto;
  307. right: -2.5em;
  308. }
  309. body:not(.has-sidebar):not(.page-one-column) .page-header,
  310. body.has-sidebar.error404 #primary .page-header,
  311. body.page-two-column:not(.archive) #primary .entry-header,
  312. body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
  313. float: right;
  314. }
  315. .blog:not(.has-sidebar) #primary article,
  316. .archive:not(.has-sidebar):not(.page-one-column) #primary article,
  317. .search:not(.has-sidebar) #primary article,
  318. .has-sidebar.error404 #primary .page-content,
  319. .error404.has-sidebar #primary .page-content,
  320. body.page-two-column:not(.archive) #primary .entry-content,
  321. body.page-two-column #comments {
  322. float: left;
  323. }
  324. .entry-footer .edit-link a.post-edit-link {
  325. margin-left: 0;
  326. margin-right: 1em;
  327. }
  328. /* Entry content */
  329. /* with sidebar */
  330. .has-sidebar .entry-content blockquote.alignleft {
  331. margin-left: 0;
  332. width: 34%;
  333. }
  334. .has-sidebar #primary .entry-content blockquote.alignright,
  335. .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
  336. margin-right: 0;
  337. width: 34%;
  338. }
  339. .has-sidebar #primary .entry-content blockquote.alignleft.below-entry-meta {
  340. margin-left: -72.5%;
  341. width: 62%;
  342. }
  343. /* blog index and archive */
  344. .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
  345. .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
  346. .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
  347. .page-two-column .entry-content blockquote.alignleft {
  348. margin-left: 0;
  349. width: 34%;
  350. }
  351. .blog:not(.has-sidebar) .entry-content blockquote.alignright,
  352. .twentyseventeen-front-page.page-two-column #primary .entry-content blockquote.alignright,
  353. .archive:not(.has-sidebar) .entry-content blockquote.alignright,
  354. .page-two-column #primary .entry-content blockquote.alignright {
  355. margin-right: -72.5%;
  356. width: 62%;
  357. }
  358. /* Post formats */
  359. .format-quote blockquote .icon {
  360. left: auto;
  361. right: -1.5em;
  362. }
  363. .navigation.pagination {
  364. float: left;
  365. }
  366. .has-sidebar .navigation.pagination,
  367. .archive.page-one-column:not(.has-sidebar) .navigation.pagination {
  368. float: none;
  369. }
  370. .post-navigation .nav-previous {
  371. float: right;
  372. }
  373. .post-navigation .nav-next {
  374. float: left;
  375. text-align: left;
  376. }
  377. /* Comments */
  378. ol.children .children {
  379. padding-left: 0;
  380. padding-right: 2em;
  381. }
  382. /* Post Navigation */
  383. .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
  384. left: auto;
  385. right: -2em;
  386. }
  387. .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
  388. left: -2em;
  389. right: auto;
  390. }
  391. /* Footer */
  392. .site-footer .widget-column.footer-widget-1 {
  393. float: right;
  394. }
  395. .site-footer .widget-column.footer-widget-2 {
  396. float: left;
  397. }
  398. .social-navigation {
  399. clear: right;
  400. float: right;
  401. }
  402. .site-info {
  403. float: right;
  404. }
  405. .social-navigation + .site-info {
  406. margin-left: 0;
  407. margin-right: 6%;
  408. }
  409. }
  410. @media screen and (min-width: 67em) {
  411. /* Sticky posts */
  412. .sticky .icon-thumb-tack {
  413. left: auto;
  414. right: -1.25em;
  415. }
  416. }
  417. @media screen and (min-width: 79em) {
  418. .has-sidebar #primary .entry-content blockquote.alignright,
  419. .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
  420. margin-right: -20%;
  421. }
  422. .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
  423. .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
  424. .page-two-column .entry-content blockquote.alignleft,
  425. .twentyseventeen-front-page .entry-content blockquote.alignleft {
  426. margin-left: -20%;
  427. }
  428. }