rtl.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. Theme Name: Pique
  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. http://codex.wordpress.org/Right_to_Left_Language_Support
  7. */
  8. body {
  9. direction: rtl;
  10. unicode-bidi: embed;
  11. }
  12. /* Swap around menu elements */
  13. .main-navigation ul ul {
  14. text-align: right;
  15. }
  16. /* Hide stuff to the right, rather than left */
  17. .main-navigation ul ul{
  18. left: auto;
  19. right: -999em;
  20. }
  21. .main-navigation li.focus > ul {
  22. left: auto;
  23. right: 0;
  24. }
  25. .comment-navigation .nav-previous span::before,
  26. .posts-navigation .nav-previous span::before,
  27. .post-navigation .nav-previous span::before {
  28. content: "\2192";
  29. }
  30. .comment-navigation .nav-next span::after,
  31. .posts-navigation .nav-next span::after,
  32. .post-navigation .nav-next span::after {
  33. content: "\2190";
  34. }
  35. /* Adjust teeny menu */
  36. @media (max-width: 767px) {
  37. .main-navigation a {
  38. padding-right: 10px;
  39. padding-left: 0;
  40. }
  41. .main-navigation ul ul ul {
  42. padding-left: 0;
  43. padding-right: 25px;
  44. }
  45. }
  46. /* Swap around direction of menu fly-outs */
  47. @media (min-width: 768px) {
  48. .main-navigation ul ul::before {
  49. left: auto;
  50. right: 15px;
  51. }
  52. .main-navigation ul ul::before {
  53. left: auto;
  54. right: 15px;
  55. }
  56. .main-navigation #primary-menu > li:nth-last-child(1):hover > ul,
  57. .main-navigation #primary-menu > li:nth-last-child(2):hover > ul {
  58. left: 0;
  59. right: auto;
  60. }
  61. .main-navigation #primary-menu > li:nth-last-child(1):hover ul::before,
  62. .main-navigation #primary-menu > li:nth-last-child(2):hover ul::before {
  63. left: 15px;
  64. right: auto;
  65. }
  66. .main-navigation #primary-menu > li:nth-last-child(1) li:hover ul, .main-navigation #primary-menu > li:nth-last-child(2) li:hover u {
  67. left: 103%;
  68. right: auto;
  69. }
  70. }
  71. /* Right-align content within panels */
  72. .pique-grid-three p,
  73. .overlay,
  74. label,
  75. form,
  76. .pique-panel-content .entry-content,
  77. #pique-hero .pique-panel-content .entry-content p,
  78. blockquote p,
  79. .pique-template-testimonials .pique-testimonials article .entry-content p {
  80. text-align: right;
  81. }
  82. h3,
  83. blockquote cite,
  84. .pique-template-testimonials .pique-testimonials article .entry-content cite,
  85. blockquote p, .pique-template-testimonials .pique-testimonials article .entry-content p,
  86. .widget-title {
  87. text-align: right;
  88. }
  89. .pique-template-testimonials .pique-testimonials .attachment-pique-thumbnail-avatar {
  90. float: right;
  91. margin-right: 0;
  92. margin-left: 20px;
  93. }
  94. .pique-template-testimonials .pique-testimonials h2 {
  95. float: right;
  96. text-align: right;
  97. }
  98. /* Adjust padding on post format icons */
  99. .sticky .entry-title::before {
  100. margin-left: 0.5em;
  101. margin-right: 0;
  102. }
  103. /* Swap direction of arrows in read more buttons */
  104. .archive .read-more a::after, .blog .read-more a::after, .search-results .read-more a::after {
  105. content: '\f060';
  106. }
  107. .archive .read-more a:hover, .blog .read-more a:hover, .search-results .read-more a:hover {
  108. padding-left: calc(3em - 40px);
  109. padding-right: 3em;
  110. }
  111. .archive .read-more a:hover::after, .blog .read-more a:hover::after, .search-results .read-more a:hover::after {
  112. padding-right: 20px;
  113. }
  114. /* Adjust padding on taxonomy icons */
  115. .cat-links::before, .tags-links::before {
  116. margin-left: 5px;
  117. margin-right: 0;
  118. }
  119. /* Float nav arrows */
  120. .comment-navigation .nav-previous span::before, .posts-navigation .nav-previous span::before, .post-navigation .nav-previous span::before {
  121. float: left;
  122. }
  123. .comment-navigation .nav-next span::after, .posts-navigation .nav-next span::after, .post-navigation .nav-next span::after {
  124. float: right;
  125. }
  126. /* Right-align entry meta */
  127. .entry-meta, .widget_rss .rss-date, .widget_rss cite {
  128. text-align: right;
  129. }
  130. /* Rearrange comments */
  131. .comment-author .avatar {
  132. float: right;
  133. margin-right: 0;
  134. margin-left: 0.5em;
  135. }
  136. .reply {
  137. float: left;
  138. }