メニューのある右枠の表示幅を狭めて、動画情報の表示幅を広げます。サムネにマウスオンで拡大する機能もオプションで搭載。
YouTube 履歴ページ微改善 by hori68
Details
Authorhori68
LicenseCC-BY-4.0
CategoryYouTube
Created
Updated
Size3.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
ブラウザの横幅が狭い時に右メニューが幅を利かせすぎていて、動画タイトルがろくに表示されないので、その対策として作ったものです。ブラウザの横幅が広い人には価値はなさそうです。
サムネにマウスオンで拡大する機能を有効にした場合は、サムネプレビュー(GIFアニメみたいに動くやつ)、サムネ右上の後で見るボタン、キューに追加ボタンは非表示になります。
ショート専用枠のサムネは拡大できません。ショートこそ拡大が必要？ごもっともです。
Source code
/* ==UserStyle==
@name YouTube 履歴ページ微改善
@namespace userstyles.world/user/hori68
@version 1.0
@description メニューのある右枠の表示幅を狭めて、動画情報の表示幅を広げます。サムネにマウスオンで拡大する機能もオプションで搭載。
@author hori68
@license CC-BY-4.0
@preprocessor stylus
@var checkbox zoom_thumbnail "サムネをズームする" 0
==/UserStyle== */
@-moz-document domain("youtube.com") {
i = !important //
@media (min-width: 876px){
ytd-browse[page-subtype="history"]{
ytd-two-column-browse-results-renderer{
width: calc(100% - 20px) i;
margin-left: 20px i;
margin-right: 0 i;
/* 右ペイン(#secondary)の幅を280px固定にする */
#primary{ /* こちら左ペイン */
padding-right: 280px i;
ytd-section-list-renderer {
margin-right: 20px i;
}
/* ズームありの場合 */
if zoom_thumbnail{
ytd-video-renderer ytd-thumbnail{
&:hover{
/* ズーム処理 */
transform: scale(2.6) i;
transform-origin: left center i;
transition: transform .4s cubic-bezier(.5,1,.89,1) 1s i;
z-index: 1000 i;
/* 赤線非表示 */
ytd-thumbnail-overlay-resume-playback-renderer{
display: none i;
}
/* 右下時間非表示 */
ytd-thumbnail-overlay-time-status-renderer{
display: none i;
}
}
/* プレビュー非表示 */
div#mouseover-overlay.ytd-thumbnail{
display: none i;
}
/* 後で見る、キューに追加アイコン非表示 */
ytd-thumbnail-overlay-toggle-button-renderer{
display: none i;
}
}
}
}
#secondary{ /* こちら右ペイン */
ytd-browse-feed-actions-renderer{
width: 240px i;
padding: 0 20px 0 20px i;
ytd-search-box-renderer{
margin: 4px 0px 8px i;
tp-yt-paper-input{
width: 240px i;
}
}
}
}
}
}
}
}