61a414d214
- CSS: couleurs saturees sans pastels, border-radius 4-6px, inputs mood-aware - Header: allege (3.25rem), logo typographique, bouton connexion fin - Login: redesign complet avec steps dots et input natif style - Dashboard: entry cards epurees, tags toolbox compacts - Seed: 34 vraies clauses forgeron v2.0.0 (forum topic 33165) - Seed: 9 clauses certification (licence G1) - Seed: 11 votants simules + 3 sessions de vote (10 pour / 1 contre) - MoodSwitcher: dots colores au lieu d'icones Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const { currentMood, moods, setMood } = useMood()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mood-switcher" role="radiogroup" aria-label="Ambiance visuelle">
|
|
<UTooltip
|
|
v-for="mood in moods"
|
|
:key="mood.id"
|
|
:text="mood.label"
|
|
>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
:aria-checked="currentMood === mood.id"
|
|
:aria-label="`Ambiance ${mood.label}`"
|
|
class="mood-dot"
|
|
:class="{ 'mood-dot--active': currentMood === mood.id }"
|
|
:style="{ '--dot-color': mood.color }"
|
|
@click="setMood(mood.id)"
|
|
/>
|
|
</UTooltip>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mood-switcher {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.mood-dot {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
background: var(--dot-color, var(--mood-text-muted));
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.mood-dot:hover {
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
.mood-dot--active {
|
|
border-color: var(--mood-text);
|
|
box-shadow: 0 0 0 2px var(--mood-bg), 0 0 0 3px var(--mood-text-muted);
|
|
transform: scale(1.15);
|
|
}
|
|
</style>
|