File: /home/sescorpcl/public_html/wp-content/themes/onepress/assets/admin/editor-rtl.css
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/frontend/styles/editor.scss ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*------------------------------
2.1 Typography
------------------------------*/
:root {
--wp--preset--font-family--body: var(--wp--preset--font-family--open-sans);
--wp--preset--font-family--heading: var(--wp--preset--font-family--raleway);
}
html, body {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 16px;
}
@media (max-width: 991px) {
html {
font-size: 15px;
}
}
@media (max-width: 767px) {
html {
font-size: 14px;
}
}
body {
background: #ffffff;
}
.site {
background: #FFFFFF;
position: relative;
}
body, button, input, select, textarea {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7;
color: #777777;
}
pre,
code,
input,
textarea {
font: inherit;
}
::selection {
background: #000000;
color: #FFFFFF;
}
/*------------------------------
2.2 Links
------------------------------*/
a {
color: var(--wp--preset--color--primary, #03c4eb);
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: none;
color: #777777;
text-decoration: underline;
}
a:active, a:focus, a:hover {
outline: none;
}
/*------------------------------
2.3 Heading
------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 600;
margin-bottom: 15px;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
margin-top: 0;
color: #333333;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #333333;
text-decoration: none;
}
h1 {
line-height: 1.3;
font-size: 33px;
font-size: 2.0625rem;
}
@media (min-width: 768px) {
h1 {
font-size: 40px;
font-size: 2.5rem;
}
}
h1 span {
font-weight: bold;
}
h2 {
line-height: 1.2;
font-size: 25px;
font-size: 1.5625rem;
}
@media (min-width: 768px) {
h2 {
font-size: 32px;
font-size: 2rem;
}
}
h3 {
font-size: 20px;
font-size: 1.25rem;
font-weight: 600;
}
h4 {
font-size: 17px;
font-size: 1.0625rem;
margin-bottom: 12px;
}
h5 {
text-transform: uppercase;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 700;
}
h6 {
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
font-size: 0.75rem;
letter-spacing: 1px;
}
/*------------------------------
2.4 Base
------------------------------*/
ul, ol, dl, p, details, address, .vcard, figure, pre, fieldset, table, dt, dd, hr {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
margin-top: 0;
}
/*------------------------------
2.5 Content
------------------------------*/
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
b,
strong {
font-weight: bold;
}
blockquote {
clear: both;
margin: 20px 0;
}
blockquote p {
font-style: italic;
}
blockquote cite {
font-style: normal;
margin-bottom: 20px;
font-size: 13px;
}
dfn,
cite,
em,
i {
font-style: italic;
}
figure {
margin: 0;
}
address {
margin: 20px 0;
}
hr {
border: 0;
border-top: 1px solid #e9e9e9;
height: 1px;
margin-bottom: 20px;
}
tt,
kbd,
pre,
code,
samp,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
background-color: #e9e9e9;
padding: 5px 7px;
border-radius: 2px;
}
pre {
overflow: auto;
white-space: pre-wrap;
max-width: 100%;
line-height: 1.7;
margin: 20px 0;
padding: 20px;
}
details summary {
font-weight: bold;
margin-bottom: 20px;
}
details :focus {
outline: none;
}
abbr,
acronym,
dfn {
cursor: help;
font-size: 0.95em;
text-transform: uppercase;
border-bottom: 1px dotted #e9e9e9;
letter-spacing: 1px;
}
mark {
background-color: #fff9c0;
text-decoration: none;
}
small {
font-size: 82%;
}
big {
font-size: 125%;
}
ul, ol {
padding-right: 20px;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul li, ol li {
margin: 8px 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0 20px 20px;
}
/*------------------------------
2.6 Table
------------------------------*/
table {
width: 100%;
margin-bottom: 20px;
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
border: 1px solid #e9e9e9;
line-height: 1.42857;
padding: 5px;
vertical-align: middle;
}
table > thead > tr > th, table > thead > tr > td {
border-bottom-width: 2px;
}
table th {
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
}
/*------------------------------
2.7 Form
------------------------------*/
fieldset {
padding: 20px;
border: 1px solid #e9e9e9;
}
input[type=reset], input[type=submit], input[type=submit],
.pirate-forms-submit-button, .contact-form div.wpforms-container-full .wpforms-form .wpforms-submit {
cursor: pointer;
background: var(--wp--preset--color--primary, #03c4eb);
border: none;
display: inline-block;
color: #FFFFFF;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
text-align: center;
padding: 15px 23px 15px 23px;
border-radius: 2px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
margin: 3px 0;
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
input[type=reset]:hover, input[type=submit]:hover, input[type=submit]:hover,
.pirate-forms-submit-button:hover, .contact-form div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
opacity: 0.8;
background: var(--wp--preset--color--primary, #03c4eb);
border: none;
}
input[type=button]:hover, input[type=button]:focus, input[type=reset]:hover,
input[type=reset]:focus, input[type=submit]:hover, input[type=submit]:focus,
button:hover, button:focus {
cursor: pointer;
}
textarea {
resize: vertical;
}
select {
max-width: 100%;
overflow: auto;
vertical-align: top;
outline: none;
border: 1px solid #e9e9e9;
padding: 10px;
}
textarea:not(.editor-post-title__input),
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
padding: 10px;
max-width: 100%;
border: 0px;
font-size: 15px;
font-weight: normal;
line-height: 22px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
background-color: #f2f2f2;
border-bottom: 1px solid #fff;
box-sizing: border-box;
color: #000000;
}
textarea:not(.editor-post-title__input):focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
border-color: #EBEBEB;
border-bottom: 1px solid #fff !important;
background: #e9e9e9;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type=radio], input[type=checkbox] {
margin: 0 10px;
}
/*------------------------------
2.8 Accessibility
------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f8f9f9;
border-radius: 3px;
clip: auto !important;
color: var(--wp--preset--color--primary, #03c4eb);
display: block;
height: auto;
right: 5px;
line-height: normal;
padding: 17px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*------------------------------
2.8 Accessibility
------------------------------*/
/*------------------------------
2.9 Alignments
------------------------------*/
.alignleft {
display: inline;
float: right;
margin-left: 3.5em;
}
.alignright {
display: inline;
float: left;
margin-right: 3.5em;
}
.aligncenter {
clear: both;
display: block;
margin-right: auto;
margin-left: auto;
}
/*------------------------------
3.0 Clearings
------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
clear: both;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/*------------------------------
3.1 Infinite Scroll
------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block;
}
/*------------------------------
3.1 Helper.
------------------------------*/
.hide {
display: none;
}
.clearleft {
clear: right;
}
.break, h1,
h2,
h3,
h4,
h5,
h6, p, ul, ol, dl, blockquote, pre {
word-break: break-word;
word-wrap: break-word;
}
body.mce-content-body {
margin: 20px 40px;
font-size: 13px;
}
/* Page: 404
------------------------------*/
.error-404 .search-form,
.error-404 .widget {
margin-bottom: 40px;
}
.error-404 .widgettitle,
.error-404 .widget-title {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 13px;
font-weight: 700;
}
.error-404 ul {
padding-right: 0px;
}
.error-404 ul li {
list-style: none;
}
/* Page: Search
------------------------------*/
.search-results .hentry {
border-bottom: 1px solid #e9e9e9;
padding-bottom: 25px;
margin-bottom: 25px;
}
.search-results .entry-summary p {
margin-bottom: 0px;
}
.search-results .entry-header .entry-title {
font-size: 22px;
line-height: 1.5;
font-weight: 500;
}
.search-results .entry-header .entry-title a:hover {
text-decoration: none;
}
/* Entry Header
------------------------------*/
.entry-header .entry-title {
font-weight: 500;
text-transform: none;
letter-spacing: -0.6px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 25px;
line-height: 1.3;
}
@media screen and (min-width: 940px) {
.entry-header .entry-title {
font-size: 32px;
line-height: 1.5;
}
}
.entry-thumbnail {
margin-bottom: 30px;
}
.single .entry-header .entry-title {
margin-bottom: 10px;
}
.highlight {
color: var(--wp--preset--color--primary, #03c4eb);
}
/* Entry Content
------------------------------*/
.entry-content {
margin-bottom: 30px;
}
.entry-content blockquote {
padding: 30px;
position: relative;
background: #f8f9f9;
border-right: 3px solid var(--wp--preset--color--primary, #03c4eb);
font-style: italic;
}
.entry-content blockquote p {
margin: 0px;
}
/* Entry Stuff
------------------------------*/
.entry-meta {
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
font-weight: 600;
padding-bottom: 30px;
border-bottom: 1px solid #e9e9e9;
}
.entry-footer {
margin-bottom: 30px;
padding-top: 30px;
border-top: 1px solid #e9e9e9;
}
.entry-footer .cat-links,
.entry-footer .tags-links {
display: block;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
font-weight: 600;
margin-top: 5px;
}
.nav-links {
padding: 30px 0px;
border-right: none;
border-left: none;
margin-bottom: 50px;
flex-basis: 100%;
text-align: center;
}
.nav-links .nav-previous {
float: right;
}
.nav-links .nav-next {
float: left;
}
.nav-links a,
.nav-links .page-numbers {
background: #cccccc;
color: #FFFFFF;
padding: 12px 20px;
font-weight: 600;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
}
@media screen and (max-width: 940px) {
.nav-links a,
.nav-links .page-numbers {
padding: 6px 10px;
}
}
.nav-links a:hover, .nav-links a.current,
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
background: var(--wp--preset--color--primary, #03c4eb);
text-decoration: none;
}
.bypostauthor {
margin: 0;
}
/* Sticky Post
------------------------------*/
.sticky .entry-title {
padding-right: 20px;
position: relative;
}
.sticky .entry-title:after {
content: "\f276";
display: inline-block;
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
width: 12px;
height: 12px;
position: absolute;
right: 0px;
top: 2px;
font-size: 22px;
color: #aaaaaa;
}
/* WordPress caption style
------------------------------*/
.wp-caption {
max-width: 100%;
font-style: italic;
line-height: 1.35;
margin-bottom: 15px;
margin-top: 5px;
}
.wp-caption img[class*=wp-image-] {
display: block;
max-width: 100%;
}
.wp-caption .wp-caption-text {
margin: 10px 0px;
}
.wp-caption-text,
.entry-thumbnail-caption,
.cycle-caption {
font-style: italic;
line-height: 1.35;
font-size: 13px;
}
/* WordPress Gallery
------------------------------
* Grid-based layout (gap-aware) replaces the legacy
* `display: inline-block; max-width: 33.33%` packing. The old approach
* jammed every item edge-to-edge with no breathing room — small
* `size-thumbnail` images sat orphaned in the corner of each cell and
* adjacent rows touched. CSS Grid + `gap` makes spacing one source of
* truth and works in every WP-supported browser since 2017.
*
* Column count is driven by the WP-emitted `gallery-columns-N` class
* mapped to a `--gallery-cols` custom property — fewer rule duplicates
* than the old per-N max-width block, and lets a child theme tweak a
* single column count by setting the var.
*
* Image rule (`.gallery-icon img`) fills the cell width while keeping
* aspect ratio. Small thumbnails will upscale visibly; that's the
* trade for consistent visual rhythm. Authors who care about sharpness
* should pass `size="medium"` (or larger) to the [gallery] shortcode.
*/
.gallery {
display: grid;
grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
gap: 1rem;
margin-bottom: 1.5em;
}
.gallery-columns-1 {
--gallery-cols: 1;
}
.gallery-columns-2 {
--gallery-cols: 2;
}
.gallery-columns-3 {
--gallery-cols: 3;
}
.gallery-columns-4 {
--gallery-cols: 4;
}
.gallery-columns-5 {
--gallery-cols: 5;
}
.gallery-columns-6 {
--gallery-cols: 6;
}
.gallery-columns-7 {
--gallery-cols: 7;
}
.gallery-columns-8 {
--gallery-cols: 8;
}
.gallery-columns-9 {
--gallery-cols: 9;
}
.gallery-item {
margin: 0;
text-align: center;
}
.gallery-item .gallery-icon {
margin: 0;
}
.gallery-item .gallery-icon img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.gallery-caption {
display: block;
margin-top: 0.25em;
font-size: 13px;
line-height: 1.4;
}
/* Comments
------------------------------*/
#comments {
padding-top: 30px;
border-top: 1px solid #e9e9e9;
}
#comments .comments-title {
margin-bottom: 20px;
font-size: 18px;
line-height: 26px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
#comments .comment-list {
list-style: none;
padding-right: 0px;
}
#comments .comment-list .pingback {
border-bottom: 1px solid #e9e9e9;
padding: 20px 0;
margin: 0;
}
#comments .comment-list .pingback p {
margin: 0px;
}
#comments .comment-list .pingback:last-child {
margin-bottom: 40px;
}
#comments .comment-content.entry-content {
margin-bottom: 0px;
}
#comments .comment {
list-style: none;
margin: 30px 0;
}
#comments .comment .avatar {
width: 60px;
float: right;
border-radius: 3px;
}
#comments .comment .comment-wrapper {
margin-right: 90px;
padding: 25px 30px 15px 30px;
background: #f8f9f9;
position: relative;
}
#comments .comment .comment-wrapper:before {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #f6f7f9;
border-style: solid;
border-width: 0 0 10px 10px;
content: "";
height: 0;
right: -9px;
position: absolute;
top: 0;
width: 0;
}
#comments .comment .comment-wrapper .comment-meta .comment-time,
#comments .comment .comment-wrapper .comment-meta .comment-reply-link,
#comments .comment .comment-wrapper .comment-meta .comment-edit-link {
color: #aaaaaa;
text-transform: uppercase;
letter-spacing: 0.3px;
font-size: 11px;
}
#comments .comment .comment-wrapper .comment-meta .comment-time:hover,
#comments .comment .comment-wrapper .comment-meta .comment-reply-link:hover,
#comments .comment .comment-wrapper .comment-meta .comment-edit-link:hover {
color: var(--wp--preset--color--primary, #03c4eb);
}
#comments .comment .comment-wrapper .comment-meta .comment-time:after,
#comments .comment .comment-wrapper .comment-meta .comment-reply-link:after,
#comments .comment .comment-wrapper .comment-meta .comment-edit-link:after {
content: "/";
padding: 0px 5px;
}
#comments .comment .comment-wrapper .comment-meta a:last-child:after {
content: "";
}
#comments .comment .comment-wrapper .comment-meta cite .fn {
font-weight: bold;
font-style: normal;
margin-left: 5px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
}
#comments .comment .comment-wrapper .comment-meta cite span {
padding: 3px 10px;
background: #e9e9e9;
border-radius: 4px;
margin-left: 10px;
}
#comments .comment .comment-wrapper a {
text-decoration: none;
}
#comments .comment .children {
padding-right: 30px;
}
#comments .comment .children .children {
padding-right: 30px;
}
#comments .comment .children .children .children {
padding-right: 0px;
}
@media screen and (min-width: 940px) {
#comments .comment .children {
padding-right: 90px;
}
#comments .comment .children .children {
padding-right: 90px;
}
#comments .comment .children .children .children {
padding-right: 90px;
}
}
#comments .form-allowed-tags {
display: none;
}
#comments a {
text-decoration: none;
}
#comments a:hover {
text-decoration: underline;
}
.comment-respond textarea,
.comment-respond textarea {
width: 100%;
}
/* Comment Form
------------------------------*/
#respond {
padding-top: 20px;
}
#respond .comment-form label {
display: block;
margin-bottom: 4px;
}
#respond .form-allowed-tags {
font-size: 12px;
}
#respond .form-allowed-tags code {
background: none;
}
#respond .comment-reply-title {
font-size: 18px;
letter-spacing: 1.5px;
margin-bottom: 20px;
text-transform: uppercase;
}
#respond .comment-notes {
display: none;
}
#respond label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.full-screen .comments-area {
max-width: 1110px;
margin: 0 auto;
}
/* woocommerce
------------------------------*/
.woocommerce div.product form.cart .variations td.label {
color: #777;
}
/* . Gutenberg Editor - Block Editor */
.wp-block-gallery.is-layout-flex {
display: flex;
flex-wrap: wrap;
}
/*--------------------------------------------------------------
# File ownership: block editor ↔ frontend parity
--------------------------------------------------------------
This file is the single source of truth for "rules that must look
the same in both the rendered frontend and the block editor canvas."
The frontend wraps post content in `.entry-content`. The editor canvas
body is `.editor-styles-wrapper` (no `.entry-content` class). Because
WP injects this stylesheet into the editor iframe, but does not
inject a wrapping `.entry-content` class, any rule scoped to
`.entry-content X` from `_contents.scss` would NOT apply inside
the editor.
Pattern for new shared rules (preferred — group selectors):
.entry-content,
.editor-styles-wrapper {
figure { … }
}
Pattern for editor-only adjustments (max-width override, etc.):
.editor-styles-wrapper {
.wp-block[data-align="full"] { max-width: none; }
}
Block-specific visual rules (`.wp-block-*`) can use the bare class
because the class is specific enough to scope itself; both contexts
match without prefix gymnastics.
Iframe body class injection (e.g. setting
`editor_settings['body_class'] = 'entry-content'`) is intentionally
NOT used — the API has shifted across WP 5.x/6.x and is brittle.
Selector grouping is the stable approach.
Per the additive-only mandate: never delete a mirror rule here even
if the source `.entry-content X` rule in `_contents.scss` is changed
— child themes may already target the `.editor-styles-wrapper` form.
--------------------------------------------------------------*/
.single-post .content-inner {
margin-right: auto;
margin-left: auto;
}
.single-post .right-sidebar .content-inner {
margin-right: 0px;
}
.single-post .left-sidebar .content-inner {
margin-left: 0px;
}
.entry-content ul,
.entry-content ol {
margin: 1.5em auto;
list-style-position: outside;
}
.wp-block-list li {
margin-right: 1em;
margin-bottom: 6px;
}
.wp-block-list li li {
margin-right: 2.5em;
}
.wp-block-list li ol, .wp-block-list li ul {
margin-top: 0px;
margin-right: 0px;
}
.entry-content li {
margin-right: 2.5em;
margin-bottom: 6px;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
margin: 0 auto;
}
.entry-content ul ul li,
.entry-content ol ol li,
.entry-content ul ol li,
.entry-content ol ul li {
margin-right: 0;
}
/*--------------------------------------------------------------
# Block Color Palette Colors
--------------------------------------------------------------*/
.has-strong-blue-color {
color: #0073aa;
}
.has-strong-blue-background-color {
background-color: #0073aa;
}
.has-lighter-blue-color {
color: #229fd8;
}
.has-lighter-blue-background-color {
background-color: #229fd8;
}
.has-very-light-gray-color {
color: #eee;
}
.has-very-light-gray-background-color {
background-color: #eee;
}
.has-very-dark-gray-color {
color: #444;
}
.has-very-dark-gray-background-color {
background-color: #444;
}
/*--------------------------------------------------------------
# Phase 1: Editor wrapper parity
--------------------------------------------------------------
The editor canvas (`.editor-styles-wrapper`) does not get the
`.entry-content` wrapper class that frontend templates use, so
any rule scoped to `.entry-content` will not apply in the editor.
Mirror those rules below with `.editor-styles-wrapper` so the
editor inherits the same typography baseline as the frontend.
Global rules from `_document.scss` (body font, h1-h6, links) already
apply inside the editor iframe because they target bare HTML tags;
this section only mirrors the wrapper-scoped rules from `_contents.scss`.
Selector discipline: every rule below stays under either
`.editor-styles-wrapper` (editor-only) or `.entry-content`
(already shipped). Nothing leaks to bare element selectors.
--------------------------------------------------------------*/
.editor-styles-wrapper blockquote {
padding: 30px;
position: relative;
background: #f8f9f9;
border-right: 3px solid var(--wp--preset--color--primary, #03c4eb);
font-style: italic;
}
.editor-styles-wrapper blockquote p {
margin: 0;
}
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
margin: 1.5em auto;
list-style-position: outside;
}
.editor-styles-wrapper li {
margin-right: 2.5em;
margin-bottom: 6px;
}
.editor-styles-wrapper ul ul,
.editor-styles-wrapper ol ol,
.editor-styles-wrapper ul ol,
.editor-styles-wrapper ol ul {
margin: 0 auto;
}
.editor-styles-wrapper ul ul li,
.editor-styles-wrapper ol ol li,
.editor-styles-wrapper ul ol li,
.editor-styles-wrapper ol ul li {
margin-right: 0;
}
.editor-styles-wrapper code,
.editor-styles-wrapper pre {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 0.9em;
}
.editor-styles-wrapper code {
background: #f8f9f9;
padding: 0.1em 0.4em;
border-radius: 2px;
}
.editor-styles-wrapper pre {
background: #f8f9f9;
padding: 1em;
border-radius: 2px;
overflow-x: auto;
line-height: 1.5;
}
.editor-styles-wrapper a {
color: var(--wp--preset--color--primary, #03c4eb);
}
.editor-styles-wrapper a:hover {
color: #777777;
}
/*--------------------------------------------------------------
# Phase 2: Block-specific rules (.wp-block-*)
--------------------------------------------------------------
Selectors `.wp-block-*` are block-specific enough to apply in both
the editor canvas (.editor-styles-wrapper) and the rendered frontend
(.entry-content) without leaking to non-block content. Each rule
below targets a specific block class so child themes can override
individually.
Alignment overrides (.alignwide / .alignfull) that only matter in
the editor canvas (which is iframe-constrained) are scoped inside
`.editor-styles-wrapper` to avoid changing frontend layout.
--------------------------------------------------------------*/
.wp-block-image {
margin: 1.5em auto;
}
.wp-block-image img {
display: block;
max-width: 100%;
height: auto;
}
.wp-block-image figcaption {
font-style: italic;
font-size: 13px;
line-height: 1.35;
text-align: center;
margin: 10px 0;
color: #777777;
}
.wp-block-image.alignleft {
float: right;
margin: 0 0 1em 1.5em;
}
.wp-block-image.alignright {
float: left;
margin: 0 1.5em 1em 0;
}
.wp-block-image.aligncenter {
margin-right: auto;
margin-left: auto;
}
.wp-block-gallery {
margin: 1.5em auto;
}
.wp-block-gallery .wp-block-image figcaption {
font-size: 12px;
}
.wp-block-button {
margin-bottom: 1em;
}
.wp-block-button .wp-block-button__link {
background-color: var(--wp--preset--color--primary, #03c4eb);
color: #ffffff;
padding: 12px 24px;
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease;
}
.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus {
background-color: var(--wp--preset--color--secondary, #00aeef);
color: #ffffff;
text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--primary, #03c4eb);
border: 2px solid var(--wp--preset--color--primary, #03c4eb);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus {
background-color: var(--wp--preset--color--primary, #03c4eb);
color: #ffffff;
}
.wp-block-pullquote {
border-top: 4px solid currentColor;
border-bottom: 4px solid currentColor;
margin: 1.5em 0;
padding: 3em 0;
text-align: center;
font-style: italic;
}
.wp-block-pullquote blockquote {
background: transparent;
border-right: 0;
padding: 0;
}
.wp-block-pullquote cite {
font-size: 13px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1.5px;
display: block;
margin-top: 1em;
}
.wp-block-pullquote.is-style-solid-color {
border-top: 0;
border-bottom: 0;
padding: 3em 1.5em;
}
.wp-block-cover {
margin: 1.5em auto;
min-height: 300px;
}
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover-text {
color: #ffffff;
padding: 1.5em;
}
.wp-block-cover .wp-block-cover-text {
font-size: 1.5em;
}
.wp-block-columns {
margin: 1.5em 0;
gap: 30px;
}
@media (max-width: 991px) {
.wp-block-columns {
flex-wrap: wrap;
}
}
.wp-block-column {
margin-bottom: 30px;
}
.wp-block-group {
margin: 1.5em 0;
}
.wp-block-group.has-background {
padding: 1.5em;
}
.wp-block-table {
margin: 1.5em auto;
}
.wp-block-table table {
border-collapse: collapse;
width: 100%;
}
.wp-block-table td,
.wp-block-table th {
padding: 0.6em 0.8em;
border: 1px solid #e9e9e9;
}
.wp-block-table th {
background: #f8f9f9;
font-weight: 600;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background: #f8f9f9;
}
.wp-block-separator {
margin: 3em auto;
border: none;
border-bottom: 2px solid currentColor;
max-width: 100px;
}
.wp-block-separator.is-style-wide {
max-width: 100%;
}
.wp-block-separator.is-style-dots {
border-bottom: none;
text-align: center;
max-width: none;
}
.wp-block-separator.is-style-dots::before {
padding-right: 0;
font-size: 30px;
letter-spacing: 1em;
}
.wp-block-embed {
margin: 1.5em auto;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
position: relative;
padding-top: 56.25%;
height: 0;
overflow: hidden;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.wp-block-embed.is-type-video .wp-block-embed__wrapper object,
.wp-block-embed.is-type-video .wp-block-embed__wrapper embed {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.wp-block-code,
.wp-block-preformatted {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 0.9em;
background: #f8f9f9;
padding: 1em;
border-radius: 2px;
overflow-x: auto;
line-height: 1.5;
margin: 1.5em 0;
}
.wp-block-spacer {
display: block;
clear: both;
}
/*--------------------------------------------------------------
# Content size + alignment — frontend rules (theme.json driven)
--------------------------------------------------------------
Width tokens are consumed from theme.json's CSS variables (emitted
by WP on `:root`) so updates to theme.json `layout.contentSize` /
`layout.wideSize` propagate automatically. The Customizer mod
`single_layout_content_width` overrides `--wp--style--global--content-size`
at runtime via inline CSS from `onepress_custom_inline_style()`.
SCSS literal fallbacks (`800px` / `1230px`) cover sites that strip
theme.json (child themes, future cleanups). Defaults match theme.json's
declared values.
Scoped strictly to `.entry-content > X` so wide/full classes used
inside front-page sections / widgets / etc. are untouched.
Width targets:
- regular content → `--wp--style--global--content-size` (default 1110px)
- alignwide → `--wp--style--global--wide-size` (default 1230px)
- alignfull → 100vw, edge-to-edge via negative-viewport margins
Per the 2.4.1 release: alignwide widens from 1110 → 1230 to match
theme.json's `wideSize` declaration. Regular content gains an explicit
cap at content-size — invisible on default sites (container is already
~1110px) but narrows hand-coded oversized content on fullwidth templates.
--------------------------------------------------------------*/
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
max-width: var(--wp--style--global--content-size, 1110px);
margin-right: auto;
margin-left: auto;
}
.page-template-template-fullwidth-stretched .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.page-template-template-fullwidth .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
max-width: none;
}
.entry-content > .alignwide,
.entry-content > .wp-block.alignwide {
width: auto;
max-width: 100vw;
margin-right: max(50% - 50vw, 50% - var(--wp--style--global--wide-size, 1230px) / 2);
margin-left: max(50% - 50vw, 50% - var(--wp--style--global--wide-size, 1230px) / 2);
clear: both;
}
.entry-content > .alignfull,
.entry-content > .wp-block.alignfull {
width: auto;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
clear: both;
}
.entry-content > .alignleft,
.entry-content > .wp-block.alignleft {
margin-right: calc(50% - 50vw);
}
.entry-content > .alignright,
.entry-content > .wp-block.alignright {
margin-left: calc(50% - 50vw);
}
.entry-content > .wp-block-image.alignfull img,
.entry-content > .alignfull img,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-cover.alignfull .wp-block-cover__inner-container {
width: 100%;
max-width: 100%;
}
/*--------------------------------------------------------------
# Editor-only overrides
--------------------------------------------------------------
Mirror the frontend alignment on the editor canvas. The editor is
iframe-constrained — alignfull can't truly hit 100vw inside the
iframe — but blocks must visually expand past the
`.editor-styles-wrapper` max-width so authors can see the alignment.
Specificity: `.editor-styles-wrapper` + a wp-block class is enough
to beat Gutenberg's stock alignment CSS without `!important`.
--------------------------------------------------------------*/
.editor-styles-wrapper .wp-block:not([data-align=wide]):not([data-align=full]):not([data-align=left]):not([data-align=right]):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
max-width: var(--wp--style--global--content-size, 1110px);
margin-right: auto;
margin-left: auto;
}
.editor-styles-wrapper .wp-block[data-align=wide],
.editor-styles-wrapper .wp-block.alignwide {
max-width: var(--wp--style--global--wide-size, 1230px);
margin-right: auto;
margin-left: auto;
}
.editor-styles-wrapper .wp-block[data-align=full],
.editor-styles-wrapper .wp-block.alignfull {
max-width: none;
margin-right: 0;
margin-left: 0;
width: 100%;
}
.editor-styles-wrapper .wp-block[data-align=full] > *,
.editor-styles-wrapper .wp-block.alignfull > * {
max-width: none;
}
.editor-styles-wrapper .wp-block[data-align=left],
.editor-styles-wrapper .wp-block.alignleft {
float: right;
margin: 0 0 1em 1.5em;
max-width: 50%;
}
.editor-styles-wrapper .wp-block[data-align=right],
.editor-styles-wrapper .wp-block.alignright {
float: left;
margin: 0 1.5em 1em 0;
max-width: 50%;
}
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-preformatted {
border: 0;
}