/** * RTL (Right-to-Left) Stylesheet for KVS - Arabic Language Support * Theme: all-responsive-white * * Include this file AFTER the main stylesheet. * Activated via [dir="rtl"] attribute on or .rtl class on . */ /* ====================================================================================================================== * Base Direction & Text Alignment * ====================================================================================================================== */ [dir="rtl"], .rtl { direction: rtl; text-align: right; } [dir="rtl"] body, .rtl body { direction: rtl; text-align: right; unicode-bidi: embed; } /* ====================================================================================================================== * Header & Navigation * ====================================================================================================================== */ [dir="rtl"] .header, [dir="rtl"] header { direction: rtl; text-align: right; } [dir="rtl"] .header .logo, [dir="rtl"] header .logo { float: right; margin-left: 15px; margin-right: 0; } [dir="rtl"] .header .user-menu, [dir="rtl"] header .user-actions, [dir="rtl"] header .header-right { float: left; margin-right: 15px; margin-left: 0; } /* Primary navigation */ [dir="rtl"] .primary-menu, [dir="rtl"] .main-nav, [dir="rtl"] nav ul, [dir="rtl"] .nav-menu { direction: rtl; text-align: right; } [dir="rtl"] .primary-menu li, [dir="rtl"] .main-nav li, [dir="rtl"] nav ul li, [dir="rtl"] .nav-menu li { float: right; } [dir="rtl"] .primary-menu li:first-child, [dir="rtl"] .nav-menu li:first-child { margin-right: 0; margin-left: auto; } /* Dropdown menus */ [dir="rtl"] .dropdown-menu, [dir="rtl"] .sub-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .dropdown-menu li, [dir="rtl"] .sub-menu li { text-align: right; } /* Hamburger / mobile menu */ [dir="rtl"] .hamburger, [dir="rtl"] .menu-toggle, [dir="rtl"] .mobile-menu-btn { float: left; margin-left: 0; margin-right: auto; } /* ====================================================================================================================== * Search Box * ====================================================================================================================== */ [dir="rtl"] .search-box, [dir="rtl"] .search-form, [dir="rtl"] .search-container { direction: rtl; text-align: right; } [dir="rtl"] .search-box input[type="text"], [dir="rtl"] .search-box input[type="search"], [dir="rtl"] .search-form input[type="text"], [dir="rtl"] .search-form input[type="search"] { padding-left: 40px; padding-right: 12px; text-align: right; direction: rtl; } [dir="rtl"] .search-box button, [dir="rtl"] .search-form button, [dir="rtl"] .search-box .search-btn { left: 0; right: auto; } [dir="rtl"] .search-box .search-icon, [dir="rtl"] .search-form .search-icon { left: 10px; right: auto; } /* ====================================================================================================================== * Content Grids & Lists * ====================================================================================================================== */ /* Video and album grid items */ [dir="rtl"] .list-videos, [dir="rtl"] .list-albums, [dir="rtl"] .list-categories, [dir="rtl"] .list-models, [dir="rtl"] .list-channels, [dir="rtl"] .list-sponsors, [dir="rtl"] .list-playlists, [dir="rtl"] .list-members { direction: rtl; text-align: right; } [dir="rtl"] .video-item, [dir="rtl"] .album-item, [dir="rtl"] .category-item, [dir="rtl"] .model-item, [dir="rtl"] .channel-item, [dir="rtl"] .sponsor-item, [dir="rtl"] .playlist-item, [dir="rtl"] .member-item { float: right; text-align: right; } /* Item info sections */ [dir="rtl"] .video-item .item-info, [dir="rtl"] .album-item .item-info, [dir="rtl"] .video-item .info, [dir="rtl"] .album-item .info { text-align: right; } /* Duration badge position */ [dir="rtl"] .video-item .duration, [dir="rtl"] .video-item .badge-duration { left: 5px; right: auto; } /* Quality / HD badge */ [dir="rtl"] .video-item .quality, [dir="rtl"] .video-item .badge-hd { right: 5px; left: auto; } /* Private / premium labels */ [dir="rtl"] .video-item .label-private, [dir="rtl"] .video-item .label-premium, [dir="rtl"] .album-item .label-private, [dir="rtl"] .album-item .label-premium { right: 5px; left: auto; } /* Item action buttons (favorites, etc.) */ [dir="rtl"] .video-item .actions, [dir="rtl"] .album-item .actions { left: 5px; right: auto; } /* ====================================================================================================================== * Headlines & Page Titles * ====================================================================================================================== */ [dir="rtl"] .headline, [dir="rtl"] .page-title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { text-align: right; } [dir="rtl"] .headline .title, [dir="rtl"] .page-title .title { float: right; } [dir="rtl"] .headline .link, [dir="rtl"] .headline .more-link, [dir="rtl"] .page-title .link { float: left; } /* ====================================================================================================================== * Sorting & Filtering Bar * ====================================================================================================================== */ [dir="rtl"] .sorting, [dir="rtl"] .sort-bar, [dir="rtl"] .filter-bar { direction: rtl; text-align: right; } [dir="rtl"] .sorting a, [dir="rtl"] .sorting li, [dir="rtl"] .sort-bar a, [dir="rtl"] .sort-bar li { float: right; } [dir="rtl"] .sorting .sort-options, [dir="rtl"] .sorting select { float: left; } /* ====================================================================================================================== * Pagination * ====================================================================================================================== */ [dir="rtl"] .pagination { direction: rtl; text-align: center; } [dir="rtl"] .pagination li, [dir="rtl"] .pagination a, [dir="rtl"] .pagination span { float: none; display: inline-block; } /* Flip prev/next arrows */ [dir="rtl"] .pagination .prev::before, [dir="rtl"] .pagination .back::before { transform: scaleX(-1); } [dir="rtl"] .pagination .next::after, [dir="rtl"] .pagination .forward::after { transform: scaleX(-1); } /* Swap prev/next positions */ [dir="rtl"] .pagination .prev, [dir="rtl"] .pagination .back { float: right; margin-left: 5px; margin-right: 0; } [dir="rtl"] .pagination .next, [dir="rtl"] .pagination .forward { float: left; margin-right: 5px; margin-left: 0; } /* ====================================================================================================================== * Sidebar * ====================================================================================================================== */ [dir="rtl"] .sidebar { float: left; text-align: right; } [dir="rtl"] .content-main, [dir="rtl"] .main-content { float: right; } [dir="rtl"] .sidebar .block-title, [dir="rtl"] .sidebar .widget-title { text-align: right; } [dir="rtl"] .sidebar ul li { text-align: right; padding-left: 0; padding-right: 10px; } [dir="rtl"] .sidebar ul li::before { left: auto; right: 0; } /* ====================================================================================================================== * Block Content * ====================================================================================================================== */ [dir="rtl"] .block-content, [dir="rtl"] .block-header { direction: rtl; text-align: right; } [dir="rtl"] .block-content .title, [dir="rtl"] .block-header .title { float: right; } [dir="rtl"] .block-content .more, [dir="rtl"] .block-header .more { float: left; } /* ====================================================================================================================== * Video / Album Details Page * ====================================================================================================================== */ [dir="rtl"] .video-details, [dir="rtl"] .album-details { direction: rtl; text-align: right; } /* Info table */ [dir="rtl"] .video-details .info-table td:first-child, [dir="rtl"] .album-details .info-table td:first-child, [dir="rtl"] .video-details .label, [dir="rtl"] .album-details .label { text-align: right; padding-left: 10px; padding-right: 0; } [dir="rtl"] .video-details .info-table td:last-child, [dir="rtl"] .album-details .info-table td:last-child { text-align: right; } /* Rating section */ [dir="rtl"] .rating, [dir="rtl"] .rating-bar { direction: ltr; /* Keep rating stars LTR */ display: inline-flex; } [dir="rtl"] .rating-wrapper { text-align: right; } /* Like/dislike buttons */ [dir="rtl"] .rate-like, [dir="rtl"] .rate-dislike { float: right; margin-left: 10px; margin-right: 0; } /* Tags and categories links */ [dir="rtl"] .tags-list, [dir="rtl"] .categories-list { direction: rtl; text-align: right; } [dir="rtl"] .tags-list a, [dir="rtl"] .categories-list a { float: right; margin-left: 5px; margin-right: 0; } /* Action buttons row */ [dir="rtl"] .video-actions, [dir="rtl"] .album-actions, [dir="rtl"] .detail-actions { direction: rtl; text-align: right; } [dir="rtl"] .video-actions a, [dir="rtl"] .album-actions a, [dir="rtl"] .detail-actions a { float: right; margin-left: 10px; margin-right: 0; } /* Tab navigation */ [dir="rtl"] .tabs, [dir="rtl"] .tab-nav { direction: rtl; } [dir="rtl"] .tabs li, [dir="rtl"] .tab-nav li { float: right; } /* Share section */ [dir="rtl"] .share-section input[type="text"], [dir="rtl"] .share-section textarea { direction: ltr; text-align: left; } /* ====================================================================================================================== * Video Player * ====================================================================================================================== */ /* Keep player controls LTR */ [dir="rtl"] .video-player, [dir="rtl"] .player-container, [dir="rtl"] .fp-player, [dir="rtl"] .kvs-player { direction: ltr; } /* Player overlay messages */ [dir="rtl"] .video-player .message, [dir="rtl"] .player-message, [dir="rtl"] .player-overlay-message { direction: rtl; text-align: right; } /* ====================================================================================================================== * Breadcrumbs * ====================================================================================================================== */ [dir="rtl"] .breadcrumbs, [dir="rtl"] .breadcrumb { direction: rtl; text-align: right; } [dir="rtl"] .breadcrumbs li, [dir="rtl"] .breadcrumb li { float: right; } /* Flip breadcrumb separators */ [dir="rtl"] .breadcrumbs li::after, [dir="rtl"] .breadcrumbs li::before, [dir="rtl"] .breadcrumb li + li::before { content: "\\"; transform: scaleX(-1); } /* ====================================================================================================================== * Forms * ====================================================================================================================== */ [dir="rtl"] form, [dir="rtl"] .form-container { direction: rtl; text-align: right; } /* Labels aligned right */ [dir="rtl"] form label, [dir="rtl"] .form-row label, [dir="rtl"] .field-label { text-align: right; float: right; } /* Input fields */ [dir="rtl"] form input[type="text"], [dir="rtl"] form input[type="email"], [dir="rtl"] form input[type="password"], [dir="rtl"] form input[type="url"], [dir="rtl"] form input[type="number"], [dir="rtl"] form textarea, [dir="rtl"] form select, [dir="rtl"] .form-control { direction: rtl; text-align: right; } /* Inputs that should remain LTR (URLs, emails, codes) */ [dir="rtl"] form input[type="email"], [dir="rtl"] form input[type="url"], [dir="rtl"] input.ltr-input { direction: ltr; text-align: left; } /* Form buttons */ [dir="rtl"] form .btn, [dir="rtl"] form button, [dir="rtl"] form input[type="submit"], [dir="rtl"] .form-actions { text-align: right; } /* Checkbox / radio alignment */ [dir="rtl"] form input[type="checkbox"], [dir="rtl"] form input[type="radio"] { margin-left: 5px; margin-right: 0; float: right; } [dir="rtl"] form input[type="checkbox"] + label, [dir="rtl"] form input[type="radio"] + label { padding-left: 0; padding-right: 5px; } /* Form hint text */ [dir="rtl"] .field-hint, [dir="rtl"] .form-hint, [dir="rtl"] .help-block { text-align: right; } /* Form error messages */ [dir="rtl"] .error-message, [dir="rtl"] .form-error, [dir="rtl"] .validation-error { text-align: right; } /* File upload */ [dir="rtl"] .file-upload, [dir="rtl"] .upload-container { direction: rtl; text-align: right; } /* ====================================================================================================================== * Comments Section * ====================================================================================================================== */ [dir="rtl"] .comments-list, [dir="rtl"] .comments-section { direction: rtl; text-align: right; } [dir="rtl"] .comment-item { direction: rtl; text-align: right; } [dir="rtl"] .comment-item .avatar, [dir="rtl"] .comment-item .user-photo { float: right; margin-left: 15px; margin-right: 0; } [dir="rtl"] .comment-item .comment-body, [dir="rtl"] .comment-item .comment-content { margin-left: 0; margin-right: 60px; text-align: right; } [dir="rtl"] .comment-item .comment-actions { text-align: left; } [dir="rtl"] .comment-item .comment-date { float: left; } [dir="rtl"] .comment-item .comment-author { float: right; } /* Comment form */ [dir="rtl"] .comment-form textarea { direction: rtl; text-align: right; } /* ====================================================================================================================== * Member Zone / Profile * ====================================================================================================================== */ [dir="rtl"] .member-profile, [dir="rtl"] .memberzone, [dir="rtl"] .profile-page { direction: rtl; text-align: right; } /* Member menu */ [dir="rtl"] .member-menu { float: right; text-align: right; } [dir="rtl"] .member-menu li { text-align: right; } [dir="rtl"] .member-menu li a { padding-left: 0; padding-right: 15px; } /* Profile avatar */ [dir="rtl"] .profile-avatar, [dir="rtl"] .member-avatar { float: right; margin-left: 20px; margin-right: 0; } /* Profile info */ [dir="rtl"] .profile-info, [dir="rtl"] .member-info { float: right; text-align: right; } /* Profile stats */ [dir="rtl"] .profile-stats li { float: right; border-left: 1px solid #ddd; border-right: none; } [dir="rtl"] .profile-stats li:last-child { border-left: none; } /* Messages */ [dir="rtl"] .message-item { direction: rtl; text-align: right; } [dir="rtl"] .message-item .avatar { float: right; margin-left: 10px; margin-right: 0; } [dir="rtl"] .message-item .message-body { margin-left: 0; margin-right: 60px; } /* ====================================================================================================================== * Category / Tag / Model Grid * ====================================================================================================================== */ [dir="rtl"] .category-grid, [dir="rtl"] .tag-cloud, [dir="rtl"] .model-grid { direction: rtl; text-align: right; } /* Alphabet navigation */ [dir="rtl"] .alphabet-nav, [dir="rtl"] .alphabet-letters { direction: rtl; text-align: right; } [dir="rtl"] .alphabet-nav a, [dir="rtl"] .alphabet-letters a { float: right; } /* ====================================================================================================================== * Sponsor / Channel Info * ====================================================================================================================== */ [dir="rtl"] .sponsor-info, [dir="rtl"] .channel-info { direction: rtl; text-align: right; } [dir="rtl"] .sponsor-info .image, [dir="rtl"] .channel-info .image { float: right; margin-left: 20px; margin-right: 0; } [dir="rtl"] .sponsor-info .details, [dir="rtl"] .channel-info .details { float: right; text-align: right; } /* Rating bars (stars) */ [dir="rtl"] .sponsor-info .rating-bar .criteria { text-align: right; } /* ====================================================================================================================== * Footer * ====================================================================================================================== */ [dir="rtl"] footer, [dir="rtl"] .footer { direction: rtl; text-align: right; } [dir="rtl"] footer .footer-menu li, [dir="rtl"] .footer .footer-menu li { float: right; } [dir="rtl"] footer .copyright, [dir="rtl"] .footer .copyright { text-align: right; } [dir="rtl"] .footer-links { direction: rtl; } [dir="rtl"] .footer-links a { margin-left: 15px; margin-right: 0; } /* ====================================================================================================================== * Popup / Modal Dialogs * ====================================================================================================================== */ [dir="rtl"] .popup, [dir="rtl"] .modal, [dir="rtl"] .fancybox-content { direction: rtl; text-align: right; } [dir="rtl"] .popup .close, [dir="rtl"] .modal .close, [dir="rtl"] .fancybox-close-small { left: 10px; right: auto; } [dir="rtl"] .popup .title, [dir="rtl"] .modal .title, [dir="rtl"] .modal-header { text-align: right; } /* ====================================================================================================================== * Flexbox RTL Adjustments * ====================================================================================================================== */ [dir="rtl"] .flex-row, [dir="rtl"] .d-flex { flex-direction: row-reverse; } [dir="rtl"] .flex-row-reverse { flex-direction: row; } /* Keep wrapping grids but reverse direction */ [dir="rtl"] .flex-wrap { flex-direction: row-reverse; flex-wrap: wrap; } /* Center-aligned flex should remain centered */ [dir="rtl"] .flex-center, [dir="rtl"] .justify-content-center { flex-direction: row; } /* ====================================================================================================================== * Icons & Arrows (Transform Mirroring) * ====================================================================================================================== */ /* Flip directional icons */ [dir="rtl"] .icon-arrow-left, [dir="rtl"] .icon-chevron-left, [dir="rtl"] .icon-prev, [dir="rtl"] .fa-chevron-left, [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-angle-left { transform: scaleX(-1); } [dir="rtl"] .icon-arrow-right, [dir="rtl"] .icon-chevron-right, [dir="rtl"] .icon-next, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-angle-right { transform: scaleX(-1); } /* Caret / dropdown indicators */ [dir="rtl"] .caret, [dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: 5px; } /* ====================================================================================================================== * Tables * ====================================================================================================================== */ [dir="rtl"] table { direction: rtl; text-align: right; } [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } [dir="rtl"] table th:first-child, [dir="rtl"] table td:first-child { text-align: right; } /* ====================================================================================================================== * Utility Overrides * ====================================================================================================================== */ /* Float utilities */ [dir="rtl"] .float-left, [dir="rtl"] .pull-left { float: right !important; } [dir="rtl"] .float-right, [dir="rtl"] .pull-right { float: left !important; } /* Text alignment utilities */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* Margin/Padding directional utilities */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* ====================================================================================================================== * Scrollbar & Selection * ====================================================================================================================== */ [dir="rtl"] ::selection { direction: rtl; } /* ====================================================================================================================== * Mobile / Responsive Drawer * ====================================================================================================================== */ [dir="rtl"] .drawer, [dir="rtl"] .mobile-drawer, [dir="rtl"] .sidebar-drawer { left: auto; right: 0; transform: translateX(100%); text-align: right; } [dir="rtl"] .drawer.open, [dir="rtl"] .mobile-drawer.open, [dir="rtl"] .sidebar-drawer.open { transform: translateX(0); } [dir="rtl"] .drawer-close, [dir="rtl"] .drawer .close-btn { left: 10px; right: auto; } /* ====================================================================================================================== * Bottom Navigation (Mobile) * ====================================================================================================================== */ [dir="rtl"] .bottom-nav { direction: rtl; } /* ====================================================================================================================== * Notifications & Alerts * ====================================================================================================================== */ [dir="rtl"] .alert, [dir="rtl"] .notification, [dir="rtl"] .success-message, [dir="rtl"] .error-message-box { direction: rtl; text-align: right; padding-left: 15px; padding-right: 40px; } [dir="rtl"] .alert .close, [dir="rtl"] .notification .close { left: 10px; right: auto; } [dir="rtl"] .alert .icon, [dir="rtl"] .notification .icon { right: 10px; left: auto; } /* ====================================================================================================================== * Upload Section * ====================================================================================================================== */ [dir="rtl"] .upload-section, [dir="rtl"] .upload-form, [dir="rtl"] .drag-drop-zone { direction: rtl; text-align: right; } /* Upload progress */ [dir="rtl"] .upload-progress .progress-bar { direction: ltr; /* Progress bars stay LTR */ } /* Screenshot grid */ [dir="rtl"] .screenshot-grid .screenshot-item { float: right; } /* ====================================================================================================================== * Playlist Player * ====================================================================================================================== */ [dir="rtl"] .playlist-player { direction: rtl; } [dir="rtl"] .playlist-player .playlist-sidebar { float: left; border-left: none; border-right: 1px solid #ddd; } [dir="rtl"] .playlist-player .player-section { float: right; } /* ====================================================================================================================== * Community / Members Search * ====================================================================================================================== */ [dir="rtl"] .members-search, [dir="rtl"] .community-search { direction: rtl; text-align: right; } [dir="rtl"] .members-search .search-field { text-align: right; } /* ====================================================================================================================== * Subscription Items * ====================================================================================================================== */ [dir="rtl"] .subscription-item { direction: rtl; text-align: right; } [dir="rtl"] .subscription-item .thumb { float: right; margin-left: 15px; margin-right: 0; } /* ====================================================================================================================== * Loading Spinner * ====================================================================================================================== */ [dir="rtl"] .loading, [dir="rtl"] .spinner { /* Spinners are directionless, no flip needed */ direction: ltr; } /* ====================================================================================================================== * Tooltip & Popover * ====================================================================================================================== */ [dir="rtl"] .tooltip, [dir="rtl"] .popover { direction: rtl; text-align: right; } /* ====================================================================================================================== * Print Styles * ====================================================================================================================== */ @media print { [dir="rtl"] body { direction: rtl; text-align: right; } } /* ====================================================================================================================== * Responsive Adjustments * ====================================================================================================================== */ @media (max-width: 768px) { [dir="rtl"] .sidebar { float: none; width: 100%; } [dir="rtl"] .content-main, [dir="rtl"] .main-content { float: none; width: 100%; } [dir="rtl"] .header .logo { float: none; text-align: center; margin: 0; } [dir="rtl"] .header .user-menu, [dir="rtl"] header .user-actions { float: none; text-align: center; margin: 0; } /* Stack grid items on mobile */ [dir="rtl"] .video-item, [dir="rtl"] .album-item { float: none; } /* Full-width forms on mobile */ [dir="rtl"] form label { float: none; display: block; width: 100%; } /* Comment avatar adjustments */ [dir="rtl"] .comment-item .avatar { float: none; margin: 0 0 10px 0; } [dir="rtl"] .comment-item .comment-body { margin-right: 0; } } @media (max-width: 480px) { /* Pagination compact */ [dir="rtl"] .pagination .prev, [dir="rtl"] .pagination .back { float: none; } [dir="rtl"] .pagination .next, [dir="rtl"] .pagination .forward { float: none; } /* Footer links stack */ [dir="rtl"] .footer-links a { display: block; margin: 5px 0; } } /* ====================================================================================================================== * Video Overlay Fix - prevent float breaking full-width layout in overlay * ====================================================================================================================== */ [dir="rtl"] .video-overlay-body .main-content { float: none; width: 100%; } [dir="rtl"] .video-overlay-body .player-wrapper, [dir="rtl"] .video-overlay-body .fp-player, [dir="rtl"] .video-overlay-body .kvs-player, [dir="rtl"] .video-overlay-body video, [dir="rtl"] .video-overlay-body iframe { direction: ltr; width: 100% !important; max-width: 100%; } [dir="rtl"] .video-overlay-header { flex-direction: row-reverse; } [dir="rtl"] .video-overlay-close { order: -1; } [dir="rtl"] .video-overlay-back { flex-direction: row-reverse; } /* Full page video view - also fix float */ [dir="rtl"] #page_view_video .main-content { float: none; width: 100%; } [dir="rtl"] #page_view_video .player-wrapper, [dir="rtl"] #page_view_video video, [dir="rtl"] #page_view_video iframe { direction: ltr; width: 100% !important; }