B站仿旧版样式,仅播放页和稍后再看播放页,搜索页、番剧/综艺播放页还在改造中
/* ==UserStyle== @name B站仿旧版样式(番剧/综艺播放页(beta)、搜索页(beta)、播放页、稍后再看播放页)(stylus版) @namespace github.com/czxinc/bilibili-old-style @version 9.3.0 @preprocessor stylus @homepageURL https://github.com/czxinc/bilibili-old-style @supportURL https://github.com/czxinc/bilibili-old-style @description B站仿旧版样式,仅播放页和稍后再看播放页,搜索页、番剧/综艺播放页还在改造中 @author CZX ####erman @license GPL ==/UserStyle== */ //@var checkbox topbarVideo "顶栏(视频页)" 1 //@var checkbox topbarSearch "顶栏(搜索页)" 1 //@var checkbox pageVideo "视频页" 1 //@var checkbox pageSearch "搜索页" 1 //@var number leftWidth "左侧宽度" 1280 leftWidth = 1280 //宽度 topbarVideo = 1 topbarSearch = 1 pageVideo = 1 pageSearch = 1 unitToPx(num) unit(num, 'px') //评论组件 stylusAreaComment() /* 评论 start */ .bili-comment.browser-pc * font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; a outline: none; color: #00a1d6; text-decoration: none; cursor: pointer; &:hover color: #f25d8e; .reply-header .reply-navigation .nav-bar .nav-title font-size: 18px!important; line-height: 24px!important; font-weight: normal!important; .nav-title-text font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif!important; .total-reply color: inherit!important; font-size: 18px!important; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif!important; .nav-sort font-size: 14px!important; color: #222!important; .hot-sort .time-sort font-weight: bold!important; &.hot .hot-sort &.time .time-sort color: #00a1d6!important; .emoji-panel margin-top: 7px; margin-bottom: 10px; box-shadow: 0 11px 12px 0 rgba(106 115 133 30%); top: 27px; .emoji-content height: 196px!important; .reply-list .login-prompt //登录评论按钮 border-radius: 4px!important; .reply-box .box-normal .reply-box-send background-color: #00a1d6; border: 1px solid #00a1d6; transition: 0.1s; &:hover background-color: #00b5e5; border-color: #00b5e5; &:after content: none!important; .reply-box-warp .reply-box-textarea font-size: 12px; line-height: normal!important; &:hover border-color: #00a1d6!important; background-color: #fff!important; &.disabled .box-normal .reply-box-send background-color: #e5e9ef !important; border-color: #e5e9ef !important; color: #b8c0cc !important; &.fixed-box .box-normal .reply-box-warp .reply-box-textarea padding-top 10px .textarea-wrap padding: 0px; .main-reply-box .box-normal height: 65px!important; .reply-box-send width: 70px!important; height: 64px!important; .reply-box-wrap .reply-box-textarea height: 65px!important; .reply-item .root-reply-container padding-left: 85px!important; padding-top: 24px!important; .root-reply-avatar width: 82px!important; padding-top: 6px!important; .content-warp .user-info font-size: 12px!important; font-weight: bold!important; line-height: 18px!important; word-wrap: break-word!important; height:22px!important; .user-name font-family: inherit!important; font-weight: inherit!important; .user-level margin-left: 11px!important; .root-reply font-size: 14px!important; line-height: 20px!important; .reply-info font-size: 12px!important; margin-top: 6px!important; .reply-time margin-right: 20px!important; .reply-dislike margin-right: 15px!important; .reply-btn padding: 0 5px; border-radius: 4px; margin-right: 15px; cursor: pointer; &:hover color: #00a1d6!important; background: #e5e9ef!important; .sub-reply-container padding-left: 78px!important; &.login-limit-reply-end .login-limit-mask //未登录遮罩 display: none!important; .sub-reply-item font-size: 14px!important line-height 20px!important .sub-user-info .sub-user-name font-size: 12px!important; font-weight: bold!important; line-height: 18px!important; word-wrap: break-word!important; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif!important; .sub-user-level margin-left: 11px; .sub-reply-info line-height: 14px!important; margin-top: 6px!important; font-size: 12px!important; .sub-reply-list .view-more font-size: 12px!important; color: #6d757a!important; font-weight: bolder!important; .view-more-default .view-more-btn color: #00a1d6; padding: 2px 3px; border-radius: 4px; &:hover background: #e5e9ef; color: #00a1d6; .view-more-pagination span transition: color .3s; line-height: 26px .reply-content-container .reply-content line-height: inherit; font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif; .jump-link .icon line-height inherit!important .icon &.search-word position: relative; top: -1px; .reply-operation .operation-list padding: 10px 0!important; /* 评论 end */ //评论区(ShadowDOM组件版) stylusAreaCommentShadowDOMVer() /* 评论 start */ bili-comments --bili-comments-font-size-content: 14px; --bili-comments-line-height-content: 20px; --bili-rich-text-font-size: 14px; --bili-rich-text-line-height: 20px; --bili-font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; -webkit-font-smoothing: auto; :host(bili-comment-action-buttons-renderer) //评论功能区 font-size: 12px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; -webkit-font-smoothing: auto; :host(bili-comment-renderer) //评论 -webkit-font-smoothing: auto; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; #user-name[data-user-profile-id] //评论人 font-size: 12px; font-weight: 700; div#reply>button //回复数 div>button>span#count //赞数 font-size: 12px; /* 评论 end */ //顶部栏 stylusTopbar() /* header start */ #biliMainHeader height: 56px!important .bili-header height: 56px!important .bili-header__bar padding: 10px 24px height: 56px .left-entry .default-entry .loc-entry margin-right: 12px!important; .left-entry__title .mini-header__logo width: 70px height: 32px path fill: #00a1d6 .right-entry .right-entry__outside .right-entry-icon display: none; .right-entry-text color: #212121; text-shadow: none; line-height: 30px; display: block!important; .right-entry-item min-width: 0px; margin-right: 0px; .right-entry-item--upload .v-popover-wrap margin-left: 0px; .right-entry--vip .red-point right: -8px; .right-entry__outside -webkit-font-smoothing: antialiased; font: 14px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; min-width: 0px; margin: 0px 0px 0px 12px!important; &.go-login-btn width: 64px; .red-num--message background-color: #FA5A57; text-align: center; color: #fff; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; line-height: 16px; font-size: 12px; top: -7px; right: -10px; left: auto; .red-num--dynamic left: auto; right: -10px; .v-popover-wrap &.right-entry__outside &.right-entry--message margin: 0px 0px 0px 0px!important; .header-favorite-container height: 100%; min-width: 0px; .header-favorite-container-box margin-top: 0px; .header-favorite-container__up top: 0px!important; .header-favorite-container__down display: none; .header-entry-mini width: 40px; height: 40px; left: 0px; top: 0px; .v-img >img border: 0px; .header-avatar-wrap width: 50px; height: 40px; margin-left: 12px; padding-right: 0px; .header-upload-entry cursor: pointer; position: relative; color: #fff; font-size: 14px; display: block; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #fb7299; border-radius: 2px; margin-left: 14px; .header-upload-entry__text display: block!important; .header-upload-entry__icon display: none; .center-search-container .center-search__bar &.is-focus box-shadow: none border-radius: 0px #nav-searchform display: block; padding: 0 48px 0 16px; border-radius: 2px!important; background: #F4F4F4; border: 1px solid #E7E7E7; position: inherit; height: inherit; background: var(--bg3)!important; .nav-search-content padding: 0px; background: inherit!important; .nav-search-input word-break: break-all; overflow: hidden; width: 100%; height: 34px; border: none; background-color: transparent; box-shadow: none; color: #999; font-size: 14px; line-height: 34px; transition: all 0.2s; &:focus background-color: inherit; color: #999; .is-actived .nav-search-content .nav-search-input &:focus color: #222222; .nav-search-btn position: absolute; top: 0px; right: 0; margin: 0; padding: 0; width: 48px; height: 36px; border: none; border-radius: 2px; background: #e7e7e7; line-height: 26px; cursor: pointer; display: inherit; transition: none; svg position: absolute; top: 7px; right: 16px; margin: 0; padding: 0; border: none; background: none; color: #505050; font-size: 16px; line-height: 20px; cursor: pointer; transition: all 0.2s; .search-panel background: #ffffff; border: 1px solid #e6e9ee; box-sizing: border-box; box-shadow: 0px 2px 4px rgba(0 0 0 10%); border-radius: 2px; padding: 16px 0; margin-top: 2px; font-family: PingFang SC, sans-serif; font-style: normal; font-weight: normal; color: #212121; -webkit-font-smoothing: antialiased; .message-entry-popover min-width: 173px; .message-inner-list padding: 10.058px 0; color: #212121; .message-inner-list__item padding: 0px 0px 0px 20.116px; line-height: 36.2093px; font-size: 14px; color: inherit; .header-dynamic-avatar width: 34.1px!important; height: 34.1px!important; border: 0px!important; .header-dynamic-list-item transition: 0.3s!important; &:hover background-color: #f4f4f4!important; .header-dynamic__box--right top: 0px!important; width: auto!important; .dynamic-info-content font-size: 13.267px!important; font-weight: 500!important; color: #212121!important; margin: 5.68px 0px!important; line-height: normal!important; .bili-header .header-dynamic-list-item .dynamic-name-line, .publish-time font-size: 12px!important; color: #505050!important; .wnd_bottom height: 60.64px; display: flex; justify-content: center; align-items: center; margin: 0px 18.95px; .r-l height: 30.313px; width: auto; margin: 0px; border-radius: 0px; color: #212121; font-size: 13.267px; background-color: #f4f4f4; line-height: normal; transition: box-shadow 0.1s; flex: 1; display: flex; justify-content: center; align-items: center; font-family: auto; &:hover background-color: #e7e7e7; .right-entry .v-popover-wrap &.right-entry-message margin-left: 12px!important; .v-popover-content border-radius: 2px; box-shadow: 0 3px 6px 0 rgba(0 0 0 20%); .dynamic-panel-popover width: 350.63px; .header-tabs-panel font-size: 12px; color: #999; line-height: 15.1px; height: 45.5px; display: flex; flex-direction: row; align-items: center; padding-left: 19px; border-bottom: 1px solid #e7e7e7; user-select: none; justify-content: normal; .header-tabs-panel__content min-height: 113.717px; max-height: 444.445px; .header-tabs-panel__item display: flex; justify-content: center; align-items: center; margin: 0px 22.743px 0px 0px; padding: 0px; border-radius: 30px; cursor: pointer; transition: 0.3s ease; z-index: 1; flex: inherit; font-size: 12px; line-height: 15px; border-bottom: none; .header-tabs-panel__item--active background-color: #00a1d6; color: #fff; padding: 3.79px 9.5px; margin: 0px 13.267px 0px 0px; border-bottom: none; .cover width: 60.641px!important; height: 34.109px!important; border-radius: 1.895px!important; .watch-later width: 20.844px!important; height: 20.844px!important; .bili-watch-later__icon width: 15px!important; height: 15px!important; .dynamic-article .tip-box color: #999!important; font-size: 13.267px!important; display: flex!important; justify-content: center!important; align-items: center!important; height: 94.75px!important; .dynamic-video-item line-height: normal!important; .v-popover &.is-bottom padding-top: 13px!important; &::before content: ''; width: 10px; height: 7px; display: block; position: absolute; top: 11px; left: calc(50% - 5px) !important; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: white; -webkit-box-shadow: -1px -1px 1px rgba(0 0 0 5%); box-shadow: -1px -1px 1px rgba(0 0 0 5%); z-index: 1; .bili-avatar-right-icon width: 15.1px; height: 15.1px; /* header end */ //页面 视频播放页 stylusVideo() body margin: 0 font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif font-size: 12px line-height: 1.5 color: #222 background-color: #fff a color: #222 background-color: transparent text-decoration: none outline: none cursor: pointer transition: color .3s -webkit-text-decoration-skip: objects .harmony-font -webkit-font-smoothing: antialiased font: 14px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif z-index: 1000 margin: 0 padding: 0 /* 左侧项目 start */ .left-container .playlist-container--left //适配稍后再看 max-width: unitToPx(leftWidth); .video-info-container height: 96px!important; padding-top: 27px!important; box-sizing: border-box!important; .video-title //视频标题 .video-title-href //稍后再看 视频标题 font-size: 18px!important; font-weight: 500!important; line-height: 26px!important; .video-container-v1:has(.left-container .bpx-player-container[data-screen='wide']) //宽屏时 .right-container .members-info-container //创作团队 padding-top: 0px; .membersinfo-wide .header display: none; .video-info-detail font-size: 12px!important; height: 16px!important; color: #999!important; display: flex!important; align-items: center!important; text-overflow: ellipsis!important; white-space: nowrap!important; .video-info-detail-list .pubdate-ip font-size: inherit!important; .pubdate .pubdate-text font-size: inherit!important; .honor font-size:12px; &.honor-rank .honor-icon width: 12px; height: 12px; .honor-arrow width: 5px; height: 8px; .video-argue .video-argue-inner //视频争议标签 font-size: 12px!important; /* 视频 start */ #bilibili-player:has(.bpx-player-container:not([data-screen = "web"]):not([data-screen = "full"]):not([data-screen = "wide"])) max-width: unitToPx(leftWidth); #bilibili-player height: 100%; #playerWrap:has(.bpx-player-container:not([data-screen = "web"]):not([data-screen = "full"]):not([data-screen = "wide"])) //保持16:9(1280x720) max-height: unit(766,"px") //播放器下方栏 .bpx-player-sending-bar display: flex!important; flex: none!important; justify-content: space-between!important; height: 46px!important; padding: 0 12px 0 20px!important; //background: #fff!important; font-size: 12px!important .bpx-player-video-info-online b font-weight: bold!important; .bpx-player-video-inputbar border-radius: 2px!important; .bpx-player-dm-btn-send border-radius: 0 2px 2px 0!important; @media (min-width: 1681px) #bilibili-player-placeholder // #bilibili-player // 修 小窗口播放器上下窗口有黑框 height: calc(100% - 10px); //弹幕列表按钮 .bui-collapse .bui-collapse-header border-radius: 2px!important; /* 视频 end */ /* 视频下方工具栏 start */ .video-toolbar-container .video-toolbar-left .toolbar-left-item-wrap margin-right: 8px!important; .ring-progress //三连进度条 width: 34px!important; height: 34px!important; left: -3px!important; top: -3px!important; .video-toolbar-right .toolbar-right-note margin-right: 0px!important; .video-note-inner /* position: relative; */ margin-right: 25px!important; width: auto; height: 24px; align-items: center; justify-content: center; border-radius: 2px; cursor: pointer; font-size: 12px!important; line-height: 20px; border: 1px solid #00a1d6; color: #00a1d6; background: #fff; transition: 0.3s; padding-left: 3px; &:hover color: #fff!important; background: #00a1d6!important; .video-toolbar-item-icon fill: #fff!important; .video-toolbar-left-item width: 92px!important; .video-toolbar-item-icon width: 28px!important; height: 28px!important; .video-toolbar-right-item font-size: 12px!important; .video-toolbar-item-icon width: 16px; height: 20px; fill: #00a1d6; transition: 0.3s; &.video-complaint-icon display: none; .svga-container.svga-center //三连图标弹出 transform: translate(-4.5px, -4.5px) scale(0.8)!important; @media (min-width: 1681px) .svga-container.svga-center //三连图标弹出 transform: translate(-6.5px, -6.5px) scale(0.8)!important; .toolbar-right-note .video-toolbar-item-text transition: 0.3s; width: auto; padding-right: 3px; &:hover .video-toolbar-item-icon fill: #fff!important; .video-toolbar-item-text color: #fff!important; .video-tool-more .video-tool-more-reference .video-tool-more-icon width: 20px!important; height: 24px!important; .video-tool-more-popover display: block; position: absolute; width: 80px; min-width: 0px; left: -65px; z-index: 30; text-align: center; padding: 10px 0; background: #ffffff; border: 1px solid #e5e9ef; box-shadow: 0 2px 4px 0 rgba(0 0 0 14%); border-radius: 2px; font-size: 14px; color: #222; .video-tool-more-dropdown .dropdown-item position: relative; height: 34px; line-height: 34px; cursor: pointer; transition: all 0.3s; justify-content: center; padding: 0px; .video-toolbar-item-text font-size: 14px!important; svg display: none; .video-share-popover border-radius: 2px; -webkit-box-shadow: 0 2px 4px 0 rgba(0 0 0 14%); box-shadow: 0 2px 4px 0 rgba(0 0 0 14%); border: 1px solid #e5e9ef; .video-share-dropdown .dropdown-top padding: 20px 10px 12px 10px; .dropdown-bottom padding: 20px 10px; /* 视频下方工具栏 end */ /* 视频简介 start */ .video-desc-container .basic-desc-info .subtitle-maker-list font-size: 12px!important; line-height: 18px!important; /* 视频简介 end */ /* 视频标签 start */ .video-tag-container .tag-panel /* width: 670px!important; */ .tag margin: 0px!important; .show-more-btn display: none; &.not-btn-tag display: block!important; .tag-link float: left; margin: 0 10px 8px 0; background: #F6F7F8; border-radius: 100px; padding: 0 12px; position: relative; height: 22px; line-height: 22px; transition: all 0.3s; font-size: 12px; border: 1px solid transparent; box-sizing: content-box; &:hover border-color: #00a1d6; .tag-icon width: 14px!important; height: 14px!important; .newchannel-tag .tag-link &.newchannel-link .newchannel-tag-icon fill: #9499a0; margin-right: 5px!important; path fill: inherit; /* 视频标签 end */ /* 评论上面的广播公告栏 start */ .reply-header .reply-notice box-sizing: content-box; background-color: #FFF1D3!important; border: 1px solid #F8DFAA!important; color: #E78B1F!important; border-radius: 4px; padding: 0px 15px 0px 10px!important; &::after background-color: inherit!important; opacity: 0!important; .svg-icon &.notice width: 21px!important; height: 21px!important; svg path fill: #e78b1f; .notice-content line-height: 20px; font-size: 14px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; padding-left: 13px!important; /* 评论上面的广播公告栏 end */ stylusAreaComment() stylusAreaCommentShadowDOMVer() .image-exhibition .preview-image-container .image-item-wrap border-radius: 4px!important; /* 左侧项目 end */ /* 右侧项目 start */ .video-container-v1 .right-container .playlist-container--right //适配稍后再看 max-width: 320px!important; /* 头像框 start */ .up-info-container box-sizing: border-box!important; height: 96px!important; padding-top: 15px!important; padding-bottom: 12px!important; display: flex!important; align-items: flex-start!important; .up-avatar-wrap max-width:60px; max-height:50px; .up-detail .up-detail-top .up-name position: relative!important; font-size: 14px!important; color: #FB7299!important; font-weight: 500!important; display: inline-block!important; max-width: 180px!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; vertical-align: top!important; margin-right: 0px!important; .send-msg margin-left: 12px!important; font-size: 12px!important; color: #505050!important; display: inline-block!important; vertical-align: middle!important; i color: #999!important; font-size: 16px; margin-right: 4px; height: 16px; width: 16px; vertical-align: text-bottom; .up-description margin-top: 4px!important; font-size: 12px!important; line-height: 16px!important; height: 16px!important; color: #999!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; /* 头像框 end */ /* 广告 start */ .slide-ad-exp .slide-gg height:182.857px!important; border-radius: 2px!important; .ad-report.video-card-ad-small //display: none!important; .next-button font-size: 12px!important; color: #999!important; line-height: 22px!important; cursor: pointer!important; /* 广告 end */ /* 右侧项目容器及分隔线 start */ .recommend-list-v1 .rec-title font-size: 16px!important; color: #222!important; display: flex!important; justify-content: space-between!important; margin-bottom: 6px!important; .split-line background: #E5E9EF!important; margin: 6px 0 12px!important; .rec-list margin: 0px!important; .rec-footer border-radius: 2px!important; /* 右侧项目容器及分隔线 end */ /* 稍后再看列表 start */ .action-list-container .action-list-item-wrap font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif !important; .cover border-radius: 2px!important; width: 104px; height: 58px; img border-radius: 2px!important; .actionlist-item-inner div.title //标题 font-size: 14px; div.views //播放量 font-size: 12px; /* 稍后再看列表 end */ /* 合集 start */ .video-sections-v1 //合集(有分组) .base-video-sections-v1 //合集(无分组) border-radius: 2px!important; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important; .first-line-left max-width: 195px; //防止自动连播换行 a //合集标题 font-size: 16px!important; font-weight: 400; line-height: 16px; .cur-page //项目数量 color: rgb(153, 153, 153); font-size: 12px!important; line-height: 16px!important; .video-sections-content-list .video-sections-item .video-section-title //分组标题 p font-size: 12px; color: rgb(33, 33, 33); line-height: 18px; font-family: PingFangSC-Regular; .video-episode-card //项目 .video-episode-card__info .video-episode-card__info-title //项目标题 font-size: 14px; color: #212121; line-height: 18px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important; .video-episode-card__info-title-playing //项目标题 当前播放 color: #00a1d6; .video-episode-card__info__number font-size: 12px; color: #999; line-height: 16px; &:hover //项目 鼠标在上 .video-episode-card__info .video-episode-card__info-title //项目标题 color: #00a1d6; /* 合集 end */ /* 分P项目 start */ .multi-page-v1 border-radius: 2px!important; &.small-mode .cur-list .list-box li width: 308px!important; /* 分P项目 end */ /* 右侧项目(视频) start */ .video-page-card-small .video-page-special-card-small .video-page-operator-card-small .recommend-video-card //用于“稍后再看” padding: 6px 0!important; margin-bottom: 0px!important; &:first-child padding-top:0px!important; .card-box .info font-size: 12px!important; .title display: block!important; font-size: 14px!important; font-weight: 500!important; height: 36px!important; line-height: 18px!important; margin-bottom: 6px!important; word-break: break-word!important; overflow: hidden!important; text-overflow: ellipsis!important; display: box!important; .upname margin: 0px 0px 4px 0px; height: 16px; svg display: none; .desc font-size: 12px!important; .pic-box width: 141px!important; height: 80px!important; border-radius: 2px!important; .cover width: 80px!important; height: 80px!important; background: none!important; .pic position: relative!important; border-radius: 2px!important; border-top-left-radius: 2px!important; border-top-right-radius: 2px!important; border-bottom-right-radius: 2px!important; border-bottom-left-radius: 2px!important; .duration font-size: 12px!important; line-height: normal!important; height: 14px!important; .framepreview-box .video-awesome-img width: 141px!important; height: 80px!important; .rcmd-cover-img border-radius: 2px!important; //用于“稍后再看” .playinfo .play .dm .play-icon //用于“稍后再看” .dm-icon //用于“稍后再看” /* display: none; */ height: 14px!important; width: 14px!important; position: relative; top: -1px; /* 右侧项目(视频) end */ /* 接下来播放上面的广告 start */ .video-card-ad-small .vcd .cover .b-img[data-v-eba1a9e8] img[data-v-eba1a9e8] border-radius: 2px!important; .is-in-large-ab .video-card-ad-small .vcd .cover width: 141px!important; height: 80px!important; border-radius: 2px!important; .info line-height: 12px!important; font-size: 12px!important; word-break: keep-all!important; display: flex; flex-direction: column; justify-content: space-between; .title font-size: 14px!important; font-weight: 500; line-height: 18px!important; word-break: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; /* 接下来播放上面的广告 end */ /* 下面的广告和直播推荐 start */ .video-container-v1 .right-container #right-bottom-banner height: 160px!important; border-radius: 2px!important; .pop-live-small-mode .pl__ &title font-size: 14px!important; &name__text font-size: 12px!important; &user font-size: 12px!important; &cover &mask height: 180px!important; border-radius: 2px!important; /* 下面的广告和直播推荐 end */ /* 右侧项目 end */ /* 注释 start */ /* 注释 end */ stylusSearch() svgSize=15px //图标尺寸(长和宽) html font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; /* 容器宽度 start */ .i_wrapper padding-left:0px!important; padding-right:0px!important; width:980px!important; /* 容器宽度 end */ div &:has(.vui_pagenation) //分页容器 margin-top: -10px; margin-bottom: 35px; .bangumi-pgc-list .to_hide_md //取消小宽度模式隐藏结果 display:block!important; .col_md_4 //取消番剧、影视等关联结果自适应 flex:0 0 100%!important; max-width:100%!important; .media-card-content max-width: none!important; .activity-game-list .col_6 //取消动漫、游戏推荐自适应 flex:0 0 100%!important; max-width:100%!important; /* 搜索框(首页) start */ .search-entry-page .search-input-wrap border:none!important; border-radius:0px!important; transition:none!important; background:inherit!important; &:hover background:inherit!important; .search-icon display:none !important; .search-input-el border: 1px solid #ddd!important; border-right: 0!important; padding: 0 10px!important; height: 40px!important; color: #222!important; padding:0px 10px!important; margin:0px!important; //width: 518px!important; width:100%!important; border-top-left-radius:4px!important; border-bottom-left-radius:4px!important; font-size: 13.3333px!important; &:focus-visible outline: -webkit-focus-ring-color auto 1px !important; .search-button text-align: center!important; line-height: 40px!important; font-size: 16px!important; font-weight: bolder!important; background-color: #00a1d6!important; color: #fff!important; border: 1px solid #008cd2!important; width: 120px!important; height: 40px!important; border-radius: 0 4px 4px 0!important; transition:none!important; &:hover background-color: #00b5e5!important; .search-panel border: 1px solid var(--line_regular); //temp border-radius:8px; //temp /* 搜索框(首页) end */ /* 搜索框(其他) start */ .search-header .search-input margin-top:52px!important; .search-input-wrap border: none!important; background: none!important; width:auto!important; height:42px!important; padding:0px!important; &:before //搜索logo content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAAAjCAYAAAC3gbmIAAAIBklEQVR4nO1ba4hVVRT+xnRmfITNONqkpWZWEpaVA0mPH4bzI+hPgtpbiF4Q9COqEcKKqPBmFEUSmhSGBV2xl9CPlKDSNLo+8pmlZr7GGXXGt5PjeGPHt2i52vuc+5xbzv3gcM/eZ5991tnr22utvfa5KKOMMsr4FyrOqViwWc76AZgG4CEA7wL4uERDNwDAvQCmA3gbwCclkuP8xPRrznmtXuYlrwbwBoA9AN4HcGuJBmEsgDkA9gKYC+BmACdLJEuPQW/zot8CuNjUHenmwXDW6gcAF5r6s90sR4+DJcNPAO4swiA4gt0PYBiAOgDvAfg+0DYNIAVgoqkvBBnc8+/hby2Ad/jOPR7wkOHnIpHB+f7XVXlTBBkc1nvIcKwAcjgCzFblVJkM/8DGDBuK9JwdRpl1Me19clQWQI5fAHSqcm0B+jxvYMmwyfNi1QV4WWf6N6pyTUx7Hxn6FkCOThIiUzl6FCwZtpqZ41BVoAHZqs7jZuSmIgaMW7KQo0fBksHOnHxRpZ7xq+orbkaeoGvRyMcyVKucym+qflAB3/V/D0sGeMgwMMuXHAJgIYApAA4AWMN6rQSJGdzMfBrADQBeAvCYaqPJ49A/SzkuA/ARgLsYryxnvbZQQoZ6AM8AGAdgFoD7snzWfw0pHlnBRwY7I7OdPW7g7wZwO4BdAIayXitXzPNARveTADwJ4IkIObL170eZvbyFSTSRY7unT/eOrzG51QTg8SyfBd6X5rvEIQmgLaZNmn12G3xk2G7K2SrhFIBtAK4EsBPAYLqLP1QbIYMMyAV8eY1tppytfz9CMo6mHEKGnZ4+25U###h0Jvn+aUOC8aZeEyhlruljvOdefXitho8M+SoBXA0MUwN/CZUjg17N/Q9X18V44KjpI19SWjkq6cKaAfyp+uyl5BrgCaC7C+2Ma9yR4DNXq7pFRo4Gdc0eq8299mjwvVMmbiJXJfRnQmeZSm5p6yBp78MAOjKQIy43EZLDKXgVgKUkRJoWA7QEg2jNOriCKSYZZDZP4bja2V5S2Aykw24Ap1WSJ5eI2212vcJZv0DVOzJcz3On3N8B3EHFf2bIuYODJauAXEj5MoDnqOS5qn4n3ZjI4QLdiQxylxRxWSszMsnYolaVa5SrnKHu0e5TLNgkkjsO1vVqVNgKn2U4a2ZlLmRwJJsJYDE3nR5hvbYMg5UMtwG41qwYOhj4CXJxV84VvQjgU8rxoEeOev5WUI6xOaxcCgGfm0CEm3Bo9LgAxLiIG###fZYBJMMYng8OtIlCJ8kgZGvm5pRWwhD+zmGwAy77xqg2O7hEhGc3NVPMVO2ce/jQyCFk/4Bb+KB7uS7H55UKYi0caaYqGZL8nRonl88ywARvdTlkIU+YvIJ8RaEjeYkBDqk6m1jSFqoe2eOAsS6ibC2HkLJF1fXL4Vm5QiL7GhPxgzmPtIozBMs4y5exnCQRGo3S20iSeaou4XMRiLAMu015HIOsSkb9+6jwKKxTg385BdCKEeU2R/SxS51X0oRXKDn2UK4orAVwKa+P4O8+1V4s3wFV1yemz0KgxsREFmma9ETMs5oUUWwc0cjfZCZuNmQZ9pjyj9xWTjF5dJymdjGTRSM9faxV51WcgVoJYp4Pqjqb7bRybDBynGAQmmTCarhHjnXqvIarC92vkEFbBvthTSHRRuW1RxAhGyRUPCDKbzSWY2pMMPk3MiWDD27gJwN4iwpZyQ9HpM915p7hHHCJ1CUGiLIMcXJUkIhT+KGKM//f8eWj5NDPFDlaVV1oXPJFirLZYNCXQIJxE1HKlPuTimByz1JlMSIzpNmS4UyEQBP44WyKKwOfEjqVOZaYQVsGGzOE5OgK1MuKwH04uwLAVcZCgQHpMVo3KAvVguKjQc1WjQYV5ftWAOAKwUJS4BKA1ygCtAf6SoYIESLD3gATF1Lps9nGB7fp9A0Vr92C+G25T8yznqX2A5YQGeZxz+FNAPsDbSbwm86Dan0OZiShZJPYpRWlRYIKt6liKfuyhomAwn3LUH3PLN+FEBlOm4BKMIrxw7M0z5Ppwy3qmNTRbJa9AVGCmGffcwSHA3sFI5k3eIoWZ5r5TkFQz+trVJ0lpViGEKm6Ew0cY1kOpjjrG2NkSKp7fND7HYls0tEC3+Bcoc7PkDSjAveuN0oQMsgM7MslXFTMgMD10eq8k3HICE+7XQw0tasQObS7cuOgLUMxA8g41DIGSisi+FwLaO5l2enTA0iCRSr+CO6ERpHBZzaHUom92fkSRucaXdwCPhWwDNoS1LMclf71yTGS+wpVTH0nPbkBR9ZHSRYth7gJIXsvEkKTrlgBZBSaVNCnVxpLAz7exgZ6to9SOZoEg1bZwJoVCiRDeQYELEMFO3H5/ps81w/xX1hfsqyVIOZ5JZnel7uXXSSEuI0qtasYkqMP5XgVwI2e6y1MPX/Nss9CrWAyrB+PVi5Vi5mKblL+Wvy6js3sUlPKbWpvZnWgfUoFkgi4FiFMmhPlHIsTRYZQQPW5Z+acYTr3eaO8fcwNdKiPW77gobFfkaHakCEkx1ceOZzbmg/gBbNK2caMaJv66NfnZ5uNCyo0Ep4kUia5hkz2ZbxxQABZZSAR4cu1ArZyQOdFRP6Z5PgfBnARSXXcXAsFdlqOjVxOzg+0P8tlZhweKPE3DSVFJm7iFM1nC7OOmznbl3u+OcgVUd/rCSlPUo5WJrm28E8/y83GUz5Ylce9vllfRhlllFFGGecFAPwFhbf/2ClVmcQAAAAASUVORK5CYII="); margin-right: 26px; margin-top: 11px; .search-icon display:none; .search-input-el box-sizing: border-box!important; height: 42px!important; box-shadow: none!important; padding: 11px 15px!important; background: transparent!important; width: 424px!important; border: 2px solid #ccd0d7!important; border-radius: 4px!important; font-size: 16px!important; color: #222!important; outline:inherit!important; margin-right:10px!important; &:focus-visible outline: -webkit-focus-ring-color auto 1px !important; .search-button cursor: pointer!important; float: left!important; color: #fff!important; background: #00a1d6!important; font-size: 16px!important; letter-spacing: 2px!important; line-height: 42px!important; text-align: center!important; width: 90px!important; height: inherit!important; border-radius: 4px!important; transition: none!important; padding: 0px!important; border: 0px!important; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif !important; &:hover background: #00b5e5!important; &:before content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAABg0lEQVQ4jaVUTU/CQBAtrYYPxSClF0/ExBj/lCdPRrzYxH/gycSLN2/+IIlIrCwY4SbsbndJ+GgUumZKt6wFpeJLpjudnfe6O7NbTQjxzZwGOqWMdSeTiS9CgA8xmIvnS4uch8enIuOciBXg/b5brdX3lgqByNjzPqSEyzhGrderWv15Hwx8iMl5z/M+gbMgxDinkOD7vnhBrcuflg9zkAMIVz8XchqoIr/0m4giZsv8kDsTchnryu2sEpEmtxlyg5i+k89bmqZphNI7LSFkruQCdMMwUuAMhqPrpEKD4egGRskNhJKSVWwYRj4e06fTqQBneytnJxXKZNInMEpugH8WuzdvP2qeK+23V4k4qHkRtX/GXetA2sqBpOpcCh7VWr14dHjwnkmnN2G7jHOMiXs7Go/v4T2XzR5bpeLZbqEQtRtT2rFMsxzV6K+XVkUPk7eF2x/VoIEqUMT4bwRiUJMeJu1lYom6FLdlYmsdSKtkljGhHSWUCoq9LjCh7UC4ZJa/AG/6CQHa0ZSAAAAAAElFTkSuQmCC"); width: 18px; height: 19px; display: inline-block; top: 4px; position: relative; margin-right: 7px; .search-panel width: 424px!important; background: #fff!important; border: 1px solid #e6e9ee!important; box-shadow: 0 2px 4px rgba(0,0,0,10%)!important; border-radius: 2px!important; padding: 16px 0!important; margin-top: 2px!important; font-style: normal!important; font-weight: 400!important; color: #212121!important; -webkit-font-smoothing: antialiased!important; left:158px!important; top:44px!important; .search-fixed-header //非页头时的浮动搜索框 .search-input-wrap:before margin-top: 0px; .search-tabs //搜索类别栏 .vui_tabs--nav justify-content: space-between; .vui_tabs--nav-item .vui_tabs--nav-text color: #000; .vui_tabs--nav-num color: rgb(109, 117, 122); background: none; &:first-child .vui_tabs--nav-link padding-left: 10px!important; .vui_tabs--nav-slider //当前选择下方的滑动横线 color: rgb(0, 161, 214); width: 54.25px!important; transition-duration: 200ms; transition-timing-function: cubic-bezier(.645,.045,.355,1); transition-property: width, height, transform; will-change: transform; pointer-events: none; transform: translate(-10px, 4px); height: 2px; z-index: 1; .vui_tabs--navbar:after border-bottom: 1px solid #ccd0d7; top: 4px; position: relative; .search-all-list .user-video-info .video-list-item //UP主视频推荐显示一行 &:nth-last-child(1) &:nth-last-child(2) &:nth-last-child(3) display: none; .search-conditions .vui_button &--tab //搜索条件 font-size: 12px; height: 20px; padding: 0px 8px; color: #222; margin: 0px 15px 0px 0px!important; &--active background-color: #00a1d6; color: #fff; border-radius: 4px; .search-condition-row margin-bottom: 10px; width: 95%; //把纪录片选项挤到下一行,旧版纪录片在第二行 .search-channel-item //搜索条件 分区 容器 margin-top: 0px!important; .vui_button--tab margin-right: 6px!important; &:nth-child(2) .vui_button--tab margin-left: 6px!important; &:nth-last-child(1) //分区第二行边距特殊 &:nth-last-child(2) &:nth-last-child(3) margin-top: 4px!important; .search-sub-wrapper height: auto; bottom: -45px!important; margin-bottom: 2px; padding-top: 15px!important; transition: none!important; &:before content: '' background-image: url(//s1.hdslb.com/bfs/static/jinkela/search/assets/sprite-690be8a6ea.png); background-position: -442px -285px; width: 10px; position: absolute; height: 5px; top: 10px; left: calc(50% - 10px); .search-sub-channel padding: 0px!important; border-radius: 4px!important; border: 1px solid #e5e9ef!important; background-color: #f4f5f7!important; box-shadow: none!important; .sub-channel-item padding: 0px 12px; line-height: 30px; margin-right: 0!important; font-size: 12px; a color: #000!important; .i_button_more height: auto!important; border-radius: 4px; line-height: 24px; font-size: 12px!important; color: #6d757a; right: 0; display: inline-block; width: 74px; text-align: center; padding: 0px!important; border: 0px; transition: none; &:hover background-color: #e5e9ef; color: #00a1d6; /* 搜索框(其他) start */ /* 视频项目 start */ .video-list.row &>div flex:0 0 20%!important; max-width:none!important; .bili-video-card height: 208px; width: 168px; border: 1px solid #e5e9ef; border-radius: 4px; box-sizing: content-box; .bili-video-card__image height: 100px; border-radius: 4px!important; &:hover .bili-video-card__mask opacity: inherit!important; visibility: visible!important; .bili-video-card__stats &:before opacity: 0; .bili-video-card__wrap height: 100% display: flex; flex-direction: column; .bili-video-card__image--wrap padding-top: 0px!important; .bili-watch-later picture border-radius: inherit!important; object-fit: fill!important; .bili-video-card__stats border-bottom-left-radius: 4px!important; border-bottom-right-radius: 4px!important; padding: 0px!important; background-image: none!important; height: auto!important; &--left //播放量和弹幕量 把它从视频那边拽到信息那边 position: relative; top: 75px!important; left: 9px!important; color: #99a2aa!important; font-size: 12px!important; line-height: 16px!important; svg color: #99a2aa!important; width: svgSize+1!important; height: svgSize+1!important; &__duration //视频长度 position: absolute; right: 0; bottom: 0; line-height: 18px; padding: 0 5px; color: #fff; background-color: #333; background-color: rgba(0,0,0,.5); border-top-left-radius: 4px; .bili-video-card__info //视频信息 padding: 8px 10px 0!important; margin-top: 0px!important; flex: 1; &--tit //标题 lineHeight=20px; font-size: 12px!important; line-height: lineHeight!important; color: #222!important; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif !important; padding-right: 0px!important; height:lineHeight*2!important; &--right height: 100%!important; display: flex!important; flex-direction: column!important; justify-content: space-between!important; &--bottom margin-bottom: 8px!important; font-size:12px!important; line-height: 16px!important; color:#99a2aa!important; &--author-ico //UP主图标 width: svgSize!important; height: svgSize!important; use stroke-width: 2px; //图片尺寸,但没有作用,需要找其他方法 &--cheese //课堂图标 width: svgSize+9!important; height: svgSize!important; /* .to_hide_xs // .to_hide_md //自适应不显示超过的视频项目 .to_hide_xl // display:block!important; &>div:nth-last-child(1) &>div:nth-last-child(2) display:none!important; */ .video-v //直接搜索BV号的结果,采用列表显示方式(临时处理) height: 132.188px; //列表高度 .bili-video-card__wrap //图片占比 >a:first-child flex: 0 0 251px; max-width: 251px; .bili-video-card__info .bili-video-card__av width: 100%; &--tit width: 100%; span:last-child //标题长度裁剪,省略号(新版好像没有这个) text-overflow: ellipsis; white-space: nowrap; overflow: hidden; /* 视频项目 end */ //番剧、综艺 视频播放页 stylusBangumi() :root --right-bar-width: 320px; --o: calc(16 * (0.743 * 100vh - 108.7px) / 9); --r: calc(100vw - 152px - 350px); --s: clamp(638px, calc(min(var(--r), var(--o))), 1280px); --l: calc(var(--s) + 350px); --video-height: calc(9 * (var(--s)) / 16 + 46px); .main-container --containerWidth: var(--l); #bilibili-player-wrap height: var(--video-height); #bilibili-player .bpx-player-sending-bar height:46px !important; div[class*="eplist_ep_list_wrapper"] div[class*="numberList_wrapper"] gap: 10px 9px; div[class*="numberListItem_number_list_item"] //单集数项目 width: 64px; height: 36px; border-radius: 2px; background-color: #fff; border: 1px solid #e5e9ef; padding: 0; text-align: center; transition: none; overflow: visible; opacity: 1; margin: 0px!important; span[class*="numberListItem_title"] //单集数文字 overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; height: 36px; line-height: 36px; display: block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; div[class*="numberListItem_badge"] //单集数标识(限免、会员等) height: 16px; line-height: 16px; top: -4px; right: -2px; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; border-radius: 0px; div[class*="numberListItem_select"] //当前单集数项目 border-color: #00a1d6; background-color: #00a1d6; color: #fff; div[class*="RecommendItem_wrap"] div[class*="RecommendItem_cover"] width: 141px; height: 80px; border-radius: 2px; div[class*="RecommendItem_right_wrap"] margin: 0px!important; div[class*="RecommendItem_title"] font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; stylusAreaComment() stylusAreaCommentShadowDOMVer() @-moz-document url-prefix("https://www.bilibili.com/video/") //视频播放页 if topbarVideo == 1 stylusTopbar() if pageVideo == 1 stylusVideo() @-moz-document url-prefix("https://www.bilibili.com/list") //视频列表 视频播放页(稍后再看 播放全部 等) if topbarSearch == 1 stylusTopbar() if pageVideo == 1 stylusVideo() @-moz-document url-prefix("https://search.bilibili.com/") //搜索页 if topbarSearch == 1 stylusTopbar() if pageSearch == 1 stylusSearch() @-moz-document url-prefix("https://space.bilibili.com/") //个人空间 stylusTopbar() @-moz-document url-prefix("https://www.bilibili.com/bangumi/play/ss") //番剧、综艺播放页 stylusTopbar() stylusBangumi() @-moz-document url-prefix("https://www.bilibili.com/bangumi/play/ep") //电影、电视剧播放页 stylusTopbar() stylusBangumi() @-moz-document url-prefix("https://t.bilibili.com/") //动态首页 stylusTopbar() @-moz-document url-prefix("https://www.bilibili.com/read/") //专栏 stylusTopbar()