WordPress/wp-content/themes/twentyseventeen/rtl.css
Tammie Lister 23a4550b0d Twenty Seventeen: Resolves the pin icon having variations
This fixes the pin icon having variations in position and size depending on screen and device. 

Props metodiew, mbelchev, davidakennedy
Fixes #38407


Built from https://develop.svn.wordpress.org/trunk@38892


git-svn-id: http://core.svn.wordpress.org/trunk@38835 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-24 22:31:12 +00:00

516 lines
8.7 KiB
CSS

/*
Theme Name: Twenty Seventeen
Adding support for languages written in a Right To Left (RTL) direction is easy,
it's just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named rtl.css.
https://codex.wordpress.org/Right-to-Left_Language_Support
*/
/* Reset */
body {
direction: rtl;
unicode-bidi: embed;
}
th {
text-align: right;
}
/* Accessibility */
.screen-reader-text:focus {
left: auto;
right: 5px;
}
/* Typography */
textarea {
padding-right: 3px;
}
ol {
counter-reset: item;
}
ol li:before {
left: auto;
right: -1.5em;
}
li > ul,
li > ol {
margin-left: 0;
margin-right: 1.5em;
}
/* Forms */
input[type="radio"],
input[type="checkbox"] {
margin-left: 0.5em;
margin-right: 0;
}
/* Media */
.mejs-offscreen {
right: -10000px;
}
/* Site Branding */
.custom-logo-link {
padding-left: 1em;
padding-right: 0;
}
/* Main Navigation */
.main-navigation ul {
text-align: right;
}
.main-navigation ul ul {
padding-left: 0;
padding-right: 1.5em;
}
.menu-toggle .icon {
margin-left: 0.5em;
margin-right: 0;
}
.dropdown-toggle {
left: -0.5em;
right: auto;
}
/* Front Page */
.twentyseventeen-panel .recent-posts .entry-header .edit-link {
margin-left: 0;
margin-right: 1em;
}
/* Blog, Archive, Search */
.blog .entry-meta a.post-edit-link,
.archive .entry-meta a.post-edit-link,
.search .entry-meta a.post-edit-link {
margin-left: 0;
margin-right: 1em;
}
.search .page .entry-meta a.post-edit-link {
margin-right: 0;
}
.sticky .icon-pinned {
left: auto;
right: -1.5em;
}
.prev.page-numbers .icon,
.next.page-numbers .icon {
display: inline-block;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.prev.page-numbers {
float: right;
}
.next.page-numbers {
float: left;
}
/* Blog Entries */
.entry-footer .cat-links,
.entry-footer .tags-links {
padding-left: 0;
padding-right: 2.5em;
}
.entry-footer .cat-links .icon,
.entry-footer .tags-links .icon {
left: auto;
margin-left: 0.5em;
margin-right: 0;
right: 0;
}
/* Comments */
.comment-body {
margin-left: 0;
margin-right: 65px;
}
.comment-reply-link .icon {
left: auto;
right: -2em;
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.comment-author .avatar {
left: auto;
right: -65px;
}
.comment-reply-link:before {
left: auto;
right: -2em;
}
.children .comment-author .avatar {
left: auto;
right: -45px;
}
.form-submit {
text-align: left;
}
/* Post Formats */
.format-quote blockquote .icon {
left: auto;
right: -1.25em;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
/* Post Navigation */
.nav-links .nav-previous .nav-title .nav-title-icon-wrapper,
.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
display: inline-block;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
/* Widgets */
.widget ul {
margin: 0;
}
.search-form .search-submit {
left: 3px;
right: auto;
}
.widget .tagcloud a,
.widget.widget_tag_cloud a,
.wp_widget_tag_cloud a {
float: right;
margin: 4px 0 0 4px !important; /* !important to override inline styles */
}
.widget ul li li {
padding-left: 0;
padding-right: 1.5rem;
}
/* Footer */
.social-navigation a {
margin-left: 1em;
margin-right: 0;
}
/* Customizer styles */
.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
left: 3.2em;
right: auto;
}
/* Gallery Styles */
.gallery-item,
.gallery-caption {
text-align: right;
}
/* Media queries */
@media screen and (min-width: 48em) {
body.page-template-full-width-page #primary {
float: none;
}
.has-sidebar:not(.error404) #primary {
float: right;
}
.has-sidebar #secondary {
float: left;
}
.error404 #primary {
float: none;
}
/* Site Branding */
.custom-logo-link {
padding-left: 2em;
padding-right: 0;
}
/* Navigation */
.main-navigation ul ul {
padding-right: 0;
}
.main-navigation ul ul:before,
.main-navigation ul ul:after {
left: 0.5em;
right: auto;
}
.main-navigation ul ul,
.main-navigation ul ul ul {
left: auto;
right: -999em;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: auto;
right: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
right: 0.5em;
}
.main-navigation ul li.menu-item-has-children:before,
.main-navigation ul li.menu-item-has-children:after,
.main-navigation ul li.page_item_has_children:before,
.main-navigation ul li.page_item_has_children:after {
left: 1em;
right: auto;
}
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon {
left: auto;
right: 5px;
}
.main-navigation ul ul .menu-item-has-children > a > .icon,
.main-navigation ul ul .page_item_has_children > a > .icon {
left: 1em;
right: auto;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Scroll down arrow */
.navigation-top .menu-scroll-down {
left: 0;
right: auto;
}
.entry-title a {
margin-left: auto;
margin-right: -2px;
}
/* Front Page */
.page-two-column .panel-content .entry-header {
float: right;
}
.page-two-column .panel-content .entry-content {
float: left;
}
/* Front Page - Recent Posts */
.page-two-column .panel-content .recent-posts {
clear: left;
float: left;
}
/* Blog, Archive, Search */
.sticky .icon-pinned {
left: auto;
right: -2.5em;
}
body:not(.has-sidebar) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column #primary .entry-header {
float: right;
}
.blog:not(.has-sidebar) #primary article,
.archive:not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.has-sidebar.error404 #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column #primary .entry-content,
body.page-two-column #comments {
float: left;
}
.entry-footer .edit-link a.post-edit-link {
margin-left: 0;
margin-right: 1em;
}
/* Entry content */
/* with sidebar */
.has-sidebar .entry-content blockquote.alignleft {
margin-left: 0;
width: 34%;
}
.has-sidebar #primary .entry-content blockquote.alignright,
.has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
margin-right: 0;
width: 34%;
}
.has-sidebar #primary .entry-content blockquote.alignleft.below-entry-meta {
margin-left: -72.5%;
width: 62%;
}
/* blog index and archive */
.blog:not(.has-sidebar) .entry-content blockquote.alignleft,
.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
.archive:not(.has-sidebar) .entry-content blockquote.alignleft,
.page-two-column .entry-content blockquote.alignleft {
margin-left: 0;
width: 34%;
}
.blog:not(.has-sidebar) .entry-content blockquote.alignright,
.twentyseventeen-front-page.page-two-column #primary .entry-content blockquote.alignright,
.archive:not(.has-sidebar) .entry-content blockquote.alignright,
.page-two-column #primary .entry-content blockquote.alignright {
margin-right: -72.5%;
width: 62%;
}
/* Post formats */
.format-quote blockquote .icon {
left: auto;
right: -1.5em;
}
.navigation.pagination {
float: left;
}
.has-sidebar .navigation.pagination {
float: none;
}
.post-navigation .nav-previous {
float: right;
}
.post-navigation .nav-next {
float: left;
text-align: left;
}
/* Comments */
ol.children .children {
padding-left: 0;
padding-right: 2em;
}
/* Post Navigation */
.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
left: auto;
right: -2em;
}
.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
left: -2em;
right: auto;
}
/* Footer */
.site-footer .widget-column.footer-widget-1 {
float: right;
}
.site-footer .widget-column.footer-widget-2 {
float: left;
}
.social-navigation {
clear: right;
float: right;
}
.site-info {
float: right;
}
.social-navigation + .site-info {
margin-left: 0;
margin-right: 6%;
}
}
@media screen and ( min-width: 67em ) {
/* Sticky posts */
.sticky .icon-pinned {
left: auto;
right: -1.25em;
}
}
@media screen and ( min-width: 79em ) {
.has-sidebar #primary .entry-content blockquote.alignright,
.has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
margin-right: -20%;
}
.blog:not(.has-sidebar) .entry-content blockquote.alignleft,
.archive:not(.has-sidebar) .entry-content blockquote.alignleft,
.page-two-column .entry-content blockquote.alignleft,
.twentyseventeen-front-page .entry-content blockquote.alignleft {
margin-left: -20%;
}
}