Sakai PrimeVUE 免费模板的 RTL 和滚动条 CSS

Question

这是一种自我回答的问题，因为我已经搜索了很多 PrimeVue Sakai 模板的 RTL CSS，但没有找到它。我决定通过自制的 RTL CSS 文件来帮助社区。作为奖励，我添加了使用模板变量的滚动条设计。

放心使用:)

Answer 1

结果预览https://sakai.primevue.org/您可以通过DevTools检查器样式表进行测试

primevue-sakai-rtl.css

/*
Author: ILIYA KHERSONSKI
Date: 2024-09-16
Description: [PrimeVue Sakai Template] - RTL - Right-To-Left
Version: 1.0.0
License: MIT
*/

html, body {
    direction: rtl;
}

.layout-main-container {
    transition: margin-right var(--layout-section-transition-duration);
}

.layout-topbar {
    left: unset;
    right: 0;
    transition: right var(--layout-section-transition-duration);
}

.layout-topbar .layout-menu-button {
    margin-right: unset;
    margin-lef: .5rem;
}

.layout-topbar .layout-topbar-actions {
    margin-left: unset;
    margin-right: auto;    
}

@media (max-width: 991px) {
    .layout-topbar .layout-menu-button {
        margin-right: 0;
        margin-left: .5rem;
    }

    .layout-topbar .layout-topbar-menu {
        right: unset;
        left: 2rem;
    }

    .layout-topbar .layout-topbar-menu .layout-topbar-action i {
        margin-right: unset;
        margin-left: .5rem;
    }
}

.layout-sidebar {
    left: unset;
    right: 2rem;
    transition: transform var(--layout-section-transition-duration), right var(--layout-section-transition-duration);
}

.layout-menu a.active-menuitem>.layout-submenu-toggler {
    transform: rotate(180deg);
}

.layout-menu li.active-menuitem>a .layout-submenu-toggler {
    transform: rotate(180deg);
}

.layout-menu ul a .layout-menuitem-icon {
    margin-right: unset;
    margin-left: .5rem;
}

.layout-menu ul a .layout-submenu-toggler {
    margin-left: unset;
    margin-right: auto;
}

.layout-menu ul ul li a {
    margin-left: unset;
    margin-right: 1rem;
}

.layout-menu ul ul li li a {
    margin-left: unset;
    margin-right: 2rem;
}

.layout-menu ul ul li li li a {
    margin-left: unset;
    margin-right: 2.5rem;
}

.layout-menu ul ul li li li li a {
    margin-left: unset;
    margin-right: 3rem;
}

.layout-menu ul ul li li li li li a {
    margin-left: unset;
    margin-right: 3.5rem;
}

.layout-menu ul ul li li li li li li a {
    margin-left: unset;
    margin-right: 4rem;
}

.flex-row {
    flex-direction: row-reverse;
}

.flex-row-reverse {
    flex-direction: row;
}

@media (min-width: 992px) {
    .layout-wrapper.layout-overlay .layout-main-container {
        margin-left:unset;
        margin-righ:0;
        padding-left: unset;
        padding-righ: 2rem;
    }

    .layout-wrapper.layout-overlay .layout-sidebar {
        transform: translate(100%);
        left: unset;
        right: 0;
        border-top-left-radius: unset;
        border-top-righ-radius: 0;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: 0;
        border-right: unset;
        border-left: 1px solid var(--surface-border);
        transition: transform .4s cubic-bezier(.05,.74,.2,.99),right .4s cubic-bezier(.05,.74,.2,.99);
    }

    .layout-wrapper.layout-static .layout-main-container {
        margin-left: unset;
        margin-right: 22rem;
    }

    .layout-wrapper.layout-static.layout-static-inactive .layout-sidebar {
        transform: translate(100%);
        left: unset;
        right: 0;
    }

    .layout-wrapper.layout-static.layout-static-inactive .layout-main-container {
        margin-left: unset;
        margin-right: 0;
        padding-left: unset;
        padding-right: 2rem;
    }
}

@media (max-width: 991px) {
    .layout-wrapper .layout-main-container {
        margin-left: unset;
        margin-right: 0;
        padding-left: unset;
        padding-right: 2rem;
    }

    .layout-wrapper .layout-sidebar {
        transform: translate(100%);
        left: unset;
        right: 0;
        border-top-left-radius: unset;
        border-top-right-radius: 0;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: 0;
        transition: transform .4s cubic-bezier(.05,.74,.2,.99),right .4s cubic-bezier(.05,.74,.2,.99);
    }

    .layout-wrapper .layout-mask {
        left: unset;
        right: 0;
    }
}

blockquote {
    border-left: unset;
    border-right: 4px solid #90a4ae;
}

.left-0 {
    left: unset;
    right: 0;
}

.right-0 {
    right: unset;
    left: 0;
}

.right-8 {
    right: unset;
    left: 2rem;
}

.ml-0 {
    margin-left: unset;
    margin-right: 0;
}

.ml-2 {
    margin-left: unset;
    margin-right: .5rem;
}

.ml-4 {
    margin-left: unset;
    margin-right: 1rem;
}

.ml-6 {
    margin-left: unset;
    margin-righ: 1.5rem;
}

.mr-0 {
    margin-right: unset;
    margin-left: 0;
}

.mr-2 {
    margin-right: unset;
    margin-left: .5rem;
}

.mr-20 {
    margin-right: unset;
    margin-left: 5rem;
}

.mr-4 {
    margin-right: unset;
    margin-left: 1rem;
}

.pl-8 {
    padding-left: unset;
    padding-right: 2rem;
}

@media (min-width: 576px) {
    .sm\:flex-row {
        flex-direction: row-reverse;
    }
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row-reverse;
    }
    
    .md\:ml-2 {
        margin-left: unset;
        margin-right: .5rem;
    }
    
    .md\:ml-20 {
        margin-left: unset;
        margin-right: 5rem;
    }
    
    .md\:mr-2 {
        margin-right: unset;
        margin-left: .5rem;
    }
    
    .md\:text-left {
        text-align: right;
    }
}

@media (min-width: 992px) {
    .lg\:flex-row {
        flex-direction: row-reverse;
    }
    
    .lg\:pr-8 {
        padding-right: unset;
        padding-left: 2rem;
    }

    .lg\:text-left {
        text-align: right;
    }

    .lg\:text-right {
        text-align: left;
    }
}

primevue-sakai-scrollbar.css

/*
Author: ILIYA KHERSONSKI
Date: 2024-09-16
Description: [PrimeVue Sakai Template] - Styling the custom scrollbar
Version: 1.0.0
License: MIT
*/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb {
  background: var(--p-button-primary-background);
  border: 0;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--p-button-primary-hover-background);
}

::-webkit-scrollbar-thumb:active {
  background: var(--p-button-primary-hover-background);
}

::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
  border-radius: 0px;
}

::-webkit-scrollbar-track:hover {
  background: var(--p-inputtext-border-color);
}

::-webkit-scrollbar-track:active {
  background: var(--p-inputtext-border-color);
}

::-webkit-scrollbar-corner {
  background: transparent;
}