rtl.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. /*
  2. Theme Name: Scratchpad
  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. https://codex.wordpress.org/Right_to_Left_Language_Support
  7. */
  8. body {
  9. direction: rtl;
  10. unicode-bidi: embed;
  11. }
  12. /*--------------------------------------------------------------
  13. 2.0 Elements
  14. --------------------------------------------------------------*/
  15. blockquote {
  16. padding-left: 0;
  17. padding-right: 70px;
  18. }
  19. blockquote:before {
  20. left: auto;
  21. right: 0;
  22. }
  23. ul,
  24. ol {
  25. margin-left: 0;
  26. margin-right: 3em;
  27. }
  28. li > ul,
  29. li > ol {
  30. margin-left: 0;
  31. margin-right: 2em;
  32. }
  33. table td,
  34. table th {
  35. text-align: right;
  36. }
  37. /*--------------------------------------------------------------
  38. 3.0 Forms
  39. --------------------------------------------------------------*/
  40. textarea {
  41. padding-left: 0;
  42. padding-right: 3px;
  43. }
  44. /*--------------------------------------------------------------
  45. 3.1 Search
  46. --------------------------------------------------------------*/
  47. .search-form label:before {
  48. left: 0;
  49. right: auto;
  50. }
  51. .search-form .search-submit {
  52. left: 0;
  53. right: auto;
  54. }
  55. /*--------------------------------------------------------------
  56. 5.0 Structure
  57. --------------------------------------------------------------*/
  58. .comment-navigation .nav-previous,
  59. .posts-navigation .nav-previous,
  60. .post-navigation .nav-previous {
  61. float: right;
  62. }
  63. .comment-navigation .nav-next,
  64. .posts-navigation .nav-next,
  65. .post-navigation .nav-next {
  66. float: left;
  67. text-align: left;
  68. }
  69. #primary {
  70. float: right;
  71. }
  72. #secondary {
  73. float: left;
  74. }
  75. .no-sidebar #primary {
  76. float: none;
  77. }
  78. /*--------------------------------------------------------------
  79. 9.1 Menus
  80. --------------------------------------------------------------*/
  81. .main-navigation ul {
  82. padding-right: 0;
  83. }
  84. .main-navigation .wrap div > ul > li:last-of-type {
  85. margin-left: 0;
  86. }
  87. .main-navigation ul ul {
  88. float: right;
  89. left: auto;
  90. margin-left: 0;
  91. margin-right: -100px;
  92. right: -999em;
  93. }
  94. .main-navigation ul ul ul {
  95. padding-left: 0;
  96. padding-right: 8px;
  97. }
  98. .main-navigation ul ul ul:before {
  99. border-width: 8px 0 8px 8px;
  100. border-color: transparent transparent transparent #84a0a2;
  101. left: auto;
  102. margin-right: 0;
  103. right: 0;
  104. }
  105. .main-navigation ul ul ul {
  106. left: auto;
  107. right: -999em;
  108. margin-right: 0;
  109. }
  110. .main-navigation ul li:hover > ul,
  111. .main-navigation ul li.focus > ul {
  112. left: auto;
  113. right: 50%;
  114. }
  115. .main-navigation ul ul li:hover > ul,
  116. .main-navigation ul ul li.focus > ul {
  117. left: auto;
  118. right: 100%;
  119. }
  120. .menu-item-has-children > a:after {
  121. margin-left: 0;
  122. margin-right: 5px;
  123. -webkit-transform: rotate(-90deg);
  124. -ms-transform: rotate(-90deg);
  125. transform: rotate(-90deg);
  126. }
  127. /*--------------------------------------------------------------
  128. 10.2 Index, Archive, Search
  129. --------------------------------------------------------------*/
  130. .format-standard .featured-image .paperclip,
  131. .format-chat .featured-image .paperclip,
  132. .type-page .featured-image .paperclip,
  133. .single .featured-image .paperclip {
  134. left: 70px;
  135. right: auto;
  136. }
  137. body:not(.single) .format-standard:before,
  138. body:not(.single) .format-chat:before,
  139. .search .type-page:before {
  140. left: auto;
  141. right: -40px;
  142. }
  143. body:not(.single) .format-standard:after,
  144. body:not(.single) .format-chat:after,
  145. .search .type-page:after {
  146. left: -40px;
  147. right: auto;
  148. }
  149. /*--------------------------------------------------------------
  150. 10.7 Link
  151. --------------------------------------------------------------*/
  152. body:not(.single) .format-link .binderclip {
  153. left: 10px;
  154. right: auto;
  155. }
  156. body:not(.single) .format-link:before {
  157. -webkit-transform: rotate(-3deg);
  158. -ms-transform: rotate(-3deg);
  159. transform: rotate(-3deg);
  160. }
  161. /*--------------------------------------------------------------
  162. 10.9 Status
  163. --------------------------------------------------------------*/
  164. body:not(.single) .format-status .pen {
  165. left: -200px;
  166. right: auto;
  167. top: 150px;
  168. -webkit-transform: rotate(85deg);
  169. -ms-transform: rotate(85deg);
  170. transform: rotate(85deg);
  171. }
  172. /*--------------------------------------------------------------
  173. 10.10 Video Format
  174. --------------------------------------------------------------*/
  175. body:not(.single) .format-video .entry-video .movie-ticket:nth-of-type(1) {
  176. left: auto;
  177. right: -34px;
  178. -webkit-transform: rotate(-60deg);
  179. -ms-transform: rotate(-60deg);
  180. transform: rotate(-60deg);
  181. }
  182. body:not(.single) .format-video .entry-video .movie-ticket:nth-of-type(2) {
  183. left: auto;
  184. right: -75px;
  185. -webkit-transform: rotate(-60deg);
  186. -ms-transform: rotate(-60deg);
  187. transform: rotate(-60deg);
  188. }
  189. /*--------------------------------------------------------------
  190. 10.12 Single Posts
  191. --------------------------------------------------------------*/
  192. .single #primary .author-avatar {
  193. float: right;
  194. }
  195. .single #primary .author-description {
  196. float: left;
  197. }
  198. /* Post Navigation */
  199. .post-navigation-container .nav-previous,
  200. .post-navigation-container .nav-next {
  201. float: none;
  202. text-align: center;
  203. }
  204. /*--------------------------------------------------------------
  205. 10.14 Comments
  206. --------------------------------------------------------------*/
  207. #comments .comment .comment-body {
  208. padding-left: 0;
  209. padding-right: 100px;
  210. }
  211. #comments .avatar-container {
  212. left: auto;
  213. right: 0;
  214. }
  215. #comments ol.children {
  216. padding-left: 0;
  217. padding-right: 40px;
  218. }
  219. #comments ol.children .comment-body {
  220. padding-left: 0;
  221. padding-right: 85px;
  222. }
  223. .comments-form-contain .stamp {
  224. left: 60px;
  225. right: auto;
  226. }
  227. .comments-form-contain .post-mark {
  228. left: 75px;
  229. right: auto;
  230. }
  231. .comments-form-contain .comment-form-comment {
  232. float: right;
  233. }
  234. .comment-form-author,
  235. .comment-form-email,
  236. .comment-form-url {
  237. float: left;
  238. }
  239. .logged-in .comments-form-contain .comment-form-comment {
  240. float: none;
  241. }
  242. .comments-form-contain .post-mark {
  243. -webkit-transform: rotate(180deg);
  244. -ms-transform: rotate(180deg);
  245. transform: rotate(180deg);
  246. }
  247. /*--------------------------------------------------------------
  248. 11.1 Error Pages
  249. --------------------------------------------------------------*/
  250. .no-sidebar:not(.error404) .page-header,
  251. .error404 #primary {
  252. margin-left: auto;
  253. margin-right: auto;
  254. }
  255. /*--------------------------------------------------------------
  256. 12.3 Audio Player
  257. --------------------------------------------------------------*/
  258. article .mejs-container .mejs-controls,
  259. article .mejs-container.mejs-audio .mejs-controls {
  260. left: auto;
  261. right: 4%;
  262. }
  263. /*--------------------------------------------------------------
  264. 13.1 Recipe Shortcode
  265. --------------------------------------------------------------*/
  266. .entry-content .jetpack-recipe .jetpack-recipe-meta {
  267. float: right;
  268. padding-left: 0;
  269. padding-right: 30px;
  270. }
  271. .entry-content .jetpack-recipe-meta li.jetpack-recipe-print {
  272. text-align: right;
  273. }
  274. .entry-content .jetpack-recipe .jetpack-recipe-content {
  275. border-left: none;
  276. border-right: 2px dotted rgba(14, 115, 226,0.2);
  277. margin-left: 0;
  278. margin-right: 160px;
  279. }
  280. .entry-content .jetpack-recipe .jetpack-recipe-content ul,
  281. .entry-content .jetpack-recipe .jetpack-recipe-content ol {
  282. margin-left: 0;
  283. margin-right: 2em;
  284. }
  285. /*--------------------------------------------------------------
  286. 16.0 Footer
  287. --------------------------------------------------------------*/
  288. #footer-widgets .widget {
  289. margin-left: 3.33%;
  290. margin-right: 0;
  291. }
  292. /*--------------------------------------------------------------
  293. 17.0 Widgets
  294. --------------------------------------------------------------*/
  295. .widget_archive ul ul,
  296. .widget_categories ul ul,
  297. .widget_links ul ul,
  298. .widget_meta ul ul,
  299. .widget_nav_menu ul ul,
  300. .widget_pages ul ul,
  301. .widget_recent_entries ul ul,
  302. .widget_recent_comments ul ul,
  303. .widget_rss ul ul {
  304. margin-left: 0;
  305. margin-right: 15px;
  306. }
  307. /* Widget Calendar */
  308. .widget_calendar caption {
  309. text-align: right;
  310. }
  311. .widget_calendar #next {
  312. text-align: left;
  313. }
  314. .widget_calendar #prev {
  315. text-align: right;
  316. }
  317. #secondary .widget:nth-of-type(4n+1),
  318. #secondary .widget:nth-of-type(4n+3) {
  319. left: auto;
  320. right: -20px;
  321. }
  322. /*--------------------------------------------------------------
  323. 19.0 Media Queries
  324. --------------------------------------------------------------*/
  325. @media only screen and (max-width: 1000px) {
  326. /* Content */
  327. #primary,
  328. .single #primary,
  329. .page #primary {
  330. float: none;
  331. }
  332. #secondary,
  333. .single #secondary,
  334. .page #secondary {
  335. float: none;
  336. }
  337. #secondary .widget:nth-of-type(4n+1),
  338. #secondary .widget:nth-of-type(4n+3) {
  339. right: auto;
  340. }
  341. }
  342. @media only screen and (max-width: 800px) {
  343. /* Mobile menu toggle */
  344. .main-navigation {
  345. float: none;
  346. }
  347. .menu-toggle:before {
  348. margin-left: 8px;
  349. margin-right: 0;
  350. }
  351. .main-navigation .wrap div > ul > li {
  352. float: none;
  353. text-align: right;
  354. }
  355. .main-navigation ul ul {
  356. float: none;
  357. margin-left: 0;
  358. margin-right: 20px;
  359. }
  360. /* Comments */
  361. .comments-form-contain .comment-form-comment,
  362. .comment-form-author,
  363. .comment-form-email,
  364. .comment-form-url {
  365. float: none;
  366. }
  367. }
  368. @media only screen and (max-width: 600px) {
  369. .format-standard .featured-image .paperclip,
  370. .format-chat .featured-image .paperclip,
  371. .type-page .featured-image .paperclip,
  372. .single .featured-image .paperclip {
  373. left: 30px;
  374. right: auto;
  375. }
  376. /* Post flair */
  377. div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs {
  378. float: none;
  379. margin-left: 0;
  380. }
  381. .single #primary .author-avatar {
  382. float: none;
  383. }
  384. .single #primary .author-description {
  385. float: none;
  386. }
  387. /* Comments */
  388. .comments-form-contain .stamp {
  389. left: 30px;
  390. right: auto;
  391. }
  392. #comments .comment .comment-body,
  393. #comments ol.children .comment-body,
  394. #comments ol.children ol.children {
  395. padding-right: 0;
  396. }
  397. /* Recipe Shortcode */
  398. .entry-content .jetpack-recipe .jetpack-recipe-meta {
  399. float: none;
  400. padding: 0 10px;
  401. }
  402. .entry-content .jetpack-recipe .jetpack-recipe-meta li {
  403. padding: 0;
  404. }
  405. .entry-content .jetpack-recipe .jetpack-recipe-content {
  406. margin-right: 0;
  407. padding: 0 20px;
  408. }
  409. }