Adds borders to each video in the search result page as a throwback design.
/* ==UserStyle==
@name niconico Video Search Result Borders
@name:ja ニコニコ動画(9) 検索結果に枠
@description Adds borders to each video in the search result page as a throwback design.
@description:ja ニコニコ動画の検索結果などを、枠があった頃のデザインに変更します。
@namespace https://greasyfork.org/users/137
@version 3.2.0
@license MPL-2.0
@contributionURL https://github.com/sponsors/esperecyan
@compatible Edge
@compatible Firefox 推奨 (Recommended)
@compatible Opera
@compatible Chrome
@preprocessor uso
@var select borders "枠の表示 (Show borders)" {
"表示する (Show)*": "",
"表示しない (Not show)": "dummy"
}
@var select harajuku "デザイン (Design)" {
"原宿バージョン (Harajuku version)*": "",
"そのまま (Not change)": "dummy"
}
@author 100の人
@homepageURL https://greasyfork.org/scripts/412460
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
/* GINZAバージョン */
@-moz-document
url-prefix("https://www.nicovideo.jp/search/"),
url-prefix("https://www.nicovideo.jp/tag/") {
/*====================================
GINZAバージョンのサムネイルの修正
*/
/*------------------------------------
動画情報の左カラム
*/
.video .item > div:first-of-type {
width: 134px;
}
/*------------------------------------
ラッパー
*/
.video .item .itemThumbBox {
width: auto; /* 4列表示 */
height: 104px;
}
.video .item .itemThumb {
display: block;
width: auto;
height: 100%;
}
/*------------------------------------
リンク
*/
.video .item .itemThumb .itemThumbWrap {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid 2px #393F3F;
overflow: hidden;
justify-content: center;
}
/*------------------------------------
画像
*/
.video .item .itemThumb .noImage {
/* 遅延読み込み前 */
height: 100%;
max-height: initial !important;
}
.video .item .itemThumb .thumb {
/* 320px (240px) × 180px */
width: auto !important;
max-height: initial !important;
}
/*------------------------------------
サムネイルの特殊枠
*/
.video .item .itemThumbWrap::before {
width: 100%;
height: 100%;
background-size: 100% 100%;
}
/*------------------------------------
4列表示の投稿日時
*/
.video .item .itemTime {
white-space: nowrap !important;
}
/*====================================
GINZAバージョン
*/
/*------------------------------------
リスト
*/
/*[[borders]]*/ .video > .videoListInner {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: unset;
}
/*------------------------------------
style 39127 との互換処置
*/
/*[[borders]]*/ .container .inner,
/*[[borders]]*/ .container.column700-300 .main,
/*[[borders]]*/ .container .video {
max-width: 1040px !important;
}
/*------------------------------------
動画
*/
/*[[borders]]*/ .video > .videoListInner > .item {
overflow: hidden !important;
background: #E6E6E6 !important;
border: solid 1px #CCCCCC !important;
padding: 5px !important;
}
/*------------------------------------
2列表示、4列表示
*/
/*[[borders]]*/ .video.videoList01 > .videoListInner > .item:nth-child(n),
/*[[borders]]*/ .video:not(.videoList01) > .videoListInner > .item:nth-child(n) {
margin-bottom: 0 !important;
}
/*------------------------------------
ログイン前に表示される定番動画
*/
/*[[borders]]*/ .teibanVideos > .video:not(.videoList01):not(.videoList02) > .videoListInner > .item {
height: 170px !important;
}
/*------------------------------------
コメント
*/
/*[[borders]]*/ .video .itemComment {
border-color: #C8C8C8 !important;
background: #F5F5F5 !important;
}
/*====================================
GINZAバージョンのデザインを原宿バージョンに
*/
/*------------------------------------
投稿日時
*/
/*[[harajuku]]*/ .video .item .itemTime .time:not(.new) {
font-weight: bold !important;
color: #393F3F !important;
}
/*------------------------------------
2列表示の再生時間
*/
/*[[harajuku]]*/ .video.videoList02 .item .itemTime {
white-space: nowrap !important;
position: absolute !important;
left: 147px !important;
}
/*------------------------------------
2列表示の有料
*/
/*[[harajuku]]*/ .video.videoList02 .item .iconPayment {
left: 290px;
right: unset;
white-space: nowrap;
}
/*------------------------------------
再生時間
*/
/*[[harajuku]]*/ .video .videoLength {
font-weight: bold !important;
right: 0 !important;
bottom: 0 !important;
}
/*------------------------------------
再生数等の情報
*/
/*[[harajuku]]*/ .video .itemData .count {
color: #393F3F !important;
}
/*[[harajuku]]*/ .video .itemData .value::before {
content: "：" !important;
font-weight: normal !important;
}
/*[[harajuku]]*/ .video .itemData .value {
font-weight: bold !important;
}
/*------------------------------------
タイトル
*/
/*[[harajuku]]*/ .video .itemTitle a {
text-decoration: underline !important;
}
/*------------------------------------
コメント
*/
/*[[harajuku]]*/ .video .itemComment {
font-weight: normal !important;
border: solid 1px #999F9F !important;
border-radius: 0 !important;
}
}
/*====================================
原宿バージョン
*/
@-moz-document
url-prefix("https://www.nicovideo.jp/recommendations"),
url-prefix("https://www.nicovideo.jp/recent"),
url-prefix("https://www.nicovideo.jp/newarrival"),
url-prefix("https://www.nicovideo.jp/hotlist") {
/*[[harajuku]]*/ .rec_movlist,
/*[[harajuku]]*/ .content_672 > div[style*="624px"] {
width: auto !important;
padding-left: 4px !important;
padding-right: 0 !important;
margin-right: -10px !important;
}
/*[[harajuku]]*/ .rec_movlist > li,
/*[[harajuku]]*/ .content_672 .thumb_col_1,
/*[[harajuku]]*/ .content_672 .thumb_col_2,
/*[[harajuku]]*/ .content_672 .thumb_col_4 {
overflow: hidden !important;
background: #F7F7F7 !important;
border: solid 1px #CCCCCC !important;
margin-right: 3px !important;
}
.rec_movlist > li {
padding: 1px;
}
/*------------------------------------
オススメ動画
*/
/*[[harajuku]]*/ .rec_movlist {
display: flex;
}
/*[[harajuku]]*/ .rec_movlist > li {
}
/*[[harajuku]]*/ .tag_title {
display: none;
}
/*[[harajuku]]*/ .rec_tag {
clear: left;
}
/*[[harajuku]]*/ .rec_movlist .update {
color: #696F6F !important;
}
/*[[harajuku]]*/ .rec_movlist .update strong {
color: #393F3F;
}
/*------------------------------------
1列表示
*/
/*[[harajuku]]*/ .content_672 .thumb_col_1 {
width: auto !important;
}
/*[[harajuku]]*/ .content_672 .thumb_col_1 td {
background: transparent !important;
}
/*------------------------------------
2列表示
*/
/*[[harajuku]]*/ .content_672 .thumb_col_2 {
width: 318px !important;
height: 154px !important;
}
/*------------------------------------
4列表示
*/
/*[[harajuku]]*/ .content_672 .thumb_col_4 {
width: 152px !important;
height: 232px !important;
}
}