WordPress/wp-content/themes/twentytwelve/css/editor-blocks.css
desrosj 680bbf62d9 Twenty Twelve: Fix button block custom colors.
Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

Also make sure the button’s gradient is not applied when a custom background color is added, since it will hide it.

Props laurelfulford.

Merges [44194] to trunk.

Fixes #45432.
Built from https://develop.svn.wordpress.org/trunk@44303


git-svn-id: http://core.svn.wordpress.org/trunk@44133 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-12-19 03:22:31 +00:00

455 lines
9.6 KiB
CSS

/*
Theme Name: Twenty Twelve
Description: Used to style Gutenberg Blocks in the editor.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 General Typography
2.0 General Block Styles
3.0 Blocks - Common Blocks
4.0 Blocks - Formatting
5.0 Blocks - Layout Elements
6.0 Blocks - Widgets
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 General Typography
--------------------------------------------------------------*/
.edit-post-visual-editor .editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block p,
.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
font-size: 14px;
}
.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.edit-post-visual-editor .editor-block-list__block {
color: #444;
}
.editor-post-title__block .editor-post-title__input {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
}
@media screen and (min-width: 600px) {
.editor-post-title__block .editor-post-title__input {
font-size: 22px;
}
}
.wp-block-freeform.block-library-rich-text__tinymce h1 {
font-size: 21px;
}
.wp-block-freeform.block-library-rich-text__tinymce h2 {
font-size: 18px;
}
.wp-block-freeform.block-library-rich-text__tinymce h3 {
font-size: 16px;
}
.wp-block-freeform.block-library-rich-text__tinymce h4 {
font-size: 14px;
}
.wp-block-freeform.block-library-rich-text__tinymce h5 {
font-size: 13px;
}
.wp-block-freeform.block-library-rich-text__tinymce h6 {
font-size: 12px;
}
/*--------------------------------------------------------------
2.0 General Block Styles
--------------------------------------------------------------*/
/* Main column width */
.wp-block {
max-width: 655px; /* 625px + 30px for padding */
}
/* Link styles */
.edit-post-visual-editor a,
.editor-block-list__block a,
.wp-block-freeform.block-library-rich-text__tinymce a {
color: #21759b;
}
/* List styles */
.wp-block-freeform.block-library-rich-text__tinymce ol,
.wp-block-freeform.block-library-rich-text__tinymce ul:not(.wp-block-gallery),
.block-library-list ol.editor-rich-text__tinymce,
.block-library-list ul.editor-rich-text__tinymce:not(.wp-block-gallery) {
padding-left: 0;
padding-right: 0;
}
/* Quote styles */
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
border: 0;
font-style: italic;
padding: 24px;
}
/* Table styles */
.wp-block-freeform.block-library-rich-text__tinymce th {
font-size: 11px;
}
.wp-block-freeform.block-library-rich-text__tinymce td {
font-size: 12px;
}
.wp-block-freeform.block-library-rich-text__tinymce th,
.wp-block-freeform.block-library-rich-text__tinymce td {
padding-left: 0;
padding-right: 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce th,
.rtl .wp-block-freeform.block-library-rich-text__tinymce td {
text-align: right;
}
/* Code styles */
.wp-block-freeform.block-library-rich-text__tinymce code {
background-color: transparent;
font-size: 12px;
}
/* Pre styles */
.wp-block-freeform.block-library-rich-text__tinymce pre {
font-size: 12px;
}
/* Captions */
[class^="wp-block-"] figcaption,
[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
color: #757575;
font-size: 12px;
line-height: 2;
font-style: italic;
text-align: left;
}
.rtl [class^="wp-block-"] figcaption,
.rtl [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
text-align: right;
}
/* Definition Lists */
.wp-block-freeform.block-library-rich-text__tinymce dt {
margin-bottom: 0;
}
/*--------------------------------------------------------------
3.0 Blocks - Common Blocks
--------------------------------------------------------------*/
/* Paragraph */
p.has-drop-cap:not(:focus)::first-letter {
font-size: 5em;
margin-top: 0.1em;
}
/* Image */
.wp-block-image {
margin-left: 0;
margin-right: 0;
}
/* Gallery */
.wp-block-gallery {
margin-bottom: 24px;
}
.wp-block-gallery figcaption,
.wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
color: #fff;
text-align: center;
}
/* Quote */
.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
padding: 24px;
}
.wp-block-quote p {
font-style: italic;
}
.wp-block-quote:not(.is-large):not(.is-style-large) {
border: 0;
}
.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
font-size: 20px;
}
.wp-block-quote .wp-block-quote__citation {
color: inherit;
font-style: italic;
}
.wp-block-quote.is-large .wp-block-quote__citation,
.wp-block-quote.is-style-large .wp-block-quote__citation {
font-size: 18px;
}
/* Cover */
.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover p {
font-size: 28px;
}
/* File */
.wp-block-file .wp-block-file__textlink {
color: #21759b;
text-decoration: underline;
}
.wp-block-file .wp-block-file__button,
.wp-block-button .wp-block-file__button:hover {
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
color: #7c7c7c;
font-family: inherit;
font-size: 11px;
font-weight: normal;
line-height: 1.428571429;
padding: 6px 10px;
}
/*--------------------------------------------------------------
4.0 Blocks - Formatting
--------------------------------------------------------------*/
/* Verse */
.editor-block-list__block .wp-block-verse pre {
font-size: 12px;
}
/* Code */
.wp-block-code {
border: 0;
font-size: 12px;
line-height: 2;
padding: 0;
}
.wp-block-html .CodeMirror-sizer {
line-height: 1.7;
}
/* Preformatted */
.editor-block-list__block .wp-block-preformatted pre {
font-size: 12px;
}
/* Pullquote */
.wp-block-pullquote {
font-style: italic;
}
.edit-post-visual-editor .wp-block-pullquote {
margin: 0;
}
.wp-block-pullquote .wp-block-pullquote__citation,
.wp-block-pullquote cite {
font-size: 14px;
text-transform: none;
}
/* Table */
.wp-block-table {
border-bottom: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}
.editor-block-list__block .wp-block-table th {
border: 0;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.editor-block-list__block .wp-block-table td {
border: 0;
border-top: 1px solid #ededed;
font-size: 12px;
padding: 0;
}
.wp-block-table__cell-content {
padding: 6px 10px 6px 0;
}
/*--------------------------------------------------------------
5.0 Blocks - Layout Elements
--------------------------------------------------------------*/
/* Buttons */
.wp-block-button__link {
background-color: #e6e6e6;
color: #7c7c7c;
}
.wp-block-button .wp-block-button__link {
border: 1px solid #d2d2d2;
border-radius: 3px;
font-family: inherit;
font-size: 11px;
font-weight: normal;
line-height: 1.428571429;
padding: 6px 10px;
}
.wp-block-button .editor-rich-text__tinymce.mce-content-body {
line-height: 1.428571429;
}
.wp-block-button__link:not(.has-text-color) {
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.wp-block-button .wp-block-button__link:not(.has-background) {
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
background-repeat: repeat-x;
}
/* Separator */
.editor-block-list__block hr.wp-block-separator {
margin-left: auto;
margin-right: auto;
}
/* Media & Text */
.wp-block-media-text *:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
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;
}
/* Archives */
.gutenberg ul.wp-block-archives {
padding-left: 0;
}
/* Categories */
.gutenberg .wp-block-categories ul {
padding-left: 0;
}
/* Latest Comments */
.editor-block-list__block .wp-block-latest-comments {
margin: 0;
padding: 0;
}
.wp-block-latest-comments .avatar,
.wp-block-latest-comments__comment-avatar {
border-radius: 0;
box-shadow: none;
}
.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
margin-left: 60px;
}
.wp-block-latest-comments__comment,
.wp-block-latest-comments__comment-excerpt,
.wp-block-latest-comments__comment-excerpt p {
font-size: 14px;
}
.wp-block-latest-comments__comment-excerpt p:last-child {
margin-bottom: 0;
}
.wp-block-latest-comments__comment-date {
color: #5e5e5e;
}
.wp-block-latest-comments .wp-block-latest-comments__comment {
margin: 0;
padding: 24px 0;
}
.wp-block-latest-comments article {
border-bottom: 4px double #ededed;
padding-bottom: 2em;
}
/* Latest Posts */
.gutenberg .wp-block-latest-posts {
padding-left: 0;
padding-right: 0;
}