/**
 *  Web唐明明
 *  匆匆数载恍如梦，岁月迢迢华发增。
 *  碌碌无为枉半生，一朝惊醒万事空。
 */
page{
    background: #0e0c1a;
}

.videoSwiper{
    width: 100%;
    height: 80%;
    background: #eee;
}

.videos-content{
    margin-top: 0;
    position: relative;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    transition: margin-top .5s;
}

.videos-content.marginTop{
    margin-top: calc(134px + env(safe-area-inset-top));
}

/* 直播信息 */
.live-rooms{
    position: absolute;
    top: 0;
    padding-top: calc(60px + env(safe-area-inset-top));
    white-space: nowrap;
}

.live-rooms-cover{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    vertical-align: top;
}

.live-rooms-nav{
    position: relative;
    display: inline-block;
    width: 52px;
    height: 52px;
    margin: 0 15rpx;
}

.live-rooms-nav:first-child{
    margin-left: 30rpx;
}

.live-rooms-nav:last-child{
    margin-right: 30rpx;
}

.live-rooms-nav::before,
.live-rooms-nav::after{
    position: absolute;
    content: "";
}

.live-rooms-nav::before{
    width: 52px;
    height: 52px;
    border:solid 4rpx #FF8C37;
    border-radius: 50%;
    box-sizing: border-box;
}

.live-rooms-nav::after{
    content: "直播中";
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 42px;
    background: #FF8C37;
    color: white;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 20rpx;
    text-align: center;
    border-radius: 16rpx;
}

/* 直播数量 */
.videoLayer-live{
    position: absolute;
    top: calc(60px + env(safe-area-inset-top));
    left: 30rpx;
    right: 30rpx;
    color: white;
    text-align: center;
}

.videoLayer-live text{
    background: rgba(0, 0, 0, .5);
    padding: 0 20rpx;
    line-height: 50rpx;
    font-size: 26rpx;
    border-radius: 25rpx;
    display: inline-block;
}

/* 视频信息 */
.video-info{
    position: absolute;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: 30rpx;
    width: calc(100% - 218rpx);
}

.video-user,
.video-title{
    color: white;
    text-shadow: 0 3rpx 3rpx rgba(0, 0, 0, .3);
}

.video-user{
    font-weight: bold;
    padding-bottom: 10rpx;
    font-size: 38rpx;
}

.video-title{
    font-size: 28rpx;
    line-height: 40rpx;
}

/* 视频工具栏 */
.video-tool{
    position: absolute;
    right: 30rpx;
    bottom: calc(88px + env(safe-area-inset-bottom));
}

.video-tool-item{
    margin-top: 40rpx;
    text-align: center;
}

.video-tool-item:first-child{
    margin-top: 0;
}

.video-tool-cover{
    width: 98rpx;
    height: 98rpx;
    border-radius: 50%;
    vertical-align: top;
    border:solid 4rpx rgba(255, 255, 255, .2);
    box-sizing: border-box;
}

.video-tool-icon{
    width: 48rpx;
    vertical-align: top;
}

.video-tool-number{
    font-size: 26rpx;
    line-height: 50rpx;
    color: white;
}

/* 黑胶唱片 */
.video-tool-vinyl{
    width: 98rpx;
    height: 98rpx;
    position: relative;
}

.video-tool-vinyl.rotate{
    animation: rotate 10s linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.video-tool-vinyl-cover,
.video-tool-vinyl-back{
    position: absolute;
}

.video-tool-vinyl-back{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-tool-vinyl-cover{
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
    border-radius: 50%;
}