mirror of https://github.com/tiangolo/fastapi.git
💄 Update styles for internal and external links in new tab (#15058)
This commit is contained in:
parent
4d6a5470bc
commit
8d6fdc80e8
|
|
@ -32,24 +32,68 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
/* External links: absolute URLs opening in new tab
|
||||
Skip image links, .no-link-icon, and .announce-link */
|
||||
a[target="_blank"][href^="http"]:not(:has(img)):not(.no-link-icon):not(.announce-link) {
|
||||
/* For right to left languages */
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.external-link::after {
|
||||
/* \00A0 is a non-breaking space
|
||||
to make the mark be on the same line as the link
|
||||
*/
|
||||
content: "\00A0[↪]";
|
||||
a[target="_blank"][href^="http"]:not(:has(img)):not(.no-link-icon):not(.announce-link)::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
margin-left: 0.25em;
|
||||
vertical-align: middle;
|
||||
opacity: 0.55;
|
||||
background: currentColor;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
a.internal-link::after {
|
||||
/* \00A0 is a non-breaking space
|
||||
to make the mark be on the same line as the link
|
||||
*/
|
||||
content: "\00A0↪";
|
||||
a[target="_blank"][href^="http"]:not(:has(img)):not(.no-link-icon):not(.announce-link):hover::after {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Internal links opening in new tab: relative URLs with target=_blank
|
||||
Skip image links, .no-link-icon, and .announce-link */
|
||||
a[target="_blank"]:not([href^="http"]):not(:has(img)):not(.no-link-icon):not(.announce-link) {
|
||||
/* For right to left languages */
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a[target="_blank"]:not([href^="http"]):not(:has(img)):not(.no-link-icon):not(.announce-link)::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
margin-left: 0.25em;
|
||||
vertical-align: middle;
|
||||
opacity: 0.55;
|
||||
background: currentColor;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='14' rx='2'/%3E%3Cpath d='M7 3h14v14'/%3E%3C/svg%3E");
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='14' rx='2'/%3E%3Cpath d='M7 3h14v14'/%3E%3C/svg%3E");
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
a[target="_blank"]:not([href^="http"]):not(:has(img)):not(.no-link-icon):not(.announce-link):hover::after {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Disable link icons in footer and header nav */
|
||||
.md-footer a::after,
|
||||
.md-header a::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
|
|
|
|||
Loading…
Reference in New Issue