Make WordPress Core

source: trunk/wp-content/themes/twentythirteen/rtl.css @ 23964

Last change on this file since 23964 was 23964, checked in by lancewillett, 11 years ago

Twenty Thirteen: better handling of media in main content area, accounting for a sidebar and all viewport width possibilities. Props sabreuse and obenland, see #23955.

  • Property svn:eol-style set to native
File size: 16.4 KB
Line 
1/*
2Theme Name: Twenty Thirteen
3Description: Adds support for languages written in a Right To Left (RTL) direction.
4It's easy, just a matter of overwriting all the horizontal positioning attributes
5of your CSS stylesheet in a separate stylesheet file named rtl.css.
6
7See 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 *   4.1 - Site Header
17 *   4.2 - Navigation
18 * 5.0 - Content
19 *   5.2 - Entry Meta
20 *   5.4 - Galleries
21 *   5.5 - Post Formats
22 *   5.6 - Attachments
23 *   5.7 - Post/Paging Navigation
24 *   5.8 - Author Bio
25 *   5.9 - Archives
26 *   5.10 - Search Results/No posts
27 *   5.12 - Comments
28 * 6.0 - Sidebar
29 *   6.1 - Widgets
30 * 7.0 - Footer
31 * 8.0 - Media Queries
32 * 9.0 - Print
33 * ----------------------------------------------------------------------------
34 */
35
36
37/**
38 * 1.0 Reset
39 * ----------------------------------------------------------------------------
40 */
41
42body {
43        direction: rtl;
44        unicode-bidi: embed;
45}
46
47a {
48        display: inline-block;
49}
50
51blockquote blockquote {
52        margin-left: 0;
53        margin-right: 24px;
54}
55
56menu,
57ol,
58ul {
59        padding: 0 40px 0 0;
60}
61
62caption,
63th,
64td {
65        text-align: right;
66}
67
68td {
69        padding-left: 10px;
70        padding-right: 0;
71}
72.assistive-text:focus {
73        left: auto;
74        right: 5px;
75}
76
77
78/**
79 * 2.0 Repeatable patterns
80 * ----------------------------------------------------------------------------
81 */
82
83.genericon:after,
84.menu-toggle:before,
85.featured-post:after,
86.date a:after,
87.entry-meta .author a:after,
88.format-audio .entry-content:after,
89.comments-link a:after,
90.tags-links a:first-child:after,
91.categories-links a:first-child:after,
92.edit-link a:after,
93.attachment .entry-title:after,
94.attachment-meta:after,
95.attachment-meta a:after,
96.comment-awaiting-moderation:after,
97.comment-reply-link:after,
98#reply-title small a:after,
99.bypostauthor .fn:after,
100.error404 .page-title:after {
101        -webkit-font-smoothing: antialiased;
102        font: normal 16px/1 Genericons;
103        vertical-align: text-bottom;
104}
105
106
107/**
108 * 4.0 Header
109 * ----------------------------------------------------------------------------
110 */
111
112/**
113 * 4.1 Site Header
114 * ----------------------------------------------------------------------------
115 */
116.site-header > a:first-child {
117        display: inherit;
118}
119
120.site-description {
121        font-style: normal;
122}
123
124
125/**
126 * 4.2 Navigation
127 * ----------------------------------------------------------------------------
128 */
129
130/* Navbar */
131ul.nav-menu,
132div.nav-menu > ul {
133        margin: 0 -20px 0 0;
134        padding: 0 0 0 40px;
135}
136
137.nav-menu .sub-menu,
138.nav-menu .children {
139        float: right;
140        left: auto;
141        right: -2px;
142}
143
144.nav-menu .sub-menu ul,
145.nav-menu .children ul {
146        border-left: 2px solid #F7F5E7;
147        border-right: 0;
148        left: auto;
149        right: 100%;
150}
151
152.main-navigation .searchform {
153        left: 0;
154        right: auto;
155}
156
157.site-header .searchform [type="search"] {
158        background-position: 98% center;
159        padding: 0 34px 0 0;
160}
161
162.nav-menu .current_page_item > a,
163.nav-menu .current_page_ancestor > a,
164.nav-menu .current-menu-item > a,
165.nav-menu .current-menu-ancestor > a {
166        font-style: normal;
167}
168
169.menu-toggle {
170        padding-left: auto;
171        padding-right: 20px;
172}
173
174
175/**
176 * 5.0 Content
177 * ----------------------------------------------------------------------------
178 */
179
180.sidebar .entry-media {
181        padding-left: 316px;
182        padding-right: 0;
183}
184
185.sidebar .entry-header,
186.sidebar .entry-content,
187.sidebar .entry-summary,
188.sidebar .entry-meta {
189        padding-left: 376px;
190        padding-right: 60px;
191}
192
193
194/**
195 * 5.2 Entry Meta
196 * ----------------------------------------------------------------------------
197 */
198
199.entry-meta > span {
200        margin-left: 20px;
201        margin-right: auto;
202}
203
204.entry-meta > span:last-child {
205        margin-left: 0;
206        margin-right: auto;
207}
208
209.featured-post:before {
210        content: normal;
211        margin-right: auto;
212}
213
214.featured-post:after {
215        content: "\f308";
216        margin-left: 2px;
217}
218
219.entry-meta .date a:before {
220        content: normal;
221}
222
223.entry-meta .date a:after {
224        content: "\f303";
225}
226
227.comments-link a:before {
228        content: normal;
229        margin-left: auto;
230        top: auto;
231}
232
233.comments-link a:after {
234        content: "\f300";
235        margin-left: 2px;
236        top: -1px;
237        position: relative;
238}
239
240.entry-meta .author a:before {
241        content: normal;
242        top: auto;
243}
244
245.entry-meta .author a:after {
246        content: "\f304";
247        top: -1px;
248        position: relative;
249}
250
251.categories-links a:first-child:before {
252        content: normal;
253}
254
255.categories-links a:first-child:after {
256        content: "\f301";
257}
258
259.tags-links a:first-child:before {
260        content: normal;
261        top: auto;
262}
263
264.tags-links a:first-child:after {
265        content: "\f302";
266        top: -1px;
267        position: relative;
268}
269
270.edit-link a:before {
271        content: normal;
272        top: auto;
273}
274
275.edit-link a:after {
276        content: "\f411";
277        top: -1px;
278        position: relative;
279}
280
281.page-links .page-links-title {
282        margin-left: 20px;
283        margin-right: auto;
284}
285
286/**
287 * 5.4 Galleries
288 * ----------------------------------------------------------------------------
289 */
290
291.gallery {
292        margin-left: auto;
293        margin-right: -4px;
294}
295
296.gallery-item {
297        float: right;
298        margin: 0 0 4px 4px;
299}
300
301.gallery-item a {
302        display: inline;
303}
304
305.gallery-columns-1 .gallery-item:nth-of-type(1n),
306.gallery-columns-2 .gallery-item:nth-of-type(2n),
307.gallery-columns-3 .gallery-item:nth-of-type(3n),
308.gallery-columns-4 .gallery-item:nth-of-type(4n),
309.gallery-columns-5 .gallery-item:nth-of-type(5n),
310.gallery-columns-6 .gallery-item:nth-of-type(6n),
311.gallery-columns-7 .gallery-item:nth-of-type(7n),
312.gallery-columns-8 .gallery-item:nth-of-type(8n),
313.gallery-columns-9 .gallery-item:nth-of-type(9n) {
314        margin-left: 0;
315        margin-right: 4px;
316}
317
318
319/**
320 * 5.5 Post Formats
321 * ----------------------------------------------------------------------------
322 */
323
324.format-aside .entry-content .date {
325        margin-left: auto;
326        margin-right: 20px;
327}
328
329.format-aside .entry-content .date a:before {
330        content: normal;
331}
332
333.format-aside .entry-content .date a:after {
334        content: "\f303";
335}
336
337.format-aside cite:before {
338        content: normal;
339        margin-right: auto;
340}
341
342.format-aside cite:after {
343        content: "\2014";
344        margin-left: 5px;
345}
346
347.format-audio .entry-media:before {
348        -ms-filter: "FlipH";
349        filter: FlipH;
350        float: right;
351        -webkit-transform: scaleX(-1);
352        -moz-transform:    scaleX(-1);
353        -o-transform:      scaleX(-1);
354        transform:         scaleX(-1);
355}
356
357.format-audio .entry-media,
358.sidebar .format-audio .entry-media {
359        padding-left: 374px;
360        padding-right: 60px;
361}
362
363.format-audio .audio-content {
364        background-position: right top;
365        float: left;
366        padding-left: auto;
367        padding-right: 35px;
368}
369
370.format-chat .entry-meta .date a:before {
371        content: normal;
372        margin-right: auto;
373}
374
375.format-chat .entry-meta .date a:after {
376        content: "\f108";
377        margin-left: 2px;
378}
379
380.blog .format-gallery .gallery-item,
381.archive .format-gallery .gallery-item,
382.search .format-gallery .gallery-item {
383        margin-left: 4px;
384        margin-right: auto;
385}
386.blog .format-gallery .gallery-item img,
387.archive .format-gallery .gallery-item img,
388.search .format-gallery .gallery-item img {
389        position: absolute;
390        left: 0;
391}
392
393.format-image .wp-caption-text {
394        text-align: right;
395}
396
397.format-link .entry-title {
398        margin-left: 20px;
399        margin-right: auto;
400}
401
402.format-status .entry-content,
403.format-status .entry-meta {
404        padding-left: auto;
405        padding-right: 35px;
406}
407
408.sidebar .format-status .entry-content,
409.sidebar .format-status .entry-meta {
410        padding-left: 376px;
411        padding-right: 95px;
412}
413
414.format-status .entry-content:before,
415.format-status .entry-meta:before {
416        left: auto;
417        right: 10px;
418}
419
420.sidebar .format-status .entry-content:before,
421.sidebar .format-status .entry-meta:before {
422        left: auto;
423        right: 70px;
424}
425
426.format-status .entry-content p:first-child:before {
427        left: auto;
428        right: 4px;
429}
430
431.sidebar .format-status .entry-content p:first-child:before {
432        left: auto;
433        right: 64px;
434}
435
436.format-status .entry-meta .date a:before {
437        content: normal;
438}
439
440.format-status .entry-meta .date a:after {
441        content: "\f105";
442}
443
444
445/**
446 * 5.6 Attachments
447 * ----------------------------------------------------------------------------
448 */
449
450.attachment .entry-title {
451        float: right;
452}
453
454.attachment .entry-title:before {
455        content: normal;
456        font-size: inherit;
457        margin-right: auto;
458}
459
460.attachment .entry-title:after {
461        content: "\f416";
462        font-size: 32px;
463        margin-left: 10px;
464}
465
466.attachment .entry-meta {
467        float: left;
468}
469
470.attachment-meta:before,
471.full-size-link a:before {
472        content: normal;
473}
474
475.attachment-meta:after {
476        content: "\f307";
477}
478
479.full-size-link a:after {
480        content: "\f402";
481}
482
483.full-size-link:after {
484        content: normal;
485}
486
487.image-navigation .nav-previous {
488        left: auto;
489        right: 0;
490}
491
492.image-navigation .nav-next {
493        left: 0;
494        right: auto;
495}
496
497.attachment .entry-caption {
498        text-align: right;
499}
500
501
502/**
503 * 5.7 Post/Paging Navigation
504 * ----------------------------------------------------------------------------
505 */
506
507.navigation .nav-previous {
508        float: right;
509}
510
511.navigation .nav-next {
512        float: left;
513}
514
515.sidebar .paging-navigation .nav-links,
516.sidebar .post-navigation .nav-links {
517        padding-left: 376px;
518        padding-right: 60px;
519}
520
521.paging-navigation .nav-previous .meta-nav {
522        margin-left: 10px;
523        margin-right: auto;
524}
525
526.paging-navigation .nav-next .meta-nav {
527        margin-left: auto;
528        margin-right: 10px;
529}
530
531.post-navigation a[rel="next"] {
532        float: left;
533        text-align: left;
534}
535
536
537/**
538 * 5.8 Author Bio
539 * ----------------------------------------------------------------------------
540 */
541
542.author-info {
543        text-align: right; /* gallery & video post formats */
544}
545
546.author.sidebar .author-info {
547        padding-left: 376px;
548        padding-right: 60px;
549}
550
551.author-avatar {
552        float: right;
553        margin: 0 0 30px 30px;
554}
555
556.author-link {
557        margin-left: auto;
558        margin-right: 2px;
559}
560
561
562/**
563 * 5.9 Archives
564 * ----------------------------------------------------------------------------
565 */
566
567.sidebar .archive-meta {
568        padding-left: 316px;
569        padding-right: 0;
570}
571
572
573/**
574 * 5.10 Search Results/No posts
575 * ----------------------------------------------------------------------------
576 */
577
578.sidebar .page-content {
579        padding-left: 376px;
580        padding-right: 60px;
581}
582
583/**
584 * 5.12 Comments
585 * ----------------------------------------------------------------------------
586 */
587
588.sidebar .comments-title,
589.sidebar .comment-list,
590.sidebar #reply-title,
591.sidebar .comment-navigation,
592.sidebar #respond #commentform {
593        padding-left: 376px;
594        padding-right: 60px;
595}
596
597.comment-list .children {
598        margin-left: auto;
599        margin-right: 20px;
600}
601
602.comment-author {
603        margin-left: 50px;
604        margin-right: auto;
605        left: auto;
606        right: 0;
607}
608
609
610.bypostauthor .fn:before {
611        content: normal;
612        vertical-align: inherit;
613}
614
615.bypostauthor .fn:after {
616        content: "\f408";
617        vertical-align: text-top;
618}
619
620.comment-list .edit-link {
621        margin-left: auto;
622        margin-right: 20px;
623}
624
625.comment-meta,
626.comment-content,
627.reply {
628        float: left;
629}
630
631.comment-awaiting-moderation:before {
632        content: normal;
633        margin-right: auto;
634        top: auto;
635}
636
637.comment-awaiting-moderation:after {
638        content: "\f414";
639        margin-left: 5px;
640        position: relative;
641        top: -2px;
642}
643
644.comment-reply-link:before {
645        content: normal;
646        margin-right: auto;
647}
648
649.comment-reply-link:after {
650        content: "\f412";
651        margin-left: 3px;
652}
653
654#reply-title small a {
655        float: left;
656        height: auto;
657        overflow: visible;
658        width: auto;
659}
660
661#reply-title small a:before {
662        content: normal;
663}
664
665#commentform label {
666        float: right;
667}
668
669.form-allowed-tags code {
670        margin-left: auto;
671        margin-right: 3px;
672}
673
674.sidebar .no-comments {
675        padding-left: 376px;
676        padding-right: 60px;
677}
678
679
680/**
681 * 6.0 Sidebar
682 * ----------------------------------------------------------------------------
683 */
684
685.site-main .widget-area {
686        float: left;
687}
688
689.widget-area a {
690        max-width: 100%;
691}
692
693
694/**
695 * 6.1 Widgets
696 * ----------------------------------------------------------------------------
697 */
698
699.widget .widget-title {
700        font-style: normal;
701}
702
703.widget li > ul,
704.widget li > ol {
705        margin-left: auto;
706        margin-right: 20px;
707}
708
709/**
710 * 7.0 Footer
711 * ----------------------------------------------------------------------------
712 */
713
714.site-footer .widget-area,
715.sidebar .site-footer {
716        text-align: right;
717}
718.sidebar .site-footer .widget-area {
719        left: auto;
720        right: -158px;
721}
722
723.site-footer .widget {
724        float: right;
725        margin-right: auto;
726        margin-left: 20px;
727}
728
729.sidebar .site-footer .widget:nth-of-type(4),
730.sidebar .site-footer .widget:nth-of-type(3) {
731        margin-left: 0;
732        margin-right: auto;
733}
734.site-info {
735        text-align: right;
736}
737
738
739/**
740 * 8.0 Media Queries
741 * ----------------------------------------------------------------------------
742 */
743
744@media (max-width: 1069px) {
745        .sidebar .entry-media,
746        .format-audio .entry-media,
747        .sidebar .format-audio .entry-media {
748                padding-left: 376px;
749                padding-right: 60px;
750        }
751       
752        ul.nav-menu,
753        div.nav-menu > ul {
754                margin-left: auto;
755                margin-right: 0;
756        }
757
758        .error404 .page-header,
759        .sidebar .format-image .entry-content img.size-full,
760        .sidebar .format-image .wp-caption:first-child .wp-caption-text {
761                margin-right: auto;
762        }
763
764        .main-navigation .searchform {
765                right: auto;
766                left: 20px;
767        }
768
769        .site-main .widget-area {
770                margin-left: 60px;
771                margin-right: auto;
772        }
773}
774
775@media (max-width: 999px) {
776        .sidebar .entry-header,
777        .sidebar .entry-content,
778        .sidebar .entry-summary,
779        .sidebar .entry-meta,
780        .sidebar .comment-list,
781        .sidebar #reply-title,
782        .sidebar .comment-navigation,
783        .sidebar #respond #commentform,
784        .sidebar .featured-gallery,
785        .sidebar .post-navigation .nav-links,
786        .author.sidebar .author-info,
787        .sidebar .format-image .entry-content {
788                max-width: 604px;
789                padding-left: 0;
790                padding-right: 0;
791        }
792
793        .sidebar .entry-media,
794        .format-audio .entry-media,
795        .sidebar .format-audio .entry-media {
796                padding-left: 0;
797                padding-right: 0;
798        }
799
800        .site-main .widget-area {
801                float: none;
802                margin-left: auto;
803        }
804
805        .attachment .entry-meta {
806                float: right;
807                text-align: right;
808        }
809
810        .sidebar .format-status .entry-content,
811        .sidebar .format-status .entry-meta {
812                padding-left: auto;
813                padding-right: 35px;
814        }
815
816        .sidebar .format-status .entry-content:before,
817        .sidebar .format-status .entry-meta:before {
818                left: auto;
819                right: 10px;
820        }
821
822        .sidebar .format-status .entry-content p:first-child:before {
823                left: auto;
824                right: 4px;
825        }
826
827        .sidebar .site-footer .widget-area {
828                left: auto;
829                right: 0;
830        }
831
832        .sidebar .paging-navigation .nav-links {
833                padding: 0 60px;
834        }
835}
836
837@media (max-width: 767px) {
838        .format-image .entry-content img:first-of-type,
839        .format-image .wp-caption:first-child .wp-caption-text {
840                margin-right: auto;
841        }
842}
843
844@media (max-width: 643px) {
845        #content .format-status .entry-content,
846        #content .format-status .entry-met {
847                padding-left: auto;
848                padding-right: 35px;
849        }
850
851        .menu-toggle:before {
852                content: "\f502";
853                font-size: 12px;
854                padding-right: 8px;
855                vertical-align: -webkit-calc(-4px);
856                vertical-align:         calc(-4px);
857        }
858
859        .menu-toggle:after {
860                content: normal;
861                font-size: 12px;
862                padding-left: auto;
863                vertical-align: baseline;
864        }
865
866        .toggled-on .menu-toggle:before {
867                content: "\f500";
868                vertical-align: -webkit-calc(2px);
869                vertical-align:         calc(2px);
870        }
871
872        .toggled-on .menu-toggle:after {
873                content: normal;
874                vertical-align: baseline;
875        }
876
877        .toggled-on .nav-menu,
878        .toggled-on .nav-menu > ul {
879                margin-left: auto;
880                margin-right: 0;
881        }
882
883        .toggled-on .nav-menu li > ul {
884                margin-left: auto;
885                margin-right: 20px;
886                right: auto;
887        }
888
889        #content .featured-gallery {
890                padding-left: auto;
891                padding-right: 24px;
892        }
893
894        .gallery-columns-1 .gallery-item {
895                margin-left: 0;
896                margin-right: auto;
897        }
898
899        .comment-author {
900                margin-left: 30px;
901                margin-right: auto;
902        }
903
904        .format-audio .audio-content {
905                background: none;
906                float: none;
907                padding-left: auto;
908                padding-right: 0;
909        }
910
911        .single .gallery-columns-3 .gallery-item:nth-of-type(3n) {
912                margin-left: 4px;
913                margin-right: auto;
914        }
915}
916
917@media (max-width: 359px) {
918        .gallery {
919                margin-left: auto;
920                margin-right: 0;
921        }
922
923        .gallery .gallery-item,
924        .single .gallery-columns-2.gallery-size-thumbnail .gallery-item,
925        .blog .format-gallery .gallery-item,
926        .archive .format-gallery .gallery-item,
927        .search .format-gallery .gallery-item,
928        .single .gallery.gallery-columns-3 .gallery-item:nth-of-type(even),
929        .gallery-columns-5 .gallery-item:nth-of-type(5n),
930        .gallery-columns-7 .gallery-item:nth-of-type(7n),
931        .gallery-columns-9 .gallery-item:nth-of-type(9n) {
932                margin-left: 2%;
933                margin-right: auto;
934        }
935
936        .blog .format-gallery .gallery-item:nth-of-type(odd),
937        .archive .format-gallery .gallery-item:nth-of-type(odd),
938        .search .format-gallery .gallery-item:nth-of-type(odd),
939        .single .gallery .gallery-item:nth-of-type(even),
940        .single .gallery.gallery-columns-3 .gallery-item:nth-of-type(3n) {
941                margin-left: 0;
942                margin-right: auto;
943        }
944}
945
946
947/**
948 * 9.0 Print
949 * ----------------------------------------------------------------------------
950 */
951
952@media print {
953        .entry-content img.alignleft,
954        .entry-content .wp-caption.alignleft {
955                margin-left: auto;
956                margin-right: 0;
957        }
958
959        .entry-content img.alignright,
960        .entry-content .wp-caption.alignright {
961                margin-left: 0;
962                margin-right: auto;
963        }
964}
Note: See TracBrowser for help on using the repository browser.