WordPress/wp-content/themes/twentysixteen/css/blocks.css
desrosj 74d4822bf5 Twenty Sixteen: Correctly align columns within table blocks as configured in the editor.
Previously, all columns were forced to be aligned left, and aligned right for RTL languages.

Props robertghetau, umesh84, sabernhardt.
Fixes 54317.
Built from https://develop.svn.wordpress.org/trunk@52210


git-svn-id: http://core.svn.wordpress.org/trunk@51802 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-18 20:22:01 +00:00

448 lines
8.6 KiB
CSS

/*
Theme Name: Twenty Sixteen
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
--------------------------------------------------------------*/
/* 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;
}
/*--------------------------------------------------------------
2.0 Blocks - Common Blocks
--------------------------------------------------------------*/
/* Paragraph */
p.has-drop-cap:not(:focus)::first-letter {
font-size: 5em;
}
/* Image */
@media screen and (min-width: 61.5625em) {
body:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
clear: both;
display: block;
float: none;
margin-right: 0;
margin-left: -40%;
max-width: 140%;
}
body.rtl:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
margin-left: 0;
margin-right: -40%;
}
}
/* Gallery */
.wp-block-gallery {
margin-bottom: 1.75em;
}
/* Quote */
.wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
.wp-block-quote:not(.is-large):not(.is-style-large).alignright {
border-left: none;
padding-left: 0;
}
.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: none;
padding-right: 0;
}
.wp-block-quote cite {
color: #1a1a1a;
display: block;
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
}
.wp-block-quote cite:before {
content: "\2014\00a0";
}
/* 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: #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;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus {
background: #007acc;
}
.wp-block-file .wp-block-file__button:focus {
outline: thin dotted;
outline-offset: -4px;
}
.rtl .wp-block-file * + .wp-block-file__button {
margin-left: 0.75em;
margin-right: 0;
}
/*--------------------------------------------------------------
3.0 Blocks - Formatting Blocks
--------------------------------------------------------------*/
/* Code */
.wp-block-code {
border: 0;
font-family: Inconsolata, monospace;
line-height: 1.75;
padding: 0;
}
.wp-block-code code {
font-size: inherit;
}
/* Pullquote */
.wp-block-pullquote {
border-width: 4px;
}
.wp-block-pullquote blockquote {
color: #686868;
border-left: 4px solid #1a1a1a;
margin: 0;
padding: 0 0 0 24px;
}
.rtl .wp-block-pullquote blockquote {
border-left: none;
border-right: 4px solid #1a1a1a;
padding: 0 24px 0 0;
}
.wp-block-pullquote p {
font-size: 19px;
font-size: 1.1875rem;
}
.wp-block-pullquote cite {
color: #1a1a1a;
display: block;
font-size: 16px;
font-size: 1rem;
font-style: normal;
line-height: 1.75;
text-transform: none;
}
.wp-block-pullquote cite:before {
content: "\2014\00a0";
}
/* Table */
.wp-block-table,
.wp-block-table th,
.wp-block-table td {
border: 1px solid #d1d1d1;
}
.wp-block-table {
border-collapse: separate;
border-spacing: 0;
border-width: 0;
margin: 0 0 1.75em;
table-layout: fixed;
width: 100%;
}
.wp-block-table th,
.wp-block-table td {
font-weight: normal;
padding: 0.4375em;
}
.wp-block-table th {
border-width: 0 1px 1px 0;
font-weight: 700;
}
.wp-block-table td {
border-width: 0 1px 1px 0;
}
/*--------------------------------------------------------------
4.0 Blocks - Layout Elements
--------------------------------------------------------------*/
/* Buttons */
.wp-block-button .wp-block-button__link {
box-shadow: none;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 1.3125em 0.78125em;
text-transform: uppercase;
}
.entry-content .wp-block-button__link {
background: #1a1a1a;
color: #fff;
}
.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #1a1a1a;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus,
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus,
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
background: #007acc;
color: #fff;
}
.wp-block-button .wp-block-button__link:focus {
outline: thin dotted;
outline-offset: -4px;
}
/* Seperator */
hr.wp-block-separator {
border: 0;
}
.wp-block-separator {
margin-left: auto;
margin-right: auto;
max-width: 100px;
}
.wp-block-separator.is-style-wide {
max-width: 100%;
}
/* Media & Text */
.wp-block-media-text {
margin-bottom: 1.75em;
}
.wp-block-media-text *:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
5.0 Blocks - Widget Blocks
--------------------------------------------------------------*/
/* 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__comment-meta a {
box-shadow: none;
font-weight: 700;
}
.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:not(:first-child) {
border-top: 1px solid #d1d1d1;
margin-bottom: 0;
padding: 1.75em 0;
}
.wp-block-latest-comments__comment-excerpt p:last-child {
margin-bottom: 0;
}
/* Query Loop & Post Template */
.wp-block-query .wp-block-post-template {
margin-left: 0;
}
.wp-block-query .wp-block-post-template li {
margin-bottom: 0;
padding: 1.5em 0 0;
}
.wp-block-query .wp-block-post-template li:not(:first-child) {
border-top: 1px solid #d1d1d1;
}
/*--------------------------------------------------------------
6.0 Blocks - Colors
--------------------------------------------------------------*/
.entry-content .has-dark-gray-color {
color: #1a1a1a;
}
.entry-content .has-dark-gray-background-color {
background-color: #1a1a1a;
}
.entry-content .has-medium-gray-color {
color: #686868;
}
.entry-content .has-medium-gray-background-color {
background-color: #686868;
}
.entry-content .has-light-gray-color {
color: #e5e5e5;
}
.entry-content .has-light-gray-background-color {
background-color: #e5e5e5;
}
.entry-content .has-white-color {
color: #fff;
}
.entry-content .has-white-background-color {
background-color: #fff;
}
.entry-content .has-blue-gray-color {
color: #4d545c;
}
.entry-content .has-blue-gray-background-color {
background-color: #4d545c;
}
.entry-content .has-bright-blue-color {
color: #007acc;
}
.entry-content .has-bright-blue-background-color {
background-color: #007acc;
}
.entry-content .has-light-blue-color {
color: #9adffd;
}
.entry-content .has-light-blue-background-color {
background-color: #9adffd;
}
.entry-content .has-dark-brown-color {
color: #402b30;
}
.entry-content .has-dark-brown-background-color {
background-color: #402b30;
}
.entry-content .has-medium-brown-color {
color: #774e24;
}
.entry-content .has-medium-brown-background-color {
background-color: #774e24;
}
.entry-content .has-dark-red-color {
color: #640c1f;
}
.entry-content .has-dark-red-background-color {
background-color: #640c1f;
}
.entry-content .has-bright-red-color {
color: #ff675f;
}
.entry-content .has-bright-red-background-color {
background-color: #ff675f;
}
.entry-content .has-yellow-color {
color: #ffef8e;
}
.entry-content .has-yellow-background-color {
background-color: #ffef8e;
}