Gagan7900
725 lines
15 KiB
SCSS
725 lines
15 KiB
SCSS
|
|
|
|
// grid js
|
|
.no-border-gridjs {
|
|
.gridjs.gridjs-container{
|
|
.gridjs-wrapper{
|
|
@apply border-0
|
|
}
|
|
}
|
|
}
|
|
.custom-gridjs{
|
|
.gridjs-table{
|
|
.gridjs-thead{
|
|
.gridjs-tr {
|
|
.gridjs-th:hover {
|
|
@apply bg-bodybg
|
|
}
|
|
}
|
|
}
|
|
}
|
|
th.gridjs-th-sort:focus, th.gridjs-th-sort:hover{
|
|
@apply bg-bodybg;
|
|
}
|
|
}
|
|
#grid-header-fixed{
|
|
.custom-gridjs{
|
|
.gridjs.gridjs-container{
|
|
.gridjs-wrapper {
|
|
@apply border-0
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.gridjs-pagination .gridjs-pages button:last-child {
|
|
@apply dark:border-defaultborder/10
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
input{
|
|
@apply focus-visible:outline-none!;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
@apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent border border-inputborder p-0.5 rounded-[50%] checked:bg-primary checked:after:content-[""] checked:after:absolute checked:after:w-[6px] checked:after:h-[6px] checked:after:bg-white checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:rounded-[50%] checked:after:left-2/4 checked:after:top-2/4 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
input[type="checkbox"].form-check-input {
|
|
@apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent dark:border dark:border-defaultborder/10 p-0.5 rounded-sm
|
|
checked:bg-primary checked:after:content-['\EB7B'] checked:after:font-[remixicon] checked:after:absolute checked:after:text-white checked:after:text-[0.65rem]
|
|
checked:after:font-bold checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:left-2/4 checked:after:top-2/4
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.dark {
|
|
input[type="date"].calenderColor::-webkit-calendar-picker-indicator ,
|
|
input[type="week"].calenderColor::-webkit-calendar-picker-indicator ,
|
|
input[type="month"].calenderColor::-webkit-calendar-picker-indicator,
|
|
input[type="time"].calenderColor::-webkit-calendar-picker-indicator ,
|
|
input[type="datetime-local"].calenderColor::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
/* flips dark icon to light */
|
|
/* optional: adds white background */
|
|
color: white;
|
|
/* sets icon color to white */
|
|
opacity: 1;
|
|
/* ensures it's visible */
|
|
}
|
|
}
|
|
|
|
|
|
.custom-select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808080' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
|
|
background-size: 1.25rem 0.8rem !important;
|
|
@apply bg-no-repeat bg-[calc(100%_-_0.35rem)_center] pr-10 appearance-none;
|
|
}
|
|
[dir=rtl] .custom-select {
|
|
background-position: .35rem center;
|
|
}
|
|
|
|
|
|
.apexcharts-svg,
|
|
.apexcharts-canvas {
|
|
@apply w-full! focus:!outline-none;
|
|
|
|
}
|
|
|
|
.ng-select .ng-select-container {
|
|
@apply min-h-[40px]!;
|
|
}
|
|
.form-control.angualr-search {
|
|
@apply w-[250px]!
|
|
}
|
|
|
|
.mat-mdc-header-row {
|
|
@apply z-[10] relative;
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper {
|
|
|
|
&::part(button-prev),
|
|
&::part(button-next) {
|
|
@apply h-[1.2rem] w-[1.2rem]! p-[5px]! rounded-[0.5rem] bg-[#0000004d] text-[#fffafa];
|
|
|
|
}
|
|
|
|
&::part(bullet-active){
|
|
@apply bg-white w-5 h-1 rounded-md text-black;
|
|
}
|
|
&::part(bullet){
|
|
@apply bg-[rgba(255,_255,_255,_0.6)] text-black opacity-[0.5] w-5 h-1 rounded-md ;
|
|
}
|
|
|
|
}
|
|
|
|
.landing-body{
|
|
.swiper.pagination-dynamic {
|
|
|
|
|
|
&::part(bullet-active){
|
|
@apply bg-primary w-5 h-1 rounded-md text-black;
|
|
}
|
|
&::part(bullet){
|
|
@apply bg-[rgba(0,_0,_0,_0.3)] dark:bg-[rgba(255,_255,_255,_0.6)] text-black opacity-[0.5] w-5 h-1 rounded-md ;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.swiper.custom-pagination{
|
|
&::part(bullet-active){
|
|
@apply bg-white w-5 h-5 rounded-md text-black;
|
|
}
|
|
&::part(bullet){
|
|
@apply bg-[rgba(255,_255,_255,_0.6)] text-black opacity-[0.5] w-5 h-5 rounded-md ;
|
|
}
|
|
}
|
|
|
|
|
|
// .hs-overlay-backdrop{
|
|
// @apply hs-overlay-backdrop-open:bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc];
|
|
// }
|
|
// .iconclick {
|
|
// @apply z-[-1] relative ;
|
|
// }
|
|
.iconclick {
|
|
position: relative;
|
|
color: inherit;
|
|
display: inline-flex;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pickr {
|
|
.color-picker {
|
|
@apply visible;
|
|
visibility: visible !important;
|
|
left: 0px !important;
|
|
}
|
|
}
|
|
|
|
.color-picker.open {
|
|
.hex-text,
|
|
.hsla-text,
|
|
.rgba-text{
|
|
.box{
|
|
@apply border border-defaultborder dark:border-defaultborder/10 dark:!text-white mb-[2px] p-[2px];
|
|
input{
|
|
@apply border-0 dark:!text-white;
|
|
}
|
|
div{
|
|
@apply dark:!text-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
#stocks-marketcap{
|
|
@apply w-full!
|
|
}
|
|
|
|
|
|
@media (max-width:440px) {
|
|
#stepline-chart,
|
|
#crm-revenue-analytics,
|
|
#treemap-colorranges,
|
|
#treemap-multi,
|
|
#treemap-basic,
|
|
#treemap-distributed,
|
|
#boxplot-basic,
|
|
#boxplot-scatter,
|
|
#boxplot-horizontal,
|
|
#candlestick-basic,
|
|
#candlestick-line,
|
|
#candlestick-categoryx,
|
|
#column-rotated-labels,
|
|
#area-stacked,
|
|
#zoom-chart,
|
|
#annotation-chart,
|
|
#bar-negative,
|
|
#timeline-advanced,
|
|
#timeline-multi,
|
|
#bubble-simple,
|
|
#bubble-3d,
|
|
#rangearea-basic,
|
|
#rangearea-combo,
|
|
#mixed-linecolumn,
|
|
#mixed-multiple-y,
|
|
#area-negative,
|
|
#candlestick-categoryx,
|
|
#heatmap-multiseries,
|
|
#chart-months {
|
|
.apexcharts-toolbar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
#bar-categories {
|
|
.apexcharts-datalabels {
|
|
@apply translate-x-[20px];
|
|
}
|
|
}
|
|
|
|
|
|
.apexcharts-legend-marker {
|
|
stroke: none;
|
|
}
|
|
|
|
.mat-mdc-paginator-range-actions {
|
|
@apply flex-wrap;
|
|
|
|
}
|
|
@media (max-width:360px) {
|
|
.mat-mdc-paginator-range-label{
|
|
@apply hidden!;
|
|
}
|
|
}
|
|
|
|
|
|
#project-descriptioin-editor .ql-container {
|
|
@apply h-[200px] overflow-auto;
|
|
}
|
|
|
|
|
|
|
|
[data-nav-layout="horizontal"][data-menu-styles="light"][data-page-style="modern"]{
|
|
&[data-header-styles="light"],
|
|
&[data-header-styles="dark"]{
|
|
.app-sidebar{
|
|
@apply border-b border-b-[var(--color-defaultborder)]! ;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 622px) {
|
|
.companies-search-input{
|
|
.ng-select-container{
|
|
border-radius: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 622px) {
|
|
.companies-search-input{
|
|
input.form-control{
|
|
@apply border border-defaultborder! dark:!border-defaultborder/10 rounded-e-sm!;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
[data-vertical-style=doublemenu] .app-sidebar .main-sidebar-header {
|
|
|
|
@apply border-e-0!;
|
|
}
|
|
}
|
|
|
|
.ng-select.custom-invoice-currency{
|
|
.ng-select-container{
|
|
@apply bg-[var(--color-light)]!;
|
|
}
|
|
}
|
|
|
|
.search-company-cart-star .br-units .br-unit{
|
|
@apply text-[1.25rem]!;
|
|
}
|
|
|
|
.custom-close-ngselect.ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{
|
|
@apply hidden!;
|
|
}
|
|
|
|
|
|
|
|
.ti-pagination li:not(:first-child) {
|
|
.page-link {
|
|
@apply border-s-[0px]!;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
select{
|
|
@apply focus-visible:outline-none;
|
|
}
|
|
|
|
|
|
//range sliders
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply focus-visible:outline-none;
|
|
}
|
|
|
|
.ngx-slider .ngx-slider-bar {
|
|
@apply dark:bg-[var(--color-bodybg2)];
|
|
}
|
|
|
|
.ngx-slider .ngx-slider-bar:not(.ngx-slider-selection) {
|
|
@apply dark:bg-[var(--color-gray)]!;
|
|
}
|
|
|
|
.ngx-slider {
|
|
.ngx-slider-pointer.ngx-slider-active:after {
|
|
@apply bg-[#fff]!;
|
|
}
|
|
}
|
|
.cusotm-ngx-slider {
|
|
.ngx-slider {
|
|
@apply z-0
|
|
}
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-primary)];
|
|
}
|
|
}
|
|
|
|
#secondary-colored-slider{
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-secondary)];
|
|
}
|
|
}
|
|
#warning-colored-slider{
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-warning)];
|
|
}
|
|
}
|
|
#info-colored-slider{
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-info)];
|
|
}
|
|
}
|
|
#success-colored-slider{
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-success)];
|
|
}
|
|
}
|
|
#danger-colored-slider{
|
|
.ngx-slider .ngx-slider-pointer {
|
|
@apply bg-[var(--color-danger)];
|
|
}
|
|
}
|
|
#slider-toggle{
|
|
.ngx-slider.vertical .ngx-slider-pointer {
|
|
@apply rtl:!left-[-3px];
|
|
}
|
|
}
|
|
#merging-tooltips-slider{
|
|
.noUi-tooltip{
|
|
@apply dark:bg-[var(--color-bodybg)/10] dark:border-[var(--color-defaultborder)/10] dark:text-white;
|
|
}
|
|
}
|
|
|
|
#red {
|
|
@apply accent-[#ff383c] dark:accent-[#ff4a4e];
|
|
}
|
|
#green {
|
|
@apply accent-[#189777] dark:accent-[#32ffcb];
|
|
}
|
|
#blue {
|
|
@apply accent-[#757cd9] dark:accent-[#979eff];
|
|
}
|
|
|
|
#result {
|
|
@apply border-[1px] border-defaultborder dark:!border-defaultborder/10;
|
|
}
|
|
|
|
:host ::ng-deep #red {
|
|
@apply accent-[#ff383c] dark:accent-[#ff4a4e];
|
|
|
|
}
|
|
:host ::ng-deep #green {
|
|
@apply accent-[#189777] dark:accent-[#32ffcb];
|
|
}
|
|
:host ::ng-deep #blue {
|
|
@apply accent-[#757cd9] dark:accent-[#979eff];
|
|
}
|
|
|
|
|
|
|
|
|
|
#choices-text-email-filter{
|
|
.ng-trigger{
|
|
@apply bg-[var(--color-primary)]
|
|
}
|
|
.ng2-tag-input{
|
|
@apply border-0 p-0! ;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.pickr-container{
|
|
.example-form2{
|
|
.mat-mdc-form-field-flex{
|
|
@apply border border-defaultborder dark:border-defaultborder/10 px-[15px] rounded-[6px];
|
|
}
|
|
.mdc-line-ripple::before,
|
|
.mdc-line-ripple.mdc-line-ripple--active:after{
|
|
@apply border-0;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.AjaxloaderSweetalertInputClass {
|
|
@apply shadow-none;
|
|
}
|
|
|
|
#chart-line,
|
|
#chart-line2,
|
|
#chart-area,
|
|
#sessionsByDevice {
|
|
.apexcharts-marker {
|
|
@apply stroke-none;
|
|
}
|
|
}
|
|
|
|
[data-menu-styles=gradient][data-vertical-style="doublemenu"][data-nav-layout="vertical"] {
|
|
.app-sidebar {
|
|
.main-sidebar-header {
|
|
@apply border-gray-500!
|
|
}
|
|
|
|
.main-menu .slide.has-sub .slide-menu.child1 .slide {
|
|
@apply my-0!;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mat-mdc-notch-piece {
|
|
border-width: 1px !important;
|
|
}
|
|
|
|
// .hs-overlay-backdrop {
|
|
// @apply z-[102];
|
|
// }
|
|
|
|
|
|
/* Start:: Create NFT Item Styles */
|
|
.create-nft-item {
|
|
.filepond--root {
|
|
@apply w-full h-[15.08rem] mx-auto text-center rounded-sm;
|
|
|
|
@media screen and (min-width: 1660px) {
|
|
@apply h-[14.75rem] w-[20.25rem] m-0;
|
|
}
|
|
|
|
// 1. Center the file item container itself
|
|
.filepond--file {
|
|
@apply m-0!; // Removes default margins that cause shifting
|
|
}
|
|
.filepond--list{
|
|
.filepond--item{
|
|
@apply me-[0.8rem]
|
|
}
|
|
}
|
|
// 2. Fix the preview wrapper alignment
|
|
.filepond--image-preview-wrapper {
|
|
@apply h-full! !w-full rounded-[0.3rem] !m-0;
|
|
}
|
|
|
|
.filepond--image-preview {
|
|
@apply h-full! !bg-transparent; // Transparent bg prevents weird color blocks
|
|
|
|
canvas {
|
|
/* Object-contain is better here if you want to see the whole image without cropping */
|
|
@apply max-h-full! !w-full object-cover !left-0 !right-0 mx-auto;
|
|
}
|
|
}
|
|
|
|
// 3. Keep the label centered behind/below
|
|
.filepond--drop-label {
|
|
@apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;
|
|
|
|
label {
|
|
@apply p-[2em] text-xs text-primary font-semibold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dashed border panel
|
|
.filepond--panel-root {
|
|
@apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
|
|
}
|
|
|
|
.filepond--list-scroller[data-state="overflow"] {
|
|
@apply overflow-y-hidden!;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Start:: Create NFT Item Styles */
|
|
// .create-nft-item {
|
|
// .filepond--root {
|
|
// @apply w-full h-[15.08rem] mx-auto text-center rounded-sm;
|
|
|
|
// @media screen and (min-width: 1660px) {
|
|
// @apply h-[14.75rem] w-[20.25rem] m-0;
|
|
// }
|
|
|
|
// // This ensures the actual input is always clickable
|
|
// .filepond--browser {
|
|
// @apply z-[10]! cursor-pointer! ;
|
|
// }
|
|
|
|
// .filepond--list-scroller {
|
|
// @apply flex items-center justify-center h-full;
|
|
// /* Disable pointer events on the preview so clicks "pass through" to the input */
|
|
// pointer-events: none;
|
|
|
|
// &[data-state="overflow"] {
|
|
// @apply overflow-y-hidden!;
|
|
// }
|
|
// }
|
|
|
|
// // Re-enable pointer events for the "Remove" button specifically
|
|
// .filepond--item {
|
|
// @apply me-[0.8rem]! h-full! ;
|
|
// pointer-events: all;
|
|
// }
|
|
|
|
// .filepond--list {
|
|
// @apply w-full! h-full! ;
|
|
// }
|
|
|
|
// .filepond--file {
|
|
// @apply m-0! h-full! ;
|
|
// }
|
|
|
|
// .filepond--image-preview-wrapper {
|
|
// @apply h-full! w-full! rounded-[0.3rem]! m-0! ;
|
|
// }
|
|
|
|
// .filepond--image-preview {
|
|
// @apply h-full! bg-transparent! ;
|
|
|
|
// canvas {
|
|
// @apply h-full! w-full! object-cover! left-0! right-0! mx-auto! ;
|
|
// }
|
|
// }
|
|
|
|
// .filepond--drop-label {
|
|
// @apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;
|
|
// /* Ensure label is clickable */
|
|
// z-index: 1;
|
|
|
|
// label {
|
|
// @apply p-[2em] text-xs text-primary font-semibold;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .filepond--panel-root {
|
|
// @apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
|
|
// /* Ensure the panel doesn't block clicks */
|
|
// pointer-events: none;
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* End:: Create NFT Item Styles */
|
|
.filepond--root .filepond--drop-label {
|
|
min-height: 4.75em;
|
|
}
|
|
|
|
|
|
[data-nav-layout=vertical][data-vertical-style="doublemenu"] .main-menu .slide.has-sub .slide-menu.child1 .slide.side-menu__label1 {
|
|
@apply my-0!;
|
|
}
|
|
|
|
|
|
#stars-hover{
|
|
.br.br-default{
|
|
@apply flex items-center;
|
|
}
|
|
.br-text {
|
|
@apply bg-[#26bf941a] text-[#26bf94] align-middle text-[0.75em] font-semibold rounded px-[0.45rem] py-[0.25rem] ms-4;
|
|
}
|
|
|
|
}
|
|
|
|
[dir="rtl"] .br.br-default .br-units .br-unit .br-unit-inner.br-fraction::after {
|
|
--tw-content: "\2605"; /* star symbol */
|
|
@apply left-[11px]; /* Tailwind utility for positioning */
|
|
content: var(--tw-content); /* raw CSS for content */
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
[data-toggled="open"] #responsive-overlay {
|
|
@apply visible;
|
|
}
|
|
}
|
|
|
|
#slider-toggle{
|
|
.ngx-slider.vertical .ngx-slider-pointer {
|
|
@apply rtl:!left-[-3px];
|
|
}
|
|
}
|
|
|
|
[dir="rtl"]{
|
|
.ql-editor li > .ql-ui:before{
|
|
@apply mr-[-0.7em]!;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#blog-category-select{
|
|
.ng-placeholder{
|
|
@apply text-[0.775rem]!;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.ngx-colors-overlay{
|
|
ngx-colors-panel{
|
|
.opened {
|
|
@apply bg-bodybg rtl:left-[10px];
|
|
.g-input{
|
|
@apply border-defaultborder dark:!border-defaultborder/10;
|
|
|
|
}
|
|
|
|
.manual-input-wrapper{
|
|
.g-input {
|
|
input{
|
|
@apply dark:text-white!;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
[data-nav-layout="horizontal"] .app-sidebar .side-menu__item{
|
|
@apply my-0;
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
[data-nav-style="icon-click"] .iconclick .side-menu__item {
|
|
@apply z-[1];
|
|
}
|
|
[data-vertical-style="doublemenu"] {
|
|
.iconclick {
|
|
@apply mx-auto! inline-block! relative!;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: 992px) {
|
|
[data-menu-position="scrollable"][data-nav-layout="horizontal"] .app-sidebar {
|
|
@apply relative! !z-[49];
|
|
}
|
|
}
|
|
|
|
.fslightbox-source{
|
|
@apply rounded-md;
|
|
}
|
|
|
|
.highlight.clip-widget {
|
|
markdown {
|
|
pre {
|
|
@apply bg-transparent m-[1rem]! rounded-[10px]! max-h-[400px]! p-0
|
|
border-defaultborder dark:!border-defaultborder/10;
|
|
}
|
|
|
|
pre>code {
|
|
@apply bg-[var(--color-light)] rounded-[10px]! border-defaultborder dark:!border-defaultborder/10;
|
|
}
|
|
|
|
}
|
|
}
|