Skip to content

Instantly share code, notes, and snippets.

@vhxubo
Last active March 13, 2021 14:12
Show Gist options
  • Save vhxubo/0debae21c828d6e17ac18808dfe48254 to your computer and use it in GitHub Desktop.
Save vhxubo/0debae21c828d6e17ac18808dfe48254 to your computer and use it in GitHub Desktop.
替换bilibili网站的综合热门、每周必看、入站必刷的卡片样式,2列转换为1列。

bilibili221.user.js

bilibili网站的综合热门、每周必看、入站必刷的卡片均为两列,总觉得看的很别扭,眼睛要蛇形去查看各个卡片内容,如下图所示

双列

对于我而言,一般情况下还是会居中看东西的,而且像知乎和掘金基本都是将整体居中展示的

通过修改网页的CSS样式,就可以实现二列转一列的效果,如下图所示

单列

// ==UserScript==
// @name bilibili热门页2列转1列
// @version 0.1
// @description 替换bilibili网站的综合热门、每周必看、入站必刷的卡片样式,2列转换为1列。
// @author vhxubo
// @match https://www.bilibili.com/v/popular/all*
// @match https://www.bilibili.com/v/popular/weekly*
// @match https://www.bilibili.com/v/popular/history*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
let css = `
#app {
max-width: 1000px; /*设置框架最大宽度*/
}
.video-card {
height: auto !important;
width: 100% !important;
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
margin-bottom: 16px !important;
border-radius: 0.375rem !important;
overflow: hidden;
}
.video-card:hover {
transition: 0.2s;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.video-card:nth-child(odd) {
margin-right: 0 !important;
}
.video-card__info {
padding: 16px 0 !important;
}
.video-name {
font-size: 18px !important;
margin-bottom: 16px !important;
}
.video-card__content {
height: auto !important;
width: 250px !important;
}
.video-card__content .cover-picture__image {
border-radius: 0 !important;
}
`;
GM_addStyle(css);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment