730 lines
17 KiB
CSS
Vendored
730 lines
17 KiB
CSS
Vendored
@import url("../../../public/css/third_party/vue-html-editor_custom.css");
|
|
@import url("../../../public/css/third_party/dropzone_custom.css");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer container {
|
|
.container {
|
|
@apply px-4 lg:px-0;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.max-h-0 {
|
|
max-height: 0;
|
|
}
|
|
|
|
/* index */
|
|
.index-actions {
|
|
@apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
|
|
}
|
|
|
|
.suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child {
|
|
@apply mt-2;
|
|
}
|
|
|
|
[data-dropdown-actions] {
|
|
transform: unset !important;
|
|
}
|
|
|
|
table thead a {
|
|
@apply bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize;
|
|
}
|
|
|
|
table thead a:hover {
|
|
@apply border-black;
|
|
}
|
|
|
|
.tabs-link::before {
|
|
content: '';
|
|
@apply w-full h-0.5 absolute left-0 right-0 bottom-0 bg-purple rounded-tl-md rounded-tr-md opacity-0 invisible transition-all;
|
|
}
|
|
|
|
.tabs-link:hover::before {
|
|
@apply opacity-100 visible;
|
|
}
|
|
|
|
.notifications-menu ul li a {
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.avatar-attachment {
|
|
@apply text-white inline-flex items-center justify-center;
|
|
background-color: #adb5bd;
|
|
border-radius: .375rem;
|
|
font-size: 1rem;
|
|
height: 45px;
|
|
width: 45px;
|
|
}
|
|
/* index */
|
|
}
|
|
|
|
@layer base {
|
|
/* form */
|
|
.has-error input, .has-error select, .has-error textarea {
|
|
border: 1px solid #cc0000 !important;
|
|
}
|
|
|
|
.has-error .el-select__tags input {
|
|
border: transparent !important;
|
|
}
|
|
|
|
.input-money {
|
|
@apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
|
|
}
|
|
|
|
.disabled-money input, .disabled-money {
|
|
background-color:transparent !important;
|
|
border: none;
|
|
}
|
|
|
|
[type="radio"] {
|
|
@apply text-purple focus:outline-none focus:ring-purple focus:border-purple;
|
|
}
|
|
/* form */
|
|
|
|
/* index */
|
|
.active-tabs {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.active-tabs::before {
|
|
@apply hidden;
|
|
}
|
|
/* index */
|
|
|
|
/* menu */
|
|
.menu-scroll::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.menu-scroll::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
.menu-scroll::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #DCE2F9;
|
|
}
|
|
|
|
.menu-list ul svg {
|
|
width: 22px;
|
|
height: 24px;
|
|
fill: none;
|
|
stroke: #55588B;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
details > summary {
|
|
list-style: none;
|
|
}
|
|
|
|
summary {
|
|
outline:none;
|
|
}
|
|
|
|
details summary::-webkit-details-marker {
|
|
display:none;
|
|
}
|
|
|
|
@keyframes details-fade {
|
|
from {
|
|
opacity:0;
|
|
-webkit-transform: translateY(-0.5em);
|
|
transform: translateY(-0.5em);
|
|
-webkit-transform: var(--details-translate, translateY(-0.5em));
|
|
transform: var(--details-translate, translateY(-0.5em));
|
|
}
|
|
}
|
|
|
|
.menu-list details[open] > *:not(summary) {
|
|
-webkit-animation: details-fade 500ms ease-out;
|
|
animation: details-fade 500ms ease-out;
|
|
}
|
|
|
|
/* menu */
|
|
|
|
input[type="date"]::-webkit-inner-spin-button,
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
display: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.d-none {
|
|
display: none;
|
|
}
|
|
|
|
.d-block {
|
|
display: block;
|
|
}
|
|
|
|
.overflow-overlay {
|
|
overflow-x: overlay;
|
|
}
|
|
|
|
.py-top {
|
|
padding-bottom: 16px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.line-clamp-1 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
height: 3rem;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
height: 4rem;
|
|
}
|
|
/* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean */
|
|
.dashboard .px-12 {
|
|
@apply px-0 lg:pl-12 lg:pr-12;
|
|
}
|
|
|
|
.dashboard .px-6 {
|
|
@apply px-0 lg:pl-6 lg:pr-6;
|
|
}
|
|
/* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean */
|
|
|
|
/* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */
|
|
button, input, optgroup, select, textarea {
|
|
@apply font-normal;
|
|
}
|
|
/* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */
|
|
|
|
/* changelog modal styling for update center */
|
|
.change-log-modal .badge {
|
|
@apply px-3 py-2 rounded-3xl text-xs font-medium bg-green text-white;
|
|
}
|
|
|
|
.change-log-modal h2 {
|
|
@apply text-2xl font-bold text-purple mb-2;
|
|
}
|
|
|
|
.change-log-modal h3 {
|
|
@apply text-lg font-bold text-purple mb-2;
|
|
}
|
|
|
|
.change-log-modal ul {
|
|
@apply list-disc list-inside mb-2;
|
|
}
|
|
|
|
.change-log-modal li {
|
|
@apply text-base text-purple;
|
|
}
|
|
|
|
.change-log-modal a {
|
|
@apply text-green underline;
|
|
}
|
|
/* changelog modal styling for update center */
|
|
|
|
#button-monthly {
|
|
margin-left: unset !important;
|
|
}
|
|
}
|
|
|
|
/* menu */
|
|
.menu-list {
|
|
@apply w-64 lg:w-56 py-7 px-5 bg-purple-lighter menu-scroll overflow-y-auto overflow-x-hidden transition-all;
|
|
}
|
|
|
|
.menu-list-hidden {
|
|
@apply w-0 p-0 opacity-0;
|
|
}
|
|
|
|
.menu__submenu li::before {
|
|
@apply h-full absolute bg-gray-200 -left-4;
|
|
content: '';
|
|
width: 1px;
|
|
}
|
|
|
|
.menu__submenu details.relative:before {
|
|
@apply h-full absolute bg-gray-200 -left-4;
|
|
content: '';
|
|
width: 1px;
|
|
}
|
|
|
|
.menu__submenu li:last-child::before {
|
|
height: 20px;
|
|
}
|
|
/* menu */
|
|
|
|
/* element-ui */
|
|
.el-select {
|
|
@apply block;
|
|
}
|
|
|
|
.el-select .el-select__input {
|
|
@apply focus:outline-none focus:ring-transparent focus:border-transparent bg-transparent cursor-pointer;
|
|
}
|
|
|
|
.el-select .el-input .el-input__inner {
|
|
@apply w-full h-auto text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
|
|
color:#595959 !important;
|
|
}
|
|
|
|
.el-select-dropdown .popper__arrow::after {
|
|
display: none;
|
|
}
|
|
|
|
.el-color-picker--mini {
|
|
padding-right: unset !important;
|
|
}
|
|
|
|
.el-color-picker--mini .el-color-picker__trigger {
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.el-select-dropdown__item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.el-select-dropdown__item span {
|
|
@apply w-full rounded-lg;
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.el-select-dropdown__item .material-icons {
|
|
padding-right: 0 !important;
|
|
padding-left: 0 !important;
|
|
width: auto;
|
|
}
|
|
|
|
.el-select-dropdown__item .badge-success {
|
|
@apply absolute bg-green text-white px-2 py-1 ltr:right-8 rtl:left-8 rounded-md text-xs text-right m-0;
|
|
width: auto;
|
|
}
|
|
|
|
.el-select-dropdown__item .badge-success:hover {
|
|
background-color: #6ea152;
|
|
}
|
|
|
|
.el-select-dropdown__item span:hover {
|
|
background-color: #F5F7FA;
|
|
}
|
|
|
|
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.el-select__footer {
|
|
background-color: transparent !important;
|
|
border-top: 1px solid #D9D9D9;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
cursor: pointer !important;
|
|
margin-top: 8px;
|
|
margin-bottom: -8px !important;
|
|
}
|
|
|
|
.el-select__footer:hover {
|
|
background-color: #55588b !important;
|
|
}
|
|
|
|
.el-select__footer:hover span {
|
|
color: white !important;
|
|
}
|
|
|
|
.el-select__footer span {
|
|
width: auto;
|
|
padding: 0 !important
|
|
}
|
|
|
|
.el-select__footer span:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.el-select-dropdown__list {
|
|
padding: 8px 0 8px 0;
|
|
}
|
|
|
|
.el-select .el-select__tags {
|
|
top: 54%;
|
|
}
|
|
|
|
.el-select .el-select__tags .el-tag {
|
|
@apply bg-purple text-white;
|
|
}
|
|
|
|
.el-select .el-tag__close.el-icon-close {
|
|
@apply bg-transparent text-white;
|
|
}
|
|
|
|
.el-tag.el-tag--info .el-tag__close:hover {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
.is-focus .el-select__caret {
|
|
transform: rotateZ(0) !important;
|
|
}
|
|
|
|
.el-input.el-input--prefix.el-input--suffix .el-select__caret.el-input__icon.el-icon-:before {
|
|
content: "\e6e1";
|
|
}
|
|
|
|
.no-arrow .el-select__caret {
|
|
display: none;
|
|
}
|
|
|
|
.el-input .el-icon-circle-close {
|
|
transform: unset !important;
|
|
transition: unset !important;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.el-date-editor input {
|
|
@apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
|
|
color: #595959 !important;
|
|
}
|
|
|
|
.el-date-editor .el-input__prefix {
|
|
top: 3px;
|
|
left: 0;
|
|
color: #595959;
|
|
}
|
|
|
|
.recurring-invoice-data {
|
|
width: 9rem !important;
|
|
}
|
|
|
|
.recurring-invoice-data input {
|
|
padding: 0 25px !important;
|
|
}
|
|
|
|
.el-color-picker__color {
|
|
margin-top: 13px !important;
|
|
}
|
|
|
|
.el-color-picker--mini .el-color-picker__trigger {
|
|
height: 48px !important;
|
|
}
|
|
|
|
.dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
|
|
width: 900px !important;
|
|
}
|
|
|
|
.dashboard-picker .el-picker-panel__sidebar {
|
|
width: 200px !important;
|
|
}
|
|
|
|
.el-picker-panel__sidebar {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
html[dir='rtl'] .el-picker-panel__sidebar {
|
|
left: 0;
|
|
}
|
|
|
|
.dashboard-picker .el-picker-panel__body {
|
|
width: 700px !important;
|
|
margin-left: 200px !important;
|
|
}
|
|
|
|
.el-input__suffix[style*="direction:rtl"] {
|
|
left: 0;
|
|
right: unset !important;
|
|
}
|
|
|
|
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
|
|
background: #55588B !important;
|
|
border-color: #55588B !important;
|
|
}
|
|
|
|
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
|
|
-webkit-box-shadow: -10px 0 0 #888aae !important;
|
|
box-shadow: -10px 0 0 #888aae !important;
|
|
}
|
|
|
|
.el-date-editor .el-range-input, .el-date-editor .el-range-input::placeholder {
|
|
color: #424242;
|
|
}
|
|
|
|
.el-picker-panel__shortcut {
|
|
width: auto;
|
|
line-height: 20px;
|
|
border-bottom: 1px solid transparent;
|
|
padding-left: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.el-picker-panel__shortcut:hover {
|
|
color: #000000 !important;
|
|
border-bottom: 1px solid black;
|
|
transition: all 0.2s ease-in;
|
|
}
|
|
|
|
html[dir='rtl'] .el-input__suffix {
|
|
left: 5px;
|
|
right: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
html[dir='rtl'] .el-scrollbar__wrap {
|
|
margin-left: -15px !important;
|
|
margin-right: unset !important;
|
|
}
|
|
|
|
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
|
|
right: 15px !important;
|
|
}
|
|
|
|
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
.el-range-editor.el-input__inner {
|
|
width: 100%;
|
|
}
|
|
/* apex-chart cash-flow */
|
|
.apex-chart-cash-flow .apexcharts-legend {
|
|
width: 100% !important;
|
|
justify-content: space-around !important;
|
|
padding: 0;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
|
|
.apex-chart-cash-flow .apexcharts-legend-series {
|
|
width: 8rem;
|
|
text-align: center;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.apex-chart-cash-flow .apexcharts-toolbar {
|
|
top: 45px !important;
|
|
}
|
|
/* apex-chart cash-flow */
|
|
}
|
|
/* element-ui */
|
|
|
|
/* apex-chart */
|
|
.apexcharts-donut-custom span.apexcharts-legend-text {
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 1 !important;
|
|
-webkit-box-orient: vertical !important;
|
|
overflow: hidden !important;
|
|
height: 1rem !important;
|
|
}
|
|
|
|
.apexcharts-donut-custom .apexcharts-legend-series {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.apexcharts-donut-custom .apexcharts-legend {
|
|
padding: 0 !important;
|
|
}
|
|
/* apex-chart */
|
|
|
|
/* collapse */
|
|
.active-collapse {
|
|
@apply opacity-100;
|
|
height: auto;
|
|
}
|
|
|
|
.active-collapse-animation {
|
|
height: 62px;
|
|
}
|
|
|
|
.collapse-sub {
|
|
@apply opacity-0 h-0 overflow-hidden;
|
|
}
|
|
|
|
.collapse-sub-report.collapse-sub {
|
|
@apply hidden;
|
|
}
|
|
/* collapse */
|
|
|
|
.none-truncate {
|
|
overflow: initial;
|
|
text-overflow: unset;
|
|
}
|
|
|
|
.disabled-link {
|
|
@apply cursor-default pointer-events-none opacity-50;
|
|
}
|
|
|
|
/* template table border radius control */
|
|
html[dir="rtl"] .lines-radius-border thead td:first-child {
|
|
border-radius: 0px 10px 10px 0px;
|
|
}
|
|
|
|
html[dir="rtl"] .lines-radius-border thead td:last-child {
|
|
border-radius: 10px 0px 0px 10px;
|
|
}
|
|
/* template table border radius control */
|
|
|
|
/* responsive for role mobile */
|
|
.scroll-div-mobile {
|
|
width: 700px;
|
|
}
|
|
|
|
@media only screen and (min-width: 991px) {
|
|
.scroll-div-mobile {
|
|
width: 100%;
|
|
}
|
|
}
|
|
/* responsive for role mobile */
|
|
|
|
/* full-width for mobile. Some component use inline styling for width */
|
|
@media only screen and (max-width: 991px) {
|
|
.full-width-mobile {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
/* full-width for mobile. Some component use inline styling for width */
|
|
|
|
[dir="ltr"] .ltr\:-right-57 {
|
|
right: -14.5rem;
|
|
}
|
|
|
|
[dir="rtl"] .rtl\:-right-59 {
|
|
right: 16.5rem;
|
|
}
|
|
|
|
/* plans page accordion */
|
|
.active-accordion .js-accordions-text {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.active-accordion i {
|
|
transform: rotate(180deg);
|
|
}
|
|
/* plans page accordion */
|
|
|
|
/* hidden scroll-bar */
|
|
.hide-scroll-bar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.hide-scroll-bar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
/* hidden scroll-bar */
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
.small-table-width {
|
|
width: 550px;
|
|
}
|
|
|
|
.small-col {
|
|
width: auto !important;
|
|
}
|
|
|
|
.description-col {
|
|
width: 180px !important
|
|
}
|
|
|
|
.amount-col {
|
|
width: 70px !important;
|
|
}
|
|
|
|
.name-col {
|
|
width: 6rem !important
|
|
}
|
|
|
|
.information-content {
|
|
transform: unset !important;
|
|
margin-top: 70px !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 480px) {
|
|
.large-overflow-unset {
|
|
overflow-x: unset;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
.dashboard-picker .el-picker-panel__body {
|
|
width: 100% !important;
|
|
margin-left: unset !important;
|
|
}
|
|
|
|
.dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
#nprogress .bar {
|
|
background: #A6A8C9 !important;
|
|
height: 5px !important;
|
|
}
|
|
|
|
#nprogress .peg {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#nprogress .spinner .spinner-icon {
|
|
border-top-color: #55588b !important;
|
|
border-left-color: #55588b !important;
|
|
}
|
|
|
|
.swiper-button-prev::after , .swiper-button-next::after {
|
|
@apply hidden;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
background-color: #7D7D7D !important;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background-color: #7D7D7D !important;
|
|
border-radius: 1.5rem;
|
|
padding: 4px 15px;
|
|
}
|
|
|
|
/* document body selected */
|
|
::-moz-selection {
|
|
background: #55588B;
|
|
color: #FFFFFF;
|
|
}
|
|
::selection {
|
|
background: #55588B;
|
|
color: #FFFFFF;
|
|
}
|
|
/* document body selected */
|
|
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
form {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
body {
|
|
@apply text-black;
|
|
font-family: "Quicksand", sans-serif;
|
|
height: 100%;
|
|
}
|