2c1ec8424c
- switch dark/light icons and add hover text - darken TOC text - make white shadow on link text only on hover - remove obsolete TOC code - make all TOC entries take up 100% width
118 lines
3.1 KiB
SCSS
118 lines
3.1 KiB
SCSS
// Link and buttons
|
||
|
||
#breadcrumbs a,
|
||
figcaption a,
|
||
p a,
|
||
.page-tags a,
|
||
table a,
|
||
#crosslinks a:not(.highlight),
|
||
li a,
|
||
dl a {
|
||
@include link-underline($back-white, $text-dark);
|
||
text-shadow: none;
|
||
&:hover {
|
||
@include text-underline-crop($back-white);
|
||
@include text-background($back-white, $text-dark);
|
||
@include text-selection($back-white);
|
||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
|
||
background-position: 0% 100%;
|
||
background-size: 0.8em auto;
|
||
text-decoration: none;
|
||
}
|
||
|
||
&[href^="#"] {
|
||
@include text-underline-crop($back-white);
|
||
@include text-background($back-white, $text-gray);
|
||
@include text-selection($back-white);
|
||
text-shadow: none;
|
||
&:hover {
|
||
@include text-underline-crop($back-white);
|
||
@include text-background($back-white, $text-medium);
|
||
@include text-selection($back-white);
|
||
}
|
||
}
|
||
}
|
||
|
||
#theme-switch:checked ~ #page {
|
||
#breadcrumbs a,
|
||
figcaption a,
|
||
p a,
|
||
.page-tags a,
|
||
table a,
|
||
#crosslinks a:not(.highlight),
|
||
li a,
|
||
dl a {
|
||
&:hover {
|
||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
|
||
}
|
||
}
|
||
}
|
||
|
||
#content .page-intro p a,
|
||
#footnotes a {
|
||
@include link-underline($back-white, $text-gray);
|
||
|
||
&:hover {
|
||
@include link-underline($back-light, $text-gray);
|
||
}
|
||
}
|
||
|
||
.pile-link::before {
|
||
background-color: $back-white;
|
||
content: "‹\00a0";
|
||
}
|
||
|
||
.pile-link::after {
|
||
background-color: $back-white;
|
||
content: "\00a0›";
|
||
}
|
||
|
||
#crosslinks {
|
||
margin-top: 20px;
|
||
a:not(.highlight) {
|
||
@include tag;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
@include button(1px, 14px, 7px);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn.disabled {
|
||
color: $text-light;
|
||
&:hover {
|
||
cursor: default;
|
||
}
|
||
}
|
||
|
||
.btn.small {
|
||
@include button(1px, 12px, 3px);
|
||
padding-right: 9px;
|
||
padding-left: 9px;
|
||
}
|
||
|
||
.btn.highlight {
|
||
text-shadow: none;
|
||
text-decoration: none;
|
||
color: $text-dark;
|
||
background-color: yellow;
|
||
}
|
||
|
||
.btn.primary {
|
||
text-shadow: none;
|
||
text-decoration: none;
|
||
color: $back-white;
|
||
background-color: $accent;
|
||
|
||
&:hover {
|
||
background-color: $back-light;
|
||
background-image: none;
|
||
color: $text-dark;
|
||
}
|
||
}
|
||
|
||
.image-link, .image-link:hover {
|
||
@include link-reset();
|
||
}
|