78 lines
1.9 KiB
SCSS
78 lines
1.9 KiB
SCSS
|
/*
|
||
|
|
* text-underline-offset doesn't work in Chrome at all 👎
|
||
|
|
* But looks nice in Safari/Firefox, so let's keep it and
|
||
|
|
* maybe Chrome will support it soon.
|
||
|
|
*/
|
||
|
|
a {
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--wp--style--color--link, var(--global--color-primary));
|
||
|
|
text-underline-offset: 3px;
|
||
|
|
text-decoration-skip-ink: all;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
text-decoration-style: dotted;
|
||
|
|
text-decoration-skip-ink: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
|
||
|
|
|
||
|
|
/* Only visible in Windows High Contrast mode */
|
||
|
|
outline: 2px solid transparent;
|
||
|
|
|
||
|
|
text-decoration: underline 1px dotted currentColor;
|
||
|
|
text-decoration-skip-ink: none;
|
||
|
|
background: rgba(255, 255, 255, .9);
|
||
|
|
|
||
|
|
// Change text color when the body background is dark.
|
||
|
|
.is-dark-theme & {
|
||
|
|
background: var(--global--color-black);
|
||
|
|
color: var(--global--color-white);
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
.meta-nav {
|
||
|
|
color: var(--wp--style--color--link, var(--global--color-white));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Change colors when the body background is white.
|
||
|
|
.has-background-white & {
|
||
|
|
background: rgba(0, 0, 0, .9);
|
||
|
|
color: var(--wp--style--color--link, var(--global--color-white));
|
||
|
|
|
||
|
|
.meta-nav {
|
||
|
|
color: var(--wp--style--color--link, var(--global--color-white));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.skip-link {
|
||
|
|
|
||
|
|
/* Only visible in Windows High Contrast mode */
|
||
|
|
outline: 2px solid transparent;
|
||
|
|
outline-offset: -2px;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
color: #21759b;
|
||
|
|
background-color: #f1f1f1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.custom-logo-link {
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Enforce the custom link color even if a custom background color has been set.
|
||
|
|
// The extra specificity here is required to override the background color styles.
|
||
|
|
.has-background {
|
||
|
|
// Target both current level and nested block.
|
||
|
|
.has-link-color a,
|
||
|
|
&.has-link-color a {
|
||
|
|
color: var(--wp--style--color--link, var(--global--color-primary));
|
||
|
|
}
|
||
|
|
}
|