ezbookkeeping/src/styles/desktop/global.scss

/** Global style **/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/** Common class **/
.disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.readonly {
    pointer-events: none !important;
}

.smaller {
    font-size: 0.75rem;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.drag-handle {
    cursor: grab;
}

.dragging-item {
    opacity: 0.5;
    background: #faf8f4;
}

@media (min-width: 600px) {
    .text-end-sm {
        text-align: end !important;
    }
}

/** Custom class **/
:root {
    --default-icon-color: #000;
    --ebk-primary-color: 198, 126, 72;
    --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
    --v-card-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}

:root .v-theme--dark {
    --default-icon-color: #fff;
    --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
    --v-card-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}

.v-theme--dark .nav-link {
    --v-hover-opacity: 0.1;
}

.pin-codes-input {
    --ebk-pin-code-input-height: 56px;
    --ebk-pin-code-input-gap: 12px;
    --ebk-pin-code-transition-duration: 0ms;
}

@media (min-width: 1280px) {
    .pin-codes-input {
        --ebk-pin-code-input-gap: 20px;
    }
}

.pin-code-input input {
    font-size: 1.25rem;
}

.expand-panel-title-with-bg {
    background-color: var(--v-expand-panel-title-bg);
}

.card-title-with-bg > .v-card-title,
.card-title-with-bg > .v-card-item {
    background-color: var(--v-card-title-bg);
}

.auth-logo {
    position: absolute;
    z-index: 1;
    inset-block-start: 2rem;
    inset-inline-start: 2.3rem;
}

.auth-logo img {
    width: 2em;
    height: 2em;
}

.auth-wrapper {
    min-block-size: calc(var(--vh, 1vh) * 100);
}

.v-theme--dark {
    .auth-image-background {
        background-color: #202122;
    }
}

.auth-card {
    background-color: rgb(var(--v-theme-surface));
}

@media (max-width: 959px) and (max-height: 669px) {
    .auth-card {
        padding-top: 64px !important;
    }
}

.auth-img-footer {
    position: absolute;
    inset-block-end: 0;
    min-inline-size: 100%;
}

.title-and-toolbar {
    min-height: 38px;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.text-field-append-text {
    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.text-field-truncate.v-text-field {
    .v-input__control {
        .v-field__field {
            > input.v-field__input {
                text-overflow: ellipsis !important;
            }
        }
    }
}

.chart-pointer {
    display: inline-block;
    margin-inline-end: 5px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
}

.bidirectional-switch {
    cursor: pointer;
}

.bidirectional-switch.v-input--horizontal .v-input__prepend {
    margin-inline-end: 10px; /* same as the padding-left of `.v-switch .v-label` */
}

html[dir="rtl"] .bidirectional-switch {
    transform: scaleX(-1);
}

.code-container {
    background-color: #efefef;
}

.v-theme--dark .code-container {
    background-color: #2f2f2f;
}

.chart-tooltip-table {
    border-collapse: collapse;
    border-spacing: 0;
}

/** Common class for replacing the default style of vuetify **/
.v-input.v-input--readonly input,
.v-input.v-input--readonly textarea,
.v-input.v-input--readonly .v-field .v-text-field__prefix,
.v-input.v-input--readonly .v-field .v-text-field__suffix,
.v-input.v-input--readonly .v-field .v-field__input,
.v-input.v-input--readonly .v-field.v-field,
.v-input.v-input--readonly .cursor-pointer {
    cursor: default !important;
}

.always-cursor-pointer,
.always-cursor-pointer.v-input.v-input--readonly input,
.always-cursor-pointer.v-input.v-input--readonly textarea,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-text-field__prefix,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-text-field__suffix,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-field__input,
.always-cursor-pointer.v-input.v-input--readonly .v-field.v-field,
.always-cursor-pointer.v-input.v-input--readonly .cursor-pointer {
    cursor: pointer !important;
}

.always-cursor-text,
.always-cursor-text.v-input.v-input--readonly input,
.always-cursor-text.v-input.v-input--readonly textarea,
.always-cursor-text.v-input.v-input--readonly .v-field .v-text-field__prefix,
.always-cursor-text.v-input.v-input--readonly .v-field .v-text-field__suffix,
.always-cursor-text.v-input.v-input--readonly .v-field .v-field__input,
.always-cursor-text.v-input.v-input--readonly .v-field.v-field,
.always-cursor-text.v-input.v-input--readonly .cursor-pointer {
    cursor: text !important;
}

.v-table {
    th {
        background: rgb(var(--v-table-header-background)) !important;
    }

    tr.even-row {
        background: #fcfcfc;
    }

    tbody.has-bottom-border > tr:last-child > td {
        border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
    }
}

.v-table.v-table--hover {
    tbody > tr.no-hover:hover td {
        background: inherit !important;
    }
}

.v-table.table-striped {
    tr:nth-child(even) {
        background: #fcfcfc;
    }
}

.v-theme--dark {
    .v-table {
        tr.even-row {
            background: #161616;
        }
    }
}

.v-theme--dark {
    .v-table.table-striped {
        tr:nth-child(even) {
            background: #161616;
        }
    }
}

.v-chip.v-chip--size-x-small {
    font-size: 0.75rem;
}

.right-bottom-icon .v-badge__badge {
    padding: 0;
    min-width: 16px;
    height: 1rem;
}

.v-btn-toggle {
    .v-btn {
        .right-bottom-icon {
            .v-icon {
                color: inherit;
                font-size: 0.8125rem;
            }
        }
    }
}

.toggle-buttons {
    &.v-btn-toggle {
        height: auto !important;
        padding: 0 !important;
        border: none !important;
    }

    &.v-btn-toggle > .v-btn:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }

    &.v-btn-toggle > .v-btn:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &.v-btn-toggle > .v-btn {
        border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
    }

    &.v-btn-toggle button.v-btn {
        width: auto !important;
    }
}

.v-theme--dark {
    .v-btn--variant-elevated,
    .v-btn--variant-flat {
        &.v-btn--disabled .v-btn__overlay {
            opacity: 0.35;
        }
    }
}

.v-btn {
    .v-btn__prepend,
    .v-btn__append {
        .v-icon {
            .v-icon__svg {
                width: 1em;
            }
        }
    }
}

.v-btn__overlay {
    transition: none;
}

.w-100-window-container.v-window > .v-window__container {
    width: 100%;
}

.tab-text-truncate.v-tab > .v-btn__content {
    overflow-x: hidden;
}

.skeleton-no-margin .v-skeleton-loader__text {
    margin: 0;
}

html[dir="rtl"] .v-btn.button-icon-with-direction > .v-btn__content > .v-icon > .v-icon__svg,
html[dir="rtl"] .v-btn.button-icon-with-direction > .v-btn__prepend > .v-icon > .v-icon__svg,
html[dir="rtl"] .v-btn.button-icon-with-direction > .v-btn__append > .v-icon > .v-icon__svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .v-icon.icon-with-direction > .v-icon__svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .v-img.img-with-direction > img {
    transform: scaleX(-1);
}

/** Common class for replacing the default style of Materio **/
.v-application,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.text-caption {
    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.v-label {
    &:not(.v-field-label--floating) {
        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
    }
}

.v-card-subtitle,
.v-list-item-subtitle {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.v-table {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.v-text-field {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));

    .v-label {
        color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
    }

    .v-select__selection {
        .v-label {
            color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
        }
    }
}

.text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label {
    color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
}

.text-field-with-colored-label.v-text-field.text-expense .v-field-label.v-label {
    color: rgba(var(--v-theme-expense), var(--v-medium-emphasis-opacity)) !important;
}

.text-field-with-colored-label.v-text-field.text-income .v-field-label.v-label {
    color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
}

.v-tooltip {
    .v-overlay__content {
        color: rgb(var(--v-tooltip-color));
    }
}

.table-tooltip {
    &.v-tooltip > .v-overlay__content {
        background-color: initial;

        .v-table {
            box-shadow: 0 6px 16px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity)), 0 0 transparent, 0 0 transparent;
        }
    }
}

.v-snackbar {
    .v-snackbar__content {
        color: rgb(var(--v-tooltip-color));
    }

    .bg-notification-background .v-snackbar__content {
        color: rgb(var(--v-theme-on-notification-background)) !important;
    }
}

.v-switch.v-switch--inset {
    .v-switch__track {
        min-width: 1.875rem !important;
    }
}

.scrollable-vertical-tabs.v-tabs {
    .v-slide-group__prev,
    .v-slide-group__next {
        max-height: 16px;
    }

    &:not(:has(.v-slide-group__prev)) {
        margin-top: 16px;
    }
}

body .v-tabs:not(.v-tabs-pill) {
    &.v-tabs--vertical {
        border-right: inherit;

        .v-tab__slider {
            inset-inline-end: unset;
            inset-inline-start: 0;
        }
    }

    .v-tab {
        &.v-tab--selected {
            &.v-btn.v-btn--variant-text {
                &:hover, &:active, &:focus {
                    .v-btn__overlay {
                        --v-hover-opacity: 0.04;
                    }
                }
            }
        }

        &:not(.v-tab--selected) {
            &.v-btn.v-btn--variant-text {
                &:hover, &:active, &:focus {
                    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));

                    .v-btn__overlay {
                        --v-hover-opacity: 0.04;
                    }
                }
            }
        }
    }
}

body .v-btn-group {
    &.v-btn-group--density-comfortable {
        height: 38px;
    }

    &.v-btn-group--divided .v-btn:not(:last-child) {
        border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }
}

.v-btn {
    text-transform: none;
}

/** Replacing the default style of @vuepic/vue-datepicker **/
.dp__theme_light {
    --dp-primary-color: #c67e48;
}

.dp__theme_dark {
    --dp-primary-color: #c67e48;
}

/** Fix @vuepic/vue-datepicker style issue **/
.dp__main.dp__flex_display {
    flex-direction: column;
}

.dp__main .dp--tp-wrap {
    max-width: 100%;
}

.dp__main .dp__menu_inner {
    padding-top: 0;
    padding-bottom: 0;
}

.dp__main .dp__calendar .dp__calendar_item {
    flex: 1;
}

.dp__main .dp__calendar .dp__calendar_item > .dp__cell_inner {
    width: 100%;
}

html[dir="rtl"] .dp__main .dp__btn.dp--arrow-btn-nav {
    transform: scaleX(-1);
}