wp-content/themes/twentyseventeen/rtl.css

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