Template
Anchor link/styles.css
From Dogcraft Wiki
mNo edit summary |
(Changed float based positioning to absolute positioning (Partly done through Common.css because of extension restrictions) [1/2]) |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
a > span.anchor-visible::after { | a > span.anchor-visible::after { | ||
content: '#'; | content: '#'; | ||
margin-left: calc(-1ch - .1ch); | |||
margin-left: -. | padding-right: .1ch; | ||
padding-right: . | |||
-webkit-user-select: none; | -webkit-user-select: none; | ||
user-select: none; | user-select: none; | ||
opacity: 0; | opacity: 0; | ||
transition: color .25s,opacity .25s; | transition: color .25s,opacity .25s; | ||
position: absolute; | |||
left: 0; | |||
} | |||
/* TemplateData does not support :has() - this rule has been implemented in Common.css for the time being */ | |||
/*:has(> a > span.anchor-visible) { | |||
position: relative; | |||
}*/ | |||
/* the margin needs to be greater inside lists so it doesn't collide with the list marker */ | |||
ul a > span.anchor-visible::after { | |||
margin-left: calc(-3.4ch - .1ch); /* 3.4ch for lists inside boxes. See page Events for reference */ | |||
} | } | ||
:hover > a > span.anchor-visible::after, | :hover > a > span.anchor-visible::after, | ||
:focus | a:focus > span.anchor-visible::after { | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
/* templatestyles appears to lack :has() support at the moment | |||
a:has(> span.anchor-visible) { | |||
float:left; | |||
}*/ | |||
Latest revision as of 21:55, 27 July 2024
a > span.anchor-visible::after {
content: '#';
margin-left: calc(-1ch - .1ch);
padding-right: .1ch;
-webkit-user-select: none;
user-select: none;
opacity: 0;
transition: color .25s,opacity .25s;
position: absolute;
left: 0;
}
/* TemplateData does not support :has() - this rule has been implemented in Common.css for the time being */
/*:has(> a > span.anchor-visible) {
position: relative;
}*/
/* the margin needs to be greater inside lists so it doesn't collide with the list marker */
ul a > span.anchor-visible::after {
margin-left: calc(-3.4ch - .1ch); /* 3.4ch for lists inside boxes. See page Events for reference */
}
:hover > a > span.anchor-visible::after,
a:focus > span.anchor-visible::after {
opacity: 1;
}
/* templatestyles appears to lack :has() support at the moment
a:has(> span.anchor-visible) {
float:left;
}*/
