WordPress/wp-content/themes/twentyfourteen/css/blocks.css
desrosj 608eb55335 Bundled Themes: Fix button block custom colors on front end.
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.

This fix is applied to Twenty Sixteen, Twenty Fifteen and Twenty Fourteen. 

Props laurelfulford.

Merges [44197-44198] and [44200] into trunk.

Fixes #45428, #45429.
Built from https://develop.svn.wordpress.org/trunk@44306


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

397 lines
7.1 KiB
CSS

/*
Theme Name: Twenty Fourteen
Description: Used to style Gutenberg Blocks.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 General Block Styles
2.0 Blocks - Common Blocks
3.0 Blocks - Formatting
4.0 Blocks - Layout Elements
5.0 Blocks - Widgets
6.0 Blocks - Colors
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 General Block Styles
--------------------------------------------------------------*/
[class^="wp-block-"] figcaption,
[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
font-size: 12px;
font-style: italic;
line-height: 1.5;
margin: 9px 0 0;
}
/* Alignments */
[class^="wp-block-"].alignleft,
[class^="wp-block-"] .alignleft {
margin-right: 24px;
}
[class^="wp-block-"].alignright,
[class^="wp-block-"] .alignright {
margin-left: 24px;
}
/*--------------------------------------------------------------
2.0 Blocks - Common Blocks
--------------------------------------------------------------*/
/* Paragraph */
p.has-drop-cap:not(:focus)::first-letter {
font-size: 5em;
}
/* Image */
.wp-block-image {
margin-bottom: 24px;
}
.wp-block-image figcaption {
text-align: left;
}
@media screen and (min-width: 810px) {
.full-width .site-content .wp-block-image figure.alignleft {
margin-left: -168px;
}
.full-width .site-content .wp-block-image figure.alignright {
margin-right: -168px;
}
}
.rtl .wp-block-image figcaption {
text-align: right;
}
/* Gallery */
.wp-block-gallery {
margin: 0 0 24px;
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
left: 0;
right: 0;
width: auto;
}
/* Quote */
.wp-block-quote:not(.is-large):not(.is-style-large) {
border-left: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
}
.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
padding: 0;
}
.wp-block-quote cite {
color: #2b2b2b;
font-size: 16px;
font-weight: 400;
}
.wp-block-quote.alignleft cite,
.wp-block-quote.alignright cite {
display: inline-block;
margin-bottom: 17px;
margin-top: 0;
}
.rtl .wp-block-quote.alignleft {
margin-right: 24px;
}
.rtl .wp-block-quote.alignright {
margin-left: 24px;
}
/* Audio */
.wp-block-audio audio {
display: block;
width: 100%;
}
/* Cover */
.wp-block-cover-image.aligncenter,
.wp-block-cover.aligncenter {
display: flex;
}
/* File */
.wp-block-file .wp-block-file__button {
background-color: #24890d;
border: 0;
border-radius: 2px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 15px;
padding: 10px 30px 11px;
text-transform: uppercase;
vertical-align: bottom;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus {
background-color: #41a62a;
}
.wp-block-file .wp-block-file__button:active {
background-color: #55d737;
}
/*--------------------------------------------------------------
3.0 Blocks - Formatting
--------------------------------------------------------------*/
/* Code */
.wp-block-code {
border: 0;
padding: 0;
}
/* Pullquote */
.wp-block-pullquote {
border: 0;
margin: 0;
}
.wp-block-pullquote cite {
color: #2b2b2b;
font-size: 16px;
font-weight: 400;
margin-top: 0;
text-transform: none;
}
.wp-block-pullquote.alignleft {
margin-right: 1em;
}
.wp-block-pullquote.alignright {
margin-right: 1em;
}
@media screen and (min-width: 810px) {
.full-width .site-content .wp-block-pullquote.alignleft {
margin-left: -168px;
}
.full-width .site-content .wp-block-pullquote.alignright {
margin-right: -168px;
}
}
/* Table */
.wp-block-table {
overflow-x: visible;
}
.wp-block-table th,
.wp-block-table td {
border-color: rgba(0, 0, 0, 0.1);
border-width: 0 1px 1px 0;
}
/*--------------------------------------------------------------
4.0 Blocks - Layout Elements
--------------------------------------------------------------*/
/* Buttons */
.wp-block-button .wp-block-button__link {
border: 0;
border-radius: 2px;
font-size: 12px;
font-weight: 700;
line-height: 15px;
padding: 10px 30px 11px;
text-transform: uppercase;
vertical-align: bottom;
}
.wp-block-button__link {
background-color: #24890d;
color: #fff;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
background-color: #41a62a;
color: #fff;
}
.wp-block-button__link:active {
background-color: #55d737;
}
/* Separator */
.wp-block-separator {
border: 0;
max-width: 100px;
}
.wp-block-separator.is-style-wide {
max-width: 100%;
}
/* Media & Text */
.wp-block-media-text {
margin-bottom: 24px;
}
.wp-block-media-text *:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
5.0 Blocks - Widgets
--------------------------------------------------------------*/
/* Archives, Categories & Latest Posts */
.wp-block-archives.aligncenter,
.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter {
list-style-position: inside;
margin-left: 20px;
text-align: center;
}
.rtl .wp-block-archives.aligncenter,
.rtl .wp-block-categories.aligncenter,
.rtl .wp-block-latest-posts.aligncenter {
margin-left: 0;
margin-right: 20px;
}
/* Latest Comments */
.wp-block-latest-comments {
margin: 0;
padding: 0;
}
.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 .avatar, .wp-block-latest-comments__comment-avatar {
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 2px;
}
.wp-block-latest-comments__comment,
.wp-block-latest-comments__comment-excerpt,
.wp-block-latest-comments__comment-excerpt p {
font-size: 16px;
}
.wp-block-latest-comments__comment-meta a {
color: #2b2b2b;
font-weight: 900;
text-decoration: none;
}
.wp-block-latest-comments_comment-meta a:hover,
.wp-block-latest-comments_comment-meta a:focus {
color: #41a62a;
}
.wp-block-latest-comments__comment-excerpt p:last-child {
}
.wp-block-latest-comments__comment-date {
text-transform: uppercase;
}
.wp-block-latest-comments .wp-block-latest-comments__comment {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 24px;
padding-top: 24px;
}
/* Latest Posts */
.wp-block-latest-posts.is-grid {
margin-left: 0;
margin-right: 0;
}
/*--------------------------------------------------------------
6.0 Blocks - Colors
--------------------------------------------------------------*/
.has-green-color {
color: #24890d;
}
.has-green-background-color {
background-color: #24890d;
}
.has-black-color {
color: #000;
}
.has-black-background-color {
background-color: #000;
}
.has-dark-gray-color {
color: #2b2b2b;
}
.has-dark-gray-background-color {
background-color: #2b2b2b;
}
.has-medium-gray-color {
color: #767676;
}
.has-medium-gray-background-color {
background-color: #767676;
}
.has-light-gray-color {
color: #f5f5f5;
}
.has-light-gray-background-color {
background-color: #f5f5f5;
}
.has-white-color {
color: #fff;
}
.has-white-background-color {
background-color: #fff;
}