관리-도구
편집 파일: plugin.css
/* ************************************************ INDEXING ************************************************** 01: SMOOTH SCROLLBAR 02: SELECT2 03: APEXCHART 04: SUMMERNOTE 05: FLATPICKR 06: CHOICES 07: FLOWBITE 08: SWEET ALEART 09: 10: */ /************************************************* 01: SMOOTH SCROLLBAR **************************************************/ div[class*="scrollbar-track scrollbar-track-"] { @apply bg-transparent w-1.5; } div[class*="scrollbar-thumb scrollbar-thumb-"] { @apply bg-transparent w-1.5 ac-transition; } .smooth-scrollbar:hover { .scrollbar-thumb { @apply bg-gray-900/50; } } .scrollbar-thumb-x { @apply hidden invisible opacity-0; } /************************************************* 02: SELECT2 **************************************************/ .select2.select2-container { @apply !text-sm; } .select2.select2-container .select2-selection { @apply border border-input-border dark:border-dark-border-four bg-transparent rounded-md h-[44px] outline-none dk-theme-card-square; } .select2.select2-container .select2-selection .select2-selection__rendered { @apply text-gray-500 dark:text-dark-text leading-[42px] px-2.5 pr-[33px]; } .select2.select2-container .select2-selection .select2-selection__arrow { @apply h-[42px] w-8 bg-gray-200 dark:bg-dark-icon border-l border-input-border dark:border-dark-border-four rounded-r-md dk-theme-card-square; } .select2.select2-container .select2-selection--multiple { @apply h-auto min-h-[44px]; } .select2-dropdown { @apply dark:bg-dark-card-two dark:text-dark-text dark:border-dark-border-four dk-theme-card-square; } .select2-container--default .select2-search--dropdown .select2-search__field { @apply bg-transparent dark:border-dark-border-four dk-theme-card-square; } .select2-container--default .select2-selection--single .select2-selection__placeholder { @apply font-urbanist font-medium text-gray-500 dark:text-dark-text; } .select2-container--default .select2-results__option--selected { @apply dark:bg-dark-icon; } .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field { @apply mt-0; } .select2.select2-container .select2-selection--multiple .select2-selection__rendered { @apply block py-1 leading-[29px]; } .select2.select2-container .select2-selection--multiple .select2-selection__choice { @apply m-0 mt-[4px] mr-[4px] pr-[6px] h-[24px] leading-[24px] text-xs relative dark:bg-dark-icon dark:border-dark-border-four dk-theme-card-square; } .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove { @apply text-base text-danger dark:border-dark-border-four dark:hover:bg-dark-card-two dk-theme-card-square; } .select2-container--default .select2-results > .select2-results__options { @apply text-sm; } /************************************************* 03: APEXCHART **************************************************/ .dark .apexcharts-backgroundBar { @apply fill-dark-icon; } .dark .apexcharts-tooltip.apexcharts-theme-light { @apply bg-dark-tooltip border border-dark-border-four text-dark-text; } .dark .apexcharts-xaxis-label, .dark .apexcharts-yaxis-label { @apply fill-dark-text-two; } .dark .apexcharts-xcrosshairs, .dark .apexcharts-ycrosshairs { @apply stroke-dark-border-four; } .dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title { @apply bg-dark-tooltip border-b border-dark-border-four; } .dark .apexcharts-xaxistooltip, .dark .apexcharts-yaxistooltip { @apply bg-dark-card-shade border-dark-border text-dark-text; } .dark .apexcharts-grid .apexcharts-gridline { @apply stroke-[0.5] stroke-dark-border; } .dark .apexcharts-legend-text { color: #a0a0a0 !important; } .dark .apexcharts-grid-borders .apexcharts-gridline { @apply stroke-[0.5] stroke-dark-border; } .dark .apexcharts-grid-borders line, .dark .apexcharts-inner .apexcharts-grid-borders line, .dark .apexcharts-graphical .apexcharts-grid-borders line { @apply last:stroke-dark-border; } .dark #total-task-chart .apexcharts-text, .dark #total-task-chart .apexcharts-text.apexcharts-datalabel-label { @apply fill-dark-text-two; } .dark #finance-status-chart .apexcharts-tracks .apexcharts-radialbar-area { @apply stroke-dark-border-five [stroke-opacity:1]; } .dark #analytic-session-overview-chart .apexcharts-series .apexcharts-area { @apply first:fill-dark-chart-layer-one; } .dark #browser-session-chart .apexcharts-series:nth-child(3) .apexcharts-pie-area, .dark #projectStatus .apexcharts-series:nth-child(3) .apexcharts-pie-area { @apply fill-dark-chart-layer-one; } .dark #browser-session-chart .apexcharts-series:nth-child(2) .apexcharts-pie-area, .dark #projectStatus .apexcharts-series:nth-child(2) .apexcharts-pie-area { @apply fill-dark-chart-layer-two; } .dark #browser-session-chart .apexcharts-series:nth-child(1) .apexcharts-pie-area, .dark #projectStatus .apexcharts-series:nth-child(1) .apexcharts-pie-area { @apply fill-dark-chart-layer-three; } .dark #total-task-chart .apexcharts-series:nth-child(1) .apexcharts-radialbar-area { @apply stroke-dark-chart-layer-one; } .dark #total-task-chart .apexcharts-series:nth-child(2) .apexcharts-radialbar-area { @apply stroke-dark-chart-layer-two; } .dark #total-task-chart .apexcharts-series:nth-child(3) .apexcharts-radialbar-area { @apply stroke-dark-chart-layer-three; } .dark #customer-country-chart #jvm-regions-group .jvm-region, .dark #sell-by-country-map #jvm-regions-group .jvm-region { @apply stroke-dark-border-five fill-dark-chart-layer-one; } .dark #customer-country-chart #jvm-markers-labels-group .jvm-marker, .dark #sell-by-country-map #jvm-markers-labels-group .jvm-marker { @apply fill-dark-text; } /************************************************* 04: SUMMERNOTE **************************************************/ .lms-chat-box .note-editor.note-frame { @apply rounded-none !important; } .dark .note-editor.note-airframe, .dark .note-editor.note-frame { @apply border border-dark-border-four; } .dark .note-frame { @apply text-dark-text; } .dark .note-editor .note-toolbar { @apply bg-dark-card-two border-b border-dark-border dk-theme-card-square !important; } .dark .note-editor .note-toolbar .note-dropdown-menu, .dark .note-popover .popover-content .note-dropdown-menu { @apply bg-dark-tooltip border-dark-border; } .dark .note-editor .note-toolbar .note-dropdown-menu a.note-dropdown-item, .dark .note-popover .popover-content .note-dropdown-menu a.note-dropdown-item { @apply text-dark-text; } .dark .note-editor .note-toolbar .note-btn { @apply text-dark-text bg-dark-card-two border border-dark-border dk-theme-card-square !important; } .dark .note-editor.note-frame.fullscreen { @apply bg-dark-body; } /************************************************* 05: FLATPICKR **************************************************/ .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { @apply size-10 rounded-md !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { @apply size-10 rounded-md dk-theme-card-square !important; } .flatpickr-calendar { @apply dk-theme-card-square !important; } .dark .flatpickr-calendar { @apply bg-dark-tooltip border border-dark-border-four shadow-none; } .dark .flatpickr-months .flatpickr-prev-month, .dark .flatpickr-months .flatpickr-next-month { color: #eee !important; fill: #eee !important; background: #292559; } .dark .flatpickr-current-month .flatpickr-monthDropdown-months, .dark .flatpickr-current-month input.cur-year { color: #d7d7d7; } .dark .flatpickr-current-month .flatpickr-monthDropdown-months option { background-color: #001; } .dark .flatpickr-day { color: #d7d7d7; } .dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.flatpickr-disabled:hover, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay, .dark .flatpickr-day.notAllowed, .dark .flatpickr-day.notAllowed.prevMonthDay, .dark .flatpickr-day.notAllowed.nextMonthDay { color: #a0a0a0; } .dark .flatpickr-day.inRange, .dark .flatpickr-day.prevMonthDay.inRange, .dark .flatpickr-day.nextMonthDay.inRange, .dark .flatpickr-day.today.inRange, .dark .flatpickr-day.prevMonthDay.today.inRange, .dark .flatpickr-day.nextMonthDay.today.inRange, .dark .flatpickr-day:hover, .dark .flatpickr-day.prevMonthDay:hover, .dark .flatpickr-day.nextMonthDay:hover, .dark .flatpickr-day:focus, .dark .flatpickr-day.prevMonthDay:focus, .dark .flatpickr-day.nextMonthDay:focus, .dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange, .dark .flatpickr-day.selected.inRange, .dark .flatpickr-day.startRange.inRange, .dark .flatpickr-day.endRange.inRange, .dark .flatpickr-day.selected:focus, .dark .flatpickr-day.startRange:focus, .dark .flatpickr-day.endRange:focus, .dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover, .dark .flatpickr-day.selected.prevMonthDay, .dark .flatpickr-day.startRange.prevMonthDay, .dark .flatpickr-day.endRange.prevMonthDay, .dark .flatpickr-day.selected.nextMonthDay, .dark .flatpickr-day.startRange.nextMonthDay, .dark .flatpickr-day.endRange.nextMonthDay { background: #292559; border-color: #5b43cb; box-shadow: none !important; } .dark .flatpickr-calendar.hasTime .flatpickr-time { @apply border-dark-border-four; } /************************************************* 06: CHOICES **************************************************/ .dark .choices .choices__inner { @apply border-dark-border-four; } .dark .choices .choices__list--dropdown, .dark .choices__list[aria-expanded] { @apply border-dark-border-four bg-dark-body; } .dark .choices .choices__input, .dark .choices__list--dropdown .choices__item, .dark .choices__list[aria-expanded] .choices__item { @apply text-dark-text; } /************************************************* 07: FLOWBITE **************************************************/ div[drawer-backdrop], div[modal-backdrop] { @apply bg-black/50 z-backdrop !important; } .transform-none { @apply !transform-none; } /************************************************* 08: SWEET ALEART **************************************************/ div:where(.swal2-container) div:where(.swal2-popup) { @apply dark:!bg-dark-card-shade; } div:where(.swal2-container) .swal2-html-container { @apply dark:!text-dark-text; }