☰

nvbetter

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

目前为 2024-11-28 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           nvbetter
  3. @namespace      rinsuki.net
  4. @version        1.0.1
  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.     /* 動画情報を上に持ってくる */
  31.     .grid-template-areas_\[_\"player_sidebar\"_\"meta_sidebar\"_\"bottom_sidebar\"_\"\._sidebar\"_\] {
  32.         grid-template-areas:
  33.             "meta   meta"
  34.             "player sidebar"
  35.             "bottom sidebar"
  36.             ".      sidebar" !important;
  37.     }
  38.  
  39.     section > .grid-area_\[meta\] {
  40.         /* タグ編集行 */
  41.         & > div:has(> button[data-element-name="tag_edit"]) {
  42.             /* を最後に持ってくる */
  43.             order: 1;
  44.  
  45.             /* タグ編集ボタンを最初に持ってくる */
  46.             & > button[data-element-name="tag_edit"] {
  47.                 order: -1;
  48.             }
  49.         }
  50.     }
  51.     /* 動画詳細を開いた状態 */
  52.     section > .grid-area_\[meta\]:has(> section > header + div) {
  53.         & > div:first-child {
  54.             /* 動画タイトルの下の再生数とかを隠す */
  55.             & > div:first-child > h1 + div {
  56.                 display: none;
  57.             }
  58.             /* 動画タイトルの右のユーザー情報を隠す */
  59.             & > div:first-child:has(h1) + div {
  60.                 display: none;
  61.             }
  62.         }
  63.         & > section {
  64.             /* 開いたら畳ませない */
  65.             & > header {
  66.                 display: none;
  67.             }
  68.             & > div {
  69.                 /* 動画詳細をインライン展開っぽく見せる */
  70.                 background: none;
  71.                 border-top: none;
  72.                 padding: 0;
  73.  
  74.                 /* 突然のgrid投入 */
  75.                 display: grid;
  76.                 grid-template:
  77.                     "desc desc" auto
  78.                     "user info" auto
  79.                     "user genre" auto
  80.                     / 400px 1fr;
  81.  
  82.                 /* 説明欄grid追従 */
  83.                 & > .cursor_default {
  84.                     grid-area: desc;
  85.                 }
  86.  
  87.                 /* ユーザー欄grid追従*/
  88.                 & > .pb_x2 {
  89.                     grid-area: user;
  90.                 }
  91.  
  92.                 /* grid で並び換えた影響でhrの意味がなくなったので消す */
  93.                 & > hr {
  94.                     display: none;
  95.                 }
  96.  
  97.                 /* 背景消したせいでボーダーが見えなくなるので再導入 */
  98.                 & > dl > div {
  99.                     border-color: var(--colors-border-high-em);
  100.                 }
  101.  
  102.                 /* ジャンル・シリーズ情報は横に並べる */
  103.                 & > dl + div {
  104.                     flex-direction: row;
  105.                 }
  106.             }
  107.         }
  108.     } 
  109.  
  110.  
  111.     /* 下のほうにあるやつを白背景にしない */
  112.     section > .grid-area_\[bottom\] > section {
  113.         background: none;
  114.         padding-left: 0;
  115.         padding-right: 0;
  116.         padding-top: var(--spacing-x2);
  117.     }
  118.  
  119.     /* コメントリストが開かれている時に発動する */
  120.     section:has(> .grid-area_\[sidebar\] > div > div:first-child > section > header + div) {
  121.         & > .grid-area_\[sidebar\] > div > .h_var\(--watch-player-height\) {
  122.             /* コメントリストをプレーヤーの高さと合わせる */
  123.             height: calc(var(--watch-player-height) + 60px);
  124.             /* 上でコメント入力欄を右まで伸ばした分の受け入れスペースを作る */
  125.             margin-bottom: calc(40px + var(--spacing-x2));
  126.         }
  127.         
  128.         /* 動画プレーヤー下のコメント入力欄のセレクタ */
  129.         & > .grid-area_\[player\] > div > div:last-child {
  130.             /* 動画プレーヤー下のコメント入力欄とかを右まで伸ばす */
  131.             margin-right: calc(-1 * calc(var(--spacing-x3) + var(--watch-sidebar-width)));
  132.  
  133.             /* コメント入力欄の横幅をプレーヤーと合わせる */
  134.             & > div.w_100\% {
  135.                 width: var(--watch-player-width) !important;
  136.                 flex-grow: 0 !important;
  137.             }
  138.  
  139.             /* コメント入力欄の右にあるボタン郡を伸ばす */
  140.             & > div:last-child {
  141.                 flex: 1;
  142.                 & > div {
  143.                     /* コメント入力欄の右にあるボタン郡を伸ばす */
  144.                     max-width: unset !important;
  145.                     
  146.                     & > button {
  147.                         /* コメント入力欄の右にあるボタン郡をテキトーに伸ばす (説明消すとそれはそれで幅が余るので) */
  148.                         flex-grow: 1;
  149.  
  150.                         & > svg+span {
  151.                             /* コメント入力欄の右にあるボタン郡で、アイコンがあるボタンの説明は消す */
  152.                             display: none;
  153.                         }
  154.                     }
  155.                 }
  156.             }
  157.         }
  158.     }
  159.  
  160. }