☰

nvbetter

ニコニコ動画の新HTML5プレーヤーを旧HTML5プレーヤーっぽい配置にしたりします

  1. /* ==UserStyle==
  2. @name           nvbetter
  3. @namespace      rinsuki.net
  4. @version        1.0.7
  5. @description    ニコニコ動画の新HTML5プレーヤーを旧HTML5プレーヤーっぽい配置にしたりします
  6. @author         rinsuki
  7. ==/UserStyle== */
  8.  
  9. @-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
  10.     /* ヘッダー追従を切る */
  11.     #root > div > header.h_webHeader\.height {
  12.         position: relative !important;
  13.         
  14.         &:hover > div:has(a[href*="/feedback/video_watch"]) {
  15.             & > a {
  16.                 /* こんな状態で本家にフィードバック送られても困る */
  17.                 display: none;
  18.             }
  19.             &:after {
  20.                 content: "nvbetterにより視聴ページのスタイルが変更されているため、nvbetterによってフィードバックボタンは無効化されています。";
  21.             }
  22.         }
  23.     }
  24.     
  25.     /* 動画再生部分の border-radius を無効化 */
  26.     .grid-area_\[player\] > div > div.bdr_m {
  27.         border-radius: unset !important;
  28.     }
  29.     
  30.     .grid-template-areas_\[_\"player_sidebar\"_\"meta_sidebar\"_\"bottom_sidebar\"_\"\._sidebar\"_\] {
  31.         /* 動画情報を上に持ってくる */
  32.         grid-template-areas:
  33.             "meta   meta"
  34.             "player sidebar"
  35.             "bottom sidebar"
  36.             ".      sidebar" !important;
  37.         
  38.         /* 旧プレーヤーのようにリサイズ時にガタガタさせる */
  39.         --watch-player-max-width: 640px !important;
  40.  
  41.         /* 854pxの動画が入るなら 854px まで大きくする */
  42.         @media screen and (min-width: calc(854px + 440px + calc(24px * 3) + 15px)) {
  43.             & {
  44.                 --watch-player-max-width: 854px !important;
  45.             }
  46.         }
  47.         /* 960pxの動画が入るなら 960px まで大きくする */
  48.         @media screen and (min-width: calc(960px + 440px + calc(24px * 3) + 15px)) {
  49.             & {
  50.                 --watch-player-max-width: 960px !important;
  51.             }
  52.         }
  53.         /* 1280pxの動画が入るなら 1280px まで大きくする */
  54.         @media screen and (min-width: calc(1280px + 440px + calc(24px * 3) + 15px)) {
  55.             & {
  56.                 --watch-player-max-width: 1280px !important;
  57.             }
  58.         }
  59.         /* 1920pxの動画が入るなら 1920px まで大きくする */
  60.         @media screen and (min-width: calc(1920px + 440px + calc(24px * 3) + 15px)) {
  61.             & {
  62.                 --watch-player-max-width: 1920px !important;
  63.             }
  64.         }
  65.     }
  66.  
  67.     section > .grid-area_\[meta\] {
  68.         /* タグ編集行 */
  69.         & > div:has(> button[data-element-name="tag_edit"]) {
  70.             /* を最後に持ってくる */
  71.             order: 1;
  72.  
  73.             /* タグ編集ボタンを最初に持ってくる */
  74.             & > button[data-element-name="tag_edit"] {
  75.                 order: -1;
  76.             }
  77.         }
  78.     }
  79.     /* 動画詳細を開いた状態 */
  80.     section > .grid-area_\[meta\]:has(> section > header + div) {
  81.         & > div:first-child {
  82.             /* 動画タイトルの下の再生数とかを隠す */
  83.             & > div:first-child > h1 + div {
  84.                 display: none;
  85.             }
  86.             /* 動画タイトルの右のユーザー情報を隠す */
  87.             & > div:first-child:has(h1) + div {
  88.                 display: none;
  89.             }
  90.         }
  91.         & > section {
  92.             /* 開いたら畳ませない */
  93.             & > header {
  94.                 display: none;
  95.             }
  96.             & > div {
  97.                 /* 動画詳細をインライン展開っぽく見せる */
  98.                 background: none;
  99.                 border-top: none;
  100.                 padding: 0;
  101.  
  102.                 /* 突然のgrid投入 */
  103.                 display: grid;
  104.                 grid-template:
  105.                     "desc desc" auto
  106.                     "user info" auto
  107.                     "user genre" auto
  108.                     / 400px 1fr;
  109.  
  110.                 /* 説明欄grid追従 */
  111.                 & > .cursor_default {
  112.                     grid-area: desc;
  113.                 }
  114.  
  115.                 /* ユーザー欄grid追従*/
  116.                 & > .pb_x2 {
  117.                     grid-area: user;
  118.                 }
  119.  
  120.                 /* grid で並び換えた影響でhrの意味がなくなったので消す */
  121.                 & > hr {
  122.                     display: none;
  123.                 }
  124.  
  125.                 /* 背景消したせいでボーダーが見えなくなるので再導入 */
  126.                 & > dl > div {
  127.                     border-color: var(--colors-border-high-em);
  128.                 }
  129.  
  130.                 /* ジャンル・シリーズ情報は横に並べる */
  131.                 & > dl + div {
  132.                     flex-direction: row;
  133.                 }
  134.             }
  135.         }
  136.     } 
  137.  
  138.  
  139.     /* 下のほうにあるやつを白背景にしない */
  140.     section > .grid-area_\[bottom\] > section {
  141.         background: none;
  142.         padding-left: 0;
  143.         padding-right: 0;
  144.         padding-top: var(--spacing-x2);
  145.     }
  146.  
  147.     /* コメントリストが開かれている時に発動する */
  148.     section:has(> .grid-area_\[sidebar\] > div > div:first-child > section > header + div) {
  149.         & > .grid-area_\[sidebar\] > div > .h_var\(--watch-player-height\) {
  150.             /* コメントリストをプレーヤーの高さと合わせる */
  151.             height: calc(var(--watch-player-height) + var(--watch-controller-height));
  152.             /* 上でコメント入力欄を右まで伸ばした分の受け入れスペースを作る */
  153.             margin-bottom: calc(40px + var(--watch-player-actionbar-gap-height) - var(--spacing-x0_5));
  154.         }
  155.         
  156.         /* 動画プレーヤー下のコメント入力欄のセレクタ */
  157.         & > .grid-area_\[player\] > div:not(.w_\[100dvw\]) > div:last-child {
  158.             /* 動画プレーヤー下のコメント入力欄とかを右まで伸ばす */
  159.             margin-right: calc(-1 * calc(var(--spacing-x3) + var(--watch-sidebar-width)));
  160.  
  161.             /* コメント入力欄の横幅をプレーヤーと合わせる */
  162.             & > div.w_100\% {
  163.                 width: var(--watch-player-width) !important;
  164.                 flex-grow: 0 !important;
  165.             }
  166.  
  167.             /* コメント入力欄の右にあるボタン郡を伸ばす */
  168.             & > div:last-child {
  169.                 flex: 1;
  170.                 & > div {
  171.                     /* コメント入力欄の右にあるボタン郡を伸ばす */
  172.                     max-width: unset !important;
  173.                     
  174.                     & > button {
  175.                         /* コメント入力欄の右にあるボタン郡をテキトーに伸ばす (説明消すとそれはそれで幅が余るので) */
  176.                         flex-grow: 1;
  177.  
  178.                         & > svg+span {
  179.                             /* コメント入力欄の右にあるボタン郡で、アイコンがあるボタンの説明は消す */
  180.                             display: none;
  181.                         }
  182.                     }
  183.                 }
  184.             }
  185.         }
  186.     }
  187.     
  188.     /* フルスクリーン時にコメント入力欄の透過をする */
  189.     section > .grid-area_\[player\] > div.w_\[100dvw\] > div:only-child > div:only-child > div:last-child > div:last-child {
  190.         background: none;
  191.         & > div > div > button {
  192.             background: var(--colors-layer-background);
  193.         }
  194.     }
  195. }