kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(auth): make text always white on image

This commit is contained in:
kolaente 2025-08-14 17:08:40 +02:00
parent a5e71ea6ce
commit 1173f83525
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 36 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/components/misc/NoAuthWrapper.vue
View File

@ -1,35 +1,22 @@
<template>
<div class="no-auth-wrapper">
<Logo
class="logo"
width="200"
height="58"
/>
<Logo class="logo" width="200" height="58" />
<div class="noauth-container">
<section
class="image"
:class="{'has-message': motd !== ''}"
>
<section class="image" :class="{ 'has-message': motd !== '' }">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="image-title">
{{ $t('misc.welcomeBack') }}
{{ $t("misc.welcomeBack") }}
</h2>
</section>
<section class="content">
<div>
<h2
v-if="title"
class="title"
>
<h2 v-if="title" class="title">
{{ title }}
</h2>
<ApiConfig v-if="showApiConfig" />
<Message
v-if="motd !== ''"
class="is-hidden-tablet mbe-4"
>
<Message v-if="motd !== ''" class="is-hidden-tablet mbe-4">
{{ motd }}
</Message>
<slot />
@ -41,36 +28,41 @@
</template>
<script lang="ts" setup>
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import {useI18n} from 'vue-i18n'
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import Logo from '@/components/home/Logo.vue'
import Message from '@/components/misc/Message.vue'
import Legal from '@/components/misc/Legal.vue'
import ApiConfig from '@/components/misc/ApiConfig.vue'
import Logo from "@/components/home/Logo.vue";
import Message from "@/components/misc/Message.vue";
import Legal from "@/components/misc/Legal.vue";
import ApiConfig from "@/components/misc/ApiConfig.vue";
import {useTitle} from '@/composables/useTitle'
import {useConfigStore} from '@/stores/config'
import { useTitle } from "@/composables/useTitle";
import { useConfigStore } from "@/stores/config";
withDefaults(defineProps<{
showApiConfig?: boolean
}>(), {
showApiConfig: false,
})
const configStore = useConfigStore()
const motd = computed(() => configStore.motd)
const route = useRoute()
const {t} = useI18n({useScope: 'global'})
const title = computed(() => route.meta?.title ? t(route.meta.title as string) : '')
useTitle(() => title.value)
withDefaults(
defineProps<{
showApiConfig?: boolean;
}>(),
{
showApiConfig: false,
},
);
const configStore = useConfigStore();
const motd = computed(() => configStore.motd);
const route = useRoute();
const { t } = useI18n({ useScope: "global" });
const title = computed(() =>
route.meta?.title ? t(route.meta.title as string) : "",
);
useTitle(() => title.value);
</script>
<style lang="scss" scoped>
.no-auth-wrapper {
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
background: var(--site-background) url("@/assets/llama.svg?url") no-repeat
fixed bottom left;
min-block-size: 100vh;
display: flex;
flex-direction: column;
@ -107,7 +99,7 @@ useTitle(() => title.value)
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
background: url("@/assets/no-auth-image.jpg") no-repeat bottom/cover;
position: relative;
&.has-message {
@ -115,13 +107,13 @@ useTitle(() => title.value)
}
&::before {
content: '';
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
background-color: rgba(0, 0, 0, .2);
background-color: rgba(0, 0, 0, 0.2);
}
> * {
@ -153,7 +145,7 @@ useTitle(() => title.value)
}
.image-title {
color: var(--white);
color: hsl(0deg, 0%, 100%);
font-size: 2.5rem;
}
</style>