rtl.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
  1. /*
  2. * Theme Name: rebalance
  3. *
  4. * Adding support for language written in a Right To Left (RTL) direction is easy -
  5. * it's just a matter of overwriting all the horizontal positioning attributes
  6. * of your CSS stylesheet in a separate stylesheet file named rtl.css.
  7. *
  8. * http://codex.wordpress.org/Right_to_Left_Language_Support
  9. *
  10. */
  11. /*--------------------------------------------------------------*/
  12. /* !# TABLE OF CONTENTS */
  13. /*--------------------------------------------------------------*/
  14. /*----------------------------------------------------------------
  15. # Normalize
  16. ## Typography
  17. ## Elements
  18. ## Links
  19. ## Forms
  20. # Theme Globals
  21. # Layout
  22. # Accessibility
  23. # Alignments
  24. # Clearings
  25. # Header
  26. # Navigation
  27. ## Toggle Navigation
  28. ## Main Navigation
  29. ## Social Navigation
  30. # Widgets
  31. # Content
  32. ## Featured Project
  33. ## Posts and Pages
  34. ## Author Meta
  35. ## Single Post
  36. ## Single Jetpack Portfolio
  37. ## Page
  38. ## Archive
  39. ## Masonry
  40. ## Infinite scroll
  41. ## 404 Error
  42. ## Asides
  43. # Media
  44. ## Captions
  45. ## Galleries
  46. # Pagination
  47. # Comments
  48. ## Comments Respond
  49. ## Widgets
  50. ## Secondary
  51. # Footer
  52. # Extras
  53. ----------------------------------------------------------------*/
  54. /*--------------------------------------------------------------*/
  55. /* !# Normalize */
  56. /*--------------------------------------------------------------*/
  57. /*--------------------------------------------------------------*/
  58. /* !## Typography */
  59. /*--------------------------------------------------------------*/
  60. /*--------------------------------------------------------------*/
  61. /* !## Elements */
  62. /*--------------------------------------------------------------*/
  63. ul,
  64. ol {
  65. margin: 0 2em 1.5em 0;
  66. }
  67. li > ul,
  68. li > ol {
  69. margin-left: 0;
  70. margin-right: 1.5em;
  71. }
  72. /*--------------------------------------------------------------*/
  73. /* !## Links */
  74. /*--------------------------------------------------------------*/
  75. /*--------------------------------------------------------------*/
  76. /* !## Forms */
  77. /*--------------------------------------------------------------*/
  78. textarea {
  79. padding-left: inherit;
  80. padding-right: 3px;
  81. }
  82. /*--------------------------------------------------------------*/
  83. /* !# Theme Globals */
  84. /*--------------------------------------------------------------*/
  85. /*--------------------------------------------------------------*/
  86. /* !# Layout */
  87. /*--------------------------------------------------------------*/
  88. /*--------------------------------------------------------------*/
  89. /* !# Accessibility */
  90. /*--------------------------------------------------------------*/
  91. /*--------------------------------------------------------------*/
  92. /* !# Alignments */
  93. /*--------------------------------------------------------------*/
  94. .alignleft {
  95. float: right;
  96. margin-left: 1.5em;
  97. margin-right: inherit;
  98. }
  99. .alignright {
  100. float: left;
  101. margin-left: inherit;
  102. margin-right: 1.5em;
  103. }
  104. /*--------------------------------------------------------------*/
  105. /* !# Clearings */
  106. /*--------------------------------------------------------------*/
  107. /*--------------------------------------------------------------*/
  108. /* !# Header */
  109. /*--------------------------------------------------------------*/
  110. /* Large Screen Styles */
  111. @media screen and (min-width: 881px) {
  112. .site-branding {
  113. text-align: right;
  114. }
  115. .site-logo-link {
  116. margin-left: 20px;
  117. margin-right: inherit;
  118. }
  119. .site-description {
  120. float: right;
  121. text-align: right;
  122. }
  123. .main-navigation {
  124. float: left;
  125. clear: left;
  126. }
  127. }
  128. /*--------------------------------------------------------------*/
  129. /* !# Navigation */
  130. /*--------------------------------------------------------------*/
  131. /*--------------------------------------------------------------*/
  132. /* !## Toggle Navigation */
  133. /*--------------------------------------------------------------*/
  134. .menu-toggle {
  135. text-align: right;
  136. }
  137. .menu-toggle:after {
  138. margin: 0 5px 0 0;
  139. }
  140. /*--------------------------------------------------------------*/
  141. /* !## Main Navigation */
  142. /*--------------------------------------------------------------*/
  143. .main-navigation .sub-menu,
  144. .main-navigation .children {
  145. padding-left: inherit;
  146. padding-right: 1.5em;
  147. }
  148. .main-navigation .sub-menu li:before,
  149. .main-navigation .children li:before {
  150. padding-left: inherit;
  151. padding-right: 8px;
  152. }
  153. .main-navigation ul > li li a {
  154. padding-left: inherit;
  155. padding-right: 26px;
  156. }
  157. /* Large Screen Styles */
  158. @media screen and (min-width: 881px) {
  159. .header-menu-wrap {
  160. float: right;
  161. }
  162. .main-navigation {
  163. float: left;
  164. }
  165. .main-navigation div > ul {
  166. float: right;
  167. text-align: right;
  168. }
  169. .main-navigation .sub-menu,
  170. .main-navigation .children {
  171. padding-left: inherit;
  172. padding-right: 0;
  173. left: inherit;
  174. right: 0;
  175. }
  176. .main-navigation ul > li a {
  177. text-align: right;
  178. }
  179. .main-navigation .sub-menu a,
  180. .main-navigation .children a {
  181. padding-left: 8px;
  182. padding-right: 26px;
  183. }
  184. .main-navigation .sub-menu .sub-menu,
  185. .main-navigation .children .children {
  186. margin: -2px 0 -2px -2px;
  187. left: calc(100% + 2px);
  188. right: inherit;
  189. }
  190. .main-navigation .page_item_has_children > a:after,
  191. .main-navigation .menu-item-has-children > a:after {
  192. margin: 0 5px 0 0;
  193. }
  194. .main-navigation .sub-menu li.page_item_has_children:before,
  195. .main-navigation .sub-menu li.page_item_has_children:before,
  196. .main-navigation .sub-menu li.menu-item-has-children:before,
  197. .main-navigation .children li.menu-item-has-children:before {
  198. content: '\f105';
  199. margin-left: 5px;
  200. margin-right: inherit;
  201. }
  202. .main-navigation .page_item_has_children .page_item_has_children > a:after,
  203. .main-navigation .menu-item-has-children .menu-item-has-children > a:after {
  204. content: '\f107';
  205. float: left;
  206. margin: 0 0 0 5px;
  207. }
  208. }
  209. /*--------------------------------------------------------------*/
  210. /* !## Mobile Navigation */
  211. /*--------------------------------------------------------------*/
  212. @media screen and (max-width: 880px) {
  213. /*
  214. * Sub-menu dropdown buttons
  215. */
  216. .dropdown-toggle {
  217. right: inherit;
  218. left: 8px;
  219. }
  220. }
  221. /*--------------------------------------------------------------*/
  222. /* !## Social Navigation */
  223. /*--------------------------------------------------------------*/
  224. .social-navigation li {
  225. padding-left: inherit;
  226. padding-right: 5px;
  227. }
  228. /* Icons aren't shown in small screen layouts */
  229. @media screen and (min-width: 881px) {
  230. .social-menu-wrap {
  231. float: left;
  232. }
  233. .social-navigation {
  234. left: 0;
  235. right: inherit;
  236. }
  237. .social-navigation > * {
  238. text-align: left;
  239. }
  240. }
  241. /*--------------------------------------------------------------*/
  242. /* !# Content */
  243. /*--------------------------------------------------------------*/
  244. /*--------------------------------------------------------------*/
  245. /* !## Featured Project */
  246. /*--------------------------------------------------------------*/
  247. /* Large Screen Styles */
  248. @media screen and (min-width: 881px) {
  249. .site-feature .has-thumbnail .entry-header {
  250. left: inherit;
  251. right: 0;
  252. padding: 0 2em 2em 0;
  253. }
  254. }
  255. /*--------------------------------------------------------------*/
  256. /* !## Posts and Pages */
  257. /*--------------------------------------------------------------*/
  258. .entry-image .entry-image-caption span {
  259. margin-left: 10px;
  260. margin-right: inherit;
  261. }
  262. .entry-content blockquote,
  263. .comment-content blockquote {
  264. border-left: none;
  265. border-right: 6px solid #F35029;
  266. margin: 0 -40px 0 0;
  267. padding-left: inherit;
  268. padding-right: 40px;
  269. }
  270. .entry-content blockquote blockquote,
  271. .comment-content blockquote blockquote {
  272. margin-right: 0;
  273. }
  274. .entry-content q,
  275. .comment-content q {
  276. border-left: none;
  277. border-right: 6px solid #F35029;
  278. padding-left: inherit;
  279. padding-right: 20px;
  280. }
  281. .entry-content table th,
  282. .entry-content table tr,
  283. .entry-content table td,
  284. .comment-content th,
  285. .comment-content tr,
  286. .comment-content td {
  287. text-align: right;
  288. }
  289. /*--------------------------------------------------------------*/
  290. /* !## Author Meta */
  291. /*--------------------------------------------------------------*/
  292. .author-box {
  293. float: left;
  294. }
  295. .author-avatar {
  296. float: left;
  297. margin: 0 20px 20px 0;
  298. }
  299. .author-description {
  300. padding-left: 25%;
  301. padding-right: inherit;
  302. }
  303. /* Large Screen Styles */
  304. @media screen and (min-width: 881px) {
  305. .author-box {
  306. float: left;
  307. }
  308. .author-avatar .avatar {
  309. left: calc(100% + 40px);
  310. right: inherit;
  311. }
  312. }
  313. /*--------------------------------------------------------------*/
  314. /* !## Single Post */
  315. /*--------------------------------------------------------------*/
  316. /* Large Screens */
  317. @media screen and (min-width: 881px) {
  318. .single .hentry .entry-header {
  319. float: left;
  320. }
  321. .single .hentry .entry-title {
  322. margin-left: inherit;
  323. margin-right: calc(33.333%);
  324. }
  325. .single .entry-header .entry-meta {
  326. margin-left: inherit;
  327. margin-right: calc(33.333%);
  328. }
  329. .single .hentry .entry-content {
  330. float: left;
  331. }
  332. .single .hentry .entry-footer {
  333. float: left;
  334. }
  335. }
  336. /*--------------------------------------------------------------*/
  337. /* !## Single Jetpack Portfolio */
  338. /*--------------------------------------------------------------*/
  339. /*--------------------------------------------------------------*/
  340. /* !## Page */
  341. /*--------------------------------------------------------------*/
  342. /*--------------------------------------------------------------*/
  343. /* !## Archive & Search */
  344. /*--------------------------------------------------------------*/
  345. /* Large Screens */
  346. @media screen and (min-width: 881px) {
  347. .archive .page-header,
  348. .search .page-header {
  349. text-align: right;
  350. }
  351. }
  352. /*--------------------------------------------------------------*/
  353. /* !## Masonry */
  354. /*--------------------------------------------------------------*/
  355. .js .infinite-scroll .card,
  356. .card {
  357. float: right;
  358. }
  359. /*--------------------------------------------------------------*/
  360. /* !## Infinite Scroll */
  361. /*--------------------------------------------------------------*/
  362. #infinite-handle span:before {
  363. display: none;
  364. }
  365. /*--------------------------------------------------------------*/
  366. /* !## 404 Error */
  367. /*--------------------------------------------------------------*/
  368. /*--------------------------------------------------------------*/
  369. /* !## Asides */
  370. /*--------------------------------------------------------------*/
  371. /*--------------------------------------------------------------*/
  372. /* !# Media */
  373. /*--------------------------------------------------------------*/
  374. /*--------------------------------------------------------------*/
  375. /* !## Captions */
  376. /*--------------------------------------------------------------*/
  377. .wp-caption.alignleft {
  378. margin-left: 1.5em;
  379. margin-right: 0;
  380. }
  381. .wp-caption.alignright {
  382. margin-left: 0;
  383. margin-right: 1.5em;
  384. }
  385. /* Large Screen Styles */
  386. @media screen and (min-width: 881px) {
  387. /* Only posts with non-floating/fullwidth images can have hanging captions */
  388. .post .wp-caption.aligncenter .wp-caption-text,
  389. .post .wp-caption.alignnone .wp-caption-text {
  390. text-align: left;
  391. }
  392. }
  393. /*--------------------------------------------------------------*/
  394. /* !## Galleries */
  395. /*--------------------------------------------------------------*/
  396. /*--------------------------------------------------------------*/
  397. /* !# Pagination */
  398. /*--------------------------------------------------------------*/
  399. .posts-navigation .nav-previous {
  400. float: right;
  401. }
  402. .posts-navigation .nav-next {
  403. float: left;
  404. }
  405. /* Responsive Navigation */
  406. @media screen and (min-width: 881px) {
  407. .site-main .post-navigation {
  408. text-align: left;
  409. }
  410. .site-main > .post-navigation .nav-next {
  411. float: left;
  412. padding-left: inherit;
  413. padding-right: 20px;
  414. text-align: right;
  415. }
  416. .site-main > .post-navigation .nav-previous {
  417. float: right;
  418. padding-left: 20px;
  419. padding-right: inherit;
  420. text-align: left;
  421. }
  422. .site-main .comment-navigation {
  423. float: left;
  424. }
  425. }
  426. /*--------------------------------------------------------------*/
  427. /* !# Comments */
  428. /*--------------------------------------------------------------*/
  429. .comment-list {
  430. float: left;
  431. margin-left: 0;
  432. padding-left: 0;
  433. margin-right: 0;
  434. padding-right: 0;
  435. width: 100%;
  436. }
  437. .comment .avatar {
  438. left: inherit;
  439. right: 0;
  440. }
  441. .comment .comment-author .fn {
  442. margin-left: inherit;
  443. margin-right: 70px;
  444. }
  445. .bypostauthor .fn:before {
  446. margin-left: 10px;
  447. margin-right: 0;
  448. }
  449. .comment .comment-metadata {
  450. float: right;
  451. margin-left: inherit;
  452. margin-right: 70px;
  453. text-align: right;
  454. }
  455. .comment .reply {
  456. text-align: left;
  457. }
  458. .comment .comment-reply-link:before {
  459. margin: 0 0 0 5px;
  460. }
  461. .comment .children {
  462. margin-left: 0;
  463. margin-right: 1.5em;
  464. }
  465. /* Responsive Comments */
  466. @media screen and (min-width: 881px) {
  467. .comments-area {
  468. padding: 50px 33.333% 50px 11.111%;
  469. }
  470. .comment .comment-author {
  471. float: right;
  472. margin-right: inherit;
  473. }
  474. .comment .comment-author .fn {
  475. margin-left: inherit;
  476. margin-right: 0;
  477. }
  478. .comment .comment-metadata {
  479. float: left;
  480. margin-left: inherit;
  481. margin-right: 0;
  482. text-align: left;
  483. }
  484. .comment .avatar {
  485. margin-left: 0;
  486. margin-right: inherit;
  487. left: calc(100% + 40px);
  488. right: inherit;
  489. }
  490. .comment .comment-content {
  491. margin-left: inherit;
  492. margin-right: 0;
  493. }
  494. }
  495. /*--------------------------------------------------------------*/
  496. /* !## Comment Respond */
  497. /*--------------------------------------------------------------*/
  498. .comment-respond p label {
  499. text-align: right;
  500. }
  501. .comment-respond p.form-submit {
  502. text-align: left;
  503. }
  504. .comment .comment-reply-title small {
  505. left: 0;
  506. right: inherit;
  507. }
  508. .comment .comment-reply-title a:before {
  509. margin: 0 0 0 5px;
  510. }
  511. /* Responsive Comments */
  512. @media screen and (min-width: 881px) {
  513. .comment-respond p label {
  514. left: calc(100% + 40px);
  515. right: inherit;
  516. text-align: left;
  517. }
  518. .comment .comment-respond p.form-submit {
  519. padding-left: inherit;
  520. padding-right: 50%;
  521. }
  522. }
  523. /*--------------------------------------------------------------*/
  524. /* !# Widgets */
  525. /*--------------------------------------------------------------*/
  526. .widget_calendar {
  527. text-align: right;
  528. }
  529. .widget_calendar caption {
  530. text-align: right;
  531. }
  532. .widget_calendar table th,
  533. .widget_calendar table tr,
  534. .widget_calendar table td {
  535. text-align: right;
  536. }
  537. .widget_calendar #next {
  538. text-align: left;
  539. }
  540. /* Large Screen Styles */
  541. @media screen and (min-width: 881px) {
  542. .widget,
  543. .widget:nth-child(2n) {
  544. margin: 0 30px 60px 0;
  545. }
  546. }
  547. /*--------------------------------------------------------------*/
  548. /* !## Secondary */
  549. /*--------------------------------------------------------------*/
  550. /* Large Screen Styles */
  551. @media screen and (min-width: 881px) {
  552. #secondary {
  553. float: left;
  554. }
  555. }
  556. /*--------------------------------------------------------------*/
  557. /* !# Footer */
  558. /*--------------------------------------------------------------*/
  559. .site-footer {
  560. clear: right;
  561. }
  562. /*--------------------------------------------------------------*/
  563. /* !# Extras */
  564. /*--------------------------------------------------------------*/
  565. .sd-social-official .sd-content ul>li {
  566. float: right !important;
  567. }