Sfoglia il codice sorgente

More editor styles, excepting blockquotes, pullquotes, and list margins/padding.

Caroline Moore 6 anni fa
parent
commit
c2dac1d3a4
2 ha cambiato i file con 113 aggiunte e 171 eliminazioni
  1. 4 1
      intergalactic-2/blocks.css
  2. 109 170
      intergalactic-2/editor-blocks.css

+ 4 - 1
intergalactic-2/blocks.css

@@ -167,6 +167,7 @@ figure.alignfull,
 /* File */
 
 .wp-block-file .wp-block-file__button {
+	border-radius: 0;
 	font-size: 18px;
 	font-weight: bold;
 	line-height: 1;
@@ -210,7 +211,6 @@ figure.alignfull,
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
-	letter-spacing: 0px;
 	line-height: inherit;
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -224,10 +224,13 @@ figure.alignfull,
 	font-family: 'Courier 10 Pitch', Courier, monospace;
 	font-size: 15px;
 	line-height: 1.6;
+
 	overflow: auto;
+
 	max-width: 100%;
 	margin-bottom: 1.6em;
 	padding: 1.6em;
+
 	background: #eee;
 }
 

+ 109 - 170
intergalactic-2/editor-blocks.css

@@ -150,14 +150,7 @@
 /* Images */
 
 .wp-block-image figcaption {
-	margin: 10px 0 0;
-	text-align: center;
-	color: #7f8d8c;
-	font-family: "PT Serif", serif;
-	font-size: 0.73em;
-	line-height: 1.3;
-	font-style: italic;
-	text-align: center;
+	font-size: 14px;
 }
 
 /*--------------------------------------------------------------
@@ -167,13 +160,7 @@
 /* Main column width */
 
 .wp-block {
-	max-width: 870px; /* 81.5em + 30px to account for padding */
-}
-
-@media screen and (max-width: 959px) and (min-width: 768px) {
-	.wp-block {
-		max-width: 678px; /* 648px + 30px to account for padding */
-	}
+	max-width: 690px; /* 660px + 30px to account for padding */
 }
 
 /* Link styles */
@@ -181,7 +168,10 @@
 .edit-post-visual-editor a,
 .editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
-	color: #e06d5e;
+	color: #81699b;
+	-webkit-transition: .3s all ease-in-out;
+	   -moz-transition: .3s all ease-in-out;
+			transition: .3s all ease-in-out;
 }
 
 .edit-post-visual-editor a:hover,
@@ -193,7 +183,7 @@
 .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: #7f8d8c;
+	color: #557d73;
 }
 
 /* List styles */
@@ -204,7 +194,7 @@
 .edit-post-visual-editor ol,
 .editor-block-list__block ol,
 .block-library-list ol {
-	margin: 0 0 .75em;
+	margin: 0 0 1.5em 3em;
 	padding: 0;
 }
 
@@ -235,17 +225,6 @@
 	margin-left: 1.5em;
 }
 
-@media screen and (max-width: 767px) {
-	.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
-	.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
-	.block-library-list li > ul,
-	.edit-post-visual-editor li > ol,
-	.editor-block-list__block li > ol,
-	.block-library-list li > ol {
-		margin-left: .75em;
-	}
-}
-
 .rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
 .rtl .editor-block-list__block ul:not(.wp-block-gallery),
 .rtl .block-library-list ul,
@@ -257,30 +236,10 @@
 	padding: 0;
 }
 
-@media screen and (max-width: 767px) {
-	.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
-	.rtl .editor-block-list__block ul:not(.wp-block-gallery),
-	.rtl .block-library-list ul,
-	.rtl .edit-post-visual-editor ol,
-	.rtl .editor-block-list__block ol,
-	.rtl .block-library-list ol {
-		margin-left: 0;
-		margin-right: .75em;
-		padding: 0;
-	}
-}
-
 /* Captions */
 
 [class^="wp-block-"] figcaption {
-	margin: 10px 0 0;
-	text-align: center;
-	color: #7f8d8c;
-	font-family: "PT Serif", serif;
-	font-size: 0.73em;
-	line-height: 1.3;
-	font-style: italic;
-	text-align: center;
+	font-size: 14px;
 }
 
 /*--------------------------------------------------------------
@@ -403,22 +362,35 @@
 
 /* File */
 
-.wp-block-file__textlink {
-	box-shadow: 0 1px 0 0 currentColor;
-	color: #e06d5e;
-}
-
 .wp-block-file .wp-block-file__button {
-	padding: 10px .75em;
-	background: #464d4d;
-	border: 1px solid #464d4d;
-	color: white;
-	text-transform: uppercase;
-	font-weight: 900;
+	border-radius: 0;
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 1;
+	padding: .75em;
+
 	cursor: pointer;
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
-	-webkit-appearance: button;
-	/* Corrects inability to style clickable 'input' types in iOS */
+	-webkit-transition: .3s all ease-in-out;
+	   -moz-transition: .3s all ease-in-out;
+			transition: .3s all ease-in-out;
+	text-transform: uppercase;
+
+	color: #222;
+	border: 2px solid #222;
+	background: transparent;
+	box-shadow: none;
+	text-shadow: none;
+}
+
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-file .wp-block-file__button:focus {
+	-webkit-transition: .3s all ease-in-out;
+	   -moz-transition: .3s all ease-in-out;
+			transition: .3s all ease-in-out;
+	color: #fff;
+	border-color: #222;
+	background: #222;
+	box-shadow: none;
 }
 
 /*--------------------------------------------------------------
@@ -441,20 +413,23 @@
 /* Code */
 
 .wp-block-code {
-	padding: 0 5px .75em 5px;
-	background: #f1f2f3;
-	font-family: "Source Code Pro", monospace;
-	letter-spacing: -0.05em;
-	position: relative;
+	font-family: 'Courier 10 Pitch', Courier, monospace;
+	font-size: 15px;
+	line-height: 1.6;
+
 	overflow: auto;
-	margin-bottom: .75em;
+
 	max-width: 100%;
+	margin-bottom: 1.6em;
+	padding: 1.6em;
+
+	background: #eee;
 }
 
 /* Classic */
 
 .wp-block-freeform.block-library-rich-text__tinymce address {
-	margin-bottom: .75em;
+	margin-bottom: 1.5em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce ol {
@@ -463,25 +438,8 @@
 	padding-left: 1.5em;
 }
 
-@media screen and (max-width: 767px) {
-	.wp-block-freeform.block-library-rich-text__tinymce ol {
-		padding-left: .75em;
-	}
-}
-
 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	padding-left: 1.5em;
-	margin: 0;
-	font-family: "PT Serif", serif;
-	font-size: 26px;
-	border-left: 2px solid #e06d5e;
-}
 
-@media screen and (max-width: 767px) {
-	.wp-block-freeform.block-library-rich-text__tinymce blockquote {
-		padding-left: .75em;
-		font-size: 21px;
-	}
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
@@ -516,12 +474,6 @@
 	padding-right: 1.5em;
 }
 
-@media screen and (max-width: 767px) {
-	.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-		padding-right: .75em;
-	}
-}
-
 .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
 	float: left;
 }
@@ -610,20 +562,23 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce pre {
-	background: #f1f2f3;
-	font-family: "Source Code Pro", monospace;
-	letter-spacing: -0.05em;
-	position: relative;
+	font-family: 'Courier 10 Pitch', Courier, monospace;
+	font-size: 15px;
+	font-size: 1.5rem;
+	line-height: 1.6;
+
 	overflow: auto;
-	padding: .75em;
-	margin-bottom: .75em;
+
 	max-width: 100%;
+	margin-bottom: 1.6em;
+	padding: 1.6em;
+
+	background: #eee;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table {
-	border-bottom: 1px solid #eee;
-	margin: 0 0 1.5em 0;
 	width: 100%;
+	margin: 0 0 1.5em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce .alternate {
@@ -631,15 +586,17 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table td {
-	border: 0;
-	border-top: 1px solid #eee;
-	padding: 0.4em;
+	padding: 3px 5px;
+
+	border-bottom: 1px solid #aaa;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table th {
 	font-weight: bold;
-	padding: 0.4em;
-	text-transform: uppercase;
+
+	padding: 10px 5px 5px;
+
+	border-bottom: 4px solid #222;
 }
 
 .rtl .wp-block-freeform.block-library-rich-text__tinymce th,
@@ -649,14 +606,17 @@
 /* Preformatted */
 
 .editor-block-list__block .wp-block-preformatted pre {
-	background: #f1f2f3;
-	font-family: "Source Code Pro", monospace;
-	letter-spacing: -0.05em;
-	position: relative;
+	font-family: 'Courier 10 Pitch', Courier, monospace;
+	font-size: 15px;
+	line-height: 1.6;
+
 	overflow: auto;
-	padding: .75em;
-	margin-bottom: .75em;
+
 	max-width: 100%;
+	margin-bottom: 1.6em;
+	padding: 1.6em;
+
+	background: #eee;
 }
 
 /* Pullquote */
@@ -687,37 +647,14 @@
 	font-size: 26px;
 }
 
-@media screen and (max-width: 767px) {
-	.wp-block-pullquote {
-		padding-left: .75em;
-		font-size: 21px;
-	}
-
-	.wp-block-pullquote blockquote {
-		font-size: 21px;
-	}
-}
-
 .wp-block-pullquote.alignleft {
 	margin-right: 1.5em;
 }
 
-@media screen and (min-width: 1260px) {
-	.wp-block-pullquote.alignleft {
-		margin-left: -130px;
-	}
-}
-
 .wp-block-pullquote.alignright {
 	margin-left: 1.5em;
 }
 
-@media screen and (min-width: 1260px) {
-	.wp-block-pullquote.alignright {
-		margin-right: -130px;
-	}
-}
-
 .wp-block-pullquote blockquote > .editor-rich-text p {
 	color: inherit;
 	margin: 0;
@@ -745,30 +682,22 @@
 }
 
 .editor-block-list__block table.wp-block-table {
-	display: table;
-	margin: 0 0 .75em;
 	width: 100%;
-	border-top: 1px solid #f1f2f3;
+	margin: 0 0 1.5em;
 }
 
 .editor-block-list__block table.wp-block-table td {
 	border: 0;
-	padding: 10px .75em;
-	border-bottom: 1px solid #f1f2f3;
+	padding: 3px 5px;
+	border-bottom: 1px solid #aaa;
 }
 
 .editor-block-list__block table.wp-block-table th {
-	background: #f1f2f3;
 	font-weight: bold;
-	padding: 10px .75em;
-	border-bottom: 1px solid #f1f2f3;
-}
 
-@media screen and (max-width: 767px) {
-	.editor-block-list__block table.wp-block-table th,
-	.editor-block-list__block table.wp-block-table td {
-		padding: 5px 10px;
-	}
+	padding: 10px 5px 5px;
+
+	border-bottom: 4px solid #222;
 }
 
 /*--------------------------------------------------------------
@@ -777,15 +706,19 @@
 
 /* Buttons */
 .wp-block-button .wp-block-button__link {
-	padding: 10px .75em;
-	border: 1px solid;
-	box-shadow: none;
 	border-radius: 0;
-	display: inline-block;
-	text-transform: uppercase;
-	font-weight: 900;
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 1;
+	padding: .75em;
 	cursor: pointer;
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
+	-webkit-transition: .3s all ease-in-out;
+	   -moz-transition: .3s all ease-in-out;
+			transition: .3s all ease-in-out;
+	text-transform: uppercase;
+	border: 2px solid currentColor;
+	box-shadow: none;
+	text-shadow: none;
 }
 
 .wp-block-button .wp-block-button__link:active,
@@ -794,44 +727,50 @@
 }
 
 .wp-block-button__link:not(.has-background) {
-	background: #464d4d;
-	border: 1px solid #464d4d;
+	background: transparent;
+	border: 2px solid #222;
 }
 
 .wp-block-button__link:not(.has-background):focus {
-	background: #e06d5e;
+	border-color: #222;
+	background: #222;
+}
+
+.wp-block-button__link:not(.has-text-color) {
+	color: #222;
 }
 
-.wp-block-button__link:not(.has-text-color),
 .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 {
-	color: white;
+	color: #fff;
 }
 
 .wp-block-button__link:not(.has-background):active,
 .wp-block-button__link:not(.has-background):focus,
 .wp-block-button__link:not(.has-background):hover {
-	background: #e06d5e;
-	border-color: #e06d5e;
+	background: #222;
+	border: 2px solid #222;
 }
 
 /* Separator */
 
 .wp-block-separator {
-	margin-bottom: .75em;
 	height: 1px;
-	background: #f1f2f3;
+	margin-bottom: 1.5em;
 	border: 0;
-	max-width: 66%;
+	background-color: #ccc;
+	max-width: 100%;
 }
 
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-	max-width: 66%;
+	max-width: 100%;
 }
 
 .wp-block-separator.is-style-wide {
-	max-width: 100%;
+	max-width: 120%;
+	margin-left: -10%;
+	margin-right: -10%;
 }
 
 /*--------------------------------------------------------------
@@ -857,7 +796,7 @@
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #e6e6e6;
+	border-top: 1px solid #ccc;
 	margin-bottom: 0;
 	padding: .75em 0;
 }