mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-16 16:14:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(frontend): increase visibility of text in click shield

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-07 17:57:08 +01:00
parent a124ef566b
commit 70d1df7fb7
2 changed files with 5 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
View file

@ -13,9 +13,8 @@
.preview-hover { .preview-hover {
color: white; color: white;
opacity: 0.5; transition: text-shadow 0.2s;
transition: opacity 0.2s; text-shadow: #000000 0 0 5px, #000000 0 0 20px;
text-shadow: #000000 0 0 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -23,17 +22,9 @@
justify-content: center; justify-content: center;
} }
.preview-hover-text {
opacity: 0;
}
&:hover { &:hover {
.preview-hover-text {
opacity: 1;
}
.preview-hover { .preview-hover {
opacity: 1; text-shadow: #000000 0 0 20px, #000000 0 0 40px;
text-shadow: #000000 0 0 5px, #000000 0 0 10px;
} }
} }
@ -43,6 +34,7 @@
object-fit: cover; object-fit: cover;
min-height: 300px; min-height: 300px;
width: 100%; width: 100%;
opacity: 0.75;
box-shadow: inset rgba(var(--bs-dark), 0.5) 0 0 20px; box-shadow: inset rgba(var(--bs-dark), 0.5) 0 0 20px;
} }

2
frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
View file

@ -120,7 +120,7 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
<span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}> <span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}>
{previewBackground} {previewBackground}
<span className={`${styles['preview-hover']}`}> <span className={`${styles['preview-hover']}`}>
<span className={`${styles['preview-hover-text']}`}> <span>
<Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} /> <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
</span> </span>
{icon} {icon}