fashion-ssr-vue3/assets/style/common.less

@font-face {
    font-family: 'CustomTitleFont';
    src: url("~/assets/fonts/BodoniModa.ttf")format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CommonFont';
    src: url("~/assets/fonts/Roboto-Regular.ttf")format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CommonBoldFont';
    src: url("~/assets/fonts/Roboto-Medium.ttf")format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PageFooterFont';
    src: url("~/assets/fonts/Georgia Bold.ttf")format('truetype');
    font-weight: normal;
    font-style: normal;
}

.custom-title-font {
    font-family: 'CustomTitleFont';
}

.common-font {
    font-family: 'CommonFont';
}

.common-bold-font {
    font-family: 'CommonBoldFont';
}

.footer-font {
    font-family: 'PageFooterFont';
}

.nuxt-icon {
    margin-bottom: unset !important;
}

.nuxt-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.el-dropdown-menu {
    .el-dropdown-menu__item:hover {
        color: var(--primary-hover-color) !important;
        background-color: unset !important;
    }
}

.el-dropdown {
    color: var(--default-text-color) !important;
}

.el-button {
    background-color: #FAF5F1 !important;
    border-color: #9B6CFF !important;
    color: #9B6CFF !important;

    &:hover {
        background-color: #9B6CFF !important;
        border-color: #9B6CFF !important;
        color: #fff !important;
    }
}

.hover-effect {
    transition: transform 0.3s ease;
    cursor: pointer;

    &:hover {
        transform: scale(1.05);
    }
}

.el-input {
    --el-input-focus-border: var(--primary-hover-color) !important;
    --el-input-focus-border-color: var(--primary-hover-color) !important;
}

.el-input__wrapper:hover {
    box-shadow: 0 0 0 1px var(--primary-hover-color) inset !important;
}

.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--primary-hover-color) inset !important;
}

.el-breadcrumb {
    font-size: 16px !important;

    .el-breadcrumb__item {
        .el-breadcrumb__inner {
            color: #999 !important;
            font-weight: 400 !important;

            &.is-link:hover {
                color: var(--primary-hover-color) !important;
            }
        }

        &:last-child {
            .el-breadcrumb__inner {
                color: #333 !important;
                font-weight: 500 !important;
            }
        }
    }
}

.el-pagination {
    .el-pager li.is-active {
        color: #fff !important;
        background-color: #DB977B;
        border-radius: 8px;
    }

    &.custom-pagination {
        .el-pager li.is-active {
            color: #fff !important;
            background-color: #DB977B;
            border-radius: 50%;
        }

        button {
            background-color: transparent !important;
        }
    }

    .el-pager li {
        &:hover {
            color: var(--primary-hover-color) !important;
        }
    }

    .btn-prev,
    .btn-next {
        &:hover {
            color: var(--primary-hover-color) !important;
        }
    }
}

.el-menu {
    border-right: unset !important;

    .el-sub-menu {
        .el-sub-menu__title {
            height: 44px ! important;
            line-height: 44px ! important;

            &:hover {
                background-color: unset !important;
            }
        }

        &.is-opened {
            .el-sub-menu__title {
                color: var(--primary-hover-color) !important;
            }
        }
    }

    .el-menu-item:hover {
        color: var(--primary-hover-color) !important;
        background-color: unset !important;
    }
}

.custom-navigate-dropdown {
    border-radius: 6px !important;

    .el-scrollbar {
        padding: 10px;

        .el-dropdown-menu {
            padding: 0 !important;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .el-dropdown-menu__item {
                width: 90px !important;

                &:hover {
                    border-radius: 6px !important;
                    background: #F3F4FB !important;
                    color: #9B6CFF !important;
                }
            }
        }
    }

    &.no-dropdown {
        display: none;
    }

    .el-popper__arrow {
        display: none;
    }
}

// .el-checkbox {
//     .el-checkbox__input {
//         &.is-checked {
//             .el-checkbox__inner {
//                 color: #CC9879 !important;
//                 background-color: #CC9879 !important;
//                 border: 1px solid #CC9879 !important;
//             }
//         }

//         .el-checkbox__inner {
//             &:hover {
//                 border-color: #CC9879 !important;
//             }
//         }
//     }


//     &.is-checked {
//         .el-checkbox__label {
//             color: #CC9879 !important;
//         }
//     }
// }