Greasy Fork 镜像站

bilibili播放界面卡片ui

初学css，简单修改了一些样式，主要是修改为卡片式UI
Asenna tämä skripti ? Install as user style ?
Ask a question, post a review, or report the script.
Wrap lines
/* ==UserStyle==
@name bilibili播放界面卡片ui
@description 初学css，简单修改了一些样式，主要是修改为卡片式UI

@version 0.0.1.20230109140508
@namespace https://greasyfork.org/users/1008796
==/UserStyle== */
@-moz-document domain("bilibili.com/video"){
#comment {
	margin-top: 0px!important;
}
#comment * {
	background: none;
}
.reply-box {
	border-radius: 10px;
	background: #fff!important;
	display: flex;
	justify-content: center;
	height: 80px!important;
	padding-right: 20px
}
.reply-item {
	margin-bottom: 20px;
	border-radius: 10px;
	background: #fff!important;
	padding: 0px 20px 0 0px!important;
	text-align: justify;
}
.sub-reply-list {
	background-color: #f1f1f1a3!important;
	border-radius: 10px;
	margin: 8px
}
.view-more-default,.view-more-pagination{
	padding: 10px;
}

.reply-content {
	line-height: 1em!important;
	color: #545353!important
}
.icon.search-word{
	background-size: 11px!important;
}
.reply-box-warp {
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.reply-box-warp textarea {

	line-height: 38px!important;
}
.reply-box .box-normal .reply-box-send[data-v-11f17fb2] {

	flex-basis: 90px;

	border-radius: 888820px!important
}
.view-more-btn {
	background-color: #fb7299!important;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 10px;
	transition: all .4s
}
.view-more-btn:hover {
	background-color: #6ebcff!important;
	color: #fff!important;
	transition: all 1.6s
}
#app {
	background-color: #dbdbdb36
}
#v_desc {
	margin-bottom: 15px;
	border-radius: 10px;
	background: #fff!important;
	padding: 10px 20px;
}
.desc-info.desc-v2 {
	background: url("https://s1.ax1x.com/2022/12/28/pSSFl8I.png") no-repeat right bottom;
	background-size: 20%;
	line-height: 1.8em;
	letter-spacing: 1px;
	min-height: 100px!important
}
.desc-info-text {
	line-height: 2em;
	color: #393939;
	text-align: justify-all!important;
	background-color: #ffffffe3
}
.tag-link.bgm-link {
    background: #afd6f778 !important;
    border-radius: 6px!important;
    color: #2897f7!important;
    letter-spacing: 0.5px;
}

.tag-area.clearfix a {
	background: #fff!important;
	border-radius: 6px!important;
}
#activity_vote {
	display: none;
}
.reply-box .box-normal .reply-box-warp .reply-box-textarea[data-v-11f17fb2] {

	line-height: 100%;
}

.base-video-sections-v1 {
	background-color: #fff!important;
	height: 300px;
	padding-top: 15px!important
}
.video-sections-content-list {
	max-height: 220px!important;
	height: 220px!important
}
.bui-collapse-header {
	background-color: #fff!important;
	border-radius: 3330px!important
}

.fixed-reply-box {
	display: none
}

.pagination-page-number,
.pagination-btn {
	background-color: #6ebcff!important;
	padding: 4px 8px;
	margin: 5px!important;
	border-radius: 4px;
	color: #fff;
}
.pagination-page-number.current-page {
	color: #fff!important;
	background-color: #fb7299!important
}

.card-box {
	background: #fff!important;
	padding: 8px 4px 8px 8px;
	border-radius: 6px;
}
.rec-footer {
	background: #fff!important;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #898989!important;
	letter-spacing: 15px
}
.reply-item .bottom-line[data-v-7df4d141] {
	margin-left: 80px;
	border-bottom: 1px solid #0000;
	margin-top: 14px;
}

.toolbar-left > span {
	margin-right: 15px!important;
	background-color: #fff;
	padding: 6px 14px;
	border-radius: 6px!important;
	transition: all 6s
}
.toolbar-left > span:hover {
	background-color: #d6ecff;
	transition: all 1s
}
.video-toolbar-v1 .toolbar-left .share .info-text {
	display: flex;
	align-items: center;
}
.video-toolbar-v1 .toolbar-left > span {
	width: auto;
}
#share-btn-outer > div {
	width: 90px!important;
}
#share-btn-outer {
	width: 70px!important;
	transition: width 1s
}
#share-btn-outer:hover {
	width: 130px!important;
	transition: width .7s
}
canvas {
	left: 10px!important;
	top: 3px!important;
}
.video-toolbar-v1 {
	border-bottom: none;
}
.video-desc-v1 {
	margin: 6px 0;
}
.video-info-v1 .video-data {
    height: 34px;
}

.video-data-list>span{
	margin: 0px 20px 0px 3px!important;
	transform: scale(1.05)
}
.video-title.tit{
	padding-left: 5px;
	font-size: 21px!important;
	font-weight: 600!important;
	letter-spacing: 1px;
	color: #4d4d4d!important;
	border-left: 0px solid #4d4d4d;
	
}

#danmukuBox div{
	border-radius: 6px!important
}
.bpx-player-dm-wrap{
	height: 340px!important
}
.bpx-player-auxiliary .bpx-player-dm-btn-history {
    margin: 8px auto;
}
#playerWrap *{
	border-radius: 6px!important;
}
}
扫码关注【爱吃馍】
