remove blur from translucent class

This commit is contained in:
Georges-Antoine Assi
2025-08-20 17:29:33 -04:00
parent 0daf63dfec
commit da96c9d816
14 changed files with 30 additions and 37 deletions

View File

@@ -211,7 +211,7 @@ function onFilterClick(filter: FilterType, value: string) {
<template #prev="{ props }">
<v-btn
icon="mdi-chevron-left"
class="translucent-dark"
class="translucent"
@click="props.onClick"
/>
</template>
@@ -242,7 +242,7 @@ function onFilterClick(filter: FilterType, value: string) {
<template #next="{ props }">
<v-btn
icon="mdi-chevron-right"
class="translucent-dark"
class="translucent"
@click="props.onClick"
/>
</template>
@@ -261,7 +261,7 @@ function onFilterClick(filter: FilterType, value: string) {
<v-btn
@click="props.onClick"
icon="mdi-chevron-left"
class="translucent-dark"
class="translucent"
/>
</template>
<v-carousel-item
@@ -288,7 +288,7 @@ function onFilterClick(filter: FilterType, value: string) {
<template #next="{ props }">
<v-btn
icon="mdi-chevron-right"
class="translucent-dark"
class="translucent"
@click="props.onClick"
/>
</template>

View File

@@ -195,7 +195,7 @@ async function updateCollection() {
!heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_API_ENABLED
"
size="small"
class="translucent-dark"
class="translucent"
@click="
emitter?.emit('showSearchCoverDialog', {
term: currentCollection.name as string,
@@ -208,7 +208,7 @@ async function updateCollection() {
<v-btn
title="Upload custom cover"
size="small"
class="translucent-dark"
class="translucent"
@click="triggerFileInput"
>
<v-icon size="large">mdi-cloud-upload-outline</v-icon>
@@ -224,7 +224,7 @@ async function updateCollection() {
<v-btn
title="Remove cover"
size="small"
class="translucent-dark"
class="translucent"
@click="removeArtwork"
>
<v-icon size="large" class="text-romm-red">mdi-delete</v-icon>

View File

@@ -176,7 +176,7 @@ function closeDialog() {
?.STEAMGRIDDB_API_ENABLED
"
size="small"
class="translucent-dark"
class="translucent"
@click="
emitter?.emit('showSearchCoverDialog', {
term: collection.name as string,
@@ -188,7 +188,7 @@ function closeDialog() {
</v-btn>
<v-btn
size="small"
class="translucent-dark"
class="translucent"
@click="triggerFileInput"
>
<v-icon size="large">mdi-pencil</v-icon>
@@ -203,7 +203,7 @@ function closeDialog() {
</v-btn>
<v-btn
size="small"
class="translucent-dark"
class="translucent"
@click="removeArtwork"
>
<v-icon size="large" class="text-romm-red"

View File

@@ -232,7 +232,7 @@ onBeforeUnmount(() => {
!rom.ss_url_cover &&
!rom.sgdb_url_cover)
"
class="translucent-dark text-white"
class="translucent text-white"
:class="
sizeActionBar === 1 ? 'text-subtitle-1' : 'text-caption'
"
@@ -287,7 +287,7 @@ onBeforeUnmount(() => {
/>
<v-chip
v-if="rom.hasheous_id"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
density="compact"
title="Verified with Hasheous"
>
@@ -295,7 +295,7 @@ onBeforeUnmount(() => {
</v-chip>
<v-chip
v-if="rom.siblings.length > 0 && showSiblings"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
density="compact"
:title="`${rom.siblings.length} sibling(s)`"
>
@@ -306,13 +306,13 @@ onBeforeUnmount(() => {
text="Favorite"
color="secondary"
density="compact"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
>
<v-icon>mdi-star</v-icon>
</v-chip>
<v-chip
v-if="hasNotes && showChips"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
density="compact"
title="View notes"
@click.stop="showNoteDialog"
@@ -333,7 +333,7 @@ onBeforeUnmount(() => {
(isOuterHovering || activeMenu) &&
!smAndDown
"
class="translucent-dark"
class="translucent"
@menu-open="handleOpenMenu"
@menu-close="handleCloseMenu"
:rom="rom"

View File

@@ -32,7 +32,7 @@ const playingStatus = computed(() => {
<v-chip
v-if="rom.regions.filter(identity).length > 0 && showRegions"
:title="`Regions: ${rom.regions.join(', ')}`"
class="translucent-dark mr-1 mt-1 px-1"
class="translucent mr-1 mt-1 px-1"
:class="{ 'emoji-collection': rom.regions.length > 3 }"
density="compact"
>
@@ -43,7 +43,7 @@ const playingStatus = computed(() => {
<v-chip
v-if="rom.languages.filter(identity).length > 0 && showLanguages"
:title="`Languages: ${rom.languages.join(', ')}`"
class="translucent-dark mr-1 mt-1 px-1"
class="translucent mr-1 mt-1 px-1"
:class="{ 'emoji-collection': rom.languages.length > 3 }"
density="compact"
>
@@ -53,7 +53,7 @@ const playingStatus = computed(() => {
</v-chip>
<v-chip
v-if="playingStatus && showStatus"
class="translucent-dark mr-1 mt-1 px-2"
class="translucent mr-1 mt-1 px-2"
density="compact"
:title="getTextForStatus(playingStatus)"
>

View File

@@ -31,7 +31,7 @@ const missingCoverImage = computed(() => getMissingCoverImage(props.game.name));
lazy
>
<v-chip
class="px-2 position-absolute chip-type text-white translucent-dark"
class="px-2 position-absolute chip-type text-white translucent"
density="compact"
label
>

View File

@@ -223,7 +223,7 @@ function closeDialog() {
!heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_API_ENABLED
"
size="small"
class="translucent-dark"
class="translucent"
@click="
emitter?.emit('showSearchCoverDialog', {
term: rom.name as string,
@@ -235,7 +235,7 @@ function closeDialog() {
</v-btn>
<v-btn
size="small"
class="translucent-dark"
class="translucent"
@click="triggerFileInput('cover-file-input')"
>
<v-icon size="large">mdi-pencil</v-icon>
@@ -250,7 +250,7 @@ function closeDialog() {
</v-btn>
<v-btn
size="small"
class="translucent-dark"
class="translucent"
@click="removeArtwork"
>
<v-icon size="large" class="text-romm-red"

View File

@@ -216,7 +216,7 @@ function updateOptions({ sortBy }: { sortBy: SortBy }) {
/>
<v-chip
v-if="item.hasheous_id"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
density="compact"
title="Verified with Hasheous"
>
@@ -224,7 +224,7 @@ function updateOptions({ sortBy }: { sortBy: SortBy }) {
</v-chip>
<v-chip
v-if="item.siblings.length > 0 && showSiblings"
class="translucent-dark text-white mr-1 mb-1 px-1"
class="translucent text-white mr-1 mb-1 px-1"
density="compact"
:title="`${item.siblings.length} sibling(s)`"
>

View File

@@ -21,7 +21,7 @@ withDefaults(
<template>
<v-chip
v-if="chip"
class="translucent-dark"
class="translucent"
:density="chipDensity"
color="accent"
:label="chipLabel"

View File

@@ -12,14 +12,7 @@ body {
0 0 3px #000000 !important;
}
.translucent {
backdrop-filter: blur(3px) !important;
text-shadow:
1px 1px 1px #000000,
0 0 1px #000000 !important;
}
.translucent-dark {
background: rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(10px) !important;
text-shadow:
1px 1px 1px #000000,
0 0 1px #000000 !important;

View File

@@ -96,7 +96,7 @@ async function loginOIDC() {
</script>
<template>
<v-card class="translucent-dark py-8 px-5" width="500">
<v-card class="translucent py-8 px-5" width="500">
<v-img src="/assets/isotipo.svg" class="mx-auto mb-8" width="80" />
<v-expand-transition>
<v-row

View File

@@ -48,7 +48,7 @@ onBeforeMount(() => {
</script>
<template>
<v-card class="translucent-dark py-8 px-5" width="500">
<v-card class="translucent py-8 px-5" width="500">
<v-img src="/assets/isotipo.svg" class="mx-auto mb-8" width="80" />
<v-row class="text-white justify-center mt-2" no-gutters>
<v-col cols="10">

View File

@@ -53,7 +53,7 @@ async function resetPassword() {
</script>
<template>
<v-card class="translucent-dark py-8 px-5" width="500">
<v-card class="translucent py-8 px-5" width="500">
<v-img src="/assets/isotipo.svg" class="mx-auto mb-8" width="80" />
<v-row class="text-white justify-center mt-2" no-gutters>
<v-col cols="10">

View File

@@ -93,7 +93,7 @@ async function finishWizard() {
</script>
<template>
<v-card class="translucent-dark px-3" width="700">
<v-card class="translucent px-3" width="700">
<v-img src="/assets/isotipo.svg" class="mx-auto mt-6" width="70" />
<v-stepper :mobile="xs" class="bg-transparent" v-model="step" flat>
<template #default="{ prev, next }">