my_tests/assets/css/components/_member.scss

$main-font-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif;

.member {
    margin-top: 8rem;
    // content-左側個人資料
    .member-info-wrapper {
        background-color: #ffe7d6;
        border-radius: 0.25rem;
    }
    .member-info-circle {
        transform: translateY(-50%);
        width:72px;
        height:72px;
        border-radius: 50%;
        .member-info-circle-img{
            border-radius:50%;
        }
    }
    .member-info-data {
        margin-top: -.5rem;
    }
    .member-table {
        width: 100%;
    
        .member-table-lf {
            font-size: 1rem;
            flex-basis: 25%;
            flex-grow: 0;
            max-width: 25%;
            display: flex;
            justify-content: center;
            align-items: start;
        }
        .member-table-rt {
            flex-basis: 75%;
            flex-grow: 0;
            max-width: 75%;
            word-break: break-all;
        }
    }
    .member-info-btn-wrapper {
        .member-info-btn {
            width: 47%;
            border-radius: 0;
            padding: .8rem .5rem;
            &:hover, &:active{
                color: #AAAAAA;
                background-color: #f4f4f4;
            }
        }
    }
    
    .member-info-btn-store {
        font-family:$main-font-family;
        &:hover {
            cursor: pointer;
            background-color: #f4f4f4;
        }
    }
    // content-右側收藏結果

    //桌機版選單
    .member-nav {
        &.nav-tabs {
            border-bottom: 1px solid #AAAAAA;
        }
        .nav-link {
            font-family:$main-font-family;
            color: #AAAAAA;
            border: 1px solid #AAAAAA;
            &.active {
                color: #FFF;
                background-color: #EE7800;
                &:hover {
                    color: #FFF;
                    border-color: transparent;
                    background-color: #EE7800;
        
                }
            }
            &:hover {
                cursor: pointer;
                color: #AAAAAA;
                border-color: #AAAAAA;
                background-color: #f4f4f4;
            }

        }
    }

    //手機版選單

    .member-nav-mobile::-webkit-scrollbar{
        display: none; /*Chrome Safari*/
        -ms-overflow-style: none;
    }
    
    .member-nav-mobile {
        display: block;
        scrollbar-width:none; /*Firefox*/

        .member-nav-itemlist{
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width:none; /*Firefox*/
        }

        .member-nav-itemlist::-webkit-scrollbar {
            display: none; /*Chrome Safari*/
            -ms-overflow-style: none;
        }

        .member-nav-itemlist-wrapper {
            width: 100%;
            display: -webkit-inline-box;
            justify-content: space-between;
        }

        ul {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
        }
        a {
            font-size: 14px;
            color: #AAAAAA;
            display: block;
            padding: 1rem 2rem;
            text-decoration: none;
            border: 1px solid #AAAAAA;
            border-top-left-radius:0.25rem ;
            border-top-right-radius:0.25rem ;
            &:hover {
                text-decoration: none;
            }
            &:active {
                text-decoration: none;
                background-color: #f4f4f4;
                }
            &.active {
                color: #FFF; 
                text-decoration: none;
                background-color: #EE7800;
            }
        }
    }

    .item-card-member {
        .item-card-img-member {
            position: relative;
            width: 100%;
            height: 280px;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .item-card-text {
            font-weight: bold;
            font-family:$main-font-family;
            p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -moz-box-orient:vertical;
                box-orient:vertical;
                height: calc(16px * 3 *1.4);
    
            }
        }
        .item-card-media-member{
            left: 32%;
        }
    }
    .item-card-member-none {
        font-family:$main-font-family;
    }
    .item-card-member-footer {
        font-family:$main-font-family;
    }
}


// Modal--編輯

.form-group{
    margin-bottom: 0;
}

.member-modal-button-wrapper{
    .member-modal-button{
        width: 45%;
        color: #FFF;
        background-color: #D1D2D3;
        border-radius: 0;
        padding: .8rem .5rem;
        &:hover, &.active{
            color: #FFF;
            background-color: #EE7800;
        }
    }
}

//sweetalert 視窗

.swal2-title{
    color: #EE7800 !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
}
.swal2-styled.swal2-confirm{
    background-color: #EE7800 !important;
}