Reduces margins and adds horizontal lines to reflect previous layout.
As of
/* ==UserStyle==
@name pixiv Comments Section Space Saving
@name:ja pixiv コメント欄を省スペース化
@description Reduces margins and adds horizontal lines to reflect previous layout.
@description:ja 余白を修正し、以前のような水平線区切りのデザインにします。
@namespace https://greasyfork.org/users/137
@version 5.4.0
@license MPL-2.0
@contributionURL https://www.amazon.co.jp/registry/wishlist/E7PJ5C3K7AM2
@compatible Edge
@compatible Firefoxを推奨 / Firefox is recommended
@compatible Opera
@compatible Chrome
@author 100の人
@homepageURL https://greasyfork.org/scripts/412706
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("https://www\\.pixiv\\.net/(?:artworks/[0-9]+(?:[?#].*)?|novel/show\\.php\\?(?:[^#]*&)?id=[0-9]+(?:[&#].*)?)") {
/*====================================
コメント欄
*/
main h2 ~ div:nth-of-type(2) > ul {
--pixiv-border-width: 1px;
--pixiv-border-style: solid;
--pixiv-border-color: #D6DEE5;
--comment-padding: 0.2em;
--meta-line-height: 16px;
--pixiv-color: #333;
--author-comment-background: lavenderblush;
}
.fKkgNY ~ * main h2 ~ div:nth-of-type(2) > ul {
/* ダークテーマ */
--pixiv-color: white;
--author-comment-background: #666065;
}
/*------------------------------------
余白を修正
*/
#root main h2 ~ div:nth-of-type(2) li {
margin-top: unset;
margin-bottom: unset;
}
main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1),
main h2 ~ div:nth-of-type(2) li li > div /* 返信コメント */ {
position: relative;
padding: var(--comment-padding);
padding-bottom: calc(var(--comment-padding) + var(--pixiv-border-width));
border: var(--pixiv-border-width) var(--pixiv-border-color);
border-top-style: var(--pixiv-border-style);
margin-top: calc(var(--pixiv-border-width) * -1);
}
main h2 ~ div:nth-of-type(2) > ul > li:last-of-type {
border-bottom: var(--pixiv-border-width) var(--pixiv-border-style) var(--pixiv-border-color);
}
main h2 ~ div:nth-of-type(2) :is(li > div > div, li li) > div:nth-of-type(1) > div:nth-of-type(2) {
display: grid;
grid-template:
"name date"
"body body"
/ max-content 1fr;
grid-column-gap: 0.5em;
}
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) {
grid-area: name;
}
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) {
grid-area: body;
margin-top: unset;
width: 100%; /* 長い単語等が含まれていると親からはみ出る問題に対処 */
}
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) {
grid-area: date;
line-height: var(--meta-line-height);
}
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) {
display: none;
}
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) {
/* 返信ボタン */
position: absolute;
top: var(--comment-padding);
right: var(--comment-padding);
display: none;
}
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),
main h2 ~ div:nth-of-type(2) li li:hover .ui-profile-popup + div > div:nth-of-type(3) > span:nth-of-type(3) /* 返信コメント */ {
display: inline;
}
/*------------------------------------
ユーザー名にユーザーページへのリンク
*/
main h2 ~ div:nth-of-type(2) .ui-profile-popup {
--user-icon-width: 40px;
--user-icon-right-margin: 8px;
color: var(--pixiv-color);
}
main h2 ~ div:nth-of-type(2) .ui-profile-popup::after {
content: attr(data-user_name);
position: absolute;
top: var(--comment-padding);
left: calc(var(--comment-padding) + var(--user-icon-width) + var(--user-icon-right-margin));
font-weight: bold;
display: block;
line-height: var(--meta-line-height);
}
main h2 ~ div:nth-of-type(2) li li .ui-profile-popup {
/* 返信コメント */
--user-icon-width: 32px;
}
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) {
color: transparent;
}
/*------------------------------------
削除されたユーザーのアイコン
*/
main h2 ~ div:nth-of-type(2) .ui-profile-popup[data-user_name=""] {
opacity: 0.4;
}
/*------------------------------------
作者コメント強調方法の修正
*/
main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1),
main h2 ~ div:nth-of-type(2) li li > div /* 返信コメント */ {
z-index: 0;
}
main h2 ~ div:nth-of-type(2) li .l6DTSU_ {
background: var(--author-comment-background);
color: transparent;
z-index: -1;
border-radius: unset;
margin: unset;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
main h2 ~ div:nth-of-type(2) > ul > li > div > div > div:nth-of-type(1) .l6DTSU_ {
/* 作者コメントが返信元であった場合用 */
border-bottom: var(--pixiv-border-width) var(--pixiv-border-style) var(--pixiv-border-color);
}
main h2 ~ div:nth-of-type(2) > ul > li:last-of-type > div > div > div:nth-of-type(2) > div:empty {
/* 作者コメント、一番下のコメント、かつ返信がなければ */
margin-bottom: calc(var(--pixiv-border-width) * -1);
}
}