1001 lines
23 KiB
SCSS
1001 lines
23 KiB
SCSS
|
|
$dark-bg: #0e1624;
|
|
$dark-primary: #172236;
|
|
$dark-primary-hover: #1f2d47;
|
|
$dark-secondary: #1E2D48;
|
|
$dark-blue: #3a4b6b;
|
|
$dark-blue-hover: #44587c;
|
|
$dark-blue-light: #6a7996;
|
|
$dark-headtbl: #283957;
|
|
$dark-text: #d6dbe4;
|
|
$dark-subtext: #959ca8;
|
|
$primary: #0049af;
|
|
$success: #50cd89;
|
|
$info: #7239ea;
|
|
$warning: #FEB82F;
|
|
$danger: #f1416c;
|
|
$secondary: #aaa;
|
|
|
|
.ant-switch-checked{
|
|
background: $dark-blue !important;
|
|
}
|
|
.ant-switch-unchecked{
|
|
background:#007bff !important;
|
|
}
|
|
|
|
body.darkMode {
|
|
overflow-x: hidden;
|
|
|
|
&.main {
|
|
background: $dark-bg;
|
|
}
|
|
}
|
|
|
|
|
|
.darkMode {
|
|
.content{
|
|
background: #0c111c !important;
|
|
}
|
|
.bg-nav {
|
|
display: none;
|
|
}
|
|
.navbar {
|
|
background: transparent;
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0px 0px 27px $dark-bg;
|
|
|
|
&.navScroll {
|
|
background: #00000030;
|
|
box-shadow: 0px 0px 27px #74747430;
|
|
transition: .3s ease-in-out;
|
|
|
|
.nav-logo .titleText,
|
|
.nav-logo .version {
|
|
color: #fff;
|
|
}
|
|
.nav-account .container-account .account .text .name,
|
|
.nav-account .container-account .account .text .role {
|
|
color: $dark-text;
|
|
}
|
|
.ant-menu-submenu-horizontal {
|
|
.ant-menu-submenu-title {
|
|
display: flex !important;
|
|
justify-content: start !important;
|
|
align-items: center !important;
|
|
|
|
.ant-menu-title-content a {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: #fff;
|
|
}
|
|
}
|
|
|
|
&.ant-menu-submenu-open,
|
|
&.ant-menu-submenu-active {
|
|
.ant-menu-title-content a {
|
|
font-size: 12px;
|
|
color: #E7FF56;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: #E7FF56;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btnNotif {
|
|
background: $dark-blue;
|
|
}
|
|
.ant-menu-overflow-item.ant-menu-item {
|
|
background : transparent !important;
|
|
}
|
|
}
|
|
.ant-drawer-content {
|
|
background: $dark-bg !important;
|
|
}
|
|
.ant-drawer-header-title {
|
|
border-bottom: 1px solid $dark-blue;
|
|
|
|
.ant-drawer-close svg {
|
|
fill: $dark-text;
|
|
}
|
|
.ant-drawer-title {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
.ant-drawer-body {
|
|
ul.navNotif {
|
|
li {
|
|
.date {
|
|
span {
|
|
background: $dark-bg;
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
&.notif-unread {
|
|
border: #446fc0;
|
|
background: #354a72;
|
|
|
|
.icon {
|
|
background: #446fc0;
|
|
}
|
|
.title,
|
|
.subtitle {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
&.notif-read {
|
|
border: 1px solid #949aa3;
|
|
background: #49515f;
|
|
|
|
.icon {
|
|
background: #949aa3;
|
|
}
|
|
.title,
|
|
.subtitle {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.containerIcon {
|
|
position: relative;
|
|
width: 15%;
|
|
}
|
|
.desc {
|
|
position: relative;
|
|
width: 85%;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
border-radius: 12px;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
}
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.subtitle {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 15px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menuOutline {
|
|
color: $dark-text;
|
|
}
|
|
.titleText {
|
|
color: $dark-text;
|
|
}
|
|
.navbar .nav-logo .version {
|
|
color: #fff;
|
|
}
|
|
.toggle-icon {
|
|
background: $dark-blue;
|
|
}
|
|
// .navbar .nav-logo {
|
|
// background: $dark-secondary;
|
|
// }
|
|
.navbar .nav-logo img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.navbar .nav-title {
|
|
background: $dark-blue;
|
|
}
|
|
.navbar .nav-title .title {
|
|
color: $dark-text;
|
|
}
|
|
.navbar .nav-title .title::after {
|
|
background: $dark-text;
|
|
}
|
|
.navbar .nav-title .sub-title {
|
|
color: $dark-subtext;
|
|
}
|
|
.nav-account,
|
|
.nav-account .container-account .account {
|
|
background: $dark-secondary;
|
|
}
|
|
.nav-account .detail-account .header .text .name,
|
|
.nav-account .container-account .account .text .name {
|
|
color: $dark-text;
|
|
}
|
|
|
|
.nav-account .detail-account .header .text .role,
|
|
.nav-account .container-account .account .text .role {
|
|
color: $dark-subtext;
|
|
}
|
|
|
|
.nav-account .container-account .second-account i,
|
|
.nav-account .container-account .account i,
|
|
.nav-account .detail-account .header i {
|
|
font-size: 28px;
|
|
color: var(--dark-grey);
|
|
}
|
|
.userOutline {
|
|
background: $dark-blue !important;
|
|
color: $dark-text;
|
|
}
|
|
|
|
.nav-account .detail-account {
|
|
background: $dark-secondary;
|
|
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
|
|
}
|
|
.nav-account .detail-account .header::after {
|
|
background: $dark-blue;
|
|
}
|
|
.nav-account .detail-account button {
|
|
color: $dark-text;
|
|
}
|
|
.nav-account .detail-account button:hover {
|
|
background: $dark-blue;
|
|
color: $dark-subtext;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.containerSignOut {
|
|
|
|
&::before {
|
|
background: $dark-blue;
|
|
}
|
|
}
|
|
|
|
.btnMenuHide {
|
|
background: #ffffff30;
|
|
color: #fff;
|
|
}
|
|
.menuInline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: #172236cb;
|
|
backdrop-filter: blur(10px) !important;
|
|
-webkit-backdrop-filter: blur(10px) !important;
|
|
box-shadow: 0px 0px 27px #49494930;
|
|
z-index: 999999;
|
|
transition: .4s;
|
|
|
|
&.out {
|
|
transform: translateX(-120%);
|
|
transition: .4s;
|
|
}
|
|
}
|
|
|
|
.backdropMenu {
|
|
background: #17223680;
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.sidebar {
|
|
background: $dark-primary;
|
|
border: 1px solid $dark-secondary;
|
|
}
|
|
.sidebar .bg-sidebar {
|
|
display: none;
|
|
}
|
|
.sidebar .nav-links .nav-icon svg {
|
|
fill: $dark-text !important;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sidebar.close .nav-links .nav-menu.active i {
|
|
background: $dark-blue;
|
|
color: $dark-subtext;
|
|
}
|
|
|
|
// .sidebar.close:hover .nav-links .nav-menu.active,
|
|
// .sidebar .nav-links .nav-menu.active {
|
|
// background: $dark-blue;
|
|
// }
|
|
|
|
.sidebar .nav-links .nav-menu i.arrow {
|
|
color: $dark-blue;
|
|
}
|
|
.sidebar.close:hover .nav-links li a .link_name,
|
|
.sidebar .nav-links li a .link_name,
|
|
.sidebar.close:hover .nav-links li .list-link-head .link_name,
|
|
.sidebar .nav-links li .list-link-head .link_name {
|
|
color: $dark-text !important;
|
|
}
|
|
.sidebar .nav-links .nav-menu .submenu .submenu-link a {
|
|
color: $dark-subtext;
|
|
}
|
|
|
|
.sidebar .nav-links .nav-menu .submenu .submenu-link.active {
|
|
background: $dark-blue;
|
|
}
|
|
|
|
.sidebar .nav-links .nav-menu .submenu .submenu-link a::before {
|
|
background: $dark-blue;
|
|
}
|
|
.sidebar .nav-links .nav-menu .submenu .submenu-link.active a::before {
|
|
background: $dark-text;
|
|
}
|
|
.submenu-level3 {
|
|
::before {
|
|
transition: all 0.2s ease;
|
|
}
|
|
a {
|
|
color: $dark-text;
|
|
}
|
|
|
|
}
|
|
|
|
.floating-label {
|
|
background: $dark-primary;
|
|
color: $dark-text;
|
|
}
|
|
|
|
.form-control {
|
|
color: $dark-text;
|
|
background-color: $dark-primary;
|
|
border: 2px solid $dark-blue;
|
|
|
|
&::placeholder {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.ant-picker-input input {
|
|
color: $dark-text;
|
|
|
|
&::placeholder {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.dashCard {
|
|
background: $dark-primary !important;
|
|
border: 1px solid $dark-blue !important;
|
|
box-shadow: 2px 10px 30px rgba(221, 221, 221, 0) !important;
|
|
}
|
|
|
|
.roomsCard,
|
|
.card-table {
|
|
background: $dark-primary !important;
|
|
box-shadow: 2px 10px 30px rgba(24, 24, 24, 0.2) !important;
|
|
}
|
|
|
|
.cards {
|
|
background: $dark-primary !important;
|
|
border: 1px solid $dark-primary !important;
|
|
box-shadow: 2px 10px 30px rgba(24, 24, 24, 0.2) !important;
|
|
}
|
|
|
|
.card {
|
|
background: $dark-primary !important;
|
|
border: 1px solid $dark-secondary !important;
|
|
box-shadow: 2px 10px 30px rgba(221, 221, 221, 0) !important;
|
|
}
|
|
|
|
.cardDark {
|
|
background: $dark-primary;
|
|
border-top-left-radius: 18px !important;
|
|
border-top-right-radius: 18px !important;
|
|
|
|
.text-primary {
|
|
color: $dark-text !important;
|
|
}
|
|
.text-muted {
|
|
color: $dark-subtext !important;
|
|
}
|
|
.separator {
|
|
border-color: $dark-blue-hover;
|
|
}
|
|
}
|
|
.card-footer {
|
|
background: $dark-primary !important;
|
|
border-top: 1px solid $dark-blue-hover !important;
|
|
border-bottom-left-radius: 18px !important;
|
|
border-bottom-right-radius: 18px !important;
|
|
}
|
|
|
|
.wave
|
|
.wave:before,
|
|
.wave:after {
|
|
background-color: $dark-primary;
|
|
}
|
|
.wave.wave-danger {
|
|
background-color: rgba(17, 25, 40, 1) !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, a {
|
|
color: $dark-text;
|
|
}
|
|
|
|
.text-primary,
|
|
.text-dark,
|
|
.text-dark-grey,
|
|
.text-danger {
|
|
color: $dark-text !important;
|
|
}
|
|
.text-muted {
|
|
color: $dark-subtext !important;
|
|
}
|
|
|
|
.rdt_Table,
|
|
.rdt_TableHead {
|
|
background: $dark-primary;
|
|
border-radius: 24px;
|
|
|
|
.sc-hmdomO {
|
|
background: $dark-headtbl;
|
|
border-radius: 12px !important;
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
// bg head tbl
|
|
.rdt_TableHeadRow {
|
|
background: $dark-headtbl !important;
|
|
|
|
// color head
|
|
.sc-cwHptR {
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
|
|
.rdt_TableRow {
|
|
background: $dark-primary;
|
|
border-bottom: 1px solid $dark-blue !important;
|
|
}
|
|
|
|
.rdt_TableRow:hover {
|
|
border: none;
|
|
outline: none;
|
|
background-color: $dark-primary-hover !important;
|
|
}
|
|
|
|
.rdt_TableCell {
|
|
color: $dark-text !important;
|
|
}
|
|
|
|
.rdt_Pagination {
|
|
background: $dark-primary;
|
|
border-radius: 20px;
|
|
margin-top: .5rem;
|
|
color: $dark-text;
|
|
|
|
select {
|
|
border: 1px solid $dark-blue;
|
|
outline: none;
|
|
border-radius: 10px;
|
|
|
|
option {
|
|
background: $dark-blue;
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.fimDOL button svg {
|
|
fill: $dark-text !important;
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
background: $dark-blue !important;
|
|
border: 1px solid $dark-primary !important;
|
|
color: $dark-text !important;
|
|
|
|
svg {
|
|
fill: $dark-text !important;
|
|
}
|
|
}
|
|
.btn-light-primary,
|
|
.btn-light-danger {
|
|
background: $dark-blue-light !important;
|
|
border: 1px solid $dark-primary !important;
|
|
color: $dark-text !important;
|
|
|
|
svg {
|
|
fill: $dark-text !important;
|
|
}
|
|
}
|
|
|
|
.ant-dropdown-menu,
|
|
.ant-dropdown-arrow::before,
|
|
.ant-dropdown-arrow::after {
|
|
background: $dark-blue;
|
|
}
|
|
|
|
.ant-dropdown-menu-item {
|
|
|
|
&:hover {
|
|
background: $dark-blue-hover !important;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: $dark-text !important;
|
|
|
|
svg {
|
|
fill: $dark-text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.searchInput {
|
|
background-color: $dark-blue !important;
|
|
border: 1px solid $dark-blue;
|
|
}
|
|
|
|
.searchInput:focus {
|
|
background-color: $dark-blue !important;
|
|
}
|
|
|
|
.icon-search svg {
|
|
color: $dark-text !important;
|
|
}
|
|
|
|
.ant-select-disabled {
|
|
background: $dark-primary;
|
|
border: 0;
|
|
|
|
.ant-select-selector {
|
|
background: $dark-primary !important;
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
|
|
.ant-select-selector,
|
|
.ant-select-selection-item,
|
|
.ant-select-selection-placeholder {
|
|
background: $dark-primary !important;
|
|
color: $dark-text !important;
|
|
}
|
|
|
|
.ant-select-arrow svg,
|
|
.ant-select-clear svg {
|
|
color: $dark-text !important;
|
|
}
|
|
|
|
.ant-select-dropdown {
|
|
background: $dark-blue;
|
|
|
|
.ant-select-item-option-content {
|
|
color: $dark-text;
|
|
}
|
|
|
|
.ant-select-item-option-active {
|
|
background: $dark-blue-hover;
|
|
}
|
|
}
|
|
|
|
.ant-menu-item-selected {
|
|
background: $dark-blue-hover !important;
|
|
}
|
|
|
|
.ant-menu-sub {
|
|
background: $dark-blue !important;
|
|
}
|
|
|
|
.ant-menu-submenu-vertical {
|
|
.ant-menu-submenu-title {
|
|
display: flex !important;
|
|
justify-content: start !important;
|
|
align-items: center !important;
|
|
|
|
.ant-menu-title-content a {
|
|
font-size: 12px;
|
|
color: $dark-text;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: $dark-text;
|
|
}
|
|
|
|
i {
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-menu-inline {
|
|
.ant-menu-item {
|
|
.ant-menu-title-content a {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: #fff;
|
|
}
|
|
}
|
|
.ant-menu-submenu-inline {
|
|
.ant-menu-title-content a {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: #fff;
|
|
}
|
|
}
|
|
.ant-menu-sub {
|
|
background: #172236cb !important;
|
|
}
|
|
}
|
|
|
|
|
|
.ant-menu-item {
|
|
display: flex !important;
|
|
justify-content: start !important;
|
|
align-items: center !important;
|
|
|
|
.ant-menu-title-content {
|
|
font-size: 12px;
|
|
color: $dark-text;
|
|
}
|
|
.ant-menu-item-icon svg {
|
|
width: 16px;
|
|
fill: $dark-text;
|
|
}
|
|
}
|
|
|
|
section {
|
|
background: $dark-primary !important;
|
|
box-shadow: 2px 10px 30px rgba(59, 62, 107, 0.473) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background: #1788df !important;
|
|
}
|
|
.bg-success {
|
|
background: #10bb82 !important;
|
|
}
|
|
.bg-warning {
|
|
background: #e2a52a !important;
|
|
}
|
|
.bg-danger {
|
|
background: #d83b62 !important;
|
|
}
|
|
.bg-secondary {
|
|
background: #9b9b9b !important;
|
|
}
|
|
|
|
.btn-light-primary,
|
|
.btn-secondary {
|
|
background: $dark-blue !important;
|
|
color: $dark-text !important;
|
|
border: 1px solid $dark-blue !important;
|
|
transition: .3s !important;
|
|
|
|
&:hover {
|
|
background: $dark-blue !important;
|
|
color: $dark-text !important;
|
|
border: 1px solid $dark-blue-light !important;
|
|
transition: .3s !important;
|
|
}
|
|
}
|
|
|
|
.containers,
|
|
.dashboard {
|
|
|
|
.headContent {
|
|
background: #0c111c !important;
|
|
|
|
&::after {
|
|
background: $dark-blue;
|
|
}
|
|
|
|
.headTitle {
|
|
.content {
|
|
.title {
|
|
color: $dark-subtext;
|
|
}
|
|
.title::after {
|
|
background: $dark-subtext;
|
|
}
|
|
.sub-title {
|
|
color: $dark-subtext;
|
|
}
|
|
}
|
|
.title-text {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.headCard {
|
|
border-bottom: 1px solid $dark-blue !important;
|
|
}
|
|
|
|
.bodyContent {
|
|
|
|
.containerTitle {
|
|
border-bottom: 1px solid $dark-blue;
|
|
|
|
.container {
|
|
margin-top: -38px;
|
|
border-top: 1px solid $dark-blue-hover;
|
|
border-right: 1px solid $dark-blue-hover;
|
|
border-left: 1px solid $dark-blue-hover;
|
|
background: $dark-primary;
|
|
|
|
.title {
|
|
background: $dark-primary;
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
line-height: 18px;
|
|
margin-top: 8px;
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.action {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
width: 210px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
|
|
ul {
|
|
|
|
li {
|
|
background: $dark-blue;
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.content {
|
|
background: $dark-blue;
|
|
|
|
.title span {
|
|
color: $dark-text;
|
|
}
|
|
.date {
|
|
color: $dark-text;
|
|
}
|
|
.action {
|
|
color: $dark-text;
|
|
|
|
svg {
|
|
fill: $dark-text
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.containerList {
|
|
|
|
.contentList {
|
|
border: 1px solid $dark-blue-hover !important;
|
|
|
|
.name {
|
|
|
|
.text {
|
|
|
|
a {
|
|
color: $dark-text !important;
|
|
|
|
&:hover {
|
|
color: #eeeeee !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
color: $dark-text !important;
|
|
}
|
|
.subtext {
|
|
color: $dark-subtext !important;
|
|
}
|
|
|
|
.ant-progress-text {
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.containerEmployee {
|
|
.titleList {
|
|
color: $dark-text !important;
|
|
background: $dark-blue !important;
|
|
}
|
|
.employeeList {
|
|
.contentList {
|
|
border-bottom: 1px solid $dark-blue !important;
|
|
color: $dark-text !important;
|
|
|
|
.jamMasuk {
|
|
svg {
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
.jamPulang {
|
|
|
|
svg {
|
|
color: $dark-text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentDetail {
|
|
background: $dark-blue;
|
|
|
|
.icon {
|
|
background: $dark-primary-hover;
|
|
img {
|
|
filter: invert(1)
|
|
}
|
|
}
|
|
|
|
.title,
|
|
.subtitle {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.containerTimeline {
|
|
|
|
&::after {
|
|
background-color: $dark-secondary;
|
|
}
|
|
|
|
.cards {
|
|
background: $dark-blue !important;
|
|
}
|
|
|
|
.tlContent {
|
|
.containers {
|
|
.highlight {
|
|
box-shadow: 2px 10px 30px rgba(27, 27, 27, 0.2);
|
|
|
|
.count {
|
|
color: #f2f2f2;
|
|
|
|
&::after {
|
|
background: #f2f2f2;
|
|
}
|
|
}
|
|
.time {
|
|
span {
|
|
color: #f2f2f2;
|
|
}
|
|
}
|
|
|
|
.btnDetail {
|
|
color: #f2f2f2;
|
|
background: #ffffff35;
|
|
backdrop-filter: blur(4px);
|
|
|
|
&:hover {
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 2px 10px 30px rgba(80, 80, 80, 0.2);
|
|
}
|
|
}
|
|
}
|
|
.text {
|
|
.title,
|
|
.desc {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.containerImg {
|
|
|
|
&::-webkit-scrollbar {
|
|
height: 2px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $dark-primary;
|
|
border: none;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: $dark-primary-hover;
|
|
}
|
|
}
|
|
|
|
&:nth-child(odd),
|
|
&:nth-child(even) {
|
|
.cards::after {
|
|
background: $dark-blue;
|
|
}
|
|
}
|
|
|
|
&:nth-child(even)::before,
|
|
&:nth-child(odd)::before {
|
|
background: $dark-secondary;
|
|
}
|
|
&:nth-child(even)::after,
|
|
&:nth-child(odd)::after {
|
|
background-color: $dark-blue-light;
|
|
border: 4px solid $dark-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rooms {
|
|
.bodyContentRooms {
|
|
.headCardRooms {
|
|
.titleRooms {
|
|
color: $dark-text;
|
|
}
|
|
.subtitleRooms {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
|
|
.containerDescRooms {
|
|
.containerBrg {
|
|
.barang {
|
|
background: $dark-blue;
|
|
.iconBrg {
|
|
background: $dark-primary;
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
.namaBrg {
|
|
color: $dark-text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-row.paginate {
|
|
background: $dark-blue;
|
|
padding: 4px 12px;
|
|
|
|
li, button, a, span,
|
|
.ant-pagination-item-ellipsis {
|
|
color: $dark-text;
|
|
}
|
|
|
|
.ant-pagination-item-active {
|
|
background: $dark-blue-light;
|
|
border: 1px solid $dark-text;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.darkMode {
|
|
.nav-account,
|
|
.nav-account .container-account .account {
|
|
background: transparent;
|
|
}
|
|
}
|
|
} |