/**
* Responsive styles for TinyMCE HTML content
*
* This stylesheet provides responsive styling for HTML content generated by TinyMCE editor
* across the platform (product descriptions, newsletters, blog posts, etc.)
*
* Loaded twice, from public/ so both consumers can reach it:
* - the storefront/admin, via the in src/app/layout.tsx
* - inside the TinyMCE editor iframe, via `content_css` + `body_class`
* (TinyClient.tsx) — an iframe cannot see the app's bundled CSS, which is
* why the editor used to look nothing like the rendered page.
*
* Every rule is scoped to .tinymce-content, which is the class on the rendered
* container AND on the editor's body element.
*/
:root {
--tmc-border: #e0e0e0;
--tmc-surface: #f5f5f5;
--tmc-muted: #666;
--tmc-link: #1976d2;
--tmc-anchor: #aaa;
--tmc-btn-bg: rgba(0, 0, 0, 0.07);
--tmc-btn-bg-hover: rgba(0, 0, 0, 0.13);
--tmc-btn-fg: #555;
--tmc-btn-border: rgba(0, 0, 0, 0.15);
}
/* Only /admin is dark; the storefront hardcodes light (ClientProviders.tsx).
Keyed on next-themes' .dark class, never prefers-color-scheme — an OS-level
media query darkened tables on light storefront pages. */
.dark {
--tmc-border: #424242;
--tmc-surface: #2a2a2a;
--tmc-muted: #b0b0b0;
--tmc-link: #64b5f6;
--tmc-anchor: #555;
--tmc-btn-bg: rgba(255, 255, 255, 0.08);
--tmc-btn-bg-hover: rgba(255, 255, 255, 0.15);
--tmc-btn-fg: #bbb;
--tmc-btn-border: rgba(255, 255, 255, 0.15);
}
/* Inside the TinyMCE iframe the editor body carries BOTH classes (see body_class
in TinyClient, and the runtime toggle that keeps it in sync with the theme).
On the rendered page .dark sits on , so this pair never matches there. */
.tinymce-content.dark {
color: #f3f4f6;
background-color: #141414;
}
.tinymce-content {
/* Base styles */
line-height: 1.6;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
/* Constrain only what actually overflows. This was `.tinymce-content *` with
`max-width: 100% !important`, which then needed three separate escape hatches
(table, .copy-code-btn, .heading-anchor) to undo itself. */
.tinymce-content * {
box-sizing: border-box;
}
.tinymce-content img,
.tinymce-content iframe,
.tinymce-content video,
.tinymce-content embed,
.tinymce-content object,
.tinymce-content pre {
max-width: 100%;
}
/* ==================== BLOCK ELEMENTS ==================== */
.tinymce-content p,
.tinymce-content div,
.tinymce-content h1,
.tinymce-content h2,
.tinymce-content h3,
.tinymce-content h4,
.tinymce-content h5,
.tinymce-content h6 {
display: block;
margin: 0.5rem 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
/* Prevent long URLs or text from breaking layout */
.tinymce-content a,
.tinymce-content span {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
/* ==================== IMAGES ==================== */
.tinymce-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1rem 0;
cursor: zoom-in;
}
/* Inline images */
.tinymce-content p img,
.tinymce-content span img {
display: inline-block;
vertical-align: middle;
margin: 0 0.25rem;
}
/* ==================== TABLES ==================== */
.tinymce-table-wrapper {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
max-width: 100%;
margin: 1.5rem 0;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--tmc-border);
box-sizing: border-box;
display: block;
}
.tinymce-content table {
/* Using min-width instead of width allows table to be wider than container (triggering scroll)
while still filling the container if content is small.
!important is used to override inline styles applied by TinyMCE (e.g. style="width: 500px") */
width: auto !important;
min-width: 100% !important;
height: auto !important;
/* Allow table to expand beyond container width for scrolling */
border-collapse: collapse;
margin: 0;
border: none; /* Border handling moved to wrapper/cells */
/* Remove fixed layout to allow content to dictate width (enabling scroll) */
table-layout: auto !important;
}
/* Ensure table parts behave correctly */
.tinymce-content table tbody {
display: table-row-group;
}
.tinymce-content table thead {
display: table-header-group;
}
.tinymce-content thead {
background-color: var(--tmc-surface);
}
.tinymce-content th,
.tinymce-content td {
padding: 0.75rem;
text-align: left;
border: 1px solid var(--tmc-border);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
.tinymce-content th {
font-weight: 600;
}
/* No right-edge fade hint: it keyed off prefers-color-scheme (the OS setting) while
these pages always render light, so a dark OS painted a black bar down every table.
The wrapper's own scrollbar already signals overflow. */
/* ==================== EMBEDDED CONTENT ==================== */
.tinymce-content iframe,
.tinymce-content video,
.tinymce-content embed,
.tinymce-content object {
max-width: 100%;
height: auto;
margin: 1rem 0;
}
/* Maintain aspect ratio for videos */
.tinymce-content iframe[src*="youtube"],
.tinymce-content iframe[src*="vimeo"] {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
/* ==================== LISTS ==================== */
.tinymce-content ul,
.tinymce-content ol {
padding-left: 2rem;
margin: 1rem 0;
}
.tinymce-content li {
margin: 0.5rem 0;
}
/* ==================== CODE BLOCKS ==================== */
.tinymce-content .code-block-wrapper {
position: relative;
margin: 1rem 0;
}
.tinymce-content .copy-code-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--tmc-btn-bg);
color: var(--tmc-btn-fg);
border: 1px solid var(--tmc-btn-border);
border-radius: 4px;
padding: 2px 8px;
font-size: 0.7rem;
cursor: pointer;
font-family: inherit;
transition: background 0.15s;
z-index: 1;
}
.tinymce-content .copy-code-btn:hover {
background: var(--tmc-btn-bg-hover);
}
.tinymce-content .code-block-wrapper pre {
margin: 0;
}
.tinymce-content pre {
background-color: var(--tmc-surface);
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
margin: 1rem 0;
}
.tinymce-content code {
background-color: var(--tmc-surface);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
}
.tinymce-content pre code {
background-color: transparent;
padding: 0;
}
/* ==================== BLOCKQUOTES ==================== */
.tinymce-content blockquote {
border-left: 4px solid var(--tmc-border);
padding-left: 1rem;
margin: 1rem 0;
font-style: italic;
color: var(--tmc-muted);
}
/* ==================== LINKS ==================== */
.tinymce-content a {
color: var(--tmc-link);
text-decoration: none;
}
.tinymce-content a:hover {
text-decoration: underline;
}
/* ==================== HEADING ANCHORS ==================== */
.tinymce-content h1,
.tinymce-content h2,
.tinymce-content h3,
.tinymce-content h4,
.tinymce-content h5,
.tinymce-content h6 {
scroll-margin-top: 80px;
}
.tinymce-content .heading-anchor {
opacity: 0;
margin-left: 8px;
text-decoration: none !important;
color: var(--tmc-anchor);
font-size: 0.8em;
vertical-align: middle;
transition: opacity 0.15s;
display: inline;
}
.tinymce-content h1:hover .heading-anchor,
.tinymce-content h2:hover .heading-anchor,
.tinymce-content h3:hover .heading-anchor,
.tinymce-content h4:hover .heading-anchor,
.tinymce-content h5:hover .heading-anchor,
.tinymce-content h6:hover .heading-anchor {
opacity: 1;
}
/* ==================== GRID LAYOUT ==================== */
.tinymce-content [data-type="grid-layout"] {
display: grid !important;
gap: 1rem; /* overridden by inline style */
margin: 0.75em 0 !important;
align-items: start;
}
.tinymce-content [data-type="grid-col"] {
/* Reset margins that the generic div rule injects — they break column alignment */
margin: 0 !important;
/* Prevent content wider than the track from stretching the column */
min-width: 0;
max-width: 100% !important;
overflow-wrap: break-word;
word-break: break-word;
}
/* Tablet (≤900px): 4-col → 2-col, 3-col → 2-col */
@media (max-width: 900px) {
.tinymce-content [data-type="grid-layout"][data-columns="4"],
.tinymce-content [data-type="grid-layout"][data-columns="3"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Large phone (≤600px): everything → 1-col */
@media (max-width: 600px) {
.tinymce-content [data-type="grid-layout"] {
grid-template-columns: 1fr !important;
}
.tinymce-content [data-type="grid-col"] {
padding-bottom: 0.5rem;
}
.tinymce-content [data-type="grid-col"]:last-child {
padding-bottom: 0;
}
}
/* ==================== SECTION BLOCK ==================== */
.tinymce-content [data-type="section-block"] {
border-radius: 4px;
overflow: hidden;
}
/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 600px) {
.tinymce-content {
font-size: 14px;
}
.tinymce-content h1 {
font-size: 24px;
margin: 1rem 0;
}
.tinymce-content h2 {
font-size: 20px;
margin: 0.9rem 0;
}
.tinymce-content h3 {
font-size: 18px;
margin: 0.8rem 0;
}
.tinymce-content h4 {
font-size: 16px;
margin: 0.7rem 0;
}
.tinymce-content h5,
.tinymce-content h6 {
font-size: 14px;
margin: 0.6rem 0;
}
.tinymce-content table {
font-size: 12px;
}
.tinymce-content th,
.tinymce-content td {
padding: 0.5rem;
}
.tinymce-content ul,
.tinymce-content ol {
padding-left: 1.5rem;
}
.tinymce-content pre {
padding: 0.75rem;
font-size: 12px;
}
.tinymce-content blockquote {
padding-left: 0.75rem;
margin: 0.75rem 0;
}
}
/* ==================== TABLET RESPONSIVE ==================== */
@media (min-width: 601px) and (max-width: 960px) {
.tinymce-content {
font-size: 15px;
}
.tinymce-content h1 {
font-size: 28px;
}
.tinymce-content h2 {
font-size: 24px;
}
.tinymce-content h3 {
font-size: 20px;
}
.tinymce-content table {
font-size: 13px;
}
}