[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-author .avatar {
 184      left: auto;
 185      right: -65px;
 186  }
 187  
 188  .comment-reply-link:before {
 189      left: auto;
 190      right: -2em;
 191  }
 192  
 193  .children .comment-author .avatar {
 194      left: auto;
 195      right: -45px;
 196  }
 197  
 198  .form-submit {
 199      text-align: left;
 200  }
 201  
 202  .comment-form #wp-comment-cookies-consent {
 203      margin: 0 0 0 10px;
 204  }
 205  
 206  /* Post Formats */
 207  
 208  .format-quote blockquote .icon {
 209      left: auto;
 210      right: -1.25em;
 211      -webkit-transform: none;
 212      -ms-transform: none;
 213      transform: none;
 214  }
 215  
 216  /* Post Navigation */
 217  
 218  .nav-links .nav-previous .nav-title .nav-title-icon-wrapper,
 219  .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
 220      display: inline-block;
 221      -ms-transform: rotate(180deg); /* IE 9 */
 222      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
 223      transform: rotate(180deg);
 224  }
 225  
 226  /* Widgets */
 227  
 228  .widget ul {
 229      margin: 0;
 230  }
 231  
 232  .widget_rss .widget-title .rsswidget:first-child:not(.rss-widget-title) {
 233      float: left;
 234  }
 235  
 236  .search-form .search-submit {
 237      left: 3px;
 238      right: auto;
 239  }
 240  
 241  .tagcloud ul li {
 242      float: right;
 243      margin: 4px 0 0 4px;
 244  }
 245  
 246  .widget ul li li {
 247      padding-left: 0;
 248      padding-right: 1.5rem;
 249  }
 250  
 251  .widget_text ul {
 252      margin: 0 1.5em 1.5em 0;
 253  }
 254  
 255  .widget_text ul li ul {
 256      margin: 0 1.5em 0 0;
 257  }
 258  
 259  /* Footer */
 260  
 261  .social-navigation a {
 262      margin-left: 1em;
 263      margin-right: 0;
 264  }
 265  
 266  /* Customizer styles */
 267  
 268  .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
 269      left: 3.2em;
 270      right: auto;
 271  }
 272  
 273  /* Gallery Styles */
 274  
 275  .gallery-item,
 276  .gallery-caption {
 277      text-align: right;
 278  }
 279  
 280  /* SVG Fallback */
 281  
 282  .no-svg .dropdown-toggle {
 283      left: 0;
 284      right: auto;
 285  }
 286  
 287  /* Media queries */
 288  
 289  @media screen and (min-width: 48em) {
 290  
 291      body.page-template-full-width-page #primary {
 292          float: none;
 293      }
 294  
 295      .has-sidebar:not(.error404) #primary {
 296          float: right;
 297      }
 298  
 299      .has-sidebar #secondary {
 300          float: left;
 301      }
 302  
 303      .error404 #primary {
 304          float: none;
 305      }
 306  
 307      /* Site Branding */
 308  
 309      .custom-logo-link {
 310          padding-left: 2em;
 311          padding-right: 0;
 312      }
 313  
 314      /* Navigation */
 315  
 316      .main-navigation ul ul {
 317          padding-right: 0;
 318      }
 319  
 320      .main-navigation ul ul:before,
 321      .main-navigation ul ul:after {
 322          left: 0.5em;
 323          right: auto;
 324      }
 325  
 326      .main-navigation ul ul,
 327      .main-navigation ul ul ul {
 328          left: auto;
 329          right: -999em;
 330      }
 331  
 332      .main-navigation ul ul li:hover > ul,
 333      .main-navigation ul ul li.focus > ul {
 334          left: auto;
 335          right: 100%;
 336      }
 337  
 338      .main-navigation ul li:hover > ul,
 339      .main-navigation ul li.focus > ul {
 340          left: auto;
 341          right: 0.5em;
 342      }
 343  
 344      .main-navigation ul li.menu-item-has-children:before,
 345      .main-navigation ul li.menu-item-has-children:after,
 346      .main-navigation ul li.page_item_has_children:before,
 347      .main-navigation ul li.page_item_has_children:after {
 348          left: 1em;
 349          right: auto;
 350      }
 351  
 352      .main-navigation .menu-item-has-children > a > .icon,
 353      .main-navigation .page_item_has_children > a > .icon {
 354          left: auto;
 355          right: 5px;
 356      }
 357  
 358      .main-navigation ul ul .menu-item-has-children > a > .icon,
 359      .main-navigation ul ul .page_item_has_children > a > .icon {
 360          left: 1em;
 361          right: auto;
 362          -webkit-transform: rotate(90deg);
 363          -ms-transform: rotate(90deg);
 364          transform: rotate(90deg);
 365      }
 366  
 367      /* Scroll down arrow */
 368  
 369      .navigation-top .menu-scroll-down {
 370          left: 0;
 371          right: auto;
 372      }
 373  
 374      .site-header .menu-scroll-down {
 375          left: 0;
 376          right: auto;
 377      }
 378  
 379      .entry-title a {
 380          margin-left: auto;
 381          margin-right: -2px;
 382      }
 383  
 384      /* Front Page */
 385  
 386      .page-two-column .panel-content .entry-header {
 387          float: right;
 388      }
 389  
 390      .page-two-column .panel-content .entry-content {
 391          float: left;
 392      }
 393  
 394      /* Front Page - Recent Posts */
 395  
 396      .page-two-column .panel-content .recent-posts {
 397          clear: left;
 398          float: left;
 399      }
 400  
 401      /* Blog, Archive, Search */
 402  
 403      .sticky .icon-thumb-tack {
 404          left: auto;
 405          right: -2.5em;
 406      }
 407  
 408      body:not(.has-sidebar):not(.page-one-column) .page-header,
 409      body.has-sidebar.error404 #primary .page-header,
 410      body.page-two-column:not(.archive) #primary .entry-header,
 411      body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
 412          float: right;
 413      }
 414  
 415      .blog:not(.has-sidebar) #primary article,
 416      .archive:not(.has-sidebar):not(.page-one-column) #primary article,
 417      .search:not(.has-sidebar) #primary article,
 418      .has-sidebar.error404 #primary .page-content,
 419      .error404.has-sidebar #primary .page-content,
 420      body.page-two-column:not(.archive) #primary .entry-content,
 421      body.page-two-column #comments {
 422          float: left;
 423      }
 424  
 425      .entry-footer .edit-link a.post-edit-link {
 426          margin-left: 0;
 427          margin-right: 1em;
 428      }
 429  
 430      /* Entry content */
 431  
 432      /* with sidebar */
 433  
 434      .has-sidebar .entry-content blockquote.alignleft {
 435          margin-left: 0;
 436          width: 34%;
 437      }
 438  
 439      .has-sidebar #primary .entry-content blockquote.alignright,
 440      .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
 441          margin-right: 0;
 442          width: 34%;
 443      }
 444  
 445      .has-sidebar #primary .entry-content blockquote.alignleft.below-entry-meta {
 446          margin-left: -72.5%;
 447          width: 62%;
 448      }
 449  
 450      /* blog index and archive */
 451  
 452      .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
 453      .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
 454      .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
 455      .page-two-column .entry-content blockquote.alignleft {
 456          margin-left: 0;
 457          width: 34%;
 458      }
 459  
 460      .blog:not(.has-sidebar) .entry-content blockquote.alignright,
 461      .twentyseventeen-front-page.page-two-column #primary .entry-content blockquote.alignright,
 462      .archive:not(.has-sidebar) .entry-content blockquote.alignright,
 463      .page-two-column #primary .entry-content blockquote.alignright {
 464          margin-right: -72.5%;
 465          width: 62%;
 466      }
 467  
 468      /* Post formats */
 469  
 470      .format-quote blockquote .icon {
 471          left: auto;
 472          right: -1.5em;
 473      }
 474  
 475      .navigation.pagination {
 476          float: left;
 477      }
 478  
 479      .has-sidebar .navigation.pagination,
 480      .archive.page-one-column:not(.has-sidebar) .navigation.pagination {
 481          float: none;
 482      }
 483  
 484      .post-navigation .nav-previous {
 485          float: right;
 486      }
 487  
 488      .post-navigation .nav-next {
 489          float: left;
 490          text-align: left;
 491      }
 492  
 493      /* Comments */
 494  
 495      ol.children .children {
 496          padding-left: 0;
 497          padding-right: 2em;
 498      }
 499  
 500      /* Post Navigation */
 501  
 502      .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
 503          left: auto;
 504          right: -2em;
 505      }
 506  
 507      .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
 508          left: -2em;
 509          right: auto;
 510      }
 511  
 512      /* Footer */
 513  
 514      .site-footer .widget-column.footer-widget-1 {
 515          float: right;
 516      }
 517  
 518      .site-footer .widget-column.footer-widget-2 {
 519          float: left;
 520      }
 521  
 522      .social-navigation {
 523          clear: right;
 524          float: right;
 525      }
 526  
 527      .site-info {
 528          float: right;
 529      }
 530  
 531      .social-navigation + .site-info {
 532          margin-left: 0;
 533          margin-right: 6%;
 534      }
 535  }
 536  
 537  @media screen and (min-width: 67em) {
 538  
 539      /* Sticky posts */
 540  
 541      .sticky .icon-thumb-tack {
 542          left: auto;
 543          right: -1.25em;
 544      }
 545  }
 546  
 547  @media screen and (min-width: 79em) {
 548  
 549      .has-sidebar #primary .entry-content blockquote.alignright,
 550      .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
 551          margin-right: -20%;
 552      }
 553  
 554      .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
 555      .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
 556      .page-two-column .entry-content blockquote.alignleft,
 557      .twentyseventeen-front-page .entry-content blockquote.alignleft {
 558          margin-left: -20%;
 559      }
 560  }