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