akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 07:10:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change from hacky text component shadow to css text-shadow

Browse Source
This commit is contained in:
Misode
2025-05-17 21:10:14 +02:00
parent 161b81ffdf
commit d3f6ef313c
2 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/components/TextComponent.tsx
View File

@@ -22,9 +22,8 @@ interface PartData extends StyleData {
interface Props {
component: unknown,
base?: StyleData,
shadow?: boolean,
}
export function TextComponent({ component, base = { color: 'white' }, shadow = true }: Props) {
export function TextComponent({ component, base = { color: 'white' } }: Props) {
const { version } = useVersion()
const { lang } = useLocale()
@@ -38,12 +37,7 @@ export function TextComponent({ component, base = { color: 'white' }, shadow = t
const { value: language } = useAsync(() => getLanguage(version, lang), [version, lang])
return <div class="text-component">
{shadow && <div>
{parts.map(p => <TextPart part={p} shadow={true} lang={language ?? {}} />)}
</div>}
<div class="text-foreground">
{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
</div>
{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
</div>
}
@@ -89,7 +83,7 @@ function inherit(component: object, base: PartData) {
}
}
const TextColors = {
const TextColors: Record<string, [string, string]> = {
black: ['#000', '#000'],
dark_blue: ['#00A', '#00002A'],
dark_green: ['#0A0', '#002A00'],
@@ -108,15 +102,12 @@ const TextColors = {
white: ['#FFF', '#3F3F3F'],
}
type TextColorKey = keyof typeof TextColors
const TextColorKeys = Object.keys(TextColors)
function TextPart({ part, shadow, lang }: { part: PartData, shadow?: boolean, lang: Record<string, string> }) {
function TextPart({ part, lang }: { part: PartData, lang: Record<string, string> }) {
if (part.translate) {
const str = resolveTranslate(part.translate, part.fallback, part.with, lang)
return <span style={createStyle(part, shadow)}>{str}</span>
return <span style={createStyle(part)}>{str}</span>
}
return <span style={createStyle(part, shadow)}>{part.text}</span>
return <span style={createStyle(part)}>{part.text}</span>
}
function resolveTranslate(translate: string, fallback: string | undefined, with_: any[] | undefined, lang: Record<string, string>): string {
@@ -131,11 +122,10 @@ function resolveTranslate(translate: string, fallback: string | undefined, with_
return replaceTranslation(str, params)
}
function createStyle(style: StyleData, shadow?: boolean) {
function createStyle(style: StyleData) {
return {
color: style.color && (TextColorKeys.includes(style.color)
? TextColors[style.color as TextColorKey][shadow ? 1 : 0]
: shadow ? 'transparent' : style.color),
color: style.color ? (TextColors[style.color]?.[0] ?? style.color) : undefined,
'--shadow-color': style.color ? TextColors[style.color]?.[1] : undefined,
fontWeight: (style.bold === true) ? 'bold' : undefined,
fontStyle: (style.italic === true) ? 'italic' : undefined,
textDecoration: (style.underlined === true)

14
src/styles/global.css
View File

@@ -1862,14 +1862,11 @@ hr {
font-size: 20px;
position: relative;
white-space: pre;
line-height: 1.1 ;
line-height: 1.1;
}
.text-component > .text-foreground {
position: absolute;
z-index: 1;
left: -2px;
top: -2px;
.text-component span {
text-shadow: 2px 2px var(--shadow-color, transparent);
}
.text-component span:empty:before {
@@ -1888,9 +1885,8 @@ hr {
font-size: calc(var(--dialog-px) * 12);
}
.dialog-preview .text-component > .text-foreground {
left: calc(var(--dialog-px) * -1.2);
top: calc(var(--dialog-px) * -1.2);
.dialog-preview .text-component span {
text-shadow: calc(var(--dialog-px) * 1.2) calc(var(--dialog-px) * 1.2) var(--shadow-color, transparent);
}
.dialog-button,