heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix: alt text indicator and sensetive button

Browse source
This commit is contained in:
Insert5StarName 2023-09-22 16:39:53 +02:00
parent 6be5c79ac6
commit 7b79658dbd
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkMediaImage.vue
View file

@ -142,7 +142,7 @@ function showMenu(ev: MouseEvent) {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
background-color: black;
color: var(--accentLighten);
font-size: 12px;
opacity: .5;

26
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -13,6 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-else :class="$style.visible">
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
<div v-if="!video.comment" :class="$style.indicator" title="Video lacks descriptive text"><i class="ti ti-pencil-off"></i></div>
</div>
<video
:class="$style.video"
:poster="video.thumbnailUrl"
@ -53,7 +57,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
background-color: black;
color: var(--accentLighten);
font-size: 14px;
opacity: .5;
@ -89,4 +93,24 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
text-align: center;
font-size: 12px;
}
.indicators {
display: inline-flex;
position: absolute;
top: 10px;
left: 10px;
pointer-events: none;
opacity: .5;
gap: 6px;
}
.indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
background-color: black;
border-radius: 6px;
color: var(--accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
padding: 2px 5px;
}
</style>