YouTube: Floating Chat Window on Fullscreen

To make floating chat window on fullscreen
目前为 2023-07-20 提交的版本。查看最新版本。
Wrap lines
/* ==UserStyle==
@name           YouTube: Floating Chat Window on Fullscreen
@version        0.1.2
@namespace      github.com/cyfung1031
@license        MIT
@description    To make floating chat window on fullscreen
@author         CY Fung
@preprocessor   stylus
@var color      color-handle-light               "Handle Color (Light Theme)"                       #0cb8da
@var color      color-handle-dark                "Handle Color (Dark Theme)"                        #0c74e4
==/UserStyle== */

            
@-moz-document url-prefix("https://www.youtube.com/") {


    userscript-control[enable-shorts-channel-handle-to-name] {
        top:0;
    }

    [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) {
      position:fixed !important;
        top: var(--f3-top, 5px) !important;
        left: var(--f3-left, calc(60vw + 100px)) !important;
        height: var(--f3-h, 60vh) !important;
        width: var(--f3-w, 320px) !important; 
        display:flex !important;
        flex-direction: column !important;
        padding: 4px;
        cursor: all-scroll;
        z-index:9999;
        box-sizing: border-box !important;
        margin:0 !important;
        opacity: var(--floating-window-opacity, 1.0) !important;
    }

    .no-floating[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) {

        top: -300vh !important;
        left: -300vh !important;
    }


    [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) #show-hide-button[class]{
        flex-grow: 0;
        flex-shrink:0;
        position:static;
        cursor: all-scroll;
    }
    [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) #show-hide-button[class] *[class]{
        cursor: inherit;
    }
    [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) iframe[class]{
        flex-grow: 100;
        flex-shrink:0;
        height: 0;
        position:static;
    }


    html{
        --f7-handle-color: color-handle-light;
    }
    html[dark]{
        --f7-handle-color: color-handle-dark;
    }
    :fullscreen .resize-handle{

        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: transparent;
        right: 0;
        border: 4px solid var(--f7-handle-color);
        z-index: 999;
        border-radius: inherit;
        box-sizing: border-box;
        pointer-events:none;
    }

    [moving] {
        cursor: all-scroll;
        --pointer-events:initial;
    }

    [moving] body {
        --pointer-events:none;
    }

    [moving] ytd-live-chat-frame#chat{

        --pointer-events:initial;
    }


    [moving] ytd-live-chat-frame#chat iframe {

        --pointer-events:none;
    }


    [moving="move"]  ytd-live-chat-frame#chat {
        background-color: var(--yt-spec-general-background-a);

    }


    [moving="move"] ytd-live-chat-frame#chat iframe {

        visibility: collapse;
    }

    [moving] * {
        pointer-events:var(--pointer-events) !important;

    }

    :fullscreen tyt-iframe-popup-btn{
        display: none !important;
    }

    [moving] tyt-iframe-popup-btn{
        display: none !important;
    }

  
  
    
}
欢迎访问Greasy Fork镜像
