Преглед на файлове

Scratchpad: Minor fixes to Gutenberg implementation, including:
* Update drop cap positioning and sizing.
* Add script font to verse block, to differentiate it.
* Update selectors for button blocks, for better custom colour fallbacks.
* Update colour selectors, to account for :visited state.
* Make sure bullets are also centred for list-based widget blocks.

Laurel Fulford преди 6 години
родител
ревизия
ac292c2f36
променени са 2 файла, в които са добавени 72 реда и са изтрити 39 реда
  1. 36 25
      scratchpad/blocks.css
  2. 36 14
      scratchpad/editor-blocks.css

+ 36 - 25
scratchpad/blocks.css

@@ -40,7 +40,8 @@ Description: Used to style Gutenberg Blocks.
 /* Paragraph */
 
 p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 80px;
+	font-size: 5em;
+	margin-top: 0.16em;
 }
 
 /* Images */
@@ -79,6 +80,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
+	padding-left: 70px;
+	padding-right: 0;
 }
 
 .wp-block-quote.is-large,
@@ -97,6 +100,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	border: 0;
 }
 
+.rtl .wp-block-quote.is-large,
+.rtl .wp-block-quote.is-style-large {
+	padding-right: 70px;
+	padding-left: 0;
+}
+
 /* Audio */
 
 .wp-block-audio {
@@ -154,7 +163,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 .wp-block-verse {
 	background: transparent;
 	color: inherit;
-	font-family: inherit;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
 	font-size: inherit;
 	line-height: inherit;
 	margin-bottom: 1.5em;
@@ -248,7 +257,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border: 2px solid currentColor;
 	border-radius: 255px 15px 225px 15px/15px 225px 15px;
 	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
 	font-size: 14px;
@@ -262,6 +270,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	        transition: color 0.2s, border-color 0.2s;
 }
 
+.wp-block-button__link {
+	background: transparent;
+	color: rgba(119, 119, 119, 0.8);
+	border: 2px solid currentColor;
+}
+
 .wp-block-button .wp-block-button__link:active,
 .wp-block-button .wp-block-button__link:hover,
 .wp-block-button .wp-block-button__link:focus {
@@ -269,25 +283,16 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button__link:not(.has-background) {
-	background: transparent;
-	border: 2px solid rgba(119, 119, 119, 0.5);
-}
-
-.wp-block-button__link:not(.has-text-color) {
-	color: rgba(119, 119, 119, 0.8);
-}
-
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
 	color: #777;
 }
 
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
-	border-color: rgba(119, 119, 119, 0.8);
+.wp-block-button__link.has-background:active,
+.wp-block-button__link.has-background:hover,
+.wp-block-button__link.has-background:focus {
+	opacity: 0.8;
 }
 
 .wp-block-button.alignleft {
@@ -401,42 +406,48 @@ hr.wp-block-separator {
 .has-medium-gray-color,
 .has-medium-gray-color:hover,
 .has-medium-gray-color:focus,
-.has-medium-gray-color:active {
+.has-medium-gray-color:active,
+.has-medium-gray-color:visited {
 	color: #999;
 }
 
 .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:active,
+.has-medium-gray-background-color:visited {
 	background-color: #999;
 }
 
 .has-light-gray-color,
 .has-light-gray-color:hover,
 .has-light-gray-color:focus,
-.has-light-gray-color:active {
+.has-light-gray-color:active,
+.has-light-gray-color:visited {
 	color: #bdcbcc;
 }
 
 .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:active,
+.has-light-gray-background-color:visited {
 	background-color: #bdcbcc;
 }
 
 .has-white-color,
 .has-white-color:hover,
 .has-white-color:focus,
-.has-white-color:active {
+.has-white-color:active,
+.has-white-color:visited {
 	color: #fff;
 }
 
 .has-white-background-color,
 .has-white-background-color:hover,
 .has-white-background-color:focus,
-.has-white-background-color:active {
+.has-white-background-color:active,
+.has-white-background-color:visited {
 	background-color: #fff;
 }
 

+ 36 - 14
scratchpad/editor-blocks.css

@@ -271,7 +271,8 @@
 /* Paragraph */
 
 .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
-	font-size: 80px;
+	font-size: 5em;
+	margin-top: 0.16em;
 }
 
 .edit-post-visual-editor p {
@@ -376,10 +377,6 @@
 	font-style: italic;
 }
 
-.rtl .wp-block-quote.is-large,
-.rtl .wp-block-quote.is-style-large {
-}
-
 .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large,
 .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large,
 .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
@@ -457,7 +454,7 @@
 .wp-block-verse pre {
 	background: transparent;
 	color: inherit;
-	font-family: inherit;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
 	font-size: inherit;
 	line-height: inherit;
 	margin-bottom: 1.5em;
@@ -884,6 +881,14 @@
 6.0 Blocks - Widgets
 --------------------------------------------------------------*/
 
+[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;
+}
+
+
 /* Categories */
 
 .editor-block-list__block[data-align=right] .wp-block-categories__list,
@@ -893,24 +898,41 @@
 
 /* Latest Comments */
 
-.editor-block-list__block .wp-block-latest-comments__comment-meta a {
-	box-shadow: none;
+.wp-block-latest-comments {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.wp-block-latest-comments__comment-meta a {
 	font-weight: 700;
 	text-decoration: none;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #ccc;
 	margin-bottom: 0;
-	padding: .75em 0;
+	padding: 0.75em 0;
 }
 
-.rtl ol.wp-block-latest-comments {
-	margin-right: 0;
+.wp-block-latest-comments .avatar,
+.wp-block-latest-comments__comment-avatar {
+	margin: 0;
 }
 
-.wp-block-latest-comments__comment-excerpt p:last-child {
-	margin-bottom: 0;
+.wp-block-latest-comments__comment,
+.wp-block-latest-comments__comment-date,
+.wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
+}
+
+.wp-block-latest-comments__comment-date {
+	color: #999;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 16px;
+	font-size: 1rem;
+}
+
+.rtl ol.wp-block-latest-comments {
+	margin-right: 0;
 }
 
 /* Latest Posts */