给博客添加个充电按钮（仿B站）
今天我准备吧B站的充电按钮移植到本博客，开始～
上代码：
HTML
<html>
<head>
<link href="./space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css">
</head>
<body>
<div id="app" class="owner">
<div class="s-space">
<div>
<div id="page-index" class="wrapper clearfix">
<div class="col-2">
<div class="section elec" style="">
<div class="elec-action">
<div class="elec-trigger"><span class="elec-trigger-icon icon"></span>为TA充电</div>
<div class="elec-map">
<div class="elec-status">共
<span class="elec-count">0</span>人
</div>
<div class="elec-status-bg"></div>
<div class="elec-status-bg-grey"></div>
</div>
<div id="elec-hover-bg-preloader"></div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
<!---->
</div>
</body>
</html>
CSS(两个)
.live {
display: block;
width: 220px;
}
.live:hover .live-on-hover {
opacity: 1;
}
.live-col {
display: -ms-flexbox;
display: flex;
width: 100%;
}
.live-col .live-text {
font-size: 14px;
margin-left: 20px;
}
.live-col .live-text-view {
margin-top: 12px;
}
.live-on {
position: relative;
width: 220px;
height: 138px;
}
.live-on-img {
width: 100%;
height: 100%;
border-radius: 4px;
display: block;
}
.live-on-flag {
transition: opacity .2s ease;
position: absolute;
top: 6px;
right: 6px;
width: 64px;
height: 20px;
line-height: 20px;
background-color: #f69;
border-radius: 2px;
color: #fff;
font-size: 12px;
}
.live-on-flag .living-icon {
width: 10px;
height: 10px;
display: inline-block;
margin: 0 4px 0 8px;
}
.live-on-flag .living-icon-col {
width: 2px;
margin: 0 1px;
display: inline-block;
background-color: #fff;
height: 100%;
border-radius: 2px;
animation: living-icon-ani .6s linear infinite;
transform-origin: bottom;
}
.live-on-flag .living-icon-col:last-child {
animation-delay: .2s;
margin-right: 0;
}
.live-on-flag .living-icon-col:first-child {
animation-delay: -.2s;
margin-left: 0;
}
.live-on-hover {
background: rgba(0,0,0,.4);
border-radius: 4px;
transition: opacity .2s ease;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.live-on-hover-icon {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
background-position: -1096px -1094px;
width: 48px;
height: 48px;
margin: 45px auto;
}
.live-text {
color: #222;
margin-top: 6px;
}
.live-text-view {
text-indent: 21px;
}
.live-text-view,.live-text-watched_show {
color: #99a2aa;
float: left;
line-height: 14px;
margin-top: 5px;
}
.live-text-title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-text-title:hover {
color: #00a1d6;
}
@keyframes living-icon-ani {
0% {
transform: scaleY(.5);
}
50% {
transform: scaleY(1);
}
to {
transform: scaleY(.5);
}
}
@media (min-width:1420px) {
.live {
width: 280px;
}
.live-col {
width: 100%;
}
.live-on {
width: 280px;
height: 175px;
}
.live-on-hover-icon {
margin: 72px auto;
}
}
.i-pin-v {
padding-bottom: 20px;
}
.i-pin-v.empty .section-title,.i-pin-v.loading .section-title {
display: block;
}
.i-pin-v .section-title {
padding-bottom: 10px;
}
.i-pin-v .section-title[role="3"] .pin-v-icon {
background-position: -1298px -530px;
}
.i-pin-v .be-tab {
border-bottom: 1px solid #eee;
margin-bottom: 15px;
height: 25px;
}
.i-pin-v .be-tab-item {
padding-bottom: 5px;
margin-right: 30px;
font-size: 12px;
}
.i-pin-c {
box-shadow: 0 0 0 1px #e5e9ef;
border-radius: 4px;
float: left;
overflow: hidden;
position: relative;
}
.i-pin-c,.i-pin-c:hover .i-watchlater {
display: block;
}
.i-pin-c:hover .length {
display: none;
}
.i-pin-part.loading {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif) 50% no-repeat;
height: 200px;
}
.i-pin-img,.i-pin-part:hover .i-pin-info .btn-container {
display: block;
}
.i-pin-img {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);
background-size: img;
border-radius: 4px;
width: 280px;
height: 175px;
}
.i-pin-duration {
background: #111;
background: rgba(0,0,0,.5);
border-radius: 5px 0 0 0;
color: #fff;
line-height: 20px;
transition: top .2s ease;
padding: 0 6px;
position: absolute;
right: 0;
bottom: 0;
}
.i-pin-info {
position: relative;
height: 175px;
margin-left: 300px;
}
.i-pin-info .btn-container {
position: absolute;
display: none;
bottom: 0;
}
.i-pin-title {
display: block;
font-size: 14px;
line-height: 18px;
margin-bottom: 15px;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.i-pin-meta {
color: #6d757a;
margin-bottom: 10px;
}
.i-pin-meta .icon {
width: 12px;
height: 12px;
vertical-align: middle;
margin-right: 3px;
position: relative;
top: -2px;
}
.i-pin-data {
display: inline-block;
margin-right: 20px;
}
.i-pin-play-icon {
background-position: -1306px -346px;
}
.i-pin-danmu-icon {
background-position: -1306px -410px;
}
.i-pin-time-icon {
background-position: -280px -474px;
}
.i-pin-desc {
color: #99a2aa;
margin-bottom: 10px;
max-height: 40px;
}
.i-pin-desc,.i-pin-reason {
line-height: 20px;
overflow: hidden;
}
.i-pin-reason {
color: #f25d8e;
height: 20px;
margin-bottom: 14px;
max-width: 400px;
text-overflow: ellipsis;
white-space: nowrap;
}
.i-pin-reason.hidden {
visibility: hidden;
}
.i-pin-action {
display: none;
}
#i-pin.empty .i-pin-empty,#i-pin.has-content .i-pin-has-content {
display: block;
}
.i-pin-has-content.disabled .disabled-img {
display: block;
line-height: 175px;
}
.i-pin-has-content.disabled:hover .i-watchlater {
display: none;
}
.i-pin-has-content:hover .i-pin-action {
display: block;
}
.i-pin-empty {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-33.png) 250px bottom no-repeat;
}
.i-pin-empty-set {
text-align: center;
width: 215px;
height: 138px;
}
.i-pin-empty-set:hover .i-pin-empty-set-icon {
background-position: -1288px -72px;
}
.i-pin-empty-set:hover .i-mp-count {
color: #00a1d6;
}
.i-mp-empty {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-22.png) 260px bottom no-repeat;
}
#i-masterpiece {
margin-left: -9px;
}
#i-masterpiece[type=empty] .i-mp-empty,#i-masterpiece[type=multi] .i-mp-multi,#i-masterpiece[type=single] .i-mp-single {
display: block;
}
#i-masterpiece .content {
width: 900px;
}
#i-masterpiece .small-item {
width: 220px;
height: 172px;
overflow: hidden;
padding-top: 0;
}
#i-masterpiece .small-item:hover .title {
height: 38px;
}
#i-masterpiece .small-item:hover .length {
bottom: -20px;
}
#i-masterpiece .small-item:hover .reason {
bottom: 0;
}
#i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
width: 220px;
height: 138px;
}
#i-masterpiece .small-item .disabled-img {
line-height: 135px;
}
#i-masterpiece .small-item .title {
transition: height .2s ease;
height: 19px;
white-space: normal;
}
#i-masterpiece .small-item .length {
transition: bottom .2s ease;
}
#i-masterpiece .small-item .reason {
background: rgba(0,0,0,.4);
color: #fff;
transition: bottom .2s ease;
position: absolute;
left: 0;
bottom: -80px;
z-index: 2;
}
#i-masterpiece .small-item .reason-inner {
line-height: 28px;
padding: 0 10px;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#i-masterpiece .i-pin-empty-set {
float: left;
margin-left: 9px;
}
.i-mp-single {
margin-left: 9px;
}
.i-mp-multi {
width: 720px;
height: 182px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.i-mp-action {
position: absolute;
display: none;
top: 8px;
right: 18px;
z-index: 2;
}
.i-mp-action:hover .i-mp-action-icon {
border-radius: 4px 4px 0 0;
border-bottom: none;
}
.i-mp-action:hover .i-mp-action-menu {
display: block;
}
.i-mp-action-icon {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png) #fff -1110px -279px no-repeat;
border: 1px solid #99a2aa;
border-radius: 4px;
cursor: pointer;
width: 20px;
height: 20px;
margin: 0 0 0 auto;
position: relative;
}
.i-mp-action-menu {
display: none;
background: #fff;
border: 1px solid #99a2aa;
border-radius: 4px 0 4px 4px;
overflow: hidden;
margin-top: -1px;
}
.i-mp-action-item {
cursor: pointer;
line-height: 30px;
padding: 0 10px;
}
.i-mp-action-item:hover {
background: #e5e9ef;
}
.i-mp-count {
color: #99a2aa;
position: absolute;
bottom: 8px;
right: 10px;
}
.small-item:hover .i-mp-action {
display: block;
}
.img .isPay {
position: absolute;
top: 4px;
right: 4px;
background: #ffa726;
border-radius: 2px;
font-size: 6px;
color: #fff;
}
@media (min-width:1420px) {
.i-pin-empty {
background-position: 310px bottom;
}
.i-mp-empty {
background-position: 320px bottom;
}
.i-pin-empty-set {
width: 280px;
height: 175px;
}
.i-pin-empty-set-icon {
margin: 48px auto 22px;
}
.i-mp-multi {
height: 220px;
}
#i-masterpiece .small-item {
width: 280px;
height: 210px;
}
#i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
width: 280px;
height: 175px;
}
#i-masterpiece .small-item .disabled-img {
line-height: 175px;
}
#i-masterpiece .small-item .reason-inner {
width: 260px;
}
}
.tabs {
position: relative;
}
.tabs-info {
position: absolute;
right: 0;
bottom: 0;
color: #99a2aa;
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
}
.tabs-info .icon-info_help_circle_line_24 {
font-size: 12px;
margin-right: 3px;
}
#page-index .video.empty .be-tab {
display: none;
}
#page-index .video.full-rows .content {
max-height: 935px;
}
#page-index .video .content {
max-height: 380px;
overflow: hidden;
}
#page-index .video .content .small-item:nth-child(4n+1) {
padding-left: 0;
}
#page-index .video .content .small-item:nth-child(4n+4) {
padding-right: 0;
}
#page-index .video .be-tab {
display: inline-block;
line-height: 18px;
vertical-align: middle;
margin-left: 10px;
}
#page-index .video .be-tab-item {
padding: 0 0 3px;
margin-right: 15px;
font-size: 12px;
}
@media (min-width:1420px) {
#page-index .video .content .small-item:nth-child(4n+1) {
padding-left: 10px;
}
#page-index .video .content .small-item:nth-child(4n+4) {
padding-right: 10px;
}
#page-index .video .content .small-item:nth-child(5n+5) {
padding-right: 0;
}
#page-index .video .content .small-item:nth-child(5n+1) {
padding-left: 0;
}
#page-index .video .content .small-item:nth-child(13),#page-index .video .content .small-item:nth-child(14),#page-index .video .content .small-item:nth-child(15) {
display: block;
}
}
.isPay {
position: absolute;
top: 4px;
right: 4px;
padding: 0 4px;
background: #ffa726;
border-radius: 2px;
font-size: 10px;
color: #fff;
}
.section-title .play-all-channel {
position: absolute;
right: 63px;
top: 6px;
width: 78px;
height: 22px;
line-height: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
display: inline-block;
border: 1px solid #b8c0cc;
border-radius: 4px;
color: #6d757a;
font-size: 12px;
transition: .3s ease;
}
.section-title .play-all-channel .video-commonplayer_play {
transition: .3s ease;
margin: 0 4px;
color: #99a2aa;
}
.section-title .play-all-channel>span {
vertical-align: top;
}
.section-title .play-all-channel:hover {
color: #00a1d6;
border-color: #00a1d6;
}
.section-title .play-all-channel:hover .video-commonplayer_play {
color: #00a1d6;
}
#page-index .channel.guest .section-title {
display: none;
}
#page-index .channel.guest .channel-item .channel-title .channel-name {
font-size: 20px;
color: #000;
}
#page-index .channel .empty-state {
padding-bottom: 30px;
margin-top: 7px;
text-align: center;
}
#page-index .channel .empty-state p {
line-height: 14px;
font-size: 12px;
color: #6d757a;
}
#page-index .channel .empty-state .btn-container {
margin-top: 12px;
}
#page-index .channel .section-title .t {
vertical-align: middle;
}
#page-index .channel .section-title .create {
width: 64px;
padding: 0 7px 0 28px;
margin-left: 10px;
box-sizing: border-box;
background-position: -1296px -917px;
vertical-align: middle;
cursor: pointer;
}
#page-index .channel .section-title .create:hover {
background-position: -1360px -917px;
}
#page-index .channel .content {
width: 700px;
max-height: none;
overflow: hidden;
}
#page-index .channel .channel-item {
margin-bottom: 20px;
padding-bottom: 4px;
border-bottom: 1px solid #e5e9ef;
}
#page-index .channel .channel-item:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
#page-index .channel .channel-item:hover .edit {
display: inline-block;
}
#page-index .channel .channel-item.empty-channel {
margin-top: 25px;
padding-bottom: 25px;
}
#page-index .channel .channel-item.vertical .small-item {
width: 100%;
box-sizing: border-box;
}
#page-index .channel .channel-item.vertical .small-item .img {
float: left;
}
#page-index .channel .channel-item.vertical .small-item .title {
height: 20px;
margin: 0 0 0 170px;
text-overflow: ellipsis;
white-space: nowrap;
}
#page-index .channel .channel-item.vertical .small-item .meta {
margin: 8px 0 0 170px;
}
#page-index .channel .channel-item.vertical .small-item .meta span {
width: auto;
margin-right: 30px;
}
#page-index .channel .channel-item.vertical .small-item .meta span:last-child {
margin-right: 0;
}
#page-index .channel .channel-item.vertical .small-item .video-desc {
display: block;
margin: 6px 0 0 170px;
white-space: normal;
}
#page-index .channel .channel-item .small-item {
float: none;
display: inline-block;
font-size: 12px;
}
#page-index .channel .channel-item .small-item:first-child {
padding-left: 0;
}
#page-index .channel .channel-item .small-item:last-child {
padding-right: 0;
}
#page-index .channel .channel-item .small-item .title {
white-space: normal;
}
#page-index .channel .channel-item .small-item .video-desc {
display: none;
height: 36px;
line-height: 18px;
color: #99a2aa;
overflow: hidden;
}
#page-index .channel .channel-item .channel-title {
position: relative;
height: 24px;
line-height: 24px;
font-size: 0;
}
#page-index .channel .channel-item .c-empty-hint-host {
position: absolute;
top: 0;
left: 300px;
font-size: 12px;
color: #99a2aa;
text-align: center;
}
#page-index .channel .channel-item .c-empty-hint-host a {
margin-left: 10px;
color: #00a1d6;
}
#page-index .channel .channel-item .c-empty-hint-host a:hover {
color: #00b5e5;
}
#page-index .channel .channel-item .channel-name {
display: inline-block;
font-size: 16px;
color: #6d757a;
vertical-align: middle;
}
#page-index .channel .channel-item .channel-name:hover {
color: #00a1d6;
}
#page-index .channel .channel-item .channel-video {
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
#page-index .channel .channel-item .count {
top: 0;
vertical-align: middle;
}
#page-index .channel .channel-item .edit {
display: none;
width: 56px;
padding: 0 7px 0 23px;
background-position: -1299px -852px;
box-sizing: border-box;
}
#page-index .channel .channel-item .edit:hover {
background-position: -1363px -852px;
}
#page-index .channel .section-right-options {
float: right;
height: 24px;
display: -ms-flexbox;
display: flex;
}
#page-index .channel .section-right-options .play-all-channel {
width: 78px;
height: 22px;
line-height: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
margin-right: 10px;
display: inline-block;
border: 1px solid #b8c0cc;
border-radius: 4px;
color: #6d757a;
font-size: 12px;
transition: .3s ease;
}
#page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
transition: .3s ease;
margin: 0 4px;
color: #99a2aa;
}
#page-index .channel .section-right-options .play-all-channel>span {
vertical-align: top;
}
#page-index .channel .section-right-options .play-all-channel:hover {
color: #00a1d6;
border-color: #00a1d6;
}
#page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
color: #00a1d6;
}
#page-index .channel .section-right-options .more {
position: static;
top: auto;
right: auto;
}
@media (min-width:1420px) {
#page-index .channel .channel-item .c-empty-hint-host {
left: 400px;
}
}
#page-index .channel.guest .section-title {
display: none;
}
#page-index .channel.guest .channel-item .channel-title .channel-name {
font-size: 20px;
color: #000;
max-width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
#page-index .channel .empty-state {
padding-bottom: 30px;
margin-top: 7px;
text-align: center;
}
#page-index .channel .empty-state p {
line-height: 14px;
font-size: 12px;
color: #6d757a;
}
#page-index .channel .empty-state .btn-container {
margin-top: 12px;
}
#page-index .channel .section-title .t {
vertical-align: middle;
}
#page-index .channel .section-title .create {
width: 64px;
padding: 0 7px 0 28px;
margin-left: 10px;
box-sizing: border-box;
background-position: -1296px -917px;
vertical-align: middle;
cursor: pointer;
}
#page-index .channel .section-title .create:hover {
background-position: -1360px -917px;
}
#page-index .channel .content {
width: 700px;
max-height: none;
overflow: hidden;
}
#page-index .channel .channel-item {
margin-bottom: 20px;
padding-bottom: 4px;
border-bottom: 1px solid #e5e9ef;
}
#page-index .channel .channel-item:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
#page-index .channel .channel-item:hover .edit {
display: inline-block;
}
#page-index .channel .channel-item.empty-channel {
margin-top: 25px;
padding-bottom: 25px;
}
#page-index .channel .channel-item.vertical .small-item {
width: 100%;
box-sizing: border-box;
}
#page-index .channel .channel-item.vertical .small-item .img {
float: left;
}
#page-index .channel .channel-item.vertical .small-item .title {
height: 20px;
margin: 0 0 0 170px;
text-overflow: ellipsis;
white-space: nowrap;
}
#page-index .channel .channel-item.vertical .small-item .meta {
margin: 8px 0 0 170px;
}
#page-index .channel .channel-item.vertical .small-item .meta span {
width: auto;
margin-right: 30px;
}
#page-index .channel .channel-item.vertical .small-item .meta span:last-child {
margin-right: 0;
}
#page-index .channel .channel-item.vertical .small-item .video-desc {
display: block;
margin: 6px 0 0 170px;
white-space: normal;
}
#page-index .channel .channel-item .small-item {
float: none;
display: inline-block;
font-size: 12px;
}
#page-index .channel .channel-item .small-item:first-child {
padding-left: 0;
}
#page-index .channel .channel-item .small-item:last-child {
padding-right: 0;
}
#page-index .channel .channel-item .small-item .title {
white-space: normal;
}
#page-index .channel .channel-item .small-item .video-desc {
display: none;
height: 36px;
line-height: 18px;
color: #99a2aa;
overflow: hidden;
}
#page-index .channel .channel-item .channel-title {
position: relative;
height: 24px;
line-height: 24px;
font-size: 0;
}
#page-index .channel .channel-item .c-empty-hint-host {
position: absolute;
top: 0;
left: 300px;
font-size: 12px;
color: #99a2aa;
text-align: center;
}
#page-index .channel .channel-item .c-empty-hint-host a {
margin-left: 10px;
color: #00a1d6;
}
#page-index .channel .channel-item .c-empty-hint-host a:hover {
color: #00b5e5;
}
#page-index .channel .channel-item .channel-name {
display: inline-block;
font-size: 16px;
color: #6d757a;
vertical-align: middle;
cursor: pointer;
}
#page-index .channel .channel-item .channel-name:hover {
color: #00a1d6;
}
#page-index .channel .channel-item .channel-video {
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
#page-index .channel .channel-item .count {
top: 0;
vertical-align: middle;
}
#page-index .channel .channel-item .edit {
display: none;
width: 56px;
padding: 0 7px 0 23px;
background-position: -1299px -852px;
box-sizing: border-box;
}
#page-index .channel .channel-item .edit:hover {
background-position: -1363px -852px;
}
#page-index .channel .section-right-options {
float: right;
height: 24px;
display: -ms-flexbox;
display: flex;
}
#page-index .channel .section-right-options .play-all-channel {
width: 78px;
height: 22px;
line-height: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
margin-right: 10px;
display: inline-block;
border: 1px solid #b8c0cc;
border-radius: 4px;
color: #6d757a;
font-size: 12px;
transition: .3s ease;
}
#page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
transition: .3s ease;
margin: 0 4px;
color: #99a2aa;
}
#page-index .channel .section-right-options .play-all-channel>span {
vertical-align: top;
}
#page-index .channel .section-right-options .play-all-channel:hover {
color: #00a1d6;
border-color: #00a1d6;
}
#page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
color: #00a1d6;
}
#page-index .channel .section-right-options .more {
position: static;
top: auto;
right: auto;
cursor: pointer;
}
@media (min-width:1420px) {
#page-index .channel .channel-item .c-empty-hint-host {
left: 400px;
}
}
#page-index .bangumi .content .large-item:nth-child(2n) {
margin-right: 0;
}
#page-index .bangumi .content .title {
font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
}
@media (min-width:1420px) {
#page-index .bangumi .large-item {
width: 430px;
}
}
@media (min-width:1420px) {
#page-index .article-content {
width: 743px;
}
#page-index .article-noimg {
width: 100%;
}
}
#page-index .coin .small-item:nth-child(9),#page-index .coin .small-item:nth-child(10) {
display: none;
}
#page-index .coin .small-item .title {
margin-top: 4px;
height: 40px;
}
#page-index .coin.loading .content {
margin-left: 0;
}
#page-index .coin .content {
width: 760px;
max-height: 380px;
margin: -10px 0 0 -10px;
overflow: hidden;
}
#page-index .coin .isPay {
position: absolute;
top: 4px;
right: 4px;
padding: 1px 4px;
background: #ffa726;
border-radius: 2px;
font-size: 10px;
color: #fff;
}
#page-index .coin .ogv {
margin-top: 4px;
height: 40px;
}
#page-index .coin .ogv-title {
overflow: hidden;
font-size: 12px;
line-height: 20px;
height: 20px;
word-break: break-all;
}
#page-index .coin .ogv-title-sub {
color: #9499a0;
line-height: 17px;
height: 17px;
}
#page-index .tags.empty,#page-index .tags.loading {
display: none;
}
#page-index .subs .detail {
float: left;
max-width: 120px;
line-height: 40px;
margin-left: 15px;
}
#page-index .subs .img img {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/tag-default-img.png);
}
#page-index .fav-item {
position: relative;
float: left;
margin: 0 20px 28px 0;
}
#page-index .fav-item:nth-child(9),#page-index .fav-item:nth-child(10) {
display: none;
}
#page-index .fav-item:nth-child(4),#page-index .fav-item:nth-child(8) {
margin-right: 0;
}
#page-index .fav-item[data-count="0"] .fav-img-placeholder {
border-radius: 2px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAADpUlEQVR4Ae3dNXRkZRjH4RtrcHd37XB3d3d3p6Xbigp3p94KlwqXDqcLTQxZ3waL/O/iDskMM9+d5z3naSLv2C+efKnGvlh8dIzHdAvBeBxdiYs2Gq/aeQEgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2DQusBYErfH7rHKj3aPO2LJXHYLjOdjw+ovpn5ePD+b3QLjoRio/mHql4mH/stugXF/9R+nfp1/s1tgvBwDswhsIF7+u90CYzTWrGY59evG6J/tFhhTcVg1x6l3xNTv9wuMB6oWTb3r17sFxoJYu4WBrR0LQmArcE3V4snO60JgYwzHYBsCG4xhgXFB1aapdwust30cg20MbDA+EVjzfR/vx/1xVRwQG1T/09SXFQfEVXF/vB/fC6xsY3FvHBGrVl029XWKI+LeGBNYGabi2Tgw+qtCpr6ucVA8G1MC605vx65V4VPfhnhHYN1jKubFYNWQqW9LzIspgXXeLVVDp75tAuust6KvwYH1xbsC65zTq4ZPbuMZAuucDXsgsA0F1jkr90Bgqwisc7bugcC2EVjnXNADgV0osM55ugcCe1pgnTMZ2zT8w+OkwDprfoMDm+8brd3h8AbGdbifRXaP8VinQXGtHeMC6y7Px0AD4hqI5/02RXe6tQGB3e73wbrb1QXHdbXfaO1+k3FBgXFdEN8LrAzfx/kFxXV+WXEJrDYZVxYQ15Ux6Y8+yrSggMAW+LO1cr1aQGCvCqxc9xUQ2H0CK9fNBQR2s8DKdWIBgZ0osHLtXkBguwusXFsWENhWAivXGgUEtqbAyrV6AYGtLrByrV1AYGsJrFybFxDY5gIr1x4FBLaHwMp1QQGBnS+wcj1WQGCPCaxcC2OohcdcnhlnRX+Ldg7FQoGV7ZoWhHVKfPCrnR/EKXMNrb5uTpku34LYZhYP/mpxVXz6N7s/jatitVn+1fZCgTXDcOz0L08U3CcejeX/Yf/yeDT2jr5/cTk7xWfOyW+Wb+LJOC52iLVj49gzLo0nYqxF5/M/EZfFXrFprB07xnHxZHzTW//pAwSGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIbb9NymKgDOyYmWrwYRuOYGRQSx031+RTwAAAAAElFTkSuQmCC);
width: 152px;
height: 152px;
}
#page-index .fav-item[data-count="1"] .fav-img-0 {
border-radius: 2px;
height: 152px;
}
#page-index .fav-item[data-count="2"] .fav-img-1 {
border-radius: 0 0 2px 2px;
width: 152px;
}
#page-index .fav-item[data-public="1"],#page-index .fav-item[data-public="3"] {
display: none;
}
#page-index .fav-item .state {
color: #99a2aa;
float: right;
line-height: 24px;
}
#page-index .fav-item .name {
display: block;
font-size: 18px;
font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
line-height: 24px;
width: 7em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#page-index .fav-item .delete,#page-index .fav-item .edit {
color: #00a1d6;
cursor: pointer;
display: inline-block;
transition: none;
text-indent: 1.2em;
}
#page-index .fav-item .edit {
background-position: -540px -465px;
}
#page-index .fav-item .delete {
background-position: -540px -404px;
float: right;
}
#page-index .fav-imgs {
border: 1px solid #ccd0d7;
border-radius: 4px;
display: block;
width: 152px;
height: 152px;
margin-bottom: 11px;
overflow: hidden;
position: relative;
}
#page-index .fav-imgs.empty {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/playlistbg.png) no-repeat;
background-size: img;
background-position: 50%;
}
#page-index .fav-imgs img {
width: 100%;
height: 152px;
object-fit: img;
object-position: 50%;
}
#page-index .fav-img {
width: 100%;
height: 100%;
background-size: img;
background-position: 50%;
display: block;
float: left;
}
#page-index .fav-img-0 {
border-radius: 2px 2px 0 0;
width: 152px;
height: 74px;
margin-bottom: 4px;
}
#page-index .fav-img-1 {
border-radius: 0 0 0 2px;
width: 74px;
height: 74px;
margin-right: 4px;
}
#page-index .fav-img-2 {
border-radius: 0 0 2px 0;
width: 74px;
height: 74px;
}
#page-index .fav-count {
position: absolute;
top: 10px;
right: 10px;
min-width: 12px;
padding: 0 9px;
line-height: 18px;
text-align: center;
font-family: Arial;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(0,0,0,.5);
border-radius: 9px;
}
#page-index .fav-action {
visibility: hidden;
margin-top: 7px;
}
@media (min-width:1420px) {
#page-index .fav .fav-item:nth-child(4),#page-index .fav .fav-item:nth-child(8) {
margin-right: 20px;
}
#page-index .fav .fav-item:nth-child(5),#page-index .fav .fav-item:nth-child(10) {
margin-right: 0;
}
#page-index .fav .fav-item:nth-child(9),#page-index .fav .fav-item:nth-child(10) {
display: block;
}
}
#page-index .album .content {
max-height: 400px;
overflow: hidden;
}
#page-index .album .content .album-wrapper {
margin-left: -20px;
}
#page-index .album .content .album-wrapper .album-item {
width: 160px;
height: auto;
display: inline-block;
margin-bottom: 20px;
margin-left: 20px;
}
#page-index .album .content .album-wrapper .album-item .album-top {
display: block;
width: 100%;
height: 120px;
position: relative;
background: #d8d8d8;
cursor: pointer;
}
#page-index .album .content .album-wrapper .album-item .album-top .album-img {
width: 100%;
height: 100%;
border-radius: 4px;
background-size: img;
background-repeat: no-repeat;
}
#page-index .album .content .album-wrapper .album-item .album-top .album-count {
width: 40px;
height: 20px;
background: rgba(36,33,46,.3);
border-radius: 4px;
position: absolute;
bottom: 8px;
right: 8px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
}
#page-index .album .content .album-wrapper .album-item .album-title {
display: block;
width: 160px;
height: 40px;
font-size: 12px;
color: #222;
cursor: pointer;
overflow: hidden;
position: relative;
top: 5px;
}
#page-index .album .content .album-wrapper .album-item .album-title:hover {
color: #00a1d6;
}
#page-index .album .content .album-wrapper .meta-col {
margin-top: 10px;
}
#page-index .album .content .album-wrapper .meta-col span {
margin-right: 45px;
}
.i-m-r1 {
text-align: center;
padding: 0 10px 13px;
}
.i-m-icon {
background-position: -1104px -333px;
width: 33px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
}
.i-m-title {
display: inline-block;
}
.i-m-title .icon-i-title {
display: block;
width: 120px;
height: 34px;
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_createCenters.png) no-repeat;
background-size: 100% 100%;
float: left;
}
.icon-m-ra {
display: block;
width: 28px;
height: 28px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAY5JREFUaAXtmb9KA0EQh2eSWGjjE1gbQYgS7UVbn8UXCFoo+gK+im1EaxM0xCIBK4sUthYi5lh3SXGkCCwyszPgb4v7wy1z8327x83tEaHBAAzAAAzAAAzAAAzAAAzAgAsDIYTGePy25SKZmERDMpHBbLYxHE3739XP++Blci4Z+6+xRAHp4/OMKBwtkgmXHiBFAZst6hPxV23bHlIUcH93+4mZTj1Bcm1b7mg4mhyHQHdxuq7XUfniYK99VZ+XOVIBTKl7gVQD9AKpCugBUh3QGrIIoCVkMUAryKKAFpDFAVdBxgKh1+3s3KTrkk20kslNrNtp3xPz0ks/Fga9+CXSzI2R288EMBUBFMLS10YcwWtmrnITz+3Xyu0o1W9VhRNHVXx6ppyLPoOr4DRr1GKAFnDFRtAKrgigJZw6oDWcKqAHODVAL3AqgJ7gxAGfX6eH1Tw8eliLSXCpiZZq1ZxOPMGJA67x5m0sjh5S4Lg3WUVb3Ftx6+3fhCIqQsMADMAADMAADMAADMDA/zbwC+qC2/i4tVKPAAAAAElFTkSuQmCC) no-repeat;
background-size: 100% 100%;
float: right;
position: relative;
top: 6px;
}
.i-m-r2 {
border: 1px solid #e5e9ef;
border-radius: 4px;
padding: 7px 0;
}
.i-m-btn {
color: #6d757a;
float: left;
text-align: center;
width: 152px;
line-height: 20px;
}
.i-m-text,.i-m-u-icon {
vertical-align: middle;
}
.i-m-u-icon {
background-position: -1111px -151px;
width: 18px;
height: 18px;
margin-right: 6px;
}
.i-m-upload {
border-right: 1px solid #e5e9ef;
}
.i-m-upload:hover .i-m-u-icon {
background-position: -1175px -151px;
}
.i-m-v-icon {
background-position: -1111px -215px;
width: 18px;
height: 19px;
margin-right: 6px;
vertical-align: middle;
}
.i-m-v:hover .i-m-v-icon {
background-position: -1175px -215px;
}
.elec.loading {
display: none;
}
.elec:hover .elec-status {
background-image: url(./charging_focus.gif);
}
.elec .elec-trigger {
background: #f25d8e;
border-radius: 4px;
box-shadow: 0 4px 4px rgba(255,112,159,.3);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 18px;
line-height: 50px;
padding: 0 24px;
}
.elec .elec-trigger:hover {
background: #ff709f;
}
.elec .elec-trigger:hover+.elec-map .elec-status {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
}
.elec .elec-trigger:hover+.elec-map .elec-status-bg {
width: 156px;
}
.elec .elec-trigger-icon {
background-position: -278px -918px;
width: 20px;
height: 24px;
vertical-align: middle;
margin-right: 12px;
}
.elec #elec-hover-bg-preloader {
background-image: url(./charging_focus.gif);
display: none;
}
.elec .elec-status {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
color: #99a2aa;
font-weight: 700;
margin-left: 172px;
width: 96px;
padding: 0 30px;
height: 74px;
line-height: 74px;
text-align: right;
position: absolute;
top: 8px;
right: 0;
z-index: 2;
}
.elec .elec-status-bg {
background-image: url(./charging_hover.gif);
width: 0;
height: 74px;
position: absolute;
top: 8px;
left: 192px;
transition: width .4s ease;
z-index: 1;
}
.elec .elec-status-bg-grey {
background: #e5e9ef;
width: 156px;
height: 74px;
position: absolute;
top: 8px;
right: 0;
z-index: 0;
}
.elec .elec-count {
color: #6d757a;
font-weight: 700;
}
.elec .elec-list {
height: 47px;
margin: 20px 0 6px;
overflow: hidden;
}
.elec .elec-hito {
cursor: pointer;
display: block;
float: left;
margin-left: -20px;
position: relative;
}
.elec .elec-hito:first-child,.elec .elec-hito:nth-child(2),.elec .elec-hito:nth-child(3) {
margin: 0 8px 0 0;
}
.elec .elec-hito:nth-child(4) {
z-index: 7;
margin-left: 0;
}
.elec .elec-hito:nth-child(5) {
z-index: 6;
}
.elec .elec-hito:nth-child(6) {
z-index: 5;
}
.elec .elec-hito:nth-child(7) {
z-index: 4;
}
.elec .elec-hito:nth-child(8) {
z-index: 3;
}
.elec .elec-hito:nth-child(9) {
z-index: 2;
}
.elec .elec-avatar {
border: 2px solid #fff;
border-radius: 38px;
width: 38px;
height: 38px;
}
.elec .elec-monthly-count {
color: #99a2aa;
line-height: 1;
}
.elec .elec-monthly-c {
color: #6d757a;
}
.elec .elec-setting {
color: #6d757a;
float: right;
}
#page-index .i-ann.empty {
display: none;
}
#page-index .i-ann-content {
position: relative;
max-height: 184px;
overflow: auto;
white-space: pre-line;
word-break: break-all;
}
#page-index #i-ann-content {
color: #6d757a;
line-height: 20px;
}
#page-index #i-ann-content textarea {
width: 306px;
height: 172px;
color: #6d757a;
font-size: 12px;
font-family: Microsoft Yahei;
line-height: 20px;
padding: 10px;
margin: -10px 0 0 -11px;
border: 1px solid transparent;
border-radius: 4px;
box-sizing: content-box;
}
#page-index #i-ann-content textarea:focus,#page-index #i-ann-content textarea:hover {
border-color: #00a1d6;
}
.game {
padding-bottom: 0;
}
.game.empty,.game.loading {
display: none;
}
.game .content {
overflow: hidden;
}
.i-live {
padding: 15px 19px;
}
.i-live.hidden {
display: none;
}
.i-live.online .section-title {
border-bottom: none;
}
.i-live:hover .i-live-flag {
opacity: 0;
}
.i-live:hover .i-live-hover {
opacity: 1;
}
.i-live:hover .i-live-title {
color: #00a1d6;
}
.i-live.carousel-on .i-live-flag {
background-position: -1183px -470px;
}
.i-live .section-title {
margin-bottom: 30px;
}
.i-live .i-live-fo {
position: absolute;
top: 9px;
right: 20px;
}
.i-live .i-live-fo-btn,.i-live .i-live-unfo-btn {
border: 1px solid;
border-radius: 4px 0 0 4px;
color: #fff;
cursor: pointer;
float: left;
line-height: 24px;
text-align: center;
width: 80px;
}
.i-live .i-live-fo-btn {
color: #f25d8e;
}
.i-live .i-live-fo-btn:hover {
color: #ff85ad;
}
.i-live .i-live-unfo-btn {
border-color: #dae0e9;
color: #6d757a;
}
.i-live .i-live-fo-count {
border: 1px solid #dae0e9;
border-left-width: 0;
border-radius: 0 4px 4px 0;
color: #99a2aa;
float: left;
line-height: 24px;
text-align: center;
min-width: 50px;
}
.i-live .i-live-on {
margin-top: -10px;
position: relative;
}
.i-live .i-live-link {
display: block;
}
.i-live .i-live-flag {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
background-position: -1090px -470px;
transition: opacity .2s ease;
position: absolute;
top: 6px;
right: 6px;
width: 61px;
height: 20px;
}
.i-live .i-live-img {
border-radius: 4px;
display: block;
width: 100%;
height: 173px;
}
.i-live .i-live-title {
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.i-live .i-live-hover {
background: rgba(0,0,0,.4);
border-radius: 4px;
transition: opacity .2s ease;
width: 100%;
height: 173px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.i-live .i-live-hover-icon {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
background-position: -1096px -1094px;
width: 48px;
height: 48px;
margin: 72px auto;
}
.i-live .i-live-text {
color: #222;
margin-top: 10px;
}
.i-live .i-live-m {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
background-position: -1112px -855px;
color: #99a2aa;
float: right;
text-indent: 21px;
}
.i-live .i-live-off {
margin: 30px 0 15px;
text-align: center;
}
.i-live .i-live-off-guest {
color: #99a2aa;
}
.i-live .i-live-off-guest p {
line-height: 16px;
}
.i-live .i-live-off-guest a {
display: block;
line-height: 16px;
margin-top: 6px;
color: #00a1d6;
}
.i-live .i-live-off-guest a .i-live-arrow {
background-position: -477px -410px;
}
.i-live .i-live-off-host:hover .i-live-icon {
background-position: -536px -601px;
}
.i-live .i-live-off-host:hover .r-arrow {
background-position: -477px -410px;
}
.i-live .i-live-icon {
background-position: -600px -533px;
width: 16px;
height: 16px;
margin-right: 3px;
}
.i-live .i-live-host-text,.i-live .i-live-icon {
vertical-align: middle;
}
.i-live .i-live-arrow {
margin-left: 8px;
}
.section.shop .shop-link {
position: absolute;
top: 0;
right: 0;
line-height: 46px;
padding: 0 20px;
color: #99a2aa;
font-size: 12px;
font-weight: 400;
}
.section.shop .shop-link:hover {
color: #00a1d6;
}
.section.shop .detail .item {
float: left;
width: 50%;
}
.section.shop .detail .item span {
display: block;
margin: 0 auto;
text-align: center;
}
.section.shop .detail .item .title {
color: #6d757a;
font-size: 12px;
}
.section.shop .detail .item .number {
color: #222;
font-size: 14px;
}
#page-index .col-1 {
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
float: left;
padding: 15px 20px;
width: 700px;
}
#page-index .col-1.shielding:after {
content: "\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9\FF0C\8BF7\5C06\8BE5\7528\6237\79FB\9664\9ED1\540D\5355";
background-color: #fff;
}
#page-index .col-1.be-shielding:after,#page-index .col-1.shielding:after {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
background-position: 50%;
background-repeat: no-repeat;
border-radius: 4px;
color: #6d757a;
display: block;
font-size: 14px;
height: 450px;
overflow: hidden;
line-height: 640px;
text-align: center;
}
#page-index .col-1.be-shielding:after {
content: "\7531\4E8E\5BF9\65B9\9690\79C1\8BBE\7F6E\FF0C\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9";
}
#page-index .col-1.absEmpty:after {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
background-position: 50%;
background-repeat: no-repeat;
border-radius: 4px;
color: #6d757a;
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5C55\793A\7684\5185\5BB9\54E6~";
display: block;
font-size: 14px;
height: 450px;
overflow: hidden;
line-height: 640px;
text-align: center;
}
#page-index .col-1 .section.empty:after {
position: absolute;
left: 300px;
top: 9px;
color: #999;
}
#page-index .col-1 .section.empty:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
#page-index .col-1 .section.private {
display: none;
}
#page-index .col-1 .section .more {
background-position: -310px -405px;
}
#page-index .col-1 .section .more:hover {
background-position: -438px -405px;
}
#page-index .col-2 {
float: right;
width: 350px;
}
#page-index .col-2 .section {
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
padding: 15px 20px 18px;
margin-bottom: 10px;
}
#page-index .col-2 .section .user-auth .auth-icon {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 18px;
height: 18px;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
background-repeat: no-repeat;
margin-right: 6px;
}
#page-index .col-2 .section .user-auth .auth-icon.personal-auth {
background-position: -39px -54px;
}
#page-index .col-2 .section .user-auth .auth-icon.organization-auth {
background-position: -5px -54px;
}
#page-index .col-2 .section .user-auth .auth-description {
line-height: 18px;
display: -ms-flexbox;
display: flex;
font-size: 14px;
color: #222;
}
#page-index .col-2 .section .user-auth .profession-description {
display: inline-block;
margin-top: 12px;
line-height: 20px;
font-size: 14px;
color: #222;
}
#page-index .col-2 .section .user-auth .profession-description__icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: sub;
margin-left: 3px;
}
#page-index .col-2 .section .user-auth.no-auth {
margin: -15px -20px -18px;
}
#page-index .col-2 .section .user-auth.no-auth .no-auth-title {
display: inline-block;
position: relative;
top: 16px;
left: 20px;
}
#page-index .col-2 .section .user-auth.no-auth .no-auth-title .goto-auth {
cursor: pointer;
font-size: 18px;
color: #222;
display: block;
margin-bottom: 4px;
}
#page-index .col-2 .section .user-auth.no-auth .no-auth-title span {
font-size: 12px;
color: #99a2aa;
}
#page-index .col-2 .section .user-auth.no-auth .icon-auth {
width: 99px;
height: 70px;
display: inline-block;
vertical-align: middle;
}
#page-index .col-2 .section .auth-detail {
font-size: 12px;
color: #6d757a;
margin-top: 12px;
padding-left: 6px;
}
#page-index .col-2 .section .blueV-brand {
border-top: 1px solid #eee;
margin-top: 16px;
padding-top: 14px;
}
#page-index .col-2 .section .blueV-brand .blueV-link {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
#page-index .col-2 .section .blueV-brand .blueV-link .left-txt {
color: #18191c;
font-weight: 700;
}
#page-index .col-2 .section .blueV-brand .blueV-link .right-txt {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: #9499a0;
}
#page-index .col-2 .section .blueV-brand .blueV-link .right-txt>svg {
margin-left: 6px;
width: 7px;
height: 12px;
}
#page-index .col-2 .section .private-hint .icon {
width: 21px;
margin: 0;
background-position: -214px -724px;
}
#page-index .col-2 .section.empty:after {
color: #aaa;
display: block;
line-height: 80px;
text-align: center;
}
#page-index .col-2 .section:last-child {
border-bottom: 1px solid #eee;
}
#page-index .col-2 .section.user.private .content {
display: block;
}
#page-index .col-2 .section.user.private .friend-data {
padding: 14px 0;
}
#page-index .col-2 .section.user.private .section-title {
display: block;
margin-bottom: 0;
}
#page-index .col-2 .section.user.private .section-title .private-hint {
display: block;
line-height: 46px;
}
#page-index .col-2 .section.elec,#page-index .col-2 .section.i-m {
padding-top: 15px;
}
#page-index .col-2 .section-title {
border-bottom: 1px solid #e5e9ef;
font-size: 14px;
font-weight: 700;
padding: 0;
margin: -15px 0 10px;
height: 45px;
line-height: 45px;
}
#page-index .col-2 .section-title a {
font-weight: 700;
margin-right: 5px;
}
#page-index .col-2 .section-title .quantity {
font-weight: 700;
}
#page-index .col-2 .section-title .more {
background-position: -310px -407px;
font-weight: 400;
border: none;
top: 0;
line-height: 16px;
padding-right: 12px;
margin-right: 0;
}
#page-index .col-2 .section-title .more:hover {
background-position: -438px -407px;
}
#page-index .col-2 .mini-item {
width: 100%;
}
#page-index .col-2 .mini-item .detail a {
display: block;
line-height: 40px;
}
@media (min-width:1420px) {
#page-index .col-1 {
width: 880px;
}
#page-index .col-1 .section.empty:after,#page-index .col-1 .section .sec-empty-hint {
left: 400px;
}
#page-index .col-1 .channel .content {
width: 880px;
}
#page-index .col-1 .coin .content {
width: 900px;
}
#page-index .col-1 .coin .small-item:nth-child(8),#page-index .col-1 .coin .small-item:nth-child(9),#page-index .col-1 .coin .small-item:nth-child(10) {
display: block;
}
}
/*# sourceMappingURL=space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/
#space-theme {
transition: bottom .4s ease;
position: fixed;
left: 0;
bottom: -600px;
width: 100%;
z-index: 1000;
background: rgba(0,0,0,.8);
color: #fff;
}
#space-theme.theme-show {
bottom: 0;
}
#space-theme .theme-buy-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
background-color: rgba(0,0,0,.7);
}
#space-theme .theme-buy-layer #theme-buy-layer-wrapper {
background: #fff;
border-radius: 4px;
position: fixed;
left: 50%;
transition: opaicty .2s ease;
top: 50%;
width: 370px;
margin: -200px 0 0 -185px;
z-index: 1011;
}
#space-theme .theme-tab {
cursor: pointer;
display: block;
float: left;
font-size: 18px;
margin-right: 10px;
line-height: 52px;
width: 130px;
text-align: center;
}
#space-theme .theme-tab.active {
background-color: #111;
}
#space-theme .theme-ann {
color: #ff98ba;
float: left;
line-height: 32px;
margin-right: 33px;
}
#space-theme .theme-ann-icon {
background-position: -1307px -154px;
width: 10px;
height: 12px;
margin-right: 10px;
position: relative;
top: 1px;
}
#space-theme .theme-close {
background-position: -527px -271px;
cursor: pointer;
width: 32px;
height: 32px;
margin-right: -10px;
}
#space-theme .theme-close:hover {
background-position: -591px -271px;
}
#space-theme .theme-topright {
float: right;
margin-top: 10px;
}
#space-theme .theme-topright .theme-buy-vip {
line-height: 30px;
width: 90px;
margin-left: 15px;
}
#space-theme .theme-btn {
line-height: 30px;
width: 88px;
}
#space-theme .theme-btn.primary {
background: #f25d8e;
border: 1px solid #f25d8e;
}
#space-theme .theme-btn.primary:hover {
background-color: #ff85ad;
border-color: #ff85ad;
}
#space-theme .theme-btn.primary.disabled {
border-color: #aaa;
}
#space-theme .theme-panel {
background: #111;
padding: 25px 0 15px;
position: relative;
}
#space-theme .theme-panel[tab-id="1"] .theme-list {
padding-left: 45px;
}
#space-theme .theme-list {
position: relative;
height: 280px;
overflow: hidden;
}
#space-theme .theme-list[name=toutu] {
padding-left: 45px;
}
#space-theme .theme-list-inner {
padding-bottom: 40px;
}
#space-theme .theme-item-outer {
float: left;
width: 220px;
height: 240px;
position: relative;
}
#space-theme .theme-item-outer:hover {
z-index: 1;
}
#space-theme .theme-item {
background-position: center 15px;
background-repeat: no-repeat;
border-radius: 8px;
cursor: pointer;
text-align: center;
width: 180px;
padding: 182px 20px 10px;
position: absolute;
top: 0;
left: 0;
}
#space-theme .theme-item:hover {
background-color: #4c4c4c;
}
#space-theme .theme-item:hover .theme-action,#space-theme .theme-item:hover .theme-price {
display: block;
}
#space-theme .theme-item.active {
background-color: #4c4c4c;
box-shadow: inset 0 0 0 3px hsla(0,0%,100%,.4);
}
#space-theme .theme-item.active .theme-item-active-icon {
display: block;
}
#space-theme .theme-item-active-icon {
background-position: -650px -653px;
display: none;
width: 37px;
height: 37px;
position: absolute;
top: 0;
right: 0;
}
#space-theme .theme-name {
font-size: 14px;
line-height: 20px;
text-align: center;
max-width: 10em;
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#space-theme .theme-price {
color: #ccd0d7;
display: none;
margin: 5px 0 -1px;
}
#space-theme .theme-action {
display: none;
padding: 10px 0 5px;
}
#space-theme .theme-btn {
border-radius: 4px;
color: #fff;
display: inline-block;
width: 60px;
line-height: 24px;
margin: 0 3px;
}
#space-theme .theme-btn.use {
background: #00a1d6;
}
#space-theme .theme-btn.use:hover {
background: #00b5e5;
}
#space-theme .theme-btn.buy {
background: #f25d8e;
width: 72px;
}
#space-theme .theme-btn.buy:hover {
background: #ff85ad;
}
#space-theme .theme-btn.renew {
border: 1px solid;
line-height: 22px;
width: 58px;
}
#space-theme .theme-btn.renew:hover {
background: #ff85ad;
border-color: #ff85ad;
}
#space-theme .toutu-item {
border: 3px solid #555;
border-radius: 12px;
cursor: pointer;
float: left;
width: 310px;
height: 96px;
position: relative;
margin: 0 25px 20px 0;
background-size: img;
background-position: 50%;
}
#space-theme .toutu-item.active,#space-theme .toutu-item.for-sale.active {
border-color: #fff;
z-index: 2;
}
#space-theme .toutu-item.active .selected-icon,#space-theme .toutu-item.for-sale.active .selected-icon {
display: block;
}
#space-theme .toutu-item.active .toutu-detail,#space-theme .toutu-item.for-sale.active .toutu-detail {
border-color: #fff;
}
#space-theme .toutu-item:hover {
z-index: 3;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#space-theme .toutu-item:hover .toutu-detail {
left: -3px;
opacity: 1;
}
#space-theme .toutu-item.upload-toutu {
position: relative;
width: 316px;
height: 102px;
color: #99a2aa;
border: none;
background-image: url(s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-normal.png);
background-repeat: no-repeat;
transition: background-image .2s ease,color .2s ease;
}
#space-theme .toutu-item.upload-toutu:hover {
color: #fff;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-hover.png);
}
#space-theme .toutu-item.upload-toutu:hover .upload-icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABoklEQVR42mNgAIL///+rAvFaIP74f+DBR6hbVBnwAaACdSB+/3/wAZCb1PE5fC1U4TYglmQYYAByA9QtILAWn0JY8hhwR6M5HgQ+41MEBgyDDBB014hyOFB5GRA/h+IyIvW0AvEXIL4KxMF0dzhQqQeWEsCDgJ4sNPX/gDiU3g4vxOLwAjzqJXDUD+/xFQi0cLgGEH9DcsB3kBge9XPwlNXz6J3GLYF4IRDPBbEJVG6/8Tj8LxDr0Cb3opatiiSavYKIGnItTRwOlGID4unQ0AGBJUDMTIS5xtBMSAiA1Bhg0X8EiA+T5XCoo3dgsaycCIfvJ6FdsomqaRwoPAmHRT+AWBePmYkkNqhAoW5CFYcDhdwJRPV1IObHok8FiD+Q0RrcQrHDgVwOIL5HhGXngFgOSR+oXX+HSIduo3o5DuTWkBBSoDJ9NRCvgyYhYoEkVWtOIFOEHj0hJPsOk6H9MDaHt9Gje0Ohw49gc/iH//QBVE8qJ+jk8K2gBhglDh90XTdiHb6WmBAYjA7XGEzDEyQ1/qDNT1DIfxpEDj8CLj1wAAAxW+fPWMftvgAAAABJRU5ErkJggg==);
}
#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips2 {
display: block;
}
#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips1 {
display: none;
}
#space-theme .toutu-item.upload-toutu .upload-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#space-theme .toutu-item.upload-toutu .upload-icon {
width: 46px;
height: 26px;
margin: 0 auto;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABqUlEQVR42mNgAIKZi1apAvFaIP4IxP8HGH+EukWVAR8AKlAH4veDwMHoGOQmdXwOXwtVuA2IJRkGGIDcAHULyE1r8SmEJY8BdzSa40Fu+oxPEThqGAYZIOiuEeVwoPoyIH4OxWVE6mkF4i9AfBWIg+nucKBaDywlgAcBPVlo6v8BcSi9HV6IxeEFeNRL4Kgf3uMrEGjhcA0g/obkgO8gMTzq5+Apq+fRO41bAvFCIJ4LYhOo3H7jcfhfINahTe5FLVsVSTR7BRE15FqaOBwoxwbE06GhA1K7BIiZiTDXGJoJCTkcpMYAi/4jQHyYLIdDHb0Di2XlRDh8Pwntkk1UTeNA8Uk4LPoBxLp4zEwksUEFCnUTqjgcKOZOIKqvAzE/Fn0qQPyBjNbgFoodDuRzAPE9Iiw7B8RySPpA7fo7RDp0G9XLcSC/hoSQApXpq4F4HTQJEatPkqo1J5AtQo+eEJJ9h8nQfxibw9vo0cOh0OFHsDn8A526ZlRPKifo5PCtoAYYJQ4fdF03Yh2+lpgQGIwO1xhMwxMkNf6gzU9QyH8aRA4/Ai49cAAAVzZmwRFfokoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
transition: background-image .2s ease;
}
#space-theme .toutu-item.upload-toutu .upload-tips {
line-height: 20px;
margin-top: 5px;
text-align: center;
font-size: 12px;
white-space: nowrap;
}
#space-theme .toutu-item.upload-toutu .upload-tips.u-tips2 {
display: none;
}
#space-theme .toutu-item.upload-toutu .upload-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
#space-theme .toutu-item .vip-icon {
position: absolute;
top: -3px;
right: -3px;
width: 57px;
height: 57px;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/vip-tag.png);
background-repeat: no-repeat;
}
#space-theme .toutu-item .selected-icon {
display: none;
background-image: url(./icons.png);
background-position: -642px -650px;
content: "";
position: absolute;
width: 45px;
height: 45px;
top: -3px;
right: 0;
}
#space-theme .theme-list-inner .noviptag:after {
display: none;
}
#space-theme .edit-container {
width: 1100px;
height: 280px;
margin: 0 auto;
overflow: hidden;
}
#space-theme .edit-container .crop-container .preview-container {
position: relative;
height: 172px;
background-color: #222;
border-radius: 10px;
overflow: hidden;
}
#space-theme .edit-container .crop-container .preview-container.selecting {
background-color: #111;
}
#space-theme .edit-container .crop-container .preview-container .jcrop-holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 1100px;
max-height: 172px;
}
#space-theme .edit-container .crop-container .crop-target {
max-width: 1100px;
max-height: 172px;
}
#space-theme .edit-container .crop-container .option-pane {
margin-top: 10px;
height: 16px;
}
#space-theme .edit-container .crop-container .option-pane .rechoose {
display: inline-block;
height: 16px;
line-height: 16px;
padding-left: 20px;
font-size: 12px;
color: #fff;
cursor: pointer;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAxklEQVR42o3RzQoBURTA8SsZxBuMZ/GxsLCyV16AsJOF4oWshi02mgVFZOcRJMVK6vqfOrekzMypX82ce87M6R5jNKy1WXSwwQ0PhOjDM99BooQjFqgjjyJqCLCH74oz2GJk/gRnYxxkCnlJo2UigvOJjtozcaHFVscKJdGOaahirU0vSbzRSPAnaZzJw1m7V6gkmVHu+apN04i6JlJuYRcsI4qHOMmNuoSvtxDosgrIoYw5drLc3694GOgSn7jr3Xdlua7uAzN0CaobG2d1AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: 2px 2px;
transition: background-image .2s ease,color .2s ease;
}
#space-theme .edit-container .crop-container .option-pane .rechoose:hover {
color: #00a1d6;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAyUlEQVR42o3RzwoBcRDA8Z9kEW+wnsWfg4OTu/IChJscFK+yD+C0XHHRHigie/IIkuIkxff3M3ug7O7UZ9ummd1pRqkgHD+NFla44AYPXVjqKxy/gD1mqCKLPCpwsYUdFKewxkD9C8cfYmem4JFEQ4WF449k1I6KjE/xS8bydKIZ0VDGUpoeOvFELcafdONEvxyle4FSnBn1ns/SNA6pqyMRHOyEeUhxHwezUUnYsgVXjpVDBkVMsTHH/fmKhZ4c8Y6r7L5tjivxBoCZldPnr4+cAAAAAElFTkSuQmCC);
}
#space-theme .edit-container .crop-container .option-pane .upload-size {
margin-left: 10px;
color: #99a2aa;
font-size: 12px;
}
#space-theme .edit-container .uploading-container {
margin-bottom: 30px;
}
#space-theme .edit-container .uploading-container .uploading {
position: relative;
height: 170px;
margin: 15px auto 0;
background-color: #1f1f1f;
border-radius: 10px;
}
#space-theme .edit-container .uploading-container .upload-content {
position: absolute;
top: 50%;
left: 50%;
width: 46px;
height: 60px;
margin: -30px 0 0 -23px;
}
#space-theme .edit-container .uploading-container .loading-icon {
text-align: center;
}
#space-theme .edit-container .uploading-container .loading-icon.loading img {
animation: loadingRotate 1s linear infinite;
}
#space-theme .edit-container .uploading-container .loading-text {
margin-top: 10px;
font-size: 12px;
color: #6d757a;
text-align: center;
}
#space-theme .edit-container .upload-action {
margin-top: 5px;
text-align: center;
}
#space-theme .edit-container .upload-action .btn {
width: 90px;
height: 30px;
line-height: 30px;
margin-right: 20px;
color: #fff;
border-radius: 4px;
}
#space-theme .edit-container .upload-action .btn:last-of-type {
margin-right: 0;
}
#space-theme .edit-container .upload-action .btn.confirm-action.uploading-state {
color: #666;
border-color: #1f1f1f;
background-color: #1f1f1f;
}
#space-theme .edit-container .upload-action .btn.cancel-action {
color: #fff;
border-color: #fff;
}
#space-theme .edit-container .upload-action .btn.cancel-action:hover {
color: #00a1d6;
background: none;
border-color: #00a1d6;
}
@keyframes loadingRotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(1turn);
}
}
#space-theme .popup-register-vip {
position: fixed;
display: none;
left: 0;
top: 0;
z-index: 1987;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0,0,0,.7);
}
#space-theme .popup-register-vip .popup-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1988;
width: 350px;
height: 310px;
background-color: #fff;
box-shadow: 0 3px 26px rgba(0,0,0,.9);
border-radius: 4px;
}
#space-theme .popup-register-vip .popup-title {
line-height: 20px;
margin-top: 40px;
font-size: 14px;
color: #666;
text-align: center;
}
#space-theme .popup-register-vip .popup-title span {
color: #fd2828;
}
#space-theme .popup-register-vip .popup-content {
margin-top: 10px;
text-align: center;
}
#space-theme .popup-register-vip .popup-btn {
margin-top: 30px;
text-align: center;
}
#space-theme .popup-register-vip .popup-btn span {
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
font-size: 12px;
color: #fff;
background-color: #ff5b5b;
border-style: none;
border-radius: 5px;
text-align: center;
transition: all .2s ease;
}
#space-theme .popup-register-vip .popup-btn span:hover {
background-color: #ff7575;
}
#space-theme .popup-register-vip .popup-close-btn {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-image: url(./icons.png);
background-repeat: no-repeat;
background-position: -522px -267px;
}
#space-theme .toutu-detail {
background-repeat: no-repeat;
border: 3px solid #555;
border-radius: 12px;
opacity: 0;
transition: opacity .2s ease;
overflow: hidden;
position: absolute;
top: -3px;
left: -9999px;
width: 100%;
}
#space-theme .toutu-meta {
background: #333;
line-height: 1em;
margin-top: 93px;
padding: 10px;
position: relative;
}
#space-theme .toutu-title {
color: #fff;
margin-bottom: 10px;
}
#space-theme .toutu-price {
color: #ccd0d7;
}
#space-theme .toutu-action {
position: absolute;
bottom: 10px;
right: 10px;
}
#space-theme .toutu-btn {
border-radius: 4px;
display: inline-block;
text-align: center;
line-height: 24px;
margin-left: 7px;
width: 54px;
}
#space-theme .toutu-btn.vip {
background: #f66;
width: 90px;
}
#space-theme .toutu-btn.vip:hover {
background: #f88;
}
#space-theme .toutu-btn.buy {
border: 1px solid;
width: 52px;
line-height: 22px;
}
#space-theme .toutu-btn.buy:hover {
color: #ff85ad;
}
#space-theme .toutu-btn.use {
background: #00a1d6;
}
#space-theme .toutu-btn.use:hover {
background: #00b5e5;
}
#space-theme .theme-buy-layer.active {
opacity: 1;
left: 50%;
}
#space-theme .theme-buy-close {
position: absolute;
top: 5px;
right: 5px;
z-index: 9;
width: 30px;
height: 30px;
background-image: url(./icons.png);
cursor: pointer;
background-position: -336px -593px;
}
#space-theme .theme-buy-close:hover {
background-position: -400px -593px;
}
#space-theme .theme-buy-header {
background: #e5e9ef;
border-radius: 4px 4px 0 0;
position: relative;
}
#space-theme .theme-buy-preview {
border-radius: 4px;
display: block;
width: 128px;
height: 128px;
margin: 0 auto 20px;
top: -60px;
position: relative;
}
#space-theme .theme-buy-name {
color: #111;
font-size: 24px;
line-height: 1em;
margin: -60px auto 0;
padding-bottom: 20px;
text-align: center;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#space-theme .theme-buy-current-expire-time {
color: #6d757a;
line-height: 1em;
text-align: center;
margin-top: -5px;
padding-bottom: 15px;
}
#space-theme .theme-buy-body {
padding: 0 36px;
}
#space-theme .theme-buy-a {
color: #99a2aa;
font-size: 14px;
line-height: 1em;
margin: 25px 0 10px;
}
#space-theme .theme-buy-list {
margin-bottom: 25px;
width: 330px;
}
#space-theme .theme-buy-item {
border: 1px solid #ccd0d7;
border-radius: 4px;
color: #222;
cursor: pointer;
font-size: 14px;
float: left;
width: 65px;
margin-right: 10px;
line-height: 38px;
text-align: center;
}
#space-theme .theme-buy-item:hover {
border-color: #00a1d6;
color: #00a1d6;
}
#space-theme .theme-buy-item.active {
border-color: #00a1d6;
box-shadow: 0 0 0 1px #00a1d6;
color: #00a1d6;
}
#space-theme .theme-buy-item.active .theme-buy-custom-length {
color: #00a1d6;
}
#space-theme .theme-buy-item.custom {
color: #99a2aa;
}
#space-theme .theme-buy-price {
border-bottom: 1px solid #e5e9ef;
color: #6d757a;
font-size: 14px;
line-height: 1em;
text-align: center;
padding-bottom: 10px;
margin-bottom: 25px;
}
#space-theme .theme-buy-price var {
color: #00a1d6;
font-size: 18px;
font-weight: 700;
}
#space-theme .theme-buy-footer {
padding: 200px 0 30px;
text-align: center;
}
#space-theme .theme-buy-layer-btn {
border: 1px solid #ccd0d7;
width: 120px;
line-height: 34px;
vertical-align: middle;
margin: 0 5px;
}
#space-theme .theme-buy-vip {
background: #f66;
border-color: #f66;
color: #fff;
}
#space-theme .theme-buy-vip:hover {
background: #f88;
border-color: #f88;
color: #fff;
}
#space-theme .theme-buy-submit-btn {
display: inline-block;
border-radius: 3px;
transition: all .1s ease;
text-align: center;
border-color: #00a1d6;
color: #00a1d6;
}
#space-theme .theme-buy-submit-btn:hover {
border-color: #00b5e5;
color: #00b5e5;
}
#space-theme .hideit {
display: block;
}
#space-theme input.theme-buy-custom-length {
background: transparent;
box-shadow: none;
border: none;
color: #99a2aa;
cursor: pointer;
font-size: 14px;
line-height: 38px;
height: 38px;
transition: none;
padding: 0 12px;
width: 40px;
text-align: center;
}
#space-theme input.theme-buy-custom-length:focus {
border: none;
}
#space-theme #theme-buy-select-length .theme-buy-footer {
padding-top: 0;
}
#space-theme #theme-buy-success {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-success.png);
background-repeat: no-repeat;
background-position: center 140px;
}
#space-theme #theme-buy-success .theme-buy-body {
padding: 40px 55px 0;
}
#space-theme #theme-buy-fail {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-processing.png);
background-repeat: no-repeat;
background-position: center 160px;
}
#space-theme #theme-buy-fail .theme-buy-body {
padding: 40px 40px 0;
}
#space-theme .theme-buy-success-icon {
display: block;
float: left;
width: 50px;
height: 50px;
background-image: url(./icons.png);
background-position: -646px -1037px;
}
#space-theme #theme-buy-success-g {
position: absolute;
left: 105px;
top: 135px;
width: 160px;
height: 180px;
}
#space-theme .theme-buy-fail-icon {
display: block;
float: left;
width: 50px;
height: 50px;
margin-left: -10px;
background-image: url./icons.png);
background-position: -646px -909px;
}
#space-theme #theme-buy-fail .theme-buy-result-info,#space-theme #theme-buy-fail .theme-buy-result-title {
margin-left: 60px;
}
#space-theme .theme-buy-result-title {
color: #222;
font-size: 22px;
line-height: 1em;
margin: 0 0 15px 70px;
}
#space-theme .theme-buy-result-info {
color: #99a2aa;
font-size: 14px;
margin-left: 70px;
margin-bottom: 10px;
line-height: 1em;
white-space: nowrap;
}
#space-theme .theme-buy-g-name {
color: #00a1d6;
display: inline-block;
max-width: 8em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
#space-theme .theme-buy-rmb-hint {
color: #222;
font-size: 22px;
line-height: 24px;
margin-bottom: 15px;
}
#space-theme .theme-buy-rmb-secondary {
color: #99a2aa;
font-size: 14px;
}
@media (min-width:1420px) {
#space-theme .theme-panel .theme-list[name=toutu] {
padding-left: 0;
}
#space-theme .toutu-item {
width: 290px;
height: 90px;
margin-right: 20px;
}
#space-theme .toutu-item.upload-toutu {
width: 296px;
height: 96px;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-normal.png);
}
#space-theme .toutu-item.upload-toutu:hover {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-hover.png);
}
#space-theme .theme-ann {
margin-right: 13px;
}
#space-theme .theme-item {
margin-right: 36px;
}
}
.h-notice[data-v-12a8e8b3] {
height: 42px;
padding: 0 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.h-notice a[data-v-12a8e8b3] {
display: inline-block;
height: 100%;
max-width: 1226px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
letter-spacing: 0;
line-height: 42px;
cursor: auto;
}
.h-notice a.linkType[data-v-12a8e8b3] {
cursor: pointer;
}
.h-notice .icon-notice[data-v-12a8e8b3] {
width: 14px;
height: 14px;
margin-right: 8px;
}
.medal-box {
position: relative;
vertical-align: middle;
margin-left: 3px;
height: 16px;
line-height: 10px;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 8px;
color: #f25d8e;
border-radius: 1px;
}
.medal-box .medal-flag {
position: absolute;
transform: translate(-50%,-1px);
width: 18px;
height: 18px;
}
.medal-box .medal-level,.medal-box .medal-true-love {
border: .5px solid #f25d8e;
text-align: center;
box-sizing: content-box;
}
.medal-box .medal-level .tiny,.medal-box .medal-true-love .tiny {
transform: scale(.5);
width: 200%;
height: 200%;
font-weight: 400;
transform-origin: left 30%;
font-size: 20px;
}
.medal-box .medal-true-love {
border-right-width: 0;
border-bottom-left-radius: 1px;
border-top-left-radius: 1px;
padding-left: 2px;
padding-right: 2px;
white-space: nowrap;
}
.medal-box .medal-level {
border-left: .5px solid #f25d8e;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
width: 18px;
background: #fff;
}
.h {
position: relative;
z-index: 10;
}
.h .h-forbid {
height: 42px;
margin-bottom: 10px;
background-color: #e5e9ef;
border-radius: 4px;
}
.h .h-forbid .f-wrap {
width: 203px;
margin: 0 auto;
}
.h .h-forbid .f-wrap .f-icon {
background-image: url(/./icons.png);
background-position: -664px -458px;
display: inline-block;
width: 80px;
height: 42px;
margin-right: 20px;
}
.h .h-forbid .f-wrap .f-txt {
font-size: 14px;
color: #222;
line-height: 42px;
display: inline-block;
vertical-align: top;
}
.h .h-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAEElEQVR4AWP48vU7MqKUDwA7qkfh9iF73wAAAABJRU5ErkJggg==);
background-position: 50%;
background-size: img;
transition: background-image .2s ease,background-size 1s ease;
padding-top: 116px;
position: relative;
}
.h .avatar-icon {
display: block;
position: absolute;
right: 0;
top: 44px;
width: 20px;
height: 20px;
z-index: 9;
}
.h .h-user {
position: relative;
z-index: 1;
}
.h .gender {
display: none;
width: 21px;
height: 18px;
margin-right: 5px;
vertical-align: middle;
background-position: -212px -922px;
}
.h .gender.male {
display: inline-block;
background-position: -212px -472px;
}
.h .gender.female {
display: inline-block;
background-position: -211px -404px;
}
.h .m-level {
display: inline-block;
width: 25px;
height: 14px;
margin-right: 5px;
}
.h .m-level.senior {
width: 35px;
height: 14px;
}
.h .m-level svg {
width: 100%;
height: 100%;
}
.h .h-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 84px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAABdCAMAAADNEjtLAAABEVBMVEUDAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAACnjvHuAAAAW3RSTlMBAgMEBQYHCAkKCwwNDxAREhQVFhgZGxweHyEiJCUnKSosLS8xMjQ2ODk7PT5AQkNFR0hKTE5PUVNUVldZW1xeX2FiZGVnaGprbG5vcHFzdHV2d3h5ent8fX5/XoZ4lgAAAPVJREFUeAHt1AERADAQAiDdrX/mDyKEIAAAjGkDsOk3AAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECAgQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBAQIIEAAAQIseAEYdZ9sAcJDX4ICAAAAAElFTkSuQmCC);
background-repeat: repeat-x;
}
.h .h-fans-icon {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.h .h-fans-icon:hover .fans-hover-tip {
display: block;
}
.h .h-fans-icon .fans-hover-tip {
position: absolute;
display: none;
top: -29px;
left: 5px;
width: 138px;
padding: 0 12px;
font-size: 12px;
color: #ff85ad;
background: #fff;
border: 1px solid #ff85ad;
border-radius: 4px;
box-sizing: border-box;
}
.h .h-fans-icon .fans-hover-tip:after {
content: "";
position: absolute;
bottom: -5px;
left: 5px;
width: 7px;
height: 7px;
border: 1px solid #ff85ad;
border-top: none;
border-left: none;
transform: rotate(45deg);
background-color: #fff;
}
.h .h-fans-icon .fans-hover-tip .tip-inner {
font-size: 12px;
color: #505050;
line-height: 12px;
}
.h .h-fans-icon .h-fans-text {
display: block;
width: 20px;
height: 16px;
line-height: 14px;
font-size: 12px;
color: #ff85ad;
background: #fff;
border: 1px solid #ff85ad;
border-radius: 4px;
box-sizing: border-box;
}
.h .avatar-img {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background: rgba(0,0,0,.6);
font-size: 12px;
color: #fff;
line-height: 60px;
text-align: center;
opacity: 0;
border-radius: 50%;
transition: opacity .2s;
}
.h .bili-avatar-icon,.h .bili-avatar-nft-icon {
z-index: 1;
}
.h .nft-avatar-img {
width: 68px;
height: 68px;
line-height: 68px;
}
.h .bili-avatar-img {
border: 2px solid hsla(0,0%,100%,.4);
}
.h .avatar-container:hover .avatar-img {
opacity: 1;
}
.h .avatar-container {
position: relative;
}
.h .h-info {
margin-left: 20px;
padding-bottom: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.h .h-basic {
color: #fff;
font-size: 0;
margin-left: 22px;
}
.h .h-basic .h-basic-spacing {
margin-top: 6px;
}
.h .h-basic .h-basic-spacing.is-honor {
margin: 3px 0;
}
.h .h-basic .honor {
overflow: hidden;
width: 735px;
height: 16px;
}
.h .h-basic .honor .honor-item {
float: left;
font-size: 12px;
color: #fff;
line-height: 14px;
font-weight: 400;
padding: 1px 5px;
background: hsla(0,0%,100%,.2);
box-shadow: inset 0 0 0 0 hsla(0,0%,100%,.5);
border-radius: 4px;
margin-right: 10px;
cursor: default;
}
.h .h-basic .honor .cursor {
cursor: pointer;
}
.h #h-name {
display: inline-block;
margin-right: 5px;
font-weight: 700;
line-height: 18px;
font-size: 18px;
vertical-align: middle;
}
.h #h-ceritification {
background-position: -217px -792px;
display: none;
width: 11px;
height: 18px;
margin: 0 1px 0 6px;
vertical-align: middle;
}
.h .h-sign {
background: transparent;
border-radius: 4px;
border: none;
box-shadow: none;
color: hsla(0,0%,100%,.8);
font-size: 12px;
font-family: Microsoft Yahei;
line-height: 26px;
height: 26px;
margin-left: -5px;
padding: 0 5px;
position: relative;
top: -1px;
width: 730px;
font-weight: 400;
}
.h .h-f-btn {
background: rgba(0,0,0,.45);
box-shadow: 0 0 0 2px hsla(0,0%,100%,.3);
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
float: left;
text-align: center;
margin: 0 20px 17px 0;
width: 76px;
line-height: 30px;
}
.h .h-f-btn:hover {
background: rgba(0,0,0,.5);
}
.h .h-f-btn .icon-arrow {
margin-left: 4px;
background-position: -1369px -214px;
}
.h .h-f-btn.special {
width: 100px;
}
.h .h-f-btn .video-commonmenu {
vertical-align: middle;
margin-right: 2px;
}
.h .h-follow {
background: #f25d8e;
box-shadow: 0 0 0 2px #fff;
color: #fff;
}
.h .h-follow:hover {
background: #ff85ad;
}
.h .h-message:hover {
color: #fff;
}
.h .h-vipType {
display: inline-block;
height: 16px;
line-height: 16px;
border-radius: 4px;
font-size: 12px;
color: #fff;
padding: 0 5px;
background-color: #f45a8d;
vertical-align: middle;
margin-right: 5px;
cursor: pointer;
}
.h .h-vipType.disable {
background-color: #ccd0d7;
color: #99a2aa;
}
.h .h-guest-hint {
background: rgba(0,161,214,.9);
color: #fff;
font-size: 12px;
line-height: 40px;
text-align: center;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
.h .h-version {
position: absolute;
top: 15px;
right: 57px;
}
.h .h-v-btn {
background: rgba(0,0,0,.45);
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 12px;
line-height: 30px;
transition: all .1s ease;
padding: 0 10px;
}
.h .h-v-btn:hover {
background: rgba(0,0,0,.5);
}
.h .h-v-icon {
background-position: -1111px -407px;
width: 14px;
height: 14px;
}
.h .h-role-icon {
margin-left: 5px;
}
.h .h-action {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.h body[role="2"] .h-follow {
display: none;
}
.h .h-v-host,.h body[role="2"] .h-unfollow {
display: inline-block;
}
.h .h-v-host {
background: #fff;
border-radius: 4px;
color: #222;
cursor: pointer;
line-height: 20px;
margin-left: 22px;
width: 56px;
transition: background .2s ease;
}
.h .h-v-host:hover {
color: #00a1d6;
}
.h #h-sign {
background: transparent;
border-radius: 4px;
border: none;
box-shadow: none;
color: hsla(0,0%,100%,.8);
font-size: 12px;
font-family: Microsoft Yahei;
line-height: 26px;
height: 26px;
margin-left: -5px;
padding: 0 5px;
position: relative;
top: -1px;
width: 730px;
}
.h #h-sign:hover {
background: hsla(0,0%,100%,.2);
box-shadow: 0 0 0 1px hsla(0,0%,100%,.5);
}
.h #h-sign:focus {
background: #fff;
box-shadow: inset 0 2px 4px rgba(35,54,86,.3);
color: #6d757a;
}
.h #h-sign::-webkit-input-placeholder {
color: #d6dee4;
}
.h #h-sign:-moz-placeholder,.h #h-sign::-moz-placeholder {
color: #d6dee4;
}
.h #h-sign:-ms-input-placeholder {
color: #d6dee4;
}
.h .space-theme-trigger {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-trigger-new.png);
background-position: 0 0;
border-radius: 0 4px 0 0;
cursor: pointer;
width: 58px;
height: 49px;
transition: opacity .2s ease;
position: absolute;
top: 0;
right: 0;
}
.h .space-theme-trigger .btn {
color: #fff;
}
.h .h:hover .space-theme-trigger {
opacity: 1;
}
.h .h-add-to-black {
float: left;
height: 30px;
}
.h .h-add-to-black .be-dropdown-trigger {
width: 30px;
height: 30px;
}
.h .h-add-to-black .icon-ic_more {
color: #fff;
font-size: 30px;
line-height: 30px;
}
.h .modal-wrapper .modal-body {
padding: 30px 40px!important;
}
.h .space-report-popup .modal-wrapper {
width: 548px;
}
.h .space-report-popup .modal-wrapper .modal-header .icon-ic_close {
right: 28px;
}
.h .space-report-popup .modal-wrapper .modal-header .modal-title {
font-weight: 500;
font-size: 18px;
}
.h .space-report-popup .modal-wrapper .modal-body {
border-bottom: 1px solid #e3e5e7;
padding-top: 20px!important;
padding-bottom: 20px!important;
padding-left: 24px!important;
}
.h .space-report-popup .modal-wrapper .modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 12px 0;
}
.h .space-report-popup .modal-wrapper .modal-footer .btn {
margin-right: 8px;
}
.h .space-report-popup .modal-wrapper .modal-footer .btn.primary {
-ms-flex-order: 1;
order: 1;
margin-right: 24px;
}
.h .report-popup-tip {
line-height: 18px;
font-size: 16px;
color: #18191c;
text-align: left;
}
.h .report-popup-list {
margin-top: 18px;
font-size: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.h .report-popup-item {
float: left;
width: 90px;
line-height: 20px;
margin-bottom: 15px;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.h .report-popup-item.checked .report-popup-item-checkbox {
background: #00a1d6;
border-color: #00a1d6;
}
.h .report-popup-item.checked .report-popup-item-checkbox:before {
content: "";
display: block;
position: absolute;
top: 6px;
left: 3px;
width: 0;
height: 5px;
border-left: 2px solid #fff;
transform: rotate(-45deg);
}
.h .report-popup-item.checked .report-popup-item-checkbox:after {
content: "";
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 0;
height: 11px;
border-left: 2px solid #fff;
transform: rotate(45deg);
}
.h .report-popup-item-checkbox {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
border: 1px solid #bec3cc;
border-radius: 2px;
}
.h .report-popup-item-text {
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #222;
vertical-align: middle;
}
.h .space-fans-medal {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
.h .space-fans-medal .normal-medal {
height: 16px;
display: -ms-flexbox;
display: flex;
cursor: pointer;
}
.h .space-fans-medal .normal-medal .normal-left {
width: 16px;
height: 100%;
background: #e5e9ef;
border: 1px dashed #99a2aa;
box-sizing: border-box;
border-radius: 1px;
position: relative;
}
.h .space-fans-medal .normal-medal .normal-left i {
display: block;
background: #99a2aa;
border-radius: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.h .space-fans-medal .normal-medal .normal-left i:first-child {
width: 8px;
height: 1px;
}
.h .space-fans-medal .normal-medal .normal-left i:last-child {
width: 1px;
height: 8px;
}
.h .space-fans-medal .normal-medal .normal-right {
width: 48px;
height: 100%;
position: relative;
background: #000;
opacity: .7;
border-radius: 1px;
}
.h .space-fans-medal .normal-medal .normal-right p {
width: 200%;
height: 200%;
font-size: 20px;
transform: scale(.5);
transform-origin: top left;
line-height: 32px;
color: #fff;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.h .space-fans-medal .fans-medal {
display: -ms-flexbox;
display: flex;
cursor: pointer;
}
.van-dialog.fans-medal-dialog {
border-radius: 10px;
}
.van-dialog.fans-medal-dialog i {
position: absolute;
text-decoration: none;
top: 13px;
right: 12px;
width: 20px;
height: 20px;
line-height: 20px;
cursor: pointer;
font-size: 16px;
text-align: center;
}
.van-dialog.fans-medal-dialog .van-dialog__header .van-dialog__title {
color: #00a1d6;
}
.van-dialog.fans-medal-dialog .van-dialog__body {
padding: 0;
}
.space-user-avatar {
width: 60px;
min-width: 60px;
}
.space-user-avatar .avatar-wrap {
position: relative;
width: 100%;
height: 60px;
}
.space-user-avatar .avatar-wrap.live-ani .a-cycle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
border: 1px solid #f69;
border-radius: 50%;
z-index: 1;
opacity: 0;
animation: scaleUpCircle 1.5s linear;
animation-iteration-count: infinite;
}
@keyframes scaleUpCircle {
0% {
transform: translate(-50%,-50%) scale(1);
opacity: 1;
}
to {
transform: translate(-50%,-50%) scale(1.5);
opacity: 0;
}
}
.space-user-avatar .avatar-wrap.live-ani .a-cycle-1 {
animation-delay: 0;
}
.space-user-avatar .avatar-wrap.live-ani .a-cycle-2 {
animation-delay: .5s;
}
.space-user-avatar .avatar-wrap.live-ani .a-cycle-3 {
animation-delay: 1s;
}
.space-user-avatar .live-tab {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%,50%);
height: 15px;
white-space: nowrap;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
background: #f69;
color: #fff;
border-radius: 8px;
border: 1.5px solid #fff;
padding: 2px 3px;
font-size: 12px;
z-index: 2;
}
.space-user-avatar .live-tab .live-gif {
width: 15px;
margin-right: 5px;
}
.n {
margin-bottom: 10px;
}
.n .n-tab-links .iconfont {
display: inline-block;
width: 20px;
font-size: 20px;
margin-right: 4px;
vertical-align: middle;
}
.n .n-tab-links .icon-ic_home {
color: #00c091;
}
.n .n-tab-links .icon-ic_following {
color: #fb7299;
}
.n .n-tab-links .icon-ic_video {
color: #02b5da;
}
.n .n-tab-links .icon-ic_article {
color: #3bd3d3;
}
.n .n-tab-links .icon-ic_playlist {
color: #9d8ce5;
}
.n .n-tab-links .icon-ic_channel {
color: #23c9ed;
}
.n .n-tab-links .icon-ic_collect {
color: #f3a034;
}
.n .n-tab-links .icon-ic_sub {
color: #ff5d47;
}
.n .n-tab-links .icon-ic_setting {
color: #23c9ed;
}
.n .n-tab-links .icon-ic_class1 {
color: #0ba395;
}
.n .new-channel-tip {
position: absolute;
top: -23px;
left: 180px;
bottom: 15px;
height: 32px;
background: #fb7299;
border-radius: 4px;
z-index: 11;
padding: 0 10px 0 16px;
box-sizing: border-box;
}
.n .new-channel-tip .little_tv {
position: absolute;
top: -9px;
left: -18px;
display: inline-block;
width: 37px;
height: 43px;
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/little_tv_pop.png);
background-size: img;
}
.n .new-channel-tip .tip-text {
display: inline-block;
color: #fff;
font-size: 13px;
line-height: 32px;
text-align: center;
font-family: PingFang SC;
font-weight: 400;
}
.n .new-channel-tip .tip_close {
color: #fff;
font-size: 10px;
line-height: 10px;
font-weight: 600;
cursor: pointer;
display: inline-block;
vertical-align: baseline;
width: 10px;
margin-left: 6px;
}
.n .new-channel-tip:after {
content: "";
display: block;
position: absolute;
top: 32px;
left: 75px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fb7299;
}
.n .n-inner {
height: 66px;
background: #fff;
box-shadow: 0 0 0 1px #eee;
border-radius: 0 0 4px 4px;
padding: 0 20px;
font-size: 0;
}
.n .n-cursor {
background: #00a1d6;
width: 0;
height: 3px;
transition: all .2s ease;
position: absolute;
bottom: -1px;
left: 0;
}
.n .n-btn {
display: inline-block;
font-size: 0;
line-height: 66px;
margin-right: 16px;
position: relative;
}
.n .n-btn.active {
color: #00a1d6;
}
.n .n-tab-links {
display: inline-block;
font-size: 0;
vertical-align: middle;
}
.n .n-text {
font-size: 13px;
}
.n .n-num,.n .n-text {
vertical-align: middle;
}
.n .n-num {
margin-left: 2px;
font-size: 12px;
color: #99a2aa;
font-family: Arial;
}
.n .n-statistics {
float: right;
height: 66px;
}
.n .n-data {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
float: left;
width: 58px;
height: 66px;
padding: 10px 0;
text-align: center;
box-sizing: border-box;
}
.n .n-data.router-link-active .n-data-k,.n .n-data.router-link-active .n-data-v {
color: #00a1d6;
}
.n .n-data .n-data-k {
line-height: 14px;
font-size: 12px;
color: #99a2aa;
}
.n .n-data .n-data-v {
line-height: 16px;
margin-top: 5px;
color: #222;
font-size: 12px;
}
.n .n-fs:hover p,.n .n-gz:hover p {
color: #00a1d6!important;
}
@media (min-width:1420px) {
.n .n-btn {
margin-right: 31px;
}
.n .new-channel-tip {
left: 230px;
}
}
.n-fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 111;
transform: translateY(-70px);
transition: transform .3s ease;
}
.n-fix .n-inner {
padding-left: 20px;
border-radius: 0;
}
.n-fix.fixed {
transform: translateY(0);
}
.n-fix .n-avatar {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
border-radius: 50%;
overflow: hidden;
}
.n-fix .n-avatar img {
display: block;
width: 24px;
}
.n-fix .n-text {
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width:1420px) {
.n-fix .n-btn {
margin-right: 31px;
}
}
.to-top {
position: fixed;
display: none;
bottom: 100px;
right: 20px;
transform: translateY(0);
width: 62px;
height: 85px;
margin-left: 602px;
cursor: pointer;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/space-to-top.png);
background-position: -40px -44px;
}
.to-top.transition {
transition: transform .3s ease-in;
}
.to-top.fly {
transform: translateY(-1000px);
}
@media (min-width:1420px) {
.to-top {
margin-left: 712px;
}
}
.fav-share {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.65);
z-index: 2001;
}
.fav-share .share-iframe {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: border-box;
margin-bottom: 50px;
}
#page-404[data-v-12b2bced] {
width: 980px;
min-height: 1200px;
margin: 30px auto;
background: #fff;
border-radius: 10px;
}
#page-404 .p404[data-v-12b2bced] {
margin: 0 auto;
width: 200px;
padding-top: 30px;
text-align: center;
}
#page-404 .p404 .error[data-v-12b2bced] {
margin: 0 auto;
color: #666;
}
#page-404 .p404 .code[data-v-12b2bced] {
width: 100px;
margin-top: 30px;
}
#page-404 .p404 .message[data-v-12b2bced] {
width: 150px;
}
#page-404 .back-btn[data-v-12b2bced] {
display: block;
line-height: 40px;
text-align: center;
background: #00a1d6;
color: #fff;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
padding: 0 20px;
width: 80px;
margin: 20px auto 0;
}
.fade-enter-active,.fade-leave-active {
transition: opacity .3s;
}
.fade-enter,.fade-leave-to {
opacity: 0;
}
.zoom-enter-active,.zoom-leave-active {
transition: transform .3s,opacity .3s;
}
.zoom-enter,.zoom-leave-to {
transform: scaleY(0);
opacity: 0;
}
.flip-list-move {
transition: transform 1s;
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
word-break: break-word;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
em,i {
font-style: normal;
}
ol,ul {
list-style: none;
}
b {
font-weight: 700;
}
blockquote,q {
quotes: none;
}
blockquote:after,blockquote:before,q:after,q:before {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
background: #f4f5f7;
}
body,html {
height: 100%;
}
body {
color: #222;
font-size: 12px;
line-height: 1.7em;
margin: 0;
overflow-y: scroll;
}
body,input,textarea {
font-family: Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}
input,textarea {
outline: none;
}
a {
color: inherit;
text-decoration: none;
transition: color .2s ease,background-color .2s ease;
}
a[href="javascript: 0"] {
cursor: default;
}
a:hover {
color: #00a1d6;
}
.flex-c-s {
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-c-l,.flex-c-s {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.flex-c-l {
-ms-flex-pack: start;
justify-content: flex-start;
}
.wrapper {
width: 1101px;
margin: 0 auto;
position: relative;
}
#browser-version-tip {
position: absolute;
top: 42px;
left: 0;
z-index: 100;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #e40c0c;
text-align: center;
font-size: 14px;
color: #fff;
}
#browser-version-tip a {
margin: 0 2px;
text-decoration: underline;
color: #07f;
}
#browser-version-tip #close-browser-tip {
position: absolute;
right: 0;
top: 10px;
margin-left: 15px;
width: 20px;
height: 20px;
background-position: -1368px -278px;
vertical-align: middle;
}
#browser-version-tip #close-browser-tip,.icon {
display: inline-block;
background-image: url(./icons.png);
}
.s-body {
padding-bottom: 30px;
}
.s-body.loading {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
background-position: 50%;
background-repeat: no-repeat;
height: 200px;
}
.z_top .z_header {
width: 1100px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
}
.space_input {
line-height: 28px;
height: 28px;
padding: 0 10px;
transition: all .3s ease;
vertical-align: top;
border: 1px solid #ccd0d7;
border-radius: 0;
}
.space_input:focus {
border-color: #00a1d6;
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
::-webkit-input-placeholder {
color: #99a2aa;
}
::-moz-placeholder {
color: #99a2aa;
}
:-ms-input-placeholder {
color: #99a2aa;
}
:-moz-placeholder {
color: #99a2aa;
}
input::-ms-clear {
display: none;
}
.clearfix {
display: block;
}
.col-full {
background: #fff;
box-shadow: 0 0 0 1px #eee;
border-radius: 4px;
padding: 20px;
}
.col-full .section.empty,.col-full .section.private {
width: 100%!important;
}
.col-full .section.empty:after,.col-full .section.private:after {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
background-position: 50%;
background-repeat: no-repeat;
border-radius: 4px;
color: #6d757a;
content: "\6570\636E\4E3A\7A7A";
display: block;
font-size: 14px;
height: 450px;
overflow: hidden;
line-height: 640px;
text-align: center;
}
.section {
border-bottom: 1px solid #eee;
margin-bottom: 17px;
position: relative;
}
.section.empty .content,.section.empty .count,.section.empty .more,.section.empty .style,.section.loading .quantity,.section.loading .style {
display: none;
}
.section.loading .content {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
background-position: 50%;
background-repeat: no-repeat;
text-indent: -9999px;
height: 270px;
}
.section.loading .content * {
display: none;
}
.section.empty .content,.section.loading .content,.section.private .content {
width: 100%;
}
.section .count {
background: #f6fafb;
border: 1px solid #ddd;
border-radius: 3px;
color: #777;
display: inline-block;
font-size: 12px;
line-height: 18px;
height: 18px;
margin-left: 11px;
padding: 0 5px;
position: relative;
vertical-align: middle;
}
.section .count:before {
background-position: -215px -340px;
content: "";
display: block;
left: -7px;
top: -3px;
height: 22px;
width: 10px;
}
.section .count:before,.section .more {
background-image: url(./icons.png);
position: absolute;
}
.section .more {
background-position: -310px -405px;
border: 1px solid #b8c0cc;
border-radius: 4px;
color: #6d757a;
font-size: 12px;
line-height: 22px;
transition: border .2s ease;
padding: 0 19px 0 10px;
top: 6px;
right: 0;
}
.section .more:hover {
background-position: -438px -405px;
border-color: #00a1d6;
color: #00a1d6;
}
.section .operation {
display: inline-block;
background-image: url(./icons.png);
border: 1px solid #b8c0cc;
border-radius: 4px;
color: #6d757a;
font-size: 12px;
line-height: 22px;
transition: border .2s ease;
padding: 0 19px 0 10px;
}
.section .operation:hover {
border-color: #00a1d6;
color: #00a1d6;
}
.section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.section.empty.video:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\89C6\9891\54E6~~";
}
.section.empty.video.host:after {
display: none;
}
.section.empty.audio:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\53D1\5E03\8FC7\97F3\9891\54E6~~";
}
.section.empty.bangumi:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\8BA2\9605\8FC7\756A\5267~~";
}
.section.empty.subs:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\8FC7\6807\7B7E~~";
}
.section.empty.article:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\4E13\680F\54E6~~";
}
.section.empty.coin:after {
content: "\7A7A\95F4\4E3B\4EBA\6700\8FD1\4E00\4E2A\6708\6CA1\6709\6295\8FC7\786C\5E01~~";
}
.section.empty.follow:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";
}
.section.empty.fans:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\7C89\4E1D\54E6~~";
}
.section.empty.fans[page=follow]:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";
}
.section.empty.fans[page=knight]:after {
content: "\76EE\524D\4E3A\6B62\8FD8\6CA1\6709\4EFB\547D\4F60\7684\9A91\58EB\54E6~~";
}
.section.empty.qz:after {
content: "\7A7A\95F4\4E3B\4EBA\6CA1\6709\52A0\5165\4EFB\4F55\5708\5B50~~";
}
.section.empty.fav:after {
content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6536\85CF\89C6\9891~~";
}
.section.empty.album:after {
content: "\8FD8\6CA1\6709\4E0A\4F20\76F8\7C3F\54E6~";
}
.section-title {
color: #000;
font-size: 20px;
font-weight: 400;
line-height: 33px;
padding: 0 0 15px;
position: relative;
}
.section-title .t {
display: inline-block;
vertical-align: middle;
}
.section-title .icon {
width: 33px;
height: 33px;
vertical-align: middle;
margin-right: 10px;
}
.sec-empty-hint {
color: #99a2aa;
font-size: 12px;
position: absolute;
top: 0;
left: 300px;
}
.sec-empty-hint a {
color: #00a1d6;
margin-left: 10px;
}
.sec-empty-hint a:hover {
color: #f25d8e;
}
.mini-item {
display: block;
float: left;
margin-bottom: 25px;
width: 25%;
}
.mini-item .img {
display: block;
float: left;
width: 40px;
height: 40px;
}
.mini-item .img img {
border-radius: 4px;
box-shadow: 0 0 0 1px #e5e9ef;
display: block;
width: 40px;
height: 40px;
}
.mini-item .detail {
font-size: 14px;
margin-left: 50px;
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.small-item {
display: block;
float: left;
width: 160px;
position: relative;
margin: 0 0 3px;
padding: 10px;
}
.small-item.disabled .title {
color: #222;
}
.small-item.disabled .img img {
-webkit-filter: blur(2px);
}
.small-item.disabled .disabled-img {
display: block;
}
.small-item.disabled .img:hover .i-watchlater {
display: none;
}
.small-item.new .new-icon {
position: absolute;
top: 4px;
right: 4px;
display: inline-block;
padding: 0 4px;
font-size: 10px;
color: #fff;
text-align: center;
line-height: 14px;
border-radius: 2px;
margin-left: 4px;
background-color: #42a0c4;
}
.small-item.new .isPay {
right: 48px;
}
.small-item.watched .title {
color: #999;
}
.small-item .img {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
background-size: img;
border-radius: 4px;
display: block;
width: 160px;
height: 100px;
overflow: hidden;
position: relative;
}
.small-item .img:hover .i-watchlater {
display: block;
}
.small-item .img:hover .length {
display: none;
}
.small-item img {
border-radius: 4px;
display: block;
width: 160px;
height: 100px;
}
.small-item .title {
display: block;
line-height: 20px;
height: 38px;
margin-top: 6px;
overflow: hidden;
}
.small-item .length {
background: #111;
background: rgba(0,0,0,.5);
border-radius: 5px 0 0 0;
color: #fff;
line-height: 20px;
transition: top .2s ease;
padding: 0 6px;
position: absolute;
right: 0;
bottom: 0;
}
.small-item .meta {
color: #999;
white-space: nowrap;
font-size: 0;
margin-top: 6px;
height: 14px;
line-height: 14px;
}
.small-item .meta .iconfont {
font-size: 14px;
}
.small-item .meta.pubdate {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}
.small-item .meta>span {
display: inline-block;
white-space: nowrap;
height: 14px;
line-height: 14px;
font-size: 12px;
overflow: hidden;
}
.small-item .meta>span:first-child {
width: 72px;
}
.small-item .meta>span .icon {
width: 16px;
height: 14px;
vertical-align: sub;
}
.small-item .play .icon {
background-position: -280px -25px;
}
.small-item .comments .icon {
background-position: -280px -154px;
}
.small-item .time .icon {
background-position: -280px -474px;
}
.small-item .view .icon {
background-position: -1112px -858px;
}
.small-item .comment .icon {
background-position: -277px -283px;
}
.small-item .pin,.small-item .unpin {
cursor: pointer;
float: right;
display: none;
}
.small-item .pin:hover,.small-item .unpin:hover {
text-decoration: underline;
}
.small-item .pin {
color: #00a1d6;
}
.small-item .unpin {
color: #e40c0c;
}
.small-item:hover .pin {
display: block;
}
.small-item.pinned:hover .pin {
display: none;
}
.small-item.pinned:hover .unpin {
display: block;
}
.large-item {
display: block;
float: left;
width: 340px;
margin: 0 20px 30px 0;
}
.large-item .img {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);
background-position: 50%;
background-size: img;
display: block;
float: left;
width: 110px;
}
.large-item .img img {
border-radius: 4px;
box-shadow: 0 0 0 1px #e5e9ef;
display: block;
width: 110px;
height: 144px;
}
.large-item .detail {
margin-left: 130px;
padding-right: 20px;
max-height: 140px;
overflow: hidden;
}
.large-item .title {
display: block;
font-size: 18px;
max-height: 48px;
line-height: 24px;
margin: -3px 0 10px;
color: #222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.large-item .title:hover {
color: #00a1d6;
}
.large-item .end {
background-position: -212px -22px;
width: 20px;
height: 20px;
vertical-align: top;
position: relative;
top: 2px;
}
.large-item .desc {
max-height: 60px;
overflow: hidden;
}
.large-item .faved {
background: #83b7db;
border-radius: 4px;
color: #fff;
line-height: 20px;
padding: 0 8px;
margin-top: 4px;
}
.list-item {
border-bottom: 1px solid #eee;
display: block;
padding: 20px 0;
position: relative;
line-height: 1;
}
.list-item:last-child {
border-bottom: none;
}
.list-item.disabled .title {
color: #ccd0d7;
}
.list-item.disabled .img img {
-webkit-filter: blur(2px);
}
.list-item.disabled .disabled-img {
display: block;
}
.list-item.disabled .img:hover .length {
top: 100px;
}
.list-item.disabled .img:hover .i-watchlater {
display: none;
}
.list-item.new .new-icon {
position: absolute;
top: 4px;
right: 4px;
display: inline-block;
padding: 0 4px;
font-size: 10px;
color: #fff;
text-align: center;
line-height: 14px;
border-radius: 2px;
margin-left: 4px;
background-color: #42a0c4;
}
.list-item.new .isPay {
right: 48px;
}
.list-item.watched .title {
color: #999;
}
.list-item:hover .title-row .pin {
display: inline-block;
}
.list-item.pinned:hover .title-row .pin {
display: none;
}
.list-item.pinned:hover .title-row .unpin {
display: inline-block;
}
.list-item .img {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
background-size: img;
border-radius: 4px;
display: block;
float: left;
overflow: hidden;
position: relative;
}
.list-item .img img {
box-shadow: 0 0 0 1px #edf2f9;
border-radius: 4px;
display: block;
}
.list-item .img:hover .i-watchlater {
display: block;
}
.list-item .c {
margin-left: 180px;
}
.list-item .title-row .pin,.list-item .title-row .unpin {
cursor: pointer;
display: none;
margin-left: 15px;
}
.list-item .title-row .pin {
color: #00a1d6;
}
.list-item .title-row .unpin {
color: #e40c0c;
}
.list-item .title {
font-size: 18px;
height: 20px;
margin-bottom: 10px;
display: inline-block;
max-width: 680px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-item .desc {
color: #777;
line-height: 20px;
overflow: hidden;
}
.list-item .meta {
color: #aaa;
}
.list-item .meta>span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-item .meta .icon {
width: 12px;
height: 13px;
margin-right: 5px;
position: relative;
top: 2px;
vertical-align: baseline;
}
.list-item .play .icon {
background-position: -280px -25px;
}
.list-item .comments .icon {
background-position: -280px -154px;
}
.list-item .up .icon {
background-position: -280px -410px;
}
.list-item .time .icon {
background-position: -280px -474px;
}
.bb-comment .list-item {
border: 0;
padding: 0;
line-height: normal;
}
.img.disabled:hover .meta-mask {
opacity: 0;
}
.img.disabled:hover .length {
opacity: 1;
}
.img.disabled .length,.img.disabled .new-icon {
display: none;
}
.img.disabled .disabled-img p {
transition: margin .2s linear;
}
.img.disabled .disabled-img.animate p {
margin-top: 10px;
}
.tabs {
margin-bottom: 24px;
}
.tabs a {
font-size: 16px;
line-height: 24px;
}
.tabs a:after {
color: #ddd;
content: "|";
margin: 0 15px;
}
.tabs a:last-child:after {
display: none;
}
.tabs a.active {
color: #00a1d6;
font-size: 20px;
}
.tabs a.disabled,.tabs a.last-item:after {
display: none;
}
.sub-tabs {
margin-bottom: 20px;
position: relative;
}
.sub-tabs span {
font-family: MicrosoftYaHei;
font-size: 20px;
color: #222;
line-height: 26px;
margin-right: 20px;
}
.sub-tabs a {
display: inline-block;
font-size: 12px;
line-height: 20px;
vertical-align: top;
margin-right: 24px;
position: relative;
}
.sub-tabs a.active {
color: #00a1d6;
border-bottom: 1px solid #00a1d6;
}
.sub-tabs a.active:before {
content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -3px;
bottom: 0;
width: 0;
height: 0;
border-bottom: 3px solid #00a1d6;
border-top: 0;
border-left: 3px dashed transparent;
border-right: 3px dashed transparent;
}
.sub-tabs a.disabled {
display: none;
}
.sub-tabs .filter-content {
font-size: 14px;
color: #212121;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
}
.sub-tabs .filter-content .cur-filter {
font-size: 14px;
}
.sub-tabs .filter-content .cur-filter:hover {
color: #00a1d6;
}
.sub-tabs .filter-content .cur-filter i {
margin-left: 4px;
}
.private-hint {
display: inline-block;
color: #6d757a;
cursor: default;
font-size: 12px;
vertical-align: middle;
}
.private-hint .icon {
background-position: -203px -724px;
margin: 0 0 0 15px;
}
.tag-list {
padding: 10px 0;
}
.tag-list a {
color: #6a7277;
cursor: default;
display: inline-block;
line-height: 20px;
margin: 0 10px 0 0;
white-space: nowrap;
padding: 0 15px 0 0;
}
.tag-list a:hover {
color: inherit;
}
.tag-list .tag-icon {
background-position: -280px -537px;
width: 14px;
height: 18px;
vertical-align: middle;
margin-right: 5px;
}
.not-allow {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/2233.png) 50% no-repeat;
width: 340px;
height: 280px;
}
.search-keyword-highlight {
color: #f25d8e;
}
.r-arrow {
background-position: -349px -410px;
width: 6px;
height: 11px;
}
.d-arrow,.r-arrow {
background-image: url(./icons.png);
display: inline-block;
vertical-align: middle;
}
.d-arrow {
background-position: -1307px -221px;
width: 11px;
height: 8px;
}
.d-arrow-dark {
background-position: -1371px -221px;
}
#feedback {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10;
}
#feedback:hover #fb-text {
right: 18px;
opacity: 1;
}
#feedback #fb-icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAADtElEQVR4AeyatZI1RwyF90HM8UJmxsihMTT7Lcycm52ZmdnLzMzMTJeZ5P4MPy+MpudS7ak6F2fUOtUtjRoqNnf9Nnm14WOGbxnWGs4aHhomDJN85jf+4xqu5Z4Km7Ag4hrD5w0ndw6C4g9GJRJLSCKZlnQmK9lsTnI5gXzmN/7jGq4V7uHe/2xcW0hB9xh+g0OhSFzS6Yxowb3YwBY2sZ1PQTcZfrR3GJJYIiW2gU1s0wZteS3oje39gETjSfEatEFbtOmFoCrD93yBiGQJhjyBtkybiHrfsNqWoPu39vwEsRQKtI0P+OJW0KNbewGykhQa+IAv+KQV9DAGkinEFAXw5X9RDzkVVEUX63vG657yCzHlRNB7eY0ZRUyRKE4r6A1fMCLFDl8wKvh6kqDbd/aDllKz9ykdX/H5OEGfx+JJKRXgKz4fJeheSo5SAz7j+5UE/RS3VJsd+IIyMbMsbT1j8mdTn/z8V6f8UtcttS0D0tY7xn9cIzaAz/h+qaBrqXTdYn1rTxraB+XHPztOxYa2Qe4Rl/i/Sr/+QkHPUr7rnw0p6eibwEkVuRcbWhjfEfTKhYKmtPOZuAnMutYBHHNFbGBLAyaNzIT/F3Q1XaadmDFscMgGGa7YdDHsbkDQ40yFNRidWsQRqxwanxcN/KEogp5G0NuaMicUjspPf3XaFmRsdmBbWw69jaBaTRE6PrN8pFNHpWR+P42o8ellTdGKoDoELRBUTtHUOeyVIGxrE8MCgoI5Re32a303jXvCX+u6xSFYIkPQAYJEg59ruzwTRGw6BX3CYqZaUG1Lv5Mh52gIUi5pBamHXPfglFeCsK0dcofapEAN5tmQW9vc0ycFbdqmVxs7hqyLofLAtj5tKx+swBcIm2mBveTwc22nHPpDAtw8WNWlD5hZWLMihjnTxta+ALelj7o4BUur267F/NXcJ/uHARtzohsU0wd7gv5o7JWpuVXRtX1ZQpjTTfBOIai5c0RGJhekpWsEpxlOxAfPF2k2v42ZKn1z58Ck2qOzq2KC9+qFgq6jy9wK+q2hRxZXtxRZyvoUXL9IQlairmMeE08kRQf7iyQlv4xVpguN5b8U/P9ifbRsFuv/5/vFvZ2SRMwHTvaHqktgw6umnLYkHz7bNL58Wz9ZyJjRb+sfwRqCsIAHLz7Ah7OjMafkzYYf5+Hw0se0VZrHyzLeHy/THACcutIBQOKAqIN8PuIA4LT3BwD14h43fMewznDO0GeYgnz+eyAxqNwUqFo5BioCAGO/K8G9s3HMAAAAAElFTkSuQmCC);
display: block;
width: 52px;
height: 52px;
}
#feedback #fb-text {
background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/fb-dialog.png) no-repeat;
width: 230px;
height: 80px;
transition: opacity .2s ease;
opacity: 0;
padding: 13px 21px 26px 19px;
position: absolute;
bottom: 10px;
right: -9999px;
}
#feedback #fb-text a {
color: #00a1d6;
font-weight: 700;
}
#feedback #fb-text a:hover {
color: #f25d8e;
}
.user-auth-subscript {
position: absolute;
display: none;
z-index: 9;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
background-repeat: no-repeat;
}
.user-auth-subscript.avatar-s {
right: -2px;
top: 23px;
width: 18px;
height: 18px;
}
.user-auth-subscript.avatar-m {
right: 0;
top: 44px;
width: 20px;
height: 20px;
}
.user-auth-subscript.avatar-b {
right: -2px;
top: 42px;
width: 20px;
height: 20px;
}
.user-auth-subscript.avatar-x {
right: 1px;
bottom: 0;
width: 18px;
height: 18px;
}
.user-auth-subscript.personal-auth {
display: block;
}
.user-auth-subscript.personal-auth.avatar-s {
background-position: -39px -82px;
}
.user-auth-subscript.personal-auth.avatar-b,.user-auth-subscript.personal-auth.avatar-m {
background-position: -38px -53px;
}
.user-auth-subscript.personal-auth.avatar-x {
background-position: -73px -82px;
}
.user-auth-subscript.organization-auth {
display: block;
}
.user-auth-subscript.organization-auth.avatar-s {
background-position: -5px -82px;
}
.user-auth-subscript.organization-auth.avatar-b,.user-auth-subscript.organization-auth.avatar-m {
background-position: -4px -53px;
}
.user-auth-subscript.organization-auth.avatar-x {
background-position: -5px -82px;
}
.checkbox .checkbox-icon {
border: 1px solid #ccd0d7;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 16px;
margin-right: 5px;
position: relative;
top: -1px;
}
.checkbox:hover {
cursor: pointer;
}
.checkbox:hover .checkbox-icon {
border-color: #00a1d6;
}
.checkbox[checked] .checkbox-icon {
background: url(./icons.png) -1305px -664px #00a1d6;
border-color: #00a1d6;
}
#pin-wrapper {
background: rgba(0,0,0,.5);
position: fixed;
z-index: 10001;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#pin-wrapper.input #pin-layer {
height: 576px;
}
#pin-wrapper.input .pin-layer-reason {
height: 50px;
}
#pin-wrapper .m-loading {
line-height: 24px;
text-align: center;
}
#pin-wrapper .m-loading .icon {
width: 24px;
height: 24px;
margin-right: 8px;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadingS.gif);
background-repeat: no-repeat;
}
#pin-wrapper .m-loading .icon,#pin-wrapper .m-loading span {
display: inline-block;
vertical-align: middle;
}
#pin-wrapper .m-loading.active {
display: block;
}
#pin-wrapper .m-loading.disabled .icon {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loading-fail.png);
background-position: 6px;
}
#pin-wrapper #pin-layer {
background: #fff;
border-radius: 4px;
width: 570px;
height: 540px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transition: all .2s ease;
}
#pin-wrapper .pin-layer-header {
height: 50px;
line-height: 50px;
padding: 0 25px;
font-size: 0;
border-bottom: 1px solid #e5e9ef;
box-sizing: border-box;
}
#pin-wrapper .pin-layer-header .pin-layer-header-text {
display: inline-block;
font-size: 16px;
vertical-align: bottom;
}
#pin-wrapper .pin-layer-header .pin-layer-header-hint {
display: inline-block;
font-size: 12px;
margin-left: 20px;
color: #6d757a;
vertical-align: bottom;
}
#pin-wrapper .pin-layer-header .pin-layer-header-hint i {
margin: 0 2px;
font-weight: 700;
}
#pin-wrapper .pin-layer-header-counter {
display: inline-block;
margin-left: 10px;
font-size: 12px;
color: #222;
vertical-align: middle;
}
#pin-wrapper .pin-layer-header-counter .count {
font-weight: 700;
color: #6d757a;
}
#pin-wrapper .pin-layer-close {
position: absolute;
top: 20px;
right: 25px;
background-position: -533px -279px;
cursor: pointer;
width: 20px;
height: 14px;
}
#pin-wrapper .pin-layer-close:hover {
background-position: -597px -279px;
}
#pin-wrapper .pin-layer-body {
margin: 10px 25px 22px;
}
#pin-wrapper .pin-layer-tab {
font-size: 14px;
}
#pin-wrapper .pin-layer-tab span {
padding: 4px 0;
margin-right: 18px;
}
#pin-wrapper .pin-layer-order {
margin-top: 20px;
}
#pin-wrapper .pin-layer-order-tip {
float: left;
line-height: 20px;
font-size: 12px;
color: #222;
}
#pin-wrapper .pin-layer-order-dropdown {
float: right;
font-size: 14px;
}
#pin-wrapper .pin-layer-search {
margin-top: 10px;
position: relative;
}
#pin-wrapper .pin-layer-search-empty {
position: absolute;
display: none;
top: 250px;
width: 100%;
padding-right: 22px;
color: #99a2aa;
text-align: center;
box-sizing: border-box;
}
#pin-wrapper .pin-layer-search-result {
font-size: 12px;
color: #505050;
margin-top: 4px;
line-height: 20px;
}
#pin-wrapper .pin-layer-search-keyword {
display: inline-block;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f25d8e;
vertical-align: bottom;
}
#pin-wrapper #pin-layer-search {
border: 1px solid #d6dce5;
border-radius: 15px;
box-shadow: none;
width: 470px;
line-height: 32px;
padding: 0 40px 0 10px;
}
#pin-wrapper #pin-layer-search:focus {
border-color: #00a1d6;
}
#pin-wrapper #pin-layer-search-btn {
background-position: -1111px -87px;
cursor: pointer;
width: 18px;
height: 18px;
position: absolute;
top: 6px;
right: 10px;
}
#pin-wrapper #pin-layer-search-btn:hover {
background-position: -1175px -87px;
}
#pin-wrapper #pin-layer-search-count {
color: #f25d8e;
font-weight: 700;
}
#pin-wrapper .pin-layer-video {
position: relative;
margin-top: 5px;
height: 300px;
width: 544px;
overflow: hidden;
}
#pin-wrapper .pin-layer-video.empty {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
background-position: 147px;
background-repeat: no-repeat;
}
#pin-wrapper .pin-layer-video.loading {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
background-repeat: no-repeat;
background-position: 50%;
text-indent: -9999px;
height: 370px;
}
#pin-wrapper .pin-layer-video.loading .small-item {
display: none;
}
#pin-wrapper .pin-layer-video.ready-to-search {
background-image: none;
}
#pin-wrapper .pin-layer-footer {
text-align: center;
position: absolute;
width: 100%;
left: 0;
bottom: 30px;
}
#pin-wrapper .pin-layer-footer .btn {
width: 90px;
margin: 0 7px;
line-height: 30px;
}
#pin-wrapper .pin-layer-vlist .small-item {
float: none;
width: auto;
padding: 4px;
margin-right: 20px;
box-sizing: border-box;
border: none;
border-radius: 4px;
margin-bottom: 2px;
overflow: hidden;
transition: all .2s ease;
}
#pin-wrapper .pin-layer-vlist .small-item:hover {
cursor: pointer;
background-color: #e5e9ef;
box-shadow: none;
}
#pin-wrapper .pin-layer-vlist .small-item.selected {
box-shadow: none;
background-color: #00a1d6;
}
#pin-wrapper .pin-layer-vlist .small-item.selected .title {
color: #fff;
}
#pin-wrapper .pin-layer-vlist .small-item.selected .meta {
color: #b3e3f3;
}
#pin-wrapper .pin-layer-vlist .small-item.selected .play .icon {
background-position: -411px -858px;
}
#pin-wrapper .pin-layer-vlist .small-item.selected .time .icon {
background-position: -347px -858px;
}
#pin-wrapper .pin-layer-vlist .small-item.selected .checkbox {
display: block;
}
#pin-wrapper .pin-layer-vlist .small-item.selected:hover .checkbox .icon {
background-position: -1365px -1109px;
}
#pin-wrapper .pin-layer-vlist .small-item.added {
display: none;
}
#pin-wrapper .pin-layer-vlist .small-item .title {
height: 16px;
line-height: 16px;
margin: 0;
color: #000;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: height .2s ease,margin .2s ease;
}
#pin-wrapper .pin-layer-vlist .small-item .img {
position: relative;
float: left;
width: 80px;
height: 50px;
border-radius: 2px;
overflow: hidden;
}
#pin-wrapper .pin-layer-vlist .small-item .img img {
width: 100%;
height: 100%;
}
#pin-wrapper .pin-layer-vlist .small-item .added-icon {
position: absolute;
display: none;
right: 4px;
top: 4px;
line-height: 14px;
padding: 2px 4px;
font-size: 12px;
color: #fff;
border-radius: 4px;
background-color: rgba(0,0,0,.8);
}
#pin-wrapper .pin-layer-vlist .small-item .detail {
margin-left: 94px;
}
#pin-wrapper .pin-layer-vlist .small-item .meta {
margin-top: 8px;
}
#pin-wrapper .pin-layer-vlist .small-item .meta .play {
width: 65px;
}
#pin-wrapper .pin-layer-vlist .small-item .meta .time {
width: 92px;
}
#pin-wrapper .pin-layer-vlist .small-item .checkbox {
position: absolute;
display: none;
top: 18px;
right: 10px;
width: 22px;
height: 22px;
border-radius: 2px;
background-color: #0087b4;
}
#pin-wrapper .pin-layer-vlist .small-item .checkbox .icon {
display: block;
width: 100%;
height: 100%;
background-position: -1301px -1109px;
}
#pin-wrapper .pin-layer-video-empty {
color: #99a2aa;
margin: 270px 0 0;
padding-right: 22px;
text-align: center;
}
#pin-wrapper .pin-layer-video-empty a {
color: #00a1d6;
}
#pin-wrapper .pin-layer-reason {
height: 0;
overflow: hidden;
transition: height .2s ease;
}
#pin-wrapper .pin-layer-reason #pin-layer-reason-input input {
background: #edf2f9;
border: 1px solid #ccd0d7;
border-radius: 4px;
box-shadow: inset 0 2px 6px rgba(100,109,85,.22);
line-height: 34px;
height: 34px;
margin: 10px 0;
}
#pin-wrapper .pin-layer-reason #pin-layer-reason-input input:focus {
border-color: #00a1d6;
}
#pin-wrapper .pin-layer-reason #pin-layer-reason-input .letter-count {
top: 6px;
}
.breadcrumb {
line-height: 24px;
font-size: 0;
vertical-align: middle;
position: relative;
}
.breadcrumb .item {
display: inline-block;
font-size: 18px;
color: #6d757a;
vertical-align: middle;
}
.breadcrumb .item:hover {
color: #00a1d6;
}
.breadcrumb .item.cur {
color: #222;
}
.breadcrumb .batch {
font-size: 14px;
color: #222;
letter-spacing: 0;
float: right;
cursor: pointer;
}
.breadcrumb .arrow {
background-position: -339px -405px;
}
.breadcrumb .arrow,.breadcrumb .l-arrow {
display: inline-block;
width: 26px;
height: 20px;
background-image: url(./icons.png);
background-repeat: no-repeat;
vertical-align: middle;
}
.breadcrumb .l-arrow {
background-position: -148px -1174px;
}
.page-head {
position: relative;
}
.page-head .v-filter-line {
position: absolute;
top: 0;
right: 0;
}
.page-head .v-filter-line .item {
float: left;
margin-left: 16px;
}
.page-head .v-filter-line .order span {
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-left: 20px;
line-height: 28px;
vertical-align: top;
}
.page-head .v-filter-line .order span.active {
color: #00a1d6;
cursor: default;
}
.page-head .v-filter-line .order span:hover {
color: #00a1d6;
}
.page-head .v-filter-line .style .icon {
cursor: pointer;
display: block;
float: left;
width: 18px;
height: 18px;
}
.page-head .v-filter-line .style .cube {
background-position: -342px -151px;
margin-right: 15px;
}
.page-head .v-filter-line .style .cube.active,.page-head .v-filter-line .style .cube:hover {
background-position: -469px -151px;
}
.page-head .v-filter-line .style .list {
background-position: -341px -217px;
}
.page-head .v-filter-line .style .list.active,.page-head .v-filter-line .style .list:hover {
background-position: -468px -217px;
}
.g-search {
position: relative;
display: inline-block;
width: 134px;
height: 30px;
vertical-align: middle;
}
.g-search:focus {
border-color: #00a1d6;
}
.g-search input {
position: absolute;
height: 30px;
width: 134px;
padding: 0 29px 0 10px;
line-height: 30px;
color: #222;
font-size: 12px;
border: 1px solid #ccd0d7;
border-radius: 15px;
box-shadow: none;
box-sizing: border-box;
}
.g-search .search-btn {
position: absolute;
right: 8px;
top: 0;
width: 18px;
height: 30px;
background-position: -1111px -81px;
cursor: pointer;
}
.g-search .search-btn:hover {
background-position: -1175px -81px;
}
.list-create {
cursor: pointer;
position: relative;
background: #fff;
border: 2px dashed #b8c0cc;
border-radius: 4px;
transition: border .2s ease;
box-sizing: border-box;
}
.list-create .create-imgs-meta {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.list-create .icon {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
transition: background .2s ease;
background-position: -716px -332px;
}
.list-create .text {
line-height: 16px;
margin-top: 8px;
text-align: center;
color: #666;
}
.list-create:hover {
border-color: #00a1d6;
}
.list-create:hover .icon {
background-position: -716px -396px;
}
.list-create:hover .text {
color: #00a1d6;
}
.s-space .ps-container>.ps-scrollbar-y-rail {
right: 0!important;
width: 6px!important;
background-color: #edf2f9!important;
border-radius: 3px;
}
.s-space .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
right: 0!important;
width: 6px!important;
background-color: #6d757a!important;
}
.i-watchlater {
display: none;
position: absolute;
right: 6px;
bottom: 4px;
width: 22px;
height: 22px;
z-index: 5;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABT0lEQVQ4je3VMYrCQBTG8b/DWASLNKJgJ1hY2sloZeF2gkeYW+wZvIVXsLBJY5UdtLJLk17EIghCwChukWRxFzSaaLdfMwm8/EgemTclgOl02gEmwAAoky8RsAA+tdbrUoJ+AVZO8G9CoCeJ39Sq1+sopbBtO5e23+8xxrDdbi1gIog/vxAKYNs2Sqn0diBIenoP9X2fIAgyccv66WZZZBXvdjtc18UYkwlfJxM+n8+/1pfBefMPPw4LEZcEQcBqteJ0Or0GrlartFotLpcLnucxm83YbDbFYSEE/X6f4XBIpVLhcDjgOA6u63I8HvPDaRqNBuPxmHa7DcS7cT6f36yXj8IAUkq63S7NZpPlcomUtx9/Ck5Tq9UYjUZ3a976u0UQz9OiCcMwvYwk8XHyYYxBKXU9+p5Grybg4m1Hk9Bar4Ee4JC0JWeixOhprdffE/1yRW/TLMYAAAAASUVORK5CYII=) no-repeat;
}
.i-watchlater.has-select {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABiklEQVQ4jbXVzyvDcRzH8efns1+JIRtbOSiKrMRBrZZC5IzcHJYTJyc1J464ubuY5MQ/oLSTNSHfIg5KyEmbzY/5sa++c/hOCtv47rvX8f2pR+/3u0+fjwAgfNoFLAH9gA1jUYEIECLoU0QOjQIVBsHveQECEr1Ts1By1pJEH9/s9EuM77RQbLIMKACG4QaHhYNBL7EBj3lwtU2yFXDT6rRil8Ic2C4F634XnbU24m8aY9F46bAUsNJdR1+9g6f3LKPROBfp99LhxY5aRhorULUs43sJlFQmfxO/FWMDHpQhL+3VXzdxps3JVEsVAJOHSSK3rwWbsP5WtAhorrSy09vAxH6CeoeFOV8NALPHKTZvnovMBoLwafZ7sc4uWfe76HE70HKnUsDy+SNzJ/dFUciziruMxvBunNXLNFLo6Mb1M/N/RCHPKgAyWpbpoyQHdxmaKi0snD3wYzQj8GfWrtL/4L5S1rdCLYOrSvTvxOxEJBBC/07MygsQkgR9ChAAtiltLWrOCBD0KR9smmovo1v+1QAAAABJRU5ErkJggg==);
}
.icon {
vertical-align: middle;
background-repeat: no-repeat;
}
.icon-add {
width: 30px;
height: 30px;
background-position: -81px -1170px;
}
.icon-cursor {
width: 10px;
height: 44px;
background-position: -219px -1100px;
}
.icon-fav-public {
width: 20px;
height: 20px;
background-position: -86px -1110px;
}
.icon-fav-private {
width: 20px;
height: 20px;
background-position: -150px -1110px;
}
.icon-fav-default {
width: 20px;
height: 20px;
background-position: -22px -1110px;
}
.icon-more {
width: 30px;
height: 30px;
background-position: -209px -1041px;
cursor: pointer;
}
.icon-arrow {
width: 16px;
height: 20px;
background-position: -1305px -215px;
}
#popup-select-layer {
position: absolute;
top: 50px;
left: 0;
width: 108px;
z-index: 899;
background-color: #fff;
border: 1px solid #ccd0d7;
border-radius: 4px;
}
#popup-select-layer:after {
background-image: url(./icons.png);
background-position: -1307px -285px;
content: "";
display: block;
width: 11px;
height: 6px;
position: absolute;
top: -6px;
left: 50%;
margin-left: -6px;
}
#popup-select-layer .popup-select-choice {
cursor: pointer;
line-height: 30px;
padding: 0 9px;
}
#popup-select-layer .popup-select-choice:hover {
background-color: #e5e9ef;
}
#popup-select-layer .popup-select-choice:first-child {
border-radius: 4px 4px 0 0;
}
#popup-select-layer .popup-select-choice:last-child {
border-radius: 0 0 4px 4px;
}
.article-item {
margin-bottom: 20px;
}
.article-item:last-child .article-content {
border-bottom: none;
}
.article-img {
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: img;
}
.s-content {
width: 923px;
}
.article-content,.s-content {
float: left;
border-bottom: 1px solid #f4f5f7;
padding-bottom: 23px;
}
.article-content {
width: 563px;
}
.article-noimg {
width: 100%;
}
.article-title {
font-weight: 400;
max-height: 26px;
font-size: 18px;
color: #222;
line-height: 26px;
overflow: hidden;
display: block;
}
.article-title a {
word-break: break-all;
}
.article-con {
font-size: 12px;
color: #6d757a;
line-height: 20px;
margin-top: 5px;
}
.article-con a {
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-con a,.article-img {
display: block;
overflow: hidden;
}
.article-img {
width: 117px;
height: 88px;
float: right;
border-radius: 4px;
line-height: 54px;
text-align: center;
}
.article-bgimg,.article-img img {
width: 100%;
height: 100%;
}
.article-bgimg {
background: #f0f2f4 url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
background-size: img;
border-radius: 4px;
display: block;
overflow: hidden;
font-size: 12px;
}
.meta-col {
margin-top: 15px;
color: #999;
font-size: 0;
}
.meta-col,.meta-col span {
height: 14px;
line-height: 14px;
white-space: nowrap;
}
.meta-col span {
display: inline-block;
font-size: 12px;
overflow: hidden;
margin-right: 20px;
}
.meta-col span .icon {
width: 16px;
height: 14px;
margin-right: 3px;
vertical-align: sub;
}
.meta-col .play .icon {
background-position: -280px -25px;
}
.meta-col .time .icon {
background-position: -280px -474px;
}
.meta-col .view .icon {
background-position: -345px -282px;
}
.meta-col .comment .icon {
background-position: -409px -282px;
}
.meta-col .like .icon {
background-position: -472px -282px;
}
.create-channel-popup .modal-wrapper .modal-body {
padding: 30px 20px!important;
}
.create-channel-popup .modal-wrapper .modal-body .be-input input {
height: 30px;
line-height: 30px;
box-shadow: none;
}
.create-channel-popup .modal-wrapper .modal-body .be-textarea {
margin-top: 20px;
}
.create-channel-popup .modal-wrapper .modal-body .be-textarea textarea {
padding: 5px;
height: 66px;
}
.follow-dialog-wrap .errmsg {
display: none;
}
.follow-dialog-wrap .add-group {
margin-top: 20px;
}
.bili-header-m .bili-wrapper {
width: 1100px!important;
}
.icon-playlist {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_line.png);
}
.icon-playlist,.icon-playlist-loc {
width: 22px;
height: 22px;
background-size: 100%;
margin-right: 8px;
}
.icon-playlist-loc {
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_loc.png);
}
.icon-favlist-info {
width: 20px;
height: 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAspJREFUWAntWD2IGlEQds0PSfSwjQSJRKKCNoGA2JhrAilMCiEY0gdiKls7bSy00UasQuQw4KU70OZSiSAikkYRE9SLihoFf+AgGohmJrkDWXaeq5y3G7iB2bdv3sz7vp03zspyin+igeEpqB5UDSqlnAL4Cegx6JSDC5J7C3obVE7yE8jEr8HlOeg9OTE743IDxj0lXPRnBjkOeiQodc2xEqNGgrIW2RO8vm36yuXya4vF8lBMfKVS+Wa1Wj+K8eX7XFYGl3xgsXPsg36xzlL4XVYGt362jWpwk7qjGG1aj1JkcKN6vKpB6qjF2qU4YrHc/vqRPxK73a5JpVIvdTrdLv/pLNvtdtftdn/K5/NTIeZkBsPh8JMdk0M+HGIA1r4QObSRBFUq1S0q6KLtarWaxCIJDgYDwZQLkfP7/YdOpzNWr9e/C62vs/V6vQnlQxKE2iCD+JsFAoFqOp0eGo3GD/F4PPMLhO/Dmnc6HRKLJNhoNMggCmyxWCg8Hk/R4XDEarVag/Lj25vNJolFEqxWq2QQH4A/LxQKU7PZfBCNRo/m8/mMv86fs7BIgqVSaWuC5wS8Xu8Xl8v1frlcLs5tQmOxWCSxSIKtVgsefv3TCwGu2maz2W+O40gcWJ9BDc5XY1bvyUB0Go1G5JOtbkLdRyKRR5lM5g21jvbxeMzEIN8kGDwcDidarfYu3m8iNptNk0gkXphMpgfr4hCD5cPMYL/fZwbzN1YqlYpYLPY4m82+E0MO47vdLhODmUGxvdDn85mgrUxDodAzg8Fwn0+cNWf1QIxjEhTbC4PB4CsWCdYaqwdiHPOI4ah+sDa/iLV1GEyCuVxukkwmP8Obi2wD25LEHoZ7IwZrj6u//KzsiFljHrGYDXbt818QxG/CcpVTzOCJXNkhNySIX9Pxg7XcBDkd40d07HFl0D3QO6A3QaUULLmvoIeg0z8kQfSabrii0gAAAABJRU5ErkJggg==);
background-size: 100%;
}
.icon-back-follow {
width: 16px;
height: 16px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjx0aXRsZT5nZW5lcmFsX2FkZCB0b19mcmllbmRzPC90aXRsZT4KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CjxnIGlkPSJnZW5lcmFsX2FkZC10b19mcmllbmRzIj4KCTxnIGlkPSLot6/lvoQtNDkiPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjIsMTIuNGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yTDIuMSw4LjRjLTAuMy0wLjMtMC4zLTAuOCwwLTEuMWMwLjMtMC4zLDAuOC0wLjMsMS4xLDBsMy4xLDMuMmw2LjYtNi4zCgkJCUMxMy4yLDQsMTMuNyw0LDE0LDQuM2MwLjMsMC4zLDAuMywwLjgsMCwxLjFsLTcuMiw2LjhDNi42LDEyLjMsNi40LDEyLjQsNi4yLDEyLjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==) no-repeat;
background-size: 100% 100%;
display: inline-block;
margin-right: 4px;
position: relative;
top: 3px;
}
.icon-back-follow.grey {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACnSURBVDjLY2CgEujs7GQrKSkxYqAmKCsrky0qKroGxP+Li4vzqW4o1OBwahn6DMlQyl0LCk+ChoJsptBQTO+DBKEKDtfX1/MQaegXgmGKZDBBw4FqXZEM/QLi43UFUEEvIcOhDiDeUCSNM5ENByV4HL76QnJGQDN8LchwUGwjiT0jO3ehGX4N2VBSUw9Gnge5FslAsAUUGYoMkAynnqHIaRY5EgcFAAC8KcMdEfVlQwAAAABJRU5ErkJggg==) no-repeat;
background-size: contain;
width: 12px;
height: 12px;
top: 8px;
}
.icon-multiple {
width: 20px;
height: 20px;
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACDklEQVRYCe2Xv0rDUBTGmxCloyA4iCj6AiI+gpOIb+DSQdvioo8iDmlTGnDtJCi46CM4uLm4VXCxewtN+h3bCzf3T7z502a5gfae3NzvnF+/25ymtZo9rAPVOuAsq3wQBKdRFAVxHO+Y1HAcZ+i67hWOF369y5/kjcMwPBgMBuu8Pgsc6eiDkIbPQXEhQCR1O51OOB6Pv0aj0We3211jBUydY+tpVGk8fkGWmOAA9IDxYpF8D/EW4m8xT7vdTv0q+b4fixp2ngtQhKNk+A7dt1otCY4Vyjtm3mIVHIr7zWbzNi9Emi7hYL/f355MJs8k8DzvEsc7L9bBwblrOKjdJj5H1jjhIODOkOCIXtPp9LXX6x2zhFXAUe0EYL1ef8LcL10A0AaDrAqOOBKAjUbjB1t1gvkEJO7WR0D+3a0kwuEvc1vnJebvCUCaQuEPERJw55xoZXBUU9uf0IAPAfaGNZt54NJ6G5dPCsWeKTnIFMxJuEm9LcJ4l2VbsX7IcpmOKo0WkJIuIPcR7iK+QQLjVkI//KqCOlhaSxrddTtvHajKAanNlPUkXFYe6S4u60m4rDwSIJqz0X8IfstVGtUcr1HFKk3icUsUiV1dvG76a1Ekj+SgCFH1uQUsugPWQetgUQeK6lP7oGmf+w+iSB7pJsnykMnAVBrVHFuvG1UaCbCsJ+Gy8ug+jJ23DqzKgRnrdy/UychTEQAAAABJRU5ErkJggg==);
background-size: img;
}
@media (min-width:1420px) {
.bili-header-m .bili-wrapper,.wrapper {
width: 1283px!important;
}
.bili-header-m .bili-wrapper .title-row .title,.wrapper .title-row .title {
max-width: 800px;
}
.n-btn {
margin-right: 43px;
}
}
.fakeDanmu-item .length {
z-index: 5;
transition: background .2s ease;
}
.fakeDanmu-item .new-icon {
transition: opacity .2s ease;
}
.fakeDanmu-item.preview-danmu .length {
background: none;
}
.fakeDanmu-item.preview-danmu .new-icon {
opacity: 0;
}
.fake-danmu-mask {
z-index: 3;
background-color: rgba(0,0,0,.2);
}
.fake-danmu,.fake-danmu-mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fake-danmu {
z-index: 4;
}
.fake-danmu-item {
position: absolute;
display: inline;
color: #fff;
font-size: 12px;
line-height: 20px;
font-family: Microsoft Yahei,simhei,榛戜綋;
white-space: pre;
pointer-events: none;
opacity: .95;
text-shadow: 1px 1px 2px #001;
}
.preview-bg {
top: 10px;
z-index: 2;
height: 100%;
}
.preview-bg,.preview-wrapper {
position: absolute;
display: none;
left: 0;
width: 100%;
}
.preview-wrapper {
top: 0;
z-index: 4;
padding: 0 5px 5px;
box-sizing: border-box;
background-color: #000;
}
.preview-progress {
width: 100%;
height: 2px;
margin-top: 5px;
background-color: hsla(0,0%,100%,.4);
border-radius: 1px;
}
.preview-progress-bar {
width: 0;
height: 2px;
border-radius: 1px;
background-color: #fff;
}
.fade-transition {
transition: opacity .3s ease;
}
.fade-enter,.fade-leave {
opacity: 0;
}
.expand-transition {
transition: height .3s ease;
height: 30px;
overflow: hidden;
}
.expand-enter,.expand-leave {
height: 0;
opacity: 0;
}
.expand-switch-transition {
transition: height .3s ease;
height: 40px;
overflow: hidden;
}
.expand-switch-enter,.expand-switch-leave {
height: 0;
}
.bounce-transition {
display: inline-block;
}
.bounce-enter {
animation: bounce-in .3s;
}
.bounce-leave {
animation: bounce-out .3s;
}
.space-loading-tv {
height: 100px;
margin-top: 10px;
background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
background-repeat: no-repeat;
background-position: 50%;
}
#space-body {
min-height: 100%;
padding-bottom: 30px;
background-repeat: repeat;
background-position: top;
}
#space-body .global-modal .modal-wrapper {
width: 400px;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
to {
transform: scale(0);
}
}
@font-face {
font-family:iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff2) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");
}
.iconfont {
font-family: iconfont!important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-qipao:before {
content: "\E63E";
}
.icon-tag:before {
content: "\E6CE";
}
.icon-a-Slice1:before {
content: "\E63D";
}
.icon-yincang:before {
content: "\E63C";
}
.icon-a-Slice2:before {
content: "\E63B";
}
.icon-wenhao:before {
content: "\E63A";
}
.icon-xinjian:before {
content: "\E639";
}
.icon-ic_zhiboyuyue:before {
content: "\E638";
}
.icon-ic_toupiao:before {
content: "\E637";
}
.icon-ic_choujiang:before {
content: "\E636";
}
.icon-ic_at:before {
content: "\E61A";
}
.icon-ic_yuyue:before {
content: "\E619";
}
.icon-ic_tupian:before {
content: "\E617";
}
.icon-ic_huati:before {
content: "\E615";
}
.icon-ic_dingshi:before {
content: "\E614";
}
.icon-ic_biaoqing:before {
content: "\E613";
}
.icon-ic_channel1:before {
content: "\E611";
}
.icon-ic_array_card:before {
content: "\E60F";
}
.icon-ic_array_list:before {
content: "\E610";
}
.icon-into:before {
content: "\E765";
}
.icon-heji:before {
content: "\E762";
}
.icon-ic_class1:before {
content: "\E635";
}
.icon-huaban:before {
content: "\E718";
}
.icon-dianzan:before {
content: "\E710";
}
.icon-bofang:before {
content: "\E711";
}
.icon-bodan:before {
content: "\E712";
}
.icon-pinglun:before {
content: "\E713";
}
.icon-shixiao:before {
content: "\E714";
}
.icon-fenxiang:before {
content: "\E715";
}
.icon-shoucang:before {
content: "\E716";
}
.icon-tianjia:before {
content: "\E717";
}
.icon-xiangxia:before {
content: "\E719";
}
.icon-xiangshang:before {
content: "\E71A";
}
.icon-shouting:before {
content: "\E605";
}
.icon-checkbox_selected:before {
content: "\E631";
}
.icon-checkbox:before {
content: "\E632";
}
.icon-radio:before {
content: "\E633";
}
.icon-radio_selected:before {
content: "\E634";
}
.icon-ic_close:before {
content: "\E630";
}
.icon-ic_more:before {
content: "\E62F";
}
.icon-ic_upload:before {
content: "\E62E";
}
.icon-ic_following:before {
content: "\E62D";
}
.icon-ic_collect:before {
content: "\E624";
}
.icon-ic_channel:before {
content: "\E625";
}
.icon-ic_home:before {
content: "\E626";
}
.icon-ic_setting:before {
content: "\E627";
}
.icon-ic_playlist:before {
content: "\E628";
}
.icon-ic_interest:before {
content: "\E629";
}
.icon-ic_sub:before {
content: "\E62A";
}
.icon-ic_article:before {
content: "\E62B";
}
.icon-ic_video:before {
content: "\E62C";
}
.icon-ic_time:before {
content: "\E623";
}
.icon-ic_moveup:before {
content: "\E620";
}
.icon-ic_movedown:before {
content: "\E621";
}
.icon-ic_delete:before {
content: "\E622";
}
.icon-ic_play:before {
content: "\E61B";
}
.icon-ic_comment:before {
content: "\E61C";
}
.icon-ic_up:before {
content: "\E61D";
}
.icon-ic_danmu:before {
content: "\E61E";
}
.icon-ic_collection:before {
content: "\E61F";
}
.be-input {
position: relative;
color: #222;
font-size: 14px;
border-radius: 4px;
}
.be-input--append .be-input_inner {
padding: 0 60px 0 5px;
}
.be-input_inner {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 50px 0 5px;
border-radius: 4px;
border: 1px solid #ccd0d7;
outline: none;
box-sizing: border-box;
transition: all .3s ease;
}
.be-input_inner:focus {
border-color: #00a1d6;
}
.be-input.is-diabled .be-input_inner {
background-color: #e6e6e6;
border-color: #afb6c1;
color: #3c3c3c;
cursor: not-allowed;
}
.be-textarea {
position: relative;
color: #222;
font-size: 14px;
border-radius: 4px;
}
.be-textarea.is-diabled .be-textarea_inner {
background-color: #e6e6e6;
border-color: #afb6c1;
color: #3c3c3c;
cursor: not-allowed;
}
.be-textarea--append .be-textarea_inner {
display: table-cell;
}
.be-textarea_inner {
display: block;
width: 100%;
line-height: 20px;
height: 118px;
padding: 0 5px;
border: 1px solid #ccd0d7;
border-radius: 4px;
outline: none;
box-sizing: border-box;
resize: none;
transition: all .3s ease;
}
.be-textarea_inner:focus,.be-textarea_inner:hover {
border-color: #00a1d6;
}
.be-textarea_inner:focus~.be-input-word-counter,.be-textarea_inner:hover~.be-input-word-counter {
opacity: 1;
}
.be-textarea .be-input-word-counter {
opacity: 0;
transition: opacity .2s ease;
}
.be-input-word-counter {
position: absolute;
right: 0;
bottom: 0;
height: 30px;
min-width: 40px;
padding: 0 10px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #99a2aa;
border-radius: 4px;
}
.modal-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 20000;
}
.modal-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
word-break: break-all;
line-height: 22px;
z-index: 1011;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.16);
border-radius: 4px;
transition: box-shadow .2s linear;
}
.modal-wrapper .modal-header {
position: relative;
font: 12px/1.11 Microsoft Yahei,Tahoma,Arial,Helvetica,STHeiti;
}
.modal-wrapper .modal-title {
display: block;
font-size: 16px;
line-height: 48px;
padding: 0 20px;
border-bottom: 1px solid #ddd;
}
.modal-wrapper .modal-header-close {
position: absolute;
text-decoration: none;
top: 13px;
right: 12px;
width: 20px;
height: 20px;
line-height: 20px;
cursor: pointer;
font-size: 16px;
text-align: center;
}
.modal-wrapper .modal-header-close:hover {
color: #00a1d6;
}
.modal-wrapper .modal-body {
padding: 30px 60px;
font-size: 14px;
text-align: center;
vertical-align: middle;
min-width: 9em;
}
.modal-wrapper .modal-footer {
padding: 0 0 30px;
text-align: center;
}
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1010;
background-color: rgba(0,0,0,.5);
}
.be-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 12000;
height: 50px;
line-height: 50px;
padding: 0 30px;
color: #fff;
font-size: 14px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.14);
background-color: rgba(0,0,0,.8);
}
#id-card {
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.3);
border-radius: 4px;
position: absolute;
z-index: 1002;
width: 375px;
}
#id-card .idc-laoding-text {
padding: 10px;
font-size: 12px;
color: #222;
}
#id-card .idc-theme-img {
border-radius: 4px 4px 0 0;
display: block;
width: 375px;
height: 120px;
background-size: img;
background-position: 50%;
}
#id-card .idc-content .idc-username {
display: inline-block;
line-height: 22px;
vertical-align: middle;
}
#id-card .idc-info {
padding: 7px 40px 10px 100px;
position: relative;
}
#id-card .idc-info .idc-avatar-container {
position: absolute;
top: -15px;
left: 20px;
width: 54px;
height: 54px;
}
#id-card .idc-avatar {
border: 2px solid #fff;
border-radius: 50px;
display: block;
float: left;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
#id-card .idc-uname {
display: inline-block;
font-size: 14px;
vertical-align: top;
max-width: 9em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#id-card .idc-uname:hover {
color: #00a1d6!important;
}
#id-card .idc-gender {
vertical-align: middle;
}
#id-card .idc-m-level {
vertical-align: middle;
margin-top: 1px;
}
#id-card .idc-meta {
margin-top: 6px;
}
#id-card .idc-meta-item {
margin-right: 20px;
}
#id-card .idc-tag-list {
display: none;
padding-bottom: 0;
}
#id-card .idc-certification {
color: #ff931e;
margin: 7px 0 0;
}
#id-card .idc-certification:empty {
display: none;
}
#id-card .idc-certified-icon {
background-position: -213px -791px;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 5px;
}
#id-card .idc-auth-description {
line-height: 20px;
font-size: 12px;
margin-top: 6px;
color: #6d757a;
}
#id-card .idc-auth-description.no-desc {
color: #99a2aa;
}
#id-card .idc-sign {
color: #999;
line-height: 1.7;
padding: 7px 0 5px;
}
#id-card .idc-sign:empty {
display: none;
}
#id-card .idc-action {
text-align: center;
padding: 0 20px 20px 29px;
}
#id-card .idc-btn {
display: inline-block;
cursor: pointer;
line-height: 24px;
height: 26px;
width: 80px;
margin: 0 10px;
font-size: 12px;
}
#id-card .idc-btn.blue {
color: #fff;
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
#id-card .idc-btn.blue:hover {
background-color: #00b5e5;
border: 1px solid #00b5e5;
color: #fff;
}
#id-card .idc-btn.unfollow {
background-color: #edf2f9;
border-color: #edf2f9;
color: #999;
}
#id-card .idc-btn .btn-content {
line-height: 24px;
}
.be-tab,.be-tab-item {
position: relative;
}
.be-tab-item {
float: left;
font-size: 14px;
margin-right: 20px;
line-height: 28px;
vertical-align: top;
cursor: pointer;
}
.be-tab-item:last-child {
margin-right: 0;
}
.be-tab-item.is-active {
color: #00a1d6;
}
.be-tab-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
background: #ff3c3c;
opacity: 0;
cursor: pointer;
}
.be-tab-cursor {
left: 0;
border-bottom: 1px solid #00a1d6;
transform: translateX(0);
transition: width .2s ease,transform .2s ease;
}
.be-tab-cursor,.be-tab-cursor:after {
position: absolute;
bottom: 0;
height: 0;
width: 0;
}
.be-tab-cursor:after {
content: "";
left: 50%;
transform: translateX(-50%);
margin-left: -3px;
border-bottom: 3px solid #00a1d6;
border-top: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.be-tooltip {
position: fixed;
z-index: 120;
height: 26px;
line-height: 26px;
padding: 0 10px;
color: #fff;
font-size: 12px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.14);
background-color: rgba(0,0,0,.8);
}
.be-scrollbar-wrapper {
position: relative;
}
.be-switch-container {
position: relative;
display: inline-block;
height: 20px;
cursor: pointer;
white-space: nowrap;
}
.be-switch-container.is-checked .be-switch {
background-color: #00a1d6;
}
.be-switch-container.is-checked .be-switch-cursor {
left: 17px;
}
.be-switch {
position: relative;
display: inline-block;
width: 30px;
height: 16px;
border-radius: 8px;
background-color: #ccd0d7;
vertical-align: middle;
cursor: pointer;
transition: background-color .2s ease;
}
.be-switch-cursor {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 12px;
background: #fff;
transition: left .2s ease;
}
.be-switch-label {
display: inline-block;
line-height: 20px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
.be-switch-input {
position: absolute;
left: 0;
top: 0;
margin: 0;
opacity: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.btn[data-v-53027a10] {
display: inline-block;
-ms-touch-action: manipulation;
touch-action: manipulation;
padding: 0 10px;
margin-right: 20px;
line-height: 30px;
min-width: 70px;
transition: all .2s ease;
font-size: 0;
color: #666;
text-align: center;
vertical-align: middle;
outline: none;
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
}
.btn[data-v-53027a10]:last-of-type {
margin-right: 0;
}
.btn .btn-loading[data-v-53027a10],.btn i[data-v-53027a10] {
margin-right: 8px;
}
.btn.default[data-v-53027a10] {
color: #666;
background-color: #fff;
border-color: #d9d9d9;
}
.btn.primary[data-v-53027a10] {
color: #fff;
background-color: #00a1d6;
border-color: #00a1d6;
}
.btn.primary[data-v-53027a10]:focus,.btn.primary[data-v-53027a10]:hover {
background-color: #00b5e5;
color: #fff;
border-color: #00b5e5;
}
.btn.ghost[data-v-53027a10],.btn.ghost[data-v-53027a10]:focus,.btn.ghost[data-v-53027a10]:hover {
color: #666;
background-color: #f7f7f7;
border-color: #d9d9d9;
}
.btn.warning[data-v-53027a10] {
color: #fff;
background-color: #fa0;
border-color: #fa0;
}
.btn.warning[data-v-53027a10]:focus,.btn.warning[data-v-53027a10]:hover {
color: #fff;
background-color: rgba(255,170,0,.7);
border-color: #fa0;
}
.btn.danger[data-v-53027a10] {
color: #fff;
background-color: #f50;
border-color: #f50;
}
.btn.danger[data-v-53027a10]:focus,.btn.danger[data-v-53027a10]:hover {
color: #fff;
border-color: #f50;
background-color: rgba(255,85,0,.7);
}
.btn.success[data-v-53027a10] {
background-color: #87d068;
border-color: #87d068;
color: #fff;
}
.btn.success[data-v-53027a10]:focus,.btn.success[data-v-53027a10]:hover {
color: #fff;
border-color: #87d068;
background-color: rgba(135,208,104,.7);
}
.btn.info[data-v-53027a10] {
color: #fff;
border-color: #2db7f5;
background-color: #2db7f5;
}
.btn.info[data-v-53027a10]:focus,.btn.info[data-v-53027a10]:hover {
color: #fff;
border-color: #2db7f5;
background-color: rgba(45,183,245,.7);
}
.btn[data-v-53027a10]:focus,.btn[data-v-53027a10]:hover {
color: #00a1d6;
background-color: #fff;
border-color: #00a1d6;
}
.btn.btn-small[data-v-53027a10] {
padding: .2rem .3rem;
line-height: 1rem;
min-width: 0;
}
.btn.btn-large[data-v-53027a10] {
width: 140px;
height: 40px;
line-height: 40px;
}
.btn.btn-large .btn-content[data-v-53027a10] {
font-size: 14px;
}
@keyframes loading-53027a10 {
0% {
transform-origin: 50% 50%;
transform: rotate(0deg);
}
to {
transform-origin: 50% 50%;
transform: rotate(1turn);
}
}
.btn-loading[data-v-53027a10] {
display: inline-block;
animation: loading-53027a10 1s linear infinite;
}
.btn-content[data-v-53027a10] {
font-size: 12px;
vertical-align: top;
}
.btn-content[data-v-53027a10]:hover {
color: inherit;
background-color: inherit;
}
.btn.btn-disabled[data-v-53027a10] {
cursor: default;
}
.btn.btn-disabled[data-v-53027a10],.btn.btn-disabled[data-v-53027a10]:hover {
color: #ccd0d7;
background: #f4f5f7;
border-color: #e5e9ef;
}
.btn-icon[data-v-53027a10] {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
.btn-container[data-v-1ea3cefa] {
font-size: 0;
white-space: nowrap;
}
.btn-container.btn-center[data-v-1ea3cefa] {
text-align: center;
}
.btn-container.btn-left[data-v-1ea3cefa] {
text-align: left;
}
.btn-container.btn-right[data-v-1ea3cefa] {
text-align: right;
}
.btn-container .btn[data-v-1ea3cefa]:last-of-type {
margin-right: 0;
}
.be-pager {
margin: 15px 0;
text-align: center;
}
.be-pager:after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.be-pager-item {
display: inline-block;
line-height: 38px;
padding: 0 15px;
margin-right: 4px;
text-align: center;
list-style: none;
background-color: #fff;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-family: Arial;
font-size: 14px;
border: 1px solid #d7dde4;
border-radius: 4px;
transition: all .2s ease-in-out;
}
.be-pager-item a {
text-decoration: none;
color: #657180;
}
.be-pager-item:hover {
border-color: #00a1d6;
}
.be-pager-item:hover a {
color: #00a1d6;
}
.be-pager-item-active {
background-color: #00a1d6;
border-color: #00a1d6;
}
.be-pager-item-active:hover a,.be-pager-item-active a {
color: #fff;
}
.be-pager-item-jump-next,.be-pager-item-jump-prev {
padding: 0 5px;
}
.be-pager-item-jump-next:after,.be-pager-item-jump-prev:after {
content: "\2022\2022\2022";
display: block;
letter-spacing: 1px;
color: #ccc;
text-align: center;
}
.be-pager-prev {
margin-right: 8px;
}
.be-pager-item-jump-next,.be-pager-item-jump-prev {
margin-right: 4px;
}
.be-pager-next {
margin-left: 4px;
}
.be-pager-item-jump-next,.be-pager-item-jump-prev,.be-pager-next,.be-pager-prev {
display: inline-block;
font-size: 14px;
line-height: 38px;
list-style: none;
text-align: center;
cursor: pointer;
color: #666;
font-family: Arial;
transition: all .2s ease-in-out;
}
.be-pager-next,.be-pager-prev {
padding: 0 14px;
border: 1px solid #d7dde4;
border-radius: 4px;
background-color: #fff;
}
.be-pager-next a,.be-pager-prev a {
color: #666;
font-size: 14px;
}
.be-pager-next:hover,.be-pager-prev:hover {
border-color: #00a1d6;
}
.be-pager-next:hover a,.be-pager-prev:hover a {
color: #00a1d6;
}
.be-pager-disabled {
display: none;
}
.be-pager-options {
float: left;
margin-left: 15px;
}
.be-pager-options-elevator {
display: inline-block;
height: 32px;
line-height: 32px;
color: #99a2aa;
}
.be-pager-options-elevator input {
border-radius: 4px;
margin: 0 8px;
width: 50px;
}
.be-pager-total {
display: inline-block;
height: 32px;
line-height: 32px;
margin-left: 30px;
color: #99a2aa;
}
.be-dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.be-dropdown-trigger {
width: 24px;
height: 24px;
margin: auto;
text-align: center;
}
.be-dropdown-trigger .icon-ic_more {
display: block;
line-height: 24px;
color: #222;
font-size: 24px;
color: #999;
}
.be-dropdown-item {
height: 40px;
padding: 0 20px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #222;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background-color .2s ease;
cursor: pointer;
}
.be-dropdown-item:hover {
color: #00a1d6;
background-color: #e5e9ef;
}
.be-dropdown-item.be-dropdown-item-delimiter {
border-bottom: 1px solid #e5e9ef;
}
.be-dropdown-menu {
position: fixed;
top: 40px;
z-index: 10;
padding: 6px 0;
background-color: #fff;
border: 1px solid #e5e9ef;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.14);
}
.be-tags-container {
position: absolute;
top: 4px;
right: 4px;
}
.be-tags-container .tag {
display: inline-block;
padding: 0 4px;
font-size: 10px;
color: #fff;
text-align: center;
line-height: 14px;
border-radius: 2px;
margin-left: 4px;
}
.be-tags-container .tag.pay-tag {
background-color: #faab4b;
}
.be-tags-container .tag.coop-tag,.be-tags-container .tag.inter-tag,.be-tags-container .tag.live-review {
background-color: #fb7299;
}
.be-tags-container .tag.new-tag {
background-color: #42a0c4;
}
@font-face {
font-family:iconfont;src:url(data:font/woff2;base64,d09GMgABAAAAAAO4AAsAAAAACFQAAANsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKgqDSIMoATYCJAMUCwwABCAFhG0HYxtjBxEVnI3IfhY4Z3NCT1bKOQcF/6IePckryH0fguczZ74vyVmtXCAGp0R4I5g7w61OmY0Rtx1eEErj+23apUB26KhKoJW100/L/Ac790KuK/D/uFc123MBmc++xWmOTWuCJByggO1p6SZrQSpQQeswduVFPIMAjjJqUQ0atehAqhF9J4wiG4MxKBDnyoihg/tiuRpTkytYhFjbvQb5akAtVleBlf7PyxvKZUHhaYyH2gxqOIArYcpEDR1EgR76KcF4ZXC+AjxAAyVWppVh9eYB6DBcgsaVBQ1VgCdbFISpwlOJGlGECCm5u/oXz+JwgEZhEJAYRnYKAOrAiIEwpY1AQ5gKgYLwFAIDiRrc+3jEA8ABPrAKOI/wBcTq3aSojBnTSgrTkTr39LsG6j6xk39vzYMH5Z2kVG5QCu3zADCzxo7uPvyL3b1bxp9+9t7dKn3OVDp1W3T8TuXTVXv7qZcigUu1RCSuEh8zeP3SzIM3bt1y5MC+DAPWBf2XHEKl8lIuPRo/4lIsOXMMExw/21h5/uSYH3CkAseK1Qk6bMi5Kc+szu3iKVrUTVm/9ciJDRaljBcd0P3EizpYOfuy00CTt1HuPy6YuWnmZgWW/upyYMGOEu+K71xwoAuP9xWkoNWnxJrb7T6U/FC79uZp08ufPrg5WBeVcG0zvsvkOedlel78OSjK+edyTpfz8h+HGV7vZXrHFACiHWgLoPupEJ9UUO23jlEf//HvMCHDjMa9U9f4Zn0DwNOfB39Bd3Toz/5HnNbsPyqhZVejMpHElFXaRgTVQim/y6rg38kjaE/n+TjWjIiNguUcCIokcoLGUgBt8CXAw6cCxLDUBkdxjQ/7pDcOjZhkoJj5AIQ0ToIiFZdBk8Y1tME/A49M3kGMNGlwqF4tz/Rtq72jIFUUlP2oznkwlk69IPeG0nWpJHk++QUZax/tSpXJxq4YIGNsGN/lXtWQEe7pAh5D1zFZ4Qa5BpWqPYSlB5V9UZBzP/EcCUgpKJDMD6nl2MC4w5WX+/4bKDmdlNRUVRhfQIzq8clOIGqBvoqHVlXX8pLRW2lPKYMYgvXIBRihM8OM2PJZDcipQNUjaB2EqJtpKw7ml/bPeAQeY/q02p2ma3PyW+I85b/juHLp8KvdEt926Q8S07RFj8H5bUqUB1ZMJg==) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");
}
.iconfont {
font-family: iconfont!important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.video-commonicon_caozuo_huanyihuan:before {
content: "\E73C";
}
.video-commonplayer_play:before {
content: "\E60E";
}
.video-commonmenu:before {
content: "\E60D";
}
.video-commonicon_tonote:before {
content: "\E6B6";
}
/*# sourceMappingURL=space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/
然后就是图片素材了（我直接从B站八的）
具体效果过段时间我就会放在文末当打赏用了！
给博客添加个充电按钮（仿B站）的更多相关文章
- hexo next主题为博客添加分享功能
title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
- 给 hugo 博客添加搜索功能
起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...
- CSDN博客添加量子恒道统计代码步骤
CSDN博客添加量子恒道统计代码步骤. 1. 去量子恒道网站统计 注册账户: 2. 添加已有的CSDN博客地址: 3. 添加博客后恒道代码里面会给你一个JavaScript脚本,记下里面的一串数字: ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- Jekyll博客添加Valine评论
Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...
- 个人博客添加网易云音乐Flash插件
博客底部添加网易云音乐播放插件 歌单或者歌曲外链可从音乐界面"生成外链播放器"中得到,选择Flash播放插件即可 footer.html文件增加 实现效果: 历史精选文章: Jli ...
- 给博客添加rss订阅
如果是自己搭建博客,有一个问题是如何写一篇新的文章就可以告诉读者,你写了一篇新的?一个简单方法是使用 rss ,RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple ...
- 2019-8-31-jekyll-在博客添加流程图
title author date CreateTime categories jekyll 在博客添加流程图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 ...
随机推荐
- Istio 中实现客户端源 IP 的保持
作者 尹烨,腾讯专家工程师, 腾讯云 TCM 产品负责人.在 K8s.Service Mesh 等方面有多年的实践经验. 导语 对于很多后端服务业务,我们都希望得到客户端源 IP.云上的负载均衡器,比 ...
- .NET C#基础（7）：接口 - 人如何和猫互动
0. 文章目的 面向有一定基础的C#初学者,介绍C#中接口的意义.使用以及特点. 1. 阅读基础 了解C#基本语法(如定义一个类.继承一个类) 理解OOP中的基本概念(如继承,多态) 2. ...
- 开源流程引擎camunda如何扩展
市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...
- TypeScript（4）接口
介绍 TypeScript 的核心原则之一是对值所具有的结构进行类型检查.我们使用接口(Interfaces)来定义对象的类型.接口是对象的状态(属性)和行为(方法)的抽象(描述) 接口初探 声明接口 ...
- 监控pos收银机
1.打开pos收银机snmp功能 控制面板-->程序和功能-->启用或关闭windows功能→简单网络管理协议(SNMP) 2.配置snmp服务 控制面板-->管理工具-->服 ...
- 内存泄漏定位工具之 valgrind 使用
1 前言 前面介绍了 GCC 自带的 mtrace 内存泄漏检查工具,该篇主要介绍开源的内存泄漏工具 valgrind,valgrind 是一套 Linux 下,开放源代码的动态调试工具集合,能够检测 ...
- 问题：CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://mirrors.tuna.tsinghua.edu.cn/anaconda/pk
使用anaconda安装tensorflow (windows10环境) 遇到的问题:CondaHTTPError: HTTP 000 CONNECTION FAILED for url <ht ...
- Ubuntu 隐藏所有窗口快捷键不生效问题
在绑定界面卡住时,切换到一个tty窗口,再切回来 gsettings reset-recursively org.gnome.settings-daemon.plugins.media-keys gs ...
- API 开发者需要避免的10个错误【翻译】
随着低代码和无代码工具的出现,构建API比以往任何时候都更简单.更快.不过因为开发简单了,开发者很容易忽略一些潜在的问题,导致整个业务的下游影响. 在设计阶段多花点时间,可以确保API真正有用.安全. ...
- Class对象共嫩
需求:写一个"框架",不能改变该类的任何代码的前提下,可以帮我们创建任意类的对象,并且执行其中任意方法 实现: 1.配置文件 2.反射 步骤: 1.将需要创建的对象的全类名和需要执 ...