/* Theme Name: Canary Led Description: Used to style Gutenberg Blocks in the editor. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Typography 2.0 General Block Styles 3.0 Blocks - Common Blocks 4.0 Blocks - Formatting 5.0 Blocks - Layout Elements 6.0 Blocks - Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Typography --------------------------------------------------------------*/ /* Editor Font Size */ .editor-post-title__block .editor-post-title__input { font-family: "Roboto Slab", sans-serif; font-size: 24px; font-size: 1.5rem; font-weight: 500; line-height: 1.25; margin: 0 0 35px; padding: 0; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /*-------------------------------------------------------------- 2.0 General Block Styles --------------------------------------------------------------*/ /* Main column width */ .editor-styles-wrapper { margin: 0 !important; max-width: 100% !important; } .wp-block { max-width: 996px; } .wp-block-separator { /* border: 0; */ margin: 28px auto; } .wp-block.wp-block-separator { margin-left: auto; margin-right: auto; } /* List styles */ .mce-content-body > ul:not(.wp-block-gallery), .editor-block-list__block > ul:not(.wp-block-gallery), .block-library-list ul, .edit-post-visual-editor ol, .editor-block-list__block ol, .block-library-list ol, .block-library-list .editor-rich-text__tinymce { padding: 0; } .wp-block-freeform.block-library-rich-text__tinymce ol ol, .wp-block-freeform.block-library-rich-text__tinymce ul ul { padding-left: 35px; } .edit-post-visual-editor ul:not(.wp-block-gallery):not(.blocks-gallery-grid), .editor-block-list__block ul:not(.wp-block-gallery):not(.blocks-gallery-grid), .block-library-list ul { list-style: none; } .wp-block[data-align="center"] .wp-block-archives .wp-block-categories__list, .wp-block[data-align="center"] .wp-block-categories .wp-block-categories__list, .wp-block[data-align="center"] .wp-block-latest-posts .wp-block-categories__list { list-style-position: inside; } .edit-post-visual-editor ol, .editor-block-list__block ol, .block-library-list ol { list-style: decimal; margin-left: 21px; } .edit-post-visual-editor ul:not(.wp-block-gallery):not(.blocks-gallery-grid) li, .editor-block-list__block ul:not(.wp-block-gallery):not(.blocks-gallery-grid) li, .edit-post-visual-editor ol li, .editor-block-list__block ol li, .block-library-list li { margin-bottom: 14px; } ul.wp-block-list li { margin-bottom: 0; } .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul, .editor-block-list__block ul:not(.wp-block-gallery) li > ul, .block-library-list li > ul, .edit-post-visual-editor li > ol, .editor-block-list__block li > ol, .block-library-list li > ol { margin-bottom: 0; } .rtl .edit-post-visual-editor ul:not(.wp-block-gallery), .rtl .editor-block-list__block ul:not(.wp-block-gallery), .rtl .block-library-list ul, .rtl .edit-post-visual-editor ol, .rtl .editor-block-list__block ol, .rtl .block-library-list ol { margin-left: 0; margin-right: 21px; padding: 0; } .rtl .edit-post-visual-editor ol, .rtl .editor-block-list__block ol, .rtl .block-library-list ol { margin-left: 21px; margin-right: 21px; } /* Captions */ [class^="wp-block-"]:not(.wp-block-gallery) figcaption { border: 0; color: #999; font-size: 15px; font-size: 0.9375rem; font-style: italic; line-height: 1.87; margin: 0; padding: 14px 21px; text-align: center; } /*-------------------------------------------------------------- 3.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter { float: left; font-size: 120px; font-size: 7.5rem; font-weight: 700; line-height: 0.6; margin: 14px 16px 5px -3px; } .wp-block-calendar a { text-decoration: none; } .editor-styles-wrapper .wp-block-calendar table th { text-align: center; } /* Quote */ .rtl .wp-block-quote:not(.is-large):not(.is-style-large) { padding: 0 30px 0 0; } .wp-block-quote.alignleft p:last-of-type, .wp-block-quote.alignright p:last-of-type { margin-bottom: 0; } .wp-block-quote cite { color: inherit; font-size: inherit; } /* File */ .wp-block-file__textlink { box-shadow: 0 1px 0 0 currentColor; color: #444;; } .wp-block-file .wp-block-file__button { border: none; background-color: #222222; -webkit-border-radius: 6px; border-radius: 6px; font-size: 16px; font-size: 1rem; display: inline-block; font-weight: 700; padding: 10px 28px; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; text-align: center; text-transform: capitalize; } .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .button:hover, .button:focus { background-color: #ef3636; } @media screen and (min-width: 85.375rem) { .wp-block-file .wp-block-file__button, .wp-block-button .wp-block-button__link { padding: 11px 35px; } } /*-------------------------------------------------------------- 4.0 Blocks - Formatting --------------------------------------------------------------*/ /* Quotes */ .wp-block-quote, .wp-block-quote.has-text-align-right { border: 0; } .wp-block-quote.has-text-align-right { padding: 67px 0 0 0; } .wp-block-quote.has-text-align-right, .wp-block-quote.has-text-align-right cite { text-align: right; } .wp-block-quote.has-text-align-left, .wp-block-quote.has-text-align-left cite { text-align: left; } .wp-block-quote.has-text-align-center, .wp-block-quote.has-text-align-center cite { text-align: center; } blockquote.wp-block-quote, .wp-block-pullquote, .editor-styles-wrapper blockquote { color: #1a1a1a; font-size: 22px; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; letter-spacing: 0.3px; line-height: 1.625; margin-bottom: 20px; padding: 16px 20px 1px; position: relative; quotes: none; } .wp-block-pullquote:not(.is-style-large) p, .wp-block-pullquote.is-style-solid-color blockquote p, .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 20px; font-size: 1.25rem; } blockquote.wp-block-quote p, .wp-block-pullquote.is-style-solid-color blockquote p, figure.wp-block-pullquote p { margin-bottom: 28px; } blockquote.wp-block-quote .wp-block-quote__citation, blockquote.wp-block-quote cite, .is-style-default .wp-block-pullquote__citation, .wp-block-pullquote .wp-block-pullquote__citation { font-weight: 400; text-transform: capitalize; font-size: 13px; font-size: 0.8125rem; line-height: 2.15; color: #999999; } blockquote.wp-block-quote.is-style-large .wp-block-quote__citation { font-size: inherit; font-weight: 700; text-transform: capitalize; color: #999999; } .wp-block-quote.has-text-align-center { padding-left: 0; padding-right: 0; } .wp-block-pullquote.is-style-solid-color blockquote { max-width: 100%; } .wp-block[data-align="right"] figure.is-style-solid-color, .wp-block[data-align="left"] figure.is-style-solid-color { border: 0; } .wp-block[data-align="left"] figure.is-style-solid-color, .wp-block[data-align="right"] figure.is-style-solid-color, .wp-block[data-align="center"] figure.is-style-solid-color, figure.wp-block-pullquote.is-style-solid-color, .wp-block figure.is-style-solid-color { padding: 35px; } .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-top: 67px; } /* PULLQUOTE */ .wp-block-pullquote { padding: 35px 0; } .wp-block-pullquote.is-style-solid-color { background-color: #eef2f8; border: 0; } .wp-block-pullquote { border-bottom: 5px solid; border-top: 5px solid; } .wp-block-pullquote.alignleft, .wp-block[data-align="right"] figure.wp-block-pullquote, .wp-block[data-align="left"] figure.wp-block-pullquote, .wp-block-pullquote.alignright { border-bottom: 0; border-top: 0; border-left: 5px solid; padding: 0 0 0 35px; text-align: left; } .wp-block-pullquote.alignleft blockquote, .wp-block[data-align="right"] figure blockquote, .wp-block[data-align="left"] figure blockquote, .wp-block-pullquote.alignright blockquote { margin: 0; } .wp-block-pullquote.alignright, .wp-block[data-align="right"] figure.wp-block-pullquote { border-left: 0; border-right: 5px solid; padding-left: 0; padding-right: 35px; text-align: right; } @media screen and (min-width: 103.75em) { blockquote.wp-block-quote, .wp-block-pullquote, .wp-block-pullquote:not(.is-style-large) p, .wp-block-pullquote.is-style-solid-color blockquote p, .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 22px; font-size: 1.375rem; } } /* Classic */ .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft, .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright { max-width: none; width: calc(50% - 0.736842105em); text-align: left; } .editor-block-list__block-edit .wp-block-pullquote.alignleft, .editor-block-list__block-edit .wp-block-pullquote.alignright { max-width: none; width: calc(50% - 0.736842105em); } .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft { float: left; text-align: right; } .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright { float: right; text-align: left; } /* Pullquote */ /* Table */ .editor-block-list__block .wp-block-table, .editor-block-list__block .wp-block-table caption, .editor-block-list__block .wp-block-table th, .editor-block-list__block .wp-block-table td { border: 1px solid #ebebeb; } .editor-block-list__block .wp-block-table { border-collapse: collapse; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 56px; table-layout: fixed; width: 100%; } .editor-block-list__block .wp-block-table th, .editor-block-list__block .wp-block-table td { border-width: 0 1px 1px 0; } .editor-block-list__block .wp-block-table thead { font-weight: 700; } .editor-block-list__block .wp-block-table caption, .editor-block-list__block .wp-block-table th, .editor-block-list__block .wp-block-table td { text-align: left; padding: 0.7777777777777778em 1.555555555555556em; } .rtl .editor-block-list__block .wp-block-table caption, .rtl .editor-block-list__block .wp-block-table th, .rtl .editor-block-list__block .wp-block-table td { text-align: right; } .editor-block-list__block .wp-block-table caption { font-weight: 700; text-align: center; } @media screen and (min-width: 64em) { .editor-block-list__block .wp-block-table caption, .editor-block-list__block .wp-block-table th, .editor-block-list__block .wp-block-table td { padding: 14px 28px; } } /*-------------------------------------------------------------- 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button .wp-block-button__link, .more-link, .button, .wp-block-button__link { background-color: #222222; color: #fff; border: none; -webkit-border-radius: 6px; border-radius: 6px; display: inline-block; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; box-shadow: none; font-weight: 700; line-height: 1.75; padding: 10px 28px; text-decoration: none; text-transform: capitalize; -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; white-space: nowrap; } .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus { background-color: #ef3636; color: #fff; -webkit-box-shadow: none; box-shadow: none; } /* Media & Text */ .wp-block-media-text *:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- 6.0 Blocks - Widgets --------------------------------------------------------------*/ /* Latest Comments */ .wp-block-latest-comments article { margin-bottom: 3em; } .wp-block-latest-comments__comment, .wp-block-latest-comments__comment-excerpt p { font-size: inherit; } .wp-block-latest-comments__comment-meta { margin-bottom: 14px; } .editor-block-list__block .wp-block-latest-comments__comment-meta a { box-shadow: none; text-decoration: none; } .wp-block-latest-comments__comment-date { color: #999; font-size: 12px; font-size: 0.75rem; line-height: 1.5; margin-top: 7px; text-transform: capitalize; } .wp-block-latest-comments__comment-excerpt p:last-child { margin-bottom: 0; } /* Latest Posts */ .edit-post-visual-editor .wp-block-latest-posts.is-grid li { margin-bottom: 16px; } .wp-block[data-align="left"] ul { text-align: left; } .wp-block[data-align="right"] ul { text-align: right; } .wp-block[data-align="center"] ul { text-align: center; } .wp-block[data-align="center"] .wp-block-categories li span, .wp-block[data-align="center"] .wp-block-archives li span { display: inline-block; float: none; } .wp-block-categories li span, .wp-block-archives li span { border-radius: 45px; display: block; float: right; font-size: 15px; font-size: 0.9375rem; height: 40px; line-height: 40px; position: relative; text-align: center; width: 40px; } .wp-block-categories li span:after, .wp-block-archives li span:after { border-radius: 45px; background-color: #f6f6f6; content: ""; height: 100%; left: 0; opacity: 0.25; position: absolute; top: 0; width: 100%; z-index: -1; } /* COLOR */ .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button, .wp-block-button .wp-block-button__link { background-color: #222222; color: #fff; } .is-style-outline .wp-block-button__link, .is-style-outline .more-link, .is-style-outline .button { border: 1px solid #222222; background-color: transparent; color: #222222; } .is-style-outline .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:focus, .is-style-outline .more-link:hover, .is-style-outline .more-link:focus, .is-style-outline .button:hover, .is-style-outline .button:focus { border-color: transparent; } .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus { background-color: #ef3636; color: #fff; } .has-white-color { color: #fff; } .has-white-background-color { background-color: #fff; } .has-black-color { color: #000; } .has-black-background-color { background-color: #000; } .has-dark-gray-color { color: #666666; } .has-dark-gray-background-color { background-color: #666666; } .has-light-black-color { color: #111111; } .has-light-black-background-color { background-color: #111111; } .has-fade-black-color { color: #222222; } .has-fade-black-background-color { background-color: #222222; } .has-red-color { color: #ef3636; } .has-red-background-color { background-color: #ef3636; } .has-red-border-color { border-color: #ef3636; } .wp-block-pullquote.is-style-solid-color { background-color: #eef2f8; border: 0; } /* WHITE COLOR */ .wp-block-button .wp-block-button__link.has-white-color, .wp-block-pullquote.is-style-solid-color.has-white-color, .has-white-color { color: #fff; } /* BLACK COLOR */ .wp-block-button.is-style-outline .wp-block-button__link.has-black-color, .wp-block-pullquote.is-style-solid-color blockquote.has-black-color, .wp-block-button__link.is-style-outline .wp-block-button__link.has-black-color { color: #000; } .wp-block-button .wp-block-button__link.has-black-background-color { background-color: #000; } /* LIGHT RED COLOR */ .wp-block-button .wp-block-button__link.has-light-red-background-color, .wp-block-pullquote.is-style-solid-color.has-light-red-background-color { background-color: #fa6742; } .wp-block-button .wp-block-button__link.has-light-red-color, .wp-block-pullquote.is-style-solid-color blockquote.has-light-red-color { color: #fa6742; } /* BLACK COLOR */ .wp-block-button .wp-block-button__link.has-black-background-color, .wp-block-pullquote.is-style-solid-color.has-black-background-color { background-color: #444;; } .wp-block-button .wp-block-button__link.has-black-color, .wp-block-pullquote.is-style-solid-color blockquote.has-black-color { color: #444;; } /* DARK GRAY COLOR */ .wp-block-button .wp-block-button__link.has-dark-gray-background-color, .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color { background-color: #666666; } .wp-block-button .wp-block-button__link.has-dark-gray-color, .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color, .wp-block-pullquote blockquote.has-dark-gray-color { color: #666666; } /* LIGHT BLACK COLOR */ .wp-block-button .wp-block-button__link.has-light-black-background-color, .wp-block-pullquote.is-style-solid-color.has-light-black-background-color { background-color: #111111; } .wp-block-button .wp-block-button__link.has-light-black-color, .wp-block-pullquote.is-style-solid-color blockquote.has-light-black-color, .wp-block-pullquote blockquote.has-light-black-color { color: #111111; } /* FADE BLACK COLOR */ .wp-block-button .wp-block-button__link.has-fade-black-background-color, .wp-block-pullquote.is-style-solid-color.has-fade-black-background-color { background-color: #222222; } .wp-block-button .wp-block-button__link.has-fade-black-color, .wp-block-pullquote.is-style-solid-color blockquote.has-fade-black-color, .wp-block-pullquote blockquote.has-fade-black-color { color: #222222; } /* RED COLOR */ .wp-block-button .wp-block-button__link.has-red-background-color, .wp-block-pullquote.is-style-solid-color.has-red-background-color { background-color: #ef3636; } .wp-block-button .wp-block-button__link.has-red-color, .wp-block-pullquote.is-style-solid-color blockquote.has-red-color, .wp-block-pullquote blockquote.has-red-color { color: #ef3636; } .wp-block-button.is-style-outline .wp-block-button__link.has-red-border-color, .wp-block-pullquote.is-style-solid-color.has-red-border-color, .wp-block-button__link.is-style-outline .wp-block-button__link.has-red-border-color { border-color: #ef3636; } .edit-post-visual-editor a, .editor-block-list__block a, .wp-block-freeform.block-library-rich-text__tinymce a { color: #fa7268; } figure.wp-block-pullquote, .wp-block[data-align="right"] figure, .wp-block[data-align="left"] figure, .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { border-color: #ef3636; } .wc-block-grid.has-5-columns .wc-block-grid__product,.wc-block-grid.has-6-columns.alignfull .wc-block-grid__product,.wc-block-grid.has-5-columns .wc-block-grid__product,.wc-block-grid.has-6-columns.alignfull .wc-block-grid__product { font-size: inherit; }