balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

links.scss (1907B)

      1 /*
      2  * text-underline-offset doesn't work in Chrome at all 👎
      3  * But looks nice in Safari/Firefox, so let's keep it and
      4  * maybe Chrome will support it soon.
      5  */
      6 a {
      7 	cursor: pointer;
      8 	color: var(--wp--style--color--link, var(--global--color-primary));
      9 	text-underline-offset: 3px;
     10 	text-decoration-skip-ink: all;
     11 }
     12 
     13 a:hover {
     14 	text-decoration-style: dotted;
     15 	text-decoration-skip-ink: none;
     16 }
     17 
     18 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
     19 
     20 	/* Only visible in Windows High Contrast mode */
     21 	outline: 2px solid transparent;
     22 
     23 	text-decoration: underline 1px dotted currentColor;
     24 	text-decoration-skip-ink: none;
     25 	background: rgba(255, 255, 255, .9);
     26 
     27 	// Change text color when the body background is dark.
     28 	.is-dark-theme & {
     29 		background: var(--global--color-black);
     30 		color: var(--global--color-white);
     31 		text-decoration: none;
     32 
     33 		.meta-nav {
     34 			color: var(--wp--style--color--link, var(--global--color-white));
     35 		}
     36 	}
     37 
     38 	// Change colors when the body background is white.
     39 	.has-background-white & {
     40 		background: rgba(0, 0, 0, .9);
     41 		color: var(--wp--style--color--link, var(--global--color-white));
     42 
     43 		.meta-nav {
     44 			color: var(--wp--style--color--link, var(--global--color-white));
     45 		}
     46 	}
     47 
     48 	&.skip-link {
     49 
     50 		/* Only visible in Windows High Contrast mode */
     51 		outline: 2px solid transparent;
     52 		outline-offset: -2px;
     53 
     54 		&:focus {
     55 			color: #21759b;
     56 			background-color: #f1f1f1;
     57 		}
     58 	}
     59 
     60 	&.custom-logo-link {
     61 		background: none;
     62 	}
     63 
     64 	img {
     65 		outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
     66 	}
     67 }
     68 
     69 // Enforce the custom link color even if a custom background color has been set.
     70 // The extra specificity here is required to override the background color styles.
     71 .has-background {
     72 	// Target both current level and nested block.
     73 	.has-link-color a,
     74 	&.has-link-color a {
     75 		color: var(--wp--style--color--link, var(--global--color-primary));
     76 	}
     77 }