diff options
Diffstat (limited to 'themes/twentyfourteen/css/blocks.css')
| -rw-r--r-- | themes/twentyfourteen/css/blocks.css | 396 |
1 files changed, 396 insertions, 0 deletions
diff --git a/themes/twentyfourteen/css/blocks.css b/themes/twentyfourteen/css/blocks.css new file mode 100644 index 00000000..425c8dbc --- /dev/null +++ b/themes/twentyfourteen/css/blocks.css @@ -0,0 +1,396 @@ +/* +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; + border-radius: 2px; + 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; +} + +/* 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 { + border: 0; + border-radius: 2px; + font-size: 12px; + font-weight: 700; + line-height: 15px; + padding: 10px 30px 11px; + text-transform: uppercase; + vertical-align: bottom; +} + +.wp-block-button__link { + background-color: #24890d; + color: #fff; +} + +.wp-block-button__link:hover, +.wp-block-button__link: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; +} + +.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; +} |