/*---------------------------------------------------------------------------------
* 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 */