替换bilibili网站的综合热门、每周必看、入站必刷的卡片样式，2列转换为1列。

README.md

bilibili221.user.js

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

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

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

bilibili221.user.js

// ==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);
})();