rtl.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. /*
  2. Theme Name: Toujours
  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. blockquote {
  13. border-left: 0;
  14. border-right: 4px solid #f0f0f0;;
  15. padding-left: 0;
  16. padding-right: 30px;
  17. }
  18. li > ul,
  19. li > ol {
  20. margin-left: 0;
  21. margin-right: 1.5em;
  22. }
  23. th,
  24. td {
  25. text-align: right;
  26. }
  27. textarea {
  28. padding-left: 0;
  29. padding-right: 3px;
  30. }
  31. .search-form label:before {
  32. left: 0;
  33. right: auto;
  34. }
  35. .search-form .search-submit {
  36. left: 0;
  37. right: auto;
  38. }
  39. /*--------------------------------------------------------------
  40. ## Menus
  41. --------------------------------------------------------------*/
  42. .main-navigation ul {
  43. padding-right: 0;
  44. }
  45. .main-navigation .menu-item-has-children > a:after,
  46. .main-navigation .page_item_has_children > a:after {
  47. margin-left: 0;
  48. margin-right: 5px;
  49. }
  50. .main-navigation ul ul {
  51. float: right;
  52. left: auto;
  53. right: -999em;
  54. text-align: right;
  55. }
  56. .main-navigation ul ul:before {
  57. left: auto;
  58. right: 50%;
  59. margin-left: 0;
  60. margin-right: -8px;
  61. }
  62. .main-navigation ul ul .menu-item-has-children > a,
  63. .main-navigation ul ul .page_item_has_children > a {
  64. padding-left: 30px;
  65. padding-right: 15px;
  66. }
  67. .main-navigation ul ul .menu-item-has-children > a:after,
  68. .main-navigation ul ul .page_item_has_children > a:after {
  69. left: 10px;
  70. right: auto;
  71. -webkit-transform: rotate(90deg);
  72. -moz-transform: rotate(90deg);
  73. -ms-transform: rotate(90deg);
  74. transform: rotate(90deg);
  75. }
  76. .main-navigation ul ul ul {
  77. left: auto;
  78. right: -999em;
  79. }
  80. .main-navigation ul li:hover > ul,
  81. .main-navigation ul li.focus > ul {
  82. left: auto;
  83. margin-left: 0;
  84. margin-right: -120px;
  85. right: 50%;
  86. }
  87. .main-navigation ul ul li:hover > ul,
  88. .main-navigation ul ul li.focus > ul {
  89. left: auto;
  90. margin-right: 0;
  91. right: 100%;
  92. }
  93. .comment-navigation .nav-previous,
  94. .posts-navigation .nav-previous,
  95. .post-navigation .nav-previous {
  96. float: right;
  97. text-align: right;
  98. }
  99. .comment-navigation .nav-next,
  100. .posts-navigation .nav-next,
  101. .post-navigation .nav-next {
  102. float: left;
  103. text-align: left;
  104. }
  105. /*--------------------------------------------------------------
  106. # Widgets
  107. --------------------------------------------------------------*/
  108. .widget_archive ul ul,
  109. .widget_categories ul ul,
  110. .widget_links ul ul,
  111. .widget_meta ul ul,
  112. .widget_nav_menu ul ul,
  113. .widget_pages ul ul,
  114. .widget_recent_entries ul ul,
  115. .widget_rss ul ul {
  116. margin-left: 0;
  117. margin-right: 15px;
  118. }
  119. /* Widget Calendar */
  120. .widget_calendar #next {
  121. text-align: left;
  122. }
  123. .widget_calendar #prev {
  124. text-align: right;
  125. }
  126. /*--------------------------------------------------------------
  127. # Structure
  128. --------------------------------------------------------------*/
  129. #primary {
  130. float: right;
  131. }
  132. .no-sidebar #primary {
  133. float: none;
  134. }
  135. #secondary {
  136. border-left: 0;
  137. border-right: 1px solid #e1e1e1;
  138. float: left;
  139. padding-left: 0;
  140. padding-right: 30px;
  141. }
  142. /*--------------------------------------------------------------
  143. # Slideshow
  144. --------------------------------------------------------------*/
  145. .slideshow {
  146. direction: ltr;
  147. }
  148. .slideshow .slide-info {
  149. left: auto;
  150. right: 0;
  151. text-align: right;
  152. }
  153. .slideshow .slide-info:after {
  154. border: 1px solid;
  155. border-right: 0;
  156. left: 3px;
  157. right: 0;
  158. }
  159. /*--------------------------------------------------------------
  160. ## Featured Post Trio
  161. --------------------------------------------------------------*/
  162. #featured-post-trio article {
  163. float: right;
  164. margin-left: 30px;
  165. margin-right: 0;
  166. }
  167. #featured-post-trio article:last-child {
  168. margin-left: 0;
  169. }
  170. /*--------------------------------------------------------------
  171. ## Posts and pages
  172. --------------------------------------------------------------*/
  173. .featured-post {
  174. left: auto;
  175. right: -3px;
  176. }
  177. .featured-image span {
  178. float: right;
  179. }
  180. .featured-image a {
  181. float: right;
  182. }
  183. .entry-meta .comments-link {
  184. float: left;
  185. }
  186. .cat-links a:first-of-type,
  187. .tags-links a:first-of-type {
  188. margin-left: 0;
  189. margin-right: 0.25em;
  190. }
  191. .post-format-label:before {
  192. margin-left: 2px;
  193. margin-right: 0;
  194. }
  195. .nav-links .nav-previous .nav-subtitle:before {
  196. left: auto;
  197. right: -3px;
  198. }
  199. .nav-links .nav-next .nav-subtitle:after {
  200. left: -3px;
  201. right: auto;
  202. }
  203. /*--------------------------------------------------------------
  204. ## Audio
  205. --------------------------------------------------------------*/
  206. .entry-audio .mejs-container .mejs-controls,
  207. .entry-content .mejs-container.mejs-audio .mejs-controls {
  208. left: auto;
  209. right: 4%;
  210. }
  211. /*--------------------------------------------------------------
  212. ## Comments
  213. --------------------------------------------------------------*/
  214. .comment-list .children {
  215. padding-left: 0;
  216. padding-right: 45px;
  217. }
  218. .comment .avatar-container {
  219. left: auto;
  220. right: 0;
  221. }
  222. .bypostauthor .avatar-container:before {
  223. left: 0;
  224. right: auto;
  225. }
  226. .bypostauthor .avatar-container:after {
  227. left: 1px;
  228. right: auto;
  229. }
  230. .children .bypostauthor .avatar-container:after {
  231. left: 0;
  232. right: auto;
  233. }
  234. .comment-author,
  235. .comment-metadata,
  236. .comment-content,
  237. .reply,
  238. .comment-awaiting-moderation {
  239. margin-left: 0;
  240. margin-right: 110px;
  241. }
  242. .children .comment-author,
  243. .children .comment-metadata,
  244. .children .comment-content,
  245. .children .reply,
  246. .children .comment-awaiting-moderation {
  247. margin-left: 0;
  248. margin-right: 90px;
  249. }
  250. .comment-respond #reply-title small {
  251. float: left;
  252. }
  253. /*--------------------------------------------------------------
  254. ## 404 Page
  255. --------------------------------------------------------------*/
  256. .error404 #primary {
  257. float: none;
  258. }
  259. /*--------------------------------------------------------------
  260. ## Guestbook Page
  261. --------------------------------------------------------------*/
  262. .page-template-guestbook #comments .comment {
  263. float: right;
  264. }
  265. .page-template-guestbook #primary {
  266. float: none;
  267. }
  268. /*--------------------------------------------------------------
  269. # Footer
  270. --------------------------------------------------------------*/
  271. #footer-widgets .widget {
  272. float: right;
  273. }
  274. /*--------------------------------------------------------------
  275. # Infinite scroll
  276. --------------------------------------------------------------*/
  277. .infinite-loader .spinner {
  278. left: auto !important;
  279. right: 50% !important; /* !important to override inline styles */
  280. margin-left: 0;
  281. margin-right: -10px;
  282. }
  283. #infinite-handle span {
  284. border: 0;
  285. }
  286. #infinite-handle span:before {
  287. display: none;
  288. }
  289. /*--------------------------------------------------------------
  290. ## Galleries
  291. --------------------------------------------------------------*/
  292. .gallery-columns-6 .gallery-item,
  293. .gallery-columns-7 .gallery-item,
  294. .gallery-columns-8 .gallery-item,
  295. .gallery-columns-9 .gallery-item {
  296. padding-left: 2px;
  297. padding-right: 0;
  298. }
  299. /*--------------------------------------------------------------
  300. ## Media Queries
  301. --------------------------------------------------------------*/
  302. @media only screen and (max-width: 1024px) {
  303. #primary,
  304. #secondary {
  305. float: none;
  306. }
  307. #secondary {
  308. padding-right: 0;
  309. }
  310. /* Featured trio */
  311. #featured-post-trio article {
  312. float: none;
  313. }
  314. #featured-post-trio article.has-post-thumbnail .featured-image {
  315. float: right;
  316. margin-left: 30px;
  317. margin-right: 0;
  318. }
  319. #featured-post-trio article.has-post-thumbnail .entry-text {
  320. float: right;
  321. }
  322. /* Guestbook Template */
  323. .page-template-guestbook #comments .comment {
  324. float: none;
  325. }
  326. }
  327. @media only screen and (max-width: 680px) {
  328. /* Navigation */
  329. .main-navigation {
  330. text-align: right;
  331. }
  332. .main-navigation ul ul {
  333. float: none;
  334. padding-left: 0;
  335. padding-right: 15px;
  336. }
  337. .main-navigation ul li:hover > ul,
  338. .main-navigation ul li.focus > ul {
  339. right: auto;
  340. margin-right: 0;
  341. }
  342. .menu-toggle:before {
  343. margin-left: 5px;
  344. margin-right: 0;
  345. }
  346. .slideshow .slide-info {
  347. text-align: center;
  348. }
  349. #featured-post-trio article.has-post-thumbnail .featured-image,
  350. #featured-post-trio article.has-post-thumbnail .entry-text {
  351. float: none;
  352. }
  353. .entry-footer .edit-link {
  354. float: none;
  355. }
  356. .nav-links .nav-previous,
  357. .nav-links .nav-next {
  358. float: none;
  359. text-align: center;
  360. }
  361. .comment .avatar-container:after,
  362. .comment .avatar-crop:after {
  363. left: 1px;
  364. right: auto;
  365. }
  366. .comment .comment-author,
  367. .comment .comment-metadata,
  368. .comment .comment-content,
  369. .comment .reply,
  370. .comment .comment-awaiting-moderation {
  371. margin-left: 0;
  372. margin-right: 90px;
  373. }
  374. .comment-list .children {
  375. padding-left: 0;
  376. padding-right: 20px;
  377. }
  378. .children .comment .avatar-container:after,
  379. .children .comment .avatar-crop:after {
  380. left: 0;
  381. right: auto;
  382. }
  383. .children .comment .comment-author,
  384. .children .comment .comment-metadata,
  385. .children .comment .comment-content,
  386. .children .comment .reply,
  387. .children .comment .reply {
  388. margin-left: 0;
  389. margin-right: 70px;
  390. }
  391. }
  392. @media only screen and (max-width: 540px) {
  393. /* Posts and pages */
  394. .entry-meta .comments-link {
  395. float: none;
  396. }
  397. .comment-list .children {
  398. padding-right: 0;
  399. }
  400. }