Ticket #7983: rtl.css

File rtl.css, 11.3 KB (added by Don, 12 years ago)

3rd of 3 problem files

Line 
1/*
2Theme Name: Twenty Eleven
3
4Adding support for language written in a Right To Left (RTL) direction is easy -
5it's just a matter of overwriting all the horizontal positioning attributes
6of your CSS stylesheet in a separate stylesheet file named rtl.css.
7
8http://codex.wordpress.org/Right_to_Left_Language_Support
9
10*/
11
12/* =Reset reset
13----------------------------------------------- */
14
15caption, th, td {
16 text-align: right;
17}
18
19/* =Structure
20----------------------------------------------- */
21
22body {
23 direction:rtl;
24 unicode-bidi:embed;
25}
26
27/* Showcase */
28.page-template-showcase-php section.recent-posts {
29 float: left;
30 margin: 0 31% 0 0;
31}
32.page-template-showcase-php #main .widget-area {
33 float: right;
34 margin: 0 0 0 -22.15%;
35}
36
37/* One column */
38
39.one-column article.feature-image.small .entry-summary a {
40 left: auto;
41 right: -9%;
42}
43
44/* Simplify the pullquotes and pull styles */
45.one-column.singular .entry-meta .edit-link a {
46 right: 0px;
47 left: auto;
48}
49/* Make sure we have room for our comment avatars */
50.one-column .commentlist > li.comment {
51 margin-left: 0;
52 margin-right: 102px;
53}
54/* Make sure the logo and search form don't collide */
55.one-column #branding #searchform {
56 right: auto;
57 left: 40px;
58}
59/* Talking avatars take up too much room at this size */
60.one-column .commentlist > li.comment {
61 margin-right: 0;
62}
63.one-column .commentlist > li.comment .comment-meta,
64.one-column .commentlist > li.comment .comment-content {
65 margin-right: 0;
66 margin-left: 85px;
67}
68.one-column .commentlist .avatar {
69 right: auto;
70 left: 1.625em;
71}
72.one-column .commentlist .children .avatar {
73 left: auto;
74 right: 2.2em;
75}
76
77/* =Global
78----------------------------------------------- */
79
80/* Text elements */
81p {
82 margin-bottom: 1.625em;
83}
84ul, ol {
85 margin: 0 2.5em 1.625em 0;
86}
87.ltr ul, ol {
88 margin: 0 0 1.625em 2.5em;
89}
90blockquote {
91 font-family: Arial, sans-serif;
92}
93blockquote em, blockquote i, blockquote cite {
94 font-style: normal;
95}
96
97/* Forms */
98textarea {
99 padding-left: 0;
100 padding-right: 3px;
101}
102input#s {
103 background-position: 97% 6px;
104 padding: 4px 28px 4px 10px;
105}
106
107/* Assistive text */
108#access a.assistive-text:active,
109#access a.assistive-text:focus {
110 left: auto;
111 right: 7.6%;
112}
113
114/* =Header
115----------------------------------------------- */
116
117#site-title {
118 margin-right: 0;
119 margin-left: 270px;
120}
121
122#site-description {
123 margin: 0 0 3.65625em 270px;
124}
125
126/* =Menu
127-------------------------------------------------------------- */
128
129#access {
130 float: right;
131}
132#access ul {
133 margin: 0 -0.8125em 0 0;
134 padding-right: 0;
135}
136#access li {
137 float: right;
138}
139#access ul ul {
140 float: right;
141 left: auto;
142 right: 0;
143}
144#access ul ul ul {
145 left: auto;
146 right: 100%;
147}
148
149/* Search Form */
150#branding #searchform {
151 right: auto;
152 left: 7.6%;
153 text-align: left;
154}
155#branding #s {
156 float: left;
157}
158#branding .only-search + #access div {
159 padding-right: 0;
160 padding-left: 205px;
161}
162
163
164/* =Content
165----------------------------------------------- */
166.entry-title,
167.entry-header .entry-meta {
168 padding-right: 0;
169 padding-left: 76px;
170}
171.entry-content td,
172.comment-content td {
173 padding: 6px 0 6px 10px;
174}
175.page-link span {
176 margin-right: 0;
177 margin-left: 6px;
178}
179.entry-meta .edit-link a {
180 float: left;
181}
182/* Images */
183
184.wp-caption .wp-caption-text,
185.gallery-caption {
186 font-family: Arial, sans-serif;
187}
188.wp-caption .wp-caption-text {
189 padding: 10px 40px 5px 0px;
190}
191.wp-caption .wp-caption-text:before {
192 margin-right: 0;
193 margin-left: 5px;
194 left: auto;
195 right: 10px;
196}
197#content .gallery-columns-4 .gallery-item {
198 padding-right:0;
199 padding-left:2%;
200}
201
202/* Author Info */
203.singular #author-info {
204 margin: 2.2em -35.4% 0 -35.6%;
205}
206#author-avatar {
207 float: right;
208 margin-right: 0;
209 margin-left: -78px;
210}
211#author-description {
212 float: right;
213 margin-left: 0;
214 margin-right: 108px;
215}
216/* Comments link */
217.entry-header .comments-link a {
218 background-image: url(images/comment-bubble-rtl.png);
219 right: auto;
220 left: 0;
221}
222
223/*
224 Post Formats Headings
225*/
226.singular .entry-title,
227.singular .entry-header .entry-meta {
228 padding-left: 0;
229}
230.singular .entry-header .entry-meta {
231 left: auto;
232 right: 0;
233}
234.singular .entry-meta .edit-link a {
235 left: auto;
236 right: 50px;
237}
238
239
240/* =Gallery
241----------------------------------------------- */
242
243.format-gallery .gallery-thumb {
244 float: right;
245 margin: .375em 0 0 1.625em;
246}
247
248
249/* =Status
250----------------------------------------------- */
251
252.format-status img.avatar {
253 float: right;
254 margin: 4px 0 2px 10px;
255}
256
257
258/* =Image
259----------------------------------------------- */
260
261.indexed.format-image div.entry-meta {
262 float: right;
263}
264/* =error404
265----------------------
266------------------------- */
267.error404 #main .widget {
268 float: right;
269 margin-right: auto;
270 margin-left: 3.7%;
271}
272.error404 #main .widget_archive {
273 margin-left: 0;
274}
275.error404 #main .widget_tag_cloud {
276 margin-left: 0;
277}
278
279/* =Showcase
280----------------------------------------------- */
281
282article.intro .edit-link a {
283 right: auto;
284 left: 20px;
285}
286
287/* Featured post */
288section.featured-post {
289 float: right;
290}
291
292/* Small featured post */
293section.featured-post .attachment-small-feature {
294 float: left;
295 margin: 0 0 1.625em -8.9%;
296 right: auto;
297 left: -15px;
298}
299article.feature-image.small {
300 float: right;
301}
302article.feature-image.small .entry-summary p a {
303 left:auto;
304 right: -23.8%;
305 padding: 9px 85px 9px 26px;
306}
307
308/* Large featured post */
309section.feature-image.large .hentry {
310 left:auto;
311 right: 9%;
312 margin: 1.625em 0 0 9%;
313}
314/* Featured Slider */
315.featured-posts .showcase-heading {
316 padding-left: 0;
317 padding-right: 8.9%;
318}
319.featured-posts section.featured-post {
320 left: auto;
321 right: 0;
322}
323#content .feature-slider {
324 right: auto;
325 left: 8.9%;
326}
327.feature-slider li {
328 float: right;
329}
330/* Recent Posts */
331section.recent-posts .other-recent-posts a[rel="bookmark"] {
332 float: right;
333}
334section.recent-posts .other-recent-posts .comments-link a,
335section.recent-posts .other-recent-posts .comments-link > span {
336 padding: 0.3125em 1em 0.3125em 0;
337 left: 0;
338 text-align: left;
339}
340
341/* =Attachments
342----------------------------------------------- */
343
344/* =Navigation
345-------------------------------------------------------------- */
346
347.nav-previous {
348 float: right;
349}
350.nav-next {
351 float: left;
352 text-align: left;
353}
354
355/* Singular navigation */
356#nav-single {
357 float: left;
358 text-align: left;
359}
360#nav-single .nav-next {
361 padding-left: 0;
362 padding-right: .5em;
363}
364
365
366/* =Widgets
367----------------------------------------------- */
368
369.widget ul ul {
370 margin-left: 0;
371 margin-right: 1.5em;
372}
373
374/* Twitter */
375.widget_twitter .timesince {
376 margin-right: 0;
377 margin-left: -10px;
378 text-align: left;
379}
380
381/* =Comments
382----------------------------------------------- */
383
384.commentlist .children li.comment {
385 border-left: none;
386 border-right: 1px solid #ddd;
387 -moz-border-radius: 3px 0 0 3px;
388 border-radius: 3px 0 0 3px;
389}
390.commentlist .children li.comment .comment-meta {
391 margin-left: 0;
392 margin-right: 50px;
393}
394.commentlist .avatar {
395 left: auto;
396 right: -102px;
397}
398.commentlist > li:before {
399 content: url(images/comment-arrow-rtl.png);
400 left:auto;
401 right: -21px;
402}
403.commentlist > li.pingback:before {
404 content: '';
405}
406.commentlist .children .avatar {
407 left: auto;
408 right: 2.2em;
409}
410
411/* Post author highlighting */
412.commentlist > li.bypostauthor:before {
413 content: url(images/comment-arrow-bypostauthor-rtl.png);
414}
415
416/* sidebar-page.php comments */
417/* Make sure we have room for our comment avatars */
418.page-template-sidebar-page-php .commentlist > li.comment,
419.page-template-sidebar-page-php.commentlist .pingback {
420 margin-left: 0;
421 margin-right: 102px;
422}
423
424/* Comment Form */
425#respond .comment-form-author label,
426#respond .comment-form-email label,
427#respond .comment-form-url label,
428#respond .comment-form-comment label {
429 left: auto;
430 right: 4px;
431}
432#respond .comment-form-author label,
433#respond .comment-form-email label,
434#respond .comment-form-url label,
435#respond .comment-form-comment label {
436 -webkit-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
437 -moz-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
438 box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
439}
440#respond .comment-form-author .required,
441#respond .comment-form-email .required {
442 left: auto;
443 right: 75%;
444}
445#respond .form-submit {
446 float: left;
447}
448#respond input#submit {
449 left: auto;
450 right: 30px;
451 padding: 5px 22px 5px 42px;
452}
453#respond #cancel-comment-reply-link {
454 margin-left: 0;
455 margin-right: 10px;
456}
457#cancel-comment-reply-link {
458 right: auto;
459 left: 1.625em;
460}
461
462/* =Footer
463----------------------------------------------- */
464
465/* Two Footer Widget Areas */
466#supplementary.two .widget-area {
467 float: right;
468 margin-right: 0;
469 margin-left: 3.7%;
470}
471#supplementary.two .widget-area + .widget-area {
472 margin-left: 0;
473}
474
475/* Three Footer Widget Areas */
476#supplementary.three .widget-area {
477 float: right;
478 margin-right: 0;
479 margin-left: 3.7%;
480}
481#supplementary.three .widget-area + .widget-area + .widget-area {
482 margin-left: 0;
483}
484
485/* Site Generator Line */
486#site-generator .sep {
487 background-position: right center;
488}
489
490
491/* =Responsive Structure
492----------------------------------------------- */
493
494@media (max-width: 800px) {
495 /* Simplify the showcase template when small feature */
496 section.featured-post .attachment-small-feature,
497 .one-column section.featured-post .attachment-small-feature {
498 float: right;
499 }
500 article.feature-image.small {
501 float: left;
502 }
503 article.feature-image.small .entry-summary p a {
504 right: 0;
505 }
506 .singular .entry-meta .edit-link a {
507 left: auto;
508 right: 0px;
509 }
510 /* Make sure we have room for our comment avatars */
511 .commentlist > li.comment,
512 .commentlist .pingback {
513 margin-left: 0;
514 margin-right: 102px;
515 }
516 /* No need to float footer widgets at this size */
517 #colophon #supplementary .widget-area {
518 margin-left: 0;
519 }
520 /* No need to float 404 widgets at this size */
521 .error404 #main .widget {
522 margin-left: 0;
523 }
524}
525@media (max-width: 650px) {
526 /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
527 #site-title,
528 #site-description {
529 margin-left: 0;
530 }
531 /* Talking avatars take up too much room at this size */
532 .commentlist > li.comment,
533 .commentlist > li.pingback {
534 margin-right: 0 !important;
535 }
536 .commentlist .children .avatar {
537 left: auto;
538 right: 2.2em;
539 }
540 /* Use the available space in the smaller comment form */
541 #respond .comment-form-author .required,
542 #respond .comment-form-email .required {
543 left: auto;
544 right: 95%;
545 }
546 #content .gallery-columns-3 .gallery-item {
547 padding-right: 0;
548 padding-left:2%;
549 }
550}
551@media (max-width: 450px) {
552 #content .gallery-columns-2 .gallery-item {
553 padding-right:0;
554 padding-left:4%;
555 }
556}
557
558/* =Print
559----------------------------------------------- */
560
561@media print {
562 #primary {
563 float: right;
564 }
565 /* Comments */
566 .commentlist .avatar {
567 left: auto;
568 right: 2.2em;
569 }
570 .commentlist li.comment .comment-meta {
571 margin-left: 0;
572 margin-right: 50px;
573 }
574}
575
576/* =IE7
577----------------------------------------------- */
578
579#ie7 section.recent-posts {
580 margin-right: 0;
581 margin-left: 7.6%;
582}