/* Theme Name: Penscratch 2 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 --------------------------------------------------------------*/ [class^="wp-block-"] figcaption { font-size: 14.6px; } [class^="wp-block-"]:not(.wp-block-gallery) figcaption { color: inherit; text-align: left; } .rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption { text-align: right; } /*-------------------------------------------------------------- 2.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ p.has-drop-cap:not(:focus)::first-letter { font-size: 5em; margin-top: 0.15em; } /* Quote */ .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-left: 64px; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 22px; font-style: normal; } .rtl .wp-block-quote.is-large, .rtl .wp-block-quote.is-style-large { padding-left: 0; padding-right: 64px; } @media (min-width: 50em) { .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 28px; } } .wp-block-quote[style*="text-align:right"] { padding: 0 48px 0 0; } .wp-block-quote[style*="text-align:right"]:before { left: auto; right: 0; } .rtl .wp-block-quote[style*="text-align:left"] { padding: 0 0 0 48px; } .rtl .wp-block-quote[style*="text-align:left"]:before { left: 0; right: auto; } @media (min-width: 50em) { .wp-block-quote[style*="text-align:right"] { padding: 0 64px 0 0; } .wp-block-quote[style*="text-align:left"] { padding: 0 0 0 64px; } } /* Audio */ .wp-block-audio { margin: 0 0 27px; } .wp-block-audio audio { display: block; width: 100%; } /* Cover */ .wp-block-cover.aligncenter, .wp-block-cover-image.aligncenter, .wp-block-cover.alignleft, .wp-block-cover-image.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignright { display: flex; } .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text, .wp-block-cover-image h2, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, .wp-block-cover h2 { font-size: 1.5em; } /* File */ .wp-block-file a.wp-block-file__button, .wp-block-file a.wp-block-file__button:visited { background: #e6e6e6; border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .8); /* Corrects inability to style clickable 'input' types in iOS */ text-shadow: 0 1px 0 rgba(255, 255, 255, .8); /* Improves usability and consistency of cursor style between image-type 'input' and others */ } .wp-block-file a.wp-block-file__button:hover { border-color: #ccc #bbb #aaa #bbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(0, 0, 0, .02); color: rgba(0, 0, 0, .8); } .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15); } .rtl .wp-block-file * + .wp-block-file__button { margin-left: .75em; margin-right: 0; } /* Video */ .wp-block-video video { width: 100%; } /*-------------------------------------------------------------- 3.0 Blocks - Formatting --------------------------------------------------------------*/ /* Verse */ .wp-block-verse { font-style: italic; } /* Pullquote */ .wp-block-pullquote blockquote { padding-left: 0; padding-right: 0; } .wp-block-pullquote blockquote:before { display: none; } .wp-block-pullquote blockquote p { } .wp-block-pullquote cite, .wp-block-pullquote.alignleft cite, .wp-block-pullquote.alignright cite { text-align: center; } /* Table */ .wp-block-table td { font-weight: inherit; } .wp-block-table th { text-align: left; } .rtl .wp-block-table th { text-align: right; } /*-------------------------------------------------------------- 4.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button .wp-block-button__link { cursor: pointer; border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; } .wp-block-button__link { background: #e6e6e6; color: rgba(0, 0, 0, .8); } .wp-block-button__link:not(.has-background) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05); /* Corrects inability to style clickable 'input' types in iOS */ text-shadow: 0 1px 0 rgba(255, 255, 255, .8); /* Improves usability and consistency of cursor style between image-type 'input' and others */ } .is-style-outline .wp-block-button__link { border: 1px solid currentColor; } .is-style-outline .wp-block-button__link:not(.has-text-color) { color: rgba(0, 0, 0, .8); } .entry-content .wp-block-button .wp-block-button__link:hover { background: #e6e6e6; border-color: #ccc #bbb #aaa #bbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(0, 0, 0, .02); color: rgba(0, 0, 0, .8); } .entry-content .wp-block-button .wp-block-button__link:focus, .entry-content .wp-block-button .wp-block-button__link:active { background: #e6e6e6; border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15); color: rgba(0, 0, 0, .8); } /* Separator */ .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { margin-left: auto; margin-right: auto; max-width: 100px; } /* Media & Text */ .wp-block-media-text { margin-bottom: 27px; } .wp-block-media-text *:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- 5.0 Blocks - Widgets --------------------------------------------------------------*/ /* General Widget styles */ .wp-block-categories.aligncenter, .wp-block-categories.aligncenter ul, .wp-block-archives.aligncenter, .wp-block-latest-posts.aligncenter, .wp-block-latest-comments.aligncenter { list-style-position: inside; text-align: center; } /* Latest Comments */ .wp-block-latest-comments { margin-left: 0; margin-right: 0; } .wp-block-latest-comments__comment-date { color: inherit; } /* Latest Posts */ .wp-block-latest-posts.is-grid { margin-left: 0; margin-right: 0; } /*-------------------------------------------------------------- 6.0 Blocks - Colors --------------------------------------------------------------*/ .has-dark-green-color, .has-dark-green-color:hover, .has-dark-green-color:focus, .has-dark-green-color:active, .has-dark-green-color:visited { color: #1c7c7c; } .has-dark-green-background-color, .has-dark-green-background-color:hover, .has-dark-green-background-color:focus, .has-dark-green-background-color:active, .has-dark-green-background-color:visited { background-color: #1c7c7c; } .has-dark-gray-color, .has-dark-gray-color:hover, .has-dark-gray-color:focus, .has-dark-gray-color:active, .has-dark-gray-color:visited { color: #666; } .has-dark-gray-background-color, .has-dark-gray-background-color:hover, .has-dark-gray-background-color:focus, .has-dark-gray-background-color:active, .has-dark-gray-background-color:visited { background-color: #666; } .has-medium-gray-color, .has-medium-gray-color:hover, .has-medium-gray-color:focus, .has-medium-gray-color:active, .has-medium-gray-color:visited { color: #999; } .has-medium-gray-background-color, .has-medium-gray-background-color:hover, .has-medium-gray-background-color:focus, .has-medium-gray-background-color:active, .has-medium-gray-background-color:visited { background-color: #999; } .has-light-gray-color, .has-light-gray-color:hover, .has-light-gray-color:focus, .has-light-gray-color:active, .has-light-gray-color:visited { color: #eee; } .has-light-gray-background-color, .has-light-gray-background-color:hover, .has-light-gray-background-color:focus, .has-light-gray-background-color:active, .has-light-gray-background-color:visited { background-color: #eee; } .has-white-color, .has-white-color:hover, .has-white-color:focus, .has-white-color:active, .has-white-color:visited { color: #fff; } .has-white-background-color, .has-white-background-color:hover, .has-white-background-color:focus, .has-white-background-color:active, .has-white-background-color:visited { background-color: #fff; }