[UPD] update style sheets
This commit is contained in:
AHIDev
parent
a81abcd217
commit
f8a2c34e2f
|
|
@ -1,369 +0,0 @@
|
|||
/*Card 1*/
|
||||
|
||||
.card {
|
||||
padding-left: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
border: 1px solid #eee;
|
||||
height: 160px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card.mini .card-body {
|
||||
border: 1px solid #eee;
|
||||
height: 130px!important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card .card-body .box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
.card.mini .card-body .box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
.card .card-body .box-1 i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card.mini .card-body .box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card.mini .card-body .box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: bold;
|
||||
font-size: 44px;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 button.btn-primary {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 p {
|
||||
margin-bottom: 10px;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 .btn-group {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: 10px;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.card .card-body .box-2:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.card .card-body .box-2:hover .btn-group {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.card .card-body .box-2 a{
|
||||
background: #eeeeee;
|
||||
}*/
|
||||
|
||||
.card .card-body .box-1.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.dark-blue {
|
||||
background: #3e5d7f;
|
||||
}
|
||||
|
||||
|
||||
/*Card 2*/
|
||||
|
||||
.card2 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.card2 .card-container {
|
||||
/* border: 1px solid linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%); */
|
||||
border: 1px solid #003056;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header {
|
||||
background: linear-gradient(270deg, #0e3e34 0%, #00887e 75%);
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px!important;
|
||||
padding-right: 10px!important;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header img {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header h4 {
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
padding: 0!important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header h4 i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body {
|
||||
padding: 0;
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #003056;
|
||||
/* border-bottom: 1px solid linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%); */
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr:nth-child(2n) {
|
||||
background: #edf6fd;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr:hover {
|
||||
background: #f8f8f8;
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td {
|
||||
border-top: none;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td:last-child div {
|
||||
/* background: #003056; */
|
||||
background: linear-gradient(270deg, #0e3e34 0%, #00887e 75%); height: 26px;
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
line-height: 26px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td:last-child i:hover {
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
|
||||
.card2 .card-header.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card2 .card-header.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card2 .card-header.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
|
||||
/*Card 3*/
|
||||
|
||||
.card3 {
|
||||
padding: 0 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card3 .card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 {
|
||||
height: 250px;
|
||||
background: #f4fefe;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: all .4s;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #00562e;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.card3 .card-body .box-1:hover{
|
||||
background: #9a9a9a;
|
||||
}*/
|
||||
|
||||
.card3 .card-body .box-1.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
/* color: #003056; */
|
||||
padding-top: 10px!important;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 h3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 48px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #003056;
|
||||
color: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
}
|
||||
|
||||
.card3 .card-body .box-1 img {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2 {
|
||||
background: linear-gradient(270deg, #0e3e34 0%, #00887e 75%); /* background: #003056; */
|
||||
transition: all .4s;
|
||||
cursor: pointer;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2 i {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
transition: all .4s;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2 span {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2 h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2:hover {
|
||||
background: #0c483e;
|
||||
}
|
||||
|
||||
.card3 .card-body .box-2:hover i {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#main-cards {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
/*Card 1*/
|
||||
|
||||
.card {
|
||||
/* padding-left: 0; */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
/*border: 1px solid #eee;*/
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.card .card-body .box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.dark-blue {
|
||||
background: #3e5d7f;
|
||||
}
|
||||
|
||||
.card .card-body .box-1 i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card .card-body .box-2 a {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card .card-body .box-1.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
|
||||
/*Card 2*/
|
||||
|
||||
.card2 {
|
||||
/* padding-left: 0; */
|
||||
margin-top: 20px;
|
||||
}
|
||||
.o_rtl .card2 {
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
||||
.card2 .card-container {
|
||||
/*border: 1px solid #eee;*/
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header {
|
||||
height: 50px;
|
||||
background: #ee6414;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px!important;
|
||||
padding-right: 10px!important;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header h4 {
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-header h4 i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td {
|
||||
border-top: none;
|
||||
/* padding-left: 0; */
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card2 .card-container .card-body table tr td:last-child i:hover {
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
|
||||
.card2 .card-header.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.card2 .card-header.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.card2 .card-header.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
|
@ -1,743 +0,0 @@
|
|||
.o_content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
overflow: hidden;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 0 15px 0 #d7d7d7 !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-data-section {
|
||||
background: linear-gradient(270deg, #0e3e34 0%, #00887e 75%); /* background: #194b8d; */
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section {
|
||||
background: #fff;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-charts-section {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-module-charts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section {
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left: 1px solid #d0d0d0;
|
||||
/* margin-top: 20px; */
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body h3 {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .last-checkin-section {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-img-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-img-section img {
|
||||
height: 60px;
|
||||
/*transform: rotateZ(180deg);*/
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-button-section button {
|
||||
background: #2ead97;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-button-section button.checkout-btn {
|
||||
background: #ff8686;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-button-section button.checkout-btn:hover {
|
||||
background: #f32c2c;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section .attendance-section-body .attendance-button-section button:hover {
|
||||
background: #084e41;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
padding: 0;
|
||||
/*height: 140px;*/
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.profile-container .pp-image-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profile-container .pp-image-section .img-box {
|
||||
background: #eeee;
|
||||
border-radius: 100%;
|
||||
padding: 10px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
background-size: 120%;
|
||||
background-position: center;
|
||||
border: 3px solid #fff;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.profile-container .info-section {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.profile-container .info-section p {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: #7fb8e6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-container .info-section p.fn-section {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profile-container .info-section p.fn-job {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.profile-container .info-section p.fn-company {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.profile-container .info-section p.fn-last-login {
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.profile-container .info-section p.fn-last-login kbd {
|
||||
font-size: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons button {
|
||||
background: #2ead97;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons button:hover {
|
||||
background: #084e41;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons hr {
|
||||
border-color: #2eac96;
|
||||
width: 10%;
|
||||
text-align: left;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.dashboard-container .tabs-container.dashboard-body .dashboard-nav-buttons hr {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs>li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs>li.active>a {
|
||||
border: none;
|
||||
background: #2ead97;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs>li>a {
|
||||
color: #0B2E59;
|
||||
border: 1px solid #2ead97!important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.row-container {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.p0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabs-container {}
|
||||
|
||||
.nav-tabs>li.active>a,
|
||||
.nav-tabs>li.active>a:focus,
|
||||
.nav-tabs>li.active>a:hover {
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #3e5d7f;
|
||||
}
|
||||
|
||||
.charts-over-layer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f8fcff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/*Module Style*/
|
||||
|
||||
.module-box {
|
||||
/*padding-left: 0;
|
||||
padding-right: 30px;*/
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
|
||||
/*.module-box .module-box-container:hover{
|
||||
background: linear-gradient(270deg, #00fdbc, #06211a);
|
||||
background-size: 400% 400%;
|
||||
-webkit-animation: AnimationName 30s ease infinite;
|
||||
-moz-animation: AnimationName 30s ease infinite;
|
||||
animation: AnimationName 30s ease infinite;
|
||||
}
|
||||
.module-box .module-box-container:hover a{
|
||||
color: #ffffff;
|
||||
}*/
|
||||
|
||||
.module-box .module-box-container {
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container #chartContainer,
|
||||
.module-box .module-box-container #chartPaylips,
|
||||
.module-box .module-box-container #chartTimesheet {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.module-box .module-box-container svg {
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.module-box .module-box-container h4.leave-data-percent,
|
||||
.module-box .module-box-container h4.payroll-data-percent,
|
||||
.module-box .module-box-container h4.timesheet-data-percent {
|
||||
text-align: center;
|
||||
transform: translate(0, -85px);
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-top: -60px;
|
||||
color: #2eac96;
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.module-box .module-box-container p {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container p>span {
|
||||
/* margin-right: 10px; */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container p:nth-child(1) span i,
|
||||
.module-box .module-box-container p:nth-child(1) span span {
|
||||
color: #2eac96;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container p:nth-child(2) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container p:nth-child(2) span i,
|
||||
.module-box .module-box-container p:nth-child(2) span span {
|
||||
color: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
color: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
/* color: #003056; */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container h3 {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-top: -20px;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body {
|
||||
padding: 10px 15px 10px 10px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body a h3 {
|
||||
margin: 0;
|
||||
transition: all .3s ease-in-out;
|
||||
color: #8a8a8a;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body h2 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: #06211a;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body h2 span.unit {
|
||||
font-size: 18px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body .module-icon {
|
||||
background: #2bb0ee;
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: -20px;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)!important;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body .module-icon.red {
|
||||
background: #ee451f;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body .module-icon.green {
|
||||
background: #14bf1f;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body .module-icon.yellow {
|
||||
background: #f9d700;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-body .module-icon i {
|
||||
font-size: 45px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.module-box:nth-child(2) .module-box-container .module-body .module-icon i {
|
||||
font-size: 45px;
|
||||
color: #ffffff;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-footer {
|
||||
border-top: 1px solid #eee;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-footer p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.module-box .module-box-container .module-footer p span {
|
||||
color: #9a9aa8;
|
||||
}
|
||||
|
||||
|
||||
/*Theme 1*/
|
||||
|
||||
.module-box .module-box-container.theme-1 {
|
||||
background: #e2f8e3;
|
||||
}
|
||||
|
||||
.module-box .module-box-container.theme-1 .module-icon {
|
||||
background: #449a1b;
|
||||
}
|
||||
|
||||
|
||||
/*Theme 2*/
|
||||
|
||||
.module-box .module-box-container.theme-2 {
|
||||
background: #f9efe6;
|
||||
}
|
||||
|
||||
.module-box .module-box-container.theme-2 .module-icon {
|
||||
background: #bb581f;
|
||||
}
|
||||
|
||||
|
||||
/*Theme 3*/
|
||||
|
||||
.module-box .module-box-container.theme-3 {
|
||||
background: #f7eaf4;
|
||||
}
|
||||
|
||||
.module-box .module-box-container.theme-3 .module-icon {
|
||||
background: #994377;
|
||||
}
|
||||
|
||||
.o_web_client>.o_action_manager {
|
||||
overflow: visible!important;
|
||||
}
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
.fn-id,
|
||||
.fn-department,
|
||||
.fn-job {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img-logout {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
#leave-section,
|
||||
#salary-section,
|
||||
#timesheet-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*Responsive Design*/
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section {
|
||||
height: auto!important;
|
||||
}
|
||||
.module-box .module-box-container {
|
||||
padding: 15px 0;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-charts-section {
|
||||
height: auto!important;
|
||||
padding: 0;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section {
|
||||
border-left: none!important;
|
||||
}
|
||||
.module-box {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.card2 {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative!important;
|
||||
}
|
||||
/*RTL*/
|
||||
.o_rtl .card3 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section {
|
||||
height: auto!important;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-charts-section {
|
||||
height: auto!important;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section {
|
||||
border-left: none!important;
|
||||
}
|
||||
.module-box {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.card2 {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative!important;
|
||||
}
|
||||
.card3 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 767px) and (max-width: 980px) {
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section {
|
||||
height: auto!important;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-charts-section {
|
||||
height: auto!important;
|
||||
}
|
||||
.dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section {
|
||||
display: none;
|
||||
border-left: none!important;
|
||||
}
|
||||
.module-box {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.card2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card2:nth-child(2n) {
|
||||
padding-left: 15px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.card2:nth-child(3n) {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative!important;
|
||||
}
|
||||
.o_rtl .card2:nth-child(2n) {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.o_rtl .card2:nth-child(3n) {
|
||||
padding-left: 15px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {}
|
||||
|
||||
@media (min-width: 1300px) {}
|
||||
|
||||
|
||||
/*RTL*/
|
||||
|
||||
.o_rtl .canvasjs-chart-container {
|
||||
direction: rtl;
|
||||
text-align: right!important;
|
||||
}
|
||||
|
||||
.o_rtl .dashboard-container .dashboard-header .dashboard-user-statistics-section .dashboard-attendance-section {
|
||||
border-left: 1px solid #d0d0d0;
|
||||
border-right: none!important;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container p>span {
|
||||
/* margin-left: 10px; */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.o_rtl .dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs>li>a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.o_rtl .dashboard-container .dashboard-body .dashboard-nav-buttons .nav-tabs>li {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.o_rtl .card2 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/*Loader*/
|
||||
|
||||
.lds-roller {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.lds-roller div {
|
||||
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
transform-origin: 40px 40px;
|
||||
}
|
||||
|
||||
.lds-roller div:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
/* background: #003056; */
|
||||
background: linear-gradient(270deg, #0e3e34 0%, #00887e 75%); margin: -4px 0 0 -4px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(1) {
|
||||
animation-delay: -0.036s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(1):after {
|
||||
top: 63px;
|
||||
left: 63px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(2) {
|
||||
animation-delay: -0.072s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(2):after {
|
||||
top: 68px;
|
||||
left: 56px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(3) {
|
||||
animation-delay: -0.108s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(3):after {
|
||||
top: 71px;
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(4) {
|
||||
animation-delay: -0.144s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(4):after {
|
||||
top: 72px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(5) {
|
||||
animation-delay: -0.18s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(5):after {
|
||||
top: 71px;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(6) {
|
||||
animation-delay: -0.216s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(6):after {
|
||||
top: 68px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(7) {
|
||||
animation-delay: -0.252s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(7):after {
|
||||
top: 63px;
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(8) {
|
||||
animation-delay: -0.288s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(8):after {
|
||||
top: 56px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
@keyframes lds-roller {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
.o_rtl .card .card-body .box-2 .btn-group {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
|
||||
/*Card 3*/
|
||||
|
||||
.o_rtl .card3 {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.o_rtl .card3 .card-body .box-1 h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
/* color: #003056; */
|
||||
padding-top: 10px!important;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
|
||||
/* .o_rtl .card3 .card-body .box-2:hover {
|
||||
overflow: visible;
|
||||
} */
|
||||
|
||||
.o_rtl .card3 .card-body .box-2:hover .btn-group {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.o_rtl .card3 .card-body .box-2 i {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.o_rtl .card3 .card-body .box-2 span {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.o_rtl .card2 .card-container .card-header img {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.o_rtl .card2 .card-container .card-body table tr td:last-child div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.o_rtl .profile-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.o_rtl .p0 {
|
||||
padding: 0;
|
||||
}
|
||||
.o_rtl .card2 {
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
/*.module-box .module-box-container:hover{
|
||||
background: linear-gradient(270deg, #00fdbc, #06211a);
|
||||
background-size: 400% 400%;
|
||||
-webkit-animation: AnimationName 30s ease infinite;
|
||||
-moz-animation: AnimationName 30s ease infinite;
|
||||
animation: AnimationName 30s ease infinite;
|
||||
}
|
||||
.module-box .module-box-container:hover a{
|
||||
color: #ffffff;
|
||||
}*/
|
||||
|
||||
.o_rtl .profile-container .pp-info-section {
|
||||
border: none;
|
||||
border-right: 1px solid #9f9f9f;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body {
|
||||
padding: 10px 15px 10px 10px;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body a h3 {
|
||||
margin: 0;
|
||||
transition: all .3s ease-in-out;
|
||||
color: #8a8a8a;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body h2 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: #06211a;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body .module-icon {
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -20px;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)!important;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body .module-icon.red {
|
||||
background: #ee451f;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body .module-icon.green {
|
||||
background: #14bf1f;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body .module-icon.yellow {
|
||||
background: #f9d700;
|
||||
}
|
||||
|
||||
.o_rtl .module-box .module-box-container .module-body .module-icon i {
|
||||
font-size: 45px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
#main-cards {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*CARD (1)*/
|
||||
.card {
|
||||
padding-left: 0;
|
||||
margin-top: 20px;
|
||||
|
||||
&.mini{
|
||||
.card-body {
|
||||
border: 1px solid #eee;
|
||||
height: 130px!important;
|
||||
padding: 0;
|
||||
|
||||
.box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
border: 1px solid #eee;
|
||||
height: 160px;
|
||||
padding: 0;
|
||||
|
||||
.box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 160px;
|
||||
&.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
&.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
&.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
&.dark-blue {
|
||||
background: #3e5d7f;
|
||||
}
|
||||
i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
.btn-group {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: bold;
|
||||
font-size: 44px;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
button{
|
||||
.btn-primary {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: 10px;
|
||||
transition: all .4s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*CARD (2)*/
|
||||
.card2 {
|
||||
padding-left: 0;
|
||||
|
||||
.card-container {
|
||||
/* border: 1px solid $bg_card_button; */
|
||||
border: 1px solid #003056;
|
||||
padding: 0;
|
||||
|
||||
.card-header {
|
||||
background: $bg_card_header;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px!important;
|
||||
padding-right: 10px!important;
|
||||
|
||||
img {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
padding: 0!important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
|
||||
tr {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #003056;
|
||||
/* border-bottom: 1px solid $bg_card_button; */
|
||||
|
||||
&:hover {
|
||||
background: #f8f8f8;
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: #edf6fd;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: none;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
div {
|
||||
/* background: #003056; */
|
||||
background: $bg_card_header;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
line-height: 26px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
color: #fff;
|
||||
}
|
||||
i{
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*CARD (3)*/
|
||||
.card3 {
|
||||
padding: 0 5px;
|
||||
margin-bottom: 20px;
|
||||
.card-body {
|
||||
padding: 0;
|
||||
|
||||
.box-1 {
|
||||
height: 250px;
|
||||
background: $bg_card;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: all .4s;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #00562e;
|
||||
|
||||
&.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: $bg_card_button;
|
||||
/* color: #003056; */
|
||||
padding-top: 10px!important;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 48px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #003056;
|
||||
color: $bg_card_button;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
background: $bg_card_button;
|
||||
transition: all .4s;
|
||||
cursor: pointer;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
transition: all .4s;
|
||||
float: right;
|
||||
}
|
||||
|
||||
span {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #0c483e;
|
||||
i {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
// CARD (1)
|
||||
.card {
|
||||
margin-top: 20px;
|
||||
.card-body {
|
||||
/*border: 1px solid #eee;*/
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
|
||||
.box-1 {
|
||||
height: 100%;
|
||||
background: #ee6414;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 200px;
|
||||
|
||||
i {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
|
||||
&.dark-blue {
|
||||
background: #3e5d7f;
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CARD (2)
|
||||
.card2 {
|
||||
margin-top: 20px;
|
||||
|
||||
.card-container {
|
||||
/*border: 1px solid #eee;*/
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
|
||||
.card-header {
|
||||
height: 50px;
|
||||
background: #ee6414;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
h4 {
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #ee0c21;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #2bb0ee;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: #08bf17;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 5px 10px;
|
||||
|
||||
table {
|
||||
tr {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: none;
|
||||
/* padding-left: 0; */
|
||||
padding-right: 0;
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
i {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #06211a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
.o_rtl {
|
||||
.card2 {
|
||||
padding-left: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,724 @@
|
|||
$color_1: #888;
|
||||
$color_2: #7fb8e6;
|
||||
$color_3: #fff;
|
||||
$color_4: #0B2E59;
|
||||
$color_5: #2eac96;
|
||||
$color_6: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
$color_7: #8a8a8a;
|
||||
$color_8: #06211a;
|
||||
$color_9: #ffffff;
|
||||
$color_10: #9a9aa8;
|
||||
$background-color_1: transparent;
|
||||
$border-color_1: #2eac96;
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@keyframes AnimationName {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@keyframes lds-roller {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.o_content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.dashboard-header {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
overflow: hidden;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 0 15px 0 #d7d7d7 !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.dashboard-user-data-section {
|
||||
background: $bg_user_section;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dashboard-user-statistics-section {
|
||||
background: $bg_user_statistics;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
.dashboard-charts-section {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dashboard-attendance-section {
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left: 1px solid #d0d0d0;
|
||||
.attendance-section-body {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.last-checkin-section {
|
||||
font-size: 14px;
|
||||
color: $color_1;
|
||||
}
|
||||
.attendance-img-section {
|
||||
text-align: center;
|
||||
img {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.attendance-button-section {
|
||||
button {
|
||||
background: $bg_checkin_btn;
|
||||
border: none;
|
||||
&:hover {
|
||||
background: $bg_checkin_btn_hover;
|
||||
}
|
||||
}
|
||||
button.checkout-btn {
|
||||
background: $bg_checkout_btn;
|
||||
&:hover {
|
||||
background: $bg_checkout_btn_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
.dashboard-nav-buttons {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
button {
|
||||
background: $bg_dashboard_nav;
|
||||
border: none;
|
||||
&:hover {
|
||||
background: $bg_dashboard_nav_hover;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
border-color: $divd_border_color;
|
||||
width: 10%;
|
||||
text-align: left;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
>li {
|
||||
margin-right: 5px;
|
||||
>a {
|
||||
color: $color_nav;
|
||||
border: 1px solid $color_5 !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
>li.active {
|
||||
>a {
|
||||
border: none;
|
||||
background: $color_5;
|
||||
color: $color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-container.dashboard-body {
|
||||
.dashboard-nav-buttons {
|
||||
hr {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-module-charts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
.pp-image-section {
|
||||
padding: 0;
|
||||
.img-box {
|
||||
background: #eeee;
|
||||
border-radius: 100%;
|
||||
padding: 10px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
background-size: 120%;
|
||||
background-position: center;
|
||||
border: 3px solid #fff;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.info-section {
|
||||
padding: 10px;
|
||||
p {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: $color_2;
|
||||
text-align: center;
|
||||
}
|
||||
p.fn-section {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
color: $color_3;
|
||||
}
|
||||
p.fn-job {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p.fn-company {
|
||||
font-size: 13px;
|
||||
}
|
||||
p.fn-last-login {
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 5px;
|
||||
kbd {
|
||||
font-size: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-container {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.p0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
>li.active {
|
||||
>a {
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #3e5d7f;
|
||||
&:focus {
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #3e5d7f;
|
||||
}
|
||||
&:hover {
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #3e5d7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-over-layer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f8fcff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.module-box {
|
||||
padding: 0 !important;
|
||||
.module-box-container {
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
#chartContainer {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
#chartPaylips {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
#chartTimesheet {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
svg {
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
h4.leave-data-percent {
|
||||
text-align: center;
|
||||
transform: translate(0, -85px);
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-top: -60px;
|
||||
color: $color_5;
|
||||
padding: 0 !important;
|
||||
}
|
||||
h4.payroll-data-percent {
|
||||
text-align: center;
|
||||
transform: translate(0, -85px);
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-top: -60px;
|
||||
color: $color_5;
|
||||
padding: 0 !important;
|
||||
}
|
||||
h4.timesheet-data-percent {
|
||||
text-align: center;
|
||||
transform: translate(0, -85px);
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-top: -60px;
|
||||
color: $color_5;
|
||||
padding: 0 !important;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
>span {
|
||||
font-size: 14px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
span {
|
||||
i {
|
||||
color: $color_5;
|
||||
font-size: 14px;
|
||||
}
|
||||
span {
|
||||
color: $color_5;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
i {
|
||||
color: $color_6;
|
||||
color: $color_6;
|
||||
font-size: 14px;
|
||||
}
|
||||
span {
|
||||
color: $color_6;
|
||||
color: $color_6;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-top: -20px;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.module-body {
|
||||
padding: 10px 15px 10px 10px;
|
||||
a {
|
||||
background-color: $background-color_1;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
transition: all .3s ease-in-out;
|
||||
color: $color_7;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: $color_8;
|
||||
margin-top: 5px;
|
||||
span.unit {
|
||||
font-size: 18px;
|
||||
color: $color_1;
|
||||
}
|
||||
}
|
||||
.module-icon {
|
||||
background: #2bb0ee;
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: -20px;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !important;
|
||||
i {
|
||||
font-size: 45px;
|
||||
color: $color_9;
|
||||
}
|
||||
}
|
||||
.module-icon.red {
|
||||
background: #ee451f;
|
||||
}
|
||||
.module-icon.green {
|
||||
background: #14bf1f;
|
||||
}
|
||||
.module-icon.yellow {
|
||||
background: #f9d700;
|
||||
}
|
||||
}
|
||||
.module-footer {
|
||||
border-top: 1px solid #eee;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 4px;
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
span {
|
||||
color: $color_10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.module-box-container {
|
||||
.module-body {
|
||||
.module-icon {
|
||||
i {
|
||||
font-size: 45px;
|
||||
color: $color_9;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-box-container.theme-1 {
|
||||
background: #e2f8e3;
|
||||
.module-icon {
|
||||
background: #449a1b;
|
||||
}
|
||||
}
|
||||
.module-box-container.theme-2 {
|
||||
background: #f9efe6;
|
||||
.module-icon {
|
||||
background: #bb581f;
|
||||
}
|
||||
}
|
||||
.module-box-container.theme-3 {
|
||||
background: #f7eaf4;
|
||||
.module-icon {
|
||||
background: #994377;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_web_client {
|
||||
>.o_action_manager {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
.fn-id {
|
||||
display: none;
|
||||
}
|
||||
.fn-department {
|
||||
display: none;
|
||||
}
|
||||
.fn-job {
|
||||
display: none;
|
||||
}
|
||||
.img-logout {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
#leave-section {
|
||||
display: none;
|
||||
}
|
||||
#salary-section {
|
||||
display: none;
|
||||
}
|
||||
#timesheet-section {
|
||||
display: none;
|
||||
}
|
||||
.o_rtl {
|
||||
.canvasjs-chart-container {
|
||||
direction: rtl;
|
||||
text-align: right !important;
|
||||
}
|
||||
.dashboard-container {
|
||||
.dashboard-header {
|
||||
.dashboard-user-statistics-section {
|
||||
.dashboard-attendance-section {
|
||||
border-left: 1px solid #d0d0d0;
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-body {
|
||||
.dashboard-nav-buttons {
|
||||
.nav-tabs {
|
||||
>li {
|
||||
>a {
|
||||
border-radius: 0;
|
||||
}
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-box {
|
||||
.module-box-container {
|
||||
p {
|
||||
>span {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card2 {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.lds-roller {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
div {
|
||||
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
transform-origin: 40px 40px;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(270deg, rgb(156, 167, 179) 0%, #607992 75%);
|
||||
margin: -4px 0 0 -4px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
animation-delay: -0.036s;
|
||||
&:after {
|
||||
top: 63px;
|
||||
left: 63px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: -0.072s;
|
||||
&:after {
|
||||
top: 68px;
|
||||
left: 56px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: -0.108s;
|
||||
&:after {
|
||||
top: 71px;
|
||||
left: 48px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: -0.144s;
|
||||
&:after {
|
||||
top: 72px;
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: -0.18s;
|
||||
&:after {
|
||||
top: 71px;
|
||||
left: 32px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: -0.216s;
|
||||
&:after {
|
||||
top: 68px;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
animation-delay: -0.252s;
|
||||
&:after {
|
||||
top: 63px;
|
||||
left: 17px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
animation-delay: -0.288s;
|
||||
&:after {
|
||||
top: 56px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.dashboard-container {
|
||||
.dashboard-header {
|
||||
.dashboard-user-statistics-section {
|
||||
height: auto !important;
|
||||
.dashboard-charts-section {
|
||||
height: auto !important;
|
||||
padding: 0;
|
||||
}
|
||||
.dashboard-attendance-section {
|
||||
border-left: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-box {
|
||||
.module-box-container {
|
||||
padding: 15px 0;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.card2 {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative !important;
|
||||
}
|
||||
.o_rtl {
|
||||
.card3 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dashboard-container {
|
||||
.dashboard-header {
|
||||
.dashboard-user-statistics-section {
|
||||
height: auto !important;
|
||||
.dashboard-charts-section {
|
||||
height: auto !important;
|
||||
}
|
||||
.dashboard-attendance-section {
|
||||
border-left: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-box {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.card2 {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative !important;
|
||||
}
|
||||
.card3 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 767px) and (max-width: 980px) {
|
||||
.dashboard-container {
|
||||
.dashboard-header {
|
||||
.dashboard-user-statistics-section {
|
||||
height: auto !important;
|
||||
.dashboard-charts-section {
|
||||
height: auto !important;
|
||||
}
|
||||
.dashboard-attendance-section {
|
||||
display: none;
|
||||
border-left: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-box {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.card2 {
|
||||
margin-bottom: 20px;
|
||||
&:nth-child(2n) {
|
||||
padding-left: 15px;
|
||||
padding-right: 0;
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.canvasjs-chart-canvas {
|
||||
position: relative !important;
|
||||
}
|
||||
.o_rtl {
|
||||
.card2 {
|
||||
&:nth-child(2n) {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
padding-left: 15px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
$color_1: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%);
|
||||
|
||||
.o_rtl {
|
||||
.card {
|
||||
.card-body {
|
||||
.box-2 {
|
||||
.btn-group {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
transition: all .4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card3 {
|
||||
padding: 0 5px;
|
||||
.card-body {
|
||||
.box-1 {
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: $color_1;
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.box-2 {
|
||||
&:hover {
|
||||
.btn-group {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
i {
|
||||
float: left;
|
||||
}
|
||||
span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card2 {
|
||||
.card-container {
|
||||
.card-header {
|
||||
img {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
&:last-child {
|
||||
div {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
padding-left: inherit;
|
||||
}
|
||||
.profile-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
.p0 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
$color_1: #8a8a8a;
|
||||
$color_2: #06211a;
|
||||
$color_3: #ffffff;
|
||||
$background-color_1: transparent;
|
||||
|
||||
.o_rtl {
|
||||
.profile-container {
|
||||
.pp-info-section {
|
||||
border: none;
|
||||
border-right: 1px solid #9f9f9f;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.module-box {
|
||||
.module-box-container {
|
||||
.module-body {
|
||||
padding: 10px 15px 10px 10px;
|
||||
a {
|
||||
background-color: $background-color_1;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
transition: all .3s ease-in-out;
|
||||
color: $color_1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: $color_2;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.module-icon {
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -20px;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !important;
|
||||
i {
|
||||
font-size: 45px;
|
||||
color: $color_3;
|
||||
}
|
||||
}
|
||||
.module-icon.red {
|
||||
background: #ee451f;
|
||||
}
|
||||
.module-icon.green {
|
||||
background: #14bf1f;
|
||||
}
|
||||
.module-icon.yellow {
|
||||
background: #f9d700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
$bg_user_section: linear-gradient(270deg, rgb(14, 62, 52) 0%, rgb(0, 136, 126) 75%) !default;
|
||||
$bg_user_statistics: #FFFFFF !default;
|
||||
$bg_checkin_btn: #2ead97 !default;
|
||||
$bg_checkin_btn_hover: #084e41 !default;
|
||||
$bg_checkout_btn: #2ead97 !default;
|
||||
$bg_checkout_btn_hover: #084e41 !default;
|
||||
$divd_border_color: #2eac96 !default;
|
||||
$bg_dashboard_nav: #2ead97 !default;
|
||||
$bg_dashboard_nav_hover: #084e41 !default;
|
||||
$color_nav: #0B2E59 !default;
|
||||
$bg_card: #f4fefe !default;
|
||||
$bg_card_button: linear-gradient(270deg, #0e3e34 0%, #00887e 75%) !default;
|
||||
$bg_card_header: linear-gradient(270deg, #0e3e34 0%, #00887e 75%) !default;
|
||||
|
||||
|
||||
@if variable-exists(sidebar_bg){
|
||||
$bg_user_section: $sidebar_bg;
|
||||
}
|
||||
|
|
@ -48,13 +48,14 @@
|
|||
<template id="assets_system_backend" name="System Dashboard Assets" inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.0.45/css/materialdesignicons.min.css"/>
|
||||
<link rel="stylesheet" href="/system_dashboard_classic/static/src/css/pluscharts.css"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/pluscharts.scss"/>
|
||||
<!--LTR-->
|
||||
<link rel="stylesheet" href="/system_dashboard_classic/static/src/css/core.css"/>
|
||||
<link rel="stylesheet" href="/system_dashboard_classic/static/src/css/cards.css"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/variables.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/core.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/cards.scss"/>
|
||||
<!--RTL-->
|
||||
<link rel="stylesheet" href="/system_dashboard_classic/static/src/css/rtl-cards.css"/>
|
||||
<link rel="stylesheet" href="/system_dashboard_classic/static/src/css/rtl-core.css"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/rtl-cards.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/system_dashboard_classic/static/src/scss/rtl-core.scss"/>
|
||||
<!--JAVASCRIPT-->
|
||||
<!--<script type="text/javascript" src="/system_dashboard_classic/static/src/js/canvasjs.min.js"></script>-->
|
||||
<script type="text/javascript" src="/system_dashboard_classic/static/src/js/d3.v5.min.js"/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue