WordPress/wp-content/themes/twentyfourteen/css/blocks.css
ryelle 0a2b52dfeb Bundled Themes: Improve display of blocks in widget areas.
Fixes minor styling issues, mostly font size and spacing, in blocks used in widget areas. Changes made to Twenty Ten, Twenty Thirteen, Twenty Fourteen, Twenty Sixteen, Twenty Seventeen, and Twenty Twenty-One.

Props noisysocks, sumaiyasiddika, danieldudzic, scruffian, jffng.
Fixes #53422.


Built from https://develop.svn.wordpress.org/trunk@51205


git-svn-id: http://core.svn.wordpress.org/trunk@50814 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-06-22 20:14:59 +00:00

414 lines
7.5 KiB
CSS

/*
Theme Name: Twenty Fourteen
Description: Used to style 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;
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;
}
.wp-block-code code {
font-size: inherit;
}
/* 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 {
font-size: 12px;
font-weight: 700;
line-height: 15px;
padding: 10px 30px 11px;
text-decoration: none;
text-transform: uppercase;
vertical-align: bottom;
}
.wp-block-button__link {
background-color: #24890d;
color: #fff;
}
.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #24890d;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.is-style-outline .wp-block-button__link:not(.has-text-color):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;
}
.widget-area .wp-block-latest-comments__comment-meta a {
color: #fff;
}
.widget-area .wp-block-latest-comments__comment-meta a:hover,
.widget-area .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;
}