Переглянути джерело

Curator: update link and button styles (#6028)

Sarah Norris 3 роки тому
батько
коміт
0a50d250a9
1 змінених файлів з 35 додано та 16 видалено
  1. 35 16
      curator/style.css

+ 35 - 16
curator/style.css

@@ -23,28 +23,41 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 }
 }
 
 
 /*
 /*
- * Button hover styles.
+ * Button pseudo-class styles.
  * Necessary until the following issue is resolved in Gutenberg:
  * Necessary until the following issue is resolved in Gutenberg:
  * https://github.com/WordPress/gutenberg/issues/27075
  * https://github.com/WordPress/gutenberg/issues/27075
  */
  */
 
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link {
+ .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 	padding: 0;
 	padding: 0;
 }
 }
-.wp-block-button__link:hover {
+.wp-block-button__link:visited {
+	color: currentColor;
+}
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
 	text-decoration: underline;
 	text-decoration: underline;
-	color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--primary);
 }
 }
-.wp-block-button__link.wp-block-button__link:active {
+.wp-block-button:is(.is-style-outline) .wp-block-button__link:hover {
+	background: var(--wp--preset--color--foreground);
+	border-color: var(--wp--preset--color--foreground);
 	color: var(--wp--preset--color--background);
 	color: var(--wp--preset--color--background);
-	background-color: var(--wp--preset--color--primary);
+}
+.wp-block-button__link.wp-block-button__link:active {
+	color: var(--wp--preset--color--primary);
 }
 }
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
-	color: var(--wp--preset--color--foreground);
-	border-bottom: 1px dashed var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--primary);
+	text-decoration-line: underline;
+	text-decoration-thickness: .08rem;
+	text-decoration-style: dotted;
+	text-underline-offset: .1rem;
 }
 }
 .wp-block-button:is(.is-style-outline) .wp-block-button__link:focus {
 .wp-block-button:is(.is-style-outline) .wp-block-button__link:focus {
-	outline: 1px dashed var(--wp--preset--color--foreground);
+	background-color: var(--wp--preset--color--primary);
+	border-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
+	outline: 1px dotted var(--wp--preset--color--primary);
 }
 }
 
 
 .wp-block-search__button.wp-block-search__button,
 .wp-block-search__button.wp-block-search__button,
@@ -72,7 +85,8 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 ):is(
 ):is(
 	:focus
 	:focus
 ) {
 ) {
-	outline: 1px dashed var(--wp--preset--color--foreground);
+	border: 1px solid var(--wp--preset--color--background);
+	outline: 1px dotted var(--wp--preset--color--foreground);
 }
 }
 
 
 /*
 /*
@@ -86,7 +100,7 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 .wp-block-file .wp-block-file__button {
 .wp-block-file .wp-block-file__button {
 	background-color: var(--wp--preset--color--foreground);
 	background-color: var(--wp--preset--color--foreground);
 	border-radius: 0;
 	border-radius: 0;
-	border: none;
+	border: 1px solid var(--wp--preset--color--foreground);
 	color: var(--wp--preset--color--background);
 	color: var(--wp--preset--color--background);
 	font-size: var(--wp--preset--typography--font-size--normal);
 	font-size: var(--wp--preset--typography--font-size--normal);
 	padding: calc(0.667em + 2px) calc(1.333em + 2px);
 	padding: calc(0.667em + 2px) calc(1.333em + 2px);
@@ -120,7 +134,9 @@ a:not(
 
 
 a:not(
 a:not(
 	.wp-block-search__button,
 	.wp-block-search__button,
-	.wp-block-button__link
+	.wp-block-button__link,
+	.wp-block-navigation-link__content,
+	.wp-block-navigation-item__content
 ):active {
 ):active {
 	text-decoration: none;
 	text-decoration: none;
 	background-color: var(--wp--preset--color--tertiary);
 	background-color: var(--wp--preset--color--tertiary);
@@ -132,14 +148,16 @@ a:not(
 
 
 :is(
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content
+	.wp-block-navigation-link__content,
+	.wp-block-navigation-item__content
 ):hover {
 ):hover {
 	text-decoration: underline;
 	text-decoration: underline;
 }
 }
 
 
 :is(
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content
+	.wp-block-navigation-link__content,
+	.wp-block-navigation-item__content
 ):focus {
 ):focus {
 	text-decoration-line: underline;
 	text-decoration-line: underline;
 	text-decoration-style: dotted;
 	text-decoration-style: dotted;
@@ -147,9 +165,10 @@ a:not(
 
 
 :is(
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content
+	.wp-block-navigation-link__content,
+	.wp-block-navigation-item__content
 ):active {
 ):active {
-	background-color: var(--wp--preset--color--tertiary);
+	text-decoration: underline;
 }
 }