De-duplicate Device/Ebook selectors in rounded-border-ebook theme

Every rule in appearance-theme-rounded-border-ebook.css applied equally to
the Ebook* and Device* page sizes but repeated each (often long) selector
once per size. Factor the size classes into a single :is() per rule (and
:where() for the zero-specificity override rule) so each selector path is
written once. :is()/:where() take the specificity of their most specific
argument, and the size selectors are all single classes/attributes, so every
rule's specificity is unchanged.

Raised by John Thomson while reviewing the same code as it appears in PR
#7949 (API-for-Conversion). Making the change here on the 6.4 StoryWeaver
page-size branch so it flows to master with the rest of that work instead of
diverging and conflicting at merge time.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: hatton

src/content/appearanceThemes/appearance-theme-rounded-border-ebook.css

@@ -3,11 +3,18 @@
 /* This theme applies to the eBook page sizes: Device 16x9 (Landscape and Portrait)
    and the StoryWeaver Ebook sizes (Ebook2x3 Portrait and Ebook7x5 Landscape). */
 
+/* Every rule here applies equally to the Ebook* and Device* page sizes. Rather than repeat
+   each (often long) selector once per size, we factor the size classes into a single :is()
+   (or :where(), where zero specificity is wanted). :is()/:where() take the specificity of
+   their most specific argument, so combining same-specificity size classes this way does not
+   change which rules win. */
+
 /* The below statements control the size and color of the marginbox. It holds the text and picture of that page.
  * The top and left numbers determine the position of the margin box on the page. */
 
-[class*="Ebook"].numberedPage:not(.bloom-interactive-page),
-[class*="Device"].numberedPage:not(.bloom-interactive-page) {
+:is([class*="Ebook"], [class*="Device"]).numberedPage:not(
+        .bloom-interactive-page
+    ) {
     --page-margin-top: 2mm;
     --page-margin-bottom: 2mm;
     --page-margin-left: 2mm;
@@ -26,17 +33,21 @@
 }
 
 /* using "where:" so that the user's custom appearance can override the theme if specified */
-.numberedPage:where([class*="Ebook"]:not(.bloom-interactive-page)),
-.numberedPage:where([class*="Device"]:not(.bloom-interactive-page)) {
+.numberedPage:where(
+    [class*="Ebook"]:not(.bloom-interactive-page),
+    [class*="Device"]:not(.bloom-interactive-page)
+) {
     --topLevel-text-padding: 0.5em;
 }
-[class*="Ebook"].numberedPage:not(.bloom-interactive-page),
-[class*="Device"].numberedPage:not(.bloom-interactive-page) {
+:is([class*="Ebook"], [class*="Device"]).numberedPage:not(
+        .bloom-interactive-page
+    ) {
     --pageNumber-extra-height: 0mm !important; /* we put the page number on top of the image so we don't need a margin boost */
     --pageNumber-outline-color: white;
 }
-[class*="Ebook"].numberedPage:not(.bloom-interactive-page)::after,
-[class*="Device"].numberedPage:not(.bloom-interactive-page)::after {
+:is([class*="Ebook"], [class*="Device"]).numberedPage:not(
+        .bloom-interactive-page
+    )::after {
     --pageNumber-bottom: var(--page-margin-bottom);
     --pageNumber-top: unset;
     --pageNumber-font-size: 11pt;
@@ -54,13 +65,7 @@
 
 /* Rules for rounding the corner of images */
 /* Picture on left */
-.Ebook7x5Landscape.numberedPage
-    .marginBox
-    > .vertical-percent
-    > .position-left
-    > .split-pane-component-inner
-    > .bloom-canvas,
-.Device16x9Landscape.numberedPage
+:is(.Ebook7x5Landscape, .Device16x9Landscape).numberedPage
     .marginBox
     > .vertical-percent
     > .position-left
@@ -70,13 +75,7 @@
         var(--marginBox-border-radius); /* left corners */
 }
 /* Picture on right */
-.Ebook7x5Landscape.numberedPage
-    .marginBox
-    > .vertical-percent
-    > .position-right
-    > .split-pane-component-inner
-    > .bloom-canvas,
-.Device16x9Landscape.numberedPage
+:is(.Ebook7x5Landscape, .Device16x9Landscape).numberedPage
     .marginBox
     > .vertical-percent
     > .position-right
@@ -86,13 +85,7 @@
         var(--marginBox-border-radius) 0px; /* right corners */
 }
 /* Picture on top */
-.Ebook2x3Portrait.numberedPage
-    .marginBox
-    > .horizontal-percent
-    > .position-top
-    > .split-pane-component-inner
-    > .bloom-canvas,
-.Device16x9Portrait.numberedPage
+:is(.Ebook2x3Portrait, .Device16x9Portrait).numberedPage
     .marginBox
     > .horizontal-percent
     > .position-top
@@ -102,13 +95,7 @@
         var(--marginBox-border-radius) 0px 0px; /* top corners */
 }
 /* Picture on bottom */
-.Ebook2x3Portrait.numberedPage
-    .marginBox
-    > .horizontal-percent
-    > .position-bottom
-    > .split-pane-component-inner
-    > .bloom-canvas,
-.Device16x9Portrait.numberedPage
+:is(.Ebook2x3Portrait, .Device16x9Portrait).numberedPage
     .marginBox
     > .horizontal-percent
     > .position-bottom
@@ -118,11 +105,7 @@
         var(--marginBox-border-radius); /* bottom corners */
 }
 /* Picture only */
-[class*="Ebook"].numberedPage
-    .marginBox
-    > .split-pane-component-inner
-    > .bloom-canvas,
-[class*="Device"].numberedPage
+:is([class*="Ebook"], [class*="Device"]).numberedPage
     .marginBox
     > .split-pane-component-inner
     > .bloom-canvas {
@@ -131,8 +114,10 @@
 
 /* End Rules for rounding the corner of images */
 
-.Ebook7x5Landscape.numberedPage.pictureOnRight.pictureOnRight::after,
-.Device16x9Landscape.numberedPage.pictureOnRight.pictureOnRight::after {
+:is(
+        .Ebook7x5Landscape,
+        .Device16x9Landscape
+    ).numberedPage.pictureOnRight.pictureOnRight::after {
     --pageNumber-right-margin: var(--page-margin-right);
     --pageNumber-left-margin: deliberately-invalid; /* prevents left being set at all. unset does not work. Prevent centering for this layout */
     --pageNumber-always-left-margin: deliberately-invalid; /* prevents left being set at all. unset does not work. Prevent centering for this layout */