# nlフィルタ定義(文字コード判定用なのでこの行は削除しないこと) #ニコニコ動画カスタム:HTML5 ver0.3.0(2016.12.28) https://userstyles.org/styles/134653/ #ニコニコ動画HTML5用無駄機能外し Updated Jan 1, 2017 https://userstyles.org/styles/134647/ #nico_wallpaperG WatchPage 20131023 #上記を参考に自分用に改変、Chrome及び画面サイズ-大での使用推奨、nl_watch.js(nlitab)利用前提 #◆cl7sUAt.CpnA #2017/02/12 公開  #2017/02/13 FireFox用修正(マイリスト数の位置微調整) #2017/02/15 コンテンツツリー非表示化 #2017/02/20 FireFox用修正(再生数、コメント数、マイリスト数の位置微調整) thx スレ20>>411 #2017/02/21 動画再生画面最適化(MarqueeContainer消去)、#SuperBannerAd広告削除 thx スレ20>>417 #2017/02/22 z-index修正、ニコニコ市場スクロール化、カテゴリ名が長いと表示が二段になるのを修正 #2017/03/12 画面サイズの違いによるズレを修正 #2017/03/15 投稿者名が長いと表示が崩れるのを修正 #2017/04/15 png→gif thx スレ20>>661 ◆awd5z.AlOFJq #2017/05/15 Windows Aero風を個人的に修正(ニコニコ市場の挙動、色調、z-index) thx スレ20>>830 ◆awd5z.AlOFJq #2017/05/16 投稿者名の位置調整 #2017/05/18 マイリストボタン位置変更、タグエリア・投稿者名サイズ調整 #2017/05/19 ニコニコ市場再スクロール化 [Style] Name = watch:ページ整形 [HTML5] URL = www\.nicovideo\.jp/watch/ Append< /*------------------------- Shadow-Effects(CSS3) --------------------------*/ .VideoTitle::before{ display:block; position:absolute; top:0;bottom:0;left:0;right:0; filter: blur(15px); opacity: .9; content:' '; background:white; z-index:-1; } div.TagSuggestionList.is-favoriteTags{ box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); left:2px; opacity:0.9; } /* seach form favorite-tag-suggestions */ div.TagSuggestionList.is-favoriteTags:before{ display:block; position:absolute; top:0;bottom:0;left:0;right:0; filter: blur(15px); opacity: .9; content:' '; background:lightblue; } /* niconico sijyou and playlist */ .BottomContainer-card{ box-shadow: 5px 5px 16px black; } /*player background*/ .MainContainer{ box-shadow: 5px 5px 16px black; } /*registered tag*/ .Grid.TagContainer{ box-shadow: 0px 3px 16px black; border-style: solid; border-width: 2px; border-color: lightgray; border-radius: 2px; padding-top: 5px; padding-bottom: 3px; } /*when you edit tag*/ .Grid.TagContainer.is-editing{ box-shadow: 0 0 16px black !important; } .Grid.TagContainer.is-editing:before{ display:block; position:absolute; top:0;bottom:0;left:0;right:0; filter: blur(15px); opacity: .9; content:' '; background:lightblue; } .TagSuggestionList{ opacity:0.9; } .TagSuggestionList:before{ display:block; position:absolute; top:0;bottom:0;left:0;right:0; filter: blur(15px); opacity: 0.9; content:' '; background:lightblue; } .VideoDescriptionContainer{ box-shadow: 5px 3px 16px black; } .HeaderContainer-row .GridCell.col-fill:first-child{ box-shadow: 5px 3px 16px black; border-radius: 2px; } /*uploader*/ .HeaderContainer-row .VideoOwnerInfo-gridCell:first-child{ box-shadow: 3px 3px 8px black; } /*Tag Suggestioner*/ .TagSuggestionList{ box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); } .BottomContainer-cardHeader{ border-top-style: solid; border-left-style: solid; border-right-style: solid; border-width: 3px; border-color: lightgray; } .BottomContainer-cardMain{ border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-width: 3px; border-color: lightgray; } /*-------------------------  広告  --------------------------*/ .NicoSpotAdContainer, .MiniBannerAdContainer, #SuperBannerAd{ display: none !important; } /*------------------------- FLASH HTML5切り替え --------------------------*/ .SwitchToFlashLead{ display: none !important; } /*-------------------------  検索ボックス --------------------------*/ /* header_light(9)併用のため非表示 */ .GridCell.col-1of12.HeaderContainer-searchBox{ display:none !important; } /*------------------------- 共有アイコン --------------------------*/ .VideoMenuContainer .VideoMenuContainer-area:last-child{ display: none !important; } /*------------------------- 生放送 --------------------------*/ .BottomContainer-side{ display: none !important; } /*-------------------------  コンテナ --------------------------*/ .WatchAppContainer-main, .BottomContainer, .FooterContainer-content{ width: 996px !important; } .BottomContainer-main{ padding-right: 0px !important; padding-left: 0px !important; } .BottomContainer-main .BottomContainer-card { margin-bottom: 10px !important; } /* コンテンツツリー非表示 */ .BottomContainer-main .BottomContainer-card:nth-child(2) { display:none !important; } .FooterContainer{ display: none !important; } /*-------------------------  画面サイズ-大 --------------------------*/ body.is-large .WatchAppContainer-main, body.is-large .BottomContainer{ width: 1180px !important; } body.is-large:not(.is-fullscreen) .VideoContainer{ width: 840px !important; height: 470px !important; } /*-------------------------  画面サイズ-中 --------------------------*/ body.is-middle .VideoDescriptionContainer + .HeaderContainer-row .GridCell:first-child{ width: 85%; } /*-------------------------  動画説明 --------------------------*/ /* nl_watch.cssとの干渉注意*/ .VideoDescriptionContainer{ border: 2px solid lightgray; padding: 5px 5px; margin-bottom: 8px; min-height: 60px !important; width: 100% !important; z-index: 3; } .VideoDescriptionContainer .VideoDescription{ min-height: 60px !important; } .VideoDescriptionContainer .VideoDescriptionContainer-expander{ left: auto !important; right: 2px !important; bottom: 2px !important; transform: translateX(0) !important; } .VideoDescriptionContainer .VideoDescriptionContainer-expander span{ color: #888; font-size: 12px; } .VideoDescriptionExpander .VideoDescriptionExpander-switchCollapse::before{ border-color: transparent transparent #888; } .VideoDescriptionExpander .VideoDescriptionExpander-switchExpand::before{ border-color: #888 transparent transparent; } .VideoDescriptionExpander .VideoDescriptionExpander-button{ box-shadow: none !important; border: 0px solid #444 !important; border-radius: 3px !important } /*---------------------------- タグ --------------------------*/ .TagContainer{ width: 75%; /*width: 840px;*/ min-height: 68px; /*padding-right: 138px !important;*/ padding-left: 0 !important; margin: 0 -0 6px !important; } .TagContainer-area{ padding-right: 3px !important; padding-left: 5px !important; position: relative !important; } .TagContainer-area:last-child{ /*border-right: 2px double lightgray;*/ } .TagContainer-editButton{ border-radius: 4px !important; position: relative; background-color: #069 !important; } .TagContainer-editButton:after{ position: absolute; content: "登録タグ"; background: #111; color: #fff; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px !important; line-height: 1.8; } .TagContainer-editButton:hover:after, .is-editing .TagContainer-editButton:after{ display: none; } .TagItem{ padding-right: 24px !important; padding-bottom: 0px !important; padding-left: 6px !important; border-radius: 4px !important; } .TagContainer:not(.is-editing) .TagItem.is-locked::before{ display:none !important; } .TagItem.is-category.is-locked{ background-color: #ffd700 !important; } .TagItem.is-locked{ background-color: #c0c0c0 !important; } .TagItem-name{ color: #222 !important; font-weight: normal !important; } .NicoDicIcon{ border-radius: 0px !important; vertical-align: middle !important; } .NicoDicIcon svg{ display: none !important; } .NicoDicIcon.is-available{ background:url('data:image/gif;base64,R0lGODlhEAAPAPECAAMAALsAAP///wAAACH5BAEAAAMALAAAAAAQAA8AAAIyhI85Ju3vkpwBhIvzNfVCt1lW1mjc+JWV6Amku3aB2oZyCp81puozvPPhbCONaTGZFAAAOw==') no-repeat 0px 1px rgba(0, 0, 0, 0) !important; } .NicoDicIcon.is-unavailable { background:url('data:image/gif;base64,R0lGODlhEAAPAPECAAMAAJmZmf///wAAACH5BAEAAAMALAAAAAAQAA8AAAIxhI85Ju3vkpwBhIvzNRVDgXFW8DWbNZoeWKHaenaaE7qZWstwJr5vf2PlRr7QYjIpAAA7') no-repeat 0px 1px rgba(0, 0, 0, 0) !important; } .TagContainer.is-editing{ padding-right: 6px !important; z-index: 5; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) !important; } .TagContainer.is-editing .TagItem.is-locked{ padding-right: 6px !important; padding-left: 24px !important; } .TagContainer.is-editing .TagItem.is-locked.is-category{ padding-right: 24px !important; padding-left: 12px !important; } /*------------------------- 動画メタデータ --------------------------*/ .WatchAppContainer-main .HeaderContainer{ position: relative !important; } .VideoDescriptionContainer + .HeaderContainer-row{ width: 285px !important; position: absolute !important; top: 32px !important; right: 0 !important; bottom: 0 !important; display: block !important; z-index: 1; min-height: 0px; /*168px*/ margin: 0 !important; } .VideoMetaContainer p span, .VideoMetaContainer p{ color: #888 !important; } .VideoMetaContainer time, .VideoMetaContainer span{ color: #555 !important; } .VideoDescriptionContainer + .HeaderContainer-row .GridCell:first-child{ position: absolute; top: 224px !important; right: 0px; width: 100%; max-width: 280px; /*width: 335px;*/ border: 2px solid lightgray; padding: 6px; /*background: #f9f9f9;*/ white-space: nowrap; overflow: hidden; } .VideoDescriptionContainer + .HeaderContainer-row .GridCell:last-child{ position: absolute; bottom: 0px !important; right: 0; display: block !important; width: 100px; /*padding: 6px;*/ background: #f9f9f9; } .VideoMetaContainer{ display: block !important; height: auto !important; } .VideoMetaContainer > div{ display: block !important; box-shadow: none !important; } .VideoMetaContainer > div > p, VideoMetaContainer > div > span, VideoMetaContainer > div > time{ display: inline-block !important; min-width: 4.8em; margin: 0 !important; } .VideoMetaOverflowMenuContainer{ text-align: right; position: absolute !important; bottom: -0px !important; right: 7px !important; border: none; !important; } .VideoMetaOverflowMenuContainer .VideoMetaOverflowMenuOpenButton svg{ fill: #4D4D4D !important; } .VideoMetaOverflowMenuContainer-menu{ min-width: 225px !important; top: auto !important; bottom: 90px !important; right: 25px; border: 2px solid #111111; z-index: 4; } .VideoMetaOverflowMenuContainer .VideoMetaOverflowMenuOpenButton{ height: 22px !important; padding: 0 !important; width: 20px !important; } .VideoMetaOverflowMenuContainer-menuBlock .VideoMetaOverflowMenuContainer-dicTextLink{ padding-right: 1.2em; } .VideoViewCountMeta,.CommentCountMeta, .MylistCountMeta,.CategoryRankMeta{ position: absolute !important; left: -233px !important; bottom: -35px !important; background: #2a2a2a!important; background: -webkit-linear-gradient(top, #2a2a2a, #0a0a0a, #2a2a2a)!important; background: linear-gradient(#2a2a2a, #0a0a0a, #2a2a2a) !important; border: 1px solid #000000 !important; /*display: block !important;*/ padding: 2px 4px !important; width: 149px !important; height: 20px !important; } .CommentCountMeta{ bottom: -55px !important; } .MylistCountMeta{ bottom: -75px !important; } .VideoViewCountMeta span, .VideoViewCountMeta p, .CommentCountMeta span, .CommentCountMeta p, .MylistCountMeta span, .MylistCountMeta p{ color: #ffffff !important; margin: 0 !important; font-size: 12px !important; } /* FireFox用修正 */ /* Chrome, Vivaldiで確認済み */ .VideoViewCountMeta > span, .CommentCountMeta > span, .MylistCountMeta > span{ width: 76px !important; text-align: right !important; display: inline-block !important; } .VideoViewCountMeta-counter{ position: absolute; top: 3px; left: 69px; } .CommentCountMeta-counter { position: absolute; top: 3px; left: 69px; } .MylistCountMeta-counter { position: absolute; top: 3px; left: 69px; } .CategoryRankMeta{ left: auto !important; bottom: -80px !important; right: 3px !important; width: 180px !important; height: 61px !important; padding: 2px 4px 2px !important; text-align: center !important; background: none !important; border: 0 !important; z-index: 3 !important; } .CategoryRankMeta .CategoryRankMeta-title{ width: 100% !important; margin: 0 0 3px !important; } .CategoryRankMeta > span + span{ margin: 0 0 3px 3px !important; } .VideoMetaContainer .CategoryRankMeta p, .VideoMetaContainer .CategoryRankMeta span{ color: #bbb !important; font-size: 12px !important; white-space: nowrap; } .CategoryRankMeta-yesterdayRank{ margin: 0 !important; } .VideoMetaContainer .CategoryRankMeta a{ color: #C3DFE4 !important; } .VideoUploadDateMeta{ position: absolute !important; bottom: -75px !important; right: 5px !important; width: 178px !important; z-index: 2 !important; border: 0 !important; text-align: center !important; height: 60px !important; /*61px*/ padding: 42px 4px 2px !important; background: #2a2a2a!important; background: -webkit-linear-gradient(top, #2a2a2a, #0a0a0a, #2a2a2a)!important; background: linear-gradient(#2a2a2a, #0a0a0a, #2a2a2a) !important; border: 1px solid #000000 !important; } .VideoUploadDateMeta p.VideoUploadDateMeta-title{ /*display: none !important;*/ color: #aaa !important; } .VideoUploadDateMeta time.VideoUploadDateMeta-dateTimeLabel{ color: #aaa !important; font-weight: normal !important; font-size: 12px !important; margin: 0 !important; } /*------------------------- プレイヤー --------------------------*/ .MainContainer{ border: 2px solid #000000; border-radius:2px; background-color: black; transition: all .25s cubic-bezier(0.52, 0.76, 0.52, 0.76); padding: 2px; margin-top: 10px !important; margin-bottom: 10px !important; } .MainContainer-player{ width: calc(100% - 332px); } .MarqueeContainer{ display: none !important; } .MarqueeContainer .Marquee{ display: none !important; } .PlayerContainer{ padding-top: 2px !important; background: #000 !important; } .VideoContainer{ width: 658px !important; height: 366px !important; } .VideoStartButtonContainer-button{ width: 160px !important; height: 94px !important; border: 0 none !important; border-radius: 6px !important; } .VideoStartButtonContainer-button:hover{ width: 174px !important; height: 104px !important; } .SeekBarContainer{ padding-right: 2px !important; padding-left: 2px !important; } .react-grid-Container, .MainContainer-commentPanel, .CommentPanelContainer{ width: 330px !important; } .CommentPanelMenuContainer-mainMenu{ padding-left: 3px !important; } .Grid.VideoMenuContainer{ height: 64px !important; background: #666 !important; } .VideoMenuContainer .VideoMenuContainer-area:first-child{ position: absolute; top: 69px; right: 118px; padding: 0 !important; z-index: 3; } .VideoMenuContainer-uadContainer .UadButtonBalloon{ display: none !important; } .VideoMenuContainer-area .VideoMenuButton { margin-right: 9px; } .VideoMenuContainer-area .ActionButton { width: 22px; height: 22px; } /*------------------------- 再生後のオススメ画面 --------------------------*/ .VideoEndScreenContainer-share{ display: none !important; } .VideoEndScreenRelatedVideosContainer-bannerIn{ display: none !important; } /*------------------------- コメント --------------------------*/ .MainContainer-commentPanel{ top: 2px !important; bottom: 2px !important; right: 2px !important; } .CommentPanelContainer .react-grid-HeaderCell{ background: #eaeaea !important; } /* レスの書込時間・レス番 非表示 */ .react-grid-HeaderRow .react-grid-HeaderCell:nth-of-type(1n+3), .react-grid-Row .react-grid-Cell:nth-of-type(1n+3){ display: none !important; } .CommentPanelContainer{ bottom: 0 !important; top: 60px !important; } /* あまり操作しないので非表示 */ .CommentPanel .react-grid-Canvas{ overflow: hidden !important; background: #fbfbfb; } .CommentPanel .react-grid-Canvas:hover{ overflow-y: scroll !important; } .CommentPanelMenuContainer-pastCommentMenu { padding-left: 8px !important; } .VideoContainer.is-wideBackComment .VideoPlayer{ width: 100% !important; height: 100% !important; } .VideoContainer.is-wideBackComment .CommentRenderer{ z-index: 2 !important; } /*------------------------- コントローラー --------------------------*/ .VolumeBar{ height: 6px !important; } .VolumeBar .ProgressBar{ height: 6px !important; bottom: 8px !important; } .VolumeBar:hover .VolumeBar-progress{ background-color: #2890FF !important; transition: background-color 0.1s ease 0s !important; } .VolumeBar:hover .ProgressBar{ bottom: 8px !important; } .VolumeBar:hover .XSlider{ bottom: -8px !important; height: 30px !important; } /*------------------------- 再生リスト --------------------------*/ .PlaylistPager{ padding: 5px 34px !important; } .PlaylistPager-inner[style*="600"]{ left: -912px !important; } .PlaylistPager-inner[style*="1200"]{ left: -1824px !important; } .PlaylistPager-inner[style*="1800"]{ left: -2736px !important; } .PlaylistPager-inner[style*="2400"]{ left: -3648px !important; } .PlaylistCardItem { margin-right: 5px !important; } .PlaylistCardItem:nth-child(4n+1){ margin-right: 5px !important; } /*------------------------- ニコニコ市場 --------------------------*/ .IchibaContainer{ max-height: 875px !important; overflow-y: hidden !important; border:3px solid lightgray !important; } .IchibaContainer:hover{ overflow-y: scroll !important; } #ichibaMain{ min-height: 15px; width: 100% !important; display: flex; flex-wrap: wrap; padding-top: 10px !important; } #ichibaMain .maker, #ichibaMain .action { color: #393F3F!important; } #ichibaMainHeader a { color: #393F3F !important; } #ichibaMain dl { padding: 4px !important; margin: 0px !important; flex-basis: 188px; } dl[class*="ichiba_mainitem"]{ filter: grayscale(100%); } dl:hover[class*="ichiba_mainitem"]{ filter: grayscale(0%); } #ichibaMain dt { height: auto !important; margin-bottom: 6px !important; } #ichibaMain p.noItem { display: none !important; } /* バルーン */ #ichibaMain .balloonZero { height: auto !important; } #ichibaMain dt .balloonUe { background-color: #fefefe !important; width: 140px!important; margin: 0 auto!important; position: relative!important; bottom: 0!important; border: 3px solid #b0b0b0!important; border-radius: 5px!important; } #ichibaMain dt .balloonUe:after, #ichibaMain dt .balloonUe:before { content: ""!important; position: absolute!important; top: 100%!important; height: 0!important; width: 0!important; } #ichibaMain dt .balloonUe:before { left: 39px!important; border: 11px solid transparent!important; border-top: 11px solid #B0B0B0!important; } #ichibaMain dt .balloonUe:after { left: 43px!important; border: 7px solid transparent!important; border-top: 7px solid #fefefe!important; } #ichibaMain dt .balloonUe a { padding: 3px 15px!important; background: none !important; width: auto!important; } #ichibaMain dt .balloonShita { display: none !important; } #ichibaMain .thumbnail img { border: medium none !important; height: 168px !important; padding: 7px !important; width: 168px !important; } #ichibaMain .thumbnail img[src*="now_printing"] { height: 148px !important; width: 148px !important; } p.rowJustify:nth-of-type(odd) { display: none !important; } #ichibaMainFooter{ display: none !important; } /* チケットぴあ */ #ichibaMain dl.pia { margin-top: 15px!important; } #ichibaMain dl.pia dd.pia { width: auto!important; background-color: rgba(255, 255, 255, 0.5) !important; border-radius: 5px!important; } #ichibaMain dl.pia dt { margin-bottom: 13px !important; } #ichibaMain dl.pia img { margin-right: 100% !important; } /* モバイル */ #ichibaMain dd.mobile { position: relative !important; right: 8px !important; margin-top: 5px!important; transform: scale(0.8) !important; -webkit-transform: scale(0.8) !important; -moz-transform: scale(0.8) !important; } dd.mobile + dd.thumbnail { background-color: rgba(255, 255, 255, 0.5) !important; padding: 0 4px !important; border-radius: 5px!important; } dd.mobile + dd.thumbnail a.ichiba_item span { font-size: 30px!important; } #ichibaMain dd.nicoru { display: none !important; } >