Ragtag Archiveの動画を視聴しやすくレイアウト調整するCSS【Stylus用CSS】

Ragtag Archiveは、VTuberなどの動画アーカイブを当時のチャットコメント含めて閲覧できるサイト。

自分は動画サイトでは極力動画とチャットコメントだけに集中できるようにしたいので調整する。

ノーパソウィンドウサイズの半分・3分の1に適したように調整しているので、ほぼほぼ自分用。

＃01【ダークソウル２】まだ捧げる人間性は…あるｯｯ！！！！！！【鈴原るる/にじさんじ】 - Ragtag Archive

CSS

Stylusアドオンを使って、CSSでサイトのレイアウトを調整する。

動画とコメントのみを常時表示するようにし、説明やヘッダーなどはホバーされるまで非表示にする。
チャット欄を動画に被せて同時に閲覧しやすいようにした。

/* コメント欄を動画に被せる*/
/* よく見るウィンドウサイズによって調整が必要。下設定ではノーパソ画面半分のウィンドウサイズがちょうどよい*/

.overflow-y-scroll{
    height: 300px;
    position: fixed;
    text-align: right;
    width: 250px;
    margin: 0 0 0 auto;
    right: 5px;
    top:5px;
    
    border: none;
    
}
.overflow-y-scroll::-webkit-scrollbar{
  display:none;
}

.text-xs{
    margin: 0 0 0 auto;
    justify-content:end;
}
.mb-2{
    margin-bottom:0px;
    font-size: 14px;
    opacity: 0.7;
    
}
.mr-2{
    opacity: 0.5;

}

.bg-gray-900{
    position: absolute;
    z-index: 99;
    
}  


/* 検索調整 */
.justify-center{
    margin:0px 100px;
    width: 600px;
}

/* マウスホバーされるまで非表示 */

#__next > div:nth-of-type(1) > div:nth-of-type(5) > div:nth-of-type(2),
.bg-gray-900,
hoge{
    opacity: 0;
      transition: opacity 0.3s;
  }


#__next > div:nth-of-type(1) > div:nth-of-type(5) > div:nth-of-type(2):hover,
.bg-gray-900:hover,
hoge{
    opacity: 1;
  }