Merge pull request #2102 from tf/text-inline-rights-tweaks

Improve text inline file rights

Author: tf

entry_types/scrolled/package/src/frontend/Section.js

@@ -60,19 +60,21 @@ const Section = withInlineEditingDecorator('SectionDecorator', function Section(
       <SectionLifecycleProvider onActivate={onActivate}
                                 entersWithFadeTransition={section.transition?.startsWith('fade')}>
         <SectionViewTimelineProvider backdrop={backdrop}>
-          <SectionAtmo audioFile={atmoAudioFile} />
-
-          <SectionContents section={section}
-                           transitions={transitions}
-                           backdrop={backdrop}
-                           contentElements={contentElements}
-                           state={state}
-                           transitionStyles={transitionStyles} />
-
-          <SectionInlineFileRights section={section}
-                                   backdrop={backdrop}
-                                   atmoAudioFile={atmoAudioFile}
-                                   state={state} />
+          <BackgroundColorProvider dark={!section.invert}>
+            <SectionAtmo audioFile={atmoAudioFile} />
+
+            <SectionContents section={section}
+                             transitions={transitions}
+                             backdrop={backdrop}
+                             contentElements={contentElements}
+                             state={state}
+                             transitionStyles={transitionStyles} />
+
+            <SectionInlineFileRights section={section}
+                                     backdrop={backdrop}
+                                     atmoAudioFile={atmoAudioFile}
+                                     state={state} />
+          </BackgroundColorProvider>
         </SectionViewTimelineProvider>
       </SectionLifecycleProvider>
     </section>
@@ -146,15 +148,13 @@ function SectionContents({
              state={state}
              motifAreaState={motifAreaState}
              staticShadowOpacity={staticShadowOpacity}>
-          <BackgroundColorProvider dark={!section.invert}>
-            <Layout sectionId={section.id}
-                    items={contentElements}
-                    appearance={section.appearance}
-                    contentAreaRef={setContentAreaRef}
-                    sectionProps={sectionProperties}>
-              {(children, boxProps) => <BoxWrapper {...boxProps} inverted={section.invert}>{children}</BoxWrapper>}
-            </Layout>
-          </BackgroundColorProvider>
+          <Layout sectionId={section.id}
+                  items={contentElements}
+                  appearance={section.appearance}
+                  contentAreaRef={setContentAreaRef}
+                  sectionProps={sectionProperties}>
+            {(children, boxProps) => <BoxWrapper {...boxProps} inverted={section.invert}>{children}</BoxWrapper>}
+          </Layout>
         </Box>
       </Foreground>
     </>

entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import classNames from 'classnames';
+import {useDarkBackground} from 'pageflow-scrolled/frontend';
 
 import styles from './TextInlineFileRights.module.css';
 
 export function TextInlineFileRights({context, children}) {
+  const darkBackground = useDarkBackground();
+
   if (context === 'insideElement' || context === 'playerControls') {
     return null;
   }
 
   return (
     <div className={classNames(styles.text,
-                               {[styles.forSection]: context === 'section'})}>
+                               {[styles.forSection]: context === 'section',
+                                [styles.darkBackground]: darkBackground})}>
       <div>
         {children}
       </div>

entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.module.css

@@ -1,3 +1,9 @@
+@value (
+  darkContentSurfaceColor, lightContentSurfaceColor,
+  darkContentTextColor, lightContentTextColor,
+  contentColorScope
+) from "pageflow-scrolled/values/colors.module.css";
+
 .text {
   font-size: 14px;
   position: relative;
@@ -10,14 +16,33 @@
   padding-top: 0.2em;
 }
 
+.text li::before {
+  content: "© ";
+  opacity: 0.7;
+}
+
+.text:not(:has(li:nth-child(2))) span {
+  display: none;
+}
+
 .forSection {
   position: absolute;
   bottom: 0;
   right: 0;
 }
 
 .forSection li {
-  padding: 0 0.4em 0.2em 0;
+  padding: 0.1em 0.3em;
+  border-radius: 0.25rem;
+  margin: 0 0.2em 0.1em auto;
+  background-color: color-mix(in srgb, lightContentSurfaceColor, transparent);
+  color: darkContentTextColor;
+  width: fit-content;
+}
+
+.forSection.darkBackground li {
+  background-color: color-mix(in srgb, darkContentSurfaceColor, transparent);
+  color: lightContentTextColor;
 }
 
 .text a {