themes-wordpress/canard/rtl.css
2018-02-27 14:18:25 +11:00

679 lines
15 KiB
CSS

/*
Theme Name: Canard
Adding support for language 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.
http://codex.wordpress.org/Right_to_Left_Language_Support
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Primary Menu
## Social Menu
## Secondary Menu
## Paging Navigation
# Accessibility
# Widgets
# Content
## Header
## Featured Content
## Posts & Pages
## Comments
# Media
# Jetpack
## Infinite Scroll
## Recipes
## Widgets
# Eventbrite
# Responsive
## x >= 600px
## x >= 768px
## x >= 960px
## x >= 1080px
## x >= 1380px
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
direction: rtl;
unicode-bidi: embed;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
blockquote:before {
float: right;
}
blockquote blockquote {
margin-left: 0;
margin-right: 30px;
}
pre {
border-left: 0;
border-right: 2px solid #d11415;
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
li > ul,
li > ol {
margin-left: 0;
margin-right: 30px;
}
table {
text-align: right;
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* Search Form */
.search-form:before {
left: 6px;
right: auto;
}
.search-form .search-field {
padding-left: 45px;
padding-right: 6.5px;
}
.search-form .search-submit {
left: 5px;
right: auto;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Primary Menu
--------------------------------------------------------------*/
/* Dropdown Toggle */
.dropdown-toggle,
.menu-toggle {
left: 0;
right: auto;
}
.main-navigation.toggled > div::before {
left: 16.5px;
right: auto;
}
/* Main Navigation */
.main-navigation ul {
padding-right: 0;
}
.main-navigation ul.toggled {
padding-left: 0;
padding-right: 30px;
}
.main-navigation .page_item_has_children > a,
.main-navigation .menu-item-has-children > a {
padding-left: 45px;
padding-right: 0;
}
/*--------------------------------------------------------------
## Social Menu
--------------------------------------------------------------*/
.social-navigation li {
float: right;
}
.social-navigation li:first-child {
margin-left: 5px;
margin-right: 0;
}
.social-navigation li:last-child {
margin-left: 0;
margin-right: 5px;
}
/*--------------------------------------------------------------
## Secondary Menu
--------------------------------------------------------------*/
.secondary-navigation li {
float: right;
}
.secondary-navigation li:first-child {
padding-left: 10px;
padding-right: 0;
}
.secondary-navigation li:last-child {
padding-left: 0;
padding-right: 10px;
}
.secondary-navigation li + li {
border-left: 0;
border-right: 1px solid #444;
}
/*--------------------------------------------------------------
## Paging Navigation
--------------------------------------------------------------*/
.comment-navigation .nav-previous,
.posts-navigation .nav-previous {
float: right;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next {
float: left;
text-align: left;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text:focus {
left: auto;
right: 5px;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget-area:before {
left: auto;
right: 0;
}
/* Sidebar Toggle */
.sidebar-toggle {
left: auto;
margin-left: 0;
margin-right: -22.5px;
right: 50;
}
/* Footer Widget */
.footer-widget-inner .widget:nth-of-type(4n+1) {
clear: right;
margin-right: 0;
}
.footer-widget-inner .widget:nth-of-type(4n+4) {
clear: left;
margin-left: 0;
}
/* Lists */
.widget_archive ul,
.widget_categories ul,
.widget_links ul,
.widget_meta ul,
.widget_nav_menu ul,
.widget_pages ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_rss ul {
margin-right: 0;
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
padding-left: 0;
padding-right: 30px;
}
/* Tag Cloud */
.widget_tag_cloud a:before {
margin-left: 0.125em;
margin-right: 0;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
/* Site Header */
.site-header {
border-bottom: 1px solid #ddd;
padding: 30px 0;
position: relative;
width: 100%;
}
/* Site Top */
.site-top {
background: #222;
color: #aaa;
margin-bottom: 30px;
margin-top: -30px;
padding: 7.5px 0;
}
/* Search Navigation */
.search-header .search-form:before {
left: 13.5px;
right: auto;
}
.search-header .search-form .search-submit {
left: 12.5px;
right: auto;
}
/*--------------------------------------------------------------
## Featured Content
--------------------------------------------------------------*/
.featured-content .hentry {
float: right;
}
/*--------------------------------------------------------------
## Posts & Pages
--------------------------------------------------------------*/
/* Sticky */
.sticky-post {
left: 15px;
right: auto;
}
/* Entry Footer */
.entry-footer {
float: right;
}
.tags-links a:before {
margin-left: 0.125em;
margin-right: 0;
}
/* Page Links */
.page-links a,
.page-links > span {
margin: 0 0 5px 5px;
}
.page-links > .page-links-title {
padding-left: 5px;
padding-right: 0;
text-align: right;
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-list .comment-respond {
margin-left: 0;
margin-right: 30px;
}
.comment-author .avatar {
float: right;
margin-left: 15px;
margin-right: 0;
}
.comment-metadata .edit-link:before {
margin-left: 0.2em;
margin-right: 0;
}
.comment-list .comment-reply-title small {
float: left;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.gallery-caption {
left: auto;
right: 0;
}
/*--------------------------------------------------------------
# Jetpack
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Infinite Scroll
--------------------------------------------------------------*/
.infinite-loader .spinner {
left: auto !important;
right: 50% !important;
}
/*--------------------------------------------------------------
## Recipes
--------------------------------------------------------------*/
.site-content .jetpack-recipe blockquote {
margin-right: 0;
}
/*--------------------------------------------------------------
## Widgets
--------------------------------------------------------------*/
/* Gravatar Profile */
.widget-grofile .grofile-thumbnail {
float: left;
}
/* RSS Links */
.widget_rss_links ul {
margin-right: 0;
}
.widget_rss_links p a + a {
margin-left: 0;
margin-right: 11px;
}
/*--------------------------------------------------------------
# Eventbrite
--------------------------------------------------------------*/
.eventbrite-event .entry-header span {
padding-left: 12px;
padding-right: 0;
}
.eventbrite-event .entry-header span:last-of-type {
padding-left: 0;
}
/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## x >= 600px
--------------------------------------------------------------*/
@media screen and (min-width: 600px) {
/* Paging Navigation */
.comment-navigation .nav-next a:after,
.comment-navigation .nav-previous a:before,
.posts-navigation .nav-next a:after,
.posts-navigation .nav-previous a:before {
content: '\f430';
}
.comment-navigation .nav-previous a:before,
.posts-navigation .nav-previous a:before {
content: '\f429';
}
/* Widgets */
.sidebar-toggle {
margin-left: 0;
margin-right: -30px;
}
}
/*--------------------------------------------------------------
## x >= 768px
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
/* Grid */
.footer-widget-inner .widget {
float: right;
}
.footer-widget-inner .widget:nth-of-type(even) {
clear: left;
margin-left: 0;
margin-right: 30px;
}
.footer-widget-inner .widget:nth-of-type(odd) {
clear: right;
margin-left: 30px;
margin-right: 0;
}
/* Featured Content */
.blog .featured-content .hentry:nth-of-type(2),
.blog .featured-content .hentry:nth-of-type(4) {
margin-left: 30px;
margin-right: 0;
}
/* Posts & Pages */
.content-area .format-standard a.post-thumbnail {
float: right;
margin-left: 30px;
margin-right: 0;
}
.content-area .format-standard.has-post-thumbnail .entry-header {
float: left;
}
.content-area .format-standard.has-post-thumbnail > .entry-meta,
.content-area .format-standard.has-post-thumbnail .entry-summary {
clear: left;
}
.author-info .author-avatar {
float: left;
}
/* Post Formats */
.post-link {
float: right;
margin-left: 30px;
margin-right: 0;
}
.archive .format-link .entry-header,
.blog .format-link .entry-header,
.search .format-link .entry-header {
float: left;
}
.archive .format-link > .entry-meta,
.blog .format-link > .entry-meta,
.search .format-link > .entry-meta,
.archive .format-link .entry-summary,
.blog .format-link .entry-summary,
.search .format-link .entry-summary {
clear: left;
}
}
/*--------------------------------------------------------------
## x >= 960px
--------------------------------------------------------------*/
@media screen and (min-width: 960px) {
/* Primary Menu */
.main-navigation {
float: right;
}
.main-navigation.toggled > div {
right: auto;
}
.main-navigation ul.toggled {
padding-right: 0;
}
.main-navigation li {
float: right;
}
.main-navigation .nav-menu > li + li {
border-left: 0;
border-right: 1px solid #eee;
}
.main-navigation .menu-item-has-children {
padding-left: 38.5px;
padding-right: 15px;
}
.main-navigation .page_item_has_children > a,
.main-navigation .menu-item-has-children > a {
padding-left: 0;
}
.main-navigation .menu-item-has-children > a:after {
left: 15px;
right: auto;
}
.main-navigation ul ul .menu-item-has-children > a:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.main-navigation ul ul {
float: right;
left: auto;
right: -999em;
}
.main-navigation ul ul ul {
left: 0;
right: -999em;
}
.main-navigation ul li:hover > ul,
.main-navigation ul .focus > ul {
right: auto;
margin-left: 0;
margin-right: -16px;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul .focus > ul {
left: auto;
right: 100%;
}
/* Social Menu */
.social-navigation {
float: left;
padding-left: 0;
padding-right: 15px;
}
/* Secondary Menu */
.secondary-navigation {
float: right;
}
/* Footer Menu */
.footer-navigation li {
float: right;
}
.footer-navigation li:first-child {
padding-left: 10px;
padding-right: 0;
}
.footer-navigation li:last-child {
padding-left: 0;
padding-right: 10px;
}
.footer-navigation li + li {
border-left: 0;
border-right: 1px solid #eee;
}
/* Grid */
.comments-area {
margin-left: -60px;
margin-right: 0;
padding-left: 60px;
padding-right: 0;
}
.site-main {
border-left: 1px solid #ddd;
border-right: 0;
float: right;
padding-left: 60px;
padding-right: 0;
}
.widget-area {
border-left: 0;
border-right: 1px solid #ddd;
float: left;
margin-left: 0;
margin-right: -1px;
padding-left: 0;
padding-right: 60px;
}
.footer-widget-inner .widget:nth-of-type(4n+1) {
clear: right;
margin-left: 30px;
margin-right: 0;
}
.footer-widget-inner .widget:nth-of-type(4n+4) {
clear: left;
margin-left: 0;
margin-right: 30px;
}
/* Featured Content */
.blog .featured-content .hentry:first-of-type {
margin-left: 30px;
margin-right: 0;
}
.blog .featured-content .hentry:nth-of-type(2) {
margin-left: 0;
}
.blog .featured-content .hentry:nth-of-type(3) {
margin-left: 30px;
margin-right: 0;
}
/* Posts & Pages */
.author-info {
margin-left: 0;
margin-right: -60px;
padding-left: 0;
padding-right: 60px;
}
/* Comments */
.comment-list:before,
.comment-navigation + .comment-respond:before {
left: -60px;
right: auto;
}
/* Sharedaddy */
div#jp-relatedposts:before {
left: -60px;
right: auto;
}
.hentry div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:first-of-type {
margin-left: 15px;
margin-right: 0;
}
.hentry div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:last-of-type {
margin-left: 0;
margin-right: 15px;
}
}
/*--------------------------------------------------------------
## x >= 1080px
--------------------------------------------------------------*/
@media screen and (min-width: 1080px) {
/* Featured Content */
.blog .featured-content .hentry:first-of-type {
margin-left: 0;
}
.blog .featured-content .hentry:nth-of-type(2),
.blog .featured-content .hentry:nth-of-type(3) {
margin-left: 0;
margin-right: 30px;
}
.blog .featured-content .hentry:nth-of-type(4),
.blog .featured-content .hentry:nth-of-type(5) {
margin-left: 0;
}
.blog .featured-content .hentry:nth-of-type(5) {
margin-left: 0;
margin-right: 330px;
}
/* Posts & Pages */
.author-info .author-heading {
float: right;
}
/* Featured Content */
.blog .featured-content .hentry:nth-of-type(2),
.blog .featured-content .hentry:nth-of-type(3) {
margin-left: 0;
margin-right: 30px;
}
.blog .featured-content .hentry:nth-of-type(5) {
margin-left: 0;
}
}
/*--------------------------------------------------------------
## x >= 1380px
--------------------------------------------------------------*/
@media screen and (min-width: 1380px) {
/* Grid */
div#jp-relatedposts,
.comments-area,
.single .entry-content {
float: left;
}
}