opus-widen-dyn-list.user.css

/* ==UserStyle==
@name           动态列表变宽加强版
@namespace      dobby233liu.github.io
@version        1.2.4
@license        BSD-0-Clause
@author         Liu Wenyuan
@homepageURL    https://gist.github.com/Dobby233Liu/3f08f12a2c675f8b847dfbbb6ce34452
@supportURL     https://gist.github.com/Dobby233Liu/3f08f12a2c675f8b847dfbbb6ce34452#comments
@updateURL      https://gist.githubusercontent.com/Dobby233Liu/3f08f12a2c675f8b847dfbbb6ce34452/raw/opus-widen-dyn-list.user.css
@preprocessor   less
==/UserStyle== */

@section-gap: 10px;

.album-expanded-style() {
    /* weibo-style */
    .bili-album__watch__content {
        text-align: left;
    }
    .bili-album__watch__content img {
        width: 100%;
        height: auto;

        max-width: fit-content;
        /* alternatively: */
        /* object-fit: contain; */
    }
}

@-moz-document domain("t.bilibili.com") {
    #bili-header-container {
        width: 100%;
        /*overflow-x: scroll;*/
    }
    .bili-header {
        min-width: 0;
        max-width: 100%;
    }
    .bili-header .bili-header__bar {
        max-width: 100%;
    }


    #app {
        min-width: unset;
        max-width: unset;
        text-size-adjust: 100%;
    }

    .bili-dyn-home--member, .bili-dyn-home--visitor {
        justify-content: center;
        padding: 0;
        margin: 0 @section-gap;
        gap: @section-gap;
    }


    aside.left {
        width: auto !important;
        min-width: 194px;
        flex: 0 1;
        flex-basis: max(20%, 264px);
        transition: flex-basis 0.2s ease-in;
        margin: 0;
    }
    main {
        min-width: 0; width: auto !important;
        flex: 1 1;
        /*flex-basis: 556px;*/
        transition: flex-basis 0.2s ease-in;
        margin: 0;
    }
    @aside-right-width: max(20%, 318px);
    aside.right {
        width: auto !important;
        min-width: 246px;
        flex: 0 1;
        flex-basis: @aside-right-width;
        transition: flex-basis 0.2s ease-in;
        margin: 0;
    }


    .bili-dyn-sidebar {
        width: 40px;
        /* aside.right size / 2 + right margin */
        right: calc(@aside-right-width / 2 + @section-gap) !important;
        transform: translateX(50%) !important;
    }


    #hide-right-side() {
        aside.right {
            display: none;
        }
        .bili-dyn-sidebar {
            right: max(5vw, 60px) !important;
        }
    }
    /* bilibili-cleaner compat */
    .bili-dyn-home--member:not(:has(aside.right > :first-child)),
    html[hide-dynamic-page-bili-dyn-banner]
        .bili-dyn-home--member:has(aside.right > .bili-dyn-banner:last-child:nth-child(1)),
    html[hide-dynamic-page-bili-dyn-ads]
        .bili-dyn-home--member:has(aside.right > .bili-dyn-ads:last-child:nth-child(1)),
    html[hide-dynamic-page-bili-dyn-banner][hide-dynamic-page-bili-dyn-ads]
        .bili-dyn-home--member:has(aside.right > .bili-dyn-banner:nth-child(1))
                                :has(aside.right > .bili-dyn-ads:last-child:nth-child(2)),
    html[hide-dynamic-page-bili-dyn-banner][hide-dynamic-page-bili-dyn-ads]
        .bili-dyn-home--member:has(aside.right > .bili-dyn-ads:nth-child(1))
                                :has(aside.right > .bili-dyn-banner:last-child:nth-child(2))
    {
        #hide-right-side();
    }
    @media (max-width: 1040px) { /* extreme width (FIXME: calc) */
        #hide-right-side();
    }

    @media (max-width: 868px) { /* extreme width (FIXME: calc) */
        aside.left {
            display: none;
        }
    }


    .album-expanded-style();


    .bili-dyn-item__footer {
        justify-content: space-between;
    }
    .bili-dyn-action {
        width: auto;
    }
    /* straight up hide placeholdered unavailable actions */
    /*.bili-dyn-item__action:has(.bili-dyn-item__action__shim) {
        display: none;
    }*/


    #app:has(> .content) { /* specifically content pages */
        .content {
            width: auto;
        }
        .content .card {
            margin: 0;
        }

        .content:has(.sidebar-wrap) {
            display: flex;
            flex-direction: row;
            margin: 0 @section-gap;
            gap: @section-gap;
        }
        .content:has(.sidebar-wrap) .card {
            flex: 1 1;
            min-width: 0;
        }

        .sidebar-wrap {
            position: relative;
            top: 0; right: 0;
            margin: 0;
            min-width: 0;
        }
        .sidebar-wrap .side-toolbar {
            position: sticky;
            top: 180px;
        }
        @media (max-width: 986px) { /* extreme width (FIXME: calc) */
            .sidebar-wrap {
                display: none;
            }
        }
    }
}

@-moz-document url-prefix("https://www.bilibili.com/opus") {
    /* HACK:
        things are laid out like this in the tree:
        - div.opus-detail
            - .bili-opus-view
            - .opus-tabs
            - .right-sidebar-wrap
        so using a flexbox is infeasible, and I don't know how to reflow
        the layout
        though the stock CSS does something weird around this as well
    */
    .opus-detail {
        width: auto;
        margin: 0 @section-gap;
        text-size-adjust: 100%;
        /* with how we set up the right sidebar this would fill the screen */
        background-color: transparent;
    }
    .bili-opus-view, .opus-tabs {
        /* gap + right sidebar width */
        /* FIXME: emulate shrinking */
        width: calc(100% - @section-gap - 58px);
        background-color: var(--bg1);
    }

    .right-sidebar-wrap {
        position: fixed;
        margin: 0;
        right: @section-gap;
    }
    @media (max-width: 1043.5px) { /* extreme width (FIXME: calc) */
        .right-sidebar-wrap {
            display: none;
        }
    }

    .fixed-author-header__inner {
        width: auto;
        /* .opus-module-author padding */
        margin: 0 calc(@section-gap + 56px);
    }

    .album-expanded-style();
}

@-moz-document url-prefix("https://www.bilibili.com/v/topic") {
    @topic-h-padding: 64px;
    @topic-h-padding-inner: calc(@topic-h-padding + 64px);

    .main-part {
        flex: 1;
        width: auto;
        min-width: unset; max-width: unset;
    }

    /*.topic-detail {
        padding: 0 @topic-h-padding;
    }*/
    /* ^ causes visual issues with .topic-detail__header so indiviually pad everything */

    .topic-nav {
        padding: 0 @topic-h-padding;
    }

    .topic-detail__header .main-part {
        margin-left: @topic-h-padding-inner;
        margin-right: @topic-h-padding-inner;
    }
    .topic-detail__content {
        padding: 0 @topic-h-padding-inner;
    }

    .list__topic-card .bili-dyn-item {
        min-width: unset !important;
        max-width: unset !important;
    }

    .album-expanded-style();
}