mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-29 23:09:44 +01:00
7cbba801e2
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 [44195] into trunk. Fixes #45431. Built from https://develop.svn.wordpress.org/trunk@44304 git-svn-id: http://core.svn.wordpress.org/trunk@44134 1a063a9b-81f0-0310-95a4-ce76da25c4cd
542 lines
12 KiB
CSS
542 lines
12 KiB
CSS
/*
|
|
Theme Name: Twenty Thirteen
|
|
Description: Used to style Gutenberg Blocks.
|
|
*/
|
|
|
|
/*--------------------------------------------------------------
|
|
>>> TABLE OF CONTENTS:
|
|
----------------------------------------------------------------
|
|
1.0 Block Alignments
|
|
2.0 General Block Styles
|
|
3.0 Blocks - Common Blocks
|
|
4.0 Blocks - Formatting
|
|
5.0 Blocks - Layout Elements
|
|
6.0 Blocks - Widgets
|
|
7.0 Blocks - Colors
|
|
--------------------------------------------------------------*/
|
|
|
|
/*--------------------------------------------------------------
|
|
1.0 Block Alignments
|
|
--------------------------------------------------------------*/
|
|
|
|
.content-area {
|
|
overflow-x: hidden; /* prevents side-scrolling caused by use of vw */
|
|
}
|
|
|
|
[class^="wp-block-"].alignleft,
|
|
[class^="wp-block-"] .alignleft {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
[class^="wp-block-"].alignright,
|
|
[class^="wp-block-"] .alignright {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.alignfull,
|
|
.alignwide {
|
|
clear: both;
|
|
}
|
|
|
|
body:not(.sidebar) .alignwide {
|
|
margin-left: calc(25% - 25vw);
|
|
margin-right: calc(25% - 25vw);
|
|
width: auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
body:not(.sidebar) .alignfull {
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
width: auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
/* Make non image-based blocks a bit narrower, so they don't get cut off. */
|
|
body:not(.sidebar) .wp-block-columns.alignfull,
|
|
body:not(.sidebar) .wp-block-audio.alignfull,
|
|
body:not(.sidebar) .wp-block-table.alignfull,
|
|
body:not(.sidebar) .wp-block-latest-comments.alignfull {
|
|
margin-left: calc(50% - 48vw);
|
|
margin-right: calc(50% - 48vw);
|
|
}
|
|
|
|
@media (max-width: 999px) {
|
|
body.sidebar .alignwide {
|
|
margin-left: calc(25% - 25vw);
|
|
margin-right: calc(25% - 25vw);
|
|
width: auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
body.sidebar .alignfull {
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
width: auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
/* Make non image-based blocks a bit narrower, so they don't get cut off. */
|
|
body.sidebar .wp-block-columns.alignfull,
|
|
body.sidebar .wp-block-audio.alignfull,
|
|
body.sidebar .wp-block-table.alignfull,
|
|
body.sidebar .wp-block-latest-comments.alignfull {
|
|
margin-left: calc(50% - 48vw);
|
|
margin-right: calc(50% - 48vw);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
|
|
/* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */
|
|
body:not(.sidebar) .alignfull {
|
|
margin-left: calc(50% - 800px);
|
|
margin-right: calc(50% - 800px);
|
|
width: auto;
|
|
max-width: 1000%;
|
|
}
|
|
|
|
body:not(.sidebar) .wp-block-columns.alignfull,
|
|
body:not(.sidebar) .wp-block-audio.alignfull,
|
|
body:not(.sidebar) .wp-block-table.alignfull,
|
|
body:not(.sidebar) .wp-block-latest-comments.alignfull {
|
|
margin-left: calc(50% - 780px);
|
|
margin-right: calc(50% - 780px);
|
|
}
|
|
|
|
body:not(.sidebar) .wp-block-gallery.alignfull {
|
|
margin-left: calc(50% - 808px); /* Adjust for gallery margins */
|
|
margin-right: calc(50% - 808px);
|
|
width: auto;
|
|
max-width: 1000%;
|
|
}
|
|
|
|
/* Make sure the 'wide' alignment doesn't get too wide. */
|
|
body:not(.sidebar) .alignwide {
|
|
margin-left: -230px;
|
|
margin-right: -230px;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
2.0 General Block Styles
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Captions */
|
|
|
|
[class^="wp-block-"] figcaption,
|
|
[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
|
|
color: #220e10;
|
|
font-size: 18px;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
3.0 Blocks - Common Blocks
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Paragraph */
|
|
|
|
p.has-drop-cap:not(:focus)::first-letter {
|
|
font-size: 5em;
|
|
}
|
|
|
|
/* Gallery */
|
|
|
|
.wp-block-gallery {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.wp-block-gallery figcaption {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Quote */
|
|
|
|
.wp-block-quote {
|
|
margin: 24px 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.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 p,
|
|
.wp-block-quote.is-style-large p {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.wp-block-quote cite {
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Audio */
|
|
|
|
.wp-block-audio audio {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Cover */
|
|
|
|
.wp-block-cover-image.aligncenter,
|
|
.wp-block-cover.aligncenter {
|
|
clear: both;
|
|
display: flex;
|
|
}
|
|
|
|
/* File */
|
|
|
|
.wp-block-file .wp-block-file__button {
|
|
background: #e05d22; /* Old browsers */
|
|
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
|
border: none;
|
|
border-bottom: 3px solid #b93207;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
padding: 11px 24px 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-block-file .wp-block-file__button:hover,
|
|
.wp-block-file .wp-block-file__button:focus {
|
|
background: #ed6a31; /* Old browsers */
|
|
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.wp-block-file .wp-block-file__button:active {
|
|
background: #d94412; /* Old browsers */
|
|
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
|
border: none;
|
|
border-top: 3px solid #b93207;
|
|
padding: 10px 24px 11px;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
4.0 Blocks - Formatting
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Code */
|
|
|
|
.wp-block-code {
|
|
background-color: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Pullquote */
|
|
|
|
.wp-block-pullquote {
|
|
border: 0;
|
|
color: inherit;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
.wp-block-pullquote__citation,
|
|
.wp-block-pullquote cite,
|
|
.wp-block-pullquote footer {
|
|
color: inherit;
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
|
|
.wp-block-table th {
|
|
border: 0;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wp-block-table td {
|
|
border: 0;
|
|
border-top: 1px solid #ededed;
|
|
}
|
|
|
|
body:not(.sidebar) .wp-block-table.alignwide,
|
|
body:not(.sidebar) .wp-block-table.alignfull {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Some acrobatics to make sure the table blocks always fill the available space. */
|
|
|
|
@media (max-width: 1599px) {
|
|
body:not(.sidebar) .wp-block-table.alignwide {
|
|
width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
|
|
}
|
|
|
|
body:not(.sidebar) .wp-block-table.alignfull {
|
|
width: 96vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 999px) {
|
|
body.sidebar .wp-block-table.alignwide {
|
|
width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
|
|
}
|
|
|
|
body.sidebar .wp-block-table.alignfull {
|
|
width: 96vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 654px) {
|
|
body:not(.sidebar) .wp-block-table.alignwide,
|
|
body.sidebar .wp-block-table.alignwide {
|
|
width: 96vw;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
body:not(.sidebar) .wp-block-table.alignwide {
|
|
width: 1064px;
|
|
}
|
|
|
|
body:not(.sidebar) .wp-block-table.alignfull {
|
|
width: 1560px;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
5.0 Blocks - Layout Elements
|
|
--------------------------------------------------------------*/
|
|
|
|
/* Buttons */
|
|
|
|
.wp-block-button.alignleft {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.wp-block-button.alignright {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.wp-block-button .wp-block-button__link {
|
|
border: none;
|
|
border-bottom: 3px solid #b93207;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
padding: 11px 24px 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.entry-content .wp-block-button__link {
|
|
background-color: #e05d22;
|
|
color: #fff;
|
|
}
|
|
|
|
.entry-content .wp-block-button__link:not(.has-background) {
|
|
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
|
}
|
|
|
|
.entry-content .wp-block-button__link:hover,
|
|
.entry-content .wp-block-button__link:focus {
|
|
background: #ed6a31;
|
|
color: #fff;
|
|
}
|
|
|
|
.entry-content .wp-block-button__link:not(.has-background):hover,
|
|
.entry-content .wp-block-button__link:not(.has-background):hover {
|
|
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
|
}
|
|
|
|
.entry-content .wp-block-button__link:active {
|
|
background: #d94412;
|
|
}
|
|
|
|
.entry-content .wp-block-button__link:not(.has-background):active {
|
|
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
|
|
background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
|
}
|
|
|
|
.entry-content .wp-block-button .wp-block-button__link:active {
|
|
border: none;
|
|
border-top: 3px solid #b93207;
|
|
padding: 10px 24px 11px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
6.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;
|
|
padding: 0;
|
|
}
|
|
|
|
.wp-block-latest-comments .avatar,
|
|
.wp-block-latest-comments__comment-avatar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.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-excerpt p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.wp-block-latest-comments__comment-date {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.wp-block-latest-comments .wp-block-latest-comments__comment {
|
|
background: url(../images/dotted-line.png) repeat-x left top;
|
|
margin-bottom: 0;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
7.0 Blocks - Colors
|
|
--------------------------------------------------------------*/
|
|
|
|
.entry-content .has-dark-gray-color {
|
|
color: #141412;
|
|
}
|
|
|
|
.entry-content .has-dark-gray-background-color {
|
|
background-color: #141412;
|
|
}
|
|
|
|
.entry-content .has-red-color {
|
|
color: #bc360a;
|
|
}
|
|
|
|
.entry-content .has-red-background-color {
|
|
background-color: #bc360a;
|
|
}
|
|
|
|
.entry-content .has-medium-orange-color {
|
|
color: #db572f;
|
|
}
|
|
|
|
.entry-content .has-medium-orange-background-color {
|
|
background-color: #db572f;
|
|
}
|
|
|
|
.entry-content .has-light-orange-color {
|
|
color: #ea9629;
|
|
}
|
|
|
|
.entry-content .has-light-orange-background-color {
|
|
background-color: #ea9629;
|
|
}
|
|
|
|
.entry-content .has-yellow-color {
|
|
color: #fbca3c;
|
|
}
|
|
|
|
.entry-content .has-yellow-background-color {
|
|
background-color: #fbca3c;
|
|
}
|
|
|
|
.entry-content .has-white-color {
|
|
color: #fff;
|
|
}
|
|
|
|
.entry-content .has-white-background-color {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.entry-content .has-dark-brown-color {
|
|
color: #220e10;
|
|
}
|
|
|
|
.entry-content .has-dark-brown-background-color {
|
|
background-color: #220e10;
|
|
}
|
|
|
|
.entry-content .has-medium-brown-color {
|
|
color: #722d19;
|
|
}
|
|
|
|
.entry-content .has-medium-brown-background-color {
|
|
background-color: #722d19;
|
|
}
|
|
|
|
.entry-content .has-light-brown-color {
|
|
color: #eadaa6;
|
|
}
|
|
|
|
.entry-content .has-light-brown-background-color {
|
|
background-color: #eadaa6;
|
|
}
|
|
|
|
.entry-content .has-beige-color {
|
|
color: #e8e5ce;
|
|
}
|
|
|
|
.entry-content .has-beige-background-color {
|
|
background-color: #e8e5ce;
|
|
}
|
|
|
|
.entry-content .has-off-white-color {
|
|
color: #f7f5e7;
|
|
}
|
|
|
|
.entry-content .has-off-white-background-color {
|
|
background-color: #f7f5e7;
|
|
}
|