Gazette: Minor fixes to Gutenberg styles, including:

* Updating button styles to account for the border.
* Making colour style selectors more specific.
* Fix comment widget styles in the editor.
This commit is contained in:
Laurel Fulford 2018-11-19 17:13:13 -08:00
parent e76bd5d824
commit 23d1bd7f75
2 changed files with 106 additions and 17 deletions

View file

@ -134,10 +134,8 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Button */
.wp-block-button .wp-block-button__link {
background: #3863c1;
border: 2px solid #3863c1;
border-radius: 0;
color: #fff;
border: 2px solid #3863c1;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: bold;
@ -146,14 +144,24 @@ p.has-drop-cap:not(:focus)::first-letter {
text-transform: uppercase;
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover {
.wp-block-button__link,
.wp-block-button__link:visited {
background: #3863c1;
color: #fff;
}
.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link:hover {
background: #fff;
color: #3863c1;
outline: none;
}
.wp-block-button__link.has-background.has-text-color {
border-color: currentColor;
}
/* Seperator */
.wp-block-separator:not(.is-style-wide) {
@ -218,42 +226,82 @@ p.has-drop-cap:not(:focus)::first-letter {
6.0 Blocks - Colors
--------------------------------------------------------------*/
.has-blue-color {
.has-blue-color,
.has-blue-color:hover,
.has-blue-color:focus,
.has-blue-color:active,
.has-blue-color:visited {
color: #3863c1;
}
.has-blue-background-color {
.has-blue-background-color,
.has-blue-background-color:hover,
.has-blue-background-color:focus,
.has-blue-background-color:active,
.has-blue-background-color:visited {
background-color: #3863c1;
}
.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: #222;
}
.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: #222;
}
.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: #777;
}
.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: #777;
}
.has-light-gray-color {
.has-light-gray-color,
.has-light-gray-color:hover,
.has-light-gray-color:focus,
.has-light-gray-color:active,
.has-light-gray-color:visited {
color: #ddd;
}
.has-light-gray-background-color {
.has-light-gray-background-color,
.has-light-gray-background-color:hover,
.has-light-gray-background-color:focus,
.has-light-gray-background-color:active,
.has-light-gray-background-color:visited {
background-color: #ddd;
}
.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;
}

View file

@ -43,7 +43,7 @@ Description: Used to style Gutenberg Blocks in the editor.
.editor-post-title__block .editor-post-title__input {
font-family: "Lato", sans-serif;
font-size: 39px;
font-weight: bold;
font-weight: 900;
line-height: 1.54;
}
@ -498,6 +498,14 @@ p.has-drop-cap:not(:focus)::first-letter {
outline: none;
}
.wp-block-button__link.has-background.has-text-color {
border-color: currentColor;
}
.wp-block-button .editor-rich-text__tinymce.mce-content-body {
line-height: 30px;
}
/* Seperator */
.wp-block-separator {
@ -510,9 +518,42 @@ p.has-drop-cap:not(:focus)::first-letter {
6.0 Blocks - Widgets
--------------------------------------------------------------*/
/* Archives, Categories & Latest Posts */
.editor-styles-wrapper .wp-block-archives ul,
.editor-styles-wrapper .wp-block-categories ul,
.editor-styles-wrapper .wp-block-categories ul ul,
.editor-styles-wrapper .wp-block-latest-posts ul {
list-style: square inside;
}
/* Latest Comments */
.wp-block-latest-comments__comment,
.edit-post-visual-editor .editor-block-list__block .wp-block-latest-comments__comment-excerpt p {
font-size: 16px;
}
.wp-block-latest-comments__comment:not(:last-child) {
border-bottom: 1px solid #eee;
margin-bottom: 30px;
padding-bottom: 10px;
}
.wp-block-latest-comments__comment-meta,
.wp-block-latest-comments__comment-date {
font-family: "Lato", sans-serif;
}
.wp-block-latest-comments__comment-meta a {
font-weight: bold;
}
.wp-block-latest-comments__comment-date {
color: #777;
font-size: 13px;
font-weight: bold;
margin-top: 0.5em;
text-transform: uppercase;
}