wp-content/themes/twentyfourteen/rtl.css

   1 /*
   2 Theme Name: Twenty Fourteen
   3 Description: Adds support for languages written in a Right To Left (RTL) direction.
   4 It's easy, just a matter of overwriting all the horizontal positioning attributes
   5 of your CSS stylesheet in a separate stylesheet file named rtl.css.
   6
   7 See http://codex.wordpress.org/Right_to_Left_Language_Support
   8 */
   9
  10 /**
  11  * Table of Contents:
  12  *
  13  * 1.0 - Reset
  14  * 2.0 - Repeatable Patterns
  15  * 4.0 - Header
  16  * 5.0 - Navigation
  17  * 6.0 - Content
  18  *   6.3 - Entry Meta
  19  *   6.4 - Entry Content
  20  *   6.5 - Galleries
  21  *   6.7 - Post/Image/Paging Navigation
  22  *   6.10 - Contributor Page
  23  *   6.14 - Comments
  24  * 7.0 - Sidebar
  25  *   7.1 - Widgets
  26  *   7.2 - Content Sidebar Widgets
  27  * 9.0 - Featured Content
  28  * 10.0 - Media Queries
  29  * -----------------------------------------------------------------------------
  30  */
  31
  32
  33 /**
  34  * 1.0 Reset
  35  * -----------------------------------------------------------------------------
  36  */
  37
  38 body {
  39         direction: rtl;
  40         unicode-bidi: embed;
  41 }
  42
  43 a {
  44         display: inline-block;
  45 }
  46
  47 ul,
  48 ol {
  49         margin: 0 20px 24px 0;
  50 }
  51
  52 li > ul,
  53 li > ol {
  54         margin: 0 20px 0 0;
  55 }
  56
  57 caption,
  58 th,
  59 td {
  60         text-align: right;
  61 }
  62
  63
  64 /**
  65  * 2.0 Repeatable Patterns
  66  * -----------------------------------------------------------------------------
  67  */
  68
  69 .wp-caption-text {
  70         padding-left: 10px;
  71         padding-right: 0;
  72 }
  73
  74 .screen-reader-text:focus {
  75         right: 5px;
  76         left: auto;
  77 }
  78
  79
  80 /**
  81  * 4.0 Header
  82  * -----------------------------------------------------------------------------
  83  */
  84
  85 .site-title {
  86         float: right;
  87 }
  88
  89 .search-toggle {
  90         float: left;
  91         margin-left: 38px;
  92         margin-right: auto;
  93 }
  94
  95 .search-box .search-field {
  96         float: left;
  97         padding: 1px 6px 2px 2px;
  98 }
  99
 100 .search-toggle .screen-reader-text {
 101         right: 5px; /* Avoid a horizontal scrollbar when the site has a long menu */
 102         left: auto;
 103 }
 104
 105
 106 /**
 107  * 5.0 Navigation
 108  * -----------------------------------------------------------------------------
 109  */
 110
 111 .site-navigation ul ul {
 112         margin-right: 20px;
 113         margin-left: auto;
 114 }
 115
 116 .menu-toggle {
 117         right: auto;
 118         left: 0;
 119 }
 120
 121
 122 /**
 123  * 6.0 Content
 124  * -----------------------------------------------------------------------------
 125  */
 126
 127 /**
 128  * 6.3 Entry Meta
 129  * -----------------------------------------------------------------------------
 130  */
 131
 132 .entry-meta .tag-links a {
 133         margin: 0 10px 4px 4px;
 134 }
 135
 136 .entry-meta .tag-links a:before {
 137         border-right: 0;
 138         border-left: 8px solid #767676;
 139         right: -7px;
 140         left: auto;
 141 }
 142
 143 .entry-meta .tag-links a:hover:before,
 144 .entry-meta .tag-links a:focus:before {
 145         border-left-color: #41a62a;
 146 }
 147
 148 .entry-meta .tag-links a:after {
 149         right: -2px;
 150         left: auto;
 151 }
 152
 153
 154 /**
 155  * 6.4 Entry Content
 156  * -----------------------------------------------------------------------------
 157  */
 158
 159 .page-links a,
 160 .page-links > span {
 161         margin: 0 0 2px 1px;
 162 }
 163
 164 .page-links > .page-links-title {
 165         padding-right: 0;
 166         padding-left: 7px;
 167 }
 168
 169
 170 /**
 171  * 6.5 Galleries
 172  * -----------------------------------------------------------------------------
 173  */
 174
 175 .gallery-item {
 176         float: right;
 177         margin: 0 0 4px 4px;
 178 }
 179
 180 .gallery-columns-1 .gallery-item:nth-of-type(1n),
 181 .gallery-columns-2 .gallery-item:nth-of-type(2n),
 182 .gallery-columns-3 .gallery-item:nth-of-type(3n),
 183 .gallery-columns-4 .gallery-item:nth-of-type(4n),
 184 .gallery-columns-5 .gallery-item:nth-of-type(5n),
 185 .gallery-columns-6 .gallery-item:nth-of-type(6n),
 186 .gallery-columns-7 .gallery-item:nth-of-type(7n),
 187 .gallery-columns-8 .gallery-item:nth-of-type(8n),
 188 .gallery-columns-9 .gallery-item:nth-of-type(9n) {
 189         margin-right: auto;
 190         margin-left: 0;
 191 }
 192
 193 .gallery-caption {
 194         padding: 6px 8px;
 195         right: 0;
 196         left: auto;
 197         text-align: right;
 198 }
 199
 200 .gallery-caption:before {
 201         right: 0;
 202         left: auto;
 203 }
 204
 205
 206 /**
 207  * 6.7 Post/Image/Paging Navigation
 208  * -----------------------------------------------------------------------------
 209  */
 210
 211 .paging-navigation .page-numbers {
 212         margin-right: auto;
 213         margin-left: 1px;
 214 }
 215
 216
 217 /**
 218  * 6.10 Contributor Page
 219  * -----------------------------------------------------------------------------
 220  */
 221
 222 .contributor-avatar {
 223         float: right;
 224         margin: 0 0 20px 30px;
 225 }
 226
 227
 228 /**
 229  * 6.14 Comments
 230  * -----------------------------------------------------------------------------
 231  */
 232
 233 .comment-author .avatar {
 234         right: 0;
 235         left: auto;
 236 }
 237
 238 .bypostauthor > article .fn:before {
 239         margin: 0 -2px 0 2px;
 240 }
 241
 242 .comment-author,
 243 .comment-awaiting-moderation,
 244 .comment-content,
 245 .comment-list .reply,
 246 .comment-metadata {
 247         padding-right: 30px;
 248         padding-left: 0;
 249 }
 250
 251 .comment-edit-link {
 252         margin-right: 10px;
 253         margin-left: auto;
 254 }
 255
 256 .comment-reply-link:before,
 257 .comment-reply-login:before {
 258         margin-left: auto;
 259         margin-right: 2px;
 260 }
 261
 262 .comment-reply-link:before,
 263 .comment-reply-login:before,
 264 .comment-edit-link:before {
 265         -webkit-transform: scaleX(-1);
 266         -moz-transform:    scaleX(-1);
 267         -ms-transform:     scaleX(-1);
 268         -o-transform:      scaleX(-1);
 269         transform:         scaleX(-1);
 270 }
 271
 272 .comment-content ul,
 273 .comment-content ol {
 274         margin: 0 22px 24px 0;
 275 }
 276
 277 .comment-list .children {
 278         margin-right: 15px;
 279         margin-left: auto;
 280 }
 281
 282 .comment-reply-title small a {
 283         float: left;
 284 }
 285
 286 .comment-navigation .nav-previous a {
 287         margin-right: auto;
 288         margin-left: 10px;
 289 }
 290
 291
 292 /**
 293  * 7.0 Sidebars
 294  * -----------------------------------------------------------------------------
 295  */
 296
 297 /**
 298  * 7.1 Widgets
 299  * -----------------------------------------------------------------------------
 300  */
 301
 302 .widget li > ol,
 303 .widget li > ul {
 304         margin-right: 10px;
 305         margin-left: auto;
 306 }
 307
 308 .widget input,
 309 .widget textarea {
 310         padding: 1px 4px 2px 2px;
 311 }
 312
 313 .widget_calendar caption {
 314         text-align: right;
 315 }
 316
 317 .widget_calendar #prev {
 318         padding-right: 5px;
 319         padding-left: 0;
 320 }
 321
 322 .widget_calendar #next {
 323         padding-right: 0;
 324         padding-left: 5px;
 325         text-align: left;
 326 }
 327
 328 .widget_twentyfourteen_ephemera .entry-content ul,
 329 .widget_twentyfourteen_ephemera .entry-content ol {
 330         margin: 0 20px 18px 0;
 331 }
 332
 333 .widget_twentyfourteen_ephemera .entry-content li > ul,
 334 .widget_twentyfourteen_ephemera .entry-content li > ol {
 335         margin: 0 20px 0 0;
 336 }
 337
 338
 339 /**
 340  * 7.2 Content Sidebar Widgets
 341  * -----------------------------------------------------------------------------
 342  */
 343
 344 .content-sidebar .widget li > ol,
 345 .content-sidebar .widget li > ul {
 346         margin-right: 18px;
 347         margin-left: auto;
 348 }
 349
 350 .content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
 351         margin: -1px 0 0 18px;
 352 }
 353
 354
 355 /**
 356  * 9.0 Featured Content
 357  * -----------------------------------------------------------------------------
 358  */
 359
 360 .featured-content .post-thumbnail img {
 361         right: 0;
 362         left: auto;
 363 }
 364
 365 .slider-viewport {
 366         direction: ltr;
 367 }
 368
 369 .slider .featured-content .entry-header {
 370         right: 0;
 371         left: auto;
 372         text-align: right;
 373 }
 374
 375 .slider-control-paging {
 376         float: right;
 377 }
 378
 379 .slider-control-paging li {
 380         float: right;
 381         margin: 2px 0 2px 4px;
 382 }
 383
 384 .slider-control-paging li:last-child {
 385         margin-right: auto;
 386         margin-left: 0;
 387 }
 388
 389 .slider-control-paging a:before {
 390         right: 10px;
 391         left: auto;
 392 }
 393
 394 .slider-direction-nav li {
 395         border-width: 2px 0 0 1px;
 396         float: right;
 397 }
 398
 399 .slider-direction-nav li:last-child {
 400         border-width: 2px 1px 0 0;
 401 }
 402
 403 .slider-direction-nav a:before {
 404         content: "\f429";
 405 }
 406
 407 .slider-direction-nav .slider-next:before {
 408         content: "\f430";
 409 }
 410
 411
 412 /**
 413  * 10.0 Media Queries
 414  * -----------------------------------------------------------------------------
 415  */
 416
 417 @media screen and (max-width: 400px) {
 418         .list-view .site-content .post-thumbnail img {
 419                 float: right;
 420                 margin: 0 0 3px 10px;
 421         }
 422 }
 423
 424 @media screen and (min-width: 401px) {
 425         .site-content .entry-meta > span {
 426                 margin-right: auto;
 427                 margin-left: 10px;
 428         }
 429
 430         .site-content .format-quote .post-format a:before {
 431                 margin-right: auto;
 432                 margin-left: 2px;
 433         }
 434
 435         .site-content .format-gallery .post-format a:before {
 436                 margin-right: auto;
 437                 margin-left: 4px;
 438         }
 439
 440         .site-content .format-aside .post-format a:before {
 441                 margin-right: auto;
 442                 margin-left: 2px;
 443         }
 444
 445         .site-content .featured-post:before {
 446                 margin-right: auto;
 447                 margin-left: 3px;
 448         }
 449
 450         .site-content .entry-date a:before,
 451         .attachment .site-content span.entry-date:before {
 452                 margin-right: auto;
 453                 margin-left: 1px;
 454         }
 455
 456         .site-content .comments-link a:before {
 457                 margin-right: auto;
 458                 margin-left: 2px;
 459         }
 460
 461         .site-content .full-size-link a:before {
 462                 margin-right: auto;
 463                 margin-left: 1px;
 464         }
 465
 466         .entry-content .edit-link a:before,
 467         .entry-meta .edit-link a:before {
 468                 -webkit-transform: scaleX(-1);
 469                 -moz-transform:    scaleX(-1);
 470                 -ms-transform:     scaleX(-1);
 471                 -o-transform:      scaleX(-1);
 472                 transform:         scaleX(-1);
 473         }
 474 }
 475
 476 @media screen and (min-width: 594px) {
 477         .site-content .entry-header {
 478                 padding-right: 30px;
 479                 padding-left: 30px;
 480         }
 481 }
 482
 483 @media screen and (min-width: 673px) {
 484         .search-toggle {
 485                 margin-right: auto;
 486                 margin-left: 18px;
 487         }
 488
 489         .content-area {
 490                 float: right;
 491         }
 492
 493         .site-content {
 494                 margin-right: auto;
 495                 margin-left: 33.33333333%;
 496         }
 497
 498         .archive-header,
 499         .comments-area,
 500         .image-navigation,
 501         .page-header,
 502         .page-content,
 503         .post-navigation,
 504         .site-content .entry-content,
 505         .site-content .entry-summary,
 506         .site-content footer.entry-meta {
 507                 padding-right: 30px;
 508                 padding-left: 30px;
 509         }
 510
 511         .full-width .site-content {
 512                 margin-left: 0;
 513         }
 514
 515         .content-sidebar {
 516                 float: left;
 517                 margin-right: -33.33333333%;
 518                 margin-left: auto;
 519         }
 520
 521         .grid .featured-content .hentry {
 522                 float: right;
 523         }
 524
 525         .slider-control-paging {
 526                 padding-right: 20px;
 527                 padding-left: 0;
 528         }
 529
 530         .slider-direction-nav {
 531                 float: left;
 532         }
 533
 534         .slider-direction-nav li {
 535                 padding: 0 0 0 1px;
 536         }
 537
 538         .slider-direction-nav li:last-child {
 539                 padding: 0 1px 0 0;
 540         }
 541 }
 542
 543 @media screen and (min-width: 783px) {
 544         .header-main {
 545                 padding-right: 30px;
 546                 padding-left: 0;
 547         }
 548
 549         .search-toggle {
 550                 margin-right: auto;
 551                 margin-left: 0;
 552         }
 553
 554         .primary-navigation {
 555                 float: left;
 556                 margin: 0 -12px 0 1px;
 557         }
 558
 559         .primary-navigation ul ul {
 560                 float: right;
 561                 margin: 0;
 562                 right: -999em;
 563                 left: auto;
 564         }
 565
 566         .primary-navigation ul ul ul {
 567                 right: -999em;
 568                 left: auto;
 569         }
 570
 571         .primary-navigation ul li:hover > ul,
 572         .primary-navigation ul li.focus > ul {
 573                 right: auto;
 574         }
 575
 576         .primary-navigation ul ul li:hover > ul,
 577         .primary-navigation ul ul li.focus > ul {
 578                 right: 100%;
 579                 left: auto;
 580         }
 581
 582         .primary-navigation .menu-item-has-children > a,
 583         .primary-navigation .page_item_has_children > a {
 584                 padding-right: 12px;
 585                 padding-left: 26px;
 586         }
 587
 588         .primary-navigation .menu-item-has-children > a:after,
 589         .primary-navigation .page_item_has_children > a:after {
 590                 right: auto;
 591                 left: 12px;
 592         }
 593
 594         .primary-navigation li .menu-item-has-children > a,
 595         .primary-navigation li .page_item_has_children > a {
 596                 padding-right: 12px;
 597                 padding-left: 20px;
 598         }
 599
 600         .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
 601         .primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
 602         .primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
 603         .primary-navigation .page_item_has_children li.page_item_has_children > a:after {
 604                 content: "\f503";
 605                 right: auto;
 606                 left: 8px;
 607         }
 608 }
 609
 610 @media screen and (min-width: 810px) {
 611         .attachment .entry-attachment .attachment {
 612                 margin-right: -168px;
 613                 margin-left: -168px;
 614         }
 615
 616         .attachment .entry-attachment .attachment a {
 617                 display: block;
 618         }
 619
 620         .contributor-avatar {
 621                 margin-right: -168px;
 622                 margin-left: auto;
 623         }
 624
 625         .contributor-summary {
 626                 float: right;
 627         }
 628
 629         .full-width .site-content blockquote.alignright,
 630         .full-width .site-content img.size-full.alignright,
 631         .full-width .site-content img.size-large.alignright,
 632         .full-width .site-content img.size-medium.alignright,
 633         .full-width .site-content .wp-caption.alignright {
 634                 margin-right: -168px;
 635                 margin-left: auto;
 636         }
 637
 638         .full-width .site-content blockquote.alignleft,
 639         .full-width .site-content img.size-full.alignleft,
 640         .full-width .site-content img.size-large.alignleft,
 641         .full-width .site-content img.size-medium.alignleft,
 642         .full-width .site-content .wp-caption.alignleft {
 643                 margin-right: auto;
 644                 margin-left: -168px;
 645         }
 646 }
 647
 648 @media screen and (min-width: 846px) {
 649         .comment-author,
 650         .comment-awaiting-moderation,
 651         .comment-content,
 652         .comment-list .reply,
 653         .comment-metadata {
 654                 padding-right: 50px;
 655                 padding-left: 0;
 656         }
 657
 658         .comment-list .children {
 659                 margin-right: 20px;
 660                 margin-left: auto;
 661         }
 662 }
 663
 664 @media screen and (min-width: 1008px) {
 665         .search-box-wrapper {
 666                 padding-right: 182px;
 667                 padding-left: 0;
 668         }
 669
 670         .main-content {
 671                 float: right;
 672         }
 673
 674         .site-content {
 675                 margin-right: 182px;
 676                 margin-left: 29.04761904%;
 677         }
 678
 679         .full-width .site-content {
 680                 margin-right: 182px;
 681         }
 682
 683         .content-sidebar {
 684                 margin-right: -29.04761904%;
 685                 margin-left: auto;
 686         }
 687
 688         .site:before {
 689                 right: 0;
 690                 left: auto;
 691         }
 692
 693         #secondary {
 694                 float: right;
 695                 margin: 0 -100% 0 0;
 696         }
 697
 698         .secondary-navigation ul ul {
 699                 right: -999em;
 700                 left: auto;
 701         }
 702
 703         .secondary-navigation ul li:hover > ul,
 704         .secondary-navigation ul li.focus > ul {
 705                 right: 162px;
 706                 left: auto;
 707         }
 708
 709         .secondary-navigation .menu-item-has-children > a {
 710                 padding-right: 30px;
 711                 padding-left: 38px;
 712         }
 713
 714         .secondary-navigation .menu-item-has-children > a:after {
 715                 border-right-color: #fff;
 716                 border-left-color: transparent;
 717                 right: auto;
 718                 left: 26px;
 719                 content: "\f503";
 720         }
 721
 722         .footer-sidebar .widget {
 723                 float: right;
 724         }
 725
 726         .featured-content {
 727                 padding-right: 182px;
 728                 padding-left: 0;
 729         }
 730 }
 731
 732 @media screen and (min-width: 1040px) {
 733         .archive-header,
 734         .comments-area,
 735         .image-navigation,
 736         .page-header,
 737         .page-content,
 738         .post-navigation,
 739         .site-content .entry-header,
 740         .site-content .entry-content,
 741         .site-content .entry-summary,
 742         .site-content footer.entry-meta {
 743                 padding-right: 15px;
 744                 padding-left: 15px;
 745         }
 746
 747         .full-width .archive-header,
 748         .full-width .comments-area,
 749         .full-width .image-navigation,
 750         .full-width .page-header,
 751         .full-width .page-content,
 752         .full-width .post-navigation,
 753         .full-width .site-content .entry-header,
 754         .full-width .site-content .entry-content,
 755         .full-width .site-content .entry-summary,
 756         .full-width .site-content footer.entry-meta {
 757                 padding-right: 30px;
 758                 padding-left: 30px;
 759         }
 760 }
 761
 762 @media screen and (min-width: 1080px) {
 763         .site-content {
 764                 margin-right: 222px;
 765                 margin-left: 29.04761904%;
 766         }
 767
 768         .full-width .site-content {
 769                 margin-right: 222px;
 770         }
 771
 772         .search-box-wrapper,
 773         .featured-content {
 774                 padding-right: 222px;
 775                 padding-left: 0;
 776         }
 777
 778         .secondary-navigation ul li:hover > ul,
 779         .secondary-navigation ul li.focus > ul {
 780                 right: 202px;
 781                 left: auto;
 782         }
 783
 784         .slider-control-paging {
 785                 padding-right: 24px;
 786                 padding-left: 0;
 787         }
 788
 789         .slider-control-paging li {
 790                 margin: 12px 0 12px 12px;
 791         }
 792
 793         .slider-control-paging a:before {
 794                 right: 6px;
 795                 left: auto;
 796         }
 797 }
 798
 799 @media screen and (min-width: 1110px) {
 800         .archive-header,
 801         .comments-area,
 802         .image-navigation,
 803         .page-header,
 804         .page-content,
 805         .post-navigation,
 806         .site-content .entry-header,
 807         .site-content .entry-content,
 808         .site-content .entry-summary,
 809         .site-content footer.entry-meta {
 810                 padding-right: 30px;
 811                 padding-left: 30px;
 812         }
 813 }
 814
 815 @media screen and (min-width: 1218px) {
 816         .archive-header,
 817         .comments-area,
 818         .image-navigation,
 819         .page-header,
 820         .page-content,
 821         .post-navigation,
 822         .site-content .entry-header,
 823         .site-content .entry-content,
 824         .site-content .entry-summary,
 825         .site-content footer.entry-meta {
 826                 margin-left: 54px;
 827         }
 828
 829         .full-width .archive-header,
 830         .full-width .comments-area,
 831         .full-width .image-navigation,
 832         .full-width .page-header,
 833         .full-width .page-content,
 834         .full-width .post-navigation,
 835         .full-width .site-content .entry-header,
 836         .full-width .site-content .entry-content,
 837         .full-width .site-content .entry-summary,
 838         .full-width .site-content footer.entry-meta {
 839                 margin-right: auto;
 840                 margin-left: auto;
 841         }
 842 }
 843
 844 @media screen and (min-width: 1260px) {
 845         .site-content blockquote.alignright {
 846                 margin-right: -18%;
 847                 margin-left: auto;
 848         }
 849
 850         .site-content blockquote.alignleft {
 851                 margin-left: -18%;
 852                 margin-right: auto;
 853         }
 854 }