Restore Old YouTube UI by mmahhi

Details

Authormmahhi

LicenseMIT License

Categorywww.youtube.com

Created1 year, 4 months ago

Updated2 weeks, 2 days ago

Size29 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です。

Firefoxにて動作確認をしております。不具合がありましたらご連絡ください。可能な限り対応します。
ご意見や感想、不具合報告などは、こちらからどうぞ。
連絡先：http://mmahhi.s203.xrea.com/contact/

謝辞

一部のコードは、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

更新履歴

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)

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

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.16
@description    YouTubeの動画再生ページのデザインを2022年10月25日より前のデザインに戻します。 
@author         mmahhi <mmahhi@s203.xrea.com> (http://mmahhi.s203.xrea.com/)
@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.16 (2024/04/14) */
    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;
    }
    /* 動画説明欄を旧デザインに戻す */
    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;
        padding: 0;
    }
    #description-inner.ytd-watch-metadata {
        margin: 0;
    }
    ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata {
        cursor: auto;
    }
    ytd-watch-metadata #snippet {
        mask-image: none !important;
    }
    ytd-watch-metadata #ellipsis.ytd-text-inline-expander {
        display: none;
    }
    ytd-watch-metadata ytd-text-inline-expander #plain-snippet-text, ...

Reviews

No reviews yet.