@richscripts/richtexteditor 2.4.2 → 2.5.1

package/richtexteditor/rte_theme_default.css

@@ -8,10 +8,12 @@
     --rte-icon-color: #5F6368;       /* toolbar/dialog icon color       */
     --rte-surface: #ffffff;          /* editor + panel background       */
     --rte-surface-raised: #ffffff;   /* toolbar / status bar background */
-    --rte-border: #dddddd;           /* chrome borders                  */
+    --rte-border: #d0d7de;           /* chrome borders                  */
     --rte-text: #333333;             /* chrome text                     */
     --rte-hover-bg: #f2f2f2;         /* button hover background         */
     --rte-accent: #1d67ba;           /* active/selected accent          */
+    --rte-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06); /* container elevation */
+    --rte-focus-ring: 0 0 0 3px rgba(29,103,186,.14); /* focus halo            */
 }
 
 rte-toolbar-button, rte-toolbar-splitbutton, rte-toolbar-dropdown, rte-toolbar-arrowbutton, rte-toolbar-dropdown-input, rte-toolbar-dropdown-arrow {
@@ -23,16 +25,20 @@ rte-toolbar-button, rte-toolbar-splitbutton, rte-toolbar-dropdown, rte-toolbar-a
     flex-direction: column !important;
     position: relative !important;
     box-sizing: border-box !important;
-    border: 1px solid #ddd;
-    background-color: #fff;
+    border: 1px solid var(--rte-border, #d0d7de);
+    background-color: var(--rte-surface, #fff);
+    /* A flat hairline box reads as an unstyled control; a hint of elevation is
+       what separates it from the page it sits on. */
+    box-shadow: var(--rte-shadow, none);
+    transition: border-color .15s ease, box-shadow .15s ease;
     user-select: none;
     min-height: 200px;
     min-width: 200px;
-    font-family: -apple-system, Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 .richtexteditor, .rte-absolute, .rte-fixed, rte-dropdown-panel {
-    font-family: -apple-system, Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-size: 14px;
 }
 
@@ -283,11 +289,11 @@ rte-codebox {
        previously hardcoded #d5d5d5 stayed light-gray on the dark surface. */
     border: 1px solid var(--rte-border, #d5d5d5);
     border-radius: 10px;
-    /* Deliberately NOT overflow:hidden. Toolbar dropdown panels
-       (rte-dropdown-panel) are absolutely positioned children of this element,
-       so clipping here cut off any panel anchored near the right edge: Line
-       Height rendered only the "1" of "100%", Paragraphs and Document Outline
-       lost 91px. Corner rounding does not depend on this clip - the toolbar and
+    /* Deliberately NOT overflow:hidden. Toolbar dropdown panels
+       (rte-dropdown-panel) are absolutely positioned children of this element,
+       so clipping here cut off any panel anchored near the right edge: Line
+       Height rendered only the "1" of "100%", Paragraphs and Document Outline
+       lost 91px. Corner rounding does not depend on this clip - the toolbar and
        status bar round their own corners (see the rule below). */
     overflow: visible;
     background-clip: padding-box;
@@ -1435,7 +1441,12 @@ rte-dropdown-panel.rte-panel-insertimage rte-tabui-toolbar, rte-dropdown-panel.r
 }
 
     .rte-panel-general rte-dialog-header {
-        margin: -10px -15px 10px;
+        /* Cancel exactly the panel's own padding, whatever it is. A hard -15px
+           here made the header wider than the panel that contains it. */
+        margin: calc(var(--rte-panel-pad, 8px) * -1) calc(var(--rte-panel-pad, 8px) * -1) 10px;
+        padding: 12px 14px;
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
     }
 
 rte-inserttable-panel {
@@ -1576,14 +1587,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[rte-tooltip]:hover
     border-color: rgba(0,0,0,.08) !important;
 }
 
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-item-color[role="menuitem"]:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[role="menuitem"]:focus-visible {
-    outline: 2px solid #1a73e8 !important;
-    outline-offset: 2px !important;
-    transform: scale(1.15) !important;
-    position: relative !important;
-    z-index: 2 !important;
-}
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-item-color[role="menuitem"]:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[role="menuitem"]:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 2px !important;
+    transform: scale(1.15) !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more,
@@ -1605,14 +1616,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:hover {
     border: 0 !important;
 }
 
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto:focus-visible,
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:focus-visible {
-    outline: 2px solid #1a73e8 !important;
-    outline-offset: 1px !important;
-    background: #f1f5f9 !important;
-}
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 1px !important;
+    background: #f1f5f9 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more rte-dialog-item-label,
@@ -1992,21 +2003,21 @@ rte-menuspliter {
     margin: 3px 0px 3px 28px;
 }
 
-/* The panel is shrink-to-fit, so its width is decided by its widest preview —
-   "Headline 1" at 32px — and measured 187px of text inside 187px of space:
-   ZERO tolerance. Whenever the font used at layout time is a hair narrower than
-   the one finally painted (a fallback still in place during a webfont swap, a
-   different platform's metrics), the label overflows and the last character is
-   cut off. Reported from the wild with "Headline 1" clipped.
-
-   A min-width gives the panel slack that does not depend on font metrics
-   matching to the pixel; the previews are nowrap, so slack is the only thing
-   that can absorb the variance. */
-.rte-dropdown-panel.rte_command_paragraphs,
-rte-dropdown-panel.rte_command_paragraphs {
-    min-width: 292px;
-}
-
+/* The panel is shrink-to-fit, so its width is decided by its widest preview —
+   "Headline 1" at 32px — and measured 187px of text inside 187px of space:
+   ZERO tolerance. Whenever the font used at layout time is a hair narrower than
+   the one finally painted (a fallback still in place during a webfont swap, a
+   different platform's metrics), the label overflows and the last character is
+   cut off. Reported from the wild with "Headline 1" clipped.
+
+   A min-width gives the panel slack that does not depend on font metrics
+   matching to the pixel; the previews are nowrap, so slack is the only thing
+   that can absorb the variance. */
+.rte-dropdown-panel.rte_command_paragraphs,
+rte-dropdown-panel.rte_command_paragraphs {
+    min-width: 292px;
+}
+
 .rte_command_paragraphs rte-toolbar-dropdown-item div {
     font-size: 15px;
     margin: 0px;
@@ -2388,6 +2399,31 @@ rte-content::-webkit-scrollbar-thumb:hover {
 }
 
 .rte-dialog-browser,
+/* Upload failure notice. Deliberately a banner above the grid rather than a
+   replacement for it: a rejected file used to blank the whole browser, leaving
+   the dialog reading "0 items" with an error while the footer still said an
+   image was ready to insert. */
+.rte-gallery-browser-error {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #9f1239;
+    background: #fff1f2;
+    box-shadow: inset 0 0 0 1px rgba(190, 18, 60, 0.18);
+}
+
+/* Accepted-format hint under the dialog subtitle. */
+.rte-dialog-browser-accept {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #64748b;
+}
+
 .rte-gallery-browser {
     display: flex;
     flex-direction: column;
@@ -2580,25 +2616,25 @@ rte-content::-webkit-scrollbar-thumb:hover {
     flex-wrap: wrap;
 }
 
-/* The toolbar is a flex row whose children are these two groups. Without a
-   display on the groups themselves the buttons stack vertically and the row
-   collapses to the width of its widest label -- which is exactly what shipped
-   when these rules went missing. */
-.rte-gallery-browser-toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-}
-
-.rte-gallery-browser-toolbar-group-right {
-    flex: 0 1 auto;
-    justify-content: flex-end;
-    margin-left: auto;
-}
-
+/* The toolbar is a flex row whose children are these two groups. Without a
+   display on the groups themselves the buttons stack vertically and the row
+   collapses to the width of its widest label -- which is exactly what shipped
+   when these rules went missing. */
+.rte-gallery-browser-toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+}
+
+.rte-gallery-browser-toolbar-group-right {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
 .rte-gallery-browser-button {
     border: 1px solid rgba(116, 135, 162, 0.28);
     border-radius: 999px;
@@ -2733,44 +2769,44 @@ rte-content::-webkit-scrollbar-thumb:hover {
     overflow: hidden;
 }
 
-/* Folders sit in their own container above the image listbox, so the two are
-   separated by a rule rather than running together in one grid. */
-.rte-gallery-browser-grid-folders {
-    margin-bottom: 14px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid rgba(116, 135, 162, 0.16);
-}
-
-/* Folder tiles have no image to show, so the icon is drawn in CSS. The plugin
-   emits an empty div for it -- with no rule here the tile renders blank. */
-.rte-gallery-browser-thumbnail-folder {
-    background: linear-gradient(180deg, #fffaea 0%, #fdeec4 100%);
-    border-color: rgba(197, 158, 61, 0.32);
-}
-
-.rte-gallery-browser-folder-icon {
-    position: relative;
-    width: 60px;
-    height: 42px;
-    border: 1px solid rgba(178, 138, 45, 0.7);
-    border-radius: 7px;
-    background: linear-gradient(180deg, #ffe6a1 0%, #f3c957 100%);
-    box-shadow: 0 8px 16px rgba(140, 100, 20, 0.18);
-}
-
-.rte-gallery-browser-folder-icon:before {
-    content: "";
-    position: absolute;
-    left: 7px;
-    top: -9px;
-    width: 25px;
-    height: 13px;
-    border: 1px solid rgba(178, 138, 45, 0.7);
-    border-bottom: 0;
-    border-radius: 6px 6px 0 0;
-    background: linear-gradient(180deg, #fff1c4 0%, #f8d97c 100%);
-}
-
+/* Folders sit in their own container above the image listbox, so the two are
+   separated by a rule rather than running together in one grid. */
+.rte-gallery-browser-grid-folders {
+    margin-bottom: 14px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgba(116, 135, 162, 0.16);
+}
+
+/* Folder tiles have no image to show, so the icon is drawn in CSS. The plugin
+   emits an empty div for it -- with no rule here the tile renders blank. */
+.rte-gallery-browser-thumbnail-folder {
+    background: linear-gradient(180deg, #fffaea 0%, #fdeec4 100%);
+    border-color: rgba(197, 158, 61, 0.32);
+}
+
+.rte-gallery-browser-folder-icon {
+    position: relative;
+    width: 60px;
+    height: 42px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-radius: 7px;
+    background: linear-gradient(180deg, #ffe6a1 0%, #f3c957 100%);
+    box-shadow: 0 8px 16px rgba(140, 100, 20, 0.18);
+}
+
+.rte-gallery-browser-folder-icon:before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: -9px;
+    width: 25px;
+    height: 13px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-bottom: 0;
+    border-radius: 6px 6px 0 0;
+    background: linear-gradient(180deg, #fff1c4 0%, #f8d97c 100%);
+}
+
 .rte-gallery-browser-thumbnail-image {
     max-width: 100%;
     max-height: 100%;
@@ -3601,10 +3637,16 @@ rte-dialog-outer rte-dialog-header-close {
 
 rte-dropdown-panel {
     gap: 2px;
-    padding: 8px !important;
+    /* Published as a variable so the full-bleed header below can cancel
+       exactly this much padding instead of guessing at it. */
+    --rte-panel-pad: 8px;
+    padding: var(--rte-panel-pad) !important;
     max-width: min(520px, calc(100vw - 20px));
     max-height: min(420px, calc(100vh - 76px));
-    overflow: auto;
+    /* Vertical only: a tall panel should scroll, but nothing in a panel is
+       meant to be reachable sideways - a horizontal bar here is always a bug. */
+    overflow-x: hidden;
+    overflow-y: auto;
     scrollbar-width: thin;
 }
 
@@ -4756,8 +4798,8 @@ rte-dropdown-panel .rte-dialog-button:active {
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton svg {
     display: block !important;
     flex: 0 0 auto;
-    width: 20px !important;
-    height: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
     margin: 0 !important;
     align-self: center !important;
     color: currentColor;
@@ -4775,10 +4817,10 @@ rte-dropdown-panel .rte-dialog-button:active {
     pointer-events: none;
 }
 
-.rte-modern rte-dropdown-panel rte-toolbar-button svg {
-    width: 20px !important;
-    height: 20px !important;
-}
+.rte-modern rte-dropdown-panel rte-toolbar-button svg {
+    width: 20px !important;
+    height: 20px !important;
+}
 
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
@@ -4916,3 +4958,26 @@ rte-dialog-float rte-dialog-inner {
     max-height: calc(100vh - max(104px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
     overflow: auto;
 }
+
+/* WCAG 1.4.10 Reflow: rte-bottom
+   The editor footer is a flex row (word count, tag list, "powered by", resize
+   grip). With flex-wrap:nowrap and non-shrinking children it overflowed the
+   editor AND the viewport at 320px - measured on the live home page as document
+   scrollWidth 349 against a 320 viewport - which is the horizontal scrolling
+   WCAG 1.4.10 (AA) prohibits. Wrapping keeps every control reachable instead of
+   clipping it. Appended rather than merged into the existing rule because tier
+   themes have diverged and a surgical edit risks corrupting them. */
+rte-bottom { flex-wrap: wrap; }
+rte-bottom > * { min-width: 0; }
+/* Editor focus state. rte.js has always toggled .rte-is-focused/.rte-is-blurred
+   on the container, but nothing ever styled them, so focusing the editor gave no
+   visual feedback at all. The halo mirrors the focus treatment of the individual
+   controls, so the whole component behaves consistently. */
+.richtexteditor.rte-is-focused {
+    border-color: var(--rte-accent, #1d67ba);
+    box-shadow: var(--rte-shadow, none), var(--rte-focus-ring, none);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .richtexteditor { transition: none; }
+}

package/richtexteditor/runtime/richtexteditor_content.css

@@ -1,21 +1,27 @@
 
 /* TODO: use @import for your css */
 
+/* This stylesheet is the customer-editable layer for the EDITING SURFACE.
+   It loads between the editor's built-in defaults and the editor's own
+   mechanics rules, so anything set here wins over the defaults. Values below
+   intentionally match those defaults - edit freely to match your own site. */
+
 body {
 	overflow-y: hidden;
-	padding: 0px;
-	margin: 0px
+	/* Writing gutters come from RTE_DefaultConfig.editablePadding* (applied
+	   inline, so setting padding here would have no effect). */
+	margin: 0;
 }
 
 body, table, p, div {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	color: #414141;
-	font-size: 14px;
-	line-height: 1.6;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	color: #1f2328;
+	font-size: 16px;
+	line-height: 1.7;
 }
 
 a {
-	color: #377dff;
+	color: #0969da;
 	text-decoration: none;
 	-webkit-transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s;
 	-moz-transition: color 0.2s ease 0s, text-decoration 0.2s ease 0s;
@@ -24,8 +30,8 @@ a {
 }
 
 ::selection {
-	background: #b5d6fd;
-	color: #000030;
+	background: #b6dafd;
+	color: #06121f;
 }
 
 /*RTE_DefaultConfig.items_InlineClasses*/
@@ -98,11 +104,11 @@ table {
 	}
 
 	table[border="0"] td, table:not([border]) td, table[border="0"] th, table:not([border]) th {
-		border: 1px solid #ddd;
+		border: 1px solid #d0d7de;
 	}
 
 thead {
-	background-color: #eee;
+	background-color: #f6f8fa;
 }
 
 .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
@@ -129,9 +135,10 @@ video-container {
 	}
 
 blockquote {
-	border-left: 3px solid #ddd;
-	padding: 5px 0 5px 10px;
-	margin: 15px 0 15px 15px;
+	border-left: 3px solid #d0d7de;
+	padding: 0.2em 0 0.2em 1em;
+	margin: 1.2em 0;
+	color: #57606a;
 }