Restore Old YouTube UI by mmahhi

Details

Authormmahhi

LicenseMIT License

Categorywww.youtube.com

Created1 year, 11 months ago

Updated4 months, 1 week ago

Size31 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

YouTubeの動画再生ページのデザインを2022年10月25日より前のデザインに戻します。

Notes

概要

YouTubeの動画再生ページのデザインを2022年10月25日より前のデザインに戻すユーザーCSSです。

謝辞

一部のコードは、MITライセンスで公開されている「Midnight UI for YouTube」を使用しております。プログラム作成者のcarterisonline様に深く感謝申し上げます。

Midnight UI for YouTube
Copyright (c) 2022 carterisonline
Released under the MIT license
https://opensource.org/licenses/mit-license.php

サポート

ユーザーCSSのインストール方法については、こちらのページをご覧ください。
→「ユーザーCSSのインストール方法について」

Firefoxにて動作確認をしております。不具合がありましたらご連絡ください。可能な限り対応します。
ご意見、感想、不具合報告などは、こちらのページからどうぞ。
→「ユーザーCSSに関するお問い合わせフォーム」

更新履歴

Ver.1.0.0 (2022/12/10)

公開

Ver.1.0.1 (2022/12/16)

新しい通知設定ボタンに対応。
再生リストのボタンへの干渉を修正。
「おすすめユーザー」などにあるチャンネル登録ボタンを見やすくなるよう修正。

Ver.1.1.0 (2022/12/18)

チャンネル登録ボタンなどが大文字になるようにした。
英語圏への対応を強化。

Ver.1.2.0 (2023/01/07)

ライトモードの時の「メンバーになる」リンクの配色を修正。
「メンバーになる」リンクのデザイン変更対象を広げた。
概要欄下の「ゲーム」部分を概要欄と同じだけ左側にスペースを取るようにした。

Ver.1.2.1 (2023/02/12)

YouTubeタグの位置移動に対処するために、以下の対策を実施。
- 視聴回数と投稿日時の部分をある程度の大きさに指定。
- YouTubeタグを今までと同じ位置に表示。

Ver.1.2.2 (2023/02/18)

Ver.1.1.0で行った英語圏への対応が、言語設定が「English (US)」の時に動かない不具合を修正。
Ver.1.2.1で行った視聴回数と投稿日時の部分をある程度の大きさに指定する対策を、英語圏に向けて最適化。

Ver.1.2.3 (2023/03/12)

タイトル上に表示されることのある、ジオタグアイコンが表示されない不具合を修正。

Ver.1.2.4 (2023/04/14)

チャンネル画面で、「メンバーになる」ボタンと「チャンネル登録」ボタンが入れ替わっていた変更を元に戻した。

Ver.1.2.5 (2023/04/28)

投稿日時・視聴回数、高評価ボタン部分の表示が大きく乱れる不具合を修正。

Ver.1.2.6 (2023/05/16)

投稿日時・視聴回数が表示されない不具合を修正。
概要欄の「もっと見る」を押したときに、アニメーションが表示される不具合を修正。

Ver.1.2.7 (2023/08/09)

概要欄の「...もっと見る」と「...more」をそれぞれ「もっと見る」と「SHOW MORE」に戻すようにした。
※英語、日本語のみの対応です。

Ver.1.2.8 (2023/10/06)

高評価ボタンなどの部分の表示が、投稿日時・視聴回数部分にはみ出しやすくなっていた不具合を修正。

Ver.1.2.9 (2023/10/26)

投稿日時・視聴回数が表示されない不具合を修正。

Ver.1.2.10 (2023/10/31)

プロフィール画面を前の表示に戻す機能「Restore Channel Header」を追加。

Ver.1.2.11 (2023/11/13)

「Restore Channel Header」がオンの時に、チャンネル概要を見るボタンがなくなった変更に対処。
（動画数の隣の「＞」から見られます）

Ver.1.2.12 (2023/12/03)

チャンネル登録時に表示されるアニメーションの角の丸まり具合を修正。

Ver.1.2.13 (2023/12/07)

動画タイトルが太字になる不具合を修正。

Ver.1.2.14 (2024/04/04)

通常モードの動画の角が丸まらないように修正。

Ver.1.2.15 (2024/04/12)

「Restore Channel Header」が動作しない不具合を修正。

Ver.1.2.16 (2024/04/14)

高評価ボタンなどの間隔が広めに設定されていた問題を修正。

Ver.1.2.17 (2024/05/10)

チャンネル名が長い場合に表示が乱れる問題に対処。

Ver.1.2.18 (2024/05/26)

「Restore Channel Header」が一部適用されない不具合を修正。

Ver.1.2.19 (2024/05/30)

「Restore Channel Header」が適用されない箇所を修正。

Ver.1.2.20 (2024/07/04)

「もっと見る」ボタンが表示されない問題に対処。

Ver.1.2.21 (2024/07/16)

再生リストの説明欄に「もっと見る」が強制表示される問題を修正。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           Restore Old YouTube UI
@namespace      restore-old-youtube-ui
@version        1.2.21
@description    YouTubeの動画再生ページのデザインを2022年10月25日より前のデザインに戻します。 
@author         mmahhi <mmahhi@s203.xrea.com> (http://mmahhi.s203.xrea.com/)
@homepageURL    http://mmahhi.s203.xrea.com/userstyle/restore-old-youtube-ui/
@supportURL     http://mmahhi.s203.xrea.com/userstyle/contact/
@license        MIT
@preprocessor   stylus
@var checkbox ChannelHeader "Restore Channel Header" 1
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
    /* Restore Old YouTube UI Ver.1.2.21 (2024/07/16) */
    h1.ytd-watch-metadata, ytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer, #label.keyboard-focus.yt-dropdown-menu #icon-label.yt-dropdown-menu, ytd-engagement-panel-title-header-renderer[modern-panels] #title-text.ytd-engagement-panel-title-header-renderer, ytd-engagement-panel-title-header-renderer[modern-panels]:not([ads-semantic-text]) #title-text.ytd-engagement-panel-title-header-renderer, ytd-watch-metadata[title-headline-xs] h1.ytd-watch-metadata, ytd-video-description-transcript-section-renderer[modern-typography] #title.ytd-video-description-transcript-section-renderer {
        font-weight: 500;
    }
    /* チャンネル登録の色を赤に */
    ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled, #subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled, ytd-subscribe-button-renderer .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, .yt-subscribe-button-view-model-wiz__container > button {
        color: var(--yt-spec-static-brand-white) !important;
        background-color: var(--yt-spec-brand-button-background) !important;
        padding: 0px 16px;
        border-radius: 4px;
        height: 38px;
        text-transform: uppercase;
    }
    .ytp-sb-subscribe {
        color: var(--yt-spec-static-brand-white) !important;
        background-color: var(--yt-spec-brand-button-background) !important;
        border-radius: 4px;
        text-transform: uppercase;
    }
    ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover, #subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover,  .ytp-sb-subscribe:hover, .yt-subscribe-button-view-model-wiz__container > button:hover {
        background-color: #e00 !important;
    }
    #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, ytd-subscribe-button-renderer .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal, .yt-subscribe-button-view-model-wiz__container > button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        color: var(--yt-spec-text-secondary) !important;
        background-color: var(--yt-spec-badge-chip-background) !important;
        padding: 0px 16px;
        border-radius: 4px;
        height: 38px;
        text-transform: uppercase;
    }
    #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover, .ytp-sb-unsubscribe:hover, .yt-subscribe-button-view-model-wiz__container > button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover {
        background-color: var(--yt-spec-mono-tonal-hover) !important;
    }
    .ytp-sb-unsubscribe {
        background-color: rgb(240, 240, 240, 0.5);
        color: var(--yt-spec-text-secondary);
        border-radius: 4px;
        text-transform: uppercase;
    }
    html[dark] .ytp-sb-unsubscribe {
        background-color: rgba(80, 80, 80, 0.6);
        color: var(--yt-spec-text-secondary);
    }
    #subscribe-button ytd-subscribe-button-renderer ytd-subscription-notification-toggle-button-renderer-next button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, .yt-subscribe-button-view-model-wiz__container > button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        color: var(--yt-spec-text-primary) !important;
    }
    tp-yt-paper-button.ytd-subscribe-button-renderer {
        line-height: 38px;
    }
    ytd-subscribe-button-renderer[use-keyboard-focused]:not([keyboard-focused]) tp-yt-paper-button.keyboard-focus.ytd-subscribe-button-renderer {
        padding: 0px 16px;
    }
    ytd-subscription-notification-toggle-button-renderer-next button {
        height: 38px !important;
        border-radius: 3px !important;
        /* margin-left: 4px !important; */
    }
    #subscribe-button .animated-action__background-container {
        border-radius: 3px !important;
    }
    /* アナリティクスボタン・動画の編集ボタン・チャンネルの編集ボタン */
    #analytics-button a.yt-spec-button-shape-next--size-m, #subscribe-button a.yt-spec-button-shape-next--size-m, #edit-buttons a.yt-spec-button-shape-next--size-m, #purchase-button .yt-spec-button-shape-next--size-m, #sponsor-button .yt-spec-button-shape-next--size-m {
        border-radius: 4px !important;
    }
    /* メニュー無効化時 */
    .yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--tonal {
        color: var(--yt-spec-text-disabled);
        background-color: transparent;
    }
    /* ボタンとチャンネル概要を2段に */
    ytd-watch-metadata[modern-metapanel-order] #owner.ytd-watch-metadata {
        min-width: 100%;
        width: 100%;
    }
    ytd-video-owner-renderer[watch-metadata-refresh] {
        width: 100%;
    }
    #sponsor-button.ytd-video-owner-renderer:not(:empty), #purchase-button.ytd-video-owner-renderer:not(:empty), #analytics-button.ytd-video-owner-renderer:not(:empty) {
        margin-left: auto;
    }
    #subscribe-button {
        margin-left: auto;
    }
    #top-row.ytd-watch-metadata {
        flex-wrap: wrap;
    }
    #top-row.ytd-watch-metadata[style="border-bottom: 1px solid var(--yt-spec-10-percent-layer); padding-bottom: 10px;"] {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    .ryd-tooltip {
        bottom: -3px !important;
    }
    ytd-watch-metadata #owner {
        order: 2;
    }
    ytd-watch-metadata[actions-on-separate-line] #top-row.ytd-watch-metadata {
        display: flex;
    }
    /* 動画と概要欄の空白を広く */
    ytd-watch-metadata.ytd-watch-flexy {
        margin-top: calc(14px + var(--ytd-margin-3x)); /* 26px */
    }
    /* 概要欄とコメント欄の間に枠線 */
    ytd-watch-metadata.ytd-watch-flexy {
        border-bottom: 1px solid var(--yt-spec-10-percent-layer);
        padding-bottom: 16px;
    }
    /* 動画タイトルを旧デザインの大きさ・フォントに */
    h1.ytd-watch-metadata {
        font-family: "Roboto","Arial",sans-serif;
        font-size: var(--yt-navbar-title-font-size) !important; /* 1.8rem */
        line-height: 2.6rem !important;
    }
    ytd-watch-metadata #owner {
        margin-top: 18px;
        margin-right: 0;
    }
    /* 投稿日時・視聴回数の位置をタイトルの下に移動 */
    ytd-watch-metadata #description {
        position: relative; /* これを起点にする。YouTube側でも指定があるが一応 */
    }
    #info-container.ytd-watch-metadata, ytd-watch-info-text > #info-container.ytd-watch-info-text {
        display: none;
    }
    #ytd-watch-info-text {
        display: block;
    }
    #top-row.ytd-watch-metadata {
        margin-top: 15px;
    }
    #description-inner + tp-yt-paper-tooltip, ytd-watch-info-text tp-yt-paper-tooltip {
        left: 0px !important;
        top: -146px !important;
        z-index: 0;
        -webkit-user-select: auto;
        user-select: auto;
        cursor: auto;
    }
    #description-inner + tp-yt-paper-tooltip #tooltip, #description-inner > ytd-watch-info-text .tp-yt-paper-tooltip {
        display: block !important;
        background: none;
        color: var(--yt-spec-text-secondary);
        font-size: 1.4rem;
        line-height: 2rem;
        padding: 0;
        margin: 0;
        border-radius: 0;
        width: 220px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    ytd-watch-flexy[should-stamp-chat] #description-inner + tp-yt-paper-tooltip #tooltip, ytd-watch-flexy[should-stamp-chat] #description-inner > ytd-watch-info-text .tp-yt-paper-tooltip {
        width: 325px;
    }
    html[lang*="en"] #description-inner + tp-yt-paper-tooltip #tooltip, html[lang*="en"] #description-inner > ytd-watch-info-text .tp-yt-paper-tooltip {
        width: 220px;
    }
    html[lang*="en"] ytd-watch-flexy[should-stamp-chat] #description-inner + tp-yt-paper-tooltip #tooltip, html[lang*="en"] ytd-watch-flexy[should-stamp-chat] #description-inner > ytd-watch-info-text .tp-yt-paper-tooltip {
        width: 370px;
    }
    /* YouTubeタグをタイトル上に表示 */
    yt-formatted-string#super-title {
        display: inline !important;
    }
    /* ジオタグアイコン表示 */
    ytd-watch-metadata #title a.yt-simple-endpoint[href*="/results"] {
        display: inline !important;
    }
    /* チャンネル名が2段になると日付・視聴回数表示がずれるので1段に制限 */
    ytd-watch-metadata.ytd-watch-flexy ytd-channel-name #text.ytd-channel-name > a {
        -webkit-line-clamp: 1;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }
    /* 動画説明欄を旧デザインに戻す */
    ytd-watch-metadata #description, ytd-metadata-row-container-renderer {
        margin-left: 64px;
    }
    #description-inner + tp-yt-paper-tooltip, ytd-watch-info-text tp-yt-paper-tooltip {
        left: -64px !important;
        /* 同時に動く日付・視聴回数を元に戻す */
    }
    ytd-watch-metadata ytd-text-inline-expander {
        border-radius: 0;
        background: none !important;
        padding: 0;
    }
    #description.ytd-watch-metadata {
        border-radius: 0;
        background: none !important;
        ...

Reviews

No reviews yet.