@richscripts/richtexteditor 2.5.0 → 2.5.2

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;
 }
 
@@ -4952,14 +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; }
+
+/* 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;
 }
 
 

package/richtexteditor/runtime/richtexteditor_preview.css

@@ -1,14 +1,16 @@
 
 /* TODO: use @import for your css */
 
+/* Kept in step with the editing surface (runtime/richtexteditor_content.css) so
+   a previewed document looks like what was authored. */
 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;