/*--------------------------------------------------------------------------------- * Weaver Xtreme Theme - Version 4.0 * First created April 2018 * License: GNU General Public License v3 or later * License URI: //www.gnu.org/licenses/gpl-3.0.html * Copyright 2018, Bruce E. Wampler * * gutenberg-base-editor-style.css - Version 3.9.3 * * Provides base styling for Gutenberg Editor * Enqueue this style sheet in theme's enqueue_block_editor_assets action. * * This does not style the font-end view, but just the editor. * Front-end base styling for Gutenberg blocks provided by gutenberg-blocks.css * * Note that this file will loaded via the enqueue_block_editor_assets action, which loads * for the editor only * * --------------------------------------------------------------------------------- */ /* * Theme Styles found in Theme main style file * * Rather than loading the entire theme style sheet for the editor, the theme specific * styles relevant to page post content should be duplicated in these styles. Here, they * are mixed in with the .wp-block styles, but prefixed by .mce-content-body. * */ /* ====== Widths ====== */ /* * Front-end default width set by theme. This comes close to making the editor match the theme's 1100px * width fairly closely on a wide desktop view. * * This width does not account for sidebars, which might make the actual width on the front-end display smaller. */ /* editor block element controls for dark bg themes */ @media (min-width:9999px) { /* don't really use this code - it is an example for the tutorial */ .editor-block-mover__control, /* The move up-down block mover control */ .editor-block-settings-menu, /* The settings control on the right of a block */ .editor-inserter-with-shortcuts, /* The shortcut icons on the right when inserting a new block */ .editor-block-list__empty-block-inserter /* The circle-+ on a new block inserter */ { background: #C0C0C0; } .editor-block-list__insertion-point-inserter::before { /* insertion line - GB default background is #8f98a1 */ border: 1px solid #909090; background: #444444; } } /* end of example alt editor control styling */ /* Post Title */ .edit-post-visual-editor .editor-post-title, .edit-post-visual-editor .editor-block-list__block { max-width: 1100px; } .edit-post-visual-editor .editor-block-list__block[data-align="wide"] { /* editor-block-list__block + 200px works well */ max-width: 1300px; } .edit-post-layout { background-color: #FFF; box-sizing: border-box; } .editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit figure.is-video { /* video fullwidth embeds need this tweak */ width: 95%; } .edit-post-layout .editor-post-title textarea { /* tweak the title text box and textarea */ background-color: transparent; /* need to set to inherit so styling can use .editor-post-title only */ color: inherit; font: inherit; padding-bottom: 0px; margin-bottom: 0px; } .edit-post-layout .editor-post-title { color: inherit; background-color: transparent; font-weight: bold; margin-bottom: .5em; padding-bottom: 0; padding-top: 0; position: relative; } /* ======= blockquote ====== */ .mce-content-body blockquote { background: rgba(128, 128, 128, 0.1); border-left: 4px solid rgba(128, 128, 128, 0.4) !important; margin: 1.5em auto !important; overflow: auto; padding: 0.8em 1.5em 1em 1.2em; width: 90%; } .mce-content-body blockquote cite { font-style: normal; font-weight: bold; } .mce-content-body blockquote p { font-style: italic; font-size: 1em; margin-bottom: 0; } .mce-content-body em, .mce-content-body i { font-style: italic; } .mce-content-body cite { /* cite is supposed to be used only in a quote or blockquote */ border-width: 0; display: block; margin-left: 3em; margin-top: .5em; } .mce-content-body blockquote em, .mce-content-body blockquote i { font-style: italic; } /* ====== Cover Images ====== */ /* * Following styling assumes the theme treats block-cover-image as a fullwidth parallax image. * They won't display as full width in the editor, but will extend to margins. * */ .editor-block-list__block .wp-block-cover-image { height: 50vh; margin-left: auto; margin-right: auto; min-height: 400px; width: 100%; } .editor-block-list__block .wp-block-cover-image.alignfull { /* This makes a full area image */ left: 0; margin-left: auto; margin-right: auto; width: 100%; } /* ======= Heading elements -

-

====== */ .wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3, .wp-block-heading h4, .wp-block-heading h5, .wp-block-heading h6, .mce-content-body h1, .mce-content-body h2, .mce-content-body h3, .mce-content-body h4, .mce-content-body h5, .mce-content-body h6 { clear: both; color: inherit; font-family: inherit; clear: both; margin: 0; } .wp-block-heading h1, .wp-block-heading h2, .mce-content-body h1, .mce-content-body h2 { margin-top: 0.5em; } .wp-block-heading h1, .mce-content-body h1 { font-size: 262.5%; /* these sizes derived from theme */ line-height: 1; margin-bottom: 0.6em; } .wp-block-heading h2, .mce-content-body h2 { font-size: 200%; line-height: 1.1; margin-bottom: 0.7em; } .wp-block-heading h3, .mce-content-body h3 { font-size: 162.5%; line-height: 1.1; margin-bottom: 0.9em; } .wp-block-heading h4, .mce-content-body h4 { font-size: 125%; line-height: 1.1; margin-bottom: 1.0em; } .wp-block-heading h5, .mce-content-body h5 { font-size: 112.5%; line-height: 1.1; margin-bottom: 1.0em; } .wp-block-heading h6, .mce-content-body h6 { font-size: 100%; line-height: 1.1; margin-bottom: 1.0em; } /* ====== Images ====== */ /** * We will do minimal styling on images. * This will allow Gutenberg to style its images, and the theme to style non-Gutenberg images. * */ .mce-content-body img { max-width: 100%; } .mce-content-body img[class*="wp-image-"] { height: auto; max-width: 100%; } .mce-content-body img.size-full { max-width: 100% !important; width: auto; /* Prevent stretching of full-size images in IE8 */ } .mce-content-body img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .mce-content-body p img, .wp-caption { margin-top: 0.4em; } .mce-content-body img { background-color: transparent; margin-bottom: 1em; padding: 0; /* image border width */ } .wp-caption, img { background-color: transparent; border: none; height: auto; margin: 0; margin-bottom: 1em; max-width: 100%; padding: 0; /* image border width */ text-align: center; } .wp-caption { margin: 10px 20px 10px 10px; padding: 8px 3px 0px 3px; } .mce-content-body img.alignleft, .mce-content-body img.alignright, .mce-content-body img.aligncenter { margin-bottom: 1.625em; } /* ====== Lists ====== */ .mce-content-body dl, .mce-content-body dt, .mce-content-body dd, .mce-content-body ol, .mce-content-body ul, .mce-content-body li { margin: 0; padding: 0; word-wrap: break-word; } .mce-content-body p { margin: 0 0 1em 0; } .mce-content-body .atwk-slide .post ol, /* also support Weaver Show Slides */ .mce-content-body .atwk-slide .post ul, .mce-content-body .atw-post ol, .mce-content-body .atw-post ul, .mce-content-body ol, .mce-content-body ul { list-style-position: outside; } .mce-content-body .widget ol, .mce-content-body .widget ul { list-style-position: outside; margin-left: 1.0em; } .mce-content-body ol { list-style-type: decimal; } .mce-content-body ol ol { list-style: upper-alpha; } .mce-content-body ol ol ol { list-style: lower-roman; } .mce-content-body ol ol ol ol { list-style: lower-alpha; } .mce-content-body dl { margin: 0 1.5em; } .mce-content-body dt { font-weight: bold; } .mce-content-body dd { margin-left: 1.5em; margin-bottom: 1.5em; } .mce-content-body ul { list-style: disc outside none; } /* other elements */ .mce-content-body abbr, .mce-content-body acronym, .mce-content-body dfn { border-bottom: 1px dotted #666; } .mce-content-body address { display: block; font-style: italic; margin: 0 0 1.625em; } .mce-content-body big { font-size: 130%; } .mce-content-body code, .mce-content-body kbd, .mce-content-body tt, .mce-content-body var { color: inherit !important; background: none !important; font-family: 'Inconsolata', monospace; font-size: 1em; } .mce-content-body del { color: #222; } .mce-content-body pre { box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2); box-sizing: border-box; background: rgba(128, 128, 128, 0.1); border: 1px solid #aaaaaa; border-bottom-color: #cccccc; border-radius: 2px; font-family: 'Inconsolata', monospace; font-size: .8em; height: auto; margin: 0; margin-bottom: 1.5em; outline: none; overflow: auto; padding: 6px 10px; vertical-align: middle; width: 100%; word-wrap: break-word; white-space: pre-wrap; } .mce-content-body q { font-style: italic; } .mce-content-body ins { background: #ccc; color: #222; } .mce-content-body strong { font-weight: bold; } .mce-content-body sup, .mce-content-body sub { font-size: 90%; height: 0; line-height: 1; position: relative; vertical-align: baseline; } .mce-content-body sup { bottom: 1ex; } .mce-content-body sub { top: .5ex; } .mce-content-body var { font-style: italic; } .editor-block-list__block:not(.is-multi-selected) .wp-block-paragraph { background: transparent; } .mce-content-body label { font-family: inherit; font-size: 1em; /* 133% * 12 */ } /* tables */ .mce-content-body table, .mce-content-body caption, .mce-content-body tbody, .mce-content-body tfoot, .mce-content-body thead, .mce-content-body tr, .mce-content-body th, .mce-content-body td { word-wrap: break-word; } /* tables */ .mce-content-body table, .mce-content-body th, .mce-content-body td { border: 1px solid #d1d1d1; } .mce-content-body table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.75em; table-layout: fixed; /* Prevents HTML tables from becoming too wide */ width: 100%; } .mce-content-body th, .mce-content-body td { font-weight: normal; padding: 0.4375em; text-align: left; } .mce-content-body th { border-width: 0 1px 1px 0; font-weight: bold; padding: 4px 4px; text-align: left; } .mce-content-body td { border-width: 0 1px 1px 0; margin: 0; padding: 4px 4px; } /* hr +*/ .mce-content-body hr { background-color: #ccc; border: none; box-sizing: content-box; height: 4px; margin: 1.0em auto; max-width: 90%; width: 90%; } /* Text elements */ .mce-content-body p, .mce-content-body ul, .mce-content-body ol, .mce-content-body dl { font-weight: 300; } .mce-content-body p { margin-bottom: 1.5em; } .mce-content-body input[type=text], .mce-content-body textarea { background: inherit; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); border: 1px solid #ddd; color: #888; } .mce-content-body input[type=text]:focus, .mce-content-body textarea:focus { color: #333; } .mce-content-body textarea { padding-left: 3px; width: 98%; } .mce-content-body input[type=text] { padding: 3px; } /* Links */ .mce-content-body a { color: #01b; text-decoration: none; } .mce-content-body a:focus, .mce-content-body a:active, .mce-content-body a:hover { color: #b10; text-decoration: none; } /* Assistive text */ .assistive-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.625em; } .alignright { display: inline; float: right; margin-left: 1.625em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .mce-content-body .alignfull, .mce-content-body .alignwide, .mce-content-body .aligncenter { clear: both; } .mce-content-body .alignwide, .mce-content-body p.alighnwide { margin-left: -10% !important; margin-right: -10% !important; max-width: 120% !important; } .wp-block-text-columns.alignwide { margin-left: -5% !important; margin-right: -5% !important; max-width: 110% !important; } .editor-block-list__layout .editor-block-list__block[data-align="wide"] > .editor-block-list__block-edit figure { width: 100%; } .mce-content-body .alignwide img { margin-left: calc(50% - 45vw) !important; margin-right: calc(50% - 45vw) !important; max-width: 1000% !important; width: 90vw !important; } /* =HTML Elements */ /* =FONTS -------------------------------------------------- */ /* font family styling for in-line font styling on content elements * These are all local to Weaver Xtreme theme * */ .mce-content-body .font-sans-serif { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } .mce-content-body .font-arialBlack { font-family: "Arial Black", Gadget, Helvetica, sans-serif; } .mce-content-body .font-arialNarrow { font-family: "Arial Narrow", Arial, sans-serif; } .mce-content-body .font-impact { font-family: Impact, Haettenschweiler, Charcoal, "Arial Narrow Bold", sans-serif; } .mce-content-body .font-lucidaSans { font-family: "Lucida Sans", Geneva, Tahoma, sans-serif; } .mce-content-body .font-trebuchetMS { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; } .mce-content-body .font-verdana { font-family: Verdana, Geneva, Candara, sans-serif; } /* =serif ------------------------------------------------------ */ .mce-content-body .font-serif { font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; } .mce-content-body .font-cambria { font-family: Cambria, Didot, Georgia, "Times New Roman", "Times Roman", serif; } .mce-content-body .font-garamond { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", TimesNewRoman, "Times New Roman", serif; } .mce-content-body .font-georgia { font-family: Georgia, Times, "Times New Roman", serif; } .mce-content-body .font-lucidaBright { font-family: "Lucida Bright", "Book Antiqua", Georgia, serif; } .mce-content-body .font-palatino { font-family: "Palatino Linotype", Palatino, "Lucida Bright", "Book Antiqua", serif; } /* =sans-monospace -------------------------------------------------- */ .mce-content-body .font-monospace { font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; } .mce-content-body .font-consolas { font-family: Consolas, monaco,"Andale Mono", AndaleMono, monospace; } .mce-content-body .font-lucidaConsole { font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace; } .mce-content-body .font-papyrus { font-family: Papyrus, fantasy, cursive, serif; } .mce-content-body .font-comicSans { font-family: "Comic Sans MS", cursive,serif; } /* =google fonts ---------------------------------------------------- */ .mce-content-body .font-alegreya-sans { font-family: 'Alegreya Sans', sans-serif; } .mce-content-body .font-alegreya-sans-sc { font-family: 'Alegreya Sans SC', sans-serif; } .mce-content-body .font-alegreya { font-family: 'Alegreya', serif; } .mce-content-body .font-alegreya-sc { font-family: 'Alegreya SC', serif; } .mce-content-body .mce-content-body .font-roboto { font-family: 'Roboto', sans-serif; } .mce-content-body .font-roboto-condensed { font-family: 'Roboto Condensed', sans-serif; } .mce-content-body .font-roboto-mono { font-family: 'Roboto Mono', monospace; } .font-roboto-slab { font-family: 'Roboto Slab', serif; } .mce-content-body .font-source-sans-pro { font-family: 'Source Sans Pro', sans-serif; } .mce-content-body .font-source-serif-pro { font-family: 'Source Serif Pro', serif; } .mce-content-body .font-handlee { font-family: 'Handlee', cursive; } .mce-content-body .font-inconsolata { font-family: 'Inconsolata', monospace; } .mce-content-body .font-open-sans { font-family: 'Open Sans', sans-serif; } .mce-content-body .font-open-sans-condensed { font-family: 'Open Sans Condensed', sans-serif; } .mce-content-body .font-droid-sans { font-family: 'Droid Sans', sans-serif; } .mce-content-body .font-droid-serif { font-family: 'Droid Serif', serif; } .mce-content-body .font-exo-2 { font-family: 'Exo 2', sans-serif; } .mce-content-body .font-lato { font-family: 'Lato', sans-serif; } .mce-content-body .font-lora { font-family: 'Lora', serif; } .mce-content-body .font-arvo { font-family: 'Arvo', serif; } .mce-content-body .font-archivo-black { font-family: 'Archivo Black', sans-serif; } .mce-content-body .font-ultra { font-family: 'Ultra', serif; } .mce-content-body .font-vollkorn { font-family: 'Vollkorn', serif; } .mce-content-body .font-arimo { font-family: 'Arimo', sans-serif; } .mce-content-body .font-tinos { font-family: 'Tinos', serif; } .mce-content-body .wp-caption .wp-caption-text, .mce-content-body .gallery-caption { font-style: italic; line-height: 1.2em; margin: -5px 0 0 0 !important; padding: 0 5px 0 5px; position: relative; text-align: center; } .mce-content-body .wp-caption img { display: block; margin: 0 auto !important; max-width: 100%; } .mce-content-body a:hover img[class*="wp-image-"], .mce-content-body a:active img[class*="wp-image-"] { background: #eee; border-color: #bbb; } .mce-content-body .wp-caption a:focus img, .mce-content-body .wp-caption a:active img, .mce-content-body .wp-caption a:hover img { background: #fff; border-color: #ddd; } /* end */