Make WordPress Themes

source: twentyfourteen/4.3/rtl.css

Last change on this file was 161206, checked in by themedropbox, 4 years ago

New version of Twenty Fourteen - 3.3

File size: 15.6 KB
Line 
1/*
2Theme Name: Twenty Fourteen
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 https://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
38body {
39        direction: rtl;
40        unicode-bidi: embed;
41}
42
43a {
44        display: inline-block;
45}
46
47ul,
48ol {
49        margin: 0 20px 24px 0;
50}
51
52li > ul,
53li > ol {
54        margin: 0 20px 0 0;
55}
56
57caption,
58th,
59td {
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.comment-form #wp-comment-cookies-consent {
292        margin: 0 0 0 10px;
293}
294
295/**
296 * 7.0 Sidebars
297 * -----------------------------------------------------------------------------
298 */
299
300/**
301 * 7.1 Widgets
302 * -----------------------------------------------------------------------------
303 */
304
305.widget li > ol,
306.widget li > ul {
307        margin-right: 10px;
308        margin-left: auto;
309}
310
311.widget input,
312.widget textarea {
313        padding: 1px 4px 2px 2px;
314}
315
316.widget_calendar caption {
317        text-align: right;
318}
319
320.widget_calendar .wp-calendar-nav-prev,
321.widget_calendar #prev {
322        padding-right: 5px;
323        padding-left: 0;
324        text-align: right;
325}
326
327.widget_calendar .wp-calendar-nav-next,
328.widget_calendar #next {
329        padding-right: 0;
330        padding-left: 5px;
331        text-align: left;
332}
333
334.widget_twentyfourteen_ephemera .entry-content ul,
335.widget_twentyfourteen_ephemera .entry-content ol {
336        margin: 0 20px 18px 0;
337}
338
339.widget_twentyfourteen_ephemera .entry-content li > ul,
340.widget_twentyfourteen_ephemera .entry-content li > ol {
341        margin: 0 20px 0 0;
342}
343
344.widget_text ul,
345.widget_text ol {
346        margin: 0 10px 12px 0;
347}
348
349/**
350 * 7.2 Content Sidebar Widgets
351 * -----------------------------------------------------------------------------
352 */
353
354.content-sidebar .widget li > ol,
355.content-sidebar .widget li > ul {
356        margin-right: 18px;
357        margin-left: auto;
358}
359
360.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
361        margin: -1px 0 0 18px;
362}
363
364/**
365 * 8.0 Footer
366 * -----------------------------------------------------------------------------
367 */
368
369.site-info span[role=separator] {
370        padding: 0 0.5em;
371}
372
373/**
374 * 9.0 Featured Content
375 * -----------------------------------------------------------------------------
376 */
377
378.featured-content .post-thumbnail img {
379        right: 0;
380        left: auto;
381}
382
383.slider-viewport {
384        direction: ltr;
385}
386
387.slider .featured-content .entry-header {
388        right: 0;
389        left: auto;
390        text-align: right;
391}
392
393.slider-control-paging {
394        float: right;
395}
396
397.slider-control-paging li {
398        float: right;
399        margin: 2px 0 2px 4px;
400}
401
402.slider-control-paging li:last-child {
403        margin-right: auto;
404        margin-left: 0;
405}
406
407.slider-control-paging a:before {
408        right: 10px;
409        left: auto;
410}
411
412.slider-direction-nav li {
413        border-width: 2px 0 0 1px;
414        float: right;
415}
416
417.slider-direction-nav li:last-child {
418        border-width: 2px 1px 0 0;
419}
420
421.slider-direction-nav a:before {
422        content: "\f429";
423}
424
425.slider-direction-nav .slider-next:before {
426        content: "\f430";
427}
428
429
430/**
431 * 10.0 Media Queries
432 * -----------------------------------------------------------------------------
433 */
434
435@media screen and (max-width: 400px) {
436        .list-view .site-content .post-thumbnail img {
437                float: right;
438                margin: 0 0 3px 10px;
439        }
440}
441
442@media screen and (min-width: 401px) {
443        .site-content .entry-meta > span {
444                margin-right: auto;
445                margin-left: 10px;
446        }
447
448        .site-content .format-quote .post-format a:before {
449                margin-right: auto;
450                margin-left: 2px;
451        }
452
453        .site-content .format-gallery .post-format a:before {
454                margin-right: auto;
455                margin-left: 4px;
456        }
457
458        .site-content .format-aside .post-format a:before {
459                margin-right: auto;
460                margin-left: 2px;
461        }
462
463        .site-content .featured-post:before {
464                margin-right: auto;
465                margin-left: 3px;
466        }
467
468        .site-content .entry-date a:before,
469        .attachment .site-content span.entry-date:before {
470                margin-right: auto;
471                margin-left: 1px;
472        }
473
474        .site-content .comments-link a:before {
475                margin-right: auto;
476                margin-left: 2px;
477        }
478
479        .site-content .full-size-link a:before {
480                margin-right: auto;
481                margin-left: 1px;
482        }
483
484        .entry-content .edit-link a:before,
485        .entry-meta .edit-link a:before {
486                -webkit-transform: scaleX(-1);
487                -moz-transform:    scaleX(-1);
488                -ms-transform:     scaleX(-1);
489                -o-transform:      scaleX(-1);
490                transform:         scaleX(-1);
491        }
492}
493
494@media screen and (min-width: 594px) {
495        .site-content .entry-header {
496                padding-right: 30px;
497                padding-left: 30px;
498        }
499}
500
501@media screen and (min-width: 673px) {
502        .search-toggle {
503                margin-right: auto;
504                margin-left: 18px;
505        }
506
507        .content-area {
508                float: right;
509        }
510
511        .site-content {
512                margin-right: auto;
513                margin-left: 33.33333333%;
514        }
515
516        .archive-header,
517        .comments-area,
518        .image-navigation,
519        .page-header,
520        .page-content,
521        .post-navigation,
522        .site-content .entry-content,
523        .site-content .entry-summary,
524        .site-content footer.entry-meta {
525                padding-right: 30px;
526                padding-left: 30px;
527        }
528
529        .full-width .site-content {
530                margin-left: 0;
531        }
532
533        .content-sidebar {
534                float: left;
535                margin-right: -33.33333333%;
536                margin-left: auto;
537        }
538
539        .grid .featured-content .hentry {
540                float: right;
541        }
542
543        .slider-control-paging {
544                padding-right: 20px;
545                padding-left: 0;
546        }
547
548        .slider-direction-nav {
549                float: left;
550        }
551
552        .slider-direction-nav li {
553                padding: 0 0 0 1px;
554        }
555
556        .slider-direction-nav li:last-child {
557                padding: 0 1px 0 0;
558        }
559}
560
561@media screen and (min-width: 783px) {
562        .header-main {
563                padding-right: 30px;
564                padding-left: 0;
565        }
566
567        .search-toggle {
568                margin-right: auto;
569                margin-left: 0;
570        }
571
572        .primary-navigation {
573                float: left;
574                margin: 0 -12px 0 1px;
575        }
576
577        .primary-navigation ul ul {
578                float: right;
579                margin: 0;
580                right: -999em;
581                left: auto;
582        }
583
584        .primary-navigation ul ul ul {
585                right: -999em;
586                left: auto;
587        }
588
589        .primary-navigation ul li:hover > ul,
590        .primary-navigation ul li.focus > ul {
591                right: auto;
592        }
593
594        .primary-navigation ul ul li:hover > ul,
595        .primary-navigation ul ul li.focus > ul {
596                right: 100%;
597                left: auto;
598        }
599
600        .primary-navigation .menu-item-has-children > a,
601        .primary-navigation .page_item_has_children > a {
602                padding-right: 12px;
603                padding-left: 26px;
604        }
605
606        .primary-navigation .menu-item-has-children > a:after,
607        .primary-navigation .page_item_has_children > a:after {
608                right: auto;
609                left: 12px;
610        }
611
612        .primary-navigation li .menu-item-has-children > a,
613        .primary-navigation li .page_item_has_children > a {
614                padding-right: 12px;
615                padding-left: 20px;
616        }
617
618        .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
619        .primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
620        .primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
621        .primary-navigation .page_item_has_children li.page_item_has_children > a:after {
622                content: "\f503";
623                right: auto;
624                left: 8px;
625        }
626}
627
628@media screen and (min-width: 810px) {
629        .attachment .entry-attachment .attachment {
630                margin-right: -168px;
631                margin-left: -168px;
632        }
633
634        .attachment .entry-attachment .attachment a {
635                display: block;
636        }
637
638        .contributor-avatar {
639                margin-right: -168px;
640                margin-left: auto;
641        }
642
643        .contributor-summary {
644                float: right;
645        }
646
647        .full-width .site-content blockquote.alignright,
648        .full-width .site-content img.size-full.alignright,
649        .full-width .site-content img.size-large.alignright,
650        .full-width .site-content img.size-medium.alignright,
651        .full-width .site-content .wp-caption.alignright {
652                margin-right: -168px;
653                margin-left: auto;
654        }
655
656        .full-width .site-content blockquote.alignleft,
657        .full-width .site-content img.size-full.alignleft,
658        .full-width .site-content img.size-large.alignleft,
659        .full-width .site-content img.size-medium.alignleft,
660        .full-width .site-content .wp-caption.alignleft {
661                margin-right: auto;
662                margin-left: -168px;
663        }
664}
665
666@media screen and (min-width: 846px) {
667        .comment-author,
668        .comment-awaiting-moderation,
669        .comment-content,
670        .comment-list .reply,
671        .comment-metadata {
672                padding-right: 50px;
673                padding-left: 0;
674        }
675
676        .comment-list .children {
677                margin-right: 20px;
678                margin-left: auto;
679        }
680}
681
682@media screen and (min-width: 1008px) {
683        .search-box-wrapper {
684                padding-right: 182px;
685                padding-left: 0;
686        }
687
688        .main-content {
689                float: right;
690        }
691
692        .site-content {
693                margin-right: 182px;
694                margin-left: 29.04761904%;
695        }
696
697        .full-width .site-content {
698                margin-right: 182px;
699        }
700
701        .content-sidebar {
702                margin-right: -29.04761904%;
703                margin-left: auto;
704        }
705
706        .site:before {
707                right: 0;
708                left: auto;
709        }
710
711        #secondary {
712                float: right;
713                margin: 0 -100% 0 0;
714        }
715
716        .secondary-navigation ul ul {
717                right: -999em;
718                left: auto;
719        }
720
721        .secondary-navigation ul li:hover > ul,
722        .secondary-navigation ul li.focus > ul {
723                right: 162px;
724                left: auto;
725        }
726
727        .secondary-navigation .menu-item-has-children > a {
728                padding-right: 30px;
729                padding-left: 38px;
730        }
731
732        .secondary-navigation .menu-item-has-children > a:after {
733                border-right-color: #fff;
734                border-left-color: transparent;
735                right: auto;
736                left: 26px;
737                content: "\f503";
738        }
739
740        .footer-sidebar .widget {
741                float: right;
742        }
743
744        .featured-content {
745                padding-right: 182px;
746                padding-left: 0;
747        }
748}
749
750@media screen and (min-width: 1040px) {
751        .archive-header,
752        .comments-area,
753        .image-navigation,
754        .page-header,
755        .page-content,
756        .post-navigation,
757        .site-content .entry-header,
758        .site-content .entry-content,
759        .site-content .entry-summary,
760        .site-content footer.entry-meta {
761                padding-right: 15px;
762                padding-left: 15px;
763        }
764
765        .full-width .archive-header,
766        .full-width .comments-area,
767        .full-width .image-navigation,
768        .full-width .page-header,
769        .full-width .page-content,
770        .full-width .post-navigation,
771        .full-width .site-content .entry-header,
772        .full-width .site-content .entry-content,
773        .full-width .site-content .entry-summary,
774        .full-width .site-content footer.entry-meta {
775                padding-right: 30px;
776                padding-left: 30px;
777        }
778}
779
780@media screen and (min-width: 1080px) {
781        .site-content {
782                margin-right: 222px;
783                margin-left: 29.04761904%;
784        }
785
786        .full-width .site-content {
787                margin-right: 222px;
788        }
789
790        .search-box-wrapper,
791        .featured-content {
792                padding-right: 222px;
793                padding-left: 0;
794        }
795
796        .secondary-navigation ul li:hover > ul,
797        .secondary-navigation ul li.focus > ul {
798                right: 202px;
799                left: auto;
800        }
801
802        .slider-control-paging {
803                padding-right: 24px;
804                padding-left: 0;
805        }
806
807        .slider-control-paging li {
808                margin: 12px 0 12px 12px;
809        }
810
811        .slider-control-paging a:before {
812                right: 6px;
813                left: auto;
814        }
815}
816
817@media screen and (min-width: 1110px) {
818        .archive-header,
819        .comments-area,
820        .image-navigation,
821        .page-header,
822        .page-content,
823        .post-navigation,
824        .site-content .entry-header,
825        .site-content .entry-content,
826        .site-content .entry-summary,
827        .site-content footer.entry-meta {
828                padding-right: 30px;
829                padding-left: 30px;
830        }
831}
832
833@media screen and (min-width: 1218px) {
834        .archive-header,
835        .comments-area,
836        .image-navigation,
837        .page-header,
838        .page-content,
839        .post-navigation,
840        .site-content .entry-header,
841        .site-content .entry-content,
842        .site-content .entry-summary,
843        .site-content footer.entry-meta {
844                margin-left: 54px;
845        }
846
847        .full-width .archive-header,
848        .full-width .comments-area,
849        .full-width .image-navigation,
850        .full-width .page-header,
851        .full-width .page-content,
852        .full-width .post-navigation,
853        .full-width .site-content .entry-header,
854        .full-width .site-content .entry-content,
855        .full-width .site-content .entry-summary,
856        .full-width .site-content footer.entry-meta {
857                margin-right: auto;
858                margin-left: auto;
859        }
860}
861
862@media screen and (min-width: 1260px) {
863        .site-content blockquote.alignright {
864                margin-right: -18%;
865                margin-left: auto;
866        }
867
868        .site-content blockquote.alignleft {
869                margin-left: -18%;
870                margin-right: auto;
871        }
872}
Note: See TracBrowser for help on using the repository browser.