/* * Gutenberg Editor Style CSS * * Add styling for the Gutenberg Editor * * @package Tortuga */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Editor 2.0 - Typography 3.0 - Blocks 4.0 - Text Colors 5.0 - Background Colors /*-------------------------------------------------------------- # 1.0 - Editor --------------------------------------------------------------*/ body.block-editor-page .edit-post-visual-editor .editor-post-title__block, .wp-block { max-width: 860px; } .edit-post-visual-editor .editor-post-title__block .editor-post-title__input { color: #dd5533; text-transform: uppercase; font-weight: normal; font-size: 28px; font-size: 1.75rem; font-family: 'Titillium Web', Tahoma, Arial; line-height: 1.4; } /*-------------------------------------------------------------- # 2.0 - Typography --------------------------------------------------------------*/ .editor-styles-wrapper > * { color: #303030; font-size: 17px; font-size: 1.0625rem; font-family: 'Open Sans', Tahoma, Arial; line-height: 1.75; } .editor-styles-wrapper .wp-block p { font-size: 17px; font-size: 1.0625rem; margin-bottom: 1.5em; } .editor-styles-wrapper a { color: #dd5533; } .editor-styles-wrapper .has-text-color a { color: inherit; } .editor-styles-wrapper pre { overflow: auto; padding: 1.5em; border: 1px solid #e5e5e5; background: #f5f5f5; font-size: 15px; font-size: 0.9375rem; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.6; } .editor-styles-wrapper .wp-block h1, .editor-styles-wrapper .wp-block h2, .editor-styles-wrapper .wp-block h3, .editor-styles-wrapper .wp-block h4, .editor-styles-wrapper .wp-block h5, .editor-styles-wrapper .wp-block h6 { clear: both; margin: 0.75em 0; line-height: 1.4; } .editor-styles-wrapper .wp-block h1 { font-size: 36px; font-size: 2.25rem; } .editor-styles-wrapper .wp-block h2 { font-size: 28px; font-size: 1.75rem; } .editor-styles-wrapper .wp-block h3 { font-size: 24px; font-size: 1.5rem; } .editor-styles-wrapper .wp-block h4 { font-size: 22px; font-size: 1.375rem; } .editor-styles-wrapper .wp-block h5 { font-size: 20px; font-size: 1.25rem; } .editor-styles-wrapper .wp-block h6 { font-size: 19px; font-size: 1.1875rem; } /*-------------------------------------------------------------- # 3.0 - Blocks --------------------------------------------------------------*/ /* Separator */ .wp-block-separator { margin-bottom: 1.5em; height: 2px; border: none; background-color: #ddd; } /* Quote */ .wp-block-quote { margin: 0 0 1.5em; padding: 1em 1.25em; border: 1px solid #ddd; border-left: 3px solid #dd5533; color: #777; font-style: italic; font-size: 18px; font-size: 1.125rem; } .wp-block-quote:not(.is-large):not(.is-style-large) { padding-left: 1.25em; border: 1px solid #ddd; border-left: 3px solid #dd5533; } .wp-block-quote__citation, .wp-block-quote cite, .wp-block-quote footer { display: block; margin-top: 1em; color: #404040; font-size: 16px; font-size: 1rem; font-style: normal; line-height: 1.75; } .wp-block-quote__citation:before, .wp-block-quote cite:before, .wp-block-quote footer:before { content: "\2014\00a0"; } .wp-block-quote.is-style-large { border: none; margin: 0 0 1.5em; padding: 0; font-size: 28px; font-style: italic; } .wp-block-quote.is-style-large p { margin-bottom: 0.5em; font-size: inherit; font-style: inherit; line-height: inherit; } /* Pullquote */ .wp-block-pullquote { margin-bottom: 1.5em; padding: 1.5em 0; border-bottom: 3px solid #ddd; border-top: 3px solid #ddd; } .wp-block-pullquote blockquote { border-left: none; margin: 0; padding: 0; font-size: 28px; } .wp-block-pullquote blockquote p { margin-bottom: 0.5em; } .wp-block-pullquote.alignleft { margin-right: 1.5em; } .wp-block-pullquote.alignright { margin-left: 1.5em; } /* Cover */ .editor-styles-wrapper p.wp-block-cover-text { margin-top: 0; margin-bottom: 0; font-size: 2em; line-height: 1.25; } /* Table */ .wp-block-table td, .wp-block-table th { padding: 0; border: 1px solid #ddd; } .wp-block-table__cell-content { padding: 0.3em 0.6em; } /* Captions */ .blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption { margin-top: 0.3em; margin-bottom: 1em; color: #555; font-size: 13px; font-size: 0.8125rem; text-align: center; } /* Latest Posts */ .wp-block-latest-posts.wp-block-latest-posts__list { margin: 0; padding: 0; } /*-------------------------------------------------------------- # 4.0 - Text Colors --------------------------------------------------------------*/ .has-primary-color { color: #dd5533; } .has-white-color { color: #ffffff; } .has-light-gray-color { color: #f0f0f0; } .has-dark-gray-color { color: #777777; } .has-black-color { color: #303030; } /*-------------------------------------------------------------- # 5.0 - Background Colors --------------------------------------------------------------*/ .has-primary-background-color { background-color: #dd5533; } .has-white-background-color { background-color: #ffffff; } .has-light-gray-background-color { background-color: #f0f0f0; } .has-dark-gray-background-color { background-color: #777777; } .has-black-background-color { background-color: #303030; } /*-------------------------------------------------------------- # 6.0 - Magazine Blocks --------------------------------------------------------------*/ :root { --tz-column-gap: 1.5em; } .edit-post-visual-editor .tz-magazine-block .tz-entry-image { margin-bottom: 0.5em; } .edit-post-visual-editor .tz-magazine-block .tz-entry-title { font-family: 'Titillium Web', Tahoma, Arial; line-height: 1.4; font-size: 22px; font-size: 1.375rem; text-transform: uppercase; font-weight: normal; } .edit-post-visual-editor .tz-magazine-block .tz-entry-title a:link, .edit-post-visual-editor .tz-magazine-block .tz-entry-title a:visited { color: #dd5533; text-decoration: none; transition: all 0.2s ease; } .edit-post-visual-editor .tz-magazine-block .tz-entry-title a:hover, .edit-post-visual-editor .tz-magazine-block .tz-entry-title a:active { color: #303030; } .edit-post-visual-editor .tz-magazine-block .tz-magazine-grid-columns-3 .tz-entry-title { font-size: 17px; font-size: 1.0625rem; } .edit-post-visual-editor .tz-magazine-block .tz-magazine-grid-columns-4 .tz-entry-title, .edit-post-visual-editor .tz-magazine-block .tz-magazine-thumbnail-list .tz-entry-title { font-size: 16px; font-size: 1rem; } .edit-post-visual-editor .tz-magazine-block .tz-entry-meta { margin: 0.1em 0; color: #303030; font-size: 14px; font-size: 0.875rem; text-decoration: none; } .edit-post-visual-editor .tz-magazine-block .tz-entry-meta a:link, .edit-post-visual-editor .tz-magazine-block .tz-entry-meta a:visited { color: #303030; } .edit-post-visual-editor .tz-magazine-block .tz-entry-meta a:hover, .edit-post-visual-editor .tz-magazine-block .tz-entry-meta a:active { color: #777; } .edit-post-visual-editor .tz-magazine-block .tz-meta-field { margin-right: 1.5em; } .edit-post-visual-editor .tz-magazine-block .tz-meta-field a { text-decoration: none; } .edit-post-visual-editor .tz-magazine-block .tz-entry-content { margin-top: 1em; font-size: 16px; font-size: 1rem; } .edit-post-visual-editor .tz-magazine-block .tz-read-more { margin: 1em 0 0; } .edit-post-visual-editor .tz-magazine-block .tz-more-link { display: inline-block; margin: 0; padding: 0.6em 1em; background: #dd5533; color: #fff; text-decoration: none; font-size: 15px; font-size: 0.9375rem; transition: all 0.2s ease; } .edit-post-visual-editor .tz-magazine-block .tz-more-link:after { content: " \00BB"; } .edit-post-visual-editor .tz-magazine-block .tz-more-link:link, .edit-post-visual-editor .tz-magazine-block .tz-more-link:visited { color: #fff; } .edit-post-visual-editor .tz-magazine-block .tz-more-link:hover, .edit-post-visual-editor .tz-magazine-block .tz-more-link:active { background: #303030; }