Skip to content

Restore the UI style before October 2022 by seijiro

Screenshot of Restore the UI style before October 2022
Write a review Install Get Stylus

Details

Authorseijiro

LicenseNo License

Categoryyoutube.com

Created

Updated

Size29 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

2022年10月以前のUI風に復元する

Notes

ブラウザの横幅が狭い人向け
Windows10 chrome ズーム150%で作成

おすすめChrome拡張機能
Return YouTube Dislike
Enhancer for YouTube
YouTubeLiveClock

他ライブチャット欄の文字サイズ・色・高さを変更してます

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 the UI style before October 2022
@namespace      github.com/openstyles/stylus
@version        2023.03.17
@description    Restore the UI style before October 2022
@author         Seijiro
==/UserStyle== */

@-moz-document domain("youtube.com") {
    /*2022年10月以前のUI風に復元する */
}
/* 全体的に上に移動（余白を消す  現行デザイン（A/Bテスト） */
ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]) #primary.ytd-watch-flexy, ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]) #secondary.ytd-watch-flexy{
      margin-top:-24px;
}
/* 全体的に上に移動（余白を消す テストデザイン（A/Bテスト） */
ytd-watch-flexy:not([theater]):not([fullscreen])[no-top-margin] #primary.ytd-watch-flexy, ytd-watch-flexy:not([theater]):not([fullscreen])[no-top-margin] #secondary.ytd-watch-flexy{
    margin-top:-12.3px;
}

/* 動画タイトル名の文字 */
    h1.ytd-watch-metadata {
       font-family: "Roboto","Arial",sans-serif !important;
       font-size: 15px !important;
       line-height: 2.0rem !important;
       font-weight: normal !important;
       max-height: 5.2rem !important;
}
/*ハッシュタグと動画タイトルの並べ替え*/
#title.style-scope.ytd-watch-metadata { 
    display: flex; flex-direction: column-reverse; 
}

/* 動画のハッシュタグ（旧タイトルハッシュタグを復活させる）*/
#super-title.ytd-watch-metadata {
      font-size: 10px;
      margin-top: -5px;
     margin-left: 10px ;
      display: block !important;
}

/* 動画のハッシュタグ（概要欄に移動したタイトルハッシュタグを消す）*/
#info-container a.yt-simple-endpoint.yt-formatted-string {
      font-size: 10px;
      color: var(--yt-spec-call-to-action);
     display:none !important;
}

 /* プレイヤーとタイトル間の余白を消す... */
ytd-watch-flexy[cinematics-enabled] #below.ytd-watch-flexy {
    position: relative;
    top: -12px !important;
}

/* 各種ボタンの色*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
    background-color:#f2f2f200;
    color: var(--yt-spec-text-primary);
}

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    background-color: #c000;
    color: #F2F2F2 ;
}

#button.ytd-menu-renderer yt-icon.ytd-menu-renderer:hover{
    background-color: #eee;
    border-radius: 20px;
    color: #606060;
}

/* アクションボタン上に移動 */
    #top-row.ytd-watch-metadata {
        flex-direction: column-reverse !important;
}

 /* アクション */
ytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata {
    padding: 0;
    position: relative; 
    top: 34px !important;
    right: 0px;
    margin-left: auto;
}
   
/*  右側アイコンの説明文字削除*/
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
    margin-right: -6px !important;
    color: var(--yt-spec-text-primary);
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next--button-text-content {
    color: var(--yt-spec-text-primary);
    font-size: 12px;
    margin-left: 8px !important;
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions div#segmented-like-button .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
    margin-right: 6px !important;
    color: var(--yt-spec-text-primary);
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions ytd-button-renderer .yt-core-attributed-string { 
    display: none; 
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions ytd-button-renderer .yt-spec-button-shape-next--size-m {  
   padding: 0 10px; 
}


/* 高評価*/
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions div#segmented-like-button .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next--button-text-content {
    display:initial !important;
    font-size: 12px;
    margin-right: -10px;
}

ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions ytd-button-renderer {
    margin-left: initial !important;
}

/* 低評価*/
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end {
    font-size: 12px;
    margin-right: -15px;
    color: var(--yt-spec-text-primary);
}

/* 共有非表示 */
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="共有"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
    display:none !important;
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="Share"]{
    margin-left: 8px !important;
}
/* オフライン 非表示 */
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions ytd-download-button-renderer{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
    display:none !important;
}
/* Thanks 非表示*/
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="Thanks"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
    display:none !important;
}
/* クリップ */
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="クリップ"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="Clip"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}
/*  保存  */
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="再生リストに保存"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="Save to playlist"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}
/*  その他の操作  */
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="その他の操作"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}
ytd-watch-metadata[modern-metapanel-order] div#top-row div#actions button[aria-label="More actions"]{
    margin-left: 8px !important;
    color: var(--yt-spec-text-primary);
}

/* 視聴数と開始時刻 上に移動 */
#info-container {
    padding: 0;
    position: absolute;
    top: -110px !important;
    left: 20px !important;
    color: #606060;
    font-size: 14px;
    
}
html[dark=""] #info-container {
    color: #aaaaaa;
}
[dir="ltr"] ytd-watch-metadata[description-collapsed] .ytd-watch-metadata #info-container.ytd-watch-metadata, ytd-watch-metadata[description-collapsed] .ytd-watch-metadata[dir="ltr"] #info-container.ytd-watch-metadata {
    -webkit-mask-image: none;
    mask-image: none;
}
.creator-thumbnail {
    display: flex !important;
}
#more-replies-icon.ytd-comment-replies-renderer {
    margin-right: 0px !important;
}
.yt-spec-button-shape-next--size-s {
    font-size: 14px;
}
#top-row.ytd-watch-metadata {
    margin-top:-30px;
}
.style-scope.yt-sort-filter-sub-menu-renderer.has-items {
    margin-top: 2px;
}
#reply-dialog {
    margin-top: 5px;
}
#expander-contents {
    margin-top: 10px;    
}


/*  アクション下 区切り線*/
ytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata{
   border-bottom: 1px solid #ddd0;    
}

 /* チャンネル登録ボタン右に移動*/
ytd-video-owner-renderer[watch-metadata-refresh] {
      flex-grow: 1;
}

/* オーナー （チャンネル名と登録）*/
#owner.ytd-watch-metadata{
   margin-top: 25px;
}

/* チャンネルアバター */
#avatar.ytd-video-owner-renderer{
    zoom: 0.8;
    margin-top: 15px;
}

/* チャンネル名の文字サイズ */
ytd-video-owner-renderer[modern-metapanel] #channel-name.ytd-video-owner-renderer {
   font-size: 14px !important;
    
}
/* チャンネル名の文字サイズ（ホバー時） */
ytd-video-owner-renderer[modern-metapanel] #channel-name.ytd-video-owner-renderer:hover  {
   font-size: 14px;
    text-decoration : underline;    
}

   /* チャンネル登録者数の文字サイズ */ 
ytd-video-owner-renderer[watch-metadata-refresh] #owner-sub-count.ytd-video-owner-renderer {
    font-size: 12px !important;    
} 

/* チャンネル名 右側余白*/
ytd-video-owner-renderer[watch-metadata-refresh][modern-metapanel] #upload-info.ytd-video-owner-renderer {
    margin-right:120px;
}

/* メンバーになるボタン*/

#sponsor-button ytd-button-renderer yt-button-shape {
    box-sizing: border-box;
    border: solid 1px #F2F2F2;
    border-radius: 20px;
    height: 35px;
}
html[dark] #sponsor-button ytd-button-renderer yt-button-shape {
    box-sizing: border-box;
    border: solid 1px #424242fa;
    border-radius: 20px;
    height: 35px;
}
#sponsor-button ytd-button-renderer yt-button-shape * {
    background: none!important;
}

#sponsor-button ytd-button-renderer yt-button-shape button div span {
    color: var(--yt-spec-call-to-action);
    border-radius: 20px;
}

/* メンバーになる（ホバー時） */
#sponsor-button ytd-button-renderer yt-button-shape:hover {
    background: #def1ff!important;
    border-radius: 20px;
}
#sponsor-button ytd-button-renderer yt-button-shape:hover {
    box-sizing: border-box;
    border: solid 1px #def1ff!important;
    border-radius: 20px;
    height: 35px;
}
html[dark] #sponsor-button ytd-button-renderer yt-button-shape:hover {
    background: #263850!important;
    border-radius: 20px;
}
html[dark] #sponsor-button ytd-button-renderer yt-button-shape:hover {
    box-sizing: border-box;
    border: solid 1px #263850!important;
    border-radius: 20px;
    height: 35px;
}



/* チャンネル登録ボタンの色 */
#subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled{
    background-color: #CC0000!important;
    border-radius: 20px;
}
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled{
    background-color: #CC0000!important;
    border-radius: 20px;
}
button[aria-label$="をチャンネル登録"] {
    color: #fff !important;
    background-color: #CC0000 !important;
    border-radius: 20px;
}

/* チャンネル登録ボタンの色（ホバー時） */
#subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
    background-color: #920000!important;
    border-radius: 20px;
}
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
    backgrou...

Reviews

No reviews yet.