出張おはき゛ろく

Twitterで書ききれないことを書こうと思います。

ニコニコ新マイページが○○なのでユーザースタイルシートで解決する

ニコニコ動画でマイページのリニューアルが予告されていて、新マイページがプレビュー公開されています。

blog.nicovideo.jp

新マイページ、やりたいことはわからんでもないんですが、旧マイページから明らかに劣化(主観)している点があって、

  • ニコレポのカテゴリの色分けがなくなった。(何のアクティビティだか一目でわからん…)
  • 全体的に無駄な余白が増えて一覧性が減った。

というあたりに明確な不満があります。運営さてはエアプだな?

フィードバックは送ってるんですがいまだに改善されないので、自分用にユーザースタイルシートで解決することにしました。この記事はその記録です。
Mozilla Format になってるので Stylus とかで読み込めると思います。


以下てきとうなCSS

@-moz-document url-prefix("https://www.nicovideo.jp/my") {
.HeaderContainer-main {
    display: flex;
    height: auto;
}
.HeaderContainer-ad {
    display: none;
}
.UserPageHeader {
    padding: 4px 0 8px;
}
.UserDetailsHeader {
    padding: 0 0 8px 16px;
}
.UserDetailsHeader-body {
    margin: 8px 0;
}
.UserDetailsHeader-action {
    margin: 0;
}
.UserDetailsStatus {
    margin: 8px 0;
}
.UserPage-main {
    margin: 16px auto;
}
.MainMenuItem {
    height: 40px;
}
.MainMenuContainer_stick .MainMenuContainer-menu {
    transform: translateY(140%)
}
.NicorepoItem-item {
    padding: 4px;
}
.NicorepoItem-activity {
    margin: 0 0 4px 0;
}
.NicorepoItem-sender {
    height: 32px;
}
.NicorepoItem-senderName {
    color: #0033cc;
}
.NicorepoItem-sender a {
    height: 16px;
}


/* category */

.ContentLabel_video {
	background-color: #00429B;
	color: #FFF;
}

.ContentLabel_program {
	background-color: #4990e2;
	color: #FFF;
}


.ContentLabel_nicocas-program {
	background-color: #4990e2;
	color: #FFF;
}

.ContentLabel_image {
	background-color: #fd9a01;
	color: #FFF;
}

.ContentLabel_manga {
	background-color: #f169a7;
	color: #FFF;
}

.ContentLabel_theme {
	background-color: #06911e;
	color: #FFF;
}

.ContentLabel_book {
	background-color: #7e5422;
	color: #FFF;
}

.ContentLabel_chblog {
	background-color: #bc9d56;
	color: #FFF;
}

.ContentLabel_solid {
	background-color: #22CCFF;
	color: #FFF;
}

.ContentLabel_knowledge {
	background-color: #0fbec9;
	color: #FFF;
}
}

ラベルにclassついてるのになんで個別のスタイルを当ててないんだろう……。

こんな感じになりますってスクリーンショットを貼るべきですが、汚いニコレポなのでやめました。君の目で確かみてみろ!