/* ==UserStyle==
@name         YOUTUBE 2025 - FIX NEW UI
@version      20251020
@namespace    ?
@description  Makes new UI look like an old one
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
    :root{
        --toolbar-height: 46px;
        --element-margin: 0px;
        --element-height: calc(var(--toolbar-height) - var(--element-margin));

        --bg-color: #0000;
    }

    /* 強制移除所有放大效果的樣式*/
    .ytp-big-mode {
        all: unset !important;
    }

    /* 懸浮提示位置下移，用於劇院模式*/
    #player-full-bleed-container:has(#player-container) .ytp-delhi-modern .ytp-tooltip:not(.ytp-preview){
        margin-top: calc(96px - var(--toolbar-height)) !important;
    }

    /* 預覽畫面位置下移，用於劇院模式*/
    #player-full-bleed-container:has(#player-container) .ytp-delhi-modern .ytp-tooltip:is(.ytp-preview){
        margin-top: calc((96px - var(--toolbar-height)) * 1.8) !important;
    }

    /* 控制面板陰影 */
    .ytp-delhi-modern .ytp-chrome-bottom::before {
        content: "";
        position: absolute;
        left: -40px;
        right: -40px;   /* 左右各超出 20px */
        top: calc(var(--toolbar-height) * -1);
        bottom: 0;
        background: linear-gradient(to top,rgba(0, 0, 0, 0.4) 0%,rgba(0, 0, 0, 0) 50%) !important;
    }

    /* 隱藏正中央下方的expand按鈕 */
    .ytp-fullscreen-grid-expand-button {
        display: none;
    }

    .ytp-delhi-modern .ytp-chrome-bottom, .ytp-delhi-modern .ytp-chrome-controls, .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chrome-bottomt{
        height: var(--toolbar-height) !important;
        line-height: var(--toolbar-height) !important;
    }

    .ytp-right-controls{
        height: 100% !important;
    }

    .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-progress-bar-container, .ytp-delhi-modern:not(.ytp-player-minimized) .ytp-progress-bar-container{
        bottom: var(--toolbar-height) !important;
    }

    /* Overlays container */
    .ytp-delhi-modern.ytp-big-mode.ytp-fullscreen-grid-peeking .ytp-overlays-container, .ytp-delhi-modern.ytp-fullscreen-grid-peeking .ytp-overlays-container{
        bottom: calc( var(--toolbar-height) + 20px) !important;
    }

    .ytp-delhi-modern .ytp-chrome-controls .ytp-right-controls,.ytp-delhi-modern .ytp-prev-button:not(.ytp-miniplayer-button-container>*), .ytp-delhi-modern .ytp-chrome-controls .ytp-next-button:not(.ytp-miniplayer-button-container>*).ytp-playlist-ui{

        padding: 0 !important;
        margin-top:  calc( var(--element-margin) -2px) !important;
    }

    .ytp-delhi-modern .ytp-chrome-controls .ytp-play-button{
        margin: var(--element-margin) 0 !important;
    }

    /* 音量位置 */
    .ytp-delhi-modern.ytp-delhi-horizontal-volume-controls .ytp-volume-area{
        height: 100%;
        margin: var(--element-margin) 0 !important;
    }


    /* 影片時間位置 */
    .ytp-delhi-modern .ytp-time-display:not(.ytp-miniplayer-ui *){
        padding: var(--element-margin) 0 !important;
    }

    .ytp-time-display {
        margin-top: -1px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 影片字型權重 */
    .ytp-time-current{
        font-weight: 400;
    }

    /* 章節位置 */
    .ytp-delhi-modern .ytp-chapter-container{
        padding: var(--element-margin) 0 !important;
    }

    /* 播放按鈕位置和大小 */
    .ytp-delhi-modern .ytp-chrome-controls .ytp-play-button{
        --size: var(--element-height);
        height: var(--size) !important;
        width: var(--size) !important;
    }

    /* 播放按鈕位置和大小 */
    .ytp-delhi-modern-icons .ytp-chrome-controls .ytp-play-button svg {
        padding: 9px !important;
        --size: 28px;
        height: var(--size) !important;
        width: var(--size) !important;
    }

    /* 全螢幕修正 */
    .ytp-delhi-modern.ytp-delhi-horizontal-volume-controls.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-volume-area, .ytp-big-mode .ytp-volume-slider, .ytp-delhi-modern .ytp-chrome-controls .ytp-mute-button, .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-time-display, .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chrome-controls .ytp-next-button:not(.ytp-miniplayer-button-container>*), .ytp-big-mode.ytp-delhi-modern .ytp-chrome-controls .ytp-prev-button:not(ytp-miniplayer-button-container>*), .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-time-wrapper, .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chapter-title.ytp-button{
        height: var(--element-height) !important;
        min-height: var(--element-height) !important;
        line-height: var(--element-height) !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    /*按鈕圖示位置修正*/
    #player-full-bleed-container:has(#player-container) .ytp-button:not([style*="display: none;"]):not(.ytp-expand-right-bottom-section-button):not(.ytp-fullscreen-grid-expand-button),
    #player:is(.style-scope) .ytp-button:not([style*="display: none;"]):not(.ytp-expand-right-bottom-section-button):not(.ytp-fullscreen-grid-expand-button) {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #player-full-bleed-container:has(#player-container) .ytp-chapter-title, #player:is(.style-scope) .ytp-chapter-title {
        height: 100%;
    }

    #player-full-bleed-container:has(#player-container) .ytp-subtitles-button-icon,  #player:is(.style-scope) .ytp-subtitles-button-icon {
        height: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }


    /*音量條修正，用於劇院模式*/
    #player-full-bleed-container:has(#player-container) .ytp-volume-slider-handle::before {
        left: -66px !important;
        width: 66px !important;
    }

    #player-full-bleed-container:has(#player-container) .ytp-volume-slider-handle::after {
        width: 74px !important;
    }

    #player-full-bleed-container:has(#player-container) .ytp-volume-slider-active .ytp-volume-panel {
        width:78px !important;
    }

    /* 移除圖示和進度條的黑色背景 */
    .ytp-delhi-modern .ytp-time-wrapper:not(.ytp-miniplayer-ui *), .ytp-delhi-modern.ytp-delhi-horizontal-volume-controls .ytp-volume-area, .ytp-delhi-modern .ytp-chrome-controls .ytp-play-button, .ytp-delhi-modern .ytp-chrome-controls .ytp-right-controls, .ytp-delhi-modern .ytp-chrome-controls>*>*, .ytp-delhi-modern, .ytp-chapter-title {
        background: var(--bg-color) !important;
    }

    .ytp-chapter-title.ytp-button, .ytp-delhi-modern .ytp-progress-list{
        background: rgba(255,255,255,.2);
    }
}