my_tests/assets/css/components/_utilities.scss

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

//通用類別
body{
    -webkit-text-size-adjust: 100%;
}

.bg-cover{
    background-size: cover;
    background-position: center center;
}

.bg-main{
    background-color: #FAFAFA;
}

.bg-white{
    background-color: #fff;
}

.bg-shadow{
    box-shadow: 0px 0px 5px #D1D2D3;
}

.no-padding{
    padding:0;
}

.no-border{
    border: none;
}

.circle-img{
    width:30px;
    height:30px;
    border-radius: 50%;
    border:1px solid white;
}

.accent-text{
    caret-color: #000;
}

.focus-status{
    &:focus{
        border-color: transparent;
        box-shadow: none;
    }
}

//login頁面使用
.focus-status-error{
    border-color: #FF5252;
    &::-webkit-input-placeholder{
        color: #FF5252;
    }
    &::-moz-placeholder{
        color: #FF5252;
    }
    &::-ms-placeholder{
        color: #FF5252;
    }
}

//會員專區 scroll-top btn
.top-btn {
    z-index: 9;
    text-align: center;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 70px;
    border-radius: 100px;
    line-height: 3;
    background-color: #EE7800;
    cursor: pointer;
    display: none;
}

//列表 gotop btn
.gotop-btn-wrapper{
    display: block;
    position: fixed;
    right: 1%;
    bottom: 8%;
    cursor: pointer;

    .gotop-btn{
        width: 50px;
        height: 50px;
        box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
        opacity: 1;
        &:hover, &:focus, &:active{
            box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
    }
}

//內容列表頁標題
.list-head{
    font-weight: bold;
    font-size: 1.5rem;
    font-family: $main-font-family;
}

//關鍵字 Auto Complete

.ui-autocomplete {
    max-height: 350px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    padding-inline-start: 0;
} 

.keywords-autocomplete{
    z-index: 50;
    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);
    }

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

//找靈感廣宣需求
.text-promote-color{
    color: #EE7800 !important;

    &:active, &.active{
        background-color: transparent !important;
        border-bottom: 4px solid #EE7800 !important;
        @media screen and (max-width: 576px) {
            background-color: unset !important;
            border-bottom: 0 solid transparent !important;
        }
    }

    &:hover{
        color: #EE7800 !important;
        background-color: transparent !important;
        @media screen and (max-width: 576px) {
            background-color: #F4F4F4 !important;
        }
    }

}

.text-promote-mb-color{
    color: #EE7800 !important;
}

//另加
[v-cloak] {
    display: none;
}