Browse Source

More work on editor styles.

Caroline Moore 6 years ago
parent
commit
aae74abc81
1 changed files with 53 additions and 53 deletions
  1. 53 53
      scratchpad/editor-blocks.css

+ 53 - 53
scratchpad/editor-blocks.css

@@ -158,11 +158,7 @@
 .edit-post-visual-editor a,
 .editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
-	color: #f35029;
-	text-decoration: underline;
-	-webkit-transition: all 0.2s ease;
-	-moz-transition: all 0.2s ease;
-	transition: all 0.2s ease;
+	color: #537375;
 }
 
 .edit-post-visual-editor a:hover,
@@ -174,7 +170,8 @@
 .wp-block-freeform.block-library-rich-text__tinymce a:hover,
 .wp-block-freeform.block-library-rich-text__tinymce a:focus,
 .wp-block-freeform.block-library-rich-text__tinymce a:active {
-	color: #000;
+	color: #537375;
+	text-decoration: none;
 }
 
 /* List styles */
@@ -185,7 +182,7 @@
 .edit-post-visual-editor ol,
 .editor-block-list__block ol,
 .block-library-list ol.editor-rich-text__tinymce {
-	margin: 0 0 1.5em 2em;
+	margin: 0 0 1.5em 3em;
 	padding: 0;
 }
 
@@ -213,7 +210,7 @@
 .editor-block-list__block li > ol,
 .block-library-list li > ol {
 	margin-bottom: 0;
-	margin-left: 1.5em;
+	margin-left: 2em;
 }
 
 .rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
@@ -223,7 +220,7 @@
 .rtl .editor-block-list__block ol,
 .rtl .block-library-list ol.editor-rich-text__tinymce {
 	margin-left: 0;
-	margin-right: 1.5em;
+	margin-right: 2em;
 	padding: 0;
 }
 
@@ -246,47 +243,56 @@
 }
 
 .edit-post-visual-editor p {
-	margin: 0 0 20px;
+	margin: 0 0 1.5em;
 }
 
 .edit-post-visual-editor blockquote p {
-	margin: 0 0 20px;
+	margin: 0 0 1.5em;
 }
 
 /* Quote */
 
+.editor-block-list__block .wp-block-quote:before {
+	background: url("images/icon-sprites.svg") 0 -408px no-repeat;
+	background-size: 100%;
+	content: "";
+	display: block;
+	height: 39px;
+	left: 0;
+	opacity: 0.2;
+	position: absolute;
+	top: 0;
+	width: 50px;
+}
+
 .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
 .editor-block-list__block .wp-block-quote {
-	border-left: 6px solid #f35029;
-	font-family: "Libre Baskerville", Georgia, serif;
+	border: 0;
+	color: #aaa;
+	font-size: 22px;
 	font-style: italic;
-	font-size: 18px;
-	line-height: 1.825em;
-	margin: 0 0 1.5em -40px;
-	padding-left: 40px;
+	margin: 0;
+	padding-left: 70px;
+	position: relative;
 }
 
 .rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
 .rtl .editor-block-list__block .wp-block-quote {
-	border-left: 0;
-	border-right: 6px solid #f35029;
-	margin: 0 -40px 1.5em 0;
+	border: 0;
+	margin: 0;
 	padding-left: 0;
-	padding-right: 40px;
+	padding-right: 70px;
 }
 
 .edit-post-visual-editor .editor-block-list__block blockquote p:not(.wp-block-cover-text) {
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-style: italic;
-	font-size: 18px;
-	line-height: 1.825em;
+	font-size: 22px;
 }
 
 .editor-block-list__block .wp-block-quote__citation {
 	color: inherit;
-	font-size: inherit;
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-style: italic;
+	display: block;
+	font-size: 18px;
+	padding: 8px 0 0;
 }
 
 .editor-block-list__block .wp-block-quote em,
@@ -312,29 +318,18 @@
 
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
-	border-left: 6px solid #f35029;
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-style: italic;
-	line-height: 1.825em;
-	margin: 0 0 1.5em -40px;
-	padding-left: 40px;
-	font-size: 24px;
+	font-size: 32px;
 }
 
 .rtl .wp-block-quote.is-large,
 .rtl .wp-block-quote.is-style-large {
-	border-left: 0;
-	border-right: 6px solid #f35029;
-	margin: 0 -40px 1.5em 0;
-	padding-left: 0;
-	padding-right: 40px;
 }
 
 .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,
 .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
-	font-size: 24px;
+	font-size: 32px;
 }
 
 .editor-block-list__block .wp-block-quote.is-large p,
@@ -350,26 +345,31 @@
 }
 
 .wp-block-file .wp-block-file__button {
-	background: #fff;
-	border: 2px solid #000;
-	border-radius: 0;
-	color: #f35029;
-	font-family: "Rubik", "Helvetica Neue", sans-serif;
-	font-weight: 500;
-	line-height: 1;
-	padding: 15px 20px;
-	-webkit-appearance: none;
+	background: transparent;
+	border: 2px solid rgba(119, 119, 119, 0.5);
+	border-radius: 255px 15px 225px 15px/15px 225px 15px;
+	color: rgba(119, 119, 119, 0.8);
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 14px;
+	letter-spacing: 0.05em;
+	outline: none;
+	padding: 10px 20px;
+	text-shadow: none;
+	text-transform: uppercase;
+	-webkit-transition: color 0.2s, border-color 0.2s;
+	-moz-transition: color 0.2s, border-color 0.2s;
+	transition: color 0.2s, border-color 0.2s;
 }
 
 .wp-block-file .wp-block-file__button:hover,
 .wp-block-file .wp-block-file__button:focus,
 .wp-block-file .wp-block-file__button:active {
-	background: #000;
-	color: #fff;
+	border-color: rgba(119, 119, 119, 0.8);
+	color: #777;
 }
 
 .rtl .wp-block-file .wp-block-file__button {
-	margin-left: .75em;
+	margin-left: 10px;
 	margin-right: 0;
 }