WordPress/wp-content/themes/twentynineteen/style-editor-frame.css

61 lines
2.4 KiB
CSS

/*!
Twenty Nineteen Editor Frame Styles
NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css.
*/
/** === Includes === */
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
/** === Title === */
body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
background: #767676;
content: "\020";
display: block;
height: 2px;
margin: 1rem 0;
width: 1em;
}
body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
width: 2.8125em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
position: relative;
top: 0.5em;
}
body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-title__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.8125em;
}
/** === Default Appender === */
body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-size: 22px;
}
/** === Off-Center Content === */
@media only screen and (min-width: 768px) {
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender,
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] {
width: calc( 125% + 88px + 28px);
position: relative;
left: calc( -12.5% - 46px - 14px);
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="right"] {
max-width: 125%;
}
}