[Summary view] [Print] [Text view]

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