mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-19 02:53:03 +02:00
6bec9ed8f6
Twenty Sixteen includes functionality and styles that make full-size images extend wider than the content when they are added to posts, and appear below the post meta. This update adds the same behavior to image blocks and their captions. Merges [43911] to trunk. Props laurelfulford. Fixes: #45380. Built from https://develop.svn.wordpress.org/trunk@44263 git-svn-id: http://core.svn.wordpress.org/trunk@44093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
613 lines
13 KiB
CSS
613 lines
13 KiB
CSS
/*
|
|
Theme Name: Twenty Sixteen
|
|
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,
|
|
.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
|
|
font-family: Merriweather, Georgia, serif;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.edit-post-visual-editor .editor-block-list__block {
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.editor-post-title__block .editor-post-title__input {
|
|
font-family: Montserrat, "Helvetica Neue", sans-serif;
|
|
font-size: 28px;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-post-visual-editor h1 {
|
|
font-size: 28px;
|
|
font-size: 1.75rem;
|
|
line-height: 1.25;
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-post-visual-editor h2 {
|
|
font-size: 23px;
|
|
font-size: 1.4375rem;
|
|
line-height: 1.2173913043;
|
|
margin-top: 2.4347826087em;
|
|
margin-bottom: 1.2173913043em;
|
|
}
|
|
|
|
.edit-post-visual-editor h3 {
|
|
font-size: 19px;
|
|
font-size: 1.1875rem;
|
|
line-height: 1.1052631579;
|
|
margin-top: 2.9473684211em;
|
|
margin-bottom: 1.4736842105em;
|
|
}
|
|
|
|
.edit-post-visual-editor h4,
|
|
.edit-post-visual-editor h5,
|
|
.edit-post-visual-editor h6 {
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
line-height: 1.3125;
|
|
margin-top: 3.5em;
|
|
margin-bottom: 1.75em;
|
|
}
|
|
|
|
.edit-post-visual-editor h4 {
|
|
letter-spacing: 0.140625em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.edit-post-visual-editor h6 {
|
|
font-style: italic;
|
|
}
|
|
|
|
.edit-post-visual-editor h1,
|
|
.edit-post-visual-editor h2,
|
|
.edit-post-visual-editor h3,
|
|
.edit-post-visual-editor h4,
|
|
.edit-post-visual-editor h5,
|
|
.edit-post-visual-editor h6 {
|
|
font-weight: 900;
|
|
}
|
|
|
|
@media screen and (min-width: 61.5625em) {
|
|
.edit-post-visual-editor h1 {
|
|
font-size: 33px;
|
|
font-size: 2.0625rem;
|
|
line-height: 1.2727272727;
|
|
margin-top: 1.696969697em;
|
|
margin-bottom: 0.8484848485em;
|
|
}
|
|
|
|
.edit-post-visual-editor h2 {
|
|
font-size: 28px;
|
|
font-size: 1.75rem;
|
|
line-height: 1.25;
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-post-visual-editor h3 {
|
|
font-size: 23px;
|
|
font-size: 1.4375rem;
|
|
line-height: 1.2173913043;
|
|
margin-top: 2.4347826087em;
|
|
margin-bottom: 1.2173913043em;
|
|
}
|
|
|
|
.edit-post-visual-editor h4 {
|
|
letter-spacing: 0.131578947em;
|
|
}
|
|
|
|
.edit-post-visual-editor h4,
|
|
.edit-post-visual-editor h5,
|
|
.edit-post-visual-editor h6 {
|
|
font-size: 19px;
|
|
font-size: 1.1875rem;
|
|
line-height: 1.1052631579;
|
|
margin-top: 2.9473684211em;
|
|
margin-bottom: 1.473684211em;
|
|
}
|
|
}
|
|
|
|
.edit-post-visual-editor h1:first-child,
|
|
.edit-post-visual-editor h2:first-child,
|
|
.edit-post-visual-editor h3:first-child,
|
|
.edit-post-visual-editor h4:first-child,
|
|
.edit-post-visual-editor h5:first-child,
|
|
.edit-post-visual-editor h6:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.edit-post-visual-editor p {
|
|
margin: 0 0 1.75em;
|
|
}
|
|
|
|
.edit-post-visual-editor blockquote p {
|
|
margin-bottom: 1.4736842105em;
|
|
}
|
|
|
|
@media screen and (min-width: 44.375em) {
|
|
.editor-post-title__block .editor-post-title__input {
|
|
font-size: 33px;
|
|
font-size: 2.0625rem;
|
|
line-height: 1.2727272727;
|
|
margin-bottom: 0.8484848485em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 61.5625em) {
|
|
.editor-post-title__block .editor-post-title__input {
|
|
font-size: 40px;
|
|
font-size: 2.5rem;
|
|
line-height: 1.225;
|
|
margin-bottom: 1.05em;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
2.0 General Block Styles
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Main column width */
|
|
|
|
.editor-styles-wrapper {
|
|
max-width: 100% !important; /* Override where editor-style.css is affecting this */
|
|
}
|
|
|
|
.wp-block {
|
|
max-width: 630px; /* 600px + 30px to account for padding. */
|
|
}
|
|
|
|
/* Link styles */
|
|
|
|
.edit-post-visual-editor a,
|
|
.editor-block-list__block a,
|
|
.wp-block-freeform.block-library-rich-text__tinymce a {
|
|
color: #007acc;
|
|
}
|
|
|
|
/* List styles */
|
|
|
|
.edit-post-visual-editor ul:not(.wp-block-gallery),
|
|
.editor-block-list__block ul:not(.wp-block-gallery),
|
|
.block-library-list ul,
|
|
.edit-post-visual-editor ol,
|
|
.editor-block-list__block ol,
|
|
.block-library-list ol {
|
|
margin: 0 0 1.75em 1.25em;
|
|
padding: 0;
|
|
}
|
|
|
|
.edit-post-visual-editor ul:not(.wp-block-gallery),
|
|
.editor-block-list__block ul:not(.wp-block-gallery),
|
|
.block-library-list ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.edit-post-visual-editor ol,
|
|
.editor-block-list__block ol,
|
|
.block-library-list ol {
|
|
list-style: decimal;
|
|
margin-left: 1.5em;
|
|
}
|
|
|
|
.edit-post-visual-editor ul:not(.wp-block-gallery) li,
|
|
.editor-block-list__block ul:not(.wp-block-gallery) li,
|
|
.edit-post-visual-editor ol li,
|
|
.editor-block-list__block ol li,
|
|
.block-library-list li {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.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-bottom: 0;
|
|
}
|
|
|
|
.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: 1.25em;
|
|
padding: 0;
|
|
}
|
|
|
|
.rtl .edit-post-visual-editor ol,
|
|
.rtl .editor-block-list__block ol,
|
|
.rtl .block-library-list ol {
|
|
margin-left: 1.5em;
|
|
margin-right: 1.5em;
|
|
}
|
|
|
|
/* Quotes */
|
|
|
|
.rtl .editor-block-list__block blockquote {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Captions */
|
|
|
|
[class^="wp-block-"] figcaption {
|
|
color: #686868;
|
|
font-style: italic;
|
|
line-height: 1.6153846154;
|
|
padding-top: 0.5384615385em;
|
|
text-align: left;
|
|
}
|
|
|
|
.rtl [class^="wp-block-"] figcaption {
|
|
text-align: right;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
3.0 Blocks - Common Blocks
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Paragraph */
|
|
|
|
.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
|
|
font-size: 5em;
|
|
line-height: 0.68;
|
|
margin: 0.05em 0.1em 0 0;
|
|
text-transform: uppercase;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rtl .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
|
|
margin: 0.05em 0 0 0.1em;
|
|
}
|
|
|
|
/* Quote */
|
|
|
|
.wp-block-quote {
|
|
border: 0 solid #1a1a1a;
|
|
border-left-width: 4px;
|
|
color: #686868;
|
|
font-style: italic;
|
|
line-height: 1.4736842105;
|
|
margin: 0 0 1.4736842105em;
|
|
overflow: hidden;
|
|
padding: 0 0 0 1.263157895em;
|
|
}
|
|
|
|
.wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
|
|
.wp-block-quote:not(.is-large):not(.is-style-large).alignright {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.editor-block-list__block .wp-block-quote p {
|
|
font-size: 19px;
|
|
font-size: 1.1875rem;
|
|
margin-bottom: 1.4736842105em;
|
|
}
|
|
|
|
.wp-block-quote__citation {
|
|
color: #1a1a1a;
|
|
display: block;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.wp-block-quote__citation:before {
|
|
content: "\2014\00a0";
|
|
}
|
|
|
|
.wp-block-quote em,
|
|
.wp-block-quote i,
|
|
.wp-block-quote__citation:before {
|
|
font-style: normal;
|
|
}
|
|
|
|
.wp-block-quote strong,
|
|
.wp-block-quote b {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wp-block-quote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.wp-block-quote.alignleft {
|
|
margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
|
|
}
|
|
|
|
.wp-block-quote.alignright {
|
|
margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
|
|
}
|
|
|
|
.wp-block-quote.aligncenter {
|
|
margin-bottom: 1.473684211em;
|
|
}
|
|
|
|
.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
|
|
.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
|
|
border-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 44.375em) {
|
|
.wp-block-quote.alignleft,
|
|
.wp-block-quote.alignright {
|
|
border-width: 4px 0 0 0;
|
|
padding: 0.9473684211em 0 0;
|
|
width: -webkit-calc(50% - 0.736842105em);
|
|
width: calc(50% - 0.736842105em);
|
|
}
|
|
|
|
.wp-block-quote:not(.alignleft):not(.alignright) {
|
|
margin-left: -1.473684211em;
|
|
}
|
|
|
|
.rtl .wp-block-quote:not(.alignleft):not(.alignright) {
|
|
margin-left: 0;
|
|
margin-right: -1.473684211em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 80em) {
|
|
.editor-block-list__block .wp-block-quote.alignleft {
|
|
margin-left: -40%;
|
|
width: -webkit-calc(60% - 1.4736842105em);
|
|
width: calc(60% - 1.4736842105em);
|
|
}
|
|
}
|
|
|
|
/* File */
|
|
|
|
.wp-block-file__textlink {
|
|
box-shadow: 0 1px 0 0 currentColor;
|
|
color: #007acc;
|
|
}
|
|
|
|
.wp-block-file .wp-block-file__button {
|
|
background: #1a1a1a;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
font-family: Montserrat, "Helvetica Neue", sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.046875em;
|
|
line-height: 1;
|
|
padding: 0.84375em 0.875em 0.78125em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
4.0 Blocks - Formatting
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Code */
|
|
|
|
.wp-block-code {
|
|
border: 0;
|
|
padding: 0.125em 0.25em;
|
|
}
|
|
|
|
/* Classic */
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
|
|
border: 0 solid #1a1a1a;
|
|
border-left-width: 4px;
|
|
color: #686868;
|
|
font-style: italic;
|
|
line-height: 1.4736842105;
|
|
margin: 0 0 1.4736842105em;
|
|
overflow: hidden;
|
|
padding: 0 0 0 1.263157895em;
|
|
}
|
|
|
|
.editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote:not(.alignleft):not(.alignright) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
|
|
font-size: 19px;
|
|
font-size: 1.1875rem;
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
|
|
color: #1a1a1a;
|
|
display: block;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote cite:before {
|
|
content: "\2014\00a0";
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
|
|
margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
|
|
margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
|
|
}
|
|
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote.aligncenter {
|
|
margin-bottom: 1.473684211em;
|
|
}
|
|
|
|
@media screen and (min-width: 44.375em) {
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft,
|
|
.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
|
|
border-width: 4px 0 0 0;
|
|
padding: 0.9473684211em 0 0;
|
|
width: -webkit-calc(50% - 0.736842105em);
|
|
width: calc(50% - 0.736842105em);
|
|
}
|
|
}
|
|
|
|
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
|
|
border-left-width: 0;
|
|
border-right-width: 4px;
|
|
overflow: hidden;
|
|
padding-left: 0;
|
|
padding-right: 1.263157895em;
|
|
}
|
|
|
|
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
|
|
float: left;
|
|
}
|
|
|
|
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
|
|
float: right;
|
|
}
|
|
|
|
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
|
|
margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
|
|
}
|
|
|
|
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
|
|
margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
|
|
}
|
|
|
|
/* Pullquote */
|
|
|
|
.editor-block-list__block .wp-block-pullquote blockquote {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wp-block-pullquote blockquote > .editor-rich-text p {
|
|
color: #686868;
|
|
font-size: 19px;
|
|
font-size: 1.1875rem;
|
|
}
|
|
|
|
.wp-block-pullquote .wp-block-pullquote__citation {
|
|
color: #1a1a1a;
|
|
display: block;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
line-height: 1.75;
|
|
text-transform: none;
|
|
}
|
|
|
|
.wp-block-pullquote .wp-block-pullquote__citation:before {
|
|
content: "\2014\00a0";
|
|
}
|
|
|
|
/* Table */
|
|
|
|
.editor-block-list__block table.wp-block-table th,
|
|
.editor-block-list__block table.wp-block-table td {
|
|
padding: 0;
|
|
}
|
|
|
|
.rtl .wp-block-table th,
|
|
.rtl .wp-block-table td {
|
|
text-align: right;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
5.0 Blocks - Layout Elements
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Buttons */
|
|
|
|
.wp-block-button .wp-block-button__link {
|
|
background: #1a1a1a;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
font-family: Montserrat, "Helvetica Neue", sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.046875em;
|
|
line-height: 1;
|
|
padding: 0.84375em 0.875em 0.78125em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Latest Comments */
|
|
|
|
.editor-block-list__block .wp-block-latest-comments__comment-meta a {
|
|
box-shadow: none;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-date {
|
|
color: #686868;
|
|
font-family: Montserrat, "Helvetica Neue", sans-serif;
|
|
font-size: 13px;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6153846154;
|
|
}
|
|
|
|
.wp-block-latest-comments .wp-block-latest-comments__comment {
|
|
border-top: 1px solid #d1d1d1;
|
|
margin-bottom: 0;
|
|
padding: 1.75em 0;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-excerpt p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Latest Posts */
|
|
|
|
.edit-post-visual-editor .wp-block-latest-posts.is-grid {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
|
|
margin-bottom: 16px;
|
|
}
|