my_tests/assets/css/main.scss

$main-color: #EE7800;

// @media screen and (min-width: 992px) and (max-width: 1260px){
//     .navbar{
//         .navbar-nav{
//             .nav-link{
//                 padding-left: 10px; //避免縮小螢幕主選單有折行問題
//                 padding-right: 10px; //避免縮小螢幕主選單有折行問題
//             }
//         }
//     }
// }

@media screen and (min-width: 1200px){
    .navbar-brand-block{
        display: inline-block;
        position: absolute;
        left: 8px;
        @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
            position: relative;
        }
    }
    
    .navbar-collapse-block{
        margin-left: auto;
        margin-right: auto;
    }
    
    .nav-user-block{
        display: flex;
        justify-content: flex-end;
        position: absolute;
        right: 8px;
        @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
            position: relative;
        }
    }

    // 小裝置保持logo置中
    .navbar-brand-block-sm{
        display: none;
    }

    .nb-mobile, .nb-mobile-icon{
        display: none;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px){
    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
        
    }
}


@media screen and (min-width: 992px){

    // .navbar-brand-block{
    //     display: inline-block;
    //     position: absolute;
    //     left: 8px;
    //     @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    //         position: relative;
    //     }
    // }
    
    // .navbar-collapse-block{
    //     margin-left: auto;
    //     margin-right: auto;
    // }
    
    // .nav-user-block{
    //     display: flex;
    //     justify-content: flex-end;
    //     position: absolute;
    //     right: 8px;
    //     @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    //         position: relative;
    //     }
    // }

    //小裝置保持logo置中
    // .navbar-brand-block-sm{
    //     display: none;
    // }

    body{
        overflow: auto;
    }

    // .nb-mobile, .nb-mobile-icon{
    //     display: none;
    // }
    .dropdown-wrapper{
        display: flex !important;
    }
    .st-mobile, .footer-fix, .searchall{
        display: none;
    }

    .top-designer, .search-bar, .search-tab{
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px){

    //列表 gotop btn
    .gotop-btn-wrapper{
        right: 2%;
        bottom: 10%;
        z-index: 999;
    }
    
    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
        
    }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }

    .item-card{
        .item-card-body{

            .item-card-media{
                left: 22%;
            }
        }
    }

    .footer .footer-media{
        color: #3b5998;
    }

    //關鍵字 Auto Complete

    .ui-autocomplete {
        width: 100%;
        max-height: 49vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        top: 55px !important;
        left: 0!important;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    } 

    .keywords-autocomplete{
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform: translateY(-25%);
                transform: translateY(-25%);
        
        .list-group-item{
            -webkit-box-shadow: 1px 1px 1px #ccc;
            box-shadow: 1px 1px 1px #ccc ;
            background: rgba(255,255,255,0.98);
            border: none;
        }

        .list-group-item-action{
            &:hover{
                z-index: 0;
                cursor: pointer;
            }
        }
    }

}

@media screen and (min-width: 576px) and (max-width: 768px){

    .member{

        .item-card-member{
            .item-card-img-member{
                width: 100%;
                height: 360px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }


    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
    }

    .nb-mobile{
        &.active{
            position: fixed;
            bottom: 0;
        }
    }

    #navbarSupportedContent{
        display: none;
    }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }

    .item-card {
        .item-card-body {
            // display: none; //photos使用

            .item-card-media {
                left: 40%;
            }
        }
        .item-card-img {
            height: 210px;
            .play {
                top: 39%;
                left: 39%;
                width: 40px;
                height: 40px;
            }
        }
        .item-card-product {
            background-repeat: no-repeat;
            background-position: center center;
        }
    }

    // 關鍵字 Auto Complete

    .ui-autocomplete {
        width: 100%;
        max-height: 49vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        top: 55px !important;
        left: 0!important;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    } 

    .keywords-autocomplete{
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform: translateY(-25%);
                transform: translateY(-25%);
        
        .list-group-item{
            -webkit-box-shadow: 1px 1px 1px #ccc;
            box-shadow: 1px 1px 1px #ccc ;
            background: rgba(255,255,255,0.98);
            border: none;
        }

        .list-group-item-action{
            &:hover{
                z-index: 0;
                cursor: pointer;
            }
        }
    }
}

@media screen and (max-width: 576px){

    //列表 gotop btn
    .gotop-btn-wrapper{
        right: 3%;
        bottom: 10%;
        z-index: 999;
    }

    .member{

        .item-card-member{
            .item-card-img-member{
                width: 100%;
                height: 360px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }

    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
    }

    // .nb-mobile{
    //     &.active{
    //         position: fixed;
    //         bottom: 0;
    //     }
    // }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }


    .item-card {
        .item-card-body {
            // display: none; //photos使用

            .item-card-media {
                left: 37%;
            }
        }
        .item-card-img {
            height: 210px;
            .play {
                top: 45%;
                left: 45%;
                width: 40px;
                height: 40px;
            }
        }
        .item-card-product {
            background-repeat: no-repeat;
            background-position: center center;
        }
    }

    // 關鍵字 Auto Complete

    .ui-autocomplete {
        width: 100%;
        max-height: 49vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        top: 55px !important;
        left: 0!important;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    } 

    .keywords-autocomplete{
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform: translateY(-25%);
                transform: translateY(-25%);
        
        .list-group-item{
            -webkit-box-shadow: 1px 1px 1px #ccc;
            box-shadow: 1px 1px 1px #ccc ;
            background: rgba(255,255,255,0.98);
            border: none;
        }

        .list-group-item-action{
            &:hover{
                z-index: 0;
                cursor: pointer;
            }
        }
    }

}