Use site-specific selectors in highlighting related CSS. #2169

This commit is contained in:
ccd0 2019-07-08 15:06:19 -07:00
parent 6a7c3d7c38
commit a1387b351c
5 changed files with 37 additions and 31 deletions

View File

@ -67,21 +67,21 @@
:root.spooky .qphl {
outline: 2px solid rgba(145, 182, 214, .8);
}
:root.spooky.highlight-you .quotesYou.opContainer,
:root.spooky.highlight-you .quotesYou > .reply {
:root.spooky.highlight-you .quotesYou$site$relative$opContainer,
:root.spooky.highlight-you .quotesYou$site$relative$replyPost {
border-left: 3px solid rgba(145, 182, 214, .8);
}
:root.spooky.highlight-own .yourPost.opContainer,
:root.spooky.highlight-own .yourPost > .reply {
:root.spooky.highlight-own .yourPost$site$relative$opContainer,
:root.spooky.highlight-own .yourPost$site$relative$replyPost {
border-left: 3px dashed rgba(145, 182, 214, .8);
}
:root.spooky .opContainer.filter-highlight,
:root.spooky .filter-highlight > .reply {
:root.spooky .filter-highlight$site$relative$opContainer,
:root.spooky .filter-highlight$site$relative$replyPost {
box-shadow: inset 5px 0 rgba(145, 182, 214, .5);
}
:root.spooky.highlight-own .yourPost > div.sideArrows,
:root.spooky.highlight-you .quotesYou > div.sideArrows,
:root.spooky .filter-highlight > div.sideArrows {
:root.spooky.highlight-own .yourPost > $site$sideArrows,
:root.spooky.highlight-you .quotesYou > $site$sideArrows,
:root.spooky .filter-highlight > $site$sideArrows {
color: rgb(155, 185, 210);
}

View File

@ -1448,26 +1448,26 @@ input[name="Default Volume"] {
.qphl {
outline: 2px solid rgba(216, 94, 49, .8);
}
:root.highlight-you .quotesYou.opContainer,
:root.highlight-you .quotesYou > .reply {
:root.highlight-you .quotesYou$site$relative$opContainer,
:root.highlight-you .quotesYou$site$relative$replyPost {
border-left: 3px solid rgba(221, 0, 0, .8);
}
:root.highlight-own .yourPost.opContainer,
:root.highlight-own .yourPost > .reply {
:root.highlight-own .yourPost$site$relative$opContainer,
:root.highlight-own .yourPost$site$relative$replyPost {
border-left: 3px dashed rgba(221, 0, 0, .8);
}
.filter-highlight.opContainer,
.filter-highlight > .reply {
.filter-highlight$site$relative$opContainer,
.filter-highlight$site$relative$replyPost {
box-shadow: inset 5px 0 rgba(221, 0, 0, .5);
}
:root.highlight-own .yourPost > div.sideArrows,
:root.highlight-you .quotesYou > div.sideArrows,
.filter-highlight > div.sideArrows {
:root.highlight-own .yourPost > $site$sideArrows,
:root.highlight-you .quotesYou > $site$sideArrows,
.filter-highlight > $site$sideArrows {
color: rgba(221, 0, 0, .8);
}
:root.highlight-own .yourPost.opContainer::after,
:root.highlight-you .quotesYou.opContainer::after,
.filter-highlight.opContainer::after {
:root.highlight-own .yourPost$site$relative$opContainer::after,
:root.highlight-you .quotesYou$site$relative$opContainer::after,
.filter-highlight$site$relative$opContainer::after {
content: "";
display: block;
clear: both;

View File

@ -63,21 +63,21 @@
:root.tomorrow .qphl {
outline: 2px solid rgba(145, 182, 214, .8);
}
:root.tomorrow.highlight-you .quotesYou.opContainer,
:root.tomorrow.highlight-you .quotesYou > .reply {
:root.tomorrow.highlight-you .quotesYou$site$relative$opContainer,
:root.tomorrow.highlight-you .quotesYou$site$relative$replyPost {
border-left: 3px solid rgba(145, 182, 214, .8);
}
:root.tomorrow.highlight-own .yourPost.opContainer,
:root.tomorrow.highlight-own .yourPost > .reply {
:root.tomorrow.highlight-own .yourPost$site$relative$opContainer,
:root.tomorrow.highlight-own .yourPost$site$relative$replyPost {
border-left: 3px dashed rgba(145, 182, 214, .8);
}
:root.tomorrow .opContainer.filter-highlight,
:root.tomorrow .filter-highlight > .reply {
:root.tomorrow .filter-highlight$site$relative$opContainer,
:root.tomorrow .filter-highlight$site$relative$replyPost {
box-shadow: inset 5px 0 rgba(145, 182, 214, .5);
}
:root.tomorrow.highlight-own .yourPost > div.sideArrows,
:root.tomorrow.highlight-you .quotesYou > div.sideArrows,
:root.tomorrow .filter-highlight > div.sideArrows {
:root.tomorrow.highlight-own .yourPost > $site$sideArrows,
:root.tomorrow.highlight-you .quotesYou > $site$sideArrows,
:root.tomorrow .filter-highlight > $site$sideArrows {
color: rgb(155, 185, 210);
}
:root.tomorrow .catalog-thread.filter-highlight .catalog-thumb,

View File

@ -93,6 +93,9 @@ SW.tinyboard =
text: '.fileinfo'
link: '.fileinfo > a'
thumb: 'a > .post-image'
relative:
opContainer: ' > .op'
replyPost: '.reply'
comment: '.body'
spoiler: '.spoiler'
quotelink: 'a[onclick^="highlightReply("]'

View File

@ -16,7 +16,7 @@ SW.yotsuba =
threadDivider: '.board > hr'
summary: '.summary'
postContainer: '.postContainer'
sideArrows: '.sideArrows'
sideArrows: 'div.sideArrows'
post: '.post'
infoRoot: '.postInfo'
info:
@ -41,6 +41,9 @@ SW.yotsuba =
text: '.file > :first-child'
link: '.fileText > a'
thumb: 'a.fileThumb > [data-md5]'
relative:
opContainer: '.opContainer'
replyPost: ' > .reply'
comment: '.postMessage'
spoiler: 's'
quotelink: ':not(pre) > .quotelink' # XXX https://github.com/4chan/4chan-JS/issues/77: 4chan currently creates quote links inside [code] tags; ignore them