mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-01 00:27:38 +02:00
608eb55335
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
651 lines
11 KiB
CSS
651 lines
11 KiB
CSS
/*
|
|
Theme Name: Twenty Fifteen
|
|
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
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Captions */
|
|
|
|
[class^="wp-block-"] figcaption {
|
|
color: #707070;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin-bottom: 0;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
[class^="wp-block-"] figcaption {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
[class^="wp-block-"] figcaption {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
[class^="wp-block-"] figcaption {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
[class^="wp-block-"] figcaption {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
[class^="wp-block-"] figcaption {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Alignments */
|
|
|
|
[class^="wp-block-"].alignleft,
|
|
[class^="wp-block-"] .alignleft {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
[class^="wp-block-"].alignright,
|
|
[class^="wp-block-"] .alignright {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
|
|
/*--------------------------------------------------------------
|
|
2.0 Blocks - Common Blocks
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Paragraph */
|
|
|
|
p.has-drop-cap:not(:focus)::first-letter {
|
|
font-size: 5em;
|
|
}
|
|
|
|
/* Gallery */
|
|
|
|
.wp-block-gallery {
|
|
margin-bottom: 1.6em;
|
|
}
|
|
|
|
/* Audio */
|
|
|
|
.wp-block-audio audio {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Cover */
|
|
|
|
.wp-block-cover-image .wp-block-cover-image-text,
|
|
.wp-block-cover .wp-block-cover-text,
|
|
.wp-block-cover-image h2,
|
|
.wp-block-cover h2 {
|
|
font-size: 29px;
|
|
line-height: 1.2069;
|
|
}
|
|
|
|
/* Quote */
|
|
|
|
.wp-block-quote,
|
|
.wp-block-quote:not(.is-large):not(.is-style-large),
|
|
[class^="wp-block-"] blockquote {
|
|
border-color: #707070;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
color: #333;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
line-height: 1.6;
|
|
text-transform: none;
|
|
}
|
|
|
|
.wp-block-quote em,
|
|
.wp-block-quote i {
|
|
font-style: normal;
|
|
}
|
|
|
|
.wp-block-quote strong,
|
|
.wp-block-quote b {
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
.edit-post-visual-editor .wp-block-quote p {
|
|
font-size: 20px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
font-size: 17px;
|
|
line-height: 1.6471;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
.edit-post-visual-editor .wp-block-quote p {
|
|
font-size: 22px;
|
|
line-height: 1.8182;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
font-size: 19px;
|
|
line-height: 1.6842;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
.edit-post-visual-editor .wp-block-quote p {
|
|
font-size: 18px;
|
|
line-height: 1.6667;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
.edit-post-visual-editor .wp-block-quote p {
|
|
font-size: 20px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
font-size: 17px;
|
|
line-height: 1.6471;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
.edit-post-visual-editor .wp-block-quote p {
|
|
font-size: 22px;
|
|
line-height: 1.8182;
|
|
}
|
|
|
|
.wp-block-quote cite,
|
|
.wp-block-quote__citation {
|
|
font-size: 19px;
|
|
line-height: 1.6842;
|
|
}
|
|
}
|
|
|
|
/* Cover Image */
|
|
|
|
.wp-block-cover-image.aligncenter,
|
|
.wp-block-cover.aligncenter,
|
|
.wp-block-cover-image.alignleft,
|
|
.wp-block-cover.alignleft,
|
|
.wp-block-cover-image.alignright,
|
|
.wp-block-cover.alignright {
|
|
display: flex;
|
|
}
|
|
|
|
/* File */
|
|
|
|
.wp-block-file a.wp-block-file__button {
|
|
background-color: #333;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
padding: 0.7917em 1.5em;
|
|
text-transform: uppercase;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.wp-block-file a.wp-block-file__button:hover,
|
|
.wp-block-file a.wp-block-file__button:focus {
|
|
background-color: #707070;
|
|
background-color: rgba(51, 51, 51, 0.7);
|
|
outline: 0;
|
|
}
|
|
|
|
.rtl .wp-block-file * + .wp-block-file__button {
|
|
margin-left: 0.75em;
|
|
margin-right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
.wp-block-file a.wp-block-file__button {
|
|
font-size: 14px;
|
|
font-size: 1.4rem;
|
|
padding: 0.8214em 1.6429em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
.wp-block-file a.wp-block-file__button {
|
|
font-size: 16px;
|
|
font-size: 1.6rem;
|
|
padding: 0.8125em 1.625em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
.wp-block-file a.wp-block-file__button {
|
|
font-size: 12px;
|
|
font-size: 1.2rem;
|
|
padding: 0.7917em 1.5833em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
.wp-block-file a.wp-block-file__button {
|
|
font-size: 14px;
|
|
font-size: 1.4rem;
|
|
padding: 0.8214em 1.5714em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
.wp-block-file a.wp-block-file__button {
|
|
font-size: 16px;
|
|
font-size: 1.6rem;
|
|
padding: 0.8125em 1.625em;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
3.0 Blocks - Formatting
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Code */
|
|
|
|
.wp-block-code {
|
|
background-color: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wp-block-code code {
|
|
font-family: Inconsolata, monospace;
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Preformatted */
|
|
|
|
.wp-block-preformatted {
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|
border: 1px solid #eaeaea;
|
|
line-height: 1.2;
|
|
margin-bottom: 1.6em;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
padding: 0.8em;
|
|
white-space: pre;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Pullquote */
|
|
|
|
.wp-block-pullquote {
|
|
border: 0;
|
|
}
|
|
|
|
.wp-block-pullquote blockquote {
|
|
border: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.wp-block-pullquote cite {
|
|
color: #333;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
line-height: 1.6;
|
|
text-transform: none;
|
|
}
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
.wp-block-pullquote cite {
|
|
font-size: 17px;
|
|
line-height: 1.6471;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
.wp-block-pullquote cite {
|
|
font-size: 19px;
|
|
line-height: 1.6842;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
.wp-block-pullquote cite {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
.wp-block-pullquote cite {
|
|
font-size: 17px;
|
|
line-height: 1.6471;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
.wp-block-pullquote cite {
|
|
font-size: 19px;
|
|
line-height: 1.6842;
|
|
}
|
|
}
|
|
|
|
/* Table */
|
|
|
|
.wp-block-table th,
|
|
.wp-block-table td {
|
|
border-color: #eaeaea;
|
|
border-width: 0 1px 1px 0;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
4.0 Blocks - Layout Elements
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Button */
|
|
|
|
.wp-block-button .wp-block-button__link {
|
|
border: 0;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 12px;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
padding: 0.7917em 1.5em;
|
|
text-transform: uppercase;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.wp-block-button__link {
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-block-button__link:hover,
|
|
.wp-block-button__link:focus {
|
|
background-color: #707070;
|
|
background-color: rgba(51, 51, 51, 0.7);
|
|
color: #fff;
|
|
}
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
.wp-block-button .wp-block-button__link {
|
|
font-size: 14px;
|
|
font-size: 1.4rem;
|
|
padding: 0.8214em 1.6429em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
.wp-block-button .wp-block-button__link {
|
|
font-size: 16px;
|
|
font-size: 1.6rem;
|
|
padding: 0.8125em 1.625em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
.wp-block-button .wp-block-button__link {
|
|
font-size: 12px;
|
|
font-size: 1.2rem;
|
|
padding: 0.7917em 1.5833em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
.wp-block-button .wp-block-button__link {
|
|
font-size: 14px;
|
|
font-size: 1.4rem;
|
|
padding: 0.8214em 1.5714em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
.wp-block-button .wp-block-button__link {
|
|
font-size: 16px;
|
|
font-size: 1.6rem;
|
|
padding: 0.8125em 1.625em;
|
|
}
|
|
}
|
|
|
|
/* Seperators */
|
|
|
|
.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: 1.6em;
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Latest Comments */
|
|
|
|
.wp-block-latest-comments {
|
|
margin: 0;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment,
|
|
.wp-block-latest-comments__comment-excerpt,
|
|
.wp-block-latest-comments__comment-excerpt p {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-meta a {
|
|
border-bottom-color: transparent;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-excerpt p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-date {
|
|
color: #707070;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin-bottom: 1.6em;
|
|
}
|
|
|
|
@media screen and (min-width: 46.25em) {
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 55em) {
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 59.6875em) {
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 68.75em) {
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77.5em) {
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.wp-block-latest-comments .wp-block-latest-comments__comment {
|
|
border-top: 1px solid #eaeaea;
|
|
border-top: 1px solid rgba(51, 51, 51, 0.1);
|
|
margin-bottom: 0;
|
|
padding: 1.6em 0;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
6.0 Blocks - Colors
|
|
--------------------------------------------------------------*/
|
|
|
|
.has-dark-gray-color {
|
|
color: #111;
|
|
}
|
|
|
|
.has-dark-gray-background-color {
|
|
background-color: #111;
|
|
}
|
|
|
|
.has-light-gray-color {
|
|
color: #f1f1f1;
|
|
}
|
|
|
|
.has-light-gray-background-color {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.has-white-color {
|
|
color: #fff;
|
|
}
|
|
|
|
.has-white-background-color {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.has-yellow-color {
|
|
color: #f4ca16;
|
|
}
|
|
|
|
.has-yellow-background-color {
|
|
background-color: #f4ca16;
|
|
}
|
|
|
|
.has-dark-brown-color {
|
|
color: #352712;
|
|
}
|
|
|
|
.has-dark-brown-background-color {
|
|
background-color: #352712;
|
|
}
|
|
|
|
.has-medium-pink-color {
|
|
color: #e53b51;
|
|
}
|
|
|
|
.has-medium-pink-background-color {
|
|
background-color: #e53b51;
|
|
}
|
|
|
|
.has-light-pink-color {
|
|
color: #ffe5d1;
|
|
}
|
|
|
|
.has-light-pink-background-color {
|
|
background-color: #ffe5d1;
|
|
}
|
|
|
|
.has-dark-purple-color {
|
|
color: #2e2256;
|
|
}
|
|
|
|
.has-dark-purple-background-color {
|
|
background-color: #2e2256;
|
|
}
|
|
|
|
.has-purple-color {
|
|
color: #674970;
|
|
}
|
|
|
|
.has-purple-background-color {
|
|
background-color: #674970;
|
|
}
|
|
|
|
.has-blue-gray-color {
|
|
color: #22313f;
|
|
}
|
|
|
|
.has-blue-gray-background-color {
|
|
background-color: #22313f;
|
|
}
|
|
|
|
.has-bright-blue-color {
|
|
color: #55c3dc;
|
|
}
|
|
|
|
.has-bright-blue-background-color {
|
|
background-color: #55c3dc;
|
|
}
|
|
|
|
.has-light-blue-color {
|
|
color: #e9f2f9;
|
|
}
|
|
|
|
.has-light-blue-background-color {
|
|
background-color: #e9f2f9;
|
|
}
|