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;
}

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

.drag-handle {
    cursor: grab;
}

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

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

/** Custom class **/
:root {
    --default-icon-color: #000;
    --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));
}

.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-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);
}

.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;
}

/** Common class for replacing the default style of vuetify **/
.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;
        }
    }
}

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

.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;
}

/** 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));
        }
    }
}

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

.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;
}

/** 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__preset_range {
    white-space: inherit;
}

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

.dp__main .dp__menu_inner .dp__month_year_row > button {
    width: inherit;
}

.dp__main .dp__menu_inner .dp__month_year_row > button.dp__button {
    width: 100%;
}

.dp__main .dp__menu_inner .dp__month_year_row .dp__month_year_wrap > button {
    line-height: inherit;
}

.dp__main .dp__calendar .dp__calendar_item {
    display: flex;
    justify-content: center;
    flex: 1;
}

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