ニコニコ動画 没入デザイン(仮) by yyya_nico

/* ==UserStyle==
@name           ニコニコ動画 没入デザイン
@namespace      userstyles.world/user/yyya_nico
@version        1.0.4
@description    心地よい視界を目指す
@author         yyya_nico
@license        CC-BY-4.0
==/UserStyle== */

@-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
    :root {
        --MainSideMargin: 0px;
        --videorightspase: 0px;
        --Mainwidth: max(min(calc(100vw - var(--MainSideMargin) * 2), 1920px) , 1024px);
    }
    
    html, body {
        scrollbar-width: none;
    }

    html::-webkit-scrollbar, body::-webkit-scrollbar {
        display: none;
    }
    
    body:not(.nofix) #CommonHeader {
        margin-bottom: calc(var(--commonHeader--height) * -1);
        transform: translateY(calc(var(--commonHeader--height) * -1));
        transition: transform .2s ease-out;
    }
    
    body:not(.nofix) #CommonHeader:is(:has(~* .is-mouseMoving), :hover, :has(~* .HeaderContainer-searchBox:hover), :has(~* .HeaderContainer-searchBox:has(:focus))), body:not(.nofix) :is(:has(.is-mouseMoving), :has(#CommonHeader:hover), :has(~* .HeaderContainer-searchBox:hover), :has(~* .HeaderContainer-searchBox:has(:focus))) .simplebar-content > div:first-child {
        transform: none;
    }
    
    .simplebar-content > div:first-child {
        transform: translateY(calc(var(--commonHeader--height) * -1));
        transition: transform .2s ease-out;
    }
    
    .EditorMenuContainer {
        position: relative;
        margin-bottom: -40px;
        transform: translateY(-40px);
        transition: transform .2s ease-out;
    }
    
    .EditorMenuContainer-menuBox {
        float: none;
    }
    
    body:not(.nofix):has(.is-mouseMoving, #CommonHeader:hover) .EditorMenuContainer {
        transform: translateY(var(--commonHeader--height));
    }
    
    .HeaderContainer-searchBox {
        transform: translate(466px, calc(var(--commonHeader--height) * -1));
        transition: transform .2s ease-out;
    }
    
    body:has(.is-mouseMoving, #CommonHeader:hover) .HeaderContainer-searchBox, .HeaderContainer-searchBox:hover, .HeaderContainer-searchBox:has(:focus) {
        transform: translate(466px);
    }
    
    .MainContainer {
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin-top: 0;
    }
    
    body:not(.is-fullscreen) .MainContainer-player {
        /* width: 177.78vh;
        max-width: 100%;
        height: 56.25vw;
        max-height: 100%; */
        width: 100%;
        height: 100%;
    }
    
    body:not(.is-fullscreen) .PlayerContainer {
        height: 100%;
    }
    
    body.is-autoResize:not(.is-fullscreen) .VideoContainer {
        width: 100%;
        height: 100%;
    }
    
    body:not(.is-fullscreen) .ControllerBoxContainer, body:not(.is-fullscreen) .ControllerContainer {
        width: auto;
    }
    
    body:not(.is-fullscreen) .SeekBar {
        overflow-x: clip;
    }
    
    .VideoContainer, .VideoContainer .VideoPlayer, .VideoSymbolContainer, .VideoContainer .VideoEndScreenContainer {
        z-index: auto;
    }
    
    body:not(.is-fullscreen) .ControllerBoxCommentAreaContainer {
        /* right: min(-50vw + 88.89vh + 10px, 0px);
        bottom: min(-40vh + 28.125vw, 10vh); */
        right: 0;
        bottom: 10vh;
        opacity: .4;
    }
    
    .MainContainer-playerPanel {
        position: absolute;
        top: 10%;
        right: 0;
        opacity: .4;
        height: 80%;
        transition: opacity .2s ease-out;
    }
    
    body:not(.is-fullscreen) .ControllerBoxCommentAreaContainer:hover, .MainContainer-playerPanel:hover {
        opacity: .8;
    }
    
    .Grid.VideoMenuContainer .LikeActionButton {
        background: #fff;
    }
    
    .TagContainer, .HeaderContainer-topArea {
        grid-column: 1 / -1;
    }
    
    div.HeaderContainer > div.Grid.HeaderContainer-row > div.GridCell.col-full {
        grid-column: 2 / -1;
    }
    
    /* .BottomMainContainer {
        padding-right: var(--videorightspase);
    } */
}