WordPress/wp-content/themes/twentyfifteen/rtl.css
Sergey Biryukov 2878ae6271 Comments: Move comment consent input outside the label for a11y.
Non-wrapping `label`s are more widely supported by assitive technologies. The CSS changes account for the element re-ordering, and tweak the formatting for improved readability.

Props afercia, xkon, laurelfulford, azaozz.
Merges [43125] to the 4.9 branch.
Fixes #43436.
Built from https://develop.svn.wordpress.org/branches/4.9@43130


git-svn-id: http://core.svn.wordpress.org/branches/4.9@42959 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-05-02 22:15:25 +00:00

849 lines
12 KiB
CSS

/*
Theme Name: Twenty Fifteen
Description: Adds support for languages written in a Right To Left (RTL) direction.
It's easy, just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named rtl.css.
See: https://codex.wordpress.org/Right_to_Left_Language_Support
*/
/**
* Table of Contents:
*
* 1.0 - Reset
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Forms
* 5.0 - Navigations
* 6.0 - Accessibility
* 7.0 - Alignments
* 8.0 - Header
* 9.0 - Widgets
* 10.0 - Content
* 10.1 - Posts and pages
* 10.2 - Comments
* 11.0 - Media Queries
* 11.1 - Mobile Large
* 11.2 - Tablet Small
* 11.3 - Tablet Large
* 11.4 - Desktop Small
* 11.5 - Desktop Medium
* 11.6 - Desktop Large
* 11.7 - Desktop X-Large
*/
/**
* 1.0 Reset
*/
body {
direction: rtl;
unicode-bidi: embed;
}
caption,
th,
td {
text-align: right;
}
/**
* 2.0 Typography
*/
body,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input,
select,
textarea,
blockquote cite,
blockquote small,
.post-password-form label,
.main-navigation .menu-item-description,
.post-navigation .meta-nav,
.post-navigation .post-title,
.pagination,
.image-navigation,
.comment-navigation,
.site-title,
.site-description,
.widget-title,
.widget_calendar caption,
.widget_rss .rss-date,
.widget_rss cite,
.author-heading,
.entry-footer,
.page-title,
.page-links,
.entry-caption,
.comments-title,
.comment-reply-title,
.comment-metadata,
.pingback .edit-link,
.comment-list .reply a,
.comment-form label,
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags,
.no-comments,
.wp-caption-text,
.gallery-caption {
font-family: Arial, Tahoma, sans-serif;
}
::-webkit-input-placeholder {
font-family: Arial, Tahoma, sans-serif;
}
:-moz-placeholder {
font-family: Arial, Tahoma, sans-serif;
}
::-moz-placeholder {
font-family: Arial, Tahoma, sans-serif;
}
:-ms-input-placeholder {
font-family: Arial, Tahoma, sans-serif;
}
blockquote {
border-right: 4px solid rgba(51, 51, 51, 0.7);
border-left: 0;
padding-right: 0.7778em;
padding-left: 0;
}
/**
* 3.0 Elements
*/
ul,
ol {
margin: 0 1.3333em 1.6em 0;
}
caption,
th,
td {
text-align: right;
}
/**
* 4.0 Forms
*/
.post-password-form input[type="submit"] {
right: auto;
left: 0;
}
/**
* 5.0 Navigations
*/
.main-navigation ul ul {
margin-right: 0.8em;
margin-left: auto;
}
.main-navigation .menu-item-has-children > a {
padding-right: 0;
padding-left: 48px;
}
.dropdown-toggle {
right: auto;
left: 0;
}
.dropdown-toggle:after {
right: -1px;
left: auto;
}
.social-navigation li {
float: right;
}
.social-navigation a:before {
right: 0;
left: auto;
}
.secondary-toggle {
right: auto;
left: 0;
}
.post-navigation .has-post-thumbnail a:before {
right: 0;
left: auto;
}
.pagination .prev {
right: 0;
left: auto;
}
.pagination .prev:before {
content: "\f429";
right: -1px;
left: auto;
}
.pagination .next {
right: auto;
left: 0;
}
.pagination .next:before {
content: "\f430";
right: auto;
left: -1px;
}
.image-navigation .nav-previous a:before,
.comment-navigation .nav-previous a:before {
content: "\f429";
margin-right: auto;
margin-left: 0.2em;
}
.image-navigation .nav-next a:after,
.comment-navigation .nav-next a:after {
content: "\f430";
margin-right: 0.2em;
margin-left: auto;
}
/**
* 6.0 Accessibility
*/
.screen-reader-text:hover,
.screen-reader-text:focus {
right: 5px;
left: auto;
}
/**
* 7.0 Alignments
*/
.alignright {
float: right;
}
.alignleft {
float: left;
}
.aligncenter {
margin-right: auto;
margin-left: auto;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4em 0 1.6em 1.6em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4em 1.6em 1.6em 0;
}
/**
* 8.0 Header
*/
.site-branding {
padding-right: 0;
padding-left: 60px;
}
/**
* 9.0 Widgets
*/
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.7667em 0.8em 0 0;
}
.textwidget ul,
.textwidget ol {
margin-left: 0;
margin-right: 1.6em;
}
/**
* 10.0 Content
*/
/**
* 10.1 Posts and pages
*/
.entry-content .more-link:after {
content: "\f430";
}
.author-link:after {
content: "\f430";
}
.author-info .avatar {
float: right;
margin: 0 0 1.6em 1.6em;
}
.posted-on:before,
.byline:before,
.cat-links:before,
.tags-links:before,
.comments-link:before,
.entry-format:before,
.edit-link:before,
.full-size-link:before {
margin-right: auto;
margin-left: 2px;
}
.posted-on,
.byline,
.cat-links,
.tags-links,
.comments-link,
.entry-format,
.full-size-link {
margin-right: auto;
margin-left: 1em;
}
.page-links a,
.page-links > span {
margin: 0 0 0.3333em 0.3333em;
}
.page-links > .page-links-title {
padding-right: 0;
padding-left: 0.5em;
}
.type-attachment .entry-header {
clear: left;
}
.format-link .entry-title a:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
/**
* 10.2 Comments
*/
.comment-list .children > li {
padding-right: 0.8em;
padding-left: 0;
}
.comment-author .avatar {
float: right;
margin-right: 0;
margin-left: 0.4em;
}
.bypostauthor > article .fn:after {
right: 3px;
left: auto;
}
.comment-metadata .edit-link {
margin-right: 1em;
margin-left: auto;
}
.pingback .edit-link {
margin-right: 1em;
margin-left: auto;
}
.comment-content ul,
.comment-content ol {
margin: 0 1.3333em 1.6em 0;
}
.comment-reply-title small a {
float: left;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/**
* 11.0 Media Queries
*/
/**
* 11.1 Mobile Large 620px
*/
@media screen and (min-width: 38.75em) {
ul,
ol {
margin-right: 0;
margin-left: auto;
}
li > ul,
li > ol,
blockquote > ul,
blockquote > ol {
margin-right: 1.3333em;
margin-left: auto;
}
blockquote {
margin-right: -1em;
margin-left: auto;
}
blockquote > blockquote {
margin-right: 0;
margin-left: auto;
}
.page-header {
border-color: inherit;
border-left: none;
border-style: solid;
border-width: 0 7px 0 0;
}
.page-title,
.taxonomy-description {
margin-right: -7px;
margin-left: auto;
}
.comment-content ul,
.comment-content ol {
margin-right: 0;
margin-left: auto;
}
.comment-content li > ul,
.comment-content li > ol,
.comment-content blockquote > ul,
.comment-content blockquote > ol {
margin-right: 1.3333em;
margin-left: auto;
}
}
/**
* 11.2 Tablet Small 740px
*/
@media screen and (min-width: 46.25em) {
blockquote {
margin-right: -1.05em;
margin-left: auto;
padding-right: 0.85em;
padding-left: 0;
}
.main-navigation ul ul {
margin-right: 1em;
margin-left: auto;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4118em 0 1.6471em 1.6471em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4118em 1.6471em 1.6471em 0;
}
.site-branding {
padding-right: 0;
padding-left: 66px;
}
.widget blockquote {
margin-right: -1.2353em;
margin-left: auto;
padding-right: 1em;
padding-left: 0;
}
.widget blockquote > blockquote {
margin-right: 0;
margin-left: auto;
}
.widget blockquote.alignright,
.widget .wp-caption.alignright,
.widget img.alignright {
margin: 0.5em 0 1.5em 1.5em;
}
.widget blockquote.alignleft,
.widget .wp-caption.alignleft,
.widget img.alignleft {
margin: 0.5em 1.5em 1.5em 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.9643em 1em 0 0;
}
.page-links a,
.page-links > span {
margin: 0 0 0.2857em 0.2857em;
}
.author-info .avatar {
margin: 0 0 1.6471em 1.6471em;
}
.comment-list .children > li {
padding-right: 1.2353em;
padding-left: 0;
}
.comment-author .avatar {
margin-left: 1.64705em;
}
.bypostauthor > article .fn:after {
right: 6px;
left: auto;
}
}
/**
* 11.3 Tablet Large 880px
*/
@media screen and (min-width: 55em) {
blockquote {
margin-right: -1.0909em;
margin-left: auto;
padding-right: 0.9091em;
padding-left: 0;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4211em 0 1.6842em 1.6842em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4211em 1.6842em 1.6842em 0;
}
.site-branding {
padding-right: 0;
padding-left: 74px;
}
.widget blockquote {
margin-right: -1.2632em;
margin-left: auto;
padding-right: 1.0526em;
padding-left: 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.7188em 1em 0 0;
}
.page-links a,
.page-links > span {
margin: 0 0 0.25em 0.25em;
}
.author-info .avatar {
margin: 0 0 1.6842em 1.6842em;
}
.comment-list .children > li {
padding-right: 1.4737em;
padding-left: 0;
}
.comment-author .avatar {
margin-left: 1.6842em;
}
}
/**
* 11.4 Desktop Small 955px
*/
@media screen and (min-width: 59.6875em) {
body:before {
right: 0;
left: auto;
}
.sidebar {
float: right;
margin-right: auto;
margin-left: -100%;
}
.site-content {
float: right;
margin-right: 29.4118%;
margin-left: auto;
}
blockquote {
margin-right: -1.3333em;
margin-left: auto;
padding-right: 1.1111em;
padding-left: 0;
}
.main-navigation .menu-item-has-children > a {
padding-right: 0;
padding-left: 30px;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4em 0 1.6em 1.6em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4em 1.6em 1.6em 0;
}
.widget blockquote {
margin-right: -1.5em;
margin-left: auto;
padding-right: 1.1667em;
padding-left: 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.4583em 1em 0 0;
}
.page-links a,
.page-links > span {
margin: 0 0 0.3333em 0.3333em;
}
.author-info .avatar {
margin: 0 0 1.5em 1.5em;
}
.comment-list .children > li {
padding-right: 0.8em;
padding-left: 0;
}
.comment-author .avatar {
margin-left: 0.8em;
}
.bypostauthor > article .fn:after {
right: 3px;
left: auto;
}
.site-branding {
padding: 0;
}
.site-footer {
float: right;
margin: 0 35.2941% 0 0;
}
}
/**
* 11.5 Desktop Medium 1100px
*/
@media screen and (min-width: 68.75em) {
blockquote {
margin-right: -1.05em;
margin-left: auto;
padding-right: 0.85em;
padding-left: 0;
}
.main-navigation .menu-item-has-children > a {
padding-right: 0;
padding-left: 34px;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4118em 0 1.6471em 1.6471em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4118em 1.6471em 1.6471em 0;
}
.widget blockquote {
padding-right: 1.2143em;
padding-left: 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.4643em 1em 0 0;
}
.page-links a,
.page-links > span {
margin: 0 0 0.2857em 0.2857em;
}
.author-info .avatar {
margin: 0 0 1.6471em 1.6471em;
}
.comment-list .children > li {
padding-right: 1.1667em;
padding-left: 0;
}
.comment-author .avatar {
margin-left: 1.64705em;
}
.bypostauthor > article .fn:after {
right: 6px;
left: auto;
}
}
/**
* 11.6 Desktop Large 1240px
*/
@media screen and (min-width: 77.5em) {
blockquote {
margin-right: -1.0909em;
margin-left: auto;
padding-right: 0.9091em;
padding-left: 0;
}
.main-navigation .menu-item-has-children > a {
padding-right: 0;
padding-left: 38px;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4211em 0 1.6842em 1.6842em;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4211em 1.6842em 1.6842em 0;
}
.widget blockquote {
padding-right: 1.25em;
padding-left: 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
margin: 0.4688em 1em 0 0;
}
.page-links a,
.page-links > span {
margin: 0 0 0.25em 0.25em;
}
.author-info .avatar {
margin: 0 0 1.6842em 1.6842em;
}
.comment-list .children > li {
padding-right: 1.4737em;
padding-left: 0;
}
.comment-author .avatar {
margin-left: 1.64705em;
}
}
/**
* 11.7 Desktop X-Large 1403px
*/
@media screen and (min-width: 87.6875em) {
body:before {
width: -webkit-calc(50% - 289px);
width: calc(50% - 289px);
}
}