css: generalize anchor :target highlighting.

Generalize :target css so that it works on other things besides forum
posts (e.g. wiki pages, /post_versions#post-version-123).
This commit is contained in:
evazion
2019-09-28 14:16:45 -05:00
parent 6ef1a1c0b8
commit f7d7ed4b23
3 changed files with 8 additions and 6 deletions

View File

@@ -89,6 +89,11 @@ input[type="button"], input[type="submit"], button {
padding-left: 0.5em;
}
/* Highlight link anchor targets (e.g. /forum_topics/123#forum_post_456). Use !important to override even table row backgrounds. */
:target {
background: var(--target-background) !important;
}
menu {
margin: 0;
padding: 0;

View File

@@ -10,6 +10,7 @@
--error-background-color: hsl(0, 100%, 95%); /* light red */
--success-background-color: hsl(120, 100%, 95%); /* light green */
--warning-background-color: hsl(50, 100%, 93%); /* light yellow */
--target-background: #FFC;
--subnav-menu-background-color: #F5F5FF;
@@ -65,7 +66,6 @@
--forum-vote-up-color: green;
--forum-vote-meh-color: goldrenrod;
--forum-vote-down-color: red;
--forum-post-highlight-background-color: #FFC;
--comment-sticky-background-color: var(--subnav-menu-background-color);
@@ -335,7 +335,6 @@ body[data-user-theme="dark"] {
--forum-vote-up-color: var(--green-1);
--forum-vote-meh-color: var(--yellow-1);
--forum-vote-down-color: var(--red-1);
--forum-post-highlight-background-color: var(--blue-0);
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-widget-content-background: var(--grey-2);
@@ -419,6 +418,8 @@ body[data-user-theme="dark"] {
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: white;
--target-background: var(--blue-0);
--tag-count-indicator-frown-color: var(--red-1);
--tag-count-indicator-meh-color: var(--yellow-1);
--tag-count-indicator-smile-color: var(--green-1);

View File

@@ -12,10 +12,6 @@ div.list-of-forum-posts {
font-weight: bold;
}
&:target {
background-color: var(--forum-post-highlight-background-color);
}
.vote-score-up {
color: var(--forum-vote-up-color);
}