/*
照片界面的样式
Status: OK
 */
/*照片列*/
#pictures {
    display: none;
}

/*图片项*/
.picture-item {
    /*卡片的阴影*/
    box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
}

/*图片*/
.picture {
    width: 100%;
    height: auto;
    transition: transform 1.2s;
}

/*图片详情，包含图片和图片描述*/
.picture-details {
    overflow: hidden;
    position: relative;
}

/*图片描述*/
.picture-description {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    color: #ffffff;
    font-weight: lighter;
    padding: .5rem .5rem .5rem .5rem;
    background: rgba(0, 0, 0, .5);
    transition: opacity .8s;
}

/*图片详情盒子划过的时候，图片描述的变化*/
.picture-details:hover .picture-description {
    opacity: 1;
}

/*图片详情盒子划过的时候，图片的变化*/
.picture-details:hover .picture {
    transform: scale(1.1);
}

/*小屏幕下使用*/
@media (max-width: 576px) {
    .picture-bottom {
        font-size: 75%;
    }

    .picture-description {
        font-size: 75%;
    }
}

/*导航栏固定*/
#navBar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
}

/*禁用用户选择*/
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}