github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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 {
color: white;
opacity: 0.5;
transition: opacity 0.2s;
text-shadow: #000000 0 0 5px;
transition: text-shadow 0.2s;
text-shadow: #000000 0 0 5px, #000000 0 0 20px;
display: flex;
flex-direction: column;
@ -23,17 +22,9 @@
justify-content: center;
}
.preview-hover-text {
opacity: 0;
}
&:hover {
.preview-hover-text {
opacity: 1;
}
.preview-hover {
opacity: 1;
text-shadow: #000000 0 0 5px, #000000 0 0 10px;
text-shadow: #000000 0 0 20px, #000000 0 0 40px;
}
}
@ -43,6 +34,7 @@
object-fit: cover;
min-height: 300px;
width: 100%;
opacity: 0.75;
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}>
{previewBackground}
<span className={`${styles['preview-hover']}`}>
<span className={`${styles['preview-hover-text']}`}>
<span>
<Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
</span>
{icon}