// ==UserScript==
// @name         Bilibili 动态页宽屏优化
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  优化B站动态页在宽屏显示器上的布局，增加内容区域宽度。
// @author       vnry
// @match        https://t.bilibili.com/*
// @grant        none
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.textContent = `

@media screen and (min-width: 1380px) {
    :root {
        --inject-page-width: 2200px !important;
    }
    #app .bili-dyn-home--member {
        width: var(--inject-page-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #app .bili-dyn-home--member > main {
        flex: 1 !important;
        width: auto !important;
        margin-right: 20px !important;
    }
    #app .bili-dyn-home--member aside.left {
        flex-shrink: 0 !important;
        width: 280px !important;
        margin-right: 20px !important;
    }
    #app .bili-dyn-home--member aside.right {
        flex-shrink: 0 !important;
        width: 360px !important;
    }
    .bili-dyn-publishing {
        width: 100% !important;
        box-sizing: border-box;
    }
    .bili-dyn-up-list {
        width: 100% !important;
    }
    .bili-dyn-list {
        width: 100% !important;
    }
    .bili-dyn-item {
        min-width: unset !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .bili-dyn-item__main {
        padding-left: 88px !important;
        padding-right: 20px !important;
    }
    .bili-dyn-content__orig.reference {
        padding: 20px !important;
        box-sizing: border-box;
    }
    .bili-dyn-card-video {
        width: 100% !important;
        height: 180px !important;
        box-sizing: border-box;
    }
    .bili-dyn-card-video__header {
        width: 320px !important;
        flex-shrink: 0;
    }
    .bili-dyn-card-video__body {
        flex: 1 !important;
        padding: 16px 20px 14px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .bili-dyn-card-video__title {
        font-size: 16px !important;
        line-height: 24px !important;
        -webkit-line-clamp: 2 !important;
        height: auto !important;
    }
    .bili-dyn-card-video__desc {
        font-size: 14px !important;
        line-height: 20px !important;
        -webkit-line-clamp: 3 !important;
        height: auto !important;
        margin-top: 8px !important;
    }
    .bili-dyn-card-video__stat {
        position: relative !important;
        bottom: unset !important;
        left: unset !important;
        margin-top: auto !important;
    }
    .dyn-card-opus__pics {
        margin-top: 16px !important;
    }
    .bili-album__preview.grid3 {
        width: 100% !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
    }
    .bili-album__preview.grid2 {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 8px !important;
    }
    .bili-album__preview.single .bili-album__preview__picture {
        width: 50% !important;
        height: auto !important;
        max-height: 500px;
    }
    .bili-album__preview__picture__img {
        height: 100% !important;
    }
    .bili-dyn-my-info {
        padding: 20px !important;
    }
    .bili-dyn-live-users {
        padding: 20px !important;
    }
    .bili-dyn-search-trendings {
        padding: 20px !important;
    }
    .bili-dyn-search-trendings .trending-list .trending {
        padding: 0 16px !important;
        height: 48px !important;
    }
    .bili-dyn-search-trendings .trending-list .trending .text {
        font-size: 16px !important;
    }
    .bili-dyn-search-trendings .trending-list .trending .prefix {
        font-size: 18px !important;
    }
    .bili-dyn-sidebar {
        right: calc(50vw - (var(--inject-page-width) / 2) + 360px + 20px) !important;
        transform: translateX(0) !important;
    }
}
.bili-header__bar {
    max-width: var(--inject-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#app {
    max-width: unset !important;
    min-width: 1200px !important;
}
#app .bgc,
#app .bg {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
}
    `;
    document.head.appendChild(style);
})();