mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-07 19:31:54 +01:00
71cd7287ba
Mostly adds styles for lists and mediaelement.js instances within widgets. Adds size classname to image widget so themes can customize their display. Props Soean, obenland, celloexpressions, ocean90, karmatosed. Fixes #40745. Built from https://develop.svn.wordpress.org/trunk@40839 git-svn-id: http://core.svn.wordpress.org/trunk@40690 1a063a9b-81f0-0310-95a4-ce76da25c4cd
555 lines
9.5 KiB
CSS
555 lines
9.5 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;
|
|
}
|
|
|
|
li > ul,
|
|
li > ol {
|
|
margin-left: 0;
|
|
margin-right: 1.5em;
|
|
}
|
|
|
|
th:first-child,
|
|
td:first-child {
|
|
padding-left: 0.4em;
|
|
padding-right: 0;
|
|
}
|
|
|
|
th:last-child,
|
|
td:last-child {
|
|
padding-left: 0;
|
|
padding-right: 0.4em;
|
|
}
|
|
|
|
/* 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 */
|
|
|
|
.wp-custom-header-video-button {
|
|
left: 30px;
|
|
right: auto;
|
|
}
|
|
|
|
.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-thumb-tack {
|
|
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;
|
|
}
|
|
|
|
.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
|
|
margin-left: 0.5em;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
|
|
margin-left: 0;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.widget_text ul {
|
|
margin: 0 1.5em 1.5em 0;
|
|
}
|
|
|
|
.widget_text ul li ul {
|
|
margin: 0 1.5em 0 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* SVG Fallback */
|
|
|
|
.no-svg .dropdown-toggle {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.site-header .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-thumb-tack {
|
|
left: auto;
|
|
right: -2.5em;
|
|
}
|
|
|
|
body:not(.has-sidebar):not(.page-one-column) .page-header,
|
|
body.has-sidebar.error404 #primary .page-header,
|
|
body.page-two-column:not(.archive) #primary .entry-header,
|
|
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
|
|
float: right;
|
|
}
|
|
|
|
.blog:not(.has-sidebar) #primary article,
|
|
.archive:not(.has-sidebar):not(.page-one-column) #primary article,
|
|
.search:not(.has-sidebar) #primary article,
|
|
.has-sidebar.error404 #primary .page-content,
|
|
.error404.has-sidebar #primary .page-content,
|
|
body.page-two-column:not(.archive) #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,
|
|
.archive.page-one-column:not(.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-thumb-tack {
|
|
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%;
|
|
}
|
|
}
|