浏览代码

Dyad 2: Minor fixes to Gutenberg styles, including:
* RTL - fix alignment issue with file block button
* Update file button styles, so it's correct on hover
* Update styles for centred widgets on front-end and in editor
* Make custom editor style selectors more specific
* Correct font sizes in editor, and for quotes

Laurel Fulford 6 年之前
父节点
当前提交
8b87e55752
共有 2 个文件被更改,包括 126 次插入24 次删除
  1. 79 17
      dyad-2/css/blocks.css
  2. 47 7
      dyad-2/css/editor-blocks.css

+ 79 - 17
dyad-2/css/blocks.css

@@ -159,7 +159,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* File */
 
-.wp-block-file a.wp-block-file__button {
+.wp-block-file .wp-block-file__button {
 	background-color: #678db8;
 	border-color: #678db8;
 	border-radius: 0;
@@ -170,8 +170,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 }
 
-.wp-block-file a.wp-block-file__button:hover,
-.wp-block-file a.wp-block-file__button:focus {
+.wp-block-file__button:hover,
+.wp-block-file__button:focus {
 	background-color: #678db8;
 	opacity: 0.75;
 }
@@ -180,6 +180,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 	opacity: 0.9;
 }
 
+.rtl .wp-block-file * + .wp-block-file__button {
+	margin-left: 0.75em;
+	margin-right: 0;
+}
+
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting Blocks
 --------------------------------------------------------------*/
@@ -283,6 +288,7 @@ body:not(.has-post-thumbnail) .wp-block-table.alignfull {
 .wp-block-archives.aligncenter,
 .wp-block-categories.aligncenter,
 .wp-block-latest-posts.aligncenter {
+	list-style-position: inside;
 	text-align: center;
 }
 
@@ -324,58 +330,114 @@ body:not(.has-post-thumbnail) .wp-block-table.alignfull {
 7.0 Blocks - Colors
 --------------------------------------------------------------*/
 
-.has-bright-blue-color {
+.has-bright-blue-color,
+.has-bright-blue-color:hover,
+.has-bright-blue-color:focus,
+.has-bright-blue-color:active,
+.has-bright-blue-color:visited {
 	color: #678db8;
 }
 
-.has-bright-blue-background-color {
+.has-bright-blue-background-color,
+.has-bright-blue-background-color:hover,
+.has-bright-blue-background-color:focus,
+.has-bright-blue-background-color:active,
+.has-bright-blue-background-color:visited {
 	background-color: #678db8;
 }
 
-.has-yellow-color {
+.has-yellow-color,
+.has-yellow-color:hover,
+.has-yellow-color:focus,
+.has-yellow-color:active,
+.has-yellow-color:visited {
 	color: #e7ae01;
 }
 
-.has-yellow-background-color {
+.has-yellow-background-color,
+.has-yellow-background-color:hover,
+.has-yellow-background-color:focus,
+.has-yellow-background-color:active,
+.has-yellow-background-color:visited {
 	background-color: #e7ae01;
 }
 
-.has-light-gray-blue-color {
+.has-light-gray-blue-color,
+.has-light-gray-blue-color:hover,
+.has-light-gray-blue-color:focus,
+.has-light-gray-blue-color:active,
+.has-light-gray-blue-color:visited {
 	color: #abb7c3;
 }
 
-.has-light-gray-blue-background-color {
+.has-light-gray-blue-background-color,
+.has-light-gray-blue-background-color:hover,
+.has-light-gray-blue-background-color:focus,
+.has-light-gray-blue-background-color:active,
+.has-light-gray-blue-background-color:visited {
 	background-color: #abb7c3;
 }
 
-.has-medium-gray-color {
+.has-medium-gray-color,
+.has-medium-gray-color:hover,
+.has-medium-gray-color:focus,
+.has-medium-gray-color:active,
+.has-medium-gray-color:visited {
 	color: #6a6c6e;
 }
 
-.has-medium-gray-background-color {
+.has-medium-gray-background-color,
+.has-medium-gray-background-color:hover,
+.has-medium-gray-background-color:focus,
+.has-medium-gray-background-color:active,
+.has-medium-gray-background-color:visited {
 	background-color: #6a6c6e;
 }
 
-.has-dark-gray-color {
+.has-dark-gray-color,
+.has-dark-gray-color:hover,
+.has-dark-gray-color:focus,
+.has-dark-gray-color:active,
+.has-dark-gray-color:visited {
 	color: #1a1c1e;
 }
 
-.has-dark-gray-background-color {
+.has-dark-gray-background-color,
+.has-dark-gray-background-color:hover,
+.has-dark-gray-background-color:focus,
+.has-dark-gray-background-color:active,
+.has-dark-gray-background-color:visited {
 	background-color: #1a1c1e;
 }
 
-.has-dark-gray-blue-color {
+.has-dark-gray-blue-color,
+.has-dark-gray-blue-color:hover,
+.has-dark-gray-blue-color:focus,
+.has-dark-gray-blue-color:active,
+.has-dark-gray-blue-color:visited {
 	color: #292c2f;
 }
 
-.has-dark-gray-blue-background-color {
+.has-dark-gray-blue-background-color,
+.has-dark-gray-blue-background-color:hover,
+.has-dark-gray-blue-background-color:focus,
+.has-dark-gray-blue-background-color:active,
+.has-dark-gray-blue-background-color:visited {
 	background-color: #292c2f;
 }
 
-.has-white-color {
+.has-white-color,
+.has-white-color:hover,
+.has-white-color:focus,
+.has-white-color:active,
+.has-white-color:visited {
 	color: #fff;
 }
 
-.has-white-background-color {
+.has-white-background-color,
+.has-white-background-color:hover,
+.has-white-background-color:focus,
+.has-white-background-color:active,
+.has-white-background-color:visited {
 	background-color: #fff;
 }

+ 47 - 7
dyad-2/css/editor-blocks.css

@@ -22,7 +22,7 @@ Description: Used to style Gutenberg Blocks in the editor.
 .edit-post-visual-editor .editor-block-list__block p,
 .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
 	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 18px;
+	font-size: 17px;
 }
 
 .edit-post-visual-editor .editor-block-list__block {
@@ -275,14 +275,14 @@ p.has-drop-cap:not(:focus)::first-letter {
 	padding-right: 1.5em;
 }
 
-.wp-block-quote.is-large p,
-.wp-block-quote.is-large-style p {
+.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
+.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
 	font-size: 24px;
 }
 
-.wp-block-quote.is-large cite,
-.wp-block-quote.is-style-large cite {
-	font-size: 80%;
+.wp-block-quote.is-large .wp-block-quote__citation,
+.wp-block-quote.is-style-large .wp-block-quote__citation {
+	font-size: 14.2833px;
 	text-align: inherit;
 }
 
@@ -511,7 +511,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-button .wp-block-button__link:hover,
 .wp-block-button .wp-block-button__link:focus {
-	background-color: inherit;
+	background-color: #678db8;
 	opacity: 0.75;
 }
 
@@ -526,3 +526,43 @@ p.has-drop-cap:not(:focus)::first-letter {
 /*--------------------------------------------------------------
 6.0 Blocks - Widgets
 --------------------------------------------------------------*/
+
+/* Archives, Categories & Latest Posts */
+
+[data-align="center"] .wp-block-archives ul,
+[data-align="center"] .wp-block-categories ul,
+[data-align="center"] .wp-block-latest-posts ul {
+	list-style-position: inside;
+	text-align: center;
+}
+
+/* Latest Comments */
+
+.wp-block-latest-comments {
+	font-size: 17px;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.wp-block-latest-comments a {
+	text-decoration: none;
+}
+
+.wp-block-latest-comments__comment {
+	margin-bottom: 2em;
+}
+
+.wp-block-latest-comments__comment-date {
+	font-size: 15px;
+}
+
+.wp-block-latest-comments__comment-author,
+.wp-block-latest-comments__comment-link {
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
+	margin: 0;
+}