refine toc link active color

This commit is contained in:
Reorx 2022-05-05 17:17:06 +08:00
parent b8592bd443
commit 140f7c9492
2 changed files with 14 additions and 4 deletions

View File

@ -308,11 +308,13 @@ h6:hover .anchor {
border-radius: var(--radius); border-radius: var(--radius);
padding: 0.4em 0; padding: 0.4em 0;
} }
.toc.side {
font-size: .8em;
}
@media screen and (min-width: 1440px) { @media screen and (min-width: 1440px) {
.toc.side { .toc.side {
position: fixed; position: fixed;
top: 118px; top: 118px;
font-size: .8em;
z-index: 1; z-index: 1;
max-height: calc(100% - 150px); max-height: calc(100% - 150px);
overflow: auto; overflow: auto;
@ -351,10 +353,16 @@ h6:hover .anchor {
.toc li ul { .toc li ul {
margin-inline-start: 20px; margin-inline-start: 20px;
} }
.toc li a.active { .toc li a {
box-shadow: 0 2px 0 var(--secondary); line-height: 1.5em;
padding: .1em .4em;
border-radius: 5px;
display: block;
} }
.toc a:hover { .toc li a.active {
background-color: var(--link-background-color);
}
.toc li a:hover {
text-decoration: underline; text-decoration: underline;
} }

View File

@ -17,6 +17,7 @@
--content: rgb(31, 31, 31); --content: rgb(31, 31, 31);
--code-bg: rgb(245, 245, 245); --code-bg: rgb(245, 245, 245);
--border: rgb(238, 238, 238); --border: rgb(238, 238, 238);
--link-background-color: #e8e3f7;
--link-color: var(--primary); --link-color: var(--primary);
--link-hover-color: #573eaa; --link-hover-color: #573eaa;
--link-underline-shadow: 0 1px 0 var(--link-color); --link-underline-shadow: 0 1px 0 var(--link-color);
@ -35,6 +36,7 @@
--content: rgb(196, 196, 197); --content: rgb(196, 196, 197);
--code-bg: rgb(55, 56, 62); --code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51); --border: rgb(51, 51, 51);
--link-background-color: #5242746d;
--link-color: var(--primary); --link-color: var(--primary);
--link-hover-color: #876fd6; --link-hover-color: #876fd6;
--link-underline-shadow: 0 1px 0 var(--link-color); --link-underline-shadow: 0 1px 0 var(--link-color);