/* Theme Name: Photos Description: Gutenberg Block Editor Styles */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Typography 2.0 General Block Styles 3.0 Blocks - Common Blocks 4.0 Blocks - Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Typography --------------------------------------------------------------*/ .block-editor .editor-styles-wrapper, .block-editor .editor-styles-wrapper p, .editor-default-block-appender textarea.editor-default-block-appender__content { font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; } .block-editor .editor-styles-wrapper, .block-editor .editor-styles-wrapper p { color: #111; font-size: 16px; line-height: 1.5 !important; } .block-editor .editor-styles-wrapper .mce-content-body { line-height: 1.5; } @media screen and ( min-width: 1200px ) { .block-editor .editor-styles-wrapper, .block-editor .editor-styles-wrapper .editor-rich-text, .block-editor .editor-styles-wrapper .editor-rich-text p { font-size: 20px; } } .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit, .editor-block-list__layout > .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit, .editor-block-list__layout > .editor-default-block-appender__content { margin-bottom: 30px; margin-top: 30px; } .alignleft, .editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-list__block-edit { margin-right: 30px; } .rtl .alignleft, .rtl .editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-list__block-edit { margin-left: 30px; margin-right: 0; } .alignright, .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-edit { margin-left: 30px; } .rtl .alignright, .rtl .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-edit { margin-left: 0; margin-right: 30px; } .aligncenter, .editor-block-list__layout .editor-block-list__block[data-align="center"] .editor-block-list__block-edit { clear: both; display: block; margin-left: auto; margin-right: auto; } .edit-post-visual-editor a, .editor-block-list__block a, .wp-block-freeform.block-library-rich-text__tinymce a { color: #d63031; } /* Title */ .editor-post-title__block .editor-post-title__input { clear: both; color: #111111; font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-weight: bold; margin-bottom: 1.875em; margin-top: 0; text-align: center; line-height: 1.2; } /* Headings */ .edit-post-visual-editor h1, .edit-post-visual-editor h2, .edit-post-visual-editor h3, .edit-post-visual-editor h4, .edit-post-visual-editor h5, .edit-post-visual-editor h6 { clear: both; font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; line-height: 1.2; font-weight: 700; } .edit-post-visual-editor h1 { font-size: 34px; line-height: 1.4118; } .edit-post-visual-editor h2 { font-size: 28px; line-height: 1.2858; } .edit-post-visual-editor h3 { font-size: 24px; line-height: 1.25; } .edit-post-visual-editor h4 { font-size: 20px; line-height: 1.5; } .edit-post-visual-editor h5 { font-size: 16px; line-height: 1.5; } .edit-post-visual-editor h6 { font-size: 14px; line-height: 1.2858; } @media screen and ( min-width: 1200px ) { .edit-post-visual-editor h1 { font-size: 42px; line-height: 1.4286; } .edit-post-visual-editor h2 { font-size: 35px; line-height: 1.2858; } .edit-post-visual-editor h3 { font-size: 29px; line-height: 1.2932; } .edit-post-visual-editor h4 { font-size: 24px; line-height: 1.25; } .edit-post-visual-editor h5 { font-size: 20px; line-height: 1.3236; } .edit-post-visual-editor h6 { font-size: 17px; line-height: 1.3236; } } /* Paragraphs */ .edit-post-visual-editor p, .edit-post-visual-editor blockquote p { margin: 0 0 1.5em; } /*-------------------------------------------------------------- 2.0 General Block Styles --------------------------------------------------------------*/ /* Main content width */ .wp-block { max-width: 670px; /* 640px + 30px for editor padding */ } /* Alignments */ .alignfull { max-width: 100%; text-align: center; } .alignwide { margin-left: auto; margin-right: auto; max-width: 1020px; width: 80%; } .wp-block[data-align="left"], .wp-block[data-align="right"] { max-width: 100%; } /* Colors */ .has-red-color { color: #d63031; } .has-red-background-color { background-color: #d63031; } .has-charcoal-color { color: #111; } .has-charcoal-background-color { background-color: #111; } .has-very-light-gray-color { color: #f0f0f0; } .has-very-light-gray-background-color { background-color: #f0f0f0; } .has-very-dark-gray-color { color: #404040; } .has-very-dark-gray-background-color { background-color: #404040; } .has-medium-gray-color { color: #606060; } .has-medium-gray-background-color { background-color: #606060; } /* Text sizing */ .is-small-text {} .is-regular-text {} .is-large-text {} .is-larger-text {} /* List styles */ .block-editor .editor-styles-wrapper ol ul, .block-editor .editor-styles-wrapper ul ul { list-style: disc; } .editor-styles-wrapper dd, .editor-styles-wrapper li { line-height: 1.5; margin-bottom: 0; } /*-------------------------------------------------------------- 3.0 Common Blocks --------------------------------------------------------------*/ /* Images */ .wp-block-image img { display: block; } .wp-block-image .alignleft { margin-bottom: 1.5em; margin-left: -190px; margin-right: 1.5em; margin-top: 0; } .rtl .wp-block-image .alignleft { margin-left: 1.5em; margin-right: -190px; } .wp-block-image .alignright { margin-bottom: 1.5em; margin-left: 1.5em; margin-right: -190px; margin-top: 0; } .rtl .wp-block-image .alignright { margin-left: -190px; margin-right: 1.5em; } .wp-block-image figcaption { color: #606060; font-size: 0.8em; margin-top: 0; padding-top: 0.625em; text-align: center; } /* Dropcaps */ p.has-drop-cap:not(:focus):first-letter { font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 106px; font-weight: 300; margin: 0.08em 0.1em 0 0; } /* Images */ .wp-block-image img { display: block; } .wp-block-image figcaption { color: #606060; font-size: 0.8em; margin-top: 0; padding-top: 0.625em; text-align: center; } /* Galleries */ .wp-block-gallery { margin-bottom: 30px; } /* Captions */ .wp-block-image figcaption, .wp-block-audio figcaption, .wp-block-video figcaption { color: #606060; } /* Blockquotes*/ blockquote { background-color: #f0f0f0; border-left: 4px solid #d63031; font-style: italic; margin: 0 0 1.5em; padding: 1em 1.5em; } .rtl blockquote { border-left: none; border-right: 4px solid #d63031; } blockquote :last-child, blockquote p:last-child { margin-bottom: 0; } .wp-block-quote, .wp-block-quote:not(.is-large):not(.is-style-large), .rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:left"], .rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: left"] { border-left: 4px solid #d63031; border-right: 0; padding-left: 26px; padding-right: 26px; } .rtl .wp-block-quote, .rtl .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:right"], .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: right"] { border-left: none; border-right: 4px solid #d63031; } .wp-block-quote.is-large, .wp-block-quote.is-style-large { margin-left: auto; margin-right: auto; margin-bottom: 30px; padding: 20px 30px; } .wp-block-quote p:last-of-type { margin-bottom: 0; } .wp-block-quote__citation { color: #606060; font-size: 16px; font-weight: 300; margin-top: 0; } /* Pullquotes */ .wp-block-pullquote { border-bottom: none; border-top: none; color: #111; padding: 0; } .wp-block-pullquote blockquote { border-bottom: 4px solid #d63031; border-left: none; border-right: none; border-top: 4px solid #d63031; font-style: italic; margin: 0; padding: 1em 1.5em; } .wp-block-pullquote:not(.is-style-solid-color) blockquote { background-color: #f0f0f0; } .wp-block-pullquote p, .wp-block-pullquote p:last-of-type { margin-bottom: 1em; } .wp-block-pullquote .wp-block-pullquote__citation { color: #606060; font-size: inherit; font-weight: 300; text-transform: capitalize; } .wp-block[data-align="left"] .wp-block-pullquote, .wp-block[data-align="right"] .wp-block-pullquote { text-align: left; } .rtl .wp-block[data-align="left"] .wp-block-pullquote, .rtl .wp-block[data-align="right"] .wp-block-pullquote { text-align: right; } .wp-block[data-align="left"] .wp-block-pullquote, .wp-block[data-align="right"] .wp-block-pullquote { max-width: 320px; padding: 0; } .wp-block[data-align="wide"] .wp-block-pullquote blockquote, .wp-block[data-align="full"] .wp-block-pullqupote blockquote { padding: 2em; } @media screen and ( min-width: 1200px ) { .wp-block-pullquote p, .editor-styles-wrapper .editor-block-list__block .wp-block-pullquote .editor-rich-text p { font-size: 32px; } .wp-block[data-align="left"] .wp-block-pullquote p, .wp-block[data-align="right"] .wp-block-pullquote p, .editor-styles-wrapper .editor-block-list__block[data-align="left"] .editor-rich-text p, .editor-styles-wrapper .editor-block-list__block[data-align="right"] .editor-rich-text p { font-size: 27px; } .wp-block[data-align="wide"] .wp-block-pullquote blockquote, .wp-block[data-align="full"] .wp-block-pullqupote blockquote { padding: 3em; } .wp-block[data-align="wide"] .wp-block-pullquote { max-width: 830px; width: 100%; } .wp-block[data-align="full"] .wp-block-pullquote { margin: 0 calc( 50% - 510px ); max-width: 1020px; } } /* Cover Images */ .block-editor .editor-styles-wrapper .wp-block-cover .editor-rich-text p, .block-editor .wp-block-cover-image .wp-block-cover-image-text, .block-editor .wp-block-cover-image .wp-block-cover-text, .block-editor .wp-block-cover-image h2, .block-editor .wp-block-cover .wp-block-cover-image-text, .block-editor .wp-block-cover .wp-block-cover-text, .block-editor .wp-block-cover h2 { color: #fff; font-size: 2em; line-height: 1.25; } /* Audio & Video */ .wp-block[data-align="left"] .wp-block-audio, .wp-block[data-align="right"] .wp-block-audio { width: 320px; } .wp-block-audio audio, .wp-block-video video { height: auto; width: 100%; } /* Tables */ .wp-block-table { display: table; } .wp-block-table td, .wp-block-table th { border-color: #dcdcdc; padding: 5px 3px; } .wp-block-table thead { background-color: #f0f0f0; } .wp-block-table.alignleft, .wp-block-table.alignright { max-width: 50%; } /* Preformatted, Code, Verse */ .wp-block-code, .wp-block-preformatted, .wp-block-verse pre { background: #f0f0f0; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 16px; line-height: 1.5; max-width: 100%; padding: 1.5em; overflow: auto; } .wp-block-code { border: none; border-radius: 0; } .wp-block-code .editor-plain-text { background-color: transparent; color: #111; font-size: 16px; } .wp-block-preformatted { padding: 1.5em; } .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-preformatted .mce-content-body { font-size: 16px; line-height: 1.5; } /* Verse */ .wp.block-verse.editor-rich-text { font-size: 16px; } .wp-block-verse.aligncenter { text-align: center; } .wp-block-verse.alignleft { text-align: left; } .rtl .wp-block-verse.alignleft { text-align: right; } .wp-block-verse.alignright { text-align: right; } .rtl .wp-block-verse.alignright { text-align: left; } /* Separator */ .wp-block-separator, .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { background-color: transparent; border-bottom: 1px solid #dcdcdc; margin-bottom: 1.5em; max-width: 180px; width: 100%; } .editor-styles-wrapper .wp-block[data-type="core/separator"] { max-width: 100%; } .wp-block-separator.alignwide, .wp-block-separator.is-style-wide { max-width: 75vw; width: 100%; } .wp-block-separator.is-style-dots:before { color: #d63031; } /* Buttons and File block */ .wp-block-file .wp-block-file__button, .wp-block-button .wp-block-button__link { font-weight: bold; line-height: 1.5; padding: 0.5em 0.75em; text-align: center; transition: background 150ms ease-in-out, color 150ms ease-in-out; } .wp-block-file .wp-block-file__button { border-radius: 4px; } .wp-block-file__textlink { text-decoration: underline; } .wp-block-file .wp-block-file__button { display: inline; font-size: inherit; } .wp-block-file, .wp-block-file .wp-block-file__button, .wp-block-button__link:not(.has-text-color) { color: #d63031; } .wp-block-file .wp-block-file__button, .wp-block-button__link:not(.has-background) { background: #f0f0f0; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; } /* Classic Editor */ .wp-block-freeform.block-library-rich-text__tinymce li, .wp-block-freeform.block-library-rich-text__tinymce p { line-height: 1.5; } .wp-block-freeform > *, .wp-block-freeform.block-library-rich-text__tinymce .alignleft, .wp-block-freeform.block-library-rich-text__tinymce .alignright { margin-bottom: 1.875rem; } .block-editor .wp-block-freeform p { font-size: inherit; } .wp-block-freeform.block-library-rich-text__tinymce blockquote { border-color: #d63031; margin-bottom: 1.875rem; padding: 1em 1.5em; } .wp-block-freeform.block-library-rich-text__tinymce blockquote p { margin: 0 0 1.5em; } .wp-block-freeform blockquote p:last-of-type { margin-bottom: 0; } .wp-block-freeform hr { clear: both; } .wp-block-freeform table { border: 1px solid #dcdcdc; border-collapse: collapse; margin: 0 0 1.5em; width: 100%; } .wp-block-freeform .mce-item-table, .wp-block-freeform .mce-item-table td, .wp-block-freeform .mce-item-table th, .wp-block-freeform .mce-item-table caption { border: 1px solid #dcdcdc; } .wp-block-freeform th, .wp-block-freeform td { line-height: 1.5; padding: 0.75em; } .wp-block-freeform thead { background-color: #f0f0f0; } .wp-block-freeform dt { font-weight: bold; } .wp-block-freeform li { margin-bottom: 0; } .wp-block-freeform.block-library-rich-text__tinymce pre, .wp-block-freeform.block-library-rich-text__tinymce code, .wp-block-freeform.block-library-rich-text__tinymce kbd, .wp-block-freeform.block-library-rich-text__tinymce tt, .wp-block-freeform.block-library-rich-text__tinymce var { background: #f0f0f0; border-radius: 0; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 16px; line-height: 1.5; padding: 0 0.25; overflow: auto; } .wp-block-freeform.block-library-rich-text__tinymce pre { padding: 1.5em; } .wp-block-freeform ins { background: #d63031; color: #fff; padding: 0 0.25em; text-decoration: none; } .wp-block-freeform q { quotes: initial; } .wp-block-freeform q:before { content: open-quote; } .wp-block-freeform q:after { content: close-quote; } /*-------------------------------------------------------------- 4.0 Blocks - Widgets --------------------------------------------------------------*/ /* Categories, Latest Posts & Archives */ .block-editor ul.wp-block-archives, .block-editor ul.wp-block-categories, .block-editor ul.wp-block-latest-posts { padding-left: 1em; } .edit-post-visual-editor [data-align="center"] .wp-block-categories__list, .edit-post-visual-editor [data-align="center"] .wp-block-archives, .edit-post-visual-editor [data-align="center"] .wp-block-lastest-posts { list-style-position: inside; } .rtl .block-editor ul.wp-block-archives, .rtl .block-editor ul.wp-block-categories, .rtl .block-editor ul.wp-block-latest-posts { padding-left: 0em; padding-right: 1em; } /* Latest Comments */ [data-align="full"] .wp-block-latest-comments { text-align: left; } .rtl [data-align="full"] .wp-block-latest-comments.alignfull { text-align: right; }