diff --git a/entry_types/scrolled/package/src/frontend/Section.js b/entry_types/scrolled/package/src/frontend/Section.js index 9ba0b9c76..2ff2b1edf 100644 --- a/entry_types/scrolled/package/src/frontend/Section.js +++ b/entry_types/scrolled/package/src/frontend/Section.js @@ -60,19 +60,21 @@ const Section = withInlineEditingDecorator('SectionDecorator', function Section( - - - - - + + + + + + + @@ -146,15 +148,13 @@ function SectionContents({ state={state} motifAreaState={motifAreaState} staticShadowOpacity={staticShadowOpacity}> - - - {(children, boxProps) => {children}} - - + + {(children, boxProps) => {children}} + diff --git a/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.js b/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.js index dc9adbbe5..6809bc45b 100644 --- a/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.js +++ b/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 (
+ {[styles.forSection]: context === 'section', + [styles.darkBackground]: darkBackground})}>
{children}
diff --git a/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.module.css b/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.module.css index 4ed72d483..180203b34 100644 --- a/entry_types/scrolled/package/src/widgets/textInlineFileRights/TextInlineFileRights.module.css +++ b/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,6 +16,15 @@ 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; @@ -17,7 +32,17 @@ } .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 {