☰

pixiv Comments Section Space Saving

Reduces margins and adds horizontal lines to reflect previous layout.

  1. /* ==UserStyle==
  2. @name           pixiv Comments Section Space Saving
  3. @name:ja        pixiv コメント欄を省スペース化
  4. @description    Reduces margins and adds horizontal lines to reflect previous layout.
  5. @description:ja 余白を修正し、以前のような水平線区切りのデザインにします。
  6. @namespace      https://greasyfork.org/users/137
  7. @version        5.4.0
  8. @license        MPL-2.0
  9. @contributionURL https://www.amazon.co.jp/registry/wishlist/E7PJ5C3K7AM2
  10. @compatible     Edge
  11. @compatible     Firefoxを推奨 / Firefox is recommended
  12. @compatible     Opera
  13. @compatible     Chrome
  14. @author         100の人
  15. @homepageURL    https://greasyfork.org/scripts/412706
  16. ==/UserStyle== */
  17.  
  18. @namespace url(http://www.w3.org/1999/xhtml);
  19.  
  20. @-moz-document regexp("https://www\\.pixiv\\.net/(?:artworks/[0-9]+(?:[?#].*)?|novel/show\\.php\\?(?:[^#]*&)?id=[0-9]+(?:[&#].*)?)") {
  21. 	/*====================================
  22. 		コメント欄
  23. 	*/
  24. 	main h2 ~ div:nth-of-type(2) > ul {
  25. 		--pixiv-border-width: 1px;
  26. 		--pixiv-border-style: solid;
  27. 		--pixiv-border-color: #D6DEE5;
  28. 		--comment-padding: 0.2em;
  29. 		--meta-line-height: 16px;
  30. 		--pixiv-color: #333;
  31. 		--author-comment-background: lavenderblush;
  32. 	}
  33.  
  34. 	.fKkgNY ~ * main h2 ~ div:nth-of-type(2) > ul {
  35. 		/* ダークテーマ */
  36. 		--pixiv-color: white;
  37. 		--author-comment-background: #666065;
  38. 	}
  39. 	
  40. 	/*------------------------------------
  41. 		余白を修正
  42. 	*/
  43. 	#root main h2 ~ div:nth-of-type(2) li {
  44. 		margin-top: unset;
  45. 		margin-bottom: unset;
  46. 	}
  47. 	
  48. 	main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1),
  49. 	main h2 ~ div:nth-of-type(2) li li > div /* 返信コメント */ {
  50. 		position: relative;
  51. 		padding: var(--comment-padding);
  52. 		padding-bottom: calc(var(--comment-padding) + var(--pixiv-border-width));
  53. 		border: var(--pixiv-border-width) var(--pixiv-border-color);
  54. 		border-top-style: var(--pixiv-border-style);
  55. 		margin-top: calc(var(--pixiv-border-width) * -1);
  56. 	}
  57. 	
  58. 	main h2 ~ div:nth-of-type(2) > ul > li:last-of-type {
  59. 		border-bottom: var(--pixiv-border-width) var(--pixiv-border-style) var(--pixiv-border-color);
  60. 	}
  61. 	
  62. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) {
  63. 		display: grid;
  64. 		grid-template:
  65. 			"name date"
  66. 			"body body"
  67. 			/ max-content 1fr;
  68. 		grid-column-gap: 0.5em;
  69. 	}
  70. 	
  71. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) {
  72. 		grid-area: name;
  73. 	}
  74. 	
  75. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) {
  76. 		grid-area: body;
  77. 		margin-top: unset;
  78. 		width: 100%;    /* 長い単語等が含まれていると親からはみ出る問題に対処 */
  79. 	}
  80. 	
  81. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) {
  82. 		grid-area: date;
  83. 		line-height: var(--meta-line-height);
  84. 	}
  85. 	
  86. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) {
  87. 		display: none;
  88. 	}
  89. 	
  90. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) {
  91. 		/* 返信ボタン */
  92. 		position: absolute;
  93. 		top: var(--comment-padding);
  94. 		right: var(--comment-padding);
  95. 		display: none;
  96. 	}
  97. 	
  98. 	main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1):hover > .ui-profile-popup + div > div:nth-of-type(3) > span:nth-of-type(3),
  99. 	main h2 ~ div:nth-of-type(2) li li:hover .ui-profile-popup + div > div:nth-of-type(3) > span:nth-of-type(3) /* 返信コメント */ {
  100. 		display: inline;
  101. 	}
  102. 	
  103. 	/*------------------------------------
  104. 		ユーザー名にユーザーページへのリンク
  105. 	*/
  106. 	main h2 ~ div:nth-of-type(2) .ui-profile-popup {
  107. 		--user-icon-width: 40px;
  108. 		--user-icon-right-margin: 8px;
  109. 		color: var(--pixiv-color);
  110. 	}
  111. 	
  112. 	main h2 ~ div:nth-of-type(2) .ui-profile-popup::after {
  113. 		content: attr(data-user_name);
  114. 		position: absolute;
  115. 		top: var(--comment-padding);
  116. 		left: calc(var(--comment-padding) + var(--user-icon-width) + var(--user-icon-right-margin));
  117. 		font-weight: bold;
  118. 		display: block;
  119. 		line-height: var(--meta-line-height);
  120. 	}
  121. 	
  122. 	main h2 ~ div:nth-of-type(2) li li .ui-profile-popup {
  123. 		/* 返信コメント */
  124. 		--user-icon-width: 32px;
  125. 	}
  126. 	
  127. 	main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) {
  128. 		color: transparent;
  129. 	}
  130. 	
  131. 	/*------------------------------------
  132. 		削除されたユーザーのアイコン
  133. 	*/
  134. 	main h2 ~ div:nth-of-type(2) .ui-profile-popup[data-user_name=""] {
  135. 		opacity: 0.4;
  136. 	}
  137. 	
  138. 	/*------------------------------------
  139. 		作者コメント強調方法の修正
  140. 	*/
  141. 	main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1),
  142. 	main h2 ~ div:nth-of-type(2) li li > div /* 返信コメント */ {
  143. 		z-index: 0;
  144. 	}
  145. 	
  146. 	main h2 ~ div:nth-of-type(2) li .l6DTSU_ {
  147. 		background: var(--author-comment-background);
  148. 		color: transparent;
  149. 		z-index: -1;
  150. 		border-radius: unset;
  151. 		margin: unset;
  152. 		position: absolute;
  153. 		top: 0;
  154. 		right: 0;
  155. 		bottom: 0;
  156. 		left: 0;
  157. 	}
  158. 	
  159. 	main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1) .l6DTSU_ {
  160. 		/* 作者コメントが返信元であった場合用 */
  161. 		border-bottom: var(--pixiv-border-width) var(--pixiv-border-style) var(--pixiv-border-color);
  162. 	}
  163. 	
  164. 	main h2 ~ div:nth-of-type(2) > ul > li:last-of-type > div > div > div:nth-of-type(2) > div:empty {
  165. 		/* 作者コメント、一番下のコメント、かつ返信がなければ */
  166. 		margin-bottom: calc(var(--pixiv-border-width) * -1);
  167. 	}
  168. }