/* Theme Name: Blog Build Description: RTL (Right-to-Left) stylesheet for Blog Build theme Author: Noor Alam Version: 1.0.5 */ /* ========================================================================== RTL Global Styles ========================================================================== */ body { direction: rtl; unicode-bidi: embed; } /* ========================================================================== Typography & Text Alignment ========================================================================== */ /* Reset text alignment for RTL */ .site-content, .entry-content, .entry-summary, .page-content, .comment-content, .textwidget { text-align: right; } /* Blockquotes */ blockquote { border-left: none; border-right: 4px solid #ddd; padding-left: 0; padding-right: 20px; margin-left: 0; margin-right: 20px; } /* Lists */ ul, ol { padding-left: 0; padding-right: 40px; } ul ul, ol ol, ul ol, ol ul { margin-left: 0; margin-right: 1.5em; } /* ========================================================================== Layout & Structure ========================================================================== */ /* Container */ .site { direction: rtl; } /* Sidebar */ #secondary { float: left; } #primary { float: right; } /* Content alignment */ .alignleft { float: right; margin-left: 1.5em; margin-right: 0; } .alignright { float: left; margin-right: 1.5em; margin-left: 0; } /* ========================================================================== Navigation & Menus ========================================================================== */ /* Main navigation */ .main-navigation ul { text-align: right; } .main-navigation li { float: right; } .main-navigation ul ul { left: auto; right: -999em; } .main-navigation ul ul ul { left: auto; right: -999em; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; right: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: auto; right: 100%; } /* Dropdown arrows */ .main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after { margin-left: 0; margin-right: 0.5em; transform: rotate(180deg); } /* Mobile menu toggle */ .menu-toggle { left: 15px; right: auto; } /* ========================================================================== Header ========================================================================== */ .site-branding { text-align: right; } .site-logo { float: right; margin-left: 20px; margin-right: 0; } .custom-logo-link { float: right; } .site-title { text-align: right; } /* Search form in header */ .header-search { float: left; } /* ========================================================================== Content & Posts ========================================================================== */ /* Post meta */ .entry-meta, .entry-footer { text-align: right; } .byline, .updated:not(.published), .posted-on, .cat-links, .tags-links, .comments-link, .edit-link { margin-left: 0; margin-right: 1em; } .byline::before, .posted-on::before, .cat-links::before, .tags-links::before, .comments-link::before, .edit-link::before { margin-left: 0.5em; margin-right: 0; } /* Post thumbnail */ .post-thumbnail { float: right; margin-left: 20px; margin-right: 0; } /* Author bio */ .author-info { text-align: right; } .author-avatar { float: right; margin-left: 20px; margin-right: 0; } /* Pagination */ .pagination .nav-links { text-align: right; } .pagination .prev, .pagination .next { float: right; } .pagination .prev { margin-right: 0; margin-left: 10px; } .page-numbers { margin-left: 5px; margin-right: 0; } /* Post navigation */ .post-navigation .nav-previous { float: right; text-align: right; } .post-navigation .nav-next { float: left; text-align: left; } /* ========================================================================== Comments ========================================================================== */ .comment-list { padding-right: 0; } .comment-list .children { padding-left: 0; padding-right: 2em; } .comment-author .avatar { float: right; margin-left: 1em; margin-right: 0; } .comment-metadata { text-align: right; } .reply { text-align: left; } /* Comment form */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { text-align: right; } /* ========================================================================== Widgets & Sidebar ========================================================================== */ .widget { text-align: right; } .widget ul, .widget ol { padding-left: 0; padding-right: 20px; } .widget li { text-align: right; } /* Widget titles */ .widget-title { text-align: right; } /* Search widget */ .widget_search .search-field { text-align: right; } /* Calendar widget */ .widget_calendar table { text-align: right; } .widget_calendar caption { text-align: right; } /* Tag cloud */ .tagcloud a, .widget_tag_cloud a { margin-left: 5px; margin-right: 0; } /* ========================================================================== Footer ========================================================================== */ .site-footer { text-align: right; } .site-info { text-align: right; } .footer-navigation ul { text-align: right; } .footer-navigation li { float: right; margin-left: 1.5em; margin-right: 0; } /* ========================================================================== Forms & Buttons ========================================================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { text-align: right; } /* Button alignment */ .button, .wp-block-button__link, input[type="submit"], input[type="button"], input[type="reset"] { text-align: center; } /* Search form */ .search-form .search-field { text-align: right; } .search-submit { left: 0; right: auto; } /* ========================================================================== Media & Images ========================================================================== */ /* Image captions */ .wp-caption { text-align: right; } .wp-caption-text { text-align: right; } /* Gallery */ .gallery-item { float: right; } /* ========================================================================== Block Editor (Gutenberg) Support ========================================================================== */ /* Alignments */ .wp-block-image .alignleft { float: right; margin-left: 1em; margin-right: 0; } .wp-block-image .alignright { float: left; margin-right: 1em; margin-left: 0; } /* Columns */ .wp-block-columns { direction: rtl; } /* Quote */ .wp-block-quote { border-left: none; border-right: 4px solid; padding-left: 0; padding-right: 1em; } .wp-block-pullquote { text-align: right; } /* Lists */ .wp-block-list ul, .wp-block-list ol { padding-left: 0; padding-right: 2em; } /* Media & Text */ .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { margin-left: 0; margin-right: 8%; } /* Table */ .wp-block-table table { text-align: right; } /* ========================================================================== Theme Specific RTL Styles ========================================================================== */ /* Breadcrumbs */ .breadcrumb, .blog-build-breadcrumb { text-align: right; } .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: 0.5rem; padding-right: 0; margin-left: 0.5rem; margin-right: 0; content: "/"; transform: scaleX(-1); } /* Entry content spacing */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { text-align: right; } /* Post formats */ .format-quote blockquote { border-left: none; border-right: 5px solid; } /* Sticky post */ .sticky::before { right: auto; left: 0; } /* Back to top button */ .back-to-top { left: 20px; right: auto; } /* Mobile menu */ .mobile-menu { left: 0; right: auto; } /* Social icons */ .social-links a { margin-left: 10px; margin-right: 0; } /* Archive layout - Grid */ .blog-grid .post, .archive-grid .post { float: right; } /* Archive layout - List */ .blog-list .post-thumbnail { float: right; margin-left: 20px; margin-right: 0; } /* ========================================================================== Bootstrap RTL Overrides ========================================================================== */ /* Container */ .container, .container-fluid { direction: rtl; } /* Row */ .row { direction: rtl; } /* Columns */ .col, [class*="col-"] { float: right; } /* Text alignment utilities */ .text-left { text-align: right !important; } .text-right { text-align: left !important; } /* Float utilities */ .float-left { float: right !important; } .float-right { float: left !important; } /* Margin utilities */ .ml-auto { margin-left: 0 !important; margin-right: auto !important; } .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* Padding utilities - Reverse left/right */ .pl-0 { padding-right: 0 !important; padding-left: auto; } .pl-1 { padding-right: 0.25rem !important; padding-left: auto; } .pl-2 { padding-right: 0.5rem !important; padding-left: auto; } .pl-3 { padding-right: 1rem !important; padding-left: auto; } .pl-4 { padding-right: 1.5rem !important; padding-left: auto; } .pl-5 { padding-right: 3rem !important; padding-left: auto; } .pr-0 { padding-left: 0 !important; padding-right: auto; } .pr-1 { padding-left: 0.25rem !important; padding-right: auto; } .pr-2 { padding-left: 0.5rem !important; padding-right: auto; } .pr-3 { padding-left: 1rem !important; padding-right: auto; } .pr-4 { padding-left: 1.5rem !important; padding-right: auto; } .pr-5 { padding-left: 3rem !important; padding-right: auto; } /* ========================================================================== Responsive RTL Styles ========================================================================== */ @media screen and (max-width: 768px) { /* Mobile menu */ .main-navigation { text-align: right; } /* Mobile sidebar */ #secondary { float: none; } #primary { float: none; } /* Mobile post layout */ .post-thumbnail { float: none; margin-left: 0; } /* Mobile comments */ .comment-list .children { padding-right: 1em; } } /* ========================================================================== Accessibility ========================================================================== */ /* Screen reader text direction */ .screen-reader-text { direction: ltr; } /* Focus styles */ a:focus, button:focus, input:focus, textarea:focus, select:focus { outline-offset: -2px; } /* ========================================================================== Print Styles ========================================================================== */ @media print { body { direction: rtl; } .site-content { text-align: right; } }