Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-26 01:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): create a new style for links

Browse Source
This commit is contained in:
Adorian Doran 2025-01-23 00:47:14 +02:00
parent b0014de365
commit 027649213a
1 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/public/stylesheets/theme-next/forms.css
View File

@ -316,3 +316,74 @@ label:has(> input[type="checkbox"]:disabled)::before,
label:has(> input[type="checkbox"]:disabled)::after {
opacity: .5;
}
/* Links */
:root {
--link-hover-background: #ffffff26;
--link-hover-color: white;
}
body a.tn-link,
body a.tn-link:visited,
.use-tn-links a,
.use-tn-links a:visited {
--background: transparent;
border-radius: 4px;
background: var(--background);
outline: 0 solid var(--background);
color: currentColor;
font-weight: normal;
text-decoration: underline;
transition: background-color 200ms ease-out,
outline 200ms ease-out,
color 300ms ease-out;
}
body a.tn-link:focus-visible,
.use-tn-links a:focus-visible {
outline: 2px solid var(--input-focus-outline-color);
outline-offset: 2px;
}
body a.tn-link:hover,
.use-tn-links a:hover {
--background: var(--link-hover-background);
outline-width: 4px;
outline-offset: 0;
color: var(--link-hover-color);
transition: background-color 100ms ease-in,
outline 100ms ease-in,
color 150ms ease-in;
}
a.tn-link.external:not(.no-arrow)::after,
a.tn-link[href^="http://"]:not(.no-arrow)::after,
a.tn-link[href^="https://"]:not(.no-arrow)::after,
.use-tn-links a.external:not(.no-arrow)::after,
.use-tn-links a[href^="http://"]:not(.no-arrow)::after,
.use-tn-links a[href^="https://"]:not(.no-arrow)::after {
display: inline-block;
opacity: .5;
}
@keyframes link-arrow-blink {
from {
opacity: 1;
} to {
opacity: .5;
}
}
a.tn-link:hover.external:not(.no-arrow)::after,
a.tn-link:hover[href^="http://"]:not(.no-arrow)::after,
a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
.use-tn-links a:hover.external:not(.no-arrow)::after,
.use-tn-links a:hover[href^="http://"]:not(.no-arrow)::after,
.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after {
animation: link-arrow-blink 500ms linear alternate infinite;
}