|
|
@@ -0,0 +1,598 @@
|
|
|
+<template>
|
|
|
+ <div v-if="layoutStore.isCookieConsentDialogVisible">
|
|
|
+ <div v-if="!showCustomizationOptions" class="cookie-consent-banner">
|
|
|
+ <div class="continue-wrapper">
|
|
|
+ <a class="continue" href="#" @click.prevent="continueWithoutAccepting">
|
|
|
+ Continuer sans accepter
|
|
|
+ </a>
|
|
|
+ <v-icon
|
|
|
+ size="20"
|
|
|
+ class="fa-solid fa-arrow-right ml-6"
|
|
|
+ @click="closePopup()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col cols="12">
|
|
|
+ <img
|
|
|
+ src="/images/components/cookie-consent/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png"
|
|
|
+ alt="Cookie"
|
|
|
+ class="cookie-image"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <v-row no-gutters>
|
|
|
+ <v-col cols="12">
|
|
|
+ <div class="text">
|
|
|
+ <p>GESTION DES COOKIES</p>
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <p class="details-cookies" style="padding-left: 20px">
|
|
|
+ Le site Opentalent.fr utilise des cookies fonctionnels nécessaires à la
|
|
|
+ navigation du site et d'autres technologies similaire pour plusieurs
|
|
|
+ objectifs : des cookies d'analyse de l'audience du site, des cookies de
|
|
|
+ personnalisation de contenu et des cookies publicitaires. Pour plus de
|
|
|
+ détail, veuillez consulter notre
|
|
|
+ <NuxtLink to="/politique-de-confidentialite#cookie-policy">
|
|
|
+ Politique de confidentialité</NuxtLink
|
|
|
+ >. Vous pouvez ajuster vos préférences en matière de cookies à tout
|
|
|
+ moment en cliquant sur le bouton "Gérer mes préférences"
|
|
|
+ </p>
|
|
|
+ <div class="horizontal-line"></div>
|
|
|
+ <div class="actions">
|
|
|
+ <button
|
|
|
+ class="customize-button"
|
|
|
+ @click="showCustomizationOptions = true"
|
|
|
+ >
|
|
|
+ Gérer mes préférences
|
|
|
+ </button>
|
|
|
+ <button class="accept-button" @click="acceptAllCookies">
|
|
|
+ Tout accepter
|
|
|
+ </button>
|
|
|
+ <!-- <button class="decline-button" @click="declineCookies">Refuser</button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-dialog v-model="showCustomizationOptions" persistent max-width="600px">
|
|
|
+ <v-card>
|
|
|
+ <v-row class="headline">
|
|
|
+ <v-btn
|
|
|
+ class="close-dialog"
|
|
|
+ :icon="true"
|
|
|
+ @click="showCustomizationOptions = false"
|
|
|
+ >
|
|
|
+ <v-icon size="20" class="fas fa-times" />
|
|
|
+ </v-btn>
|
|
|
+
|
|
|
+ <v-card-title>Gérer mes préferences</v-card-title>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <p class="gestion-preferences">
|
|
|
+ Vous pouvez définir vos préférences sur la manière dont vous souhaitez
|
|
|
+ que vos données soient utilisées en fonction des finalités et des
|
|
|
+ entreprises tierces ci-dessous. Certains tiers peuvent traiter des
|
|
|
+ données sur la base d'un intérêt légitime et vous pouvez choisir de
|
|
|
+ vous désinscrire.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <v-container class="preferences-actions text-end">
|
|
|
+ <button class="decline-button" @click="declineCookies">
|
|
|
+ Tout refuser
|
|
|
+ </button>
|
|
|
+ <button class="accept-button" @click="acceptAllCookies">
|
|
|
+ Tout accepter
|
|
|
+ </button>
|
|
|
+ </v-container>
|
|
|
+
|
|
|
+ <v-card-text>
|
|
|
+ <h4>Des cookies tiers permettant de réaliser des statistiques</h4>
|
|
|
+
|
|
|
+ <v-row align="center">
|
|
|
+ <v-col cols="auto">
|
|
|
+ <v-switch
|
|
|
+ v-model="cookiesPreferences.analyticsConsent"
|
|
|
+ label="Mesure d'audience"
|
|
|
+ hide-details
|
|
|
+ color="green"
|
|
|
+ inset
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col>{{
|
|
|
+ cookiesPreferences.analyticsConsent ? 'Autorisé' : 'Non-autorisé'
|
|
|
+ }}</v-col>
|
|
|
+ </v-row>
|
|
|
+ <p>
|
|
|
+ Ces cookies nous permettent d'établir des statistiques, des volumes
|
|
|
+ de fréquentation et d'utilisation des divers éléments de notre site,
|
|
|
+ nous permettant d’optimiser son fonctionnement.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h4 class="mt-6">Des cookies tiers à visée publicitaire</h4>
|
|
|
+
|
|
|
+ <v-row align="center">
|
|
|
+ <v-col cols="auto">
|
|
|
+ <v-switch
|
|
|
+ v-model="cookiesPreferences.advertisingConsent"
|
|
|
+ label="Suivi publicitaire"
|
|
|
+ hide-details
|
|
|
+ color="green"
|
|
|
+ inset
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col>{{
|
|
|
+ cookiesPreferences.advertisingConsent
|
|
|
+ ? 'Autorisé'
|
|
|
+ : 'Non-autorisé'
|
|
|
+ }}</v-col>
|
|
|
+ </v-row>
|
|
|
+ <p>
|
|
|
+ Autoriser le stockage et l'accès aux cookies pour diffuser des
|
|
|
+ annonces publicitaires personnalisées. Cela permet de vous montrer
|
|
|
+ des publicités plus pertinentes.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <v-row align="center">
|
|
|
+ <v-col cols="auto">
|
|
|
+ <v-switch
|
|
|
+ v-model="cookiesPreferences.adUserDataConsent"
|
|
|
+ label="Données Utilisateur pour la Publicité"
|
|
|
+ hide-details
|
|
|
+ color="green"
|
|
|
+ inset
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col>{{
|
|
|
+ cookiesPreferences.advertisingConsent
|
|
|
+ ? 'Autorisé'
|
|
|
+ : 'Non-autorisé'
|
|
|
+ }}</v-col>
|
|
|
+ </v-row>
|
|
|
+ <p>
|
|
|
+ Autoriser la collecte et l'utilisation de vos données personnelles
|
|
|
+ (comme votre adresse e-mail ou numéro de téléphone) pour créer des
|
|
|
+ profils de publicité personnalisés et améliorer le ciblage des
|
|
|
+ annonces.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <v-row align="center">
|
|
|
+ <v-col cols="auto">
|
|
|
+ <v-switch
|
|
|
+ v-model="cookiesPreferences.adPersonalizationConsent"
|
|
|
+ label="Personnalisation des annonces"
|
|
|
+ hide-details
|
|
|
+ color="green"
|
|
|
+ inset
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col>{{
|
|
|
+ cookiesPreferences.advertisingConsent
|
|
|
+ ? 'Autorisé'
|
|
|
+ : 'Non-autorisé'
|
|
|
+ }}</v-col>
|
|
|
+ </v-row>
|
|
|
+ <p>
|
|
|
+ Autoriser la personnalisation des annonces en fonction de vos
|
|
|
+ préférences et de votre comportement de navigation pour vous offrir
|
|
|
+ des publicités plus pertinentes et ciblées.
|
|
|
+ </p>
|
|
|
+ </v-card-text>
|
|
|
+
|
|
|
+ <v-card-actions>
|
|
|
+ <v-btn color="secondary" @click="showCustomizationOptions = false">
|
|
|
+ Fermer
|
|
|
+ </v-btn>
|
|
|
+
|
|
|
+ <v-spacer />
|
|
|
+
|
|
|
+ <button class="accept-button" @click="saveCookiesPreferences">
|
|
|
+ Sauvegarder
|
|
|
+ </button>
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </v-dialog>
|
|
|
+ </div>
|
|
|
+ <v-alert
|
|
|
+ v-model="showNotification"
|
|
|
+ title="Confirmation"
|
|
|
+ type="warning"
|
|
|
+ width="400"
|
|
|
+ closable
|
|
|
+ transition="fade-transition"
|
|
|
+ density="compact"
|
|
|
+ class="alert"
|
|
|
+ >
|
|
|
+ Vous avez refusé nos cookies. Si vous le souhaitez, vous pouvez encore
|
|
|
+ modifier votre décision en
|
|
|
+ <a href="#" @click="showPopup()">cliquant ici</a>.
|
|
|
+ </v-alert>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, type Ref, ref } from 'vue'
|
|
|
+import { useCookies } from 'vue3-cookies'
|
|
|
+import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
|
|
|
+import type { CookiesPreferences } from '~/types/interface'
|
|
|
+
|
|
|
+const layoutStore = useLayoutStore()
|
|
|
+
|
|
|
+const { cookies } = useCookies()
|
|
|
+const showCustomizationOptions = ref(false)
|
|
|
+const showNotification = ref(false)
|
|
|
+
|
|
|
+const { gtag, initialize: initializeGTag } = useGtag()
|
|
|
+
|
|
|
+/**
|
|
|
+ * Cookies options
|
|
|
+ */
|
|
|
+const cookiesPreferences: Ref<CookiesPreferences> = ref({
|
|
|
+ consent: COOKIE_CONSENT_CHOICE.NONE,
|
|
|
+ analyticsConsent: true,
|
|
|
+ advertisingConsent: true,
|
|
|
+ adUserDataConsent: true,
|
|
|
+ adPersonalizationConsent: true,
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * Affiche la popup de choix de consentement aux cookies
|
|
|
+ */
|
|
|
+const showPopup = () => {
|
|
|
+ layoutStore.setIsCookieConsentDialogVisible(true)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Ferme la popup de choix de consentement aux cookies
|
|
|
+ */
|
|
|
+const closePopup = () => {
|
|
|
+ layoutStore.setIsCookieConsentDialogVisible(false)
|
|
|
+ showCustomizationOptions.value = false
|
|
|
+ showNotification.value = false
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Affiche une notification d'une minute pour permettre à l'utilisateur qui
|
|
|
+ * a refusé les cookies de changer d'avis
|
|
|
+ */
|
|
|
+const notify = () => {
|
|
|
+ showNotification.value = true
|
|
|
+
|
|
|
+ // Hide the notification after 1 minute
|
|
|
+ setTimeout(() => {
|
|
|
+ showNotification.value = false
|
|
|
+ }, 60000)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Créé ou supprime les cookies selon les préférences en cours
|
|
|
+ *
|
|
|
+ * @param duration Durée de vie des cookies (en jours, défaut : 365)
|
|
|
+ */
|
|
|
+const setupCookies = (duration: number = 365) => {
|
|
|
+ // Enregistre les préférences actuelles dans 2 cookies
|
|
|
+ cookies.set(
|
|
|
+ 'cookie_consent',
|
|
|
+ cookiesPreferences.value.consent,
|
|
|
+ duration + 'd'
|
|
|
+ )
|
|
|
+
|
|
|
+ cookies.set(
|
|
|
+ 'cookie_preferences',
|
|
|
+ JSON.stringify({
|
|
|
+ analyticsConsent: cookiesPreferences.value.analyticsConsent,
|
|
|
+ advertisingConsent: cookiesPreferences.value.advertisingConsent,
|
|
|
+ adUserDataConsent: cookiesPreferences.value.adUserDataConsent,
|
|
|
+ adPersonalizationConsent:
|
|
|
+ cookiesPreferences.value.adPersonalizationConsent,
|
|
|
+ }),
|
|
|
+ duration + 'd'
|
|
|
+ )
|
|
|
+
|
|
|
+ // Initialise et paramètre google tag manager
|
|
|
+ initializeGTag()
|
|
|
+
|
|
|
+ gtag('consent', 'update', {
|
|
|
+ analytics_storage: cookiesPreferences.value.analyticsConsent
|
|
|
+ ? 'granted'
|
|
|
+ : 'denied',
|
|
|
+ ad_storage: cookiesPreferences.value.advertisingConsent
|
|
|
+ ? 'granted'
|
|
|
+ : 'denied',
|
|
|
+ ad_user_data: cookiesPreferences.value.adUserDataConsent
|
|
|
+ ? 'granted'
|
|
|
+ : 'denied',
|
|
|
+ ad_personalization: cookiesPreferences.value.adPersonalizationConsent
|
|
|
+ ? 'granted'
|
|
|
+ : 'denied',
|
|
|
+ })
|
|
|
+
|
|
|
+ // Nettoie les cookies si ceux ci ne sont plus les bienvenus
|
|
|
+ // TODO: voir si ce nettoyage manuel est nécessaire, ou si google tag manager ne peut pas s'en occuper
|
|
|
+ if (!cookiesPreferences.value.analyticsConsent) {
|
|
|
+ purgeAnalyticsCookies()
|
|
|
+ }
|
|
|
+ if (!cookiesPreferences.value.advertisingConsent) {
|
|
|
+ purgeAdvertisingCookies()
|
|
|
+ }
|
|
|
+
|
|
|
+ // Enregistre la date et le contenu de la dernière acceptation (comme trace)
|
|
|
+ localStorage.setItem(
|
|
|
+ 'cookie_consent',
|
|
|
+ JSON.stringify({
|
|
|
+ date: new Date(),
|
|
|
+ consent: cookiesPreferences.value,
|
|
|
+ })
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Nettoie les cookies google analytics
|
|
|
+ */
|
|
|
+const purgeAnalyticsCookies = () => {
|
|
|
+ cookies.remove('_ga')
|
|
|
+ cookies.remove('_gat')
|
|
|
+ cookies.remove('_gid')
|
|
|
+ cookies.keys().forEach((name) => {
|
|
|
+ if (/_ga_\w{10}/.test(name)) {
|
|
|
+ cookies.remove(name)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Nettoie les cookies meta pixel
|
|
|
+ */
|
|
|
+const purgeAdvertisingCookies = () => {
|
|
|
+ cookies.remove('_fbp')
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Accept and setup all the cookies and close the popup
|
|
|
+ */
|
|
|
+const acceptAllCookies = () => {
|
|
|
+ cookiesPreferences.value = {
|
|
|
+ consent: COOKIE_CONSENT_CHOICE.ACCEPTED,
|
|
|
+ analyticsConsent: true,
|
|
|
+ advertisingConsent: true,
|
|
|
+ adUserDataConsent: true,
|
|
|
+ adPersonalizationConsent: true,
|
|
|
+ }
|
|
|
+
|
|
|
+ setupCookies()
|
|
|
+ closePopup()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Refuse all the cookies, set up the cookie_consent cookie and close the popup
|
|
|
+ */
|
|
|
+const declineCookies = () => {
|
|
|
+ cookiesPreferences.value = {
|
|
|
+ consent: COOKIE_CONSENT_CHOICE.DECLINED,
|
|
|
+ analyticsConsent: false,
|
|
|
+ advertisingConsent: false,
|
|
|
+ adUserDataConsent: false,
|
|
|
+ adPersonalizationConsent: false,
|
|
|
+ }
|
|
|
+
|
|
|
+ setupCookies(7)
|
|
|
+ notify()
|
|
|
+ closePopup()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Set up the cookies following user preferences and close the popup
|
|
|
+ */
|
|
|
+const saveCookiesPreferences = () => {
|
|
|
+ cookiesPreferences.value.consent = COOKIE_CONSENT_CHOICE.CUSTOMIZED
|
|
|
+ setupCookies()
|
|
|
+ closePopup()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Continue without accepting cookies
|
|
|
+ */
|
|
|
+const continueWithoutAccepting = () => {
|
|
|
+ closePopup()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Charge les préférences depuis les cookies
|
|
|
+ */
|
|
|
+const loadActivePreferences = () => {
|
|
|
+ const cookieConsentVal = cookies.get('cookie_consent')
|
|
|
+ const cookiePreferencesVal = cookies.get('cookie_preferences')
|
|
|
+
|
|
|
+ if (cookieConsentVal && cookiePreferencesVal) {
|
|
|
+ cookiesPreferences.value = {
|
|
|
+ consent: cookieConsentVal,
|
|
|
+ // @ts-ignore
|
|
|
+ ...cookiePreferencesVal,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Check if the user has already accepted the cookies when page is mounted
|
|
|
+ */
|
|
|
+onMounted(() => {
|
|
|
+ loadActivePreferences()
|
|
|
+ if (cookiesPreferences.value.consent === COOKIE_CONSENT_CHOICE.NONE) {
|
|
|
+ showPopup()
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.gestion-preferences {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ text-align: justify;
|
|
|
+}
|
|
|
+
|
|
|
+.preferences-actions {
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+
|
|
|
+.headline {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ color: var(--on-secondary-color);
|
|
|
+ text-transform: uppercase;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.cookie-consent-banner {
|
|
|
+ background: var(--neutral-color);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 15px;
|
|
|
+ max-width: 550px;
|
|
|
+ z-index: 1000 !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cookie-image {
|
|
|
+ width: 150px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.text {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.details-cookies {
|
|
|
+ padding: 10px;
|
|
|
+ text-align: justify;
|
|
|
+}
|
|
|
+
|
|
|
+.horizontal-line {
|
|
|
+ width: 90%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: var(--neutral-color-alt-strong);
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.actions {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.accept-button,
|
|
|
+.customize-button {
|
|
|
+ background-color: var(--on-primary-color-alt);
|
|
|
+ border: none;
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.decline-button {
|
|
|
+ border: 1px solid var(--on-neutral-color);
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.accept-button:hover,
|
|
|
+.customize-button:hover {
|
|
|
+ background-color: var(--on-primary-color-alt);
|
|
|
+}
|
|
|
+
|
|
|
+.cookie-description {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ color: var(--on-neutral-color-light);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-switch .v-input--selection-controls__ripple .v-ripple__container {
|
|
|
+ background-color: var(--v-primary-color);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-switch,
|
|
|
+.v-input--selection-controls__ripple--active,
|
|
|
+.v-ripple__container {
|
|
|
+ background-color: var(--v-primary-darken4);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-switch .v-input--selection-controls__input {
|
|
|
+ --v-theme-primary: var(--v-primary-base);
|
|
|
+ --v-theme-primary-lighten4: var(--v-primary-lighten4);
|
|
|
+ --v-theme-primary-darken4: var(--v-primary-darken4);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-switch,
|
|
|
+.v-input--selection-controls__input,
|
|
|
+input:checked,
|
|
|
+.v-input--selection-controls__ripple,
|
|
|
+.v-ripple__container {
|
|
|
+ background-color: var(--v-primary-darken4);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-switch,
|
|
|
+.v-input--selection-controls__input,
|
|
|
+input:checked,
|
|
|
+.v-input--selection-controls__ripple,
|
|
|
+.v-ripple__container,
|
|
|
+.v-ripple__animation {
|
|
|
+ background-color: var(--v-primary-darken4);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.v-switch__track) {
|
|
|
+ background-color: var(--warning-color);
|
|
|
+}
|
|
|
+
|
|
|
+.close-dialog {
|
|
|
+ background: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.continue {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none !important;
|
|
|
+ color: var(--on-neutral-color);
|
|
|
+}
|
|
|
+
|
|
|
+.continue-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.v-switch .v-label) {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.alert {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: var(--on-primary-color);
|
|
|
+ font-weight: 700;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Olivier Massot
